.soko-game{--soko-gold:#edc18a;--soko-mint:#97d5c4}.soko-game h1 span{color:var(--soko-gold)}
.soko-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}.soko-play{min-width:0;border:1px solid #544b42;border-radius:20px;background:linear-gradient(145deg,#202a31,#151e26);overflow:hidden}.soko-board-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 24px 18px}.soko-board-heading h2{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:500;margin-top:7px}.soko-board-heading .eyebrow{color:#baa98d;font-size:9px}.soko-filled{font-size:12px;color:#edce9f;border:1px solid #716046;border-radius:20px;padding:8px 11px;white-space:nowrap;background:#d5a3540c}
.soko-stage-wrap{position:relative;background:radial-gradient(ellipse at 45% 45%,#51606444,transparent 68%)}.soko-stage{height:410px;outline-offset:-3px;touch-action:pan-y;cursor:pointer}.soko-stage canvas{display:block;width:100%;height:100%}.soko-scene-toolbar{position:absolute;top:6px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;z-index:1;pointer-events:none}.soko-scene-toolbar button{pointer-events:auto;font-size:11px}.soko-scene-toolbar>span{color:#a9bbbe;font-size:11px;border-radius:6px;background:#14212abb;padding:7px 10px}.soko-caption{display:flex;justify-content:space-between;gap:10px;padding:9px 22px;color:#93a8ae;font-size:11px}.soko-caption label{display:flex;align-items:center;gap:7px;cursor:pointer}.soko-caption input{accent-color:#e3b97e;width:15px;height:15px}
.soko-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:18px 20px}.soko-dpad{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,38px);gap:4px}.soko-dpad button{border:1px solid #63706f;border-radius:9px;background:linear-gradient(#344449,#29383d);color:#f1dec2;font-size:24px;cursor:pointer;box-shadow:0 3px 0 #0b171e}.soko-dpad button:hover:not(:disabled){background:#506062;border-color:#e3c395}.soko-dpad button:active:not(:disabled){transform:translateY(2px);box-shadow:none}.soko-dpad button:disabled{opacity:.35;cursor:default}.soko-up{grid-area:1/2}.soko-left{grid-area:2/1}.soko-right{grid-area:2/3}.soko-down{grid-area:3/2}.soko-dpad>span{grid-area:2/2;display:grid;place-items:center;color:#8bb9b9}.soko-control-copy strong{font-size:13px;color:#d9e3df;font-weight:500}.soko-control-copy p{font-size:11px;line-height:1.8;color:#9faeae;margin-top:7px}
.soko-toolbar{display:flex;gap:9px;padding:0 22px 20px;justify-content:center}.soko-toolbar .button{font-size:12px}.soko-toolbar .button:last-child{margin-left:auto}.soko-primary{background:linear-gradient(120deg,#eac48d,#c8975f)!important;border-color:#f6d6a7!important;color:#242a29!important;font-weight:600}.soko-warning{margin:0 20px 18px;padding:12px 14px;border:1px solid #bd8757;background:#54392550;color:#f2ca9d;font-size:12px;line-height:1.7;border-radius:9px}
.soko-hints{padding:20px 22px;border-top:1px solid #455050}.soko-hints>div{display:flex;align-items:center;justify-content:space-between;gap:12px}.soko-hints h2{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:500}.soko-hints h2 .lucide{width:17px;color:#edbd7b}.soko-hints .button{font-size:11px;padding:9px 12px}.soko-hints p{font-size:12px;color:#b6c1bf;line-height:1.7;margin:12px 0}.soko-hints>.quiet-button{font-size:12px}
.soko-side{display:grid;gap:18px;min-width:0}.soko-panel{padding:21px;border:1px solid #3c4a4e;border-radius:16px;background:#172129}.soko-panel-heading{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:18px}.soko-panel-heading h2{font-size:14px;font-weight:500}.soko-panel-heading>span{font-size:9px;letter-spacing:.6px;color:#b8b396;white-space:nowrap}.soko-map{display:grid;grid-template-columns:repeat(var(--columns),1fr);gap:3px;max-width:330px;margin:auto}.soko-cell{aspect-ratio:1;min-width:0;border:1px solid #526164;border-radius:4px;background:#293a42;color:#b8cad0;display:grid;place-items:center;font-size:20px;cursor:pointer;padding:0}.soko-cell.wall{background:repeating-linear-gradient(0deg,#45535b 0 7px,#35434a 7px 9px);border-color:#5b686d;cursor:default}.soko-cell.goal{background:#665336;color:#f3c983;border-color:#d5a365}.soko-cell.crate{background:#bd854d;color:#252c2c;border-color:#e8c699}.soko-cell.filled{background:#497a6c;color:#c9fce6;border-color:#92debd}.soko-cell.player{color:#aff8f0;box-shadow:inset 0 0 0 2px #a1d9d2}.soko-cell.hinted{outline:2px solid #89ddfc;outline-offset:1px}.soko-cell:disabled{cursor:default}.soko-legend{display:flex;flex-wrap:wrap;gap:9px 14px;margin-top:15px;font-size:10px;color:#b2c2c6}.soko-legend span{display:flex;align-items:center;gap:5px}.soko-person{color:#acf3ec}.soko-box-symbol{color:#d9a466}.soko-goal-symbol{color:#eac791}.soko-done-symbol{color:#94d8bd}.soko-small{font-size:11px;line-height:1.8;color:#95a9af;margin-top:15px}.soko-levels{display:grid;gap:7px}.soko-levels button{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;text-align:left;border:1px solid #3c4d52;border-radius:8px;background:#202d35;padding:10px;color:#cad6da;cursor:pointer}.soko-levels button>span{font-size:11px;color:#809aa1}.soko-levels button strong{font-size:12px;font-weight:500}.soko-levels button small{font-size:10px;color:#93a9af}.soko-levels button[aria-pressed=true]{border-color:#c8a277;background:#7b624530}.soko-levels button.completed>span{color:#92dbbb}.soko-levels button.completed>span::after{content:'✓';margin-left:2px;font-size:9px}
.soko-win{display:flex;align-items:center;gap:15px;padding:20px;background:linear-gradient(110deg,#2d4d43,#243b3d);border-top:1px solid #6ea089;border-bottom:1px solid #567d6d}.soko-win>.lucide{color:#d4dbaf;flex-shrink:0}.soko-win>div{flex:1}.soko-win strong{font-size:18px;color:#e5f6e2}.soko-win p{font-size:12px;color:#b0d4c6;margin-top:6px}.soko-win .button{font-size:12px;white-space:nowrap}.soko-card{background:linear-gradient(125deg,#3d3933,#182a30);border-color:#7c6850}.soko-card .card-symbol{background:#564831;color:#f1cf98;border-color:#93744a}.soko-card .button{border-color:#a18a69;color:#ebd4b4}#soko-graphics{padding:65px 25px 30px;font-size:14px;line-height:1.8;color:#e5c698}
@media(max-width:1200px){.soko-layout{grid-template-columns:minmax(0,1fr) 260px;gap:16px}.soko-panel{padding:17px}.soko-board-heading{padding:20px 18px}.soko-board-heading h2{font-size:21px}.soko-hints{padding:18px}.soko-win{flex-wrap:wrap}.soko-win .button{width:100%}}
@media(max-width:760px){.soko-layout{grid-template-columns:1fr}.soko-stage{height:320px}.soko-game h1{font-size:38px}.soko-board-heading{padding:18px 15px 12px}.soko-board-heading h2{font-size:21px}.soko-board-heading .eyebrow{font-size:8px;letter-spacing:1px}.soko-filled{font-size:10px;padding:7px 9px}.soko-caption{font-size:10px;padding:8px 14px}.soko-controls{gap:18px;padding:12px 14px}.soko-control-copy p{font-size:10px}.soko-control-copy strong{font-size:12px}.soko-toolbar{padding:3px 15px 17px}.soko-toolbar .button{min-height:43px}.soko-hints{padding:18px 15px}.soko-hints h2{font-size:12px}.soko-panel{padding:20px}.soko-side{grid-template-columns:1fr}.soko-scene-toolbar{left:14px;right:14px}.soko-scene-toolbar>span{font-size:10px}.soko-map{max-width:320px}.soko-win{padding:17px}.soko-stage-wrap:focus-within{scroll-margin-top:8px}}
@media(max-width:410px){.soko-stage{height:290px}.soko-hints h2{max-width:160px;line-height:1.5}.soko-controls{gap:14px}.soko-dpad{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,37px)}.soko-game .game-stats strong{font-size:24px}.soko-scene-toolbar button{font-size:10px}}