:root{--color-bg: #fdf3e4;--color-bg-alt: #f8e8cc;--color-surface: #ffffff;--color-border: #ecd9b8;--color-text: #2b2013;--color-text-muted: #8a7a5c;--color-primary: #f2557d;--color-primary-hover: #e13c68;--color-primary-shadow: #b91f4a;--color-primary-contrast: #ffffff;--color-secondary: #2f8f52;--color-secondary-hover: #26773f;--color-secondary-shadow: #1a5c2c;--color-accent: #f0a324;--color-accent-shadow: #c67c0e;--color-danger: #d8482f;--color-danger-shadow: #a4321e;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 22px;--radius-pill: 999px;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--font-sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--font-display: "Baloo 2", var(--font-sans);--shadow-card: 0 2px 0 var(--color-border), 0 6px 16px -8px rgba(43, 32, 19, .25);color-scheme:light}*{box-sizing:border-box}html,body{margin:0;padding:0;overscroll-behavior:none;height:100dvh}body{font-family:var(--font-sans);background:radial-gradient(circle at 15% -10%,#fff6e8 0%,transparent 45%),var(--color-bg);background-attachment:fixed;color:var(--color-text);line-height:1.5;font-weight:600;-webkit-font-smoothing:antialiased}#root{min-height:100dvh;display:flex;flex-direction:column}h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.15;margin:0 0 var(--space-2);color:var(--color-secondary)}h1{font-size:clamp(1.9rem,5vw,2.75rem)}h2{font-size:clamp(1.3rem,3.4vw,1.65rem)}p{margin:0 0 var(--space-3)}a{color:var(--color-primary);text-decoration:none;font-weight:800}a:hover{text-decoration:underline}label{display:flex;flex-direction:column;gap:var(--space-1);font-size:.9rem;font-weight:800;color:var(--color-text-muted)}input,select,textarea{font-family:inherit;font-size:1rem;font-weight:600;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:2px solid var(--color-border);background:var(--color-surface);color:var(--color-text);transition:border-color .15s ease}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-primary)}button{font-family:var(--font-display);font-size:1.05rem;font-weight:700;letter-spacing:.01em;padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);border:none;background:var(--color-primary);color:var(--color-primary-contrast);cursor:pointer;box-shadow:0 4px 0 var(--color-primary-shadow);transition:background-color .15s ease,transform .08s ease,box-shadow .08s ease;min-height:44px}button:hover:not(:disabled){background:var(--color-primary-hover)}button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--color-primary-shadow)}button:disabled{opacity:.5;cursor:not-allowed;box-shadow:0 4px #0000001a}fieldset{border:2px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4)}legend{padding:0 var(--space-2);font-family:var(--font-display);font-weight:700;color:var(--color-secondary)}ul{padding-left:1.2em}.container{width:100%;max-width:32rem;margin:0 auto;padding:var(--space-6) var(--space-4);padding-top:max(var(--space-6),env(safe-area-inset-top));padding-bottom:max(var(--space-6),env(safe-area-inset-bottom));padding-left:max(var(--space-4),env(safe-area-inset-left));padding-right:max(var(--space-4),env(safe-area-inset-right))}.container-wide{width:100%;max-width:64rem;margin:0 auto;padding:var(--space-6) var(--space-4);padding-top:max(var(--space-6),env(safe-area-inset-top));padding-bottom:max(var(--space-6),env(safe-area-inset-bottom));padding-left:max(var(--space-4),env(safe-area-inset-left));padding-right:max(var(--space-4),env(safe-area-inset-right))}.card{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-card)}.card-link{transition:transform .08s ease,box-shadow .08s ease,border-color .15s ease}.card-link:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 6px 0 var(--color-border)}.card-link:active{transform:translateY(0);box-shadow:var(--shadow-card)}.btn-secondary{background:var(--color-surface);color:var(--color-secondary);border:2px solid var(--color-border);box-shadow:0 4px 0 var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-bg-alt)}.btn-secondary:active:not(:disabled){box-shadow:0 1px 0 var(--color-border)}.btn-sm{min-height:32px;padding:var(--space-1) var(--space-3);font-size:.85rem;box-shadow:0 3px 0 var(--color-primary-shadow)}.btn-sm:active:not(:disabled){box-shadow:0 1px 0 var(--color-primary-shadow)}.btn-link{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);background:var(--color-primary);color:var(--color-primary-contrast)!important;font-family:var(--font-display);font-size:1.1rem;font-weight:700;text-decoration:none!important;box-shadow:0 5px 0 var(--color-primary-shadow);transition:transform .08s ease,box-shadow .08s ease,background-color .15s ease}.btn-link:hover{background:var(--color-primary-hover)}.btn-link:active{transform:translateY(4px);box-shadow:0 1px 0 var(--color-primary-shadow)}.btn-link.btn-link-secondary{background:var(--color-secondary);box-shadow:0 5px 0 var(--color-secondary-shadow)}.btn-link.btn-link-secondary:hover{background:var(--color-secondary-hover)}.btn-link.btn-link-secondary:active{box-shadow:0 1px 0 var(--color-secondary-shadow)}.link-row{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}.link-row a{display:inline-flex;align-items:center;min-height:44px;padding:var(--space-2) var(--space-3);margin:calc(-1 * var(--space-2)) calc(-1 * var(--space-3))}.back-link{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-3) var(--space-3) var(--space-3) 0;margin:calc(-1 * var(--space-3)) 0 calc(var(--space-4) - var(--space-3)) 0;color:var(--color-text-muted)!important;font-family:var(--font-display);font-weight:600;font-size:.95rem}.back-link:hover{color:var(--color-primary)!important}.page-icon-heading{display:flex;align-items:center;gap:var(--space-2)}.page-icon-heading .icon{font-size:1.9rem}.auth-form{width:100%;max-width:24rem;margin:max(var(--space-6),env(safe-area-inset-top)) auto max(var(--space-6),env(safe-area-inset-bottom));padding:var(--space-5) var(--space-4);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--space-4)}.auth-form p a{display:inline-block;padding:var(--space-2);margin:calc(-1 * var(--space-2))}.form-error,.form-message{margin:0;padding:var(--space-3);border-radius:var(--radius-sm);font-size:.9rem;font-weight:700}.form-error{background:#fce2dc;color:var(--color-danger)}.form-message{background:#e2f3e6;color:var(--color-secondary)}.app-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-5);padding-top:max(var(--space-3),env(safe-area-inset-top));padding-left:max(var(--space-5),env(safe-area-inset-left));padding-right:max(var(--space-5),env(safe-area-inset-right));background:var(--color-secondary);box-shadow:0 3px 0 var(--color-secondary-shadow);flex-wrap:wrap}.app-header a{color:#fff;font-family:var(--font-display);font-size:1.1rem}.app-header span{color:#eafbee;font-weight:700}.badge{display:inline-flex;align-items:center;gap:var(--space-1);background:var(--color-accent);color:#4a2f04;border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3);font-family:var(--font-display);font-size:.85rem;font-weight:700;box-shadow:0 2px 0 var(--color-accent-shadow)}.progress-track{width:100%;height:10px;border-radius:999px;background:var(--color-bg-alt);overflow:hidden}.progress-fill{height:100%;background:var(--color-accent);border-radius:999px}.game-canvas-area{touch-action:none}.turn-timer{display:flex;align-items:center;gap:var(--space-2);width:6rem;flex-shrink:0}.turn-timer-label{font-size:.8rem;white-space:nowrap}.turn-overlay{position:absolute;left:0;right:0;bottom:.75rem;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);padding:0 var(--space-3)}.turn-overlay-row{display:flex;align-items:center;justify-content:center;gap:var(--space-2);flex-wrap:wrap}.turn-overlay-status,.turn-overlay-outcome{margin:0;font-size:.9rem}.player-list-score{display:block}.chat-messages{flex:1}@media(max-width:640px){.game-row{flex-direction:column!important;min-height:0}.game-row .game-canvas-area{flex:1!important;min-height:0}.player-list-aside{width:100%!important;max-height:6rem;flex-shrink:0;border-bottom:1px solid var(--color-border)}.player-list-aside ul{display:flex;flex-wrap:wrap;gap:var(--space-3)}.player-list-aside li{white-space:nowrap}.player-list-score{display:inline}.turn-overlay{bottom:.5rem;gap:.25rem}.turn-overlay-status,.turn-overlay-outcome{font-size:.8rem}.turn-timer{width:4.5rem}.turn-overlay .btn-sm{padding:.25rem .6rem;font-size:.8rem}.chat-panel{flex:0 0 auto!important;max-height:min(28dvh,11rem)!important;min-height:5.5rem}}.spinner{display:inline-block;width:.9em;height:.9em;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-.15em;margin-right:.4em}@keyframes spin{to{transform:rotate(360deg)}}