:root {
  color-scheme: dark;
  --ink: #f6f0e3;
  --muted: #b7b2a8;
  --paper: #1e292c;
  --panel: #273638;
  --line: rgba(246, 240, 227, .16);
  --gold: #f4bb58;
  --shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; color: var(--ink); background: radial-gradient(circle at 15% 0%, #455b58 0, transparent 34rem), linear-gradient(145deg, #102025 0%, #243033 48%, #1c2c31 100%); font: 15px/1.5 'Segoe UI', 'Trebuchet MS', Arial, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: not-allowed; opacity: .48; }
.shell { width: min(1220px, calc(100% - 32px)); min-height: 100vh; margin: auto; padding: 34px 0 50px; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 38px; }
.brand h1, h2, h3, p { margin: 0; }
.brand h1 { font-size: 1.25rem; letter-spacing: .06em; }
.brand-mark { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--gold); color: var(--gold); font-size: 1.7rem; transform: rotate(45deg); }
.brand-mark::first-letter { transform: rotate(-45deg); }
.room-connection { margin-left: 8px; color: var(--muted); font: .68rem/1 system-ui, sans-serif; letter-spacing: .08em; white-space: nowrap; }.room-connection.online { color: #a8dcab; }
.eyebrow { color: var(--gold); font: 700 .68rem/1.2 system-ui, sans-serif; letter-spacing: .15em; }
.panel { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(46, 63, 64, .96), rgba(29, 42, 45, .96)); box-shadow: var(--shadow); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.welcome { padding: clamp(26px, 4.5vw, 48px); background: linear-gradient(120deg, rgba(20, 41, 43, .98), rgba(50, 70, 67, .94)); }
.welcome h2 { max-width: 650px; margin: 10px 0 12px; font-size: clamp(.95rem, 2vw, 1.5rem); line-height: 1.12; letter-spacing: -.015em; }
.welcome .eyebrow { font-size: .78rem; }.welcome > .muted { font-size: 1.02rem; }.welcome label { font-size: .84rem; }.welcome .tool-setup legend { font-size: .76rem; }.welcome .tool-picker p { font-size: .86rem; }.welcome .tool-choice { font-size: .79rem; }
.welcome-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 850px; margin-top: 28px; }
.form-card { display: flex; flex-direction: column; gap: 15px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: rgba(17, 31, 34, .43); }
.form-card h3 { font-size: 1.35rem; }
label { display: grid; gap: 6px; color: var(--muted); font: .74rem/1.3 system-ui, sans-serif; }
input, select { width: 100%; padding: 11px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; outline: none; color: var(--ink); background: rgba(255,255,255,.07); }
input:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(244,187,88,.13); }
select option { color: var(--ink); background: #243437; }
.tool-setup { min-width: 0; margin: 0; padding: 0; border: 0; }.tool-setup legend { margin-bottom: 7px; padding: 0; color: var(--gold); font: 700 .68rem/1.2 system-ui, sans-serif; letter-spacing: .12em; }.tool-picker { display: grid; gap: 9px; margin-top: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,.13); }.tool-picker p { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .78rem; }.tool-picker b { color: var(--gold); }.tool-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }.tool-choice { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; color: #dbe5de; font-size: .71rem; line-height: 1.2; cursor: pointer; }.tool-choice:has(input:checked) { border-color: rgba(244,187,88,.75); background: rgba(244,187,88,.1); }.tool-choice input { width: auto; margin: 0; padding: 0; accent-color: var(--gold); }.tool-choice input:focus { box-shadow: none; }
button { padding: 11px 15px; border: 1px solid rgba(244,187,88,.7); border-radius: 8px; background: transparent; transition: transform .16s ease, background .16s ease; }
button:not(.die):not(:disabled):hover { transform: translateY(-1px); background: rgba(244,187,88,.12); }
button.primary { border: 0; color: #263032; background: var(--gold); font-weight: 700; }
button.primary span { margin-left: 6px; font-size: 1.2em; }
.notice { position: fixed; z-index: 4; top: 20px; left: 50%; max-width: min(550px, calc(100vw - 30px)); padding: 14px 18px; border: 1px solid #e99b7a; border-radius: 9px; color: #ffe7dc; background: #693e37; box-shadow: var(--shadow); transform: translateX(-50%); }
.lobby { padding: clamp(22px, 4vw, 40px); }
.room-heading, .game-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.room-heading h2, .game-head h2, .results h2 { margin-top: 5px; font-size: clamp(1.55rem, 3vw, 2.35rem); line-height: 1.12; letter-spacing: -.025em; }
.compact { padding: 8px 12px; font: .78rem system-ui, sans-serif; }
.lobby-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; margin: 35px 0; }
.lobby-layout h3 { margin-bottom: 13px; }
.player-list, .activity ul, .objectives ol { margin: 0; padding: 0; list-style: none; }
.player-list { display: grid; gap: 9px; }
.player-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.player-list small { margin-left: auto; color: var(--muted); font: .7rem system-ui, sans-serif; }
.avatar { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: #1a2a2e; background: var(--gold); font: 700 .82rem system-ui, sans-serif; }
.rules-note { display: grid; align-content: start; gap: 9px; padding: 20px; border-left: 2px solid var(--gold); border-radius: 0 9px 9px 0; background: rgba(0,0,0,.14); }
.rules-note span { color: var(--muted); }
.waiting { color: var(--muted); }
.game-head { margin-bottom: 18px; }
.game-head h2 span { color: var(--muted); font-size: .6em; }
.game-actions { display: flex; align-items: center; gap: 9px; }.turn-heading { display: inline-block; margin-left: .48em; color: var(--muted); font-size: .72em; font-weight: 700; letter-spacing: -.01em; }.turn-heading.your-turn { color: var(--gold); }.exit-link { padding: 5px 0; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; color: var(--muted); font-size: .78rem; }.exit-link:not(:disabled):hover { color: var(--gold); background: transparent; }
.turn-badge.your-turn { border-color: var(--gold); color: var(--gold); }
.draft-panel { display: grid; min-height: 112px; grid-template-columns: minmax(0, 1fr) minmax(310px, .62fr); gap: 20px; padding: 18px 22px; margin-bottom: 25px; }.draft-panel-idle { opacity: .42; }
.draft-zone { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: 16px; }.selected-zone, .pool-zone { display: grid; gap: 8px; }.selected-die-slot { display: grid; width: 58px; height: 58px; place-items: center; border: 1px dashed rgba(244,187,88,.64); border-radius: 12px; background: rgba(9,20,23,.35); }.selected-die-slot .die { width: 52px; height: 52px; }.empty-die-slot { color: var(--muted); font-size: 1.45rem; }.pool-zone { min-width: 0; }.dice-pool { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }.turn-hint { display: grid; align-content: center; gap: 8px; padding: 12px 15px; border-left: 1px solid var(--line); color: var(--muted); font-size: .85rem; }.turn-hint p { margin: 0; }.turn-hint .tool-mode { margin: 0; }
.skip-turn { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: .8rem; }.skip-turn button { padding: 7px 10px; border-color: rgba(244,187,88,.65); color: var(--gold); font-size: .78rem; }
.die { position: relative; display: grid; width: 46px; height: 46px; place-items: center; overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.32); border-radius: 10px; color: rgba(20,32,35,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.76), inset 0 -7px 12px rgba(0,0,0,.18), 0 5px 8px rgba(0,0,0,.28); transform: perspective(130px) rotateX(3deg) rotateY(-2deg); }
.die::before { position: absolute; inset: 3px 5px 48% 5px; border-radius: 8px 8px 50% 50%; background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,0)); content: ''; pointer-events: none; }
.die::after { position: absolute; inset: 0; border: 1px solid rgba(0,0,0,.27); border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); content: ''; pointer-events: none; }
.die.selected { outline: 3px solid var(--gold); outline-offset: 3px; transform: perspective(130px) translateY(-4px) rotateX(3deg) rotateY(-2deg); }
.die:not(:disabled):hover { transform: perspective(130px) translateY(-2px) rotateX(3deg) rotateY(-2deg); }
.die .pips { display: block; width: 66%; aspect-ratio: 1; background-repeat: no-repeat; }
.pips-1 { background-image: radial-gradient(circle at 50% 50%, currentColor 0 13%, transparent 15%); }
.pips-2 { background-image: radial-gradient(circle at 23% 23%, currentColor 0 13%, transparent 15%), radial-gradient(circle at 77% 77%, currentColor 0 13%, transparent 15%); }
.pips-3 { background-image: radial-gradient(circle at 23% 23%, currentColor 0 13%, transparent 15%), radial-gradient(circle at 50% 50%, currentColor 0 13%, transparent 15%), radial-gradient(circle at 77% 77%, currentColor 0 13%, transparent 15%); }
.pips-4 { background-image: radial-gradient(circle at 23% 23%, currentColor 0 13%, transparent 15%), radial-gradient(circle at 77% 23%, currentColor 0 13%, transparent 15%), radial-gradient(circle at 23% 77%, currentColor 0 13%, transparent 15%), radial-gradient(circle at 77% 77%, currentColor 0 13%, transparent 15%); }
.pips-5 { background-image: radial-gradient(circle at 23% 23%, currentColor 0 13%, transparent 15%), radial-gradient(circle at 77% 23%, currentColor 0 13%, transparent 15%), radial-gradient(circle at 50% 50%, currentColor 0 13%, transparent 15%), radial-gradient(circle at 23% 77%, currentColor 0 13%, transparent 15%), radial-gradient(circle at 77% 77%, currentColor 0 13%, transparent 15%); }
.pips-6 { background-image: radial-gradient(circle at 23% 20%, currentColor 0 13%, transparent 15%), radial-gradient(circle at 77% 20%, currentColor 0 13%, transparent 15%), radial-gradient(circle at 23% 50%, currentColor 0 13%, transparent 15%), radial-gradient(circle at 77% 50%, currentColor 0 13%, transparent 15%), radial-gradient(circle at 23% 80%, currentColor 0 13%, transparent 15%), radial-gradient(circle at 77% 80%, currentColor 0 13%, transparent 15%); }
.swatch.red, .color-red { background: #d55a4f; }.swatch.yellow, .color-yellow { background: #e6bf48; }.swatch.green, .color-green { background: #66ae76; }.swatch.blue, .color-blue { background: #5f9ec4; }.swatch.purple, .color-purple { background: #9975b9; }
.die.red { background: linear-gradient(135deg, rgba(255,255,255,.34), transparent 42%), linear-gradient(145deg, rgba(230,115,104,.88), rgba(152,42,44,.76)); }.die.yellow { background: linear-gradient(135deg, rgba(255,255,255,.4), transparent 42%), linear-gradient(145deg, rgba(250,220,109,.88), rgba(178,128,27,.78)); }.die.green { background: linear-gradient(135deg, rgba(255,255,255,.36), transparent 42%), linear-gradient(145deg, rgba(124,204,140,.88), rgba(43,119,78,.78)); }.die.blue { background: linear-gradient(135deg, rgba(255,255,255,.38), transparent 42%), linear-gradient(145deg, rgba(111,183,221,.88), rgba(42,105,158,.78)); }.die.purple { background: linear-gradient(135deg, rgba(255,255,255,.36), transparent 42%), linear-gradient(145deg, rgba(183,139,213,.88), rgba(102,64,142,.8)); }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 25px; align-items: start; }
.windows h3 { margin-bottom: 12px; }
.window-wrap { position: relative; max-width: 630px; padding: 16px; border: 1px solid rgba(164,191,192,.4); border-radius: 13px; background: linear-gradient(135deg, #47575b, #121d20 38%, #3b4d51 65%, #10191b) border-box; box-shadow: inset 0 0 0 3px rgba(5,11,13,.58), inset 0 0 0 5px rgba(175,209,207,.13), 0 16px 30px rgba(0,0,0,.4); }
.window-wrap::before { position: absolute; inset: 7px; border: 1px solid rgba(206,232,222,.18); border-radius: 8px; content: ''; pointer-events: none; }
.window-title { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 3px 11px; color: #f0f5ef; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.65); }
.window-identity, .window-player-data { display: flex; align-items: center; gap: 8px; }.window-identity > span:first-child { font-size: 1.12rem; }.window-player-data { color: #c9d8d4; font: .82rem system-ui, sans-serif; font-weight: 600; }.private-inline, .favor-inline { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }.favor-inline { color: var(--gold); }.window-title small { color: #bfceca; font: .82rem system-ui, sans-serif; }
.window-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: 5px; padding: 6px; border: 1px solid rgba(13,22,24,.8); border-radius: 5px; background: linear-gradient(145deg, #183039, #34575c); box-shadow: inset 0 2px 7px rgba(0,0,0,.58), 0 1px rgba(255,240,200,.22); }
.window-cell { position: relative; display: grid; aspect-ratio: 1; place-items: center; overflow: hidden; padding: 3px; border: 1px solid rgba(155,220,220,.48); border-radius: 3px; background: radial-gradient(circle at 25% 18%, rgba(156,224,219,.34), transparent 45%), linear-gradient(145deg, #396e78, #1c4a56); box-shadow: inset 0 1px rgba(255,255,255,.2), inset 0 -4px 7px rgba(0,0,0,.18); }
.window-cell:not(:disabled):hover { border-color: var(--gold); background: radial-gradient(circle at 25% 18%, rgba(255,224,144,.28), transparent 45%), linear-gradient(145deg, #2b5961, #164047); }
.window-cell.legal-cell { border-color: rgba(244,187,88,.88); box-shadow: inset 0 1px rgba(255,255,255,.18), inset 0 -4px 7px rgba(0,0,0,.23), 0 0 0 1px rgba(244,187,88,.22), 0 0 13px rgba(244,187,88,.18); }
.window-cell .die { width: 100%; height: 100%; }
.restriction { display: grid; width: 74%; height: 74%; place-items: center; border: 1px solid rgba(255,255,255,.3); color: rgba(0,0,0,.5); font: 700 1.1rem system-ui, sans-serif; opacity: .7; }.restriction .pips, .mini-pips { display: block; width: 70%; aspect-ratio: 1; background-repeat: no-repeat; color: #111b1e; }.window-cell .restriction:not([class*='color-']) { width: 78%; height: 78%; border: 1px solid rgba(239,250,242,.88); border-radius: 50%; color: #10252b; opacity: 1; background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.9), rgba(212,234,227,.92) 58%, rgba(151,189,190,.92)); box-shadow: inset 0 1px rgba(255,255,255,.9), 0 1px 3px rgba(0,0,0,.22); }.window-cell .restriction .pips { color: #10252b; }
.restriction[class*='color-'] { border-radius: 50%; }.window-cell .restriction[class*='color-'] { width: 78%; height: 78%; border-color: rgba(255,255,255,.78); opacity: .96; box-shadow: inset 0 1px rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.22); }
.shade-1 { background: #eef2e6; }.shade-2 { background: #d3d9cf; }.shade-3 { background: #aeb6b1; }.shade-4 { background: #84918f; }.shade-5 { background: #5d6b6d; }.shade-6 { background: #334348; color: #dfe7e4; }
.private-goal { margin: 10px 1px 0; color: #f8ebd2; font-size: .85rem; }
.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: baseline; }
.opponents { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin-top: 24px; }
.opponents .window-wrap { border-width: 7px; padding: 9px; }
.opponents .window-title { font-size: .82rem; }.opponents .window-identity > span:first-child { font-size: .98rem; }.opponents .window-title small { display: none; }
.sidebar { display: grid; gap: 17px; }.sidebar .panel { padding: 18px; }
.objectives ol { display: grid; gap: 14px; margin-top: 12px; counter-reset: objective; }.objectives li { position: relative; padding-left: 25px; }.objectives li::before { position: absolute; left: 0; color: var(--gold); content: counter(objective); counter-increment: objective; font-weight: bold; }.objectives span { display: block; margin-top: 2px; color: var(--muted); font-size: .83rem; }
.activity ul { display: grid; gap: 8px; margin-top: 10px; }.activity li { color: var(--muted); font-size: .79rem; }
.pending, .tool-mode { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 12px; color: var(--muted); font-size: .84rem; }.pending .die { width: 34px; height: 34px; }.tool-mode { padding: 9px; border-left: 2px solid var(--gold); background: rgba(0,0,0,.13); }.tool-mode strong { color: var(--gold); }.tool-mode em { font-style: normal; }.tools { display: grid; gap: 8px; }.tool-card { display: grid; gap: 3px; width: 100%; padding: 10px; text-align: left; border-color: var(--line); }.tool-card strong { color: var(--gold); font-size: .86rem; }.tool-card span, .tool-card small { color: var(--muted); font-size: .73rem; }.round-track-panel { align-content: start; padding: 12px 0 12px 18px; }.draft-track { display: grid; gap: 8px; }.draft-track > .eyebrow { white-space: nowrap; }.track-dice { display: flex; flex-wrap: wrap; gap: 4px; }.draft-track-empty { color: var(--muted); font-size: .78rem; }.draft-track .die { width: 39px; height: 39px; border-radius: 9px; }.pattern-option { display: grid; min-height: 185px; align-content: center; gap: 9px; text-align: left; border-color: var(--gold); }.pattern-option > span { color: var(--muted); font-size: .8rem; }.mini-window { display: grid; width: 165px; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 5px; border: 4px solid #9b7547; background: #5e462d; }.mini-cell { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid rgba(0,0,0,.38); background: #1d3940; color: #f7f2e7; text-shadow: 0 1px 2px rgba(0,0,0,.45); font: 800 1.4rem/1 system-ui, sans-serif; }.mini-value { opacity: 1; }.mini-cell.mini-color { border-radius: 4px; transform: none; }.mini-cell.mini-color.color-red { background: #d55a4f; }.mini-cell.mini-color.color-yellow { background: #e6bf48; }.mini-cell.mini-color.color-green { background: #66ae76; }.mini-cell.mini-color.color-blue { background: #5f9ec4; }.mini-cell.mini-color.color-purple { background: #9975b9; }.end-turn { margin: 14px 0 0; }
.results { max-width: 820px; padding: clamp(26px, 5vw, 58px); margin: 50px auto; }.ranking { display: grid; gap: 11px; margin: 35px 0; padding: 0; list-style: none; }.ranking li { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 14px; padding: 13px; border-bottom: 1px solid var(--line); }.ranking .rank { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.12); font-weight: bold; }.ranking .rank-1 .rank { color: #263032; background: var(--gold); }.ranking small { display: block; margin-top: 3px; color: var(--muted); font: .71rem system-ui, sans-serif; }.ranking b { color: var(--gold); font-size: 1.3rem; }
@media (max-width: 760px) { .shell { width: min(100% - 22px, 600px); padding-top: 16px; }.brand { margin-bottom: 22px; }.welcome-actions, .lobby-layout, .game-layout, .draft-panel { grid-template-columns: 1fr; }.welcome { padding: 30px 22px; }.draft-zone { grid-template-columns: 74px minmax(0, 1fr); }.turn-hint { padding: 11px 0 0; border-top: 1px solid var(--line); border-left: 0; }.dice-pool { justify-content: start; }.game-head { align-items: start; }.turn-badge { white-space: nowrap; }.window-wrap { padding: 9px; border-width: 7px; }.window-grid { gap: 2px; }.window-title small { display: none; }.opponents { grid-template-columns: repeat(2, minmax(0, 1fr)); }.room-heading { align-items: start; flex-direction: column; }.sidebar { grid-template-columns: 1fr; } }