/* The Inner Temple: shared styles.
   Layout: one phone-shaped play column. Screens use the Canvas's 390 x 844
   reference positions, anchored to the top or bottom edge so they adapt to
   taller and shorter phones. On wider screens the column stops growing at
   480px and the scene art fills the sides, blurred. */

:root {
  --gold: #ffe9a8;
  --gold-soft: #eccd8e;
  --cream: #fff3d6;
  --parchment: #f3dca0;
  --label: #d8c08a;
  --muted: #b9b1d4;
  --body-text: #efe4c8;
  --danger: #d6786e;
  --danger-text: #ffc6bf;
  --panel-bg: linear-gradient(to bottom, rgba(24, 22, 56, .94), rgba(12, 12, 32, .94));
  --panel-border: rgba(236, 205, 142, .65);
  --panel-shadow: inset 0 0 0 3px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .45);
  --night: #10152e;
  --f-display: 'Cinzel', Georgia, serif;
  --f-body: 'EB Garamond', Georgia, serif;
  --f-numbers: 'Alegreya Sans', system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ts: 1; /* text scale: Settings > Accessibility > Larger text */
  color-scheme: dark;
}
.larger-text { --ts: 1.15; }

/* The page itself never scrolls or zooms by accident on a phone:
   - fixed html/body: iPhone Safari can scroll a page even with overflow hidden,
     and restores that scroll on refresh, hiding the top of the screen;
   - touch-action manipulation: quick repeated taps (Continue, Continue)
     don't trigger double-tap zoom. Pinch-to-zoom still works. */
html, body { margin: 0; height: 100%; background: #07081a; overflow: hidden; overscroll-behavior: none; }
html { position: fixed; inset: 0; touch-action: manipulation; }
body { font-family: var(--f-body); color: var(--body-text); -webkit-text-size-adjust: 100%; }
/* 16px or larger, or iPhone Safari zooms in when the field is tapped. */
input, textarea, select { font-size: max(16px, 1em); }
* { box-sizing: border-box; }
button, input, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

#backdrop {
  position: fixed; inset: -40px;
  background: var(--night) center / cover no-repeat;
  filter: blur(22px) brightness(.4);
}
#stage {
  position: fixed; top: 0; bottom: 0; left: 50%;
  width: min(100vw, 480px); transform: translateX(-50%);
  overflow: hidden; background: var(--night);
  box-shadow: 0 0 60px rgba(0, 0, 0, .6);
}
.screen { position: absolute; inset: 0; overflow: hidden; }

/* Motion: the device setting or Settings > Reduce motion stops it all. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- scenes ---------- */
.scene-bg { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; }
.starry { background: radial-gradient(ellipse at 50% -10%, #241c4a 0%, #100d24 58%); }
.scrim-top { position: absolute; left: 0; right: 0; top: 0; height: calc(190px + var(--safe-top)); background: linear-gradient(to bottom, rgba(10, 6, 20, .5), rgba(10, 6, 20, 0)); }
.scrim-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; background: linear-gradient(to bottom, rgba(10, 6, 20, 0), rgba(10, 6, 20, .55)); }
.title-halo { position: absolute; top: calc(30px + var(--safe-top)); left: 0; right: 0; height: 130px; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(10, 6, 20, .55), rgba(10, 6, 20, 0)); }

.screen-title {
  position: absolute; top: calc(72px + var(--safe-top)); left: 0; right: 0; margin: 0;
  text-align: center; font-family: var(--f-display); font-weight: 700; font-size: 44px; line-height: 1.05;
  letter-spacing: 3px; padding-left: 3px; color: var(--cream);
  text-shadow: 0 0 6px rgba(10, 6, 20, .95), 0 0 16px rgba(10, 6, 20, .85), 0 2px 4px rgba(0, 0, 0, .9), 0 0 30px rgba(10, 6, 20, .6);
}
.screen-title.two-line { font-size: 38px; left: 16px; right: 16px; text-wrap: balance; }

