:root{--bg:#10100f;--panel:#26231f;--panel2:#343027;--line:#605541;--gold:#e4c58c;--text:#f7ead3;--muted:#c7bca4;--green:#9fc39d;--red:#e88b83;--blue:#bbd5db;--radius:16px;color-scheme:dark}
body{background:radial-gradient(ellipse at top,#373028 0%,#1c1b19 34%,#0c0d0e 100%);color:var(--text)}
.app{max-width:770px;padding:14px 12px 105px}
.top{padding:4px 2px 12px;align-items:center}.brand{font-size:27px}.eyebrow{color:#d1ad72}.sub{font-size:12px}
.shield{border-radius:9px;padding:10px;background:#282723;border:1px solid #857052;color:#f1d8aa}
.nav{background:#171714f7;border-top:1px solid #63543b}.nav button.active{background:#42392c;color:#efcd90}
.section{background:linear-gradient(155deg,#292720,#1d1d1b);border-color:#655a48}
.heading{font-family:Georgia,serif;font-size:20px;font-weight:600}
.secondary{background:#363126;border-color:#6f604d}
.primary{background:#e9c98c}
.pill{background:#413b30;color:#edddbd}
input[type=text],input[type=number],select,textarea{background:#171815;border:1px solid #645848}
.modalpanel{background:#29251f;border-color:#856f52;border-radius:22px 22px 0 0}
.close{background:#4b4032}
.footer{padding-bottom:12px}
.board-section{background:transparent;border:0;padding:0;box-shadow:none;margin-bottom:10px}
.board-topline{padding:0 4px 10px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.board-title{font-family:Georgia,serif;font-size:22px;letter-spacing:.2px;color:#f7e4bf}
.board-sub{font-size:11px;color:#d9c6a4;margin-top:2px}
.board-actions{display:flex;align-items:center;gap:6px}
.mini-btn{background:#352f26;border:1px solid #78664d;color:#f6e0b7;border-radius:9px;padding:8px 10px;font-size:12px;font-weight:800;white-space:nowrap;min-height:36px}
.mini-btn.armed{background:#e0b66b;color:#231b0f;border-color:#ffda9c}
.grimoire-board{position:relative;width:100%;height: min(119vw,690px);min-height:380px;max-height:690px;overflow:hidden;border:8px solid #54402d;border-radius:21px;background:radial-gradient(ellipse at 48% 40%,#5b4b34 0%,#332b20 46%,#211d18 75%,#171713 100%);box-shadow:inset 0 0 0 2px #c4a678, inset 0 0 0 6px #372a20, 0 12px 27px #05050573;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.grimoire-board.arranging{touch-action:none;outline:2px solid #e7bb73;outline-offset:2px}
.board-ornament{position:absolute;inset:7%;border:1px solid #bba07245;border-radius:50%;pointer-events:none}
.board-ornament.inner{inset:21%;border-style:dashed;border-color:#bba07225}
.board-rune{position:absolute;top:10px;left:0;width:100%;text-align:center;font-size:10px;letter-spacing:5px;color:#b69766bd;pointer-events:none}
.board-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:39%;max-width:184px;min-height:112px;border-radius:50%;padding:17px 5px;background:radial-gradient(#3b3429,#25231e);border:1px solid #a387536a;box-shadow:0 0 20px #1d140f6e;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;text-align:center}
.center-icon{font-family:Georgia,serif;font-size:35px;line-height:1;color:#cdb280}
.center-phase{font-family:Georgia,serif;font-size:19px;line-height:1.2;color:#edcf96;margin-top:4px}
.center-alive{font-size:10px;color:#d4c4a4;margin-top:3px}
.grim-token{position:absolute;transform:translate(-50%,-50%);width:19.5%;max-width:105px;min-width:61px;min-height:62px;border-radius:11px;border:2px solid #a28f6c;background:linear-gradient(160deg,#45413a,#242625);box-shadow:0 3px 8px #0b0b0bad,inset 0 0 0 1px #d6b98a44;color:#fff0d9;padding:5px 3px 6px;text-align:center;z-index:2;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;touch-action:manipulation;outline:none}
.grim-token:focus-visible{outline:3px solid #f7d494;outline-offset:2px}
.grim-token.evil{border-color:#c87a72;background:linear-gradient(155deg,#543435,#262427)}
.grim-token.outsider{border-color:#88a99e}
.grim-token.dead{filter:saturate(.6);border-color:#a65c61;background:linear-gradient(155deg,#453137,#29272a);opacity:.88}
.grim-token.dead:after{content:'';position:absolute;width:102%;height:2px;top:50%;left:0;transform:rotate(-26deg);background:#e7a09d;box-shadow:0 0 3px #210809;pointer-events:none}
.grim-token.effect-poison{box-shadow:0 0 0 2px #7fbb79,0 0 11px #79ba7944}
.grim-token.effect-drunk{box-shadow:0 0 0 2px #ab91dc,0 0 11px #936cc377}
.grim-token.effect-poison.effect-drunk{box-shadow:0 0 0 2px #a7bca7,0 0 14px #a3acdb}
.grim-token.dragging{z-index:8;box-shadow:0 0 0 4px #ffdaa3,0 8px 18px #0009;cursor:grabbing;transition:none}
.grim-token .tok-seat{position:absolute;top:-8px;left:-8px;width:23px;height:23px;border-radius:50%;background:#e5c080;color:#2a231c;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:950;border:2px solid #513e29}
.grim-token .tok-glyph{font-family:Georgia,serif;font-size:19px;line-height:1.05;color:#e4c78d}
.grim-token.evil .tok-glyph{color:#efa59e}
.grim-token .tok-name{font-weight:750;font-size:clamp(9px,2.5vw,13px);line-height:1.1;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grim-token .tok-role{font-size:clamp(8px,2.15vw,11px);color:#e7d3b5;line-height:1.1;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grim-token .tok-icons{font-size:10px;min-height:10px;letter-spacing:0;white-space:nowrap}
.grim-token .tok-icons .s{margin:0 1px}
.grim-token .tok-icons .poison{color:#a0d69b}.grim-token .tok-icons .drunk{color:#ccafe9}.grim-token .tok-icons .protect{color:#f8d99c}.grim-token .tok-icons .dead{color:#f29c9c}
.board-legend{display:flex;flex-wrap:wrap;gap:5px 12px;color:#dfcfae;font-size:10px;padding:12px 7px 5px}
.board-legend span{white-space:nowrap}.board-legend b{font-size:14px;vertical-align:-1px}
.arrange-guide{padding:10px 12px;margin:8px 0;border:1px solid #ad8b57;background:#473c2c;border-radius:10px;font-size:12px;line-height:1.4}
.board-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:7px 4px}
.board-toolbar .mini-btn{flex:1}
.mini-status{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0 15px}
.status-toggle{flex:1 1 29%;min-width:105px;border:1px solid #6d6251;border-radius:10px;background:#38332b;color:#f2dec0;padding:11px 8px;text-align:center;font-size:12px;font-weight:800}
.status-toggle.selected{background:#bba072;color:#251d12;border-color:#f3d29c}
.status-toggle.died.selected{background:#b15a60;color:#fff7e5}
.modalplayer{font-family:Georgia,serif;font-size:25px;font-weight:600;margin:5px 0}
.modal-sub{font-size:12px;color:#e4d0ac}
.editor-details{border:1px solid #66543e;border-radius:12px;padding:0 12px 12px;margin-top:12px}
.editor-details summary{cursor:pointer;padding:12px 0;color:#e7c78f;font-size:13px;font-weight:800;list-style:none}
.editor-details summary:after{content:'⌄';float:right}
.editor-details[open] summary:after{content:'⌃'}
.editor-details .smallgrid{gap:4px}.editor-details .checkrow{padding:8px}
.quick-start{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;margin:13px 0}
.quick-start button{background:#383126;color:#edd9b7;border:1px solid #75644e;border-radius:9px;padding:10px 0;font-size:12px;font-weight:750;min-width:0}
.quick-start button.selected{background:#dfbd81;color:#30251a}
.quick-start button:focus-visible{outline:2px solid white}
.setup-hero{background:linear-gradient(120deg,#423323,#24251f);border:1px solid #92734a;border-radius:16px;padding:15px 15px 18px;margin-bottom:12px}
.setup-hero h2{font-family:Georgia,serif;font-size:24px;margin:0 0 7px}
.setup-hero p{font-size:12px;line-height:1.5;color:#e1cda9;margin:0}
.setup-cta{display:flex;gap:8px;margin-top:9px}.setup-cta button{flex:1}
@media(max-width:390px){.quick-start{grid-template-columns:repeat(6,1fr)}.grimoire-board{min-height:400px;height:123vw}.grim-token{width:18.5%;min-width:54px;min-height:57px}.grim-token .tok-glyph{font-size:17px}.board-center{width:34%;min-height:94px}.center-icon{font-size:28px}.center-phase{font-size:16px}.board-title{font-size:20px}.mini-btn{padding:8px 8px}}
@media(min-width:600px){.grimoire-board{height:620px}.grim-token .tok-name{font-size:13px}.grim-token .tok-role{font-size:12px}.quick-start{gap:7px}}
.grimoire-board.crowded .grim-token{width:16.2%;min-width:54px;min-height:54px;padding:3px 2px 3px}
.grimoire-board.crowded .grim-token .tok-glyph{font-size:15px}
.grimoire-board.crowded .grim-token .tok-role{font-size:clamp(8px,2vw,10px)}

.app{padding-top:max(14px,env(safe-area-inset-top))}

/* Android touch gestures: tokens must not initiate page scrolling while being arranged. */
.grimoire-board.arranging .grim-token{touch-action:none}