/* Opening only; the desktop game table keeps its existing design. */
#leaderboardTitleBtn,#openLeaderboard{display:none!important}
#titleScreen{display:block;background-image:url('assets/occult-unveiling-cover.png');background-size:cover;background-position:center;isolation:isolate}
#titleScreen:before,#titleScreen .title-art{display:none}
#titleScreen .title-card{position:absolute;inset:0;width:100%!important;max-width:none;margin:0;padding:0!important;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;overflow:visible}
#titleScreen h1{position:absolute;top:5%;left:5%;margin:0;font-size:clamp(20px,2.4vw,34px);text-shadow:0 2px 10px #000;letter-spacing:.12em}
#titleScreen .opening-chapter{position:absolute;top:44%;left:50%;transform:translateX(-50%);font-size:clamp(23px,3vw,38px);color:#eee7ce;letter-spacing:.18em;text-shadow:0 2px 12px #000}
#titleScreen #newGameBtn,#titleScreen #loadTitleBtn{position:absolute;left:50%;transform:translateX(-50%);width:220px;min-height:44px;border:1px solid #b7b39c88;background:#07191dc9;color:#efe5ce;border-radius:2px;font-size:16px}
#titleScreen #newGameBtn{bottom:22%}#titleScreen #loadTitleBtn{bottom:13%}
#titleScreen .opening-name,#titleScreen .gender-pick{display:none}
#titleScreen.opening-naming .opening-name{display:block;position:absolute;top:53%;left:50%;transform:translateX(-50%);width:240px;padding:10px;background:#07191dee;color:#eee7ce}
#titleScreen #accountTitleBtn{position:absolute;right:3%;bottom:3%;width:auto;background:#07191da8;border:0;font-size:13px}
#titleScreen .music-credit{position:absolute;left:3%;bottom:2%;max-width:240px;font-size:12px;background:#07191d99;padding:6px}
#titleScreen .music-credit small{display:none}
#accountPanel{background:linear-gradient(#031014ad,#031014ed),url('assets/occult-unveiling-cover.png') center/cover!important}
#accountPanel .account-modal{background:#d9d0b6;color:#302c25;border:1px solid #a29374;border-radius:2px;box-shadow:0 20px 80px #000a;backdrop-filter:none;width:min(480px,94vw);padding:30px}
#accountPanel h2,#accountPanel label,#accountPanel p,#accountPanel small{color:#39362e}
#accountPanel input{background:#eee7d2;color:#292c28;border:0;border-bottom:1px solid #887d62;border-radius:0}
#accountPanel button{border-radius:2px;background:#273e3c;color:#eae3cf}
#accountPanel .identity-help{font-size:12px;line-height:1.6;border-top:1px solid #a89a7e;padding-top:16px}
.identity-stamp{position:fixed;inset:0;display:grid;place-items:center;z-index:15000;background:#061315c9;color:#dbcaa1;font:28px Georgia,serif;letter-spacing:.2em;pointer-events:none;animation:identityReveal 1.3s both}
@keyframes identityReveal{0%{opacity:0;transform:scale(1.12)}25%,70%{opacity:1;transform:scale(1)}100%{opacity:0}}
.mobile-burn-edge{position:fixed;left:0;right:0;height:12px;pointer-events:none;background:linear-gradient(transparent,#a8542266,#d9954266,transparent);filter:blur(3px);will-change:top}
body.mt-phone #titleScreen{background-position:42% center}
body.mt-phone #titleScreen .title-card{width:100%!important;max-width:none;padding:0!important}
body.mt-phone #titleScreen h1{top:7%;left:7%;font-size:21px}
body.mt-phone #titleScreen .opening-chapter{top:43%;font-size:26px;white-space:nowrap}
body.mt-phone #titleScreen #newGameBtn{bottom:25%}body.mt-phone #titleScreen #loadTitleBtn{bottom:16%}
body.mt-phone #titleScreen .music-credit{bottom:3%;max-width:145px}
body.mt-phone #titleScreen #accountTitleBtn{bottom:4%;max-width:48%;font-size:12px}
body.mt-phone #app #tableView.cx-table.active{grid-template-rows:minmax(0,1fr) 176px}
body.mt-phone #app .table-card-dock{height:176px}
body.mt-phone #app .wb-dock-row{height:174px;grid-template-rows:repeat(2,76px);grid-auto-columns:calc((100% - 32px)/5);gap:6px 8px}
body.mt-phone #app .cx-card.wb-card{width:51px;height:76px}
body.mt-phone #app .wb-dock-row .cx-card{width:88%;justify-self:center}
body.mt-phone #app .cx-card .wb-card-art{height:46px;flex-basis:46px}
body.mt-phone #app .cx-detail{max-height:calc(var(--phone-height,100dvh) - 240px)}
body.mt-phone.mt-has-results #app #tableView.cx-table.active{grid-template-areas:"verbs" "outputs" "dock";grid-template-rows:minmax(0,1fr) 90px 176px}
body.mt-phone #mtOutputs{grid-area:outputs;display:flex;gap:12px;padding:6px 10px;overflow:auto;min-height:0;z-index:3}
body.mt-phone #mtOutputs .cx-desktop-results{position:relative!important;left:auto!important;top:auto!important;width:51px!important;flex:0 0 51px}
body.mt-phone.mt-has-results #app .cx-detail{max-height:calc(var(--phone-height,100dvh) - 334px)}
#titleScreen.opening-naming .gender-pick{display:flex;position:absolute;top:66%;left:50%;transform:translateX(-50%);gap:8px;margin:0}
#titleScreen.opening-naming .gender-pick button{font-size:12px;background:#07191de6;padding:5px 12px;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.identity-stamp{animation:none}.mobile-burn-edge{display:none}}

/* A visible ember and char boundary, without per-frame image decoding. */
.mobile-burn-edge{height:40px;transform:translateY(-50%);filter:none;background:linear-gradient(transparent 0%,#190c06cc 32%,#6b290ee6 43%,#e96a22 49%,#ffd18d 51%,#b74a17aa 56%,transparent 80%);clip-path:polygon(0 20%,15% 30%,30% 0,45% 25%,60% 8%,75% 35%,90% 15%,100% 25%,100% 90%,85% 80%,70% 100%,55% 75%,40% 95%,25% 70%,0 90%);box-shadow:0 0 18px #d7672244}
.mobile-burn-edge:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 20%,#ffd394 0 1px,transparent 2px),radial-gradient(circle at 43% 12%,#efae69 0 1px,transparent 2px),radial-gradient(circle at 72% 22%,#ffd394 0 1px,transparent 2px);}
/* Registration paper carries role creation on both devices. */
#accountPanel .account-modal{background:#ddd2b7 url('assets/identity-register.webp') center top/100% auto no-repeat;width:min(500px,94vw);padding:210px 54px 56px;max-height:94dvh;overflow:auto}
#accountPanel .account-modal>small{display:none}
#accountPanel h2{font-size:22px;margin:8px 0}
#accountPanel h3{font-size:16px;margin:12px 0 6px}
#accountPanel label{display:block;margin:8px 0;font-size:14px}
#accountPanel input{width:100%;padding:9px 8px;min-height:40px}
#identityFields .gender-pick{display:flex;gap:8px;margin:8px 0}
#identityFields .gender-pick button{flex:1;min-height:40px}
#identityFields .gender-pick button.selected{outline:2px solid #a68146;outline-offset:1px}
#identitySave{width:100%;min-height:40px;margin:8px 0}
#accountPanel .account-actions{display:flex;gap:8px;margin-top:14px}
#accountPanel .account-actions button{flex:1;min-height:42px}
body.mt-phone #accountPanel .account-modal{width:100%;padding:37vw 9vw 40px;max-height:calc(var(--phone-height,100dvh) - 20px)}
body.mt-phone #app .table-controls{display:flex!important;position:fixed!important;top:auto!important;bottom:max(6px,env(safe-area-inset-bottom))!important;left:8px!important;right:8px!important;height:40px;z-index:65;justify-content:center;background:#07191df2;gap:10px}
body.mt-phone #app .table-controls #tablePause,body.mt-phone #app .table-controls #tableSpeed{display:block!important;min-height:40px;min-width:90px;font-size:15px;border:1px solid #718d83}
body.mt-phone #app #tableView.cx-table.active{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
body.mt-phone #app .cx-detail{max-height:calc(var(--phone-height,100dvh) - 292px)}
body.mt-phone.mt-has-results #app .cx-detail{max-height:calc(var(--phone-height,100dvh) - 382px)}
/* Desktop registration: a separate illustration column, never under the form. */
body:not(.mt-phone) #accountPanel .account-modal{position:relative;isolation:isolate;box-sizing:border-box;width:min(940px,94vw);max-width:940px;max-height:calc(100dvh - 40px);min-height:540px;padding:28px 38px 28px 48%;background:#ddd2b7;overflow:auto}
body:not(.mt-phone) #accountPanel .account-modal:before{content:"";position:absolute;left:0;top:0;bottom:0;width:43%;background:#102527 url('assets/identity-register.webp') center/contain no-repeat;pointer-events:none;z-index:-1}
body:not(.mt-phone) #accountPanel .account-modal{padding-left:min(440px,45vw)}
body:not(.mt-phone) #accountPanel .account-modal>h2{margin:0 32px 8px 0;line-height:1.35}
body:not(.mt-phone) #accountPanel .account-modal>p{margin:8px 0;line-height:1.5}
body:not(.mt-phone) #accountPanel #identityFields,body:not(.mt-phone) #accountLoggedOut,body:not(.mt-phone) #accountLoggedIn{position:static;width:100%;min-width:0}
body:not(.mt-phone) #accountPanel #accountLoggedOut{display:block}
body:not(.mt-phone) #accountPanel #accountLoggedOut[hidden]{display:none}
body:not(.mt-phone) #accountPanel label{position:static;transform:none;width:auto;margin:10px 0;line-height:1.5}
body:not(.mt-phone) #accountPanel input{box-sizing:border-box;display:block;margin-top:4px;min-width:0;width:100%}
body:not(.mt-phone) #accountPanel .gender-pick{position:static;transform:none;display:flex;gap:10px;flex-wrap:wrap}
body:not(.mt-phone) #accountPanel .account-actions{flex-wrap:wrap}
body:not(.mt-phone) #accountPanel button{white-space:normal;line-height:1.4}
body:not(.mt-phone) #accountPanel .identity-help{margin-top:16px;padding-top:12px}
@media(max-height:620px){body:not(.mt-phone) #accountPanel .account-modal{min-height:0}}
@media(max-width:680px){body:not(.mt-phone) #accountPanel .account-modal{padding:24px;min-height:0}body:not(.mt-phone) #accountPanel .account-modal:before{display:none}}
/* Phone registration has its own illustration header in normal document flow. */
body.mt-phone #accountPanel .account-modal{box-sizing:border-box;background:#ddd2b7;width:min(440px,100%);padding:20px;min-height:0;max-height:calc(var(--phone-height,100dvh) - 20px);overflow:auto}
body.mt-phone #accountPanel .account-modal:before{content:"";display:block;position:static;height:126px;margin:-20px -20px 18px;background:#102527 url('assets/identity-register.webp') center 15%/100% auto no-repeat;pointer-events:none}
body.mt-phone #accountPanel h2{font-size:21px;line-height:1.4;margin:0 28px 8px 0}
body.mt-phone #accountPanel label{position:static;transform:none;width:auto;display:block;margin:10px 0;line-height:1.5}
body.mt-phone #accountPanel input{box-sizing:border-box;width:100%;min-width:0;margin-top:4px}
body.mt-phone #accountPanel .gender-pick{position:static;transform:none;display:flex;flex-wrap:wrap;gap:10px}
body.mt-phone #accountPanel .account-actions{display:flex;flex-wrap:wrap;gap:10px}
body.mt-phone #accountPanel button{line-height:1.4;white-space:normal}
body.mt-phone #accountPanel #accountLoggedOut{display:block}
body.mt-phone #accountPanel #accountLoggedOut[hidden]{display:none}
body.mt-phone #accountPanel .identity-help{line-height:1.6;margin-top:16px}
.ca-symbol{display:block;width:100%;height:100%;background-image:url('assets/relic-location-icons.webp');background-size:300% 200%;background-position:var(--ca-x) var(--ca-y);background-repeat:no-repeat;flex:1;min-height:0}
.cx-slot>button>.ca-symbol{height:62px;flex:0 0 62px}
/* Identical card dimensions on desk, output rail and hand; do not stretch to grid width. */
body.mt-phone #app .cx-card.wb-card,body.mt-phone #app .wb-dock-row .cx-card{box-sizing:border-box;width:56px!important;min-width:56px;height:84px!important;min-height:84px;flex:0 0 56px;padding:0;justify-self:center}
body.mt-phone #app .cx-card .wb-card-art{width:54px!important;height:54px!important;flex:0 0 54px!important;min-height:54px}
body.mt-phone #app .wb-dock-row{grid-auto-columns:56px;grid-template-rows:repeat(2,84px);justify-content:start;height:190px;gap:8px}
body.mt-phone #app .table-card-dock{height:192px}
body.mt-phone #app #tableView.cx-table.active{grid-template-rows:minmax(0,1fr) 192px}
body.mt-phone.mt-has-results #app #tableView.cx-table.active{grid-template-rows:minmax(0,1fr) 98px 192px}
body.mt-phone #mtOutputs .cx-desktop-results{width:56px!important;flex-basis:56px}
body.mt-phone #app .cx-detail{max-height:calc(var(--phone-height,100dvh) - 308px)}
body.mt-phone.mt-has-results #app .cx-detail{max-height:calc(var(--phone-height,100dvh) - 406px)}