*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--primary-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--sidebar-bg: rgba(255, 255, 255, .95);--sidebar-width: 420px;--game-area-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);--text-primary: #2c3e50;--text-secondary: #7f8c8d;--border-color: #bdc3c7;--shadow: 0 8px 32px rgba(0,0,0,.1);--shadow-hover: 0 12px 40px rgba(0,0,0,.15);--border-radius: 16px;--border-radius-small: 8px;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--gradient-gold: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);--gradient-blue: linear-gradient(135deg, #0088ff 0%, #0056cc 100%);--gradient-red: linear-gradient(135deg, #ff4400 0%, #cc3300 100%);--gradient-green: linear-gradient(135deg, #00aa00 0%, #008800 100%)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,ui-sans-serif,Helvetica,Arial,sans-serif;background:var(--primary-bg);color:var(--text-primary);margin:0;min-height:100vh;font-size:14px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}.app-layout{display:flex;min-height:100vh;background:var(--primary-bg)}.sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);padding:16px;border-right:none;overflow-y:auto;flex-shrink:0;transition:var(--transition);backdrop-filter:blur(10px);box-shadow:var(--shadow)}.sidebar.hide{transform:translate(-100%);width:0;padding:0;border-right:none}.collapsed-menu-button{position:fixed;top:20px;left:20px;z-index:1000;padding:12px 16px;background:#6c757d;color:#fff;border:none;border-radius:var(--border-radius);cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px;transition:var(--transition);box-shadow:var(--shadow)}.collapsed-menu-button:hover{background:#5a6268}.menu-button{all:unset;width:100%;padding:8px 12px;background:var(--surface);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;font-size:13px;margin-bottom:8px;display:flex;align-items:center;gap:6px;transition:var(--transition)}.menu-button:hover{background:color-mix(in oklab,var(--surface),transparent 6%)}.menu-icon{font-size:14px}.new-game-button{all:unset;width:100%;padding:8px 12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:none;border-radius:var(--border-radius);cursor:pointer;font-size:13px;margin-bottom:12px;transition:var(--transition)}.new-game-button:hover{filter:brightness(1.03)}.quick-test-section{margin-bottom:16px}.quick-test-button{all:unset;width:100%;padding:8px 12px;background:var(--surface);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:space-between;transition:var(--transition)}.quick-test-button:hover{background:color-mix(in oklab,var(--surface),transparent 6%)}.arrow{font-size:11px}.player-config-section{margin-bottom:var(--s-4)}.player-config-section h3{font-size:17px;font-weight:700;margin-bottom:var(--s-3);color:var(--text);letter-spacing:.3px}.desktop-sidebar .player-config-section{border-top:1px solid color-mix(in oklab,var(--border),transparent 50%);padding-top:var(--s-4);margin-top:var(--s-4)}.desktop-sidebar .player-config-section:first-child{border-top:none;padding-top:0;margin-top:0}.player-card{background:color-mix(in oklab,var(--surface),transparent 3%);border-radius:var(--r-md);margin-bottom:var(--s-3);padding:var(--s-4);border-left:4px solid transparent;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px hsl(var(--shadow) / .08),0 8px 24px hsl(var(--shadow) / .06);backdrop-filter:blur(12px);border:1px solid color-mix(in oklab,var(--border),transparent 40%);cursor:pointer}.player-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px hsl(var(--shadow) / .12),0 16px 40px hsl(var(--shadow) / .1)}.player-card.yellow{border-left:4px solid transparent;border-image:var(--gradient-gold) 1;background:linear-gradient(135deg,#ffd7001a,#ffb3470d)}.player-card.blue{border-left:4px solid transparent;border-image:var(--gradient-blue) 1;background:linear-gradient(135deg,#0088ff1a,#0056cc0d)}.player-card.red{border-left:4px solid transparent;border-image:var(--gradient-red) 1;background:linear-gradient(135deg,#ff44001a,#cc33000d)}.player-card.green{border-left:4px solid transparent;border-image:var(--gradient-green) 1;background:linear-gradient(135deg,#00aa001a,#0088000d)}.player-card.active{box-shadow:0 4px 16px hsl(var(--shadow) / .15),0 20px 48px hsl(var(--shadow) / .12);transform:translateY(-3px) scale(1.01);background:color-mix(in oklab,var(--surface),white 2%);border-left-color:var(--accent);border-color:var(--accent)}.player-header{display:flex;align-items:center;justify-content:space-between}.player-info{display:flex;align-items:center;gap:10px}.player-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;box-shadow:0 2px 8px hsl(var(--shadow) / .15);border:2px solid white}.player-details{display:flex;flex-direction:column;gap:2px}.player-name{font-weight:700;font-size:15px;letter-spacing:.2px}.player-type{font-size:12px;color:var(--text-secondary)}.player-type-controls{margin-top:4px}.player-type-dropdown{padding:6px 10px;border:1px solid var(--border);border-radius:var(--r-xs);font-size:12px;background:var(--surface);width:100%;max-width:140px;cursor:pointer;transition:all .15s ease}.player-type-dropdown:hover{border-color:var(--accent)}.player-type-dropdown:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent),transparent 90%)}.difficulty-dropdown{padding:6px 12px;border:1px solid var(--border);border-radius:var(--r-xs);font-size:12px;background:var(--surface);cursor:pointer;transition:all .15s ease;min-width:80px}.difficulty-dropdown:hover{border-color:var(--accent)}.difficulty-dropdown:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent),transparent 90%)}.current-turn-info{margin-top:8px;padding-top:8px;border-top:1px solid #eee;font-size:12px}.dice-result{font-weight:600;color:var(--text-primary)}.extra-turn{color:#28a745}.available-horses{color:var(--text-secondary);margin-top:4px}.main-game-area{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;position:relative;min-height:100vh}.game-board-container{background:var(--game-area-bg);border-radius:var(--border-radius);padding:24px;box-shadow:var(--shadow-hover);display:flex;align-items:center;justify-content:center;width:100%;height:100%;max-width:calc(100vw - var(--sidebar-width) - 32px);max-height:calc(100vh - 32px);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px)}.ai-thinking{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary)}.spinner{width:16px;height:16px;border:2px solid #ddd;border-top:2px solid #2196f3;border-radius:50%;animation:spin 1s linear infinite}.loading-text{padding:8px;font-size:12px;color:var(--text-secondary);text-align:center}.expanded-config{margin-top:16px;padding:16px;background:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow)}.ai-status{margin-top:16px;padding:12px;background:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow)}@keyframes slideDown{0%{max-height:0;opacity:0}to{max-height:500px;opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.game-board-container{border:2px solid var(--text-primary)}}:focus-visible{outline:2px solid #0066cc;outline-offset:2px;border-radius:4px}@media (max-width: 1024px){.app-layout{flex-direction:column}.sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border-color)}.main-game-area{flex-direction:column}.dice-area{position:relative;bottom:auto;left:auto;transform:none;margin-top:20px}}@media (max-width: 768px){.sidebar,.main-game-area,.game-board-container{padding:12px}}.cell-text,.home-text{font-family:inherit;user-select:none;pointer-events:none;font-variant-numeric:tabular-nums}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast: high){:root{--shadow-color: 0 0% 0%}.game-board-container{border:2px solid var(--text-primary)}}:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px;border-radius:calc(var(--border-radius) / 2)}@container (max-width: 768px){.app{padding:var(--spacing-md);gap:var(--spacing-md)}}@container (max-width: 480px){.app{padding:var(--spacing-sm);gap:var(--spacing-sm)}}@media (max-width: 768px){body{font-size:.9rem}}@media (max-width: 480px){body{font-size:.85rem}}@media print{:root{--primary-bg: white;--secondary-bg: white;--text-primary: black;--text-secondary: #333;--surface-color: white}.app-header{display:none}.game-board-container{box-shadow:none;border:2px solid black;break-inside:avoid}svg{print-color-adjust:exact}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(0);white-space:nowrap;border:0}:root{--bg-gradient: radial-gradient(1200px 800px at 20% 10%, #f7f9fc 0%, #eef2f7 40%, #e9eef5 70%, #e7ecf4 100%);--surface: #ffffff;--surface-2: #f8fafc;--text: #1f2937;--muted: #6b7280;--border: #e5e7eb;--shadow: 220 10% 20%;--accent: #6366f1;--accent-2: #22d3ee;--win: #10b981;--warn: #f59e0b;--danger: #ef4444;--color-yellow: #FFD700;--color-blue: #0088FF;--color-red: #FF4400;--color-green: #00AA00;--r-xs: 6px;--r-sm: 10px;--r-md: 16px;--r-lg: 20px;--s-1: 6px;--s-2: 10px;--s-3: 16px;--s-4: 20px;--s-5: 28px;--title: clamp(20px, 4vw, 28px);--subtitle: clamp(14px, 2.2vw, 16px)}[data-theme=dark]{--bg-gradient: radial-gradient(1400px 900px at 20% 10%, #0f172a 0%, #0b1224 30%, #1e293b 60%, #334155 100%);--surface: #1e293b;--surface-2: #334155;--surface-3: #475569;--text: #f1f5f9;--muted: #94a3b8;--border: #475569;--shadow: 220 25% 8%;--accent: #8b93ff;--accent-2: #2dd4bf;--win: #10b981;--warn: #f59e0b;--danger: #ef4444}.app-shell{min-height:100vh;background:var(--bg-gradient);color:var(--text);display:grid;grid-template-rows:auto 1fr}.ui-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);padding:var(--s-3) var(--s-4)}.desktop-header{background:color-mix(in oklab,var(--surface),transparent 5%);backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in oklab,var(--border),transparent 50%);box-shadow:0 1px 3px hsl(var(--shadow) / .08);position:sticky;top:0;z-index:100}[data-theme=dark] .desktop-header{background:color-mix(in oklab,var(--surface),transparent 2%);border-bottom:1px solid color-mix(in oklab,var(--border),transparent 30%);box-shadow:0 1px 6px hsl(var(--shadow) / .15)}.desktop-brand{display:flex;align-items:center;gap:var(--s-2)}.desktop-toolbar{gap:var(--s-1)}.desktop-header-btn{display:flex;align-items:center;font-size:13px;padding:10px 16px;font-weight:600}.brand{display:flex;align-items:center;gap:var(--s-2);font-weight:800;font-size:var(--title);letter-spacing:.5px}.brand-badge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 8px 24px hsl(var(--shadow) / .35)}.toolbar{display:flex;align-items:center;gap:var(--s-2)}.glass{background:color-mix(in oklab,var(--surface),transparent 8%);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 1px 2px hsl(var(--shadow) / .12),0 10px 30px hsl(var(--shadow) / .1);backdrop-filter:saturate(1.2) blur(8px)}.btn{appearance:none;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);padding:12px 18px;color:var(--text);font-weight:600;font-size:14px;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px hsl(var(--shadow) / .06)}.btn:hover{border-color:color-mix(in oklab,var(--accent),var(--border) 60%);transform:translateY(-1px);box-shadow:0 4px 12px hsl(var(--shadow) / .1)}.btn:active{transform:translateY(0) scale(.98)}.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:none;box-shadow:0 4px 16px hsl(var(--shadow) / .15);font-weight:700}.btn-accent:hover{box-shadow:0 8px 24px hsl(var(--shadow) / .22);transform:translateY(-2px)}.btn-accent:active{transform:translateY(-1px) scale(.98)}.game-area{display:grid;grid-template-columns:1fr;place-items:center;padding:var(--s-3);gap:var(--s-3)}.panel{padding:var(--s-3)}.board-wrap{display:grid;place-items:center;padding:var(--s-4);border-radius:var(--r-lg);border:1px solid var(--border);background:color-mix(in oklab,var(--surface-2),transparent 2%);box-shadow:0 2px 8px hsl(var(--shadow) / .08),0 16px 48px hsl(var(--shadow) / .12);transition:box-shadow .3s ease}.board-wrap:hover{box-shadow:0 4px 12px hsl(var(--shadow) / .12),0 20px 60px hsl(var(--shadow) / .18)}.title{font-size:var(--title);font-weight:800}.subtitle{font-size:var(--subtitle);color:var(--muted)}.dice-panel{display:flex;flex-direction:column;gap:var(--s-2);align-items:center}.pill{padding:4px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);background:color-mix(in oklab,var(--surface),transparent 6%)}.dice-face{width:100px;height:100px;background:linear-gradient(135deg,var(--surface) 0%,color-mix(in oklab,var(--surface-2),white 15%) 100%);border:2px solid color-mix(in oklab,var(--border),transparent 20%);border-radius:18px;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px hsl(var(--shadow) / .12),0 16px 48px hsl(var(--shadow) / .08);transform:rotate(0) scale(1);transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;user-select:none}.dice-face:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 24px hsl(var(--shadow) / .18),0 20px 60px hsl(var(--shadow) / .12)}.dice-face.rolling{transform:rotate(360deg) scale(1.08);box-shadow:0 12px 36px hsl(var(--shadow) / .25),0 24px 72px hsl(var(--shadow) / .15)}.dice-roll-label{font-size:13px;font-weight:800;color:var(--text);text-align:center;user-select:none;text-shadow:0 1px 2px hsl(var(--shadow) / .12)}.dice-dot{fill:var(--text);filter:drop-shadow(0 1px 2px hsl(var(--shadow) / .2));transition:opacity .2s ease}.spaced{gap:var(--s-2)}.stack{display:flex;flex-direction:column}.row{display:flex;align-items:center}.center{display:grid;place-items:center}.w-full{width:100%}.max-w{max-width:1280px;margin:0 auto}@media (min-width: 1024px){.desktop-layout{grid-template-columns:420px 1fr!important;gap:var(--s-5)!important;padding:var(--s-5)!important;max-width:1400px;margin:0 auto}.desktop-sidebar{background:color-mix(in oklab,var(--surface),transparent 2%);border-radius:var(--r-lg);padding:var(--s-4);box-shadow:0 2px 8px hsl(var(--shadow) / .06),0 16px 48px hsl(var(--shadow) / .12);backdrop-filter:blur(12px);border:1px solid color-mix(in oklab,var(--border),transparent 40%);height:fit-content;max-height:calc(100vh - 120px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.desktop-sidebar::-webkit-scrollbar{width:6px}.desktop-sidebar::-webkit-scrollbar-track{background:transparent}.desktop-sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.desktop-game-area{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 120px)}.desktop-game-panel{width:100%;max-width:800px;margin:0 auto;background:color-mix(in oklab,var(--surface),transparent 1%);border:1px solid color-mix(in oklab,var(--border),transparent 30%);box-shadow:0 4px 12px hsl(var(--shadow) / .08),0 20px 60px hsl(var(--shadow) / .15)}.game-area{grid-template-columns:420px 1fr;align-items:start;gap:var(--s-5)}}.animate-in{animation:fade-in-up .32s cubic-bezier(.2,.6,.2,1) both}.animate-in-delayed{animation:fade-in-up .48s cubic-bezier(.2,.6,.2,1) both 80ms}@keyframes fade-in-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.desktop-board-container{position:relative}.desktop-board-container:hover{box-shadow:0 4px 16px hsl(var(--shadow) / .12),0 24px 72px hsl(var(--shadow) / .18)}.desktop-board-container svg{filter:drop-shadow(0 2px 8px hsl(var(--shadow) / .08))}@media (min-width: 1024px){.desktop-board-container{padding:var(--s-5);background:linear-gradient(135deg,color-mix(in oklab,var(--surface),white 3%) 0%,var(--surface) 50%,color-mix(in oklab,var(--surface),var(--surface-2) 30%) 100%)}.desktop-board-container svg{border-radius:24px;border:2px solid color-mix(in oklab,var(--border),transparent 60%)}}@media (hover: hover) and (pointer: fine){.player-card{transition:all .2s cubic-bezier(.4,0,.2,1)}.player-card:hover,.btn:hover{transform:translateY(-1px)}.dice-face:hover{transform:translateY(-2px) scale(1.02)}.interactive-horse{transition:all .15s ease;cursor:pointer}.interactive-horse:hover{filter:brightness(1.1) drop-shadow(0 2px 8px hsl(var(--shadow) / .25));transform:scale(1.05)}.interactive-horse.available:hover{filter:brightness(1.15) drop-shadow(0 4px 12px hsl(var(--shadow) / .35));transform:scale(1.1)}}@media (prefers-reduced-motion: reduce){.animate-in,.animate-in-delayed{animation:none!important}}:where(button,.btn,select,[role=button])::selection{background:color-mix(in oklab,var(--accent),white 70%)}:where(button,.btn,select,[role=button]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}.desktop-app-shell{background:var(--bg-gradient);min-height:100vh}[data-theme=dark] .glass{background:color-mix(in oklab,var(--surface),transparent 5%);border:1px solid color-mix(in oklab,var(--border),transparent 30%);box-shadow:0 1px 3px hsl(var(--shadow) / .15),0 10px 30px hsl(var(--shadow) / .12)}[data-theme=dark] .btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text)}[data-theme=dark] .btn:hover{background:var(--surface-3);border-color:var(--accent)}[data-theme=dark] .desktop-sidebar{background:color-mix(in oklab,var(--surface),transparent 1%);border:1px solid color-mix(in oklab,var(--border),transparent 20%)}[data-theme=dark] .player-card{background:color-mix(in oklab,var(--surface-2),transparent 2%);border:1px solid color-mix(in oklab,var(--border),transparent 30%)}[data-theme=dark] .player-card:hover{background:color-mix(in oklab,var(--surface-3),transparent 5%)}[data-theme=dark] .board-wrap{background:color-mix(in oklab,var(--surface-2),transparent 1%);border:1px solid color-mix(in oklab,var(--border),transparent 20%)}[data-theme=dark] .desktop-board-container{background:linear-gradient(135deg,color-mix(in oklab,var(--surface-2),transparent 2%) 0%,var(--surface-2) 50%,color-mix(in oklab,var(--surface-3),transparent 10%) 100%)}[data-theme=dark] .desktop-board-container svg{border:2px solid color-mix(in oklab,var(--border),transparent 40%)}.desktop-winner-modal{animation:winner-appear .6s cubic-bezier(.34,1.56,.64,1)}@keyframes winner-appear{0%{opacity:0;transform:translateY(-30px) scale(.9)}50%{opacity:.8;transform:translateY(-10px) scale(1.02)}to{opacity:1;transform:translateY(0) scale(1)}}@media (prefers-contrast: more){.glass{border-color:color-mix(in oklab,var(--text),transparent 10%)}.btn{border-color:color-mix(in oklab,var(--text),transparent 15%)}}.ai-status{background:var(--surface);border:2px solid var(--player-color, var(--accent));border-radius:var(--r-md);padding:var(--s-4);min-height:160px;min-width:320px;display:flex;flex-direction:column;justify-content:flex-start;box-shadow:0 4px 16px hsl(var(--shadow) / .12);backdrop-filter:blur(8px)}.ai-status .header{display:flex;align-items:center;margin-bottom:var(--s-2);min-height:28px}.ai-status .title{font-weight:800;text-transform:capitalize;color:var(--player-color, var(--accent));font-size:16px}.ai-status .difficulty{margin-left:var(--s-1);font-size:12px;color:var(--muted);text-transform:capitalize;padding:2px 6px;background:var(--surface-2);border-radius:var(--r-xs)}.ai-status .content{flex:1;min-height:100px;display:flex;flex-direction:column;justify-content:flex-start}.ai-status .thinking{display:flex;align-items:center;color:var(--muted);gap:var(--s-2);font-size:13px}.ai-status .spinner{width:18px;height:18px;border:2px solid color-mix(in oklab,var(--text),transparent 80%);border-top:2px solid var(--player-color, var(--accent));border-radius:50%;animation:spin 1s linear infinite}.ai-status .badge{color:#fff;padding:4px 8px;border-radius:var(--r-xs);font-size:11px;font-weight:700}.ai-status .quote{color:var(--text);opacity:.9;font-style:italic;line-height:1.4;font-size:14px}.ai-status .meta{margin-top:var(--s-1);color:var(--muted);font-size:11px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (min-width: 1024px){html{scroll-behavior:smooth}.btn{font-size:13px;border-radius:var(--r-xs)}.btn-accent{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);position:relative;overflow:hidden}.btn-accent:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn-accent:hover:before{left:100%}}