/* One phone viewport, one current task. The content pane owns vertical scroll. */
[hidden]{display:none!important}
html,body{width:100%;min-height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
#app{position:relative;width:100%;height:100vh;height:var(--app-height,100dvh);min-height:0;margin:0;overflow:hidden}
/* Paint the iOS canvas too: the Home-indicator area can extend beyond dvh. */
html:has(.opening-shell){background-image:url('welcome-background.png');background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}
body:has(.opening-shell){background:transparent}
#app:has(.opening-shell){height:100vh;height:var(--app-height,100dvh);overflow:hidden}
.app-shell,.entry-shell{width:100%;max-width:none;height:100vh;height:100dvh;min-height:0}
.app-shell{padding:calc(8px + env(safe-area-inset-top)) 16px calc(81px + env(safe-area-inset-bottom))}
.app-shell .sidebar{width:100%;max-width:none;border-radius:0;padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
.app-shell .navbutton{min-height:49px;font-size:11px}
.app-shell .main-title{margin:5px 0 12px}
.app-shell .main-title h1{font-size:22px;margin:3px 0}
.app-shell .main-title .eyebrow{font-size:9px;letter-spacing:1.6px}
.screen-content{padding:0 0 8px;scroll-padding-bottom:80px}
.screen-content>*{max-width:780px;margin-left:auto;margin-right:auto}
.app-shell .panel{padding:20px;border-radius:18px;background:#17131de8;border-color:#d4c0a21a}
.panel h2{font-size:28px;letter-spacing:-.4px}.panel h3{font-size:22px}
.panel p{line-height:1.55;font-size:14px}
button{min-height:44px}button.primary,button.gold{font-weight:650}
button:disabled{opacity:.4}
.step-trail{display:flex;list-style:none;margin:0 0 18px;padding:0;gap:8px}
.step-trail li{display:flex;align-items:center;justify-content:center;flex:1;gap:6px;padding:8px 0;border-bottom:2px solid #ffffff15;color:#9a909d;font-size:11px;white-space:nowrap}
.step-trail li>span{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#ffffff0c;font-size:11px;flex-shrink:0}
.step-trail .current{color:#edd4b2;border-color:#cfb98d}.step-trail .current>span{background:#cfb98d;color:#211923;font-weight:700}
.step-trail .complete{color:#b5c5b6}.step-trail .complete>span{background:#91af9424}
.entry-shell{padding:calc(12px + env(safe-area-inset-top)) 22px calc(10px + env(safe-area-inset-bottom));overflow:hidden}
.entry-head,.entry-tabs,.entry-bottom,.entry-story{flex-shrink:0}
.entry-shell .entry-story{min-height:181px;margin:0 auto 13px;padding:32px 0 16px}
.entry-story h1{font-size:34px}.entry-story p{font-size:13px}
.entry-shell .entry-forms{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 1px 10px}
.entry-shell .entry-bottom{margin-top:0;padding-top:5px}
.install-guide{font-size:10px;text-align:center;margin-top:4px;color:#c4b19c}.install-guide summary{cursor:pointer;padding:6px}.install-guide>small{display:block;line-height:1.6;padding:6px}
.entry-shell .entry-tabs{margin-bottom:12px}
.entry-forms .step-trail{margin-bottom:12px}
.entry-forms .entry-intro{font-size:12px;line-height:1.45}
.entry-forms .field small{display:block;font-size:11px;margin-top:6px;line-height:1.4}
.entry-forms .create-step{padding:0 0 2px}
.wizard-actions{display:flex;gap:10px;align-items:stretch;margin-top:12px}
.wizard-actions>button{flex:1;min-width:0;padding:11px 9px;font-size:13px}
.creation-summary{padding:17px;background:#17131de8;border:1px solid #cfb98d33;border-radius:14px;margin-bottom:12px}
.creation-summary h3{font-size:24px;margin:6px 0 14px}
.creation-summary dl{margin:0}.creation-summary dl>div{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-top:8px}
.creation-summary dt{color:#aaa1af}.creation-summary dd{margin:0;text-align:right;overflow-wrap:anywhere}
.guided-setup{display:flex;flex-direction:column;min-height:100%;gap:0}
.setup-card{flex:1}.setup-card>.eyebrow{margin-bottom:7px}
.invite-code{display:flex;flex-direction:column;align-items:center;padding:15px;border:1px dashed #cfb98d50;border-radius:13px;margin:16px 0}
.invite-code strong{font-size:33px;letter-spacing:6px;color:var(--gold);font-weight:600}.invite-code small{font-size:10px}
.arrival-progress{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;margin:22px 0 10px}
.arrival-progress span{color:#aaa1af;font-size:11px}
.arrival-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.arrival-list li{display:flex;align-items:center;gap:7px;padding:8px;background:#ffffff04;border-radius:10px;min-width:0}
.arrival-list li>span:nth-child(2){font-size:12px;overflow-wrap:anywhere;flex:1;min-width:0}
.arrival-list small{font-size:9px;color:#a8b6a8}
.arrival-avatar{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#cfb98d16;color:#d4bc95;flex-shrink:0;text-transform:uppercase;font-size:12px}
.secondary-tools{border-top:1px solid #ffffff12;margin-top:18px;padding-top:12px}
.secondary-tools summary{cursor:pointer;font-size:12px;color:#c8b6a3;min-height:32px}
.secondary-tools p{font-size:12px;margin-bottom:4px}
.secondary-tools .panel{margin-top:8px}
.secondary-tools .section-gap{margin-top:10px}
.flow-footer{position:sticky;bottom:-1px;z-index:3;padding:13px 0 5px;background:linear-gradient(0deg,#0f0c15 65%,#0f0c1500);margin-top:15px}
.flow-footer .waiting-state{padding:12px;text-align:center;border:1px solid #cfb98d22;border-radius:12px;background:#17131de8;font-size:13px;color:#d5c3ac}
.role-chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}
.role-chips>span{font-size:12px;padding:6px 10px;border:1px solid;border-radius:20px}.role-chips>.team-good{color:#a9caff;border-color:#4a77b75c;background:#23457724}.role-chips>.team-evil{color:#ffa7ad;border-color:#a447555c;background:#77233224}
.setup-panel .section-gap{margin-top:14px}.setup-panel h3{display:none}
.setup-panel .notice{font-size:12px;line-height:1.5;margin-top:14px}
.setup-panel .setup-modes{margin-top:12px}.setup-modes button{font-size:12px;padding:9px}
.ready-checklist{list-style:none;padding:0;margin:20px 0}.ready-checklist li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #ffffff0b}
.ready-checklist li>span{color:#cdb78e;font-size:20px}.ready-checklist li>div{flex:1}.ready-checklist strong{display:block;font-size:13px;font-weight:600}.ready-checklist small{display:block;font-size:11px;margin-top:4px}
.conduct-choice{border:0;padding:0;margin:18px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.conduct-choice legend{font-size:12px;color:#d4c6c6;margin-bottom:9px}.conduct-choice button{text-align:left;padding:12px;background:#1b1620}
.conduct-choice button[aria-pressed=true]{border-color:#cbb28a;background:#4031255c}.conduct-choice strong,.conduct-choice small{display:block}.conduct-choice strong{font-size:12px}.conduct-choice small{font-size:10px;line-height:1.45;margin-top:5px}
.privacy-hint{font-size:11px!important;color:#b4a9b4!important}
.game-overview{display:flex;flex-direction:column;min-height:100%;gap:14px}
.phase-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.phase-heading>span{font-size:11px;text-transform:uppercase;letter-spacing:1.6px;color:#d3ba96}.phase-heading small{font-size:11px}
.game-overview .step-trail{margin-bottom:3px}
.current-step{padding:6px 0 0;text-align:left;text-shadow:0 2px 10px #000}
.current-step h2{font:30px/1.15 Georgia,serif;letter-spacing:-.5px;margin:7px 0 10px;max-width:520px}
.current-step p{font-size:14px;line-height:1.6;max-width:500px;color:#d9ced0}
.guided-timer{font-variant-numeric:tabular-nums;color:#d8bb8e;font-size:24px;margin-top:12px}
.art-space{flex:1;min-height:56px}
.player-action-dock{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding:14px;background:#110e17df;border:1px solid #cfb98d24;border-radius:18px;backdrop-filter:blur(8px)}
.waiting-label{font-size:12px;line-height:1.5;text-align:center;color:#c0b5c0;margin:2px 0}
.subtle-action{font-size:12px;color:#c1b1ad;background:transparent;border-color:transparent;text-align:center}
.event-summary{display:flex;gap:12px;text-align:left;align-items:center;border:0;padding:4px 2px;background:transparent}.event-summary span{flex:1;font-size:11px;line-height:1.4;color:#aaa1af}.event-summary small{font-size:10px;flex-shrink:0}
.narrator-screen{display:flex;flex-direction:column;gap:15px}
.conduction-status{padding:16px 18px;border:1px solid #cfb98d24;border-radius:14px;background:#cfb98d08}.conduction-status strong,.conduction-status small{display:block}.conduction-status strong{font-size:15px;margin:5px 0}.conduction-status small{font-size:12px}
.narrator-screen .stage{padding:18px!important;min-height:0;background:#17131de8!important}
.narrator-screen .stage-center{padding:14px 0 0;max-width:none}.narrator-screen .phase-symbol{display:none}.narrator-screen .stage h2{font-size:27px}.narrator-screen .stage p{font-size:13px}.narrator-screen .actions button{flex:1 1 120px;font-size:13px}
.conductor-dock{display:flex;gap:9px;margin:0}.conductor-dock button{flex:1;font-size:12px}
.narrator-access{padding:18px;margin:16px 0 0;border:1px solid #cfb98d30;border-radius:16px;background:#cfb98d07}.narrator-access h3{font-size:23px;margin-top:5px}.narrator-access p{font-size:13px;margin:8px 0 15px}
.settings-stack{display:flex;flex-direction:column;gap:14px}.settings-stack .panel-head{margin-bottom:5px}.settings-stack h2{font-size:24px}
.settings-stack .settings-row{font-size:13px;gap:14px}.settings-stack .settings-row small{display:block;font-size:10px;margin-top:4px}.settings-stack button.small{font-size:11px;white-space:nowrap;min-height:40px}
.fullscreen-row>small{max-width:57%;line-height:1.5}.leave-section{padding:3px 0 12px;text-align:center}.leave-section>small{display:block;font-size:10px;margin-top:8px}
.personal-back{margin-bottom:12px}.personal-back button{font-size:12px;min-height:38px}
.public-guide{height:100dvh;overflow:auto;padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom))}
@media(max-height:740px){.entry-shell .entry-story{min-height:126px;padding-top:13px;padding-bottom:10px;margin-bottom:8px}.entry-story h1{font-size:28px}.entry-story p{font-size:12px;margin-top:7px}.entry-story .eyebrow{font-size:9px}.entry-shell .entry-shortcuts button{min-height:36px;font-size:11px}.current-step h2{font-size:26px}.game-overview{gap:10px}.art-space{min-height:20px}.step-trail{margin-bottom:12px}.app-shell .main-title{margin-bottom:8px}.player-action-dock{padding:10px}}
@media(min-width:800px){.entry-shell>*{max-width:440px}.screen-content{padding-left:12px;padding-right:12px}.main-title{width:100%;max-width:780px;margin-left:auto!important;margin-right:auto!important}.app-shell .top{max-width:1024px;width:100%;margin:auto}.arrival-list{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Quiet opening: the artwork owns the screen; forms are a separate view. */
.entry-shell.opening-shell{position:absolute;inset:0;height:100%;display:block;padding:0;overflow:hidden;overscroll-behavior:none;background-image:url('welcome-background.png');background-position:center;background-size:cover;background-repeat:no-repeat}
.opening-shell:before{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;background-image:linear-gradient(180deg,#0c0b1030,transparent 20%,transparent 72%,#0c0b1040 100%),url('welcome-background.png');background-position:center;background-size:100% 100%,cover;background-repeat:no-repeat}
.opening-shell>#entry-welcome{position:absolute;inset:0 0 auto;width:100%;height:100vh;height:100svh;max-width:none;margin:0;overflow:hidden;touch-action:none;overscroll-behavior:none}
.welcome-header{position:absolute;top:calc(20px + env(safe-area-inset-top));left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;text-shadow:0 2px 10px #000}
.welcome-brand{font:27px/1 Georgia,serif;letter-spacing:.2px;color:#f1e8db}
.welcome-header small{font-size:10px;color:#d8cec8}
.welcome-actions{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:calc(100% - 44px);max-width:440px}
.welcome-actions>p{display:none}
.welcome-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.welcome-choices button{min-height:52px;border-radius:14px;font-size:14px;box-shadow:0 3px 18px #0004;transition:none;animation:none}
.welcome-choices button:not(.gold){background:#130f19db;border-color:#bda57c77;color:#eee1d0;backdrop-filter:blur(8px)}
.welcome-choices button:hover:not(:disabled){transform:none}
.opening-shell>#entry-flow{display:flex;flex-direction:column;position:relative;width:100%;height:100%;max-width:488px;margin:auto;padding:calc(14px + env(safe-area-inset-top)) 24px calc(14px + env(safe-area-inset-bottom));background:#100c16df}
.opening-shell>#entry-flow{height:100vh;height:100dvh}
.entry-flow-header{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-shrink:0;min-height:44px}
.entry-flow-header>button{width:40px;min-width:40px;padding:6px;background:transparent;border-color:#cfb98d24;flex-shrink:0}
.entry-flow-header h1{flex:1;font:26px/1.15 Georgia,serif;letter-spacing:-.5px;margin:0}
.entry-flow-header>span{font:12px Georgia,serif;color:#a79a9f;flex-shrink:0}
.opening-shell #entry-flow .entry-forms{flex:1;width:100%;min-height:0;padding:0 1px 12px;overflow-y:auto;overscroll-behavior:contain}
.entry-flow-footer{display:block;flex-shrink:0;margin:0;padding:8px 0 0;border:0}
.entry-flow-footer .entry-shortcuts{padding-top:8px}.entry-flow-footer .entry-shortcuts button{font-size:11px;min-height:40px}
.entry-flow-footer .install-guide{margin-top:3px}
@media(max-width:360px){.entry-flow-header>span{display:none}.welcome-brand{font-size:24px}.welcome-actions{width:calc(100% - 36px)}.welcome-choices button{font-size:13px}.opening-shell>#entry-flow{padding-left:20px;padding-right:20px}}
/* Safari's bars change dvh and height media queries while scrolling. Keep the
   welcome controls in the stable small viewport; forms retain dynamic height. */
@media(display-mode:standalone),(display-mode:fullscreen){.welcome-actions{bottom:calc(24px + env(safe-area-inset-bottom))}}
@media(max-height:650px){.entry-flow-header{margin-bottom:12px}}

/* Reserve exactly the fixed menu height; only screen-content scrolls. */
.app-shell,.app-shell.focus-screen{position:absolute;inset:0;height:100%;margin:0;--menu-height:calc(65px + env(safe-area-inset-bottom));padding-bottom:var(--menu-height)}
.app-shell>.top{margin:0 auto;width:100%}
.app-shell>.workspace{flex:1;min-height:0;padding-bottom:8px}
.app-shell>.sidebar{position:fixed;inset:auto 0 0;transform:none;display:flex;flex-direction:row;align-items:stretch;flex-shrink:0;width:100%;height:var(--menu-height);max-width:none;margin:0;padding:7px 8px calc(7px + env(safe-area-inset-bottom));border-radius:0;background:#110e16;border-top:1px solid #cfb98d25;z-index:30}
.app-shell>.sidebar>.navbutton{height:50px;min-height:50px;flex:1;min-width:0}
.opening-install-link{display:block;margin:8px auto 0;padding:5px 10px;min-height:32px;font-size:10px;color:#c9baa6;border:0;background:transparent;transition:none}
.opening-install-link:hover:not(:disabled){transform:none}
.installation-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;max-width:none!important;width:100%!important;margin:0!important;padding:calc(18px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom));background:#09070def}
.installation-card{width:100%;max-width:440px;max-height:100%;overflow-y:auto;padding:24px;border:1px solid #cfb98d35;border-radius:18px;background:#17121f;box-shadow:0 16px 70px #0008}
.installation-card h2{font-size:29px;margin:5px 0 22px}.installation-card h3{font:18px Georgia,serif;color:#dfcba8;margin:20px 0 10px}
.installation-card ol{margin:0;padding-left:20px;color:#e1d8dc;font-size:13px;line-height:1.7}.installation-card li{padding-left:3px;margin:5px 0}
.installation-card p{font-size:11px;line-height:1.5;color:#aaa0ae;margin:9px 0 15px}.installation-card button{margin-top:10px}

/* Public seats: names sit below the tokens, never over their contents. */
.village-ring{background:linear-gradient(#080d1540,#080d1540),url('village-square.png') center/cover no-repeat;border-radius:22px;margin-bottom:42px;isolation:isolate}
.village-ring .village-seat{width:56px;height:56px;border-radius:50%;overflow:visible;padding:4px;gap:2px;background:#171820ed;box-shadow:0 3px 12px #0009}
.village-ring .village-seat .seat-avatar{font-size:23px;line-height:26px}
.village-ring .village-seat .seat-label{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);display:block;width:80px;max-width:none;padding:3px 6px;border:1px solid #b8b0a14d;border-radius:9px;background:#0c0e14f5;color:#f6eee3;font-size:12px;font-weight:600;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 8px #0008}
.village-ring .village-seat.self{border-color:#d0aa76;box-shadow:0 0 0 2px #d0aa7666,0 3px 12px #0009}
.village-ring .village-seat.chosen{background:#443228;border-color:#e6c494;z-index:2}
.village-ring .village-seat.dead .seat-label{color:#b8aebc;text-decoration:line-through}
.village-ring .village-heart{background:#0c1018c9;border-color:#b8b0a13d;backdrop-filter:blur(3px)}
.village-ring.dense .village-seat{width:44px;height:44px}
.village-ring.dense .village-seat .seat-avatar{font-size:18px;line-height:20px}
.village-ring.dense .village-seat .seat-label{width:62px;font-size:10px;line-height:13px;padding:2px 4px}