:root{--bg:#1b1730;--ink:#f2e9d0;--dim:#8f86b0;--panel:#2a2448;--edge:#0d0b18;--cell:#3b3463;--cell2:#453d72;--hint:#7be38b;--p0:#ff7a59;--p1:#59c3ff;--wall:#f2c14e;--bad:#ff4d6d;--px:3px}*{box-sizing:border-box}body,html{margin:0;background:var(--bg);color:var(--ink);font-family:Galmuri11,Galmuri9,DungGeunMo,ui-monospace,monospace;-webkit-font-smoothing:none;image-rendering:pixelated}body{background-image:radial-gradient(#ffffff10 1px,transparent 0);background-size:12px 12px}button,input{font:inherit;color:inherit}.screen{min-height:100dvh;max-width:480px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:10px}.home{justify-content:center;align-items:stretch}.px-box{background:var(--panel);box-shadow:inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #0004,inset var(--px) var(--px) 0 #fff2,0 calc(var(--px) * 2) 0 var(--edge);padding:18px;position:relative}.px-box,.px-btn{border:var(--px) solid var(--edge)}.px-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 14px;background:var(--cell2);box-shadow:inset 0 calc(var(--px) * -1) 0 #0006,0 var(--px) 0 var(--edge);cursor:pointer;text-decoration:none}.px-btn:active:not(:disabled){transform:translateY(var(--px));box-shadow:inset 0 calc(var(--px) * -1) 0 #0006}.px-btn:disabled{opacity:.45;cursor:default}.px-btn.primary{background:var(--wall);color:var(--edge)}.px-btn.sm{padding:4px 9px;font-size:13px}.px-btn.ghost{background:transparent;color:var(--dim)}.px-in{width:100%;padding:12px;background:var(--edge);border:var(--px) solid #000;outline:none}.px-in:focus{border-color:var(--wall)}.home-card{display:flex;flex-direction:column;gap:10px}.home-card h1{margin:0;font-size:26px;letter-spacing:1px;text-shadow:3px 3px 0 var(--edge)}.sub{margin:0;color:var(--dim);font-size:13px;line-height:1.6}.row{display:flex;gap:8px}.row .px-in{flex:1 1;min-width:0}.err{color:var(--bad);margin:0;font-size:13px}.how-btn{position:absolute}.how-btn,.lang{right:10px;top:10px}.lang{position:fixed;z-index:5;background:var(--panel);border:var(--px) solid var(--edge);padding:4px 8px;cursor:pointer}.game .lang{position:static}.logo{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:8px}.logo .pawn{width:36px;height:36px}.logo-wall{width:10px;height:56px;background:var(--wall);box-shadow:0 4px 0 #a07a1e}.pawn{display:inline-block;width:20px;height:20px;flex:none;-webkit-clip-path:polygon(30% 0,70% 0,70% 10%,80% 10%,80% 40%,70% 40%,70% 50%,90% 50%,90% 60%,100% 60%,100% 100%,0 100%,0 60%,10% 60%,10% 50%,30% 50%,30% 40%,20% 40%,20% 10%,30% 10%);clip-path:polygon(30% 0,70% 0,70% 10%,80% 10%,80% 40%,70% 40%,70% 50%,90% 50%,90% 60%,100% 60%,100% 100%,0 100%,0 60%,10% 60%,10% 50%,30% 50%,30% 40%,20% 40%,20% 10%,30% 10%)}.pawn.p0{background:var(--p0)}.pawn.p1{background:var(--p1)}.code{color:var(--wall)}.seats{list-style:none;margin:0;padding:0;display:grid;grid-gap:6px;gap:6px}.seats li{display:flex;align-items:center;gap:10px;padding:10px;background:var(--edge)}.seats li.empty{color:var(--dim)}.seats em{font-style:normal;font-size:11px;padding:1px 5px;background:var(--wall);color:var(--edge)}.seats em.off{background:var(--dim)}.blink{animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:.3}}.game{gap:8px;padding-top:10px}.top{justify-content:space-between}.pbar,.top{display:flex;align-items:center}.pbar{gap:8px;padding:8px 10px;background:var(--panel);border:var(--px) solid var(--edge)}.pbar b{flex:1 1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}.walls{display:flex;gap:2px}.walls i{height:14px;background:#ffffff1a}.walls i.on{background:var(--wall)}.board{position:relative;width:100%;aspect-ratio:1;background:var(--edge);border:var(--px) solid var(--edge);box-shadow:0 6px 0 #000;touch-action:manipulation}.board.flip{transform:rotate(180deg)}.cell{position:absolute;border:0;padding:0;background:var(--cell);box-shadow:inset -3px -3px 0 #0003,inset 3px 3px 0 #fff1;cursor:pointer}.cell.g0{background:color-mix(in srgb,var(--cell) 75%,var(--p1))}.cell.g1{background:color-mix(in srgb,var(--cell) 75%,var(--p0))}.cell.hint:after{content:"";position:absolute;inset:35%;background:var(--hint);animation:blink 1s steps(2) infinite}.wall{position:absolute;background:var(--wall);box-shadow:inset 0 0 0 1px #a07a1e;pointer-events:none;z-index:2}.wall.new{animation:drop .25s steps(3)}@keyframes drop{0%{opacity:0}}.wall.preview{background:repeating-linear-gradient(45deg,var(--wall) 0 4px,#fff 4px 8px);opacity:.85;z-index:3}.wall.preview.bad{background:repeating-linear-gradient(45deg,var(--bad) 0 4px,#000 4px 8px)}.pawn-on{position:absolute;display:grid;place-items:center;pointer-events:none;z-index:4;transition:left .18s steps(3),top .18s steps(3)}.pawn-on .pawn{width:70%;height:70%;filter:drop-shadow(2px 2px 0 #000)}.status{text-align:center;margin:2px 0;min-height:1.4em;color:var(--dim)}.status.mine{color:var(--hint)}.actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.actions .px-btn:not(.sm){flex:1 1}.how{position:fixed;inset:0;background:#000a;display:grid;place-items:end center;padding:12px;z-index:20}.how-box{width:100%;max-width:460px}.how-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.how ul{list-style:none;padding:0;margin:0;display:grid;grid-gap:8px;gap:8px}.how li{display:flex;gap:10px;font-size:13px;line-height:1.6}.how li p{margin:0}@media (min-width:720px){.how{place-items:center}}:root{--bg:#16132b;--panel:#241f42;--wall:#f2a64a;--p0:#c8423a;--p1:#e9e4f2}body{background:linear-gradient(#16132b,#2a1f3a) fixed}.board,.cell,.pawn,.wall,img{image-rendering:pixelated}.kv{margin:0 -16px 4px;border-bottom:var(--px) solid var(--edge)}.kv img{display:block;width:100%;aspect-ratio:240/200}.pawn{-webkit-clip-path:none;clip-path:none;background:url(/px/pawn-boy.png) 50%/contain no-repeat!important;width:28px;height:28px}.pawn.p1{background-image:url(/px/pawn-girl.png)!important}.board{background:url(/px/grass.png) 0 0/6.25% auto;border:0;padding:0;box-shadow:0 0 0 4px #3a3448,0 0 0 7px #24203a,0 0 0 10px #77707f,0 0 0 12px var(--edge),0 10px 0 12px #000;margin:14px 0}.board:before{content:"";position:absolute;inset:1%;background:#2d283d}.cell{background:url(/px/stone.png) 0 0/100% 100%;box-shadow:inset -2px -2px 0 #0004}.cell.g0{background-image:url(/px/stone-goal-a.png)}.cell.g1{background-image:url(/px/stone-goal-b.png)}.cell.hint:after{inset:32%;background:var(--wall);box-shadow:0 0 0 2px var(--edge)}.wall{background:url(/px/wall-h.png) 0 0/100% 100%;box-shadow:0 2px 0 #0008}.wall.v{background-image:url(/px/wall-v.png)}.wall.h{transform:scaleY(2.2)}.wall.v{transform:scaleX(2.2)}.wall.new{animation:thud .3s steps(3)}@keyframes thud{0%{transform:translateY(-30%) scale(1.2);opacity:.2}}.pawn-on .pawn{width:96%;height:96%;filter:drop-shadow(0 2px 0 #000)}.spr{background:50%/100% 100% no-repeat}.hop .spr{animation:hop .3s ease-out}.flip .pawn-on .pawn{transform:rotate(180deg)}.pawn-on.p0:before,.pawn-on.p1:before{content:"";position:absolute;bottom:4%;width:70%;height:14%;background:#0006}.pbar.active{border-color:var(--wall);box-shadow:0 0 0 2px #f2a64a55}.walls i{width:5px;height:12px}.walls i.on{background:linear-gradient(#24203a 0 25%,#8a8296 25%)}.win{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:radial-gradient(#f2a64a33,#0b0918ee 70%);animation:blink .4s steps(2) 2}.win-box{width:100%;max-width:360px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}.win-box img{width:70%;max-height:52dvh;object-fit:contain;filter:drop-shadow(4px 4px 0 #000)}.win-box h2{margin:0;font-size:22px;text-shadow:3px 3px 0 var(--edge)}.win-box p{margin:0;font-size:18px}.win-box p.w{color:var(--wall)}.win-box p.l{color:var(--dim)}.win-box .px-btn{width:100%}.field{position:relative;width:calc(100% + 32px);margin:6px -16px;aspect-ratio:1;background:url(/px/field.png) 50%/100% 100% no-repeat;image-rendering:pixelated;box-shadow:0 0 0 3px var(--edge)}.field .board,.field .pawns{position:absolute;left:25%;top:24.5%;width:50%;aspect-ratio:1;margin:0}.field .board{background:none;box-shadow:none}.field .board:before{display:none}.field .pawns{pointer-events:none;z-index:4}.field .cell{background:none;box-shadow:none}.field .cell:before{content:"";position:absolute;inset:18%;border-radius:50%;background:#3a24120f;box-shadow:inset 0 1px 0 #2a180c22,0 1px 0 #ffe9b015}.field .cell.g0:before{background:#e9e4f21c}.field .cell.g1:before{background:#c8423a1c}.field .cell.hint:after{inset:34%;border-radius:50%;background:#f2a64acc;box-shadow:0 0 0 2px #2a180c88}.field .cell:hover:before{background:#ffffff22}.field .wall{box-shadow:0 3px 0 #0007}.field .pawn-on{transition:none;display:block;overflow:visible}.field .pawn-on:before{left:18%;bottom:2%;width:64%;height:16%;border-radius:50%;background:#0007}.spr{position:absolute;left:50%;bottom:8%;height:200%;aspect-ratio:32/48;transform:translateX(-50%);background:0 0/400% 100% no-repeat;image-rendering:pixelated}.walk .spr{animation:walk .4s steps(4) infinite}@keyframes walk{0%{background-position-x:0}to{background-position-x:133.333%}}.hop .spr{animation:hop .52s linear,walk .26s steps(4) 2}@keyframes hop{0%,to{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-45%)}}.won .spr{animation:cheer .5s steps(3) infinite}@keyframes cheer{50%{transform:translateX(-50%) translateY(-22%)}}.flip .pawn-on .pawn{transform:none}.field .spr,.spr{aspect-ratio:128/192;height:210%;bottom:6%;background:bottom/contain no-repeat;filter:drop-shadow(0 1px 0 #0009)}.field .spr,.spr,.win-box img{image-rendering:auto}.field .board{background:#2a180c40;box-shadow:0 0 0 2px #2a180c55,0 0 0 3px #ffe9b022}.field .cell{background:linear-gradient(#fff3d61f,#fff3d60a);border-radius:2px;box-shadow:inset 0 1px 0 #fff6e035,inset 0 -1px 0 #2a180c40,0 0 0 1px #2a180c55;transition:background .15s}.field .cell:before{inset:30%;background:#2a180c14;box-shadow:none}.field .cell.g0{background:linear-gradient(#f1ecfa3a,#f1ecfa18)}.field .cell.g1{background:linear-gradient(#e0574a3a,#e0574a18)}.field .cell:hover{background:linear-gradient(#fff3d640,#fff3d61c)}.field .cell:hover:before{background:#ffffff18}.field .cell.hint{background:linear-gradient(#f2c46a44,#f2a64a22);box-shadow:inset 0 0 0 1px #f6cf7aaa,0 0 0 1px #2a180c55}.field .cell.hint:after{inset:36%;background:#f6cf7add;box-shadow:0 0 6px #f2a64a;animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{50%{opacity:.45;transform:scale(.8)}}.field .wall{box-shadow:0 0 0 1px #1a0f08cc,0 3px 0 #0008;border-radius:1px;z-index:3}.field .wall.preview{opacity:.75}.field .wall.preview.bad{filter:hue-rotate(-30deg) saturate(2) brightness(.8);opacity:.6}.field{aspect-ratio:2/3;background:url(/px/garden-800.webp) 50%/100% 100% no-repeat;image-rendering:auto;border-radius:4px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-width:700px){.field{background-image:url(/px/garden.webp)}}@media (min-width:600px){.field{width:min(100%,calc((100vh - 200px) * 2 / 3));margin:6px auto}}.field .board,.field .pawns{left:22.13%;top:27.43%;width:57.64%}.field .board{background:#3b2a1a59;border-radius:3px;box-shadow:0 0 0 2px #3b2a1a88,0 0 0 4px #f6e9c855,0 4px 14px #2a180c44}.field .cell{background:linear-gradient(#fffaf02e,#fffaf010);box-shadow:inset 0 1px 0 #ffffff55,inset 0 -1px 0 #4a321e55,0 0 0 1px #4a321e99}.field .cell:before{inset:32%;background:#4a321e1c}.field .cell.g0{background:linear-gradient(#ffffff55,#f1ecfa28)}.field .cell.g1{background:linear-gradient(#d84a3c55,#d84a3c26)}.field .cell:hover{background:linear-gradient(#fff6dc66,#fff6dc2a)}.field .cell.hint{background:linear-gradient(#f0b84a66,#e8962e3a);box-shadow:inset 0 0 0 2px #d99a2ecc,0 0 0 1px #4a321e99}.field .cell.hint:after{background:#e9a630ee;box-shadow:0 0 0 1px #6b4512aa,0 0 6px #f2a64a}.field .wall{box-shadow:0 0 0 1px #1a0f08dd,0 3px 2px #000a}.field .spr,.spr{height:245%;bottom:4%;filter:drop-shadow(0 1px 0 #0009) drop-shadow(0 2px 2px #0005)}.home:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#0c0a1a99,#0c0a1a22 35%,#0c0a1a33 65%,#0c0a1acc),url(/px/garden-800.webp) center 40% /cover no-repeat;image-rendering:auto}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),(min-width:700px){.home:before{background-image:linear-gradient(180deg,#0c0a1a99,#0c0a1a22 35%,#0c0a1a33 65%,#0c0a1acc),url(/px/garden.webp)}}.home{position:relative;isolation:isolate}.home .px-box{background:#1c1830e6;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.home-card{order:2}.home:has(.hero-ch){display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;align-items:end;justify-items:center;grid-column-gap:0;column-gap:0}.home:has(.hero-ch) .home-card{grid-column:1/3;grid-row:2;width:100%;box-sizing:border-box}.hero-ch{grid-row:1;height:min(36dvh,300px);width:auto;image-rendering:auto;filter:drop-shadow(0 10px 6px #0008);margin-bottom:-6px;pointer-events:none}.hero-ch.boy{grid-column:1;justify-self:end;margin-right:6px}.hero-ch.girl{grid-column:2;justify-self:start;margin-left:6px}@media (min-width:900px){.home:has(.hero-ch){max-width:1100px;grid-template-columns:1fr minmax(360px,420px) 1fr;grid-template-rows:1fr;align-items:center;column-gap:40px}.home:has(.hero-ch) .home-card{grid-column:2;grid-row:1}.hero-ch{grid-row:1;height:min(72dvh,560px);align-self:end;margin-bottom:4dvh}.hero-ch.boy{grid-column:1;justify-self:end;margin:0 0 4dvh}.hero-ch.girl{grid-column:3;justify-self:start;margin:0 0 4dvh}}.home .pawn{background-image:url(/px/face-boy.webp)!important;image-rendering:auto;border-radius:4px}.home .pawn.p1{background-image:url(/px/face-girl.webp)!important}