:root{--color-bg: oklch(97% .015 85);--color-surface: oklch(99% .008 85);--color-ink: oklch(25% .02 60);--color-muted: oklch(45% .02 60);--color-border: oklch(85% .03 70);--color-border-soft: oklch(88% .02 75);--color-accent: oklch(52% .16 35);--color-accent-hover: oklch(42% .16 35);--color-error: oklch(50% .19 15);--color-on-accent: #fdf8ee;--color-disabled-bg: oklch(90% .01 80);--color-disabled-text: oklch(60% .01 80);--color-success: oklch(58% .13 145);--color-success-bg: oklch(58% .13 145 / .16);--color-success-text: oklch(40% .13 145);--color-loss-bg: oklch(45% .02 60 / .1);--resource-wood: oklch(42% .06 150);--resource-brick: oklch(52% .16 35);--resource-sheep: oklch(70% .1 140);--resource-wheat: oklch(75% .13 85);--resource-ore: oklch(55% .02 250);--resource-devcard: oklch(50% .12 300);--player-red: oklch(52% .16 35);--player-blue: oklch(50% .14 250);--player-orange: oklch(65% .15 55);--player-cream: oklch(92% .01 85);--player-green: oklch(50% .13 155);--player-brown: oklch(38% .07 50);--font-heading: "Bitter", serif;--font-body: "Karla", sans-serif;--text-h1-size: 32px;--text-h1-weight: 700;--text-h2-size: 22px;--text-h2-weight: 700;--text-body-size: 16px;--text-body-weight: 400;--text-emphasis-size: 14px;--text-emphasis-weight: 600;--text-eyebrow-size: 12px;--text-eyebrow-weight: 700;--text-eyebrow-tracking: .06em;--radius-sm: 8px;--radius-md: 10px;--radius-lg: 12px;--shadow-card: 0 1px 2px oklch(30% .02 60 / .06), 0 8px 20px oklch(30% .02 60 / .08)}*{box-sizing:border-box}body{margin:0;background:var(--color-bg);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-body-size);font-weight:var(--text-body-weight)}h1,h2,h3{font-family:var(--font-heading);margin:0;color:var(--color-ink)}h1{font-size:var(--text-h1-size);font-weight:var(--text-h1-weight)}h2{font-size:var(--text-h2-size);font-weight:var(--text-h2-weight)}a{color:var(--color-accent);text-decoration:none;font-weight:var(--text-emphasis-weight)}a:hover{color:var(--color-accent-hover)}button,input{font-family:inherit}.btn{padding:12px 22px;border-radius:var(--radius-sm);border:none;font-weight:var(--text-emphasis-weight);font-size:14px;font-family:var(--font-body);cursor:pointer}.btn-primary{background:var(--color-accent);color:var(--color-on-accent)}.btn-primary:hover:not(:disabled){background:var(--color-accent-hover)}.btn-secondary{border:2px solid var(--color-accent);background:transparent;color:var(--color-accent);padding:10px 20px}.btn-ghost{background:transparent;color:var(--color-accent)}.btn-destructive{background:var(--color-error);color:var(--color-on-accent)}.btn:disabled{background:var(--color-disabled-bg);color:var(--color-disabled-text);cursor:not-allowed}.btn-block{width:100%;padding:14px;font-size:15px}.field{display:flex;flex-direction:column;gap:6px}.field-label{font-size:var(--text-eyebrow-size);font-weight:var(--text-eyebrow-weight);letter-spacing:var(--text-eyebrow-tracking);text-transform:uppercase;color:var(--color-muted)}.input{box-sizing:border-box;width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--color-border);font-size:15px;color:var(--color-ink);background:var(--color-bg);font-family:var(--font-body)}.input:focus{outline:none;border-color:var(--color-accent)}.input.is-error{border-color:var(--color-error)}.input:disabled{border-color:var(--color-disabled-bg);color:var(--color-disabled-text);background:#ebe7e1}.field-error{font-size:12px;color:var(--color-error);font-weight:var(--text-emphasis-weight)}.chip{min-width:44px;height:38px;padding:0 10px;border-radius:var(--radius-sm);border:2px solid var(--color-border);background:transparent;display:flex;align-items:center;justify-content:center;font-weight:var(--text-emphasis-weight);color:var(--color-muted);cursor:pointer;font-family:var(--font-body)}.chip.is-selected{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-on-accent)}.chip:disabled{border-color:var(--color-disabled-bg);color:var(--color-disabled-text);cursor:not-allowed}.badge{display:inline-block;padding:4px 12px;border-radius:999px;font-weight:var(--text-emphasis-weight);font-size:12px}.badge-win{background:var(--color-success-bg);color:var(--color-success-text)}.badge-loss{background:var(--color-loss-bg);color:var(--color-muted)}.badge-turn{background:var(--resource-wheat);color:var(--color-ink)}.avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-on-accent);font-weight:var(--text-emphasis-weight);font-size:14px;flex-shrink:0}.avatar-sm{width:32px;height:32px;font-size:13px}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:20px}.card-shadow{box-shadow:var(--shadow-card)}.eyebrow{font-size:var(--text-eyebrow-size);font-weight:var(--text-eyebrow-weight);letter-spacing:var(--text-eyebrow-tracking);text-transform:uppercase;color:var(--color-muted)}@keyframes dice-roll{0%{transform:rotate(0) scale(1)}30%{transform:rotate(-18deg) scale(1.08)}60%{transform:rotate(14deg) scale(1.08)}to{transform:rotate(0) scale(1)}}.dice-roll-anim{animation:dice-roll .5s ease-out}@keyframes resource-flash{0%{transform:scale(1);box-shadow:0 0 #418e4780}40%{transform:scale(1.15);box-shadow:0 0 0 6px #418e4700}to{transform:scale(1);box-shadow:0 0 #418e4700}}.resource-flash{animation:resource-flash .6s ease-out}@keyframes float-up-fade{0%{transform:translateY(0);opacity:1}to{transform:translateY(-18px);opacity:0}}.float-up-fade{animation:float-up-fade .6s ease-out forwards}@keyframes piece-pop-in{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15);opacity:1}to{transform:scale(1)}}.piece-pop-in{animation:piece-pop-in .35s ease-out;transform-box:fill-box;transform-origin:center}@keyframes robber-drop{0%{transform:translateY(-14px) scale(.8);opacity:0}70%{transform:translateY(2px) scale(1.05);opacity:1}to{transform:translateY(0) scale(1)}}.robber-drop{animation:robber-drop .4s ease-out;transform-box:fill-box;transform-origin:center}@keyframes turn-pulse{0%{transform:scale(1)}40%{transform:scale(1.06)}to{transform:scale(1)}}.turn-pulse{animation:turn-pulse .4s ease-out}@keyframes badge-pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2);opacity:1}to{transform:scale(1)}}.badge-pop{animation:badge-pop .4s ease-out;display:inline-block}.game-screen{width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;position:relative}.game-header{flex-shrink:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--color-border-soft)}.player-dashboard{width:250px;flex-shrink:0;box-sizing:border-box;padding:20px;border-right:1px solid var(--color-border-soft);background:#f3eee3;display:flex;flex-direction:column;gap:8px;min-height:0;overflow-y:auto}.player-strip{display:none;gap:4px;padding:6px 12px;overflow-x:auto;border-bottom:1px solid var(--color-border-soft);background:#f3eee3;flex-shrink:0}.game-body{flex:1;min-height:0;display:flex}.board-viewport-wrapper{flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}.desktop-action-panel{width:300px;flex-shrink:0;box-sizing:border-box;padding:20px;border-left:1px solid var(--color-border-soft);background:#f3eee3;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.resource-bar{flex-shrink:0;height:88px;display:flex;padding:0 28px}.resource-row{overflow-x:visible}.mobile-action-sheet{display:none}@media (max-width: 768px){.game-header{padding:0 14px;height:52px}.game-header-subtitle,.player-dashboard{display:none}.player-strip{display:flex}.board-viewport-wrapper{padding:8px;min-height:240px}.desktop-action-panel{display:none}.resource-bar{padding:0 12px;height:72px}.resource-row{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}.mobile-action-sheet{display:block;position:fixed;left:0;right:0;bottom:72px;z-index:20;background:var(--color-surface);border-top:1px solid var(--color-border-soft);box-shadow:var(--shadow-card)}.mobile-action-sheet-handle{width:100%;padding:12px;border:none;background:var(--resource-wheat);color:var(--color-ink);font-weight:700;font-size:14px;font-family:var(--font-body);cursor:pointer}.mobile-action-sheet-body{max-height:0;overflow-y:auto;transition:max-height .25s ease;padding:0 14px;display:flex;flex-direction:column;gap:12px}.mobile-action-sheet-body.is-open{max-height:60vh;max-height:60dvh;padding:14px}}@media (max-width: 430px){.game-header{padding:0 10px}.board-viewport-wrapper{padding:4px}}