/* Variant A — Fiel al spec (WEB_VISUAL_SPECS.md)
   SYSTEM:
   - body has a fixed global-footer (.global-footer) ~52px tall
   - every .screen is height:100vh, padding-bottom for footer
   - hero content is flex-centered vertically + horizontally
   - no page scrolling anywhere
   - play-screen internal transcript is the only scroll container
*/

.v-a{}

/* Global footer — persistent across all screens */
.global-footer{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 28px;gap:20px;
  border-top:1px solid var(--ink-3-soft);
  background:var(--ink-bg);
  height:52px;
}
.global-footer .meta{color:var(--ink-2);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;font-family:var(--mono)}
.global-footer a{color:var(--ink-2)}
.global-footer a:hover{color:var(--ink-0)}
.global-footer .footer-brand{display:inline-flex;align-items:center;gap:4px}
.global-footer .footer-brand-img{height:26px;width:auto;display:block;opacity:0.85}

/* Shared screen shell — no scroll, centered hero */
.v-a .screen{
  position:relative;
  min-height:100vh;height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:80px 24px 72px;  /* top: host-chrome clearance; bottom: global footer */
  overflow:hidden;
}
/* Play screen overrides — has its own header + transcript scroll */
.v-a .screen-play{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0 0 52px;height:100vh;overflow:hidden}

/* ==================== Shared bordered card (gate / briefing / world / scenario) ==================== */
.v-a .card-frame{
  position:relative;
  border:1px solid var(--ink-3);
  background:rgba(26,22,20,0.4);
  padding:44px 56px;
  width:100%;
}
.v-a .card-frame::before,
.v-a .card-frame::after{
  content:"";position:absolute;width:10px;height:10px;border:1px solid var(--accent-gold);
}
.v-a .card-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.v-a .card-frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ==================== Shared "corner-frame" (gate / briefing / world / scenario) ====================
   Per design direction: no CSS border — just 4 gold corner ticks (rendered by <Ticks/>) that suggest a frame.
   <Ticks/> renders a .ticks div which drops 4 corners via pseudo-elements. We override its default
   color (--ink-3) to accent-gold for variant A and bump size slightly.
*/
.v-a .gate-card,
.v-a .briefing-body,
.v-a .world-body,
.v-a .scenario-body,
.v-a .end-body,
.v-a .feedback-body,
.v-a .thankyou-body{
  position:relative;
  background:rgba(26,22,20,0.35);
  border:none !important;
}
.v-a .gate-card > .ticks::before,
.v-a .gate-card > .ticks::after,
.v-a .gate-card > .ticks > span::before,
.v-a .gate-card > .ticks > span::after,
.v-a .briefing-body > .ticks::before,
.v-a .briefing-body > .ticks::after,
.v-a .briefing-body > .ticks > span::before,
.v-a .briefing-body > .ticks > span::after,
.v-a .world-body > .ticks::before,
.v-a .world-body > .ticks::after,
.v-a .world-body > .ticks > span::before,
.v-a .world-body > .ticks > span::after,
.v-a .scenario-body > .ticks::before,
.v-a .scenario-body > .ticks::after,
.v-a .scenario-body > .ticks > span::before,
.v-a .scenario-body > .ticks > span::after,
.v-a .end-body > .ticks::before,
.v-a .end-body > .ticks::after,
.v-a .end-body > .ticks > span::before,
.v-a .end-body > .ticks > span::after,
.v-a .feedback-body > .ticks::before,
.v-a .feedback-body > .ticks::after,
.v-a .feedback-body > .ticks > span::before,
.v-a .feedback-body > .ticks > span::after,
.v-a .thankyou-body > .ticks::before,
.v-a .thankyou-body > .ticks::after,
.v-a .thankyou-body > .ticks > span::before,
.v-a .thankyou-body > .ticks > span::after{
  border-color:var(--accent-gold);width:14px;height:14px;
}

