/* Here to Secure — Foundation terminal chrome around paper dossiers. Dark-only. */
:root{color-scheme:dark;--bg:#0b0c0d;--panel:#131517;--panel2:#1a1d20;--line:#2d3237;--ink:#ebe7dc;--muted:#a3a7a6;--faint:#757b7c;
 --paper:#ece7da;--paper2:#e1dbcb;--paper-ink:#1b1a17;--paper-muted:#585548;--accent:#e3a346;--accent-ink:#1d1306;--danger:#e0574d;--good:#69c088;
 --safe:#4f9d69;--euclid:#d9a441;--keter:#cf4a3f;
 --type:"Courier Prime","Courier New",Courier,ui-monospace,monospace;--mono:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;--serif:Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
 background:var(--bg);color:var(--ink);font-family:var(--sans)}
html{background:var(--bg)}
body{margin:0;background:radial-gradient(1200px 500px at 50% -120px,#2a1513 0,transparent 70%),linear-gradient(#0e0f10,#090a0b);min-height:calc(100*var(--uh))}
body p{color:inherit}
.hts-top{position:sticky;top:0;z-index:30;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:10px clamp(14px,calc(3*var(--uw)),36px);background:#0b0c0dee;border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.hts-top a{font:700 15px var(--sans)}
.hts-top span{font:11px var(--mono);letter-spacing:.14em;color:var(--accent)}
.hts-main{max-width:1560px;margin:0 auto;padding:22px clamp(12px,calc(2.4*var(--uw)),28px) 140px}

/* Buttons: explicit four-sided borders, no shadow (site rule). */
.hts-main button,.hts-top button,.hts-rules button,.results-dialog button{font:700 13px/1.2 var(--mono);letter-spacing:.02em;min-height:38px;padding:9px 14px;border-radius:3px;cursor:pointer;
 background:#22272b;color:var(--ink);border-top:1px solid #4a525a;border-right:1px solid #4a525a;border-bottom:1px solid #4a525a;border-left:1px solid #4a525a;box-shadow:none}
.hts-main button:hover:not(:disabled){background:#2c3237}
.hts-main button.hts-primary,.results-dialog button.hts-primary{background:var(--accent);color:var(--accent-ink);border-top-color:#f3c06f;border-right-color:#f3c06f;border-bottom-color:#f3c06f;border-left-color:#f3c06f}
.hts-main button.hts-primary:hover:not(:disabled){background:#efb35a}
.hts-main button.hts-danger{background:#3a1715;color:#ffd9d4;border-top-color:var(--danger);border-right-color:var(--danger);border-bottom-color:var(--danger);border-left-color:var(--danger)}
.hts-main button.hts-ghost,.hts-top button.hts-ghost,.hts-rules button.hts-ghost{background:transparent}
.hts-main button:disabled{opacity:.45;cursor:default}
.hts-main button.up{color:#bff0cf}.hts-main button.down{color:#ffc4bd}
:focus-visible{outline:3px solid #ffd27a;outline-offset:2px}
.hts-main label{display:flex;flex-direction:column;gap:6px;font:700 12px/1.4 var(--sans);color:#c4c8c6;margin:0}
.hts-main select,.hts-main input{min-height:42px;background:#101214;color:var(--ink);border-top:1px solid #4a525a;border-right:1px solid #4a525a;border-bottom:1px solid #4a525a;border-left:1px solid #4a525a;border-radius:3px;padding:8px 10px;font:15px var(--sans)}
.hts-muted{color:var(--muted);font-size:13px}
.hts-fine{font-size:12px;color:var(--muted);line-height:1.5}
.hts-error{background:#3a1715;border-left:4px solid var(--danger);padding:10px 14px;margin:12px 0;color:#ffd9d4}
.hts-connection{font:11px var(--mono);color:var(--faint);letter-spacing:.06em;margin:4px 0 10px;min-height:1em}
.hts-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 6px}

/* ---------- Paper documents ---------- */
.hts-doc{background:linear-gradient(180deg,var(--paper),var(--paper2));color:var(--paper-ink);border-radius:2px;box-shadow:0 1px 0 #fff4 inset,0 14px 40px #0009}
.hts-doc-bar{display:flex;justify-content:space-between;gap:10px;padding:7px 14px;background:#111;color:#e8e3d6;font:11px var(--mono);letter-spacing:.14em}
.hts-cover-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;padding:22px 24px}
.hts-cover h1{font:700 clamp(36px,calc(6*var(--uw)),64px)/1 var(--type);letter-spacing:-.03em;margin:8px 0 2px;color:var(--paper-ink)}
.hts-cover h1 span{color:var(--keter)}
.hts-sub{font:italic 20px var(--serif);margin:0 0 14px;color:var(--paper-muted)}
.hts-field{font:15px/1.55 var(--serif);margin:0 0 10px;color:var(--paper-ink)}
.hts-field b{font-family:var(--type)}
.hts-class-safe{color:var(--safe)}.hts-class-euclid{color:#a87515}.hts-class-keter{color:var(--keter)}
.hts-redact{font:16px var(--mono);color:#151515;letter-spacing:-.05em;margin:12px 0 0;user-select:none}
.hts-cover-art{align-self:center}
.hts-setup-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:22px 0 8px}
.hts-directors{border:1px solid var(--line);border-radius:4px;margin:16px 0 0;padding:12px 14px 16px;background:var(--panel)}
.hts-directors legend{font:700 12px var(--mono);letter-spacing:.1em;padding:0 6px;color:var(--accent)}
.hts-directors legend small{font:12px var(--sans);letter-spacing:0;color:var(--muted)}
.hts-director-grid{display:grid;grid-template-columns:110px repeat(6,minmax(0,1fr));gap:10px;margin-top:8px}
.hts-main button.hts-pick,.hts-main button.hts-pick-random{padding:0;background:transparent;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;text-align:left;display:block;min-height:0}
.hts-main button.hts-pick-random{display:grid;place-items:center;border-top:1px dashed #555;border-right:1px dashed #555;border-bottom:1px dashed #555;border-left:1px dashed #555;color:var(--muted)}
.hts-main button.hts-pick.selected,.hts-main button.hts-pick-random.selected{border-top:2px solid var(--accent);border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);border-left:2px solid var(--accent)}
.hts-main button.hts-pick-random.selected{color:var(--accent)}
.hts-panel{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:18px 20px}
.hts-panel h2{margin:0 0 6px;font:700 22px var(--type)}

/* ---------- Art placeholders ---------- */
.hts-art{--ratio:4/3;margin:0;aspect-ratio:var(--ratio);background:#2a2925;overflow:hidden;position:relative}
.hts-art img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.05)}
.hts-art.pending{background:repeating-linear-gradient(135deg,#d6cfbd 0 10px,#cdc5b1 10px 20px)}
.hts-art-pending{position:absolute;inset:6px;display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:flex-start;padding:8px 10px;
 border-top:1px dashed #6d6656;border-right:1px dashed #6d6656;border-bottom:1px dashed #6d6656;border-left:1px dashed #6d6656;color:#3b3830;overflow:hidden}
.hts-art-stamp{font:700 10px var(--mono);letter-spacing:.16em;color:#8a241c;border-top:2px solid #8a241c;border-right:2px solid #8a241c;border-bottom:2px solid #8a241c;border-left:2px solid #8a241c;padding:1px 6px;transform:rotate(-3deg)}
.hts-art-id{font:10px var(--mono);color:#3b3830;background:#ffffff70;padding:1px 4px}
.hts-art-brief{margin:0;font:11px/1.35 var(--serif);color:#3b3830;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hts-art.compact .hts-art-pending{inset:4px;padding:4px 6px}


/* ---------- Card faces: Here to Slay anatomy, Foundation dressing ---------- */
.hts-c{--cw:170px;position:relative;width:var(--cw);flex:0 0 auto;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--paper),var(--paper2));color:var(--paper-ink);
 border:5px solid var(--dept,var(--tone,#8a857a));border-radius:11px;box-shadow:0 6px 16px #000a;overflow:hidden}
.hts-c-top{padding:6px 8px 4px;background:color-mix(in srgb,var(--dept,var(--tone)) 16%,var(--paper))}
.hts-c-top h4{margin:0;font:700 13.5px/1.15 var(--type);color:var(--paper-ink)}
.hts-c-top small{display:block;margin-top:2px;font:700 8.5px/1.2 var(--mono);letter-spacing:.12em;color:color-mix(in srgb,var(--dept,var(--tone)) 75%,#000)}
.hts-c .hts-art{margin:0 6px;border-radius:4px}
.hts-c-band{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px 2px}
.hts-c-text{margin:2px 8px 6px;font:11.5px/1.35 var(--serif);color:var(--paper-ink)}
.hts-c-text b{font:700 10.5px var(--mono);letter-spacing:.03em}
.hts-c-note{margin:0 8px 6px;font:10px/1.35 var(--mono);color:var(--paper-muted)}
.hts-c-flags{margin:0 8px 5px;font:700 9px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--paper-muted)}
.hts-c-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:6px;background:#0000000d;border-top:1px dashed #0003}
.hts-c-foot button{min-height:30px;padding:5px 9px;font-size:11px;flex:1 1 auto}
.hts-roll{display:grid;place-items:center;min-width:34px;height:34px;padding:0 4px;border-radius:50%;background:#fff;color:#111;font:800 15px var(--type);
 border:2px solid var(--dept,#555);box-shadow:inset 0 -2px 0 #0002}
.hts-emblem{--dept:#888;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--dept);color:#fff;flex:0 0 auto;
 box-shadow:inset 0 -2px 0 #0003,0 0 0 2px #fff8}
.hts-emblem .hts-mark{width:15px;height:15px}
.hts-emblem.open{background:transparent;color:var(--dept);box-shadow:inset 0 0 0 2px var(--dept);opacity:.85}
.hts-emblem.filled{box-shadow:inset 0 -2px 0 #0003,0 0 0 2px #9ff0b8}
/* Personnel (Hero) */
.hts-hero.used{filter:saturate(.55) brightness(.92)}
.hts-hero.size-party{--cw:148px}
.hts-hero.size-party .hts-c-text{font-size:11px}
.hts-hero.size-mini{--cw:104px;border-width:4px;border-radius:8px}
.hts-hero.size-mini .hts-c-top{padding:4px 6px 2px}
.hts-hero.size-mini .hts-c-top h4{font-size:10.5px}
.hts-hero.size-mini .hts-c-top small{font-size:7.5px}
.hts-hero.size-mini .hts-emblem{width:20px;height:20px}.hts-hero.size-mini .hts-emblem .hts-mark{width:12px;height:12px}
.hts-hero.size-mini .hts-roll{min-width:26px;height:26px;font-size:12px}
.hts-hero.size-mini .hts-c-flags{font-size:7.5px;margin:0 6px 4px}
/* Equipment slides under its Personnel with its text still showing */
.hts-slot{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.hts-slot .hts-c{position:relative;z-index:1}
.hts-tuck{position:relative;z-index:0;width:136px;margin-top:-8px;padding:11px 7px 6px;background:#cfc8b6;color:#1b1a17;border:3px solid #5c7383;border-top:0;border-radius:0 0 8px 8px;font:10px/1.3 var(--sans)}
.hts-tuck.cursed{background:#e6c3bd;border-color:#7c1d1d}
.hts-tuck b{display:block;font:700 10px var(--type)}
.hts-tuck-text{margin:2px 0 0;font:10px/1.3 var(--serif)}
.hts-slot:has(.size-mini) .hts-tuck{width:92px;padding:9px 5px 4px}
/* Other main-deck cards */
.hts-kind.cursed .hts-c-top small{color:#7c1d1d}
.hts-variance{display:flex;justify-content:center;gap:12px;padding:4px 0 0;font:800 26px var(--type)}
.hts-variance .up{color:#1f6b3b}.hts-variance .down{color:#9a2a20}
/* Director (Party Leader): oversized and in full department colour */
.hts-leader{--cw:178px;background:linear-gradient(170deg,color-mix(in srgb,var(--dept) 88%,#fff),color-mix(in srgb,var(--dept) 70%,#000));border-color:color-mix(in srgb,var(--dept) 60%,#000);color:#fff}
.hts-leader .hts-c-top{background:#0000002e}
.hts-leader .hts-c-top h4{color:#fff}.hts-leader .hts-c-top small{color:#ffffffd0}
.hts-leader-emblem{display:flex;justify-content:center;margin:-16px 0 2px;position:relative;z-index:1}
.hts-leader-emblem .hts-emblem{width:36px;height:36px;box-shadow:0 0 0 3px #fff,0 3px 8px #0008}
.hts-leader-emblem .hts-mark{width:20px;height:20px}
.hts-leader .hts-c-text{margin:2px 8px 8px;padding:6px 7px;background:#fffbef;border-radius:6px;color:#1b1a17}
.hts-leader.size-party{--cw:150px}
.hts-leader.size-pick{--cw:100%}
/* Picker cards share one height: a button centres its content by default, so
   stretch it, reserve two lines for the name and let the skill box fill. */
.hts-director-grid{align-items:stretch}
.hts-main button.hts-pick{display:flex;align-items:stretch;height:100%}
.hts-leader.size-pick{height:100%}
.hts-leader.size-pick>header.hts-c-top{min-height:58px}
.hts-leader.size-pick .hts-c-text{flex:1 1 auto}
.hts-leader.size-mini{--cw:104px;border-width:4px;border-radius:8px}
.hts-leader.size-mini .hts-leader-emblem{margin:4px 0 6px}
.hts-leader.size-mini .hts-c-top h4{font-size:10.5px}.hts-leader.size-mini .hts-c-top small{font-size:7.5px}
/* Anomaly (Monster): dark, oversized, icon requirements, red/green rolls */
.hts-monster{--cw:212px;background:linear-gradient(180deg,#1c2338,#10141f);color:#e7e9f2;border-color:#2c3550;border-top-width:7px}
.hts-monster.cls-safe{border-top-color:var(--safe)}.hts-monster.cls-euclid{border-top-color:var(--euclid)}.hts-monster.cls-keter{border-top-color:var(--keter)}
.hts-monster .hts-c-top{background:transparent;padding:7px 9px 5px}
.hts-monster .hts-c-top small{color:#9aa3c0;margin:0 0 2px}
.hts-monster .hts-c-top h4{color:#fff;font-size:14.5px}
.hts-monster .hts-c-text{color:#d9dcea}
.hts-monster .hts-c-text b{color:#fff}
.hts-req{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:7px 9px 3px}
.hts-req-label{font:700 9px var(--mono);letter-spacing:.12em;color:#9aa3c0;margin-right:2px}
.hts-mroll{display:flex;align-items:center;gap:8px;margin:4px 9px 0;padding:0;font:11px/1.3 var(--serif)}
.hts-mroll>b{display:grid;place-items:center;min-width:38px;height:26px;border-radius:5px;font:800 14px var(--type);color:#fff}
.hts-mroll.bad>b{background:#c0392b}.hts-mroll.good>b{background:#2e8b57}
.hts-mroll-text{margin:0;color:#d9dcea}
.hts-mroll-text b{font:700 10px var(--mono)}
.hts-skill{margin-top:8px;padding-top:6px;border-top:1px dashed #ffffff25}
.hts-monster .hts-c-foot{background:#00000040;border-top-color:#ffffff1f}
.hts-odds{font:700 10.5px var(--mono);color:#e7e9f2;flex:1 1 100%}.hts-odds.muted{color:#8f97b3}
.hts-monster.size-mini{--cw:96px;border-width:3px;border-top-width:5px;border-radius:7px}
.hts-monster.size-mini .hts-c-top{padding:4px 5px 1px}
.hts-monster.size-mini .hts-c-top h4{font-size:9.5px}.hts-monster.size-mini .hts-c-top small{font-size:7px}
.hts-monster.size-mini .hts-c-text{font-size:9px;margin:2px 5px 5px}
.hts-monster.size-mini .hts-c-text b{font-size:8px}
/* Card backs */
.hts-back{width:96px;aspect-ratio:5/7;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 6px 16px #000a,3px 3px 0 -1px #0006,6px 6px 0 -2px #0004}
.back-main{background:repeating-linear-gradient(45deg,#e8e2d2 0 6px,#ddd5c2 6px 12px);color:#2a2620;border:5px solid #f4efe3}
.back-anomaly{background:radial-gradient(circle at 50% 40%,#2a3554,#121827);color:#d7dcf0;border:5px solid #1b2236}
.back-empty{background:transparent;border:2px dashed #3a4046;color:var(--faint);font:11px var(--mono);box-shadow:none}
.hts-back.has-art{background-size:cover;background-position:center;justify-content:flex-end;padding-bottom:6px}
.hts-back.has-art .hts-back-count{padding:1px 9px;border-radius:10px;background:#0b0c0dcc;color:#fff;font-size:14px}
.hts-back-mark{width:38px;height:38px}
.hts-back-label{font:700 9px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.hts-back-count{font:800 18px var(--type)}

/* ---------- Overrides for the shared hub stylesheet (it styles every header and p) ---------- */
.hts-c>header.hts-c-top{display:block;padding:6px 8px 4px;border:0;justify-content:initial;align-items:initial}
.hts-monster>header.hts-c-top{padding:7px 9px 5px}
.hts-mat>header.hts-mat-head{display:flex;justify-content:flex-start;padding:0;border:0}
.hts-c p,.hts-mat p,.hts-center p,.hts-prompt p,.hts-hand p,.hts-sidebar p{line-height:1.35}
.hts-mroll-text{font:11px/1.3 var(--serif)}
.hts-mroll-text b{font:700 10px var(--mono)}

/* ---------- Backdrop: Lantern Hill at night, animated ---------- */
body{background:transparent}
.hts-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#0a1418 center/cover no-repeat}
.hts-backdrop svg{display:block;width:100%;height:100%}
.hts-backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,#0a101480 0,#0a101466 50%,#0a10141f 100%)}
body.at-table .hts-backdrop::after{background:radial-gradient(ellipse at 50% 46%,#0a101499 0,#0a101470 55%,#0a101426 100%)}
.hts-backdrop.has-art .hts-bd-scene{display:none}
.hts-bd-star{animation:hts-twinkle 5s ease-in-out infinite}
.hts-bd-window{fill:#ffcf7a;animation:hts-window 11s steps(1) infinite}
.hts-bd-lantern{animation:hts-flicker 3.4s ease-in-out infinite}
.hts-bd-beacon{transform-origin:977px 232px;animation:hts-beacon 5s ease-in-out infinite}
.hts-bd-vault circle:nth-child(2){transform-origin:500px 640px;animation:hts-spin 60s linear infinite}
.hts-bd-mist{opacity:.07;filter:blur(18px)}
.hts-bd-mist.m1{animation:hts-drift 46s ease-in-out infinite alternate}
.hts-bd-mist.m2{animation:hts-drift 62s ease-in-out infinite alternate-reverse}
.hts-bd-fly{opacity:0;animation:hts-fly 12s ease-in-out infinite}
@keyframes hts-twinkle{0%,100%{opacity:.25}50%{opacity:.95}}
@keyframes hts-window{0%,100%{opacity:.9}46%{opacity:.9}50%{opacity:.25}58%{opacity:.9}}
@keyframes hts-flicker{0%,100%{opacity:1}42%{opacity:.82}46%{opacity:1}71%{opacity:.7}76%{opacity:.96}}
@keyframes hts-beacon{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
@keyframes hts-spin{to{transform:rotate(360deg)}}
@keyframes hts-drift{from{transform:translateX(-140px)}to{transform:translateX(180px)}}
@keyframes hts-fly{0%{opacity:0;transform:translate(0,0)}15%{opacity:.9}50%{opacity:.5;transform:translate(36px,-46px)}85%{opacity:.9}100%{opacity:0;transform:translate(-22px,-84px)}}

/* ---------- Status bar and prompt ---------- */
.hts-statusbar{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:space-between;padding:6px 12px;background:#0d1114e0;border:1px solid var(--line);border-radius:8px;backdrop-filter:blur(8px)}
.hts-shift{display:flex;flex-direction:column;min-width:140px}
.hts-shift span{font:9px var(--mono);letter-spacing:.14em;color:var(--accent)}
.hts-shift strong{font:700 16px var(--type)}
.hts-ap{display:flex;align-items:center;gap:6px}
.hts-ap-dot{width:16px;height:16px;border-radius:50%;background:#2a2e32;border:1px solid #555}
.hts-ap-dot.on{background:radial-gradient(circle at 35% 35%,#ffe2a6,var(--accent));border-color:#ffd38a;box-shadow:0 0 10px #e3a34688}
.hts-ap-text{font:700 12px var(--mono);margin-left:4px}
.hts-actions-bar{display:flex;gap:8px;flex-wrap:wrap}
.hts-actions-bar button,.hts-tools button{min-height:30px;padding:4px 11px}
.hts-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hts-tools .hts-speed{flex-direction:row;align-items:center;gap:6px;font:11px var(--mono)}
.hts-tools select{min-height:30px;padding:2px 6px;font-size:13px}
.hts-prompt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;min-height:42px;padding:6px 14px;border:1px solid var(--line);border-left:5px solid #555;background:#12161ae6;border-radius:8px;backdrop-filter:blur(8px)}
.hts-prompt.yours{border-left-color:var(--accent);background:linear-gradient(90deg,#2a2011f0,#12161ae6 60%)}
.hts-prompt.winning{border-left-color:var(--good);background:linear-gradient(90deg,#112a19f0,#12161ae6 60%)}
.hts-prompt.waiting h2::after{content:"";display:inline-block;width:.5em;height:1em;margin-left:6px;vertical-align:-2px;background:var(--accent);animation:hts-caret 1s steps(1) infinite}
.hts-prompt.done{border-left-color:var(--good)}
.hts-prompt h2{margin:0;font:700 16px var(--type)}
.hts-prompt-sub{margin:0;color:var(--muted);font-size:13px}
.hts-prompt-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:auto}
.hts-prompt-actions button{min-height:30px;padding:4px 11px}
.hts-vary-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:2px 8px;border:1px dashed #555;border-radius:3px}
.hts-vary-group>span{font:11px var(--mono);color:var(--muted)}
@keyframes hts-caret{50%{opacity:0}}
.hts-badge{font:700 9px var(--mono);letter-spacing:.12em;padding:2px 6px;background:var(--accent);color:var(--accent-ink);border-radius:2px}
.hts-badge.dim{background:#33383d;color:#cfd3d1}.hts-badge.win{background:var(--good);color:#071a0e}

/* ---------- Table ---------- */
:root{--hand-peek:calc(calc(9.5*var(--uh)) + 14px)}
#game{display:grid;gap:8px}
.hts-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.hts-play{display:grid;gap:8px;min-width:0}
.hts-table{display:grid;gap:8px;min-width:0;padding:8px;border-radius:14px;background:#10161a59;border:1px solid #ffffff14}
.hts-area-top{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hts-center{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:center;min-width:0}
.hts-monsters{display:flex;gap:10px;justify-content:center;min-width:0;max-width:100%;overflow-x:auto;padding-bottom:2px}
.hts-piles{display:flex;gap:8px;align-items:flex-start}
.hts-pile{margin:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.hts-pile figcaption{font:9px var(--mono);color:var(--muted);letter-spacing:.05em;white-space:nowrap}
.hts-pile .hts-back,.hts-pile .hts-discard-top{--cw:clamp(54px,min(calc(8.6*var(--uh)),calc(5*var(--uw))),84px);width:var(--cw)}
.hts-pile .hts-back-mark{width:44%;height:auto}
.hts-pile .hts-back-label{font-size:7.5px}.hts-pile .hts-back-count{font-size:15px}
.hts-pile .hts-discard-top{border-width:3px;border-radius:8px}
.hts-pile .hts-discard-top>header.hts-c-top{padding:3px 5px 2px}
.hts-pile .hts-discard-top .hts-c-top h4{font-size:8.5px}
.hts-pile .hts-discard-top .hts-c-top small,.hts-pile .hts-discard-top .hts-c-text,.hts-pile .hts-discard-top .hts-c-note,.hts-pile .hts-discard-top .hts-variance,.hts-pile .hts-discard-top .hts-c-band,.hts-pile .hts-discard-top .hts-c-foot{display:none}
.hts-pile .hts-discard-top .hts-art{margin:0 3px 3px}

/* Party areas */
.hts-mat{background:#141a1fcc;backdrop-filter:blur(6px);border:1px solid #2c3338;border-top:3px solid var(--dept);border-radius:10px;padding:6px 8px 8px;min-width:0}
.hts-mat.current{box-shadow:0 0 0 2px var(--accent),0 0 22px #e3a34633}
.hts-mat.winner{box-shadow:0 0 0 2px var(--good)}
.hts-mat-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:6px}
.hts-mat-head h3{margin:0;font:700 13px var(--type);color:var(--ink)}
.hts-handcount{margin-left:auto;display:inline-flex;align-items:center;height:20px;padding-left:8px}
.hts-handcount i{display:block;width:11px;height:16px;margin-left:-6px;border-radius:2px;background:repeating-linear-gradient(45deg,#e8e2d2 0 3px,#d6cebb 3px 6px);border:1px solid #f4efe3;transform:rotate(-8deg)}
.hts-handcount i:nth-child(2){transform:rotate(0)}.hts-handcount i:nth-child(3){transform:rotate(8deg)}
.hts-handcount b{margin-left:5px;font:700 12px var(--mono);color:var(--ink)}
.hts-mat-body{display:flex;gap:8px;align-items:flex-start}
.hts-lead{display:flex;gap:5px;align-items:flex-start;flex:0 0 auto}
.hts-slain{display:flex;flex-direction:column;gap:4px}
.hts-slain-empty{width:18px;height:24px;border:1px dashed #ffffff30;border-radius:4px}
.hts-party{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;min-width:0}
.hts-empty{margin:4px 0;color:var(--muted);font:italic 12px var(--serif)}
.hts-lights{display:flex;gap:3px}
.hts-light{width:16px;height:16px}.hts-light .hts-mark{width:10px;height:10px}
.hts-mat-note{margin:0;font:10.5px var(--mono);color:var(--accent)}

/* Opponents: compact seats. The inspector shows the full card. */
.hts-mat.place-top{flex:1 1 0;max-width:520px}
.hts-mat.place-top .hts-leader{--cw:clamp(56px,calc(8.2*var(--uh)),84px);border-width:3px;border-radius:8px}
.hts-mat.place-top .hts-leader>header.hts-c-top,.hts-mat.place-top .hts-leader .hts-c-text{display:none}
.hts-mat.place-top .hts-leader .hts-art{margin:0}
.hts-mat.place-top .hts-leader-emblem{margin:-11px 0 3px}
.hts-mat.place-top .hts-leader-emblem .hts-emblem{width:20px;height:20px;box-shadow:0 0 0 2px #fff}
.hts-mat.place-top .hts-leader-emblem .hts-mark{width:12px;height:12px}
.hts-hero.size-mini{--cw:clamp(54px,calc(7.8*var(--uh)),80px);border-width:3px;border-radius:7px}
.hts-hero.size-mini>header.hts-c-top{padding:2px 4px 1px}
.hts-hero.size-mini .hts-c-top h4{font-size:8.5px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hts-hero.size-mini .hts-c-top small{display:none}
.hts-hero.size-mini .hts-art{margin:0 3px}
.hts-hero.size-mini .hts-c-band{padding:2px 4px}
.hts-hero.size-mini .hts-emblem{width:16px;height:16px;box-shadow:none}.hts-hero.size-mini .hts-emblem .hts-mark{width:10px;height:10px}
.hts-hero.size-mini .hts-roll{min-width:20px;height:20px;font-size:10px;border-width:1px}
.hts-slot:has(.size-mini) .hts-tuck{width:calc(clamp(54px,calc(7.8*var(--uh)),80px) - 8px);padding:8px 3px 2px;border-width:2px;font-size:7.5px}
.hts-slot:has(.size-mini) .hts-tuck b{font-size:7.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hts-monster.size-mini{--cw:clamp(42px,calc(5.8*var(--uh)),60px);border-width:2px;border-top-width:4px;border-radius:6px}
.hts-monster.size-mini>header.hts-c-top{padding:2px 3px 1px}
.hts-monster.size-mini .hts-c-top h4,.hts-monster.size-mini .hts-c-text{display:none}
.hts-monster.size-mini .hts-c-top small{font-size:6.5px;margin:0;white-space:nowrap;overflow:hidden}
.hts-monster.size-mini .hts-art{margin:0 2px 2px}

/* Centre: anomalies sized to the viewport height */
.hts-center .hts-monster{--cw:clamp(140px,min(calc(23.5*var(--uh)),calc(11.5*var(--uw))),226px)}
.hts-center .hts-monster .hts-art{aspect-ratio:2/1}
.hts-center .hts-monster>header.hts-c-top{padding:5px 8px 3px}
.hts-center .hts-monster .hts-c-top h4{font-size:13px}
.hts-center .hts-monster .hts-req{padding:4px 8px 1px}
.hts-center .hts-monster .hts-emblem{width:22px;height:22px}.hts-center .hts-monster .hts-emblem .hts-mark{width:13px;height:13px}
.hts-center .hts-monster .hts-mroll{margin:2px 8px 0}
.hts-center .hts-monster .hts-mroll-text{font-size:10.5px}
.hts-center .hts-monster .hts-mroll>b{min-width:34px;height:22px;font-size:12.5px}
.hts-center .hts-monster .hts-skill{display:none}
.hts-center .hts-monster .hts-c-foot{margin-top:5px;padding:4px 6px}
.hts-center .hts-monster .hts-odds{flex:1 1 auto}

/* Your party */
.hts-mat.self{border-top-width:4px}
.hts-mat.self .hts-leader{--cw:clamp(80px,calc(11*var(--uh)),112px)}
.hts-mat.self .hts-leader .hts-c-text{display:none}
.hts-mat.self .hts-leader .hts-c-top small{display:none}
.hts-mat.self .hts-leader .hts-c-top h4{font-size:11px}
.hts-mat.self .hts-leader .hts-art{aspect-ratio:1/1}
.hts-mat.self .hts-leader-emblem{margin:-13px 0 4px}
.hts-mat.self .hts-leader-emblem .hts-emblem{width:28px;height:28px}
.hts-mat.self .hts-monster.size-mini{--cw:clamp(52px,calc(7.4*var(--uh)),74px)}
.hts-mat.self .hts-slain-empty{width:26px;height:34px}
.hts-hero.size-party{--cw:clamp(92px,calc(12.6*var(--uh)),126px)}
.hts-hero.size-party>header.hts-c-top{padding:4px 6px 2px}
.hts-hero.size-party .hts-c-top h4{font-size:11px}
.hts-hero.size-party .hts-c-top small{display:none}
.hts-hero.size-party .hts-c-text{display:none}
.hts-hero.size-party .hts-c-band{padding:3px 6px 2px}
.hts-hero.size-party .hts-roll{min-width:26px;height:26px;font-size:12px}
.hts-hero.size-party .hts-emblem{width:20px;height:20px}.hts-hero.size-party .hts-emblem .hts-mark{width:12px;height:12px}
.hts-hero.size-party .hts-c-flags{font-size:7.5px;margin:0 6px 3px}
.hts-hero.size-party .hts-c-foot{padding:4px}
.hts-hero.size-party .hts-c-foot button{min-height:24px;padding:3px 6px;font-size:10px}
.hts-slot:has(.size-party) .hts-tuck{width:calc(clamp(92px,calc(12.6*var(--uh)),126px) - 12px);padding:9px 5px 3px;font-size:9px}

/* ---------- Sidebar: inspector, dice, log ---------- */
.hts-sidebar{display:grid;gap:8px;min-width:0}
.hts-inspector{display:flex;justify-content:center;align-items:flex-start;min-height:120px;overflow:auto;padding:10px;background:#0d1114cc;border:1px solid var(--line);border-radius:10px;backdrop-filter:blur(8px)}
.hts-inspector>.hts-c,.hts-inspector .hts-inspect-stack>.hts-c,.hts-inspector .hts-slot>.hts-c{--cw:min(100%,236px)}
.hts-inspector .hts-slot{width:min(100%,236px)}
.hts-inspector .hts-slot .hts-tuck{width:calc(100% - 14px)}
.hts-inspector .hts-monster{--cw:min(100%,250px)}
.hts-inspect-stack{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.hts-inspect-note{margin:0;font:italic 12.5px/1.45 var(--serif);color:#d6d2c7}
.hts-desc{font-style:italic;color:#aeb5cc}
.hts-dice-tray{background:#0d1114cc;border:1px solid var(--line);border-radius:10px;padding:8px 10px;backdrop-filter:blur(8px)}
.hts-dice-tray.live{border-color:var(--accent)}
.hts-roll-what{margin:0 0 6px;font-size:12px;color:var(--muted)}
.hts-roll-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label total" "dice total" "math math";gap:3px 10px;align-items:center;margin-bottom:6px}
.hts-roll-label{grid-area:label;font:11px var(--mono);color:var(--muted)}
.hts-dice{grid-area:dice;display:flex;gap:8px}
.hts-roll-math{grid-area:math;display:flex;flex-wrap:wrap;gap:4px}
.hts-roll-total{grid-area:total;font:700 28px var(--type);color:var(--ink)}
.hts-mod{font:700 10px var(--mono);padding:2px 5px;border-radius:2px;background:#262a2e;color:#cfd3d1}
.hts-mod.up{background:#173322;color:#bff0cf}.hts-mod.down{background:#3a1715;color:#ffc4bd}
.hts-die{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:34px;height:34px;padding:5px;gap:2px;background:var(--paper);border-radius:7px;box-shadow:inset 0 -3px 0 #0003,0 3px 8px #0008}
.hts-die i{display:block;border-radius:50%}
.hts-die i.pip{background:#1b1a17;margin:1px}
.hts-die.tumble{animation:hts-tumble .6s cubic-bezier(.2,.8,.3,1)}
@keyframes hts-tumble{0%{transform:translateY(-14px) rotate(-200deg) scale(.8)}70%{transform:translateY(2px) rotate(12deg)}100%{transform:none}}
.hts-window{margin:2px 0 0;font:11px var(--mono);color:var(--accent)}
.hts-stamp{display:inline-block;margin:2px 0 0;font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:2px 9px;transform:rotate(-2deg);border:2px solid currentColor}
.outcome-success,.outcome-upheld{color:var(--good)}
.outcome-breach,.outcome-countermanded{color:var(--danger)}
.outcome-failure{color:var(--muted)}
.hts-log-wrap{display:flex;flex-direction:column;min-height:0;background:#0d1114cc;border:1px solid var(--line);border-radius:10px;padding:8px 10px;backdrop-filter:blur(8px)}
.hts-log-wrap summary{cursor:pointer;font:700 11px var(--mono);letter-spacing:.16em;text-transform:uppercase}
.hts-log{list-style:none;margin:6px 0 0;padding:0;overflow:auto;max-height:240px;font:12px/1.4 var(--sans);display:flex;flex-direction:column;gap:4px}
.hts-log li{color:#cfd0cb;padding-left:8px;border-left:2px solid #333}
.hts-log li.tone-turn{color:var(--accent);border-left-color:var(--accent);font-family:var(--mono);font-size:11px;margin-top:3px}
.hts-log li.tone-good{border-left-color:var(--good)}
.hts-log li.tone-bad{border-left-color:var(--danger)}
.hts-log li.tone-alert{border-left-color:var(--danger);color:#ffd2cc}
.hts-log li.tone-win{border-left-color:var(--good);color:#c9f4d6;font-weight:700}

/* ---------- Hand: cards held in your hand, floating over the table ---------- */
.hts-hand-tray{position:fixed;left:0;right:0;bottom:0;z-index:40;pointer-events:none;display:flex;justify-content:center}
.hts-hand{display:flex;justify-content:center;align-items:flex-end;max-width:100%;padding:26px 28px 0;transform:translateY(56%);transition:transform .22s ease;pointer-events:none}
.hts-hand-tray:hover .hts-hand,.hts-hand-tray:focus-within .hts-hand,.hts-hand-tray.raised .hts-hand{transform:translateY(6px)}
.hts-hand-tray.collapsed .hts-hand,.hts-hand-tray.collapsed:hover .hts-hand,.hts-hand-tray.collapsed:focus-within .hts-hand{transform:translateY(110%)}
.hts-hand-card{--hw:clamp(118px,calc(17*var(--uh)),160px);flex:0 0 auto;position:relative;pointer-events:auto;margin-left:calc(var(--hw)*-.26);transform:translateY(var(--drop,0)) rotate(var(--rot,0deg));transform-origin:50% 130%;transition:transform .16s ease}
.hts-hand-card:first-child{margin-left:0}
.hts-hand-card .hts-c{--cw:var(--hw);box-shadow:0 10px 26px #000c}
.hts-hand-card:hover,.hts-hand-card:focus-within,.hts-hand-card.armed{transform:translateY(-16px) rotate(0deg);z-index:5}
.hts-hand-card.armed .hts-c{box-shadow:0 0 0 3px var(--accent),0 10px 24px #000c}
.hts-hand-card .hts-c-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hts-hand .hts-empty{pointer-events:auto;margin:0 0 30px;padding:4px 12px;background:#0b0c0d99;border-radius:999px}
.hts-main button.hts-hand-pill{position:fixed;left:12px;bottom:10px;z-index:41;pointer-events:auto;min-height:0;padding:5px 12px;border-radius:999px;background:#0b0c0d66;border-top:1px solid #ffffff38;border-right:1px solid #ffffff38;border-bottom:1px solid #ffffff38;border-left:1px solid #ffffff38;color:#e9e5da;font:700 11px var(--mono);letter-spacing:.06em;opacity:.7;backdrop-filter:blur(4px)}
.hts-main button.hts-hand-pill:hover,.hts-main button.hts-hand-pill:focus-visible{opacity:1;background:#0b0c0db3}
.hts-hand-pill b{color:var(--accent)}
body.at-table .hts-main{padding-bottom:var(--hand-peek)}
body.at-table .hts-connection{position:fixed;left:150px;bottom:12px;z-index:39;margin:0;padding:2px 8px;border-radius:999px;background:#0b0c0d80;font-size:10px}
body.at-table .hts-error{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:60;margin:0;max-width:min(560px,calc(90*var(--uw)));box-shadow:0 8px 30px #000c}

/* ---------- Briefing dialog ---------- */
.hts-rules{max-width:680px;width:calc(calc(100*var(--uw)) - 32px);max-height:calc(88*var(--uh));background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:20px 24px}
.hts-rules::backdrop{background:#000b}
.hts-rules h2{font:700 24px var(--type);margin:4px 0 10px}
.hts-rules h3{font:700 14px var(--mono);letter-spacing:.1em;text-transform:uppercase;margin:18px 0 6px;color:var(--accent)}
.hts-rules p{font:15px/1.55 var(--serif);color:#dad6cb}
.hts-rules #close-rules{float:right}
.hts-credits-note{font:13px/1.55 var(--serif);color:#dad6cb}.hts-credits-note a{color:#f0c27a}
.hts-rules-credits{margin:6px 0 0;padding-left:18px;font:13px/1.55 var(--serif);color:#dad6cb}
.hts-rules-credits a{color:#f0c27a}
.hts-credits-cols{columns:2;column-gap:24px}
.hts-art.compact.pending .hts-art-id{font-size:8px;word-break:break-all}

/* ---------- One screen on desktop: nothing scrolls but the log and inspector ---------- */
:where(html.fit-table){
 body.at-table{overflow:hidden}
 body.at-table .hts-top{display:none}
 body.at-table .hts-main{max-width:none;margin:0;padding:8px clamp(8px,calc(1*var(--uw)),16px) 0}
 body.at-table #game{height:calc(calc(100*var(--uh)) - 8px);grid-template-rows:auto auto minmax(0,1fr)}
 .hts-stage{grid-template-columns:minmax(0,1fr) clamp(240px,calc(18*var(--uw)),300px);min-height:0}
 .hts-play{grid-template-rows:minmax(0,1fr) auto;min-height:0;padding-bottom:var(--hand-peek)}
 .hts-table{grid-template-rows:auto minmax(0,1fr);min-height:0;overflow:auto;align-content:start}
 .hts-area-top{flex-wrap:nowrap}
 .hts-sidebar{grid-template-rows:minmax(0,1.35fr) auto minmax(0,1fr);min-height:0;padding-bottom:8px}
 .hts-log{max-height:none;flex:1 1 0;min-height:0}
 .hts-mat.self .hts-party{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
}
:where(html.scroll-table){
 .hts-mat.place-top{flex:1 1 280px;max-width:none}
 .hts-monsters{justify-content:flex-start}
 .hts-statusbar{position:sticky;top:45px;z-index:20}
 .hts-mat.self .hts-mat-body{flex-wrap:wrap}
}
@media (max-width:760px){
 .hts-cover-body{grid-template-columns:1fr}
 .hts-setup-grid{grid-template-columns:1fr 1fr}
 .hts-director-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hts-top span{display:none}
 .hts-center .hts-monster{--cw:190px}
 .hts-hand-card{--hw:128px}
 .hts-hand-card .hts-art{display:none}
 :root{--hand-peek:110px}
}
@media (max-width:1280px){.hts-director-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){
 .hts-die.tumble,.hts-prompt.waiting h2::after,.hts-bd-star,.hts-bd-window,.hts-bd-lantern,.hts-bd-beacon,.hts-bd-vault circle:nth-child(2),.hts-bd-mist,.hts-bd-fly{animation:none}
 .hts-bd-fly{opacity:.6}
 .hts-hand,.hts-hand-card{transition:none}
}

/* ---------- Inspector shows the whole card: it sizes to its card, and the card to the window ---------- */
.hts-inspector{--iw:min(100%,250px);padding:8px}
.hts-inspector>.hts-c,.hts-inspector .hts-inspect-stack>.hts-c,.hts-inspector .hts-slot>.hts-c,.hts-inspector .hts-monster{--cw:var(--iw)}
.hts-inspector .hts-slot{width:var(--iw)}
/* Pictures give up height first, so the text never has to scroll. */
.hts-inspector .hts-art{aspect-ratio:auto}
.hts-inspector .hts-monster .hts-art{height:clamp(56px,calc(11.5*var(--uh)),124px)}
.hts-inspector .hts-hero .hts-art,.hts-inspector .hts-kind .hts-art{height:clamp(64px,calc(15*var(--uh)),150px)}
.hts-inspector .hts-leader .hts-art{height:clamp(72px,calc(17*var(--uh)),190px)}
.hts-inspector .hts-c-text,.hts-inspector .hts-mroll-text{font-size:11px;line-height:1.3}
.hts-inspector .hts-monster>header.hts-c-top{padding:5px 8px 3px}
.hts-inspector .hts-req{padding:4px 8px 1px}
.hts-inspector .hts-mroll{margin:3px 8px 0}
.hts-inspector .hts-desc{margin-top:5px}
.hts-inspector .hts-skill{margin-top:5px;padding-top:4px}
.hts-inspect-stack{gap:5px}
.hts-inspect-note{font-size:11.5px;line-height:1.35}
:where(html.fit-table){
 .hts-sidebar{grid-template-rows:fit-content(74%) auto minmax(56px,1fr)}
 .hts-dice-tray{padding:6px 10px}
 .hts-roll-what{margin-bottom:3px}
 .hts-roll-row{margin-bottom:3px}
}
/* Response clock for Countermand and Field Variance */
.hts-timer{display:flex;align-items:center;gap:8px;min-width:150px}
.hts-timer-bar{flex:1 1 110px;height:8px;border-radius:999px;background:#ffffff1f;overflow:hidden}
.hts-timer-bar i{display:block;height:100%;border-radius:inherit;background:var(--muted);transform-origin:left center;transform:scaleX(var(--from,1));animation:hts-timer linear forwards}
.hts-timer.yours .hts-timer-bar i{background:var(--accent)}
.hts-timer-text{font:700 14px var(--mono);min-width:2ch;color:var(--ink)}
.hts-timer.urgent .hts-timer-bar i{background:var(--danger)}
.hts-timer.urgent .hts-timer-text{color:var(--danger)}
@keyframes hts-timer{from{transform:scaleX(var(--from,1))}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.hts-timer-bar i{animation:none}}
/* A long option list (a full discard pile) scrolls inside the prompt, not the page. */
.hts-prompt-actions{max-height:calc(22*var(--uh));overflow:auto}

/* ---------- Decisions live in the centre of the table ---------- */
#results{position:fixed;right:14px;top:58px;z-index:30}
.hts-center{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start;justify-content:stretch}
.hts-center-side{display:flex;flex-direction:column;gap:8px;min-width:0}
.hts-center-side .hts-piles{justify-content:flex-start}
.hts-prompt{flex-direction:column;align-items:stretch;gap:6px;min-height:0;padding:10px 12px;border-left-width:5px}
.hts-prompt-kicker{margin:0;font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hts-prompt.yours .hts-prompt-kicker{color:var(--accent)}
.hts-prompt.done .hts-prompt-kicker{color:var(--good)}
.hts-prompt h2{font-size:17px;line-height:1.2}
.hts-prompt-sub{font-size:12.5px}
.hts-prompt-actions{margin-left:0;max-height:calc(26*var(--uh));overflow:auto}
.hts-prompt-actions button{flex:1 1 auto}
.hts-prompt .hts-timer{min-width:0}
.hts-prompt-recent{list-style:none;margin:2px 0 0;padding:6px 0 0;border-top:1px dashed #ffffff26;display:flex;flex-direction:column;gap:3px;font:11.5px/1.35 var(--sans);color:#b9bdb9}
.hts-prompt-recent li{padding-left:7px;border-left:2px solid #444}
.hts-prompt-recent li.tone-good{border-left-color:var(--good)}
.hts-prompt-recent li.tone-bad,.hts-prompt-recent li.tone-alert{border-left-color:var(--danger)}
.hts-prompt-recent li.tone-win{border-left-color:var(--good);color:#c9f4d6}
.hts-prompt.yours{box-shadow:0 0 0 1px #e3a34666,0 0 26px #e3a34626}
:where(html.fit-table){
 body.at-table #game{grid-template-rows:auto minmax(0,1fr)}
 .hts-center{grid-template-columns:minmax(250px,1.3fr) auto minmax(200px,1fr);min-height:0}
 .hts-center>.hts-prompt{justify-self:end;width:100%;max-width:360px;max-height:100%;overflow:auto}
 .hts-center-side{justify-self:start;width:100%;max-width:340px}
 .hts-sidebar{grid-template-rows:fit-content(74%) minmax(56px,1fr)}
}

/* ---------- Roll reveal ---------- */
.hts-play{position:relative}
.hts-rollshow{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:35;pointer-events:none;min-width:260px;max-width:min(420px,90%);
 display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 20px 16px;border-radius:14px;background:#0b0e11f2;border:2px solid #ffffff38;box-shadow:0 18px 60px #000d,0 0 0 9999px #0000003d;text-align:center;animation:hts-pop .18s ease-out}
.hts-rollshow[hidden]{display:none}
.hts-rollshow-what{margin:0;font:12.5px/1.35 var(--sans);color:var(--muted)}
.hts-rollshow-row{display:flex;align-items:center;justify-content:center;gap:12px}
.hts-rollshow-label{font:11px var(--mono);color:var(--muted);min-width:110px;text-align:right}
.hts-rollshow-dice{display:flex;gap:12px}
.hts-rollshow-row strong{font:700 44px/1 var(--type);min-width:1.4em;color:var(--ink)}
.hts-die.big{width:62px;height:62px;padding:9px;gap:3px;border-radius:12px}
.hts-rollshow-stamp{margin:2px 0 0;font:700 24px var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:3px 16px;border:3px solid currentColor;transform:rotate(-3deg);animation:hts-stamp .22s cubic-bezier(.2,1.4,.4,1)}
.hts-rollshow-note{margin:0;font:11px var(--mono);color:var(--accent)}
.hts-rollshow.outcome-success,.hts-rollshow.outcome-upheld{border-color:var(--good)}
.hts-rollshow.outcome-success .hts-rollshow-stamp,.hts-rollshow.outcome-upheld .hts-rollshow-stamp{color:var(--good)}
.hts-rollshow.outcome-breach,.hts-rollshow.outcome-countermanded{border-color:var(--danger)}
.hts-rollshow.outcome-breach .hts-rollshow-stamp,.hts-rollshow.outcome-countermanded .hts-rollshow-stamp{color:var(--danger)}
.hts-rollshow.outcome-failure .hts-rollshow-stamp{color:var(--muted)}
@keyframes hts-pop{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes hts-shake{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-3px,2px) rotate(-9deg)}50%{transform:translate(2px,-3px) rotate(7deg)}75%{transform:translate(3px,2px) rotate(-5deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes hts-stamp{from{opacity:0;transform:rotate(-3deg) scale(1.7)}to{opacity:1;transform:rotate(-3deg) scale(1)}}

/* ---------- Throwing the dice: hold to shake, let go to throw ---------- */
.hts-rollshow.mode-throw{pointer-events:auto;border-color:var(--accent);box-shadow:0 18px 60px #000d,0 0 0 9999px #0000005c,0 0 34px #e3a34640}
.hts-rollshow button.hts-throw{appearance:none;display:flex;gap:16px;margin:4px 0;padding:20px 28px;border-radius:18px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
 background:radial-gradient(circle at 50% 35%,#2c5b46,#173527);border-top:2px solid #ffffff3d;border-right:2px solid #ffffff3d;border-bottom:2px solid #ffffff3d;border-left:2px solid #ffffff3d;box-shadow:none;
 transform:translate(var(--dx,0px),var(--dy,0px));transition:transform .12s ease-out}
.hts-rollshow button.hts-throw:hover{border-top-color:var(--accent);border-right-color:var(--accent);border-bottom-color:var(--accent);border-left-color:var(--accent)}
.hts-rollshow button.hts-throw.shaking{cursor:grabbing;transition:none;background:radial-gradient(circle at 50% 35%,#356f55,#1b3f2e)}
.hts-throw .hts-die.big{animation:hts-bob 1.5s ease-in-out infinite;box-shadow:inset 0 -5px 0 #0002,0 6px 0 #0006}
.hts-throw .hts-die.big:nth-child(2){animation-delay:-.75s}
.hts-throw.shaking .hts-die.big{animation:hts-rattle .13s linear infinite}
.hts-throw.shaking .hts-die.big:nth-child(2){animation-delay:-.06s;animation-direction:reverse}
.hts-rollshow.mode-wait .hts-die.loose{animation:hts-bob 1.1s ease-in-out infinite;opacity:.8}
.hts-rollshow.mode-tumble .hts-die.big{animation:hts-fly 1s cubic-bezier(.3,.1,.3,1) both}
.hts-rollshow.mode-tumble .hts-die.big:nth-child(2){animation-name:hts-fly2}
.hts-rollshow.mode-landed,.hts-rollshow.mode-outcome{animation:hts-jolt .3s ease-out}
.hts-rollshow.mode-outcome .hts-rollshow-stamp{animation-delay:.26s;animation-fill-mode:both}
.hts-rollshow-note b{color:var(--ink)}
@keyframes hts-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes hts-rattle{0%{transform:translate(0,0) rotate(0)}20%{transform:translate(-7px,5px) rotate(-22deg)}40%{transform:translate(6px,-7px) rotate(17deg)}60%{transform:translate(8px,6px) rotate(-12deg)}80%{transform:translate(-6px,-4px) rotate(24deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes hts-fly{0%{transform:translate(0,0) rotate(0) scale(1)}30%{transform:translate(-20px,-70px) rotate(-260deg) scale(1.2)}62%{transform:translate(6px,0) rotate(-520deg) scale(1)}76%{transform:translate(4px,-18px) rotate(-610deg)}90%{transform:translate(0,0) rotate(-712deg)}95%{transform:translate(0,-4px) rotate(-718deg)}100%{transform:translate(0,0) rotate(-720deg)}}
@keyframes hts-fly2{0%{transform:translate(0,0) rotate(0) scale(1)}34%{transform:translate(24px,-58px) rotate(300deg) scale(1.16)}66%{transform:translate(-8px,0) rotate(560deg) scale(1)}80%{transform:translate(-4px,-14px) rotate(650deg)}92%{transform:translate(0,0) rotate(716deg)}100%{transform:translate(0,0) rotate(720deg)}}
@keyframes hts-jolt{0%{transform:translate(-50%,-50%)}18%{transform:translate(-50%,calc(-50% + 7px))}40%{transform:translate(calc(-50% - 3px),calc(-50% - 3px))}65%{transform:translate(calc(-50% + 2px),calc(-50% + 1px))}100%{transform:translate(-50%,-50%)}}
@media (prefers-reduced-motion:reduce){.hts-rollshow,.hts-rollshow-stamp,.hts-rollshow .hts-die.big{animation:none!important}.hts-rollshow button.hts-throw{transition:none}}
/* On a scrolling (phone) table the dice come to the player, not the other way round. */
:where(html.scroll-table){.hts-rollshow{position:fixed;top:50%}}

/* ---------- A played card is laid in the middle of the table ---------- */
.hts-playshow{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:34;pointer-events:none;width:190px;display:flex;flex-direction:column;align-items:center;gap:6px;filter:drop-shadow(0 18px 30px #000c)}
.hts-playshow[hidden]{display:none}
.hts-playshow-who{margin:0;padding:3px 10px;border-radius:999px;background:#0b0e11f2;border:1px solid #ffffff38;font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.hts-playshow>.hts-c{width:100%}
:where(html.scroll-table){.hts-playshow{position:fixed;top:50%}}

/* ---------- Cards are controls ---------- */
.hts-clickable{cursor:pointer}
.hts-c.hts-clickable,.hts-tuck.hts-clickable{transition:box-shadow .12s ease,transform .12s ease}
.hts-c.hts-clickable:hover,.hts-tuck.hts-clickable:hover{box-shadow:0 0 0 2px var(--accent),0 0 18px #e3a34666}
.hts-c.hts-clickable:active{transform:scale(.97)}
.hts-pile.hts-clickable:hover>:first-child{box-shadow:0 0 0 2px var(--accent),0 0 18px #e3a34666}
.hts-pile.hts-clickable:active>:first-child{transform:translateY(2px)}
.hts-target{box-shadow:0 0 0 2px var(--accent);animation:hts-target 1.1s ease-in-out infinite}
@keyframes hts-target{50%{box-shadow:0 0 0 2px var(--accent),0 0 16px 2px #e3a34680}}
@media (prefers-reduced-motion:reduce){.hts-target{animation:none}.hts-c.hts-clickable,.hts-tuck.hts-clickable{transition:none}}

/* ---------- Shift, action points and shift actions live in the centre; tools sit in a corner ---------- */
.hts-center-main{display:flex;flex-direction:column;gap:8px;min-width:0}
.hts-turn{display:flex;flex-direction:column;gap:6px;padding:6px 10px;flex:0 0 auto;border:1px solid var(--line);border-radius:8px;background:#12161ae6;backdrop-filter:blur(8px)}
.hts-turn-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hts-turn .hts-shift{min-width:0}
.hts-turn .hts-shift strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hts-turn .hts-ap-dot{width:20px;height:20px;flex:0 0 auto}
.hts-turn .hts-ap-text{font-size:14px}
.hts-turn .hts-actions-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.hts-turn .hts-actions-bar button{min-height:28px;padding:3px 6px;white-space:nowrap}
.hts-corner{display:flex;justify-content:flex-end;opacity:.6;transition:opacity .15s ease}
.hts-corner:hover,.hts-corner:focus-within{opacity:1}
.hts-corner .hts-tools{padding:4px 8px;border-radius:8px;background:#0d111499;border:1px solid #ffffff1f;backdrop-filter:blur(6px)}
:where(html.fit-table){
 body.at-table #game{grid-template-rows:minmax(0,1fr)}
 .hts-corner{position:fixed;right:10px;bottom:8px;z-index:25;opacity:.45}
 .hts-center>.hts-center-main{justify-self:end;width:100%;max-width:360px;max-height:100%;overflow:auto}
 .hts-center-main>.hts-prompt{max-height:none;overflow:visible}
 .hts-sidebar{padding-bottom:48px}
 /* The log is a <details>, which will not size a flex child; scroll the whole panel instead. */
 .hts-log-wrap{overflow:auto}.hts-log-wrap .hts-log{overflow:visible;flex:none}
}
@media (prefers-reduced-motion:reduce){.hts-corner{transition:none}}
.hts-turn .hts-ap-text{white-space:nowrap}

/* Extra action points (contained anomalies, cards) are ringed; a big budget packs tighter. */
.hts-ap{flex-wrap:nowrap}
.hts-ap-dot.extra{border-color:var(--good);box-shadow:0 0 0 2px #0b0e11,0 0 0 3px var(--good)}
.hts-ap-dot.extra.on{box-shadow:0 0 0 2px #0b0e11,0 0 0 3px var(--good),0 0 10px #e3a34688}
.hts-turn .hts-ap.many{gap:4px}.hts-turn .hts-ap.many .hts-ap-dot{width:15px;height:15px}

/* ---------- Phones: shift and decision pinned on top, a swipeable hand, a held-up card ---------- */
.hts-hud{display:none}
.hts-rollshow{z-index:46}
.hts-tap-armed,.hts-c.hts-tap-armed{box-shadow:0 0 0 3px var(--accent),0 0 22px #e3a34699}
.hts-rules #close-rules{position:sticky;top:0;z-index:2;background:var(--panel)}
:where(html.scroll-table){
 &{--hand-peek:104px}
 body.at-table .hts-top,body.at-table .hts-connection{display:none}
 body.at-table #game{padding-top:calc(var(--hud-h,150px) + 4px);padding-bottom:calc(var(--hand-peek) + 30px)}
 .hts-hud{display:flex;flex-direction:column;gap:6px;position:fixed;left:0;right:0;top:0;z-index:42;padding:6px 8px 8px;background:#0b0e11f2;border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
 .hts-hud .hts-turn{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:0 2px;border:0;background:none;backdrop-filter:none}
 .hts-hud .hts-turn-head{flex:1 1 150px}
 .hts-hud .hts-actions-bar{flex:1 1 250px}
 .hts-hud .hts-actions-bar button{min-height:40px;font-size:11.5px;padding:3px 4px}
 .hts-hud .hts-prompt{padding:8px 10px;gap:5px}
 .hts-hud .hts-prompt h2{font-size:15px}
 .hts-hud .hts-prompt-sub{font-size:12px;line-height:1.3}
 .hts-hud .hts-prompt-recent{display:none}
 .hts-hud .hts-prompt-actions{max-height:calc(28*var(--uh));overflow:auto}
 .hts-hud .hts-prompt-actions button{min-height:40px}
 /* Tools, pill and card buttons big enough for a thumb. */
 .hts-corner{opacity:.85;justify-content:center}
 .hts-tools{flex-wrap:nowrap;gap:5px;justify-content:center}
 .hts-tools button,.hts-tools select{min-height:40px;padding:4px 8px;font-size:11.5px}
 .hts-tools .hts-speed{font-size:10px;gap:4px}
 .hts-c-foot button{min-height:38px}
 .hts-log-wrap summary{padding:10px 0}
 .hts-main button.hts-hand-pill{left:auto;right:8px;bottom:calc(var(--hand-peek) + 8px);min-height:40px;padding:9px 14px;opacity:.9;background:#0b0c0dcc}
 /* The hand is a flat strip: swipe sideways through it, tap to lift it. */
 .hts-hand-tray{justify-content:flex-start}
 .hts-hand{justify-content:flex-start;align-items:flex-start;width:100%;overflow-x:auto;overflow-y:hidden;pointer-events:auto;touch-action:pan-x;padding:14px 10px 10px;gap:8px;scrollbar-width:none;transform:translateY(calc(100% - var(--hand-peek)))}
 .hts-hand::-webkit-scrollbar{display:none}
 .hts-hand-tray:hover .hts-hand,.hts-hand-tray:focus-within .hts-hand{transform:translateY(calc(100% - var(--hand-peek)))}
 .hts-hand-tray.raised .hts-hand,.hts-hand-tray.raised:hover .hts-hand{align-items:flex-end;transform:translateY(0);background:linear-gradient(#0b0e1100,#0b0e11e6 30%)}
 .hts-hand-tray.collapsed .hts-hand,.hts-hand-tray.collapsed:hover .hts-hand,.hts-hand-tray.collapsed:focus-within .hts-hand{transform:translateY(110%)}
 .hts-hand-card,.hts-hand-card:hover,.hts-hand-card:focus-within,.hts-hand-card.armed{--hw:124px;margin-left:0;transform:none}
 .hts-hand>:first-child{margin-left:auto}.hts-hand>:last-child{margin-right:auto}
 /* The inspector is a card held up under the pinned bar, only while a card is tapped. */
 .hts-inspector{display:none}
 body.peek .hts-inspector{display:flex;flex-direction:column;align-items:center;position:fixed;left:50%;top:calc(var(--hud-h,150px) + 8px);transform:translateX(-50%);z-index:44;width:min(250px,calc(68*var(--uw)),calc(36*var(--uh)));min-height:0;max-height:calc(calc(100*var(--uh)) - var(--hud-h,150px) - 20px);overflow:hidden;pointer-events:none;padding:6px;background:#0b0e11f2;box-shadow:0 18px 50px #000d}
 body.peek-play .hts-inspector::after{content:"Tap the card again to play it";margin-top:5px;font:700 11px var(--mono);letter-spacing:.06em;color:var(--accent);text-align:center}
 /* Overlays sit in the free band between the pinned bar and the hand. */
 .hts-rollshow,.hts-playshow{top:calc(50% + var(--hud-h,0px)/2 - var(--hand-peek)/2)}
 .hts-playshow{width:150px}
}
/* A phone on its side: shift and decision share one row. */
:where(html.scroll-table){@media (min-width:640px){
 .hts-hud{flex-direction:row;align-items:flex-start}
 .hts-hud .hts-turn{flex:0 0 300px;flex-direction:column;align-items:stretch}
 .hts-hud .hts-turn-head,.hts-hud .hts-actions-bar{flex:0 0 auto}
 .hts-hud .hts-turn{flex-wrap:nowrap;align-self:flex-start}
 .hts-hud .hts-actions-bar{grid-auto-rows:40px;align-content:start}
 .hts-hud .hts-prompt{flex:1 1 0;min-width:0}
 .hts-hud .hts-prompt-sub{display:none}
 &{--hand-peek:74px}
 body.peek .hts-inspector{left:auto;right:8px;transform:none;width:190px}
}}
/* ---------- Phones: a shorter table and a setup screen with Play always in reach ---------- */
:where(html.scroll-table){
 .hts-area-top{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:2px}
 .hts-area-top::-webkit-scrollbar{display:none}
 .hts-mat.place-top{flex:0 0 min(300px,calc(78*var(--uw)));scroll-snap-align:start}
 body.peek .hts-inspector{width:min(250px,calc(68*var(--uw)),calc(32*var(--uh)))}
}
@media (max-width:760px),(max-height:559px){
 .hts-cover-art{display:none}
 /* Directors are a strip you swipe, so Play stays a thumb away. */
 .hts-setup .hts-director-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(150px,calc(44*var(--uw)));overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px}
 .hts-setup .hts-director-grid>*{scroll-snap-align:start}
 .hts-setup .hts-directors{min-width:0;max-width:100%}
 .hts-setup .hts-actions{position:sticky;bottom:0;z-index:5;margin:0 -12px;padding:10px 12px;background:#0b0e11f2;border-top:1px solid var(--line);backdrop-filter:blur(8px)}
 .hts-setup .hts-actions button{min-height:44px;flex:1 1 auto}
}

.hts-lobby-timing{margin:10px 0}
/* ---------- Card stock is tinted with its department all the way down, not white at the foot ---------- */
.hts-hero,.hts-kind{background:linear-gradient(180deg,color-mix(in srgb,var(--dept,var(--tone)) 15%,var(--paper)),color-mix(in srgb,var(--dept,var(--tone)) 30%,var(--paper2)))}
.hts-hero>.hts-c-top,.hts-kind>.hts-c-top{background:color-mix(in srgb,var(--dept,var(--tone)) 32%,var(--paper))}
.hts-hero .hts-c-flags,.hts-kind .hts-c-note{color:color-mix(in srgb,var(--dept,var(--tone)) 45%,#2a2822)}
/* A rolled Personnel dims on the table but keeps its colour; the inspector shows it at full strength. */
.hts-hero.used{filter:brightness(.82)}
.hts-inspector .hts-hero.used,.hts-playshow .hts-hero.used{filter:none}
/* ---------- The centre column never scrolls sideways ---------- */
/* The decision panel is a wrapping flex column; squeezed for height it used to
   spill into a second column and push the whole column sideways. */
.hts-prompt{flex-wrap:nowrap}
.hts-center-main{overflow-x:hidden}
.hts-center-main>*{flex:0 0 auto;min-width:0;max-width:100%}
.hts-turn .hts-actions-bar{grid-template-columns:repeat(auto-fit,minmax(74px,1fr))}
.hts-turn .hts-actions-bar button{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hts-turn-head{flex-wrap:wrap}
.hts-prompt h2,.hts-prompt p,.hts-prompt-recent li{overflow-wrap:anywhere;min-width:0}
.hts-turn .hts-actions-bar button{font-size:11px;letter-spacing:0;padding:3px 4px}
.hts-center-main .hts-actions-bar button{font-size:10.5px;padding:3px 2px}

/* ---------- A small window with a mouse keeps the fanned hand that pops up on hover ---------- */
/* The flat swipe strip is for touch. With a mouse the scrolling layout uses the
   same hand as the full table, and hovering any card holds it up to read. */
:where(html.scroll-table){@media (min-width:640px) and (hover:none){.hts-hand-card .hts-art{display:none}}}
:where(html.scroll-table){@media (hover:hover) and (pointer:fine){
 &{--hand-peek:110px}
 .hts-main button.hts-hand-pill{left:12px;right:auto;bottom:10px;min-height:0;padding:5px 12px;opacity:.7;background:#0b0c0d66}
 .hts-hand-tray{justify-content:center}
 .hts-hand{justify-content:center;align-items:flex-end;width:auto;max-width:100%;overflow:visible;pointer-events:none;touch-action:auto;padding:26px 28px 0;gap:0;background:none;transform:translateY(56%)}
 .hts-hand-tray:hover .hts-hand,.hts-hand-tray:focus-within .hts-hand,.hts-hand-tray.raised .hts-hand,.hts-hand-tray.raised:hover .hts-hand{align-items:flex-end;background:none;transform:translateY(6px)}
 .hts-hand-tray.collapsed .hts-hand,.hts-hand-tray.collapsed:hover .hts-hand,.hts-hand-tray.collapsed:focus-within .hts-hand{transform:translateY(110%)}
 .hts-hand-card{--hw:clamp(118px,calc(17*var(--uh)),160px);margin-left:calc(var(--hw)*-.26);transform:translateY(var(--drop,0)) rotate(var(--rot,0deg))}
 .hts-hand-card:hover,.hts-hand-card:focus-within,.hts-hand-card.armed{--hw:clamp(118px,calc(17*var(--uh)),160px);margin-left:calc(var(--hw)*-.26);transform:translateY(-16px) rotate(0deg);z-index:5}
 .hts-hand>.hts-hand-card:first-child{margin-left:0}.hts-hand>:last-child{margin-right:0}
 body.peek .hts-inspector{left:auto;right:10px;transform:none;width:min(240px,calc(30*var(--uw)))}
}}

/* ---------- A small window with a mouse keeps the inspector as a panel beside the table ---------- */
:where(html.scroll-table){@media (min-width:900px) and (hover:hover) and (pointer:fine){
 .hts-stage{grid-template-columns:minmax(0,1fr) clamp(230px,calc(24*var(--uw)),290px);align-items:start}
 .hts-sidebar{position:sticky;top:calc(var(--hud-h,120px) + 8px);max-height:calc(calc(100*var(--uh)) - var(--hud-h,120px) - 16px);grid-template-rows:auto auto minmax(60px,1fr);overflow:hidden;padding-bottom:0}
 .hts-inspector{display:flex;max-height:calc(62*var(--uh))}
 .hts-log-wrap{overflow:auto;min-height:0}
}}

/* ---------- Fit to window ---------- */
/* The one-screen table is laid out at no less than 1240x680 and scaled down to
   fit a smaller window. --uh/--uw are 1% of the table (not of the window), so
   every size that used to follow the viewport follows the scaled table. */
html{--fit:1;--uh:calc(1dvh/var(--fit));--uw:calc(1vw/var(--fit))}
html.fit-table:has(body.at-table){--fit:var(--fit-scale,1)}
html.fit-table body.at-table{zoom:var(--fit)}
/* A watcher has no seat: no bot, Director or start controls. */
:root[data-spectator] #lobby label,:root[data-spectator] #lobby .hts-directors,:root[data-spectator] #start,:root[data-spectator] .hts-speed{display:none}

/* ---------- Discard pile viewer ---------- */
.hts-discard-pile:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.hts-rules.hts-discard-view{max-width:980px}
.hts-rules #close-discard{float:right;position:sticky;top:0;z-index:2;background:var(--panel)}
.hts-discard-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px;clear:both}
.hts-discard-list .hts-c{--cw:150px}
.hts-discard-view .hts-fine{margin:0}
.hts-discard-view .hts-c .hts-c-text{font:11.5px/1.35 var(--serif);color:var(--paper-ink)}
.hts-discard-view .hts-c .hts-c-note{font:10px/1.35 var(--mono);color:var(--paper-muted)}