/* ---------- bottom bar ---------- */
.navwrap { position: absolute; left: 16px; right: 16px; bottom: calc(14px + var(--safe-bottom)); height: 60px; z-index: 40; }
.navbar { width: 100%; height: 60px; display: flex; justify-content: center; gap: 10px; }
.tab {
  display: flex; align-items: center; justify-content: center; flex: 0 1 82px; min-width: 52px;
  border-radius: 14px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); text-decoration: none;
  background: rgba(10, 14, 36, .66); border: 1px solid rgba(243, 220, 160, .45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(10, 14, 36, .6);
  transition: transform .1s ease;
}
.tab svg { width: 44px; height: 44px; display: block; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
.tab-current { background: rgba(36, 34, 78, .82); border-color: var(--gold); box-shadow: 0 4px 14px rgba(0, 0, 0, .45), 0 0 12px rgba(255, 224, 138, .35); }
.tab:hover { background: rgba(24, 30, 66, .8); border-color: rgba(255, 233, 168, .8); }
.tab:active { transform: scale(.97); }

/* ---------- Energy bar ---------- */
.ebar-wrap { position: absolute; left: 50%; transform: translateX(-50%); width: min(260px, calc(100% - 128px)); bottom: calc(84px + var(--safe-bottom)); height: 20px; z-index: 5; }
.ebar { position: absolute; inset: 0; }
.ebar-dev { position: absolute; right: calc(100% + 12px); top: 50%; width: 34px; height: 34px; margin-top: -17px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(236, 205, 142, .55); background: rgba(10, 8, 24, .7); color: #ecd08e; }
.ebar-dev svg { width: 18px; height: 18px; }
.ebar-track { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; background: rgba(236, 205, 142, .16); box-shadow: inset 0 0 0 1.75px rgba(0, 0, 0, .47), 0 0 0 1.2px rgba(255, 226, 160, .85), 0 0 12px rgba(236, 205, 142, .55); }
.ebar-fill { position: absolute; inset: 0 auto 0 0; width: 0; overflow: hidden; background: linear-gradient(to bottom, #fff1b8 0%, #f7d067 16%, #e0aa3a 46%, #b87c1c 80%, #8a5a10 100%); }
.ebar-shine { position: absolute; inset: 0 auto 0 0; width: 0; height: 46%; background: linear-gradient(to bottom, rgba(255, 255, 255, .7), rgba(255, 255, 255, .08)); border-radius: 0 0 40% 40% / 0 0 100% 100%; }
.ebar-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--f-numbers); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; text-shadow: 0 0 2px #2b1605, 0 0 2px #2b1605, 0 0 3px #2b1605, 0 1px 3px #2b1605, 0 0 8px #2b1605; }

/* ---------- round icon buttons ---------- */
.back-btn, .gear-btn {
  position: absolute; display: flex; align-items: center; justify-content: center; text-decoration: none;
  border: 1px solid rgba(243, 220, 160, .55); border-radius: 50%; background: rgba(10, 14, 36, .72); z-index: 6;
}
.back-btn { left: 16px; top: calc(62px + var(--safe-top)); width: 44px; height: 44px; }
.back-btn svg { width: 22px; height: 22px; }
.gear-btn { right: 14px; bottom: calc(76px + var(--safe-bottom)); width: 36px; height: 36px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.gear-btn::before { content: ''; position: absolute; inset: -4px; } /* 44px touch target */
.gear-btn svg { width: 20px; height: 20px; }

/* ---------- panels, buttons, rows (Settings look) ---------- */
.panel { border: 1px solid var(--panel-border); border-radius: 14px; background: var(--panel-bg); box-shadow: var(--panel-shadow); padding: 14px 16px; }
.panel.flush { padding: 0; }
.panel.danger { border-color: rgba(214, 120, 110, .6); }
.panel p { margin: 6px 0 10px; font-size: calc(16.5px * var(--ts)); line-height: 1.3; color: var(--body-text); }
.card-head { padding: 14px 14px 6px; }
.card-label { font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--label); }
.card-label.danger { color: #e9a89f; }
.muted { color: var(--muted); }
.notice { color: var(--danger-text) !important; }

.btn {
  min-height: 48px; width: 100%; padding: 0 14px; border: 1px solid var(--gold-soft); border-radius: 12px;
  background: rgba(36, 34, 78, .92); color: var(--gold); cursor: pointer; text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: .03em;
  transition: box-shadow .15s ease, transform .15s ease;
}
.btn:hover { box-shadow: 0 0 16px rgba(255, 224, 138, .5); transform: translateY(-1px); }
.btn-small { min-height: 44px; font-size: 14px; margin-top: 8px; }
.btn-danger { border-color: var(--danger); color: var(--danger-text); }
.btn-disabled { opacity: .45; pointer-events: none; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.stack { display: flex; flex-direction: column; gap: 12px; }

.row-label { font-family: var(--f-display); font-size: 15.5px; font-weight: 600; color: var(--cream); line-height: 1.2; }
.row-sub { font-size: calc(15px * var(--ts)); line-height: 1.22; color: var(--muted); margin-top: 2px; }
.row-tag { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; border: 1px solid rgba(185, 177, 212, .5); font-size: 12px; line-height: 1.5; color: var(--muted); white-space: nowrap; vertical-align: 1px; }

.sw-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid rgba(243, 220, 160, .16); }
.sw-text { flex: 1; min-width: 0; }
.sw { position: relative; flex: none; width: 52px; height: 30px; padding: 0; border-radius: 15px; border: 1px solid var(--gold-soft); background: rgba(10, 14, 36, .8); cursor: pointer; }
.sw::before { content: ''; position: absolute; inset: -8px -4px; } /* 44px-tall touch target */
.sw span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--cream); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); transition: left .15s ease; }
.sw[aria-checked="true"] { background: #7a5c1e; }
.sw[aria-checked="true"] span { left: 25px; }

.seg-row { display: flex; gap: 6px; padding: 4px 14px 14px; }
.seg { flex: 1; height: 44px; padding: 0 4px; border-radius: 10px; border: 1px solid rgba(243, 220, 160, .35); background: transparent; color: #cfc6ad; cursor: pointer; font-family: var(--f-display); font-weight: 600; font-size: 14px; }
.seg[aria-checked="true"] { border-color: var(--gold); background: rgba(236, 205, 142, .2); color: var(--gold); }

.chev { display: inline-flex; flex: none; }
.chev svg { width: 20px; height: 20px; }

/* ---------- placeholders ---------- */
.placeholder-note {
  border: 2px dashed rgba(239, 228, 200, .45); border-radius: 14px; background: rgba(10, 14, 36, .78);
  padding: 14px 16px; text-align: center; font-size: calc(17px * var(--ts)); line-height: 1.35; color: var(--body-text);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.placeholder-tag { font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--label); margin-bottom: 4px; }

/* ---------- modal ---------- */
.modal-wrap { position: absolute; inset: 0; z-index: 60; }
.modal-shade { position: absolute; inset: 0; background: rgba(6, 5, 16, .7); }
.modal { position: absolute; left: 30px; right: 30px; top: 50%; transform: translateY(-50%); padding: 22px 20px; text-align: center; border: 2px solid var(--gold-soft); border-radius: 18px; background: rgba(14, 12, 34, .98); box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.modal.danger { border-color: var(--danger); }
.modal h2 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 22px; color: var(--cream); }
.modal p { font-size: calc(18px * var(--ts)); line-height: 1.35; margin: 10px 0 8px; }

/* Liquid gold: a slow shimmer sweeping across, and glints of glitter (Home and combat Energy bars). */
.ebar-fill::before, .en-fill::before {
  content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 240, 0) 35%, rgba(255, 255, 240, .75) 50%, rgba(255, 255, 240, 0) 65%, transparent 100%);
  background-size: 220% 100%; animation: goldSheen 3.2s ease-in-out infinite;
}
.ebar-fill::after, .en-fill::after {
  content: ''; position: absolute; inset: 0; opacity: .9; mix-blend-mode: screen;
  background-image:
    radial-gradient(circle, #fff 0 .8px, transparent 1.6px), radial-gradient(circle, #fff7d0 0 .7px, transparent 1.5px),
    radial-gradient(circle, #fff 0 .6px, transparent 1.4px), radial-gradient(circle, #ffe9a8 0 .9px, transparent 1.8px);
  background-size: 23px 11px, 31px 14px, 17px 9px, 41px 13px;
  background-position: 3px 2px, 14px 6px, 9px 4px, 27px 1px;
  animation: goldGlitter 2.6s linear infinite, goldTwinkle 1.3s ease-in-out infinite alternate;
}
.en-fill { position: relative; overflow: hidden; }
@keyframes goldSheen { 0% { background-position: 120% 0; } 100% { background-position: -100% 0; } }
@keyframes goldGlitter { from { background-position: 3px 2px, 14px 6px, 9px 4px, 27px 1px; } to { background-position: 26px 2px, 45px 6px, 26px 4px, 68px 1px; } }
@keyframes goldTwinkle { from { opacity: .35; } to { opacity: 1; } }