/* ==================== GATE ==================== */
.screen-gate.v-a{padding:56px 24px 64px}
.screen-gate.v-a .gate-card{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:16px;padding:40px 48px;max-width:560px;width:100%;
  height:min(642px, calc(100vh - 128px));
}
.screen-gate.v-a .gate-glyph{margin-bottom:0}
.screen-gate.v-a .gate-glyph svg{width:112px;height:auto}
.screen-gate.v-a .gate-heading{font-family:var(--sans);font-weight:500;font-size:1.85rem;letter-spacing:-0.01em;color:var(--ink-0);margin:0;text-align:center}
.screen-gate.v-a .gate-body{font-family:var(--serif);font-size:1.02rem;line-height:1.6;color:var(--ink-1);max-width:460px;text-align:center}
.screen-gate.v-a .gate-body p{margin:0 0 0.65em}
.screen-gate.v-a .gate-body p:last-child{margin-bottom:0}
.screen-gate.v-a .gate-form{display:flex;width:100%;max-width:420px;margin-top:0;border-bottom:1px solid var(--ink-3);padding-bottom:4px;align-items:center}
.screen-gate.v-a .gate-form input{flex:1;padding:10px 0;border:0;background:transparent;color:var(--ink-0);font-family:var(--serif);font-size:1.03rem;letter-spacing:0.02em}
.screen-gate.v-a .gate-form input:focus{box-shadow:none;outline:0}
.screen-gate.v-a .gate-form .btn{border:0;padding:10px 16px;color:var(--ink-1);background:transparent;font-family:var(--sans);font-size:0.92rem;letter-spacing:0.1em;text-transform:uppercase}
.screen-gate.v-a .gate-form .btn:hover{color:var(--accent-terracota)}
.screen-gate.v-a .gate-form .btn.is-disabled,.screen-gate.v-a .gate-form .btn[disabled]{color:var(--ink-3)}
.screen-gate.v-a .gate-error{font-family:var(--serif);font-style:italic;color:var(--ink-1);font-size:0.92rem;text-align:center}

/* ==================== BRIEFING ==================== */
.screen-briefing.v-a{padding:56px 24px 64px;overflow-y:auto;justify-content:center}
.screen-briefing.v-a .briefing-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:640px;width:100%;
  padding:34px 48px 36px;
}
.screen-briefing.v-a .intro-eyebrow{text-transform:uppercase;letter-spacing:0.16em;color:var(--ink-2);margin:0;font-size:0.74rem}
.screen-briefing.v-a .intro-heading{font-family:var(--sans);font-weight:500;font-size:1.7rem;color:var(--ink-0);margin:0}
.screen-briefing.v-a .briefing-intro{color:var(--ink-1);font-size:1rem;margin:0}
.screen-briefing.v-a .expectation-inner{border:1px solid var(--ink-3-soft);padding:16px 24px;width:100%;text-align:left;margin-top:4px;background:rgba(0,0,0,0.15)}
.screen-briefing.v-a .expectation-inner ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.screen-briefing.v-a .expectation-inner li{display:flex;gap:12px;font-family:var(--serif);font-size:0.95rem;line-height:1.45;color:var(--ink-0)}
.screen-briefing.v-a .expectation-inner .dash{color:var(--ink-2)}
.screen-briefing.v-a .consent-row{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:4px}
.screen-briefing.v-a .consent-label{display:flex;gap:10px;align-items:center;font-family:var(--sans);color:var(--ink-1);cursor:pointer;font-size:0.92rem}
.screen-briefing.v-a .consent-label input{accent-color:var(--accent-gold)}
.screen-briefing.v-a .actions-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}
.screen-briefing.v-a .begin-hint{color:var(--ink-3);letter-spacing:0.08em;font-size:0.76rem}

