:root{--bg:#0e0f13;--panel:#151820;--muted:#1c2130;--grid:#232838;--tile:#404656;--tile-hover:#4a5164;--text:#fff;--shadow:0 8px 20px #00000059;--board-size:12;--cell:44px;--gap:10px;--radius:12px;--anim:.16s ease;--lens-radius:95px}*{box-sizing:border-box}html,body{overscroll-behavior:none;touch-action:none;height:100%;overflow:hidden}body{background:var(--bg);color:#d9deee;justify-content:center;align-items:center;margin:0;padding:18px;font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;display:flex}.wrap{gap:var(--gap);grid-template-rows:auto auto;display:grid}.board-card,.bank-card{background:var(--panel);border:1px solid var(--muted);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}.title{letter-spacing:.2px;justify-content:space-between;align-items:center;margin:0 0 10px;font-weight:600;display:flex}.meta{opacity:.7;font-size:12px;font-weight:500}.stage{width:calc(var(--cell)*var(--board-size));height:calc(var(--cell)*var(--board-size));background:#0c0e14;border-radius:10px;margin:0 auto;position:relative;overflow:hidden}.board-layer{position:absolute;inset:0}.grid-overlay{pointer-events:none;opacity:0;transition:opacity var(--anim);background-image:linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);background-size:var(--cell) var(--cell), var(--cell) var(--cell);-webkit-mask-image:radial-gradient(circle var(--lens-radius) at var(--lens-x,-1000px) var(--lens-y,-1000px), #000 0%, #000 55%, #0000 100%);-webkit-mask-image:radial-gradient(circle var(--lens-radius) at var(--lens-x,-1000px) var(--lens-y,-1000px), #000 0%, #000 55%, #0000 100%);mask-image:radial-gradient(circle var(--lens-radius) at var(--lens-x,-1000px) var(--lens-y,-1000px), #000 0%, #000 55%, #0000 100%);background-position:0 0,0 0;position:absolute;inset:0}.grid-overlay.visible{opacity:1}.tile{width:calc(var(--cell) - 6px);height:calc(var(--cell) - 6px);background:var(--tile);color:var(--text);letter-spacing:.6px;-webkit-user-select:none;user-select:none;cursor:grab;transition:transform var(--anim), left var(--anim), top var(--anim), background var(--anim), box-shadow var(--anim);border-radius:9px;justify-content:center;align-items:center;font-size:18px;font-weight:800;display:flex;position:absolute;box-shadow:0 2px 10px #00000059,inset 0 0 0 1px #ffffff0d}.tile:hover{background:var(--tile-hover)}.tile:active{cursor:grabbing}.drag-proxy{width:calc(var(--cell) - 6px);height:calc(var(--cell) - 6px);background:var(--tile);color:var(--text);letter-spacing:.6px;-webkit-user-select:none;user-select:none;pointer-events:none;z-index:1000;border-radius:9px;justify-content:center;align-items:center;font-size:18px;font-weight:800;display:flex;position:fixed;transform:scale(1.06);box-shadow:0 10px 25px #0000008c,inset 0 0 0 1px #ffffff14}.bank{width:100%;max-width:calc(100vw - 120px);padding:6px}.bank-grid{width:100%;height:calc(var(--cell)*2 + 8px);position:relative}.bank-tile{position:absolute}.bank-row{justify-content:center;align-items:stretch;gap:12px;display:flex}#btnReroll{background:var(--panel);color:#d9deee;border:1px solid var(--muted);border-radius:var(--radius);cursor:pointer;min-width:140px;box-shadow:var(--shadow);transition:background var(--anim), transform var(--anim), box-shadow var(--anim);padding:12px 16px;font-weight:700}#btnReroll:hover{background:#1a1f2c}#btnReroll:active{transform:translateY(1px);box-shadow:0 6px 14px #0006}.hint{opacity:.7;text-align:center;margin-top:8px;font-size:12px}@media (width<=700px){:root{--cell:32px;--gap:8px;--lens-radius:70px}body{font-size:12px}.tile,.drag-proxy{width:calc(var(--cell) - 4px);height:calc(var(--cell) - 4px);border-radius:7px;font-size:15px}.stage{margin:0 auto}.bank-grid{height:calc(var(--cell) * 2 + 6px)}#btnReroll{min-width:76px;padding:10px 8px;font-size:12px}}