/* taste-gate:allow ui-overreliance-in-frame — this file REMOVES on-screen furniture (pill bars, pink cards,
   tiles) so the scene carries the frame; it applies note 5939678d9810 rather than adding any overlay. */
/* On Air screen furniture (Maestro, 2026-10-22). Cameron: "looks like UI, not a game".
   One idea governs every element here: you are the star of a show that is broadcasting right now, so the
   interface is the BROADCAST, not an app on top of it. The top bar becomes a broadcast bug, the ratings become
   a live chyron, the dock becomes an unboxed row of lit cues over a scrim, the room name is a lower third,
   and talking is subtitles. Fewer rectangles: no pill bars, no pink cards, glass only where a panel holds
   real reading. Aura tokens (css/aura-tokens.css). The wordmark is the official PNG, never redrawn.
   Loaded LAST so it overrides style.css without editing it; remove the <link> and the old look returns. */
:root{
  --oa-ink:#0a0710;
  --oa-glass:linear-gradient(140deg,rgba(255,134,190,.30) 0%,rgba(195,166,255,.24) 48%,rgba(143,215,255,.20) 100%),rgba(38,16,44,.42);
  --oa-glass-strong:rgba(28,12,34,.72);
  --oa-iris:linear-gradient(100deg,#ffd3e8 0%,#ff86be 34%,#c3a6ff 68%,#8fd7ff 100%);
  --oa-rim:inset 0 1px 0 rgba(255,244,251,.55),inset 0 -1px 0 rgba(255,209,236,.18);
  --oa-hair:rgba(245,238,244,.16);
  --oa-text:var(--aura-warmWhite,#f5eef4);
  --oa-dim:rgba(245,238,244,.62);
  --oa-rose:var(--aura-rose,#ff86be);
  --oa-mint:var(--aura-mint,#8ff0d6);
  --oa-tally:#ff3b4e;
  --oa-sans:var(--entrance-sans,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif);
  --oa-ease:cubic-bezier(.2,.8,.2,1);
  --oa-blur:blur(26px) saturate(1.4);
}

/* ── scrims: the frame is the picture; legibility comes from light falloff, not boxes ───────── */
#play-ui::before,#play-ui::after{content:"";position:fixed;left:0;right:0;pointer-events:none;z-index:0}
#play-ui::before{top:0;height:150px;background:linear-gradient(180deg,rgba(30,10,36,.6),rgba(30,10,36,0))}
#play-ui::after{bottom:0;height:230px;background:linear-gradient(0deg,rgba(34,10,40,.74) 0%,rgba(52,16,58,.32) 48%,rgba(52,16,58,0) 100%)}

/* ── the broadcast bug: wordmark + tally lamp, top left ─────────────────────────────────────── */
.topbar{padding:calc(16px + env(safe-area-inset-top)) 22px 0;gap:18px;align-items:flex-start}
.hud-logo{width:104px;opacity:.94;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.episode{display:flex;align-items:center;white-space:nowrap;margin-top:3px;font:600 9.5px/1 var(--oa-sans);letter-spacing:.24em;color:var(--oa-text);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.episode .live-dot{width:7px;height:7px;margin-right:9px;background:var(--oa-tally);box-shadow:0 0 0 3px rgba(255,59,78,.18),0 0 14px rgba(255,59,78,.85);animation:oa-tally 2.4s ease-in-out infinite}
@keyframes oa-tally{0%,100%{opacity:1}50%{opacity:.55}}

/* ── the ratings chyron: numerals, hairline separators, no tiles ────────────────────────────── */
.hud-metrics{gap:0;align-items:flex-start}
.hud-metrics>div{padding:0 14px;border-left:1px solid var(--oa-hair);text-align:right}
.hud-metrics>div:first-child{border-left:0}
.hud-metrics span{font:600 7.5px/1 var(--oa-sans);letter-spacing:.22em;color:var(--oa-dim);opacity:1;margin-bottom:5px}
.hud-metrics b{font:200 26px/1 var(--oa-sans);letter-spacing:-.01em;color:var(--oa-text);background:linear-gradient(180deg,#fff 30%,#ffc6e1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums;text-shadow:0 1px 12px rgba(0,0,0,.45);transition:color .6s var(--oa-ease)}
.hud-metrics small{font:300 10px/1 var(--oa-sans);color:var(--oa-dim);opacity:1}
.topbar .round{width:34px;height:34px;border-radius:50%;background:transparent;border:1px solid var(--oa-hair);color:var(--oa-text);backdrop-filter:none;box-shadow:none;transition:background .2s var(--oa-ease),border-color .2s var(--oa-ease)}
.topbar .round:hover{background:rgba(245,238,244,.08);border-color:rgba(245,238,244,.35)}

/* ── the dock: lit cues on the floor of the frame, no container ──────────────────────────────── */
.dock{z-index:20!important;background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0;gap:6px;bottom:calc(18px + env(safe-area-inset-bottom));color:var(--oa-text)}
.dock button{position:relative;min-width:68px;padding:8px 6px 10px;border:0;border-radius:0;background:none!important;color:rgba(245,238,244,.86);text-shadow:0 1px 6px rgba(20,4,24,.7);font:600 8.5px/1 var(--oa-sans);letter-spacing:.18em;text-transform:uppercase;transition:color .25s var(--oa-ease)}
.dock button span{font-size:0!important;width:24px;height:24px;margin:0 auto 7px;display:block;background:currentColor;filter:drop-shadow(0 1px 4px rgba(20,4,24,.75));-webkit-mask:var(--oa-icon) center/contain no-repeat;mask:var(--oa-icon) center/contain no-repeat;transition:transform .35s var(--oa-ease)}
.dock button::after{content:"";position:absolute;left:50%;bottom:0;width:18px;height:2px;margin-left:-9px;border-radius:2px;background:var(--oa-iris);box-shadow:0 0 12px var(--oa-rose);transform:scaleX(0);transition:transform .35s var(--oa-ease)}
.dock button:hover{color:var(--oa-text)}
.dock button:hover span{transform:translateY(-2px)}
.dock button.active{color:#fff}
.dock button.active span{filter:drop-shadow(0 0 8px rgba(255,134,190,.9))}
.dock button::before{content:"";position:absolute;left:50%;top:2px;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:radial-gradient(circle,rgba(255,134,190,.45),rgba(195,166,255,.18) 55%,rgba(195,166,255,0) 72%);opacity:0;transform:scale(.6);transition:opacity .35s var(--oa-ease),transform .35s var(--oa-ease);pointer-events:none}
.dock button.active::before,.dock button:hover::before{opacity:1;transform:scale(1)}
.dock button.active::after{transform:scaleX(1)}
.dock button:active span{transform:scale(.9)}
.dock button,.dock button.active,.dock button:focus{outline:0!important;border:0!important;box-shadow:none!important}
.dock button:focus-visible span{outline:1.5px solid var(--oa-rose);outline-offset:6px;border-radius:6px}
.dock i{top:4px;right:calc(50% - 17px);width:6px;height:6px;background:var(--oa-tally);box-shadow:0 0 8px var(--oa-tally)}
.dock [data-panel=callsheet]{--oa-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='5' y='3.5' width='14' height='17' rx='2'/%3E%3Cpath d='M9 3.5v2h6v-2M8.5 10h7M8.5 13.5h7M8.5 17h4'/%3E%3C/svg%3E")}
.dock [data-panel=map]{--oa-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5l5.5-2 6 2 5.5-2v13l-5.5 2-6-2-5.5 2z'/%3E%3Cpath d='M9 4.5v13M15 6.5v13'/%3E%3C/svg%3E")}
.dock [data-panel=cast]{--oa-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8.5' r='3'/%3E%3Ccircle cx='16.5' cy='9.5' r='2.4'/%3E%3Cpath d='M3.5 19c.6-3.4 2.9-5.2 5.5-5.2s4.9 1.8 5.5 5.2M14.6 14.3c.6-.2 1.2-.3 1.9-.3 2.1 0 3.8 1.5 4.3 4.5'/%3E%3C/svg%3E")}
.dock [data-panel=moments]{--oa-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 18.5l5-6 3.5 3 7.5-9'/%3E%3Cpath d='M15 6.5h4.5V11'/%3E%3C/svg%3E")}
.dock #studio-open{--oa-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M5 20c.9-4 3.7-6.2 7-6.2s6.1 2.2 7 6.2'/%3E%3C/svg%3E")}
.dock #camera-mode{--oa-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='13' height='10' rx='2'/%3E%3Cpath d='M16 10.5l5-3v9l-5-3z'/%3E%3C/svg%3E")}
.dock #director-open{--oa-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h16v10H4z'/%3E%3Cpath d='M4 9.5l2.5-5 13 2.5-1 3'/%3E%3Cpath d='M9 5.2l-1.6 4.3M14 6.2l-1.4 3.3'/%3E%3C/svg%3E")}

/* ── where you are: a lower third, not a label ───────────────────────────────────────────────── */
.location{left:22px;bottom:calc(104px + env(safe-area-inset-bottom));text-shadow:0 1px 14px rgba(0,0,0,.55)}
.location .eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 8.5px/1 var(--oa-sans);letter-spacing:.26em;color:var(--oa-rose)}
.location .eyebrow::before{content:"";width:22px;height:1.5px;background:var(--oa-iris);box-shadow:0 0 8px var(--oa-rose)}
.location h2{font:200 30px/1.05 var(--oa-sans);letter-spacing:-.01em;color:var(--oa-text);margin:8px 0 6px;animation:oa-rise .7s var(--oa-ease) both}
.location p{font:400 11px/1.3 var(--oa-sans);color:var(--oa-dim);opacity:1}
@keyframes oa-rise{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* ── interaction prompt: a cue in the world ─────────────────────────────────────────────────── */
#focus-label{font:200 22px/1.1 var(--oa-sans);color:var(--oa-text);text-shadow:0 1px 14px rgba(0,0,0,.6)}
#focus-prompt button{margin-top:10px;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,134,190,.6);background:rgba(255,134,190,.14);color:var(--oa-text);font:600 10px/1 var(--oa-sans);letter-spacing:.16em;text-transform:uppercase;backdrop-filter:var(--oa-blur);box-shadow:0 0 22px rgba(255,134,190,.25)}
#focus-prompt kbd{margin-left:6px;opacity:.65;font:inherit}
#crosshair{color:rgba(245,238,244,.55);font-size:22px}

/* ── talking: subtitles on the picture, the cast's name as a super ──────────────────────────── */
#conversation{background:linear-gradient(180deg,rgba(40,14,44,0) 0%,rgba(52,18,58,.62) 30%,rgba(26,10,32,.86) 100%)!important;border:0!important;box-shadow:none!important;border-radius:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--oa-text);left:0!important;right:0!important;width:auto!important;bottom:0!important;padding:56px max(22px,calc(50vw - 330px)) calc(96px + env(safe-area-inset-bottom))!important;max-height:72vh;animation:oa-up .45s var(--oa-ease) both}
@keyframes oa-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
#conversation .conversation-head h2{font:200 32px/1 var(--oa-sans);letter-spacing:-.01em;color:var(--oa-text);background:var(--oa-iris);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 14px rgba(255,134,190,.35))}
#conversation .eyebrow{font:600 8.5px/1 var(--oa-sans);letter-spacing:.26em;color:var(--oa-rose)}
#conversation .close{background:transparent!important;border:1px solid var(--oa-hair)!important;color:var(--oa-text)!important;width:34px;height:34px;border-radius:50%}
#conversation-lines{font:300 17px/1.5 var(--oa-sans);color:var(--oa-text);text-shadow:0 1px 10px rgba(0,0,0,.5);max-height:30vh}
#conversation-lines p{margin-bottom:10px}
#talk-form{display:flex;gap:8px;align-items:center;margin-top:10px;padding:6px 6px 6px 18px;border-radius:999px;background:rgba(245,238,244,.08);border:1px solid var(--oa-hair);backdrop-filter:var(--oa-blur)}
#talk-input{flex:1;min-width:0;background:transparent!important;border:0!important;color:var(--oa-text)!important;font:400 15px/1.3 var(--oa-sans);outline:none}
#talk-input::placeholder{color:var(--oa-dim)}
#talk-mic,#talk-send{width:38px;height:38px;border-radius:50%;border:0;background:rgba(245,238,244,.1);color:var(--oa-text);display:grid;place-items:center}
#talk-send{background:var(--oa-iris);color:var(--oa-ink);font-weight:700}
.talk-meta,.talk-meta button{color:var(--oa-dim)!important;font:500 10px/1.4 var(--oa-sans);letter-spacing:.06em}

/* choices: lines you could say, numbered like a script, not pink cards */
.choice,#social-actions button{background:transparent!important;border:0!important;border-top:1px solid var(--oa-hair)!important;border-radius:0!important;box-shadow:none!important;color:var(--oa-text)!important;padding:13px 4px 13px 30px!important;margin:0!important;position:relative;font:300 15px/1.45 var(--oa-sans)!important;text-align:left;transition:background .2s var(--oa-ease),padding .25s var(--oa-ease)}
.choice:last-child,#social-actions button:last-child{border-bottom:1px solid var(--oa-hair)!important}
.choice::before,#social-actions button::before{content:"›";position:absolute;left:8px;top:11px;color:var(--oa-rose);font:300 20px/1 var(--oa-sans);transition:transform .25s var(--oa-ease)}
.choice:hover,#social-actions button:hover{background:linear-gradient(90deg,rgba(255,134,190,.14),rgba(255,134,190,0))!important;padding-left:36px!important}
.choice:hover::before,#social-actions button:hover::before{transform:translateX(4px)}
.choice-number{color:var(--oa-rose)!important;font:600 8.5px/1 var(--oa-sans);letter-spacing:.22em}

/* ── reading panels: one dark glass sheet that rises from the dock ───────────────────────────── */
.glass-panel,#drawer,.modal-card{background:var(--oa-glass)!important;border:1px solid rgba(255,214,236,.42)!important;color:var(--oa-text)!important;backdrop-filter:var(--oa-blur)!important;-webkit-backdrop-filter:var(--oa-blur)!important;box-shadow:var(--oa-rim),0 30px 80px rgba(40,10,40,.45),0 0 60px rgba(255,134,190,.16)!important;border-radius:26px}
#drawer{animation:oa-up .42s var(--oa-ease) both}
#drawer h2,.modal-card h2{font:200 30px/1.05 var(--oa-sans);letter-spacing:-.01em;color:var(--oa-text)}
.glass-panel .eyebrow,.modal-card .eyebrow,#drawer .eyebrow{color:#ffd6ea!important;letter-spacing:.24em;text-shadow:0 1px 8px rgba(60,10,50,.45)}
.glass-panel .muted,.modal-card .muted,.glass-panel p,.modal-card p{color:var(--oa-dim)!important}
.glass-panel .close,.modal-card .close{background:transparent!important;border:1px solid var(--oa-hair)!important;color:var(--oa-text)!important}
.button.primary{background:var(--oa-iris)!important;color:var(--oa-ink)!important;box-shadow:0 0 28px rgba(255,134,190,.35)!important;border:0}
.event-card,.moment-card,.cast-row{border-color:var(--oa-hair)!important;background:transparent}
.note-card{background:rgba(245,238,244,.05)!important;border:1px solid var(--oa-hair)!important;color:var(--oa-text)!important}
.map-room{background:rgba(245,238,244,.06)!important;border:1px solid var(--oa-hair)!important;color:var(--oa-text)!important;transition:background .2s var(--oa-ease)}
.map-room.pool{background:rgba(143,215,255,.14)!important}
.map-room.selected{background:rgba(255,134,190,.22)!important;border-color:rgba(255,134,190,.7)!important;box-shadow:0 0 22px rgba(255,134,190,.3)}
.pill{background:rgba(245,238,244,.08)!important;color:var(--oa-text)!important;border:1px solid var(--oa-hair)}
#modal{background:rgba(10,7,16,.45)!important;backdrop-filter:blur(6px)!important}

/* ── small world chips: activity feed, villa voice, toasts ──────────────────────────────────── */
.villa-voice button,.villa-voice span{background:rgba(14,9,20,.5)!important;border:1px solid var(--oa-hair)!important;color:var(--oa-text)!important;box-shadow:none!important}
#toast{background:var(--oa-glass-strong)!important;color:var(--oa-text)!important;border:1px solid var(--oa-hair)!important;backdrop-filter:var(--oa-blur)!important;border-radius:999px}

/* ── touch controls: quiet rings ────────────────────────────────────────────────────────────── */
#joystick{background:rgba(245,238,244,.06)!important;border:1px solid rgba(245,238,244,.28)!important;backdrop-filter:blur(10px)}
#joystick i{background:rgba(245,238,244,.55)!important;border:0!important;box-shadow:0 0 16px rgba(255,255,255,.25)}
#touch-interact{background:rgba(255,134,190,.16)!important;border:1px solid rgba(255,134,190,.6)!important;color:var(--oa-text)!important;font:600 13px/1 var(--oa-sans)}


/* ── the story cue: a teaser line on the picture, not a pink card ────────────────────────────── */
.opening-cue-button{background:none!important;border:0!important;border-left:2px solid transparent!important;border-image:var(--oa-iris) 1!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--oa-text);padding:10px 14px 12px!important;animation:oa-rise .7s var(--oa-ease) both}
.opening-cue-button small{font:600 8.5px/1 var(--oa-sans)!important;letter-spacing:.26em!important;color:var(--oa-rose)!important}
.opening-cue-button strong{font:200 22px/1.12 var(--oa-sans)!important;color:var(--oa-text);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.opening-cue-button em{font:500 10px/1.3 var(--oa-sans)!important;letter-spacing:.08em;color:var(--oa-dim)!important;font-style:normal}
.opening-cue-button>b{font:200 30px/1 var(--oa-sans)!important;color:var(--oa-rose);transition:transform .3s var(--oa-ease)}
.opening-cue-button:hover>b{transform:translateX(4px)}
/* one voice at a time: while the world offers you something to do, the story cue steps back */
.opening-cue{transition:opacity .35s var(--oa-ease),transform .35s var(--oa-ease)}
#play-ui:has(#focus-prompt:not([hidden])) .opening-cue,#play-ui:has(#conversation:not([hidden])) .opening-cue{opacity:0;transform:translateY(8px);pointer-events:none}

/* ── phones ─────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:650px){
  .topbar{padding:calc(12px + env(safe-area-inset-top)) 14px 0;gap:10px}
  .hud-logo{width:74px}
  #episode-label{display:none}
  .episode{margin-top:6px}
  .episode .live-dot{margin-right:0}
  .topbar .round{width:30px;height:30px}
  .hud-metrics{margin-left:auto}
  .hud-metrics>div{padding:0 7px}
  .hud-metrics b{font-size:19px}
  .hud-metrics span{font-size:6.5px;letter-spacing:.16em}
  .dock{width:calc(100% - 16px);gap:0;justify-content:space-around;bottom:calc(10px + env(safe-area-inset-bottom))}
  .dock button{min-width:0;flex:1;padding:8px 2px 10px;font-size:7.5px;letter-spacing:.14em}
  .dock button span{width:22px;height:22px;margin-bottom:6px}
  .location{left:16px;bottom:calc(86px + env(safe-area-inset-bottom))}
  .location h2{font-size:24px}
  #conversation{padding:44px 16px calc(84px + env(safe-area-inset-bottom))!important;max-height:76vh}
  #conversation-lines{font-size:16px}
  #conversation .conversation-head h2{font-size:26px}
  #drawer{border-radius:26px 26px 0 0!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;max-height:78vh;padding:22px 18px calc(96px + env(safe-area-inset-bottom))!important}
}
@media (prefers-reduced-motion:reduce){
  #play-ui *,#drawer,#conversation{animation:none!important;transition:none!important}
}