/* ==================== WORLD ==================== */
.screen-world.v-a{padding:56px 24px 64px;overflow-y:auto;justify-content:center}
.screen-world.v-a .world-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;max-width:680px;width:100%;
  padding:34px 48px 36px;
}
.screen-world.v-a .intro-eyebrow{text-transform:uppercase;letter-spacing:0.16em;color:var(--ink-2);margin:0;font-size:0.74rem}
.screen-world.v-a .intro-heading{font-family:var(--sans);font-weight:500;font-size:1.8rem;color:var(--ink-0);margin:0 0 2px}
.screen-world.v-a .narration{color:var(--ink-0);font-family:var(--serif);font-size:1.04rem;line-height:1.6;text-align:left}
.screen-world.v-a .narration p{margin:0 0 0.75em}
.screen-world.v-a .narration p:last-child{margin-bottom:0}
.screen-world.v-a .actions-row{display:flex;gap:16px;align-items:center;margin-top:6px;justify-content:center}

/* ==================== SCENARIO ==================== */
.screen-scenario.v-a{padding:44px 24px 64px;justify-content:center;overflow-y:auto}
.screen-scenario.v-a .scenario-body{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:1040px;width:100%;margin:0 auto;
  padding:30px 36px 32px;
}
.screen-scenario.v-a .scenario-header{text-align:center;display:flex;flex-direction:column;gap:4px}
.screen-scenario.v-a .intro-eyebrow{text-transform:uppercase;letter-spacing:0.16em;color:var(--ink-2);margin:0;font-size:0.74rem}
.screen-scenario.v-a .intro-heading{font-family:var(--sans);font-weight:500;font-size:1.6rem;color:var(--ink-0);margin:0}
.screen-scenario.v-a .scenario-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;width:100%}
.screen-scenario.v-a .scenario-card{position:relative;text-align:left;border:1px solid var(--ink-3);background:transparent;padding:16px 14px;min-height:190px;display:flex;flex-direction:column;gap:7px;transition:border-color .18s ease;color:var(--ink-0);cursor:pointer}
.screen-scenario.v-a .scenario-card:hover{border-color:var(--accent-gold)}
.screen-scenario.v-a .scenario-card.selected{border-color:var(--accent-gold)}
.screen-scenario.v-a .scenario-card.selected .scenario-title{text-decoration:underline;text-decoration-color:var(--accent-gold);text-decoration-thickness:1px;text-underline-offset:6px}
.screen-scenario.v-a .scenario-num{color:var(--ink-3);letter-spacing:0.2em;font-size:0.72rem}
.screen-scenario.v-a .scenario-title{font-family:var(--sans);font-weight:500;font-size:0.98rem;color:var(--ink-0);margin:0;line-height:1.3}
.screen-scenario.v-a .scenario-hook{font-family:var(--serif);font-size:0.9rem;line-height:1.45;color:var(--ink-1);margin:0;flex:1}
.screen-scenario.v-a .scenario-meta{color:var(--ink-3);letter-spacing:0.1em;font-size:0.7rem}
.screen-scenario.v-a .scenario-pick{font-family:var(--sans);font-size:0.85rem;color:var(--ink-1);transition:color .15s ease;margin-top:4px}
.screen-scenario.v-a .scenario-card:hover .scenario-pick{color:var(--accent-teal)}
.screen-scenario.v-a .actions-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center;margin-top:8px}
.screen-scenario.v-a .begin-hint{color:var(--ink-3);letter-spacing:0.08em;font-size:0.78rem}

@media(max-width:960px){
  .screen-scenario.v-a .scenario-grid{grid-template-columns:repeat(2,1fr)}
}

/* ==================== PLAY ==================== */
.screen-play.v-a{background:var(--ink-bg)}
.screen-play.v-a .play-header{display:flex;justify-content:flex-end;align-items:center;padding:18px 220px 18px 24px;border-bottom:none;height:64px;flex-shrink:0}
.screen-play.v-a .play-header-left{display:flex;align-items:center}
.screen-play.v-a .play-header-right{display:flex;align-items:center;gap:10px}
.screen-play.v-a .play-header-right .sep{opacity:0.5}
.screen-play.v-a .scenario-label{color:var(--ink-2);border-bottom:1px solid var(--accent-gold);padding-bottom:2px}
.screen-play.v-a .menu-btn{margin-left:12px;color:var(--ink-2);font-size:1.2rem;padding:4px 8px;border:1px solid var(--ink-3-soft)}
.screen-play.v-a .menu-btn:hover{color:var(--ink-0);border-color:var(--ink-3)}

