/* Launcher. Game-first: once playing, the iframe owns the whole viewport (100dvh, safe areas handled INSIDE the game). */
@font-face { font-family: "SoulpullGothic"; src: url(/assets/ui/soulpull-gothic.ttf) format("truetype"); font-display: swap; }
:root { --void: #07050d; --gold: #e8a33d; --gold-hi: #ffd24d; --violet-hi: #c3a4ff; --mute: #a698c9; --dim: #6f6094; --label: "Cinzel", Georgia, serif; --head: "SoulpullGothic", "Cinzel", Georgia, serif; color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--void); color: #e9e2fb; overflow: hidden; overscroll-behavior: none; font: 500 18px/1.5 Georgia, serif; }
#app { position: fixed; inset: 0; height: 100dvh; }
#stage { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .9s ease; }
#stage iframe { width: 100%; height: 100%; border: 0; display: block; background: #07050d; }
#app[data-state="playing"] #stage { opacity: 1; }

/* gate */
#gate { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); text-align: center; overflow: hidden; transition: opacity 1s ease, transform 1.2s ease, visibility 0s 1.2s; }
#app[data-state="playing"] #gate { opacity: 0; transform: scale(1.12); visibility: hidden; pointer-events: none; }
.g-bg { position: absolute; inset: -3%; background: url(/assets/shots/island.webp) center 40% / cover; filter: brightness(.48) saturate(1.15); transform: scale(1.06); animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { to { transform: scale(1.14) translate(-1.5%, -1%); } }
#gate::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 42%, rgba(120, 60, 220, .22), transparent 70%), radial-gradient(130% 90% at 50% 50%, transparent 50%, rgba(0, 0, 0, .75)); z-index: 1; }
#embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.g-core { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; width: min(760px, 100%); }
.g-logo { width: min(640px, 84vw); height: auto; filter: drop-shadow(0 0 40px rgba(150, 90, 255, .55)); animation: pulse 5s ease-in-out infinite; }
@keyframes pulse { 50% { filter: drop-shadow(0 0 70px rgba(190, 120, 255, .85)) brightness(1.08); } }
.g-tag { margin: 0; font: 600 clamp(11px, 1.5vw, 15px)/1.3 var(--label); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 2px 10px #000; }
.g-panel { display: none; min-height: 150px; width: 100%; max-width: 520px; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
#app[data-state="intro"] .g-panel[data-for="intro"], #app[data-state="loading"] .g-panel[data-for="loading"], #app[data-state="error"] .g-panel[data-for="error"] { display: flex; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 34px; border: 0; cursor: pointer; font: 700 15px/1 var(--label); letter-spacing: .22em; text-transform: uppercase; color: #fff; text-decoration: none; text-shadow: 0 1px 0 #000; background: linear-gradient(180deg, #c01f33, #6b1020); clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); transition: transform .15s, filter .2s; }
.btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 46%); }
.btn::after { content: ""; position: absolute; inset: 2px; clip-path: inherit; box-shadow: inset 0 0 0 1.5px var(--gold-hi); pointer-events: none; }
.btn:hover { filter: brightness(1.18) drop-shadow(0 0 14px rgba(255, 90, 104, .55)); } .btn:active { transform: scale(.985); }
.btn.big { min-height: 66px; padding: 0 56px; font-size: 18px; } .btn.dark { background: linear-gradient(180deg, #2a1b48, #130c20); }
.g-sub { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.link { all: unset; cursor: pointer; font: 600 11px/1 var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); padding: 12px 4px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.link:hover:not(:disabled) { color: #fff; } .link:disabled { cursor: not-allowed; opacity: .55; } .link em { font-style: normal; color: var(--dim); margin-left: .5em; }
.link:focus-visible, .btn:focus-visible, #host button:focus-visible, #host a:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.g-tip { margin: 0; color: var(--dim); font-size: 15px; min-height: 1.4em; max-width: 44ch; }
.bar { width: min(420px, 86vw); height: 14px; background: #120a20; border: 1px solid rgba(232, 163, 61, .6); position: relative; overflow: hidden; clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%); }
.bar i { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, #6a3de0, #c3a4ff, #ffd24d); box-shadow: 0 0 14px rgba(195, 164, 255, .8); transition: width .25s ease-out; }
.bar.indet i { width: 36%; animation: slide 1.2s ease-in-out infinite; } @keyframes slide { from { transform: translateX(-110%) } to { transform: translateX(300%) } }
.g-status { margin: 0; font: 600 12px/1 var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); display: flex; gap: 14px; align-items: baseline; } .g-status b { color: var(--gold-hi); font-size: 16px; letter-spacing: .08em; min-width: 3.4ch; text-align: right; }
.g-sub2 { margin: 0; color: var(--dim); font-size: 14px; }
.g-panel h2 { margin: 0; font: 400 28px/1.1 var(--head); color: var(--gold-hi); } .g-panel p { margin: 0; color: #d6cdee; }
.g-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* host controls (in game) */
#host { position: absolute; z-index: 20; top: max(0px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; display: none; flex-direction: column; align-items: center; }
#app[data-state="playing"] #host { display: flex; }
#hostToggle { all: unset; cursor: pointer; width: 54px; height: 22px; display: grid; place-items: center; background: rgba(7, 5, 13, .78); border: 1px solid rgba(232, 163, 61, .55); border-top: 0; border-radius: 0 0 12px 12px; opacity: .55; transition: opacity .2s; }
#hostToggle:hover, #hostToggle[aria-expanded="true"] { opacity: 1; } #hostToggle span { width: 16px; height: 2px; background: var(--gold-hi); box-shadow: 0 5px 0 var(--gold-hi); margin-top: -5px; }
#hostBar { display: none; gap: 4px; padding: 6px; background: rgba(7, 5, 13, .94); border: 1px solid rgba(232, 163, 61, .55); border-radius: 0 0 12px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
#host.open #hostBar { display: flex; } #host.open #hostToggle { border-radius: 0; }
#hostBar button, #hostBar a { all: unset; cursor: pointer; min-width: 64px; min-height: 52px; padding: 6px 8px; display: grid; place-items: center; gap: 2px; border-radius: 8px; color: var(--mute); }
#hostBar button:hover, #hostBar a:hover { background: rgba(157, 107, 255, .2); color: #fff; }
#hostBar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#hostBar b { font: 600 9px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; }
#mute[aria-pressed="true"] { color: var(--gold-hi); } #muteX { stroke-dasharray: 0 100; } #mute[aria-pressed="true"] #muteX { stroke-dasharray: 100 0; }
#net { position: absolute; z-index: 30; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); translate: -50% 0; max-width: 92vw; padding: 12px 20px; background: rgba(60, 14, 22, .95); border: 1px solid var(--gold-hi); color: #fff; font: 600 13px/1.3 var(--label); letter-spacing: .06em; text-align: center; }
@media (max-height: 420px) { .g-logo { width: min(340px, 40vw); } .g-core { gap: 8px; } .g-tag { display: none; } .g-panel { min-height: 0; } .btn.big { min-height: 56px; padding: 0 40px; } .g-tip { display: none; } .g-panel h2 { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition-duration: .01ms !important; } }
html[data-hero="tower"] .g-bg { background-image: url(/assets/shots/title-tower.webp); background-position: center 25%; filter: saturate(1.15) brightness(1.05); }

#fsHelp { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(4, 3, 8, .9); }
#fsHelp[hidden] { display: none; }
.fh-card { width: min(460px, 100%); max-height: 100%; overflow: auto; padding: 22px; text-align: left; background: linear-gradient(180deg, #1b1230, #0d0916); border: 1px solid rgba(232, 163, 61, .6); box-shadow: 0 20px 60px #000; }
.fh-card h2 { margin: 0 0 8px; font: 400 26px/1.1 var(--head); color: var(--gold-hi); } .fh-card p { margin: 0 0 10px; color: #d6cdee; font-size: 16px; }
.fh-card ol { margin: 0 0 16px; padding-left: 22px; color: #e9e2fb; font-size: 17px; line-height: 1.5; } .fh-card li { margin-bottom: 4px; }
@media (max-height: 420px) { .fh-card { padding: 14px 18px; } .fh-card h2 { font-size: 20px; } .fh-card p, .fh-card ol { font-size: 14px; margin-bottom: 6px; } }

.ico-play { display: inline-block; width: 0; height: 0; border-style: solid; border-width: .5em 0 .5em .82em; border-color: transparent transparent transparent currentColor; flex: none; margin-right: 6px; }