:root{--bg: #0d1117;--bg-card: #161b27;--bg-board: #1e2536;--accent: #7c3aed;--accent-light: #a78bfa;--accent-glow: rgba(124, 58, 237, .3);--green: #34d399;--red: #f87171;--text: #e8eaf0;--text-muted: #7a8499;--stone-color: #a1855a;--stone-highlight: #d4a96a;--pit-bg: #1a2235;--pit-hover: #232d45;--store-bg: #131a2c;--radius: 12px;--radius-sm: 6px;--shadow: 0 4px 24px rgba(0, 0, 0, .6);--transition: .2s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center}#root{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center}button{cursor:pointer;border:none;font:inherit}.app,.screen{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center}.portal-screen{background:radial-gradient(ellipse at 50% 0%,#1a1535,#0d1117 60%)}.portal-content{display:flex;flex-direction:column;align-items:center;gap:2.5rem;width:100%;max-width:760px;padding:2.5rem 1.5rem}.portal-header{text-align:center}.portal-title{font-size:3.5rem;font-weight:900;color:var(--accent-light);text-shadow:0 0 40px var(--accent-glow);letter-spacing:-1px}.portal-subtitle{color:var(--text-muted);margin-top:.4rem}.portal-footer{text-align:center}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;width:100%}.game-card{background:var(--bg-card);border:1px solid rgba(200,136,42,.2);border-radius:var(--radius);padding:1.5rem 1.25rem;display:flex;flex-direction:column;gap:.75rem;position:relative;transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition)}.game-card--available{cursor:pointer}.game-card--available:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 24px #0006}.game-card--available:focus-visible{outline:2px solid var(--accent-light);outline-offset:2px}.game-card--soon{opacity:.5;cursor:default}.game-card-emoji{font-size:2.5rem;line-height:1}.game-card-title{font-size:1.2rem;font-weight:700;color:var(--text)}.game-card-desc{font-size:.82rem;color:var(--text-muted);line-height:1.4}.game-card-meta{font-size:.75rem;color:var(--accent);font-weight:600}.game-card-badge{position:absolute;top:.75rem;right:.75rem;background:#ffffff14;color:var(--text-muted);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.2rem .5rem;border-radius:999px}.back-to-portal-btn{align-self:flex-start;background:transparent;color:var(--text-muted);font-size:.85rem;padding:.3rem 0;transition:color var(--transition)}.back-to-portal-btn:hover{color:var(--text)}.tipjar{position:fixed;bottom:1.25rem;right:1.25rem;display:flex;align-items:center;gap:.6rem;z-index:50;background:var(--bg-card);border:1px solid rgba(200,136,42,.3);border-radius:999px;padding:.4rem;box-shadow:0 4px 16px #0006;transition:padding var(--transition)}.tipjar--expanded{padding:.4rem .75rem}.tipjar-collapsed{display:flex;align-items:center;gap:.5rem;padding:0 .25rem 0 .6rem}.tipjar-nudge{font-size:.7rem;font-style:italic;color:#c8882a;opacity:.75;white-space:nowrap;letter-spacing:.01em;font-family:Georgia,Times New Roman,serif}.tipjar-toggle{width:36px;height:36px;border-radius:50%;background:transparent;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:transform var(--transition)}.tipjar-toggle:hover{transform:scale(1.15)}.tipjar-text{font-size:.8rem;color:var(--text-muted);white-space:nowrap}.tipjar-link{font-size:.85rem;font-weight:600;color:var(--accent-light);text-decoration:none;white-space:nowrap;transition:color var(--transition)}.tipjar-link:hover{color:#fff}.tipjar-close{width:24px;height:24px;border-radius:50%;background:transparent;color:var(--text-muted);font-size:.7rem;display:flex;align-items:center;justify-content:center}.tipjar-close:hover{color:var(--text)}.home-screen{background:radial-gradient(ellipse at 50% 0%,#1a1535,#0d1117 60%)}.home-content{display:flex;flex-direction:column;align-items:center;gap:2rem;max-width:420px;width:90%;padding:2rem}.home-title{font-size:4rem;font-weight:800;color:var(--accent-light);text-shadow:0 0 40px var(--accent-glow);letter-spacing:-1px}.home-subtitle{color:var(--text-muted);font-size:1rem;margin-top:-1rem}.mode-section{width:100%;background:var(--bg-card);border:1px solid rgba(200,136,42,.2);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}.mode-section h2{font-size:1.1rem;color:var(--accent-light)}.mode-desc{font-size:.85rem;color:var(--text-muted);text-align:center}.skill-selector{display:flex;gap:.5rem}.skill-btn{padding:.4rem 1rem;border-radius:999px;background:var(--bg-board);color:var(--text-muted);border:1px solid transparent;font-size:.85rem;transition:var(--transition)}.skill-btn.active{background:var(--accent);color:#fff;border-color:var(--accent-light)}.skill-btn:hover:not(.active){border-color:var(--accent);color:var(--text)}.primary-btn{padding:.75rem 2rem;border-radius:999px;background:var(--accent);color:#fff;font-size:1rem;font-weight:600;transition:var(--transition);box-shadow:0 2px 8px var(--accent-glow)}.primary-btn:hover{background:var(--accent-light);transform:translateY(-1px);box-shadow:0 4px 16px var(--accent-glow)}.online-btn{background:#0f766e}.online-btn:hover{background:#0d9488}.divider{color:var(--text-muted);font-size:.85rem}.copyright{color:var(--text-muted);font-size:.72rem;opacity:.6;letter-spacing:.03em}.portal-auth-bar{display:flex;align-items:center;gap:.6rem;margin-top:1rem;justify-content:center;flex-wrap:wrap}.portal-username{color:var(--accent-light);font-size:.9rem;font-weight:600}.portal-auth-btn{padding:.4rem 1rem;font-size:.85rem;text-decoration:none;display:inline-flex;align-items:center}.auth-screen{background:radial-gradient(ellipse at 50% 0%,#1a1535,#0d1117 60%)}.auth-content{display:flex;flex-direction:column;align-items:center;gap:1.75rem;max-width:400px;width:90%;padding:2rem}.auth-title{font-size:2rem;font-weight:800;color:var(--accent-light);text-shadow:0 0 30px var(--accent-glow)}.auth-form{width:100%;display:flex;flex-direction:column;gap:1.1rem}.form-group{display:flex;flex-direction:column;gap:.35rem}.form-label{font-size:.85rem;color:var(--text-muted);display:flex;align-items:baseline;gap:.5rem}.form-hint{font-size:.72rem;color:var(--text-muted);opacity:.7}.form-input{padding:.65rem .9rem;border-radius:var(--radius-sm);background:var(--bg-board);border:1px solid rgba(200,136,42,.25);color:var(--text);font:inherit;font-size:.95rem;transition:border-color var(--transition);outline:none;width:100%}.form-input:focus{border-color:var(--accent)}.form-input:disabled{opacity:.5;cursor:not-allowed}.auth-submit-btn{width:100%;margin-top:.25rem;padding:.75rem}.auth-error{display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:#e539351f;border:1px solid rgba(229,57,53,.4);border-radius:var(--radius-sm);color:#ef9a9a;font-size:.85rem;padding:.6rem .8rem}.auth-error-close{background:transparent;color:inherit;font-size:1.1rem;line-height:1;padding:0;flex-shrink:0}.auth-switch{font-size:.85rem;color:var(--text-muted)}.auth-link{color:var(--accent-light);text-decoration:none;font-weight:600}.auth-link:hover{color:#fff}.auth-required-block{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%}.auth-required-text{font-size:.85rem;color:var(--text-muted)}.auth-required-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}.auth-required-actions a{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.secondary-btn{padding:.6rem 1.5rem;border-radius:999px;background:transparent;color:var(--text-muted);border:1px solid var(--text-muted);font-size:.9rem;transition:var(--transition)}.secondary-btn:hover{color:var(--text);border-color:var(--text)}.lobby-screen{background:var(--bg)}.lobby-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center}.lobby-content h2{font-size:1.5rem;color:var(--accent-light)}.lobby-content p{color:var(--text-muted)}.spinner{width:48px;height:48px;border:4px solid rgba(200,136,42,.2);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.game-screen{flex-direction:column;background:var(--bg);padding:1rem}.game-header{width:100%;max-width:960px;display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.back-btn{background:transparent;color:var(--text-muted);font-size:.9rem;padding:.4rem .8rem;border-radius:var(--radius-sm);transition:var(--transition)}.back-btn:hover{color:var(--text);background:#ffffff0d}.mode-label{color:var(--text-muted);font-size:.85rem}.speed-selector{display:flex;gap:.25rem}.speed-btn{width:32px;height:32px;border-radius:8px;background:var(--bg-board);border:1px solid transparent;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:var(--transition);line-height:1}.speed-btn:hover{border-color:var(--accent)}.speed-btn.active{background:var(--accent);border-color:var(--accent-light)}.turn-indicator{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:999px;font-size:.9rem;font-weight:600;margin-bottom:1rem;transition:var(--transition)}.turn-indicator--yours{background:#4caf5026;color:var(--green)}.turn-indicator--theirs{background:#ffffff0d;color:var(--text-muted)}.turn-dot{width:8px;height:8px;border-radius:50%;background:currentColor}.turn-dot--animating{animation:pulse .6s ease infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.game-wrapper{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%;max-width:960px}.board{display:flex;align-items:stretch;gap:.6rem;background:var(--bg-board);border-radius:999px;padding:1rem;box-shadow:var(--shadow),inset 0 2px 4px #0000004d;border:2px solid rgba(200,136,42,.2);width:100%}.pits-column{flex:1;display:flex;flex-direction:column;gap:.5rem}.pits-row{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}.pit{aspect-ratio:1;border-radius:50%;background:var(--pit-bg);border:2px solid transparent;display:flex;align-items:center;justify-content:center;cursor:default;transition:background var(--transition),border-color var(--transition),transform var(--transition);position:relative;min-width:72px;min-height:72px}.pit--playable{cursor:pointer;border-color:#c8882a66}.pit--playable:hover{background:var(--pit-hover);border-color:var(--accent);transform:scale(1.05)}.pit--playable:focus-visible{outline:2px solid var(--accent-light);outline-offset:2px}.pit--empty{opacity:.4}.pit-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;height:100%}.pit-count{font-size:.9rem;font-weight:700;color:var(--text);line-height:1;position:absolute;bottom:6px;right:8px;font-size:.75rem;color:var(--text-muted)}.stones-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;padding:8px;max-width:100%}.stone{display:inline-block;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--stone-highlight),var(--stone-color));box-shadow:0 1px 2px #0006;flex-shrink:0}.store{display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:var(--store-bg);border-radius:var(--radius);padding:.6rem .4rem;width:clamp(56px,7%,78px);flex-shrink:0;border:1px solid rgba(200,136,42,.15)}.store-label{font-size:.55rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;text-align:center}.store-count{font-size:1.6rem;font-weight:800;color:var(--accent-light);line-height:1}.store-stones{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:50px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{background:var(--bg-card);border-radius:var(--radius);padding:2.5rem;max-width:380px;width:90%;display:flex;flex-direction:column;align-items:center;gap:1.5rem;border:1px solid rgba(200,136,42,.3);box-shadow:var(--shadow)}.modal-title{font-size:2rem;font-weight:800}.result-win .modal-title{color:var(--green)}.result-loss .modal-title{color:var(--red)}.result-draw .modal-title{color:var(--accent-light)}.score-display{display:flex;align-items:center;gap:1.5rem}.score-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.score-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase}.score-value{font-size:2.5rem;font-weight:800;color:var(--text)}.score-divider{font-size:1.5rem;color:var(--text-muted)}.modal-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.status-banner{border-radius:var(--radius-sm);padding:.5rem 1rem;font-size:.85rem;text-align:center;width:100%;max-width:960px}.status-banner--disconnected{background:#e5393526;border:1px solid rgba(229,57,53,.4);color:#ef9a9a}.status-banner--reconnected{background:#4caf5026;border:1px solid rgba(76,175,80,.4);color:#a5d6a7;animation:fadeOut 3s ease forwards}@keyframes fadeOut{0%,60%{opacity:1}to{opacity:0}}.board-loading{color:var(--text-muted)}@keyframes stoneDrop{0%{transform:translateY(-14px) scale(1.4);opacity:.5}55%{transform:translateY(2px) scale(.92);opacity:1}75%{transform:translateY(-3px) scale(1.04)}to{transform:translateY(0) scale(1)}}@keyframes captureFlash{0%{box-shadow:0 0 #ffc832e6}40%{box-shadow:0 0 0 10px #ffc8324d}to{box-shadow:0 0 0 14px #ffc83200}}@keyframes sweepGlow{0%{box-shadow:inset 0 0 0 2px #64dcff00}50%{box-shadow:inset 0 0 0 2px #64dcffcc}to{box-shadow:inset 0 0 0 2px #64dcff00}}@keyframes pitGlow{0%{border-color:var(--accent-light);box-shadow:0 0 10px 2px var(--accent-glow)}to{border-color:transparent;box-shadow:none}}.pit--active-normal{animation:pitGlow .35s ease-out forwards}.pit--active-capture,.store--active-capture{animation:captureFlash .45s ease-out forwards}.store--active-sweep{animation:sweepGlow .45s ease-out forwards}.store--active-normal{animation:pitGlow .35s ease-out forwards}.stone--new{animation:stoneDrop .22s cubic-bezier(.22,.61,.36,1) both}@media(max-width:768px){.pit{min-width:56px;min-height:56px}.home-title{font-size:3.5rem}}@media(max-width:520px){.game-screen{padding:.5rem}.game-header{margin-bottom:.5rem}.back-btn{font-size:.8rem;padding:.3rem .6rem}.mode-label{font-size:.75rem}.speed-btn{width:28px;height:28px;font-size:.85rem}.board{padding:.5rem .4rem;gap:.3rem;border-radius:16px}.pits-row,.pits-column{gap:.3rem}.pit{min-width:0;min-height:0;aspect-ratio:1}.stone{width:6px;height:6px}.pit-count{font-size:.65rem;bottom:3px;right:4px}.store{width:clamp(36px,9vw,52px);padding:.4rem .25rem}.store-count{font-size:1.2rem}.store-label{font-size:.5rem}.turn-indicator{font-size:.8rem;padding:.4rem .8rem;margin-bottom:.5rem}.home-title{font-size:2.8rem}.home-content{gap:1.25rem;padding:1.25rem}.modal{padding:1.75rem 1.25rem}.score-value{font-size:2rem}}@media(max-height:500px)and (orientation:landscape){.game-screen{padding:.25rem .75rem;justify-content:flex-start}.game-header{margin-bottom:.25rem}.turn-indicator{margin-bottom:.25rem;padding:.25rem .75rem;font-size:.75rem}.board{padding:.4rem;gap:.25rem}.pit{min-width:0;aspect-ratio:1}.stone{width:5px;height:5px}}