:root{--bg-primary: #e7d8a1;--bg-secondary: #c5b076;--board-line: rgba(80, 58, 34, .65);--stone-black: #1f1b17;--stone-white: #f7f6ed;--accent: #365a2e;--accent-hover: #2a4523;--text-dark: #2f2714;--text-muted: #655a44;--shadow: rgba(46, 36, 20, .22);--header-height: 104px;--mobile-controls-height: 10.5rem;--control-panel-height: 7.5rem;--footer-height: 60px}*{box-sizing:border-box}html,body{overflow-y:auto}body{margin:0;font-family:Segoe UI,Tahoma,sans-serif;color:var(--text-dark);background-color:#e7d8a1;background-image:linear-gradient(90deg,rgba(201,181,128,.14) 12%,transparent 12%,transparent 50%,rgba(201,181,128,.14) 50%,transparent 62%,transparent 100%),linear-gradient(0deg,rgba(213,194,145,.1) 25%,transparent 25%,transparent 50%,rgba(213,194,145,.1) 50%,transparent 75%,transparent 100%);background-size:48px 48px;background-position:0 0,24px 24px;background-attachment:fixed;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:calc(var(--footer-height) + 1.5rem)}body.game-active{overflow:hidden;touch-action:none;overscroll-behavior:none}.app-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:#f8f0d8e6;border-bottom:1px solid rgba(89,69,36,.18);box-shadow:0 8px 18px #2e24141f;position:sticky;top:0;z-index:70}.home-link{color:var(--accent);text-decoration:none;font-weight:600}.home-link:hover{color:var(--accent-hover)}.app-header h1 h1{margin:0;font-size:1.8rem;letter-spacing:.05em}.header-title{display:flex;align-items:center;gap:1rem}.header-actions{display:flex;align-items:center;gap:.9rem}.header-start-btn{padding:.45rem 1.2rem;font-size:1rem;border:none;border-radius:999px;font-weight:700;background:var(--accent);color:#fff;box-shadow:0 8px 18px #0000002e;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}.header-bgm-btn{padding:.45rem 1.05rem;border-radius:999px;font-weight:600;background:#365a2e2e;border:1px solid rgba(54,90,46,.35);color:var(--text-dark);box-shadow:0 6px 14px #0000001f}.header-bgm-btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}.header-score{display:inline-flex;align-items:baseline;gap:.45rem;padding:.4rem .85rem;border-radius:999px;background:#231d14c7;color:#fff;font-variant-numeric:tabular-nums;box-shadow:0 10px 22px #0000002e;min-width:160px;justify-content:space-between}.header-score.inactive{opacity:.55}.header-score-label{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}.header-score-value{font-size:1.65rem;font-weight:700}.header-start-btn:not(:disabled):hover{background:var(--accent-hover);transform:translateY(-1px)}.header-start-btn:disabled{background:#a0a4a8;box-shadow:none}.app-body{display:flex;justify-content:center;align-items:flex-start;width:100%;max-width:100%;min-height:calc(100vh - var(--header-height) - var(--footer-height));padding-bottom:8rem}.layout{flex:0 1 1400px;display:grid;grid-template-columns:1fr;padding:1.5rem;gap:1.5rem;width:100%;max-width:1400px}.board-panel{position:relative;align-self:flex-start;justify-self:center;margin-top:0;max-width:100%;background:linear-gradient(135deg,#f8f2d7f2,#ebdfbfe6);border-radius:18px;border:1px solid rgba(104,82,45,.3);padding:1.4rem;box-shadow:0 18px 38px #2e241433}#board{display:block;background:radial-gradient(circle at 20% 20%,rgba(253,242,211,.9),var(--bg-secondary));border-radius:12px;border:4px solid rgba(92,67,36,.4);touch-action:none}.overlay-score{display:flex;flex-direction:column;align-items:center;gap:.25rem;margin:.35rem 0}.overlay-score.secondary{font-size:.85rem;opacity:.85}.overlay-label{text-transform:uppercase;letter-spacing:.2em;font-size:.7rem}.overlay-value{font-size:2.6rem;font-weight:700;color:#fff;text-shadow:0 6px 18px rgba(0,0,0,.5)}.overlay-detail{margin-top:.75rem}.overlay{position:absolute;top:1.2rem;right:1.2rem;bottom:1.2rem;left:1.2rem;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#231d14cc;color:#fff;border-radius:12px;text-align:center;gap:.75rem}.overlay.hidden{display:none}.info-column{display:grid;gap:1rem;align-content:start}.info-column section{background:#f8f2d7f0;padding:1rem;border-radius:14px;border:1px solid rgba(104,82,45,.24);box-shadow:0 12px 26px #2e24142e}.info-column h2{margin-top:0;font-size:.9rem;color:var(--text-muted);text-align:center;margin-bottom:.5rem}.primary-stats-panel{padding:1.2rem;border-radius:14px;display:flex;flex-direction:column;gap:.8rem;text-align:center;box-shadow:0 8px 20px #00000040}.primary-stat-item{display:flex;flex-direction:column;gap:.2rem}.stat-label{font-size:.75rem;letter-spacing:.15em;opacity:.8}.stat-value-large{font-size:2rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.next-panel.large-preview{display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem}.next-panel.large-preview h2{font-size:.8rem;opacity:.7;margin-bottom:.8rem}.next-piece-container{background:#0003;border-radius:50%;padding:10px;box-shadow:inset 0 0 15px #0000004d;max-width:100%;width:fit-content}.primary-action-btn{width:100%;font-size:1.3rem;padding:1rem;margin-bottom:.5rem;box-shadow:0 6px 16px #365a2e4d}.sidebar-start-btn{width:100%;font-size:1.2rem;padding:.8rem;box-shadow:0 6px 16px #365a2e4d;margin-top:.5rem}.board-start-btn{width:auto;min-width:100px;font-size:1rem;padding:.5rem 1rem;box-shadow:0 4px 12px #365a2e66;border-radius:30px}.sub-controls{display:flex;flex-direction:column;gap:.8rem;width:100%;margin-top:1rem}.sub-controls button{font-size:.9rem;padding:.5rem 1rem}.info-column.right{transition:opacity .5s ease,filter .5s ease}.info-column.right.dimmed{opacity:.3;filter:grayscale(.5);pointer-events:none}.stat-list{list-style:none;padding:0;margin:0;display:grid;gap:.4rem;font-variant-numeric:tabular-nums}.control-panel{display:grid;gap:.75rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.audio-controls{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.toggle-button{background:#365a2e1f;color:var(--text-dark);border:1px solid rgba(54,90,46,.3);box-shadow:none}.toggle-button[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}.bgm-status{margin:0;font-size:.9rem;color:var(--text-muted)}button{border:none;border-radius:8px;padding:.75rem 1rem;font-size:1rem;font-weight:600;cursor:pointer;background:var(--accent);color:#fff;transition:background .2s ease}button:disabled{background:#a0a4a8;cursor:not-allowed}button:not(:disabled):hover{background:var(--accent-hover)}.status-message{min-height:1.5rem;color:var(--accent);font-weight:600}.help-panel ul{padding-left:1.2rem;margin:0 0 1rem}.help-panel li{margin-bottom:.4rem}@media (min-width: 1000px){.layout{grid-template-columns:300px auto 300px;align-items:flex-start;justify-content:center;column-gap:2rem}.board-panel{justify-self:center;order:2;display:flex;flex-direction:column;align-items:center}.info-column.left{order:1}.info-column.right{order:3}}@media (max-width: 640px){.app-header{padding:.75rem 1rem;gap:.5rem}.header-title{flex:1 1 auto;min-width:0;gap:.5rem}.app-header h1{font-size:1.45rem;white-space:nowrap}.header-start-btn{padding:.35rem .85rem;font-size:.95rem}.header-actions{flex:1 1 auto;width:auto;display:flex;align-items:center;justify-content:flex-end;gap:.45rem}.header-bgm-btn{width:auto;padding:.35rem .8rem;font-size:.9rem;white-space:nowrap}.header-score{flex:0 1 auto;min-width:0;padding:.35rem .6rem;font-size:.8rem;gap:.35rem}.header-score-label{font-size:.7rem;letter-spacing:.14em}.header-score-value{font-size:1.3rem}.board-panel{padding:.8rem;margin-top:.5rem}#board{width:100%;height:auto}.sidebar-start-btn{display:none}.next-panel.large-preview{padding:.5rem;margin-bottom:.5rem}.mobile-controls{display:block;margin:0 auto;padding:.5rem 1rem .6rem;padding-bottom:calc(.6rem + env(safe-area-inset-bottom));width:100%;max-width:420px;position:fixed;bottom:0;left:50%;transform:translate(-50%);z-index:1000;background:#e7d8a1fa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-top:1px solid rgba(89,69,36,.15);box-shadow:0 -4px 12px #0000001a}.mobile-grid{display:grid;gap:.55rem;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(3rem,auto)}.mobile-btn{display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:1.2rem;padding:.7rem 0;background:var(--accent);color:#fff;border:none;box-shadow:0 6px 12px #0000001f;touch-action:none;-webkit-user-select:none;user-select:none}.mobile-btn:disabled{background:#a0a4a8;box-shadow:none}.mobile-btn:not(:disabled):active{transform:translateY(1px);background:var(--accent-hover)}}.mobile-controls{display:none}@media (max-width: 900px){.layout{grid-template-rows:auto auto 1fr;min-height:calc(100vh - var(--header-height) - var(--footer-height));padding:1rem;padding-bottom:200px}.board-panel{align-self:center;margin:0 auto;width:min(100%,420px);display:flex;flex-direction:column;align-items:center;order:-1}#board{width:100%;height:auto;max-height:calc(100dvh - 280px)}.mobile-controls{display:block;width:min(100%,460px);margin:.25rem auto .35rem}.mobile-grid{gap:.5rem;grid-auto-rows:minmax(2.9rem,auto)}.mobile-btn{font-size:1.15rem;padding:.65rem 0}.info-column{display:flex;flex-direction:column;gap:.9rem;width:min(100%,520px);margin:0 auto;padding-right:.5rem}.next-panel{display:none!important}.control-panel{order:1}.leaderboard-panel{order:2}.player-panel{order:3}.stats-panel{order:4}.help-panel{order:5}}.board-next-mobile,.board-next-mobile-label{display:none}#nextPieceMobile{width:75px;height:75px;display:block}@media (max-width: 900px){.board-panel{position:relative}.board-next-mobile{display:flex;position:absolute;top:.65rem;right:.65rem;flex-direction:column;align-items:center;gap:.25rem;background:#faf5e2db;border:1px solid rgba(104,82,45,.35);border-radius:10px;padding:.35rem .4rem .45rem;box-shadow:0 6px 14px #2e24142e}.board-next-mobile-label{display:block;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:#3a2a14b3}}.player-panel,.leaderboard-panel{margin-top:18px;background:#ffffffa6;border:1px solid rgba(0,0,0,.05);border-radius:8px;padding:12px;box-shadow:0 6px 12px #0000000f}.player-name-label{display:block;font-size:.9rem;margin-bottom:6px;color:#3a2a14}#playerNameInput{width:100%;padding:8px 10px;border:1px solid rgba(0,0,0,.15);border-radius:6px;background:#ffffffe6;font-size:1rem}#playerNameInput:focus{outline:2px solid rgba(32,125,255,.35);outline-offset:2px}.leaderboard-panel h2{margin-bottom:6px}.leaderboard-panel h2 .leaderboard-group+.leaderboard-group{margin-top:14px}.leaderboard-panel h2 .leaderboard-group h3{margin:10px 0 4px;font-size:1rem;color:#2b2615}.leaderboard-panel h2 .leaderboard-caption{margin:0;font-size:.8rem;color:#3a2a1499}.leaderboard-date{font-size:.85rem;color:#3a2a14b3;margin-bottom:6px}.leaderboard-empty{font-size:.9rem;color:#3a2a14a6;margin:6px 0 0}.leaderboard-list{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:6px}.leaderboard-list li{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:6px 8px;background:#ffffffe6;border:1px solid rgba(0,0,0,.06);border-radius:6px;box-shadow:0 3px 6px #0000000d;font-size:.95rem}.leaderboard-list .rank{font-weight:700;color:#207dffe6}.leaderboard-list .name{font-weight:600;color:#3a2a14;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-list .score{font-variant-numeric:tabular-nums;color:#3a2a14d9}.leaderboard-list li.placeholder{opacity:.6}.leaderboard-list li.placeholder .name,.leaderboard-list li.placeholder .score{font-style:italic;color:#3a2a1473}.hidden{display:none!important}.player-panel,.leaderboard-panel{border:1px solid rgba(74,56,28,.3);box-shadow:0 16px 28px #2e24142e;background:linear-gradient(160deg,#f8f2d7fa,#e8d8b1eb)}.player-panel h2,.leaderboard-panel h2{display:flex;align-items:center;gap:.5rem;font-size:1.2rem;color:#2b2615}.player-panel h2 .leaderboard-group+.leaderboard-group,.leaderboard-panel h2 .leaderboard-group+.leaderboard-group{margin-top:14px}.player-panel h2 .leaderboard-group h3,.leaderboard-panel h2 .leaderboard-group h3{margin:10px 0 4px;font-size:1rem;color:#2b2615}.player-panel h2 .leaderboard-caption,.leaderboard-panel h2 .leaderboard-caption{margin:0;font-size:.8rem;color:#3a2a1499}.player-panel h2:before{content:"👤"}.leaderboard-panel h2:before{content:"🏆"}.info-column section+section{margin-top:.8rem}.feedback-section{margin-bottom:1.2rem;text-align:center}.feedback-label{margin:0 0 .5rem;font-size:.9rem;color:#ffffffe6}.rating-group{display:flex;justify-content:center;gap:.5rem;background:#0003;padding:.25rem;border-radius:999px;display:inline-flex}.rating-group label{cursor:pointer}.rating-group input{position:absolute;opacity:0;width:0;height:0}.rating-group span{display:block;padding:.4rem .8rem;border-radius:999px;font-size:.9rem;color:#ffffffb3;transition:all .2s ease}.rating-group input:checked+span{background:var(--accent);color:#fff;font-weight:600;box-shadow:0 2px 4px #0003}.rating-group input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}.feedback-comment-section{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.feedback-textarea{width:100%;max-width:320px;padding:.8rem;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:#0000004d;color:#fff;font-size:1rem;font-family:inherit;resize:vertical;margin-bottom:1rem}.feedback-textarea::placeholder{color:#ffffff80}.feedback-textarea:focus{outline:2px solid var(--accent);background:#0006}.feedback-actions{display:flex;gap:.8rem;justify-content:center;width:100%}.feedback-actions.main-actions{flex-wrap:wrap}button.secondary{background:#365a2e26;border:1px solid rgba(54,90,46,.4);color:var(--text-dark)}.overlay button.secondary{background:#ffffff26;border:1px solid rgba(255,255,255,.3);color:#fff}button.secondary:not(:disabled):hover{background:#365a2e40}.overlay button.secondary:not(:disabled):hover{background:#ffffff40}.close-icon{position:absolute;top:.5rem;right:.5rem;width:2rem;height:2rem;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;color:#fff9;font-size:1.5rem;line-height:1;border-radius:50%}.close-icon:hover{background:#ffffff1a;color:#fff}.tutorial-content{display:flex;justify-content:center;gap:1.5rem;margin:1.5rem 0}.tutorial-step{display:flex;flex-direction:column;align-items:center;gap:.5rem;animation:fadeIn .4s ease-out}.tutorial-icon{font-size:3rem;margin-bottom:.5rem}.tutorial-step p{margin:0;font-size:1.1rem;font-weight:600}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.board-header-controls{display:flex;justify-content:center;margin-bottom:1rem;width:100%}.board-start-btn{padding:.6rem 2rem;font-size:1.1rem;box-shadow:0 4px 12px #365a2e66;border-radius:30px}#startBtnDesktop{display:none}.mobile-only{display:flex}@media (min-width: 1000px){#startBtnDesktop{display:block}.mobile-only{display:none!important}.board-header-controls{display:none}}