.screen-play.v-a .play-main{flex:1;overflow-y:auto;padding:72px 0 160px}
.screen-play.v-a .transcript{display:flex;flex-direction:column;gap:32px;max-width:860px;margin:0 auto;padding:0 24px}
.screen-play.v-a .turn.dm{font-family:var(--serif);font-size:1.1rem;line-height:1.7;color:var(--ink-0)}
.screen-play.v-a .turn.dm p{margin:0 0 1.1em}
.screen-play.v-a .turn.player{font-family:var(--serif);font-style:italic;color:var(--ink-1);line-height:1.65;display:flex;gap:10px}
.screen-play.v-a .turn.player .dash{color:var(--ink-2);flex-shrink:0}
.screen-play.v-a .loading-line{font-family:var(--serif);color:var(--ink-1);padding-top:8px}

.screen-play.v-a .edge-banner{max-width:860px;margin:12px auto 0;padding:10px 16px;border:1px solid var(--ink-3);color:var(--ink-1);font-family:var(--serif);display:flex;justify-content:space-between;align-items:center}
.screen-play.v-a .edge-banner.rate{border-color:var(--accent-terracota)}
.screen-play.v-a .banner-close{color:var(--ink-2);padding:0 8px}

.screen-play.v-a .play-input-bar{position:absolute;bottom:52px;left:0;right:0;background:var(--ink-bg);border-top:1px solid var(--ink-3);padding:12px 0}
.screen-play.v-a .play-input-inner{max-width:860px;margin:0 auto;padding:0 24px;display:flex;gap:10px;align-items:flex-end}
.screen-play.v-a .play-input-inner textarea{flex:1;resize:none;padding:12px 16px;border:1px solid var(--ink-3);background:transparent;color:var(--ink-0);font-family:var(--sans);font-size:1rem;line-height:1.5;min-height:48px;max-height:120px;overflow:hidden}
.screen-play.v-a .play-input-inner textarea:focus{border-color:var(--accent-teal);box-shadow:0 0 0 1px var(--accent-teal)}
.screen-play.v-a .play-input-inner .btn{padding:12px 22px;flex-shrink:0}

/* ==================== END ==================== */
.screen-end.v-a{padding:80px 24px 72px;justify-content:center}
.screen-end.v-a .play-header{position:absolute;top:0;left:0;right:0;border-bottom:none;padding:24px;height:64px;display:flex}
.screen-end.v-a .end-body{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:18px;max-width:560px;width:100%;padding:40px 48px;}
.screen-end.v-a .end-body .heading{font-family:var(--sans);font-weight:500;font-size:1.75rem;color:var(--ink-0);margin:0}
.screen-end.v-a .end-body .narration{color:var(--ink-0);font-family:var(--serif);font-size:1.05rem;line-height:1.6}
.screen-end.v-a .end-body .tail{color:var(--ink-1);font-size:0.98rem;margin-top:8px}

