:root{--background: #0e1c2f;--panel: rgba(255, 255, 255, .06);--panel-border: rgba(255, 255, 255, .12);--text: #f8fafc;--muted: rgba(255, 255, 255, .7);--accent: #56d0d1;--danger: #ff6b6b;--shadow: 0 14px 34px rgba(0, 0, 0, .55);--tile-width: 80px;--tile-height: 100px;--tile-offset-x: 44px;--tile-offset-y: 40px;--tile-depth: 6px;--tile-base-y: 1;--board-padding: 20px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;height:100%;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;background:radial-gradient(circle at 30% 20%,#13365a,#051220 85%);color:var(--text)}.app{display:flex;flex-direction:column;min-height:100%;height:100%;overflow:hidden;padding:20px;gap:16px}.app__header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.title{margin:0;font-size:1.6rem;letter-spacing:.03em}.controls{display:flex;align-items:center;gap:12px}.button{padding:10px 14px;border:1px solid var(--panel-border);border-radius:999px;background:#ffffff14;color:var(--text);cursor:pointer;font-weight:600;transition:transform .12s ease,background .12s ease}.button:hover{background:#ffffff24;transform:translateY(-1px)}.status{font-size:.95rem;color:var(--muted);min-width:200px}.board-container{flex:1;display:grid;place-items:center;overflow:hidden;padding:16px}.board{position:relative;width:100%;height:100%;padding:var(--board-padding);min-width:0;min-height:0;background:#ffffff0a;border:1px solid rgba(255,255,255,.12);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000094;display:none;align-items:center;justify-content:center;z-index:999}.modal-overlay.show{display:flex}.modal-box{width:min(440px,calc(100% - 32px));background:#0f1c30fa;border:1px solid rgba(255,255,255,.17);box-shadow:0 14px 30px #00000073;border-radius:14px;padding:24px;text-align:center}.start-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:auto}.sound-control{position:absolute;bottom:12px;left:12px;display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;background:#ffffffd6;color:#000;font-size:.85rem;z-index:2;border:1px solid rgba(0,0,0,.12)}.sound-toggle-button{width:38px;height:38px;border:none;border-radius:999px;background:#56d0d1e6;color:#0b1225;font-size:1.1rem;cursor:pointer;position:relative;display:grid;place-items:center}.sound-toggle-button.is-off{background:#ff6a6acc}.sound-toggle-button:after{content:"";position:absolute;width:100%;height:100%;border-radius:999px;top:0;left:0;pointer-events:none}.sound-toggle-button .sound-icon-off{position:absolute;color:#fff;text-shadow:0 0 2px rgba(0,0,0,.8);font-size:1.2rem;display:none}.sound-toggle-button.is-off .sound-icon-off{display:block}.sound-panel{display:none;flex-direction:column;align-items:center;gap:4px;margin-left:8px}.sound-panel.show{display:flex}.sound-control input[type=range]{width:130px;margin:0}.sound-control .sound-volume-value{width:48px;text-align:center}.start-overlay__button{font-size:1.3rem;font-weight:800;padding:14px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:#56d0d1e6;color:#0b1225;cursor:pointer;box-shadow:0 10px 24px #0006}.start-overlay__button:hover{transform:translateY(-1px);background:#56d0d1}.modal-title{margin:0 0 12px;font-size:1.4rem}.modal-text{margin:6px 0 20px;color:var(--muted)}.modal-button{width:100%;padding:10px 16px;border:1px solid rgba(86,208,209,.7);border-radius:999px;background:#56d0d133;color:#fff;font-weight:700;cursor:pointer}.modal-button:hover{background:#56d0d159}.tile{position:absolute;width:var(--tile-width);height:var(--tile-height);border-radius:16px;border:1px solid rgba(0,0,0,.18);background:radial-gradient(circle at 18% 18%,#ffffff8c,#fff0 48%),radial-gradient(circle at 78% 74%,#00000024,#0000 52%),linear-gradient(145deg,#fdfaf2,#e9e5d7);box-shadow:0 10px 18px #00000040,0 calc(var(--z) * 1px) calc(var(--z) * 1px) #0000002e;display:grid;place-items:center;font-size:1.1rem;font-weight:800;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;transform:translate(var(--abs-x, 0px)) translateY(var(--abs-y, 0px))}.tile:before{content:"";position:absolute;top:12px;left:12px;width:18px;height:18px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px #00000014}.tile--dot:after{content:"●";position:absolute;top:12px;right:12px;font-size:1.3rem;color:#2563eb}.tile--bambo:after{content:"♣";position:absolute;top:12px;right:12px;font-size:1.3rem;color:#15803d}.tile--honor:after{content:"東";position:absolute;top:12px;right:12px;font-size:1.3rem;color:#b91c1c}.tile--flower:after{content:"花";position:absolute;top:12px;right:12px;font-size:1.3rem;color:#f97316}.tile--season:after{content:"季";position:absolute;top:12px;right:12px;font-size:1.3rem;color:#0ea5e9}.tile:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:14px;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.32),transparent 70%);opacity:0;transition:opacity .14s ease}.tile:hover{transform:translate(var(--abs-x, 0px)) translateY(var(--abs-y, 0px)) translateY(-3px) scale(1.01);box-shadow:0 18px 26px #00000073}.tile--selected{border-color:#56d0d1cc;box-shadow:0 18px 26px #56d0d173}.tile--selected:before{opacity:1}.tile--locked{filter:brightness(.65) saturate(.9);cursor:not-allowed}.tile--removed{display:none;pointer-events:none}.tile__label{pointer-events:none;text-align:center;line-height:1.1;font-size:2.1rem;color:#1a1a1a;text-shadow:0 1px 1px rgba(255,255,255,.7)}.tile__label--dot{color:#0369a1}.tile__label--bambo{color:#15803d}.tile__label--honor{color:#b91c1c}.tile__label--flower{color:#d97706}.tile__label--season{color:#0ea5e9}.app__footer{text-align:center;font-size:.85rem;color:#ffffff8c}.caption{margin:0}.debug-settings-panel,.debug-settings-toggle{position:fixed;z-index:1000}.debug-settings-panel{display:none;width:min(260px,90vw);right:16px;bottom:16px;background:#081423f2;color:#f8fafc;border:1px solid rgba(255,255,255,.25);border-radius:12px;box-shadow:0 16px 36px #00000073;padding:10px;font-size:.9rem}.debug-settings-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.debug-settings-header button,.debug-settings-toggle{border:1px solid rgba(255,255,255,.2);background:#56d0d1d9;color:#0b1225;border-radius:999px;padding:4px 10px;font-size:.8rem;cursor:pointer}.debug-settings-body{display:grid;gap:6px}.debug-settings-body .setting-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.debug-settings-body .setting-row span{line-height:1.3}.debug-settings-body select,.debug-settings-body input[type=checkbox]{border:1px solid rgba(255,255,255,.3);border-radius:8px;background:#ffffff1a;color:#f8fafc;padding:4px 8px}.debug-settings-body input[type=checkbox]{width:auto;height:auto;padding:0;background:transparent;border:none}.debug-settings-body select option{color:#0b1225;background:#fff}.debug-settings-body select option:checked{color:#0b1225;background:#56d0d133}.debug-settings-toggle{right:16px;bottom:16px;display:block;padding:8px 12px;background:#081423f2;color:#f8fafc;border:1px solid rgba(255,255,255,.25);border-radius:999px}