/* One wordmark, one invitation. The live arena owns the rest of the screen. */
.intro-curtain{position:fixed;inset:0;z-index:1;pointer-events:none;background:#080c12;opacity:0}
body:not([data-screen=title]) .intro-curtain,body:not(.lobby) .intro-curtain{display:none}
body[data-screen=title]{--title-safe:clamp(22px,4.5vw,72px)}
body[data-screen=title].lobby:after{background:linear-gradient(180deg,#080d16e8 0%,#080d1659 25%,transparent 43%),linear-gradient(0deg,#060b13f2 0%,#060b1380 14%,transparent 35%)}
body[data-screen=title][data-title-stage=menu].lobby:after{background:linear-gradient(180deg,#080d1680,transparent 25%),linear-gradient(0deg,#060b13f2,#060b135c 35%,transparent 62%)}
body[data-screen=title] .masthead{height:auto;inset:0 0 auto;padding:24px var(--title-safe);justify-content:flex-end;pointer-events:none}
body[data-screen=title] .masthead .brand,body[data-screen=title] .header-credits,body[data-screen=title] #help,body[data-screen=title] #gameMenuHint{display:none}
body[data-screen=title] .header-right{gap:12px;pointer-events:auto}
body[data-screen=title] .header-right #language{border:0;background:transparent;color:#e5e9e9;min-height:44px;padding:8px 4px;max-width:120px;font:400 13px var(--body)}
#language option{background:#101923;color:#f4f1e9}
body[data-screen=title] .title-settings{display:grid;place-items:center;min-width:44px;min-height:44px;padding:10px;border:1px solid #dae4e526;border-radius:50%;background:#0b111733;color:#dbe2e5;transition:background .18s,border-color .18s}
body[data-screen=title] .title-settings:hover{background:#ffffff12;border-color:#dae4e570}
.title-settings svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
body[data-screen=title][data-title-stage=menu] .title-settings{display:none}
body[data-screen=title] .lobby-screens{inset:0;width:100%;max-width:none;padding:0;overflow:visible;pointer-events:none}
.title-screen{min-height:100dvh;width:100%;animation:none;transform:none;pointer-events:none}
body[data-screen=title] .lobby-panel .title-screen h1{position:fixed;left:50%;top:clamp(100px,13vh,170px);width:max-content;max-width:none;margin:0;transform:translateX(-50%);transform-origin:top center;font:800 clamp(68px,8.3vw,126px)/1 var(--display);letter-spacing:.015em;color:#f5f3eb;white-space:nowrap;text-shadow:0 3px 32px #03071066;transition:top .65s cubic-bezier(.22,.8,.22,1),transform .65s cubic-bezier(.22,.8,.22,1)}
body[data-screen=title][data-title-stage=menu] .lobby-panel .title-screen h1{top:34px;transform:translateX(-50%) scale(.3)}
.title-start-hit{position:fixed;inset:0;z-index:5;width:100%;height:100%;border:0;padding:0;background:transparent!important;cursor:pointer;pointer-events:auto!important;border-radius:0;touch-action:manipulation}
.title-start-hit:active{transform:none}.title-start-hit:focus-visible{outline:0;box-shadow:none}
.title-start-prompt{position:absolute;left:50%;bottom:max(10vh,82px);transform:translateX(-50%);width:min(88vw,650px);height:30px;font:400 clamp(15px,1.2vw,18px)/1.5 var(--body);letter-spacing:.06em;text-align:center;color:#f2f1eb;text-shadow:0 2px 12px #0008}
.title-start-prompt>span{position:absolute;inset:0;opacity:0}.title-start-prompt>span:first-child{opacity:1}
.title-start-hit:focus-visible .title-start-prompt:after{content:'';position:absolute;left:35%;right:35%;bottom:-9px;border-bottom:1px solid #f4dec0}
.title-start-hit:active .title-start-prompt{color:#f4dec0}
body[data-screen=title] .title-actions{position:fixed;left:50%;top:65vh;transform:translateX(-50%);width:min(310px,84vw);align-items:stretch;gap:4px}
body[data-screen=title] .title-actions button{position:relative;display:block;min-height:46px;width:100%;padding:10px 16px;margin:0;border:0;border-radius:2px;text-align:center;background:transparent;color:#c4ced4;font:400 17px var(--body);letter-spacing:.02em;opacity:0;transform:translateY(12px);transition:background .18s,color .18s}
body[data-screen=title] .title-actions .title-play{font-size:29px;font-weight:600;color:#f7f5ef;min-height:56px;margin-bottom:8px}
body[data-screen=title] .title-actions .title-play:after{content:'';position:absolute;left:calc(50% - 18px);right:calc(50% - 18px);bottom:0;height:1px;background:#e3d7bc8c;transition:left .2s,right .2s}
body[data-screen=title] .title-actions .title-play:hover:after,body[data-screen=title] .title-actions .title-play:focus-visible:after{left:28%;right:28%}
body[data-title-stage=intro] .title-actions{visibility:hidden;pointer-events:none}
body[data-title-stage=menu] .title-actions button{animation:title-action-in .34s cubic-bezier(.2,.8,.2,1) both}
body[data-title-stage=menu] .title-actions button:nth-child(1){animation-delay:.45s}
body[data-title-stage=menu] .title-actions button:nth-child(2){animation-delay:.59s}
body[data-title-stage=menu] .title-actions button:nth-child(3){animation-delay:.73s}
body[data-screen=title] .title-actions button:hover{color:#f8e4c7;background:#ffffff08}
body[data-screen=title] .title-actions button:focus{opacity:1;transform:none;animation:none}
body[data-screen=title] #titleCredit{position:fixed;left:var(--title-safe);bottom:max(14px,env(safe-area-inset-bottom));z-index:8;display:flex;align-items:center;min-height:44px;max-width:calc(100vw - 2 * var(--title-safe));font:400 11px/1.5 var(--body);letter-spacing:.025em;color:#aebbc5;text-decoration:none;pointer-events:auto;transition:color .18s}
body[data-screen=title] #titleCredit:hover{color:#f4f1e9}
.background-setting{align-self:end}.background-setting button{width:100%;min-height:44px;padding:10px 14px;text-align:left;font:400 13px var(--body)}
@keyframes title-action-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
#language{width:auto;min-height:40px;padding:4px 22px 4px 8px;font-size:12px;cursor:pointer;color:#e1e6ec;background-color:#0c1520;border:1px solid #53616b;border-radius:3px}
.title-auth{position:fixed;z-index:8;left:50%;bottom:10vh;transform:translateX(-50%);width:min(88vw,460px);padding:24px 24px 18px;background:linear-gradient(145deg,#101a23f2,#080e15eb);border-top:1px solid #bfc9c166;text-align:center;pointer-events:auto;box-sizing:border-box}
/* GIS controls its own dark theme inside a light-scheme cross-origin frame.
   Match the embedding scheme so Chrome preserves transparent pill corners. */
.google-sign-in,.google-sign-in iframe{color-scheme:light;background:transparent}
.title-auth h2{margin:0 0 10px;font:500 23px var(--body);letter-spacing:.08em;color:#fff}.title-auth p{font:400 14px/1.5 var(--body);margin:0 0 16px}.title-auth small{display:block;margin:12px auto 0;max-width:360px;font:400 11px/1.55 var(--body);color:#aebcc6}.google-sign-in{display:flex;justify-content:center;min-height:0}.auth-status:empty{display:none}.auth-retry{min-height:44px;padding:10px 24px}.title-account{position:fixed;left:var(--title-safe);top:24px;z-index:8;pointer-events:auto;font:400 12px var(--body);min-height:44px;padding:8px 0;background:transparent;border:0;color:#dbe2e5}body:not([data-screen=title]) .title-auth,body:not([data-screen=title]) .title-account{display:none}
@media(max-width:700px){body[data-screen=title] .masthead{padding-top:max(14px,env(safe-area-inset-top));padding-bottom:14px}body[data-screen=title] .header-right{gap:8px}body[data-screen=title] .lobby-panel .title-screen h1{top:18vh;font-size:clamp(64px,17vw,110px)}body[data-screen=title][data-title-stage=menu] .lobby-panel .title-screen h1{top:28px;transform:translateX(-50%) scale(.34)}body[data-screen=title][data-title-stage=menu] #language{font-size:12px;max-width:88px}.title-start-prompt{bottom:13vh;letter-spacing:.025em}body[data-screen=title] .title-actions{top:62vh}body[data-screen=title] .title-actions button{font-size:16px}body[data-screen=title] .title-actions .title-play{font-size:27px}body[data-screen=title] #titleCredit{left:50%;transform:translateX(-50%);width:max-content;font-size:10px;bottom:max(9px,env(safe-area-inset-bottom))}.title-account{top:14px;max-width:35vw;font-size:11px}}
@media(max-height:560px){body[data-screen=title] .masthead{padding-top:12px;padding-bottom:12px}body[data-screen=title] .lobby-panel .title-screen h1{top:70px;font-size:clamp(58px,9vw,86px)}body[data-screen=title][data-title-stage=menu] .lobby-panel .title-screen h1{top:23px}.title-start-prompt{bottom:17vh}body[data-screen=title] #titleCredit{bottom:4px;font-size:10px}.title-auth{bottom:55px;max-height:calc(100dvh - 125px);overflow:auto;padding:18px}.title-account{top:12px}}
@media(max-height:560px) and (min-width:701px){body[data-screen=title] .title-actions{top:70vh;flex-direction:row;width:min(640px,88vw);justify-content:center;align-items:center;gap:16px}body[data-screen=title] .title-actions button,body[data-screen=title] .title-actions .title-play{font-size:17px;min-height:46px;width:auto;white-space:nowrap;margin:0;padding:10px 16px}}
@media(max-height:560px){body[data-screen=title]:has(.title-auth:not([hidden])) .lobby-panel .title-screen h1{top:23px;transform:translateX(-50%) scale(.3)}}
@media(prefers-reduced-motion:reduce){body[data-screen=title] .lobby-panel .title-screen h1{transition:none}body[data-title-stage=menu] .title-actions button{animation:none;opacity:1;transform:none}.title-start-prompt>span{transition:none}}
@media(prefers-contrast:more){body[data-screen=title] #titleCredit,body[data-screen=title] .title-actions button{color:#fff;text-shadow:0 1px 3px #000}body[data-screen=title] .title-settings{background:#0b1117;border-color:#dbe2e5}}
.film-guide-link{display:block;margin:24px 0 8px;padding:16px 0;font-size:18px;color:#e7c890;text-underline-offset:5px}
/* Account controls are confined to the title overlay and never cover gameplay. */
.title-auth{bottom:max(28px,5dvh);max-height:calc(100dvh - 100px);overflow:auto;overscroll-behavior:contain;border-radius:16px;border:1px solid #bac8d033;box-shadow:0 16px 70px #0008;padding:22px}
.title-auth [hidden]{display:none!important}
.title-auth h2{font-size:21px;letter-spacing:.03em}.title-auth .auth-intro{font-size:13px;margin-bottom:14px;color:#c3ced5}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#050b11;border-radius:10px;margin:0 0 16px}
.auth-tabs button{border:0;background:transparent;color:#a8b9c3;min-height:44px;border-radius:7px;font:500 14px var(--body)}.auth-tabs button[aria-pressed=true]{background:#25333e;color:#fff}
.auth-local-form,.auth-save{display:grid;gap:12px;text-align:left}.title-auth label{display:grid;gap:6px;text-align:left;font:500 13px/1.4 var(--body);color:#d4dfe5}
.title-auth input:not([type=checkbox]){width:100%;box-sizing:border-box;min-height:44px;border:1px solid #5b6d7880;background:#080f16;color:#fff;padding:10px 12px;border-radius:8px;font:400 16px/1.4 var(--body);letter-spacing:normal}
.title-auth input:focus-visible,.title-auth button:focus-visible{outline:2px solid #e7c890;outline-offset:2px}
.title-auth small{margin:0;text-align:left;max-width:none;font-size:11px;line-height:1.5;color:#9eafb9}.auth-local-form>small{margin-top:-7px}
.title-auth button{cursor:pointer}.title-auth button:disabled{opacity:.55;cursor:default}
.auth-submit,.auth-continue{min-height:46px;border:0;border-radius:8px;background:#e7dcc1;color:#111a21;font:600 15px var(--body);padding:10px 16px}
.auth-forgot,.auth-close{min-height:44px;padding:8px 10px;border:0;background:transparent;color:#c7d3db;font:400 13px var(--body);text-decoration:underline;text-underline-offset:3px}
.auth-google{padding-top:13px;border-top:1px solid #ffffff1c}.auth-google-load{display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;min-height:44px;width:100%;padding:6px 12px;border-radius:24px;border:1px solid #8e918f;background:#131314;color:#e3e3e3;font:500 14px/20px 'Google Sans',Roboto,Arial,sans-serif}
.auth-google-mark{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#fff}.auth-google-mark img{display:block;width:20px;height:20px;object-fit:contain}.auth-google-label{min-width:0;text-align:center}.auth-google-load:hover:not(:disabled){background:#202022}
.title-auth .auth-google-hint{margin-top:8px;text-align:center}.title-auth .auth-status,.title-auth .auth-google-error{margin:8px 0 0;font-size:13px;color:#ffc8ac}.auth-google-error:empty{display:none}
.auth-manage{display:grid;gap:10px}.auth-manage button,.auth-save-actions button{min-height:44px;padding:9px 12px;border:1px solid #637581;background:#17242d;color:#f2f5f7;border-radius:8px;font:500 13px var(--body)}
.auth-save-actions{display:flex;gap:10px;flex-wrap:wrap}.auth-save-actions button{flex:1}.title-auth .auth-saved-code{font-family:monospace;font-size:12px}.title-auth .auth-saved-check{display:flex;align-items:center;min-height:44px;gap:10px}.auth-saved-check input{width:18px;height:18px;accent-color:#e7c890}.auth-save .auth-save-hint{font-size:13px;line-height:1.55;margin:0}
.auth-privacy{margin-top:12px}.auth-privacy summary{min-height:36px;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;font:400 12px var(--body);color:#9eafb9}.auth-privacy summary svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3}.auth-privacy[open] summary svg{transform:rotate(90deg)}
body[data-screen=title]:has(.title-auth:not([hidden])) .lobby-panel .title-screen h1{top:24px;transform:translateX(-50%) scale(.3)}
@media(max-width:700px){.title-auth{width:calc(100vw - 28px);max-width:420px;bottom:max(18px,env(safe-area-inset-bottom));padding:18px;max-height:calc(100dvh - 94px)}.title-auth h2{font-size:19px}.title-auth .auth-intro{font-size:12px}.auth-local-form{gap:10px}.title-auth .auth-google-hint{font-size:10px}.auth-privacy{margin-top:6px}}
@media(max-height:560px){.title-auth{bottom:12px;max-height:calc(100dvh - 78px);width:min(440px,90vw);padding:16px}.title-auth h2{font-size:17px}.title-auth .auth-intro{display:none}.auth-tabs{margin-bottom:10px}}
body[data-screen=title]:has(.title-auth:not([hidden])) .field-caption{display:none}
@media(max-width:700px){body[data-screen=title]:has(.title-auth:not([hidden])) .lobby-panel .title-screen h1{left:22px;top:27px;transform:none;font-size:20px}}