/* ==================== FEEDBACK (stepped) ==================== */
.screen-feedback.v-a{padding:0 24px 72px;justify-content:flex-start}
.screen-feedback.v-a .feedback-topbar{display:flex;justify-content:flex-end;align-items:center;width:auto;padding:20px 24px 0;margin-bottom:24px;position:absolute;top:0;left:120px;right:220px}
.screen-feedback.v-a .feedback-topbar .step-indicator{color:var(--ink-2);font-family:var(--mono);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase}
.screen-feedback.v-a .feedback-body{display:flex;flex-direction:column;gap:22px;max-width:640px;width:100%;margin:auto 0;padding:36px 48px 40px;}
.screen-feedback.v-a .step-progress{display:flex;gap:6px;margin-bottom:8px}
.screen-feedback.v-a .progress-tick{flex:1;height:2px;background:var(--ink-3-soft);transition:background .3s ease}
.screen-feedback.v-a .progress-tick.on{background:var(--accent-gold)}
.screen-feedback.v-a .q-block{display:flex;flex-direction:column;gap:12px;min-height:180px}
.screen-feedback.v-a .q-title{font-family:var(--serif);font-size:1.2rem;line-height:1.45;color:var(--ink-0)}
.screen-feedback.v-a .q-hint{font-family:var(--serif);color:var(--ink-1);font-size:0.98rem}
.screen-feedback.v-a textarea{resize:vertical;padding:12px 14px;border:1px solid var(--ink-3);background:transparent;color:var(--ink-0);font-family:var(--sans);font-size:1rem;min-height:96px;line-height:1.5}
.screen-feedback.v-a textarea:focus{border-color:var(--accent-teal);box-shadow:0 0 0 1px var(--accent-teal);outline:0}
.screen-feedback.v-a .error{color:var(--ink-1);font-size:0.95rem;font-family:var(--serif)}
.screen-feedback.v-a .scale-row{display:flex;gap:10px;margin-top:4px}
.screen-feedback.v-a .scale-pill{font-family:var(--mono);font-size:1rem;padding:10px 18px;border:1px solid var(--ink-3);color:var(--ink-2);background:transparent;transition:all .15s ease}
.screen-feedback.v-a .scale-pill:hover{color:var(--ink-0);border-color:var(--ink-1)}
.screen-feedback.v-a .scale-pill.selected{color:var(--ink-0);border-color:var(--accent-gold);background:rgba(183,155,90,0.1)}
.screen-feedback.v-a .scale-labels{display:flex;justify-content:space-between;margin-top:6px;color:var(--ink-2);font-size:0.78rem}
.screen-feedback.v-a .radio-list{display:flex;flex-direction:column;gap:10px}
.screen-feedback.v-a .radio-row{display:flex;align-items:center;gap:12px;cursor:pointer}
.screen-feedback.v-a .radio-row input{position:absolute;opacity:0;pointer-events:none}
.screen-feedback.v-a .radio-dot{width:16px;height:16px;border:1px solid var(--ink-3);border-radius:50%;flex-shrink:0;transition:all .15s ease;position:relative}
.screen-feedback.v-a .radio-row input:checked + .radio-dot{border-color:var(--accent-gold)}
.screen-feedback.v-a .radio-row input:checked + .radio-dot::after{content:"";position:absolute;inset:3px;background:var(--accent-gold);border-radius:50%}
.screen-feedback.v-a .q-follow{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.screen-feedback.v-a .q-follow-title{font-size:0.95rem;color:var(--ink-1)}
.screen-feedback.v-a .actions-row{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-top:8px}

/* ==================== THANKYOU ==================== */
.screen-thankyou.v-a{justify-content:center;padding:80px 24px 72px}
.screen-thankyou.v-a .play-header{position:absolute;top:0;left:0;right:0;padding:18px 24px;border-bottom:none;height:64px;display:flex}
.screen-thankyou.v-a .thankyou-body{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 48px;gap:18px;max-width:560px;width:100%}
.screen-thankyou.v-a .heading{font-family:var(--sans);font-weight:500;font-size:1.75rem;margin:0;color:var(--ink-0)}
.screen-thankyou.v-a .narration{color:var(--ink-0);font-family:var(--serif);font-size:1.05rem;line-height:1.6}
.screen-thankyou.v-a .narration p{margin:0 0 0.9em}

/* ==================== EDGE ==================== */
.screen-edge.v-a .edge-full{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;max-width:520px}
.screen-edge.v-a .edge-full .narration{color:var(--ink-1);font-size:1.1rem;font-family:var(--serif);line-height:1.6}

/* ==================== Transitions ==================== */
.fade-enter{animation:fadeIn .35s ease forwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}