.sokoban,.sokoban *,.sokoban *:before,.sokoban *:after{box-sizing:border-box}.sokoban{--ink: #f4efe6;--ink-dim: #c3b6a0;--panel: rgba(46, 38, 26, .7);--panel-brd: rgba(255, 255, 255, .1);--accent: #ff9f45;color-scheme:dark;width:100%;min-width:0;max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(12px,3vmin,20px);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;user-select:none}.sokoban__hud{display:grid;grid-template-columns:minmax(0,auto) 1fr auto;align-items:center;gap:clamp(8px,2vmin,14px);min-width:0}.sokoban__brand{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden}.sokoban__logo{width:clamp(30px,7vmin,40px);height:clamp(30px,7vmin,40px);flex-shrink:0;border-radius:10px;background:linear-gradient(145deg,#e8a765,#b06a2c);box-shadow:inset 0 2px #ffffff59,inset 0 0 0 3px #00000026,0 4px 12px -4px #ff9f4599}.sokoban__title{display:flex;flex-direction:column;line-height:1;min-width:0}.sokoban__name{font-weight:800;font-size:clamp(17px,4.2vmin,22px);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sokoban__tag{font-size:clamp(9px,2.1vmin,11px);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sokoban__scores{display:flex;justify-content:center;gap:clamp(6px,1.6vmin,12px);min-width:0}.sokoban__stat{min-width:0;padding:clamp(4px,1.2vmin,8px) clamp(8px,2vmin,12px);border-radius:12px;background:var(--panel);border:1px solid var(--panel-brd);display:flex;flex-direction:column;align-items:center;line-height:1}.sokoban__stat-label{font-size:clamp(8px,1.9vmin,10px);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-dim);margin-bottom:5px}.sokoban__stat-value{font-weight:800;font-variant-numeric:tabular-nums;font-size:clamp(16px,4.4vmin,22px)}.sokoban__stat-sub{font-size:.6em;color:var(--ink-dim)}.sokoban__controls{display:flex;gap:6px;flex-shrink:0}.sbtn{width:clamp(34px,8vmin,42px);height:clamp(34px,8vmin,42px);display:grid;place-items:center;border-radius:12px;border:1px solid var(--panel-brd);background:var(--panel);color:var(--ink);cursor:pointer;transition:transform .12s ease}.sbtn svg{width:55%;height:55%}.sbtn:active{transform:scale(.92)}.sboard{position:relative;width:100%;margin:0 auto;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);gap:3px;padding:6px;border-radius:clamp(10px,2.6vmin,16px);background:#1a1610;box-shadow:inset 0 0 0 1px #ffffff0d;touch-action:none}.cell{position:relative;border-radius:5px;background:#ffffff0d;display:grid;place-items:center}.cell--wall{background:linear-gradient(160deg,#4a4030,#322a1e);box-shadow:inset 0 1px #ffffff1a,inset 0 -3px 6px #00000059}.target{width:42%;height:42%;border-radius:50%;background:transparent;box-shadow:0 0 0 3px #ffcf3fd9,0 0 12px 2px #ffcf3f80}.box{position:absolute;inset:12%;border-radius:6px;background:linear-gradient(155deg,#e8a765,#b06a2c);box-shadow:inset 0 2px #fff6,inset 0 0 0 3px #00000024,0 3px 6px -2px #00000080}.box--on{background:linear-gradient(155deg,#5fe6a8,#14a866);box-shadow:inset 0 2px #fff6,0 0 16px 2px #22c77eb3}.player{position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle at 38% 32%,#b79bff,#6c3fff);box-shadow:inset 0 2px #ffffff80,0 0 14px 1px #7c5cffb3;z-index:2}.sboard__overlay{position:absolute;inset:0;display:grid;place-items:center;background:#141008b3;backdrop-filter:blur(2px);border-radius:clamp(10px,2.6vmin,16px)}.sboard__card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.sboard__result{margin:0;font-weight:900;font-size:clamp(20px,6.4vmin,30px);background:linear-gradient(92deg,#ffd06a,#ff9a5c,#5fe6a8);-webkit-background-clip:text;background-clip:text;color:transparent}.start{border:none;border-radius:999px;padding:clamp(11px,2.8vmin,15px) clamp(26px,7vmin,36px);font:inherit;font-weight:800;font-size:clamp(14px,3.8vmin,18px);color:#3a2600;background:linear-gradient(160deg,#ffcf8a,#ff9f45);box-shadow:0 8px 24px -8px #ff9f45e6;cursor:pointer;transition:transform .12s ease}.start:active{transform:scale(.94)}.slevels{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(24px,6vmin,30px),1fr));gap:clamp(4px,1.2vmin,6px)}.slevel{aspect-ratio:1;min-width:0;display:grid;place-items:center;padding:0;border-radius:8px;border:1px solid var(--panel-brd);background:var(--panel);color:var(--ink-dim);font:inherit;font-weight:700;font-size:clamp(10px,2.4vmin,13px);font-variant-numeric:tabular-nums;cursor:pointer;transition:transform .12s ease}.slevel:active{transform:scale(.9)}.slevel--cur{color:#3a2600;border-color:transparent;background:linear-gradient(160deg,#ffcf8a,#ff9f45);box-shadow:0 4px 14px -6px #ff9f45e6}.slevel--locked{cursor:default;opacity:.35}.sokoban__foot{text-align:center;font-size:clamp(10px,2.6vmin,12px);color:var(--ink-dim);margin:0}.sokoban-atrium{box-sizing:border-box;min-height:100%;width:100%;display:flex;align-items:center;justify-content:center;padding:clamp(8px,2vmin,20px);background:radial-gradient(85% 55% at 50% 0%,#2c2416 0%,transparent 55%),radial-gradient(90% 60% at 50% 100%,#1c1710 0%,transparent 60%),#120e08}