.dir1{--dir:var(--up)}.dir2{--dir:var(--right)}.dir3{--dir:var(--down)}.dir4{--dir:var(--left)}.hero{display:grid;grid-template-columns:1.05fr 1fr;grid-gap:48px;gap:48px;align-items:center;padding:56px 0 40px}.heroText{display:grid;grid-gap:18px;gap:18px;justify-items:start}.finish h1,.hero h1{font-size:clamp(44px,7vw,76px);font-weight:800;line-height:.98;letter-spacing:-1.5px}.heroText .btn{margin-top:10px}.facts{font-size:15px;font-weight:800;color:var(--ink-soft)}.demo{display:grid;grid-gap:16px;gap:16px;background:var(--card);border:var(--line);border-radius:26px;box-shadow:8px 8px 0 var(--ink);padding:20px;transform:rotate(1.8deg)}.demo figcaption{font-weight:800;color:var(--ink-soft);text-align:center;font-size:15px}.demoCodes{display:flex;gap:8px}.legend{margin-top:24px}.legend h2{font-size:28px;font-weight:800;margin-bottom:16px}.legend ul{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:14px;gap:14px}.legend li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;grid-column-gap:10px;column-gap:10px;align-items:center;padding:14px 16px;background:var(--dir);border:var(--line);border-radius:18px;box-shadow:4px 4px 0 var(--ink)}.legend li b{font-size:44px;line-height:1;grid-row:span 2}.legend li span,.legend li svg{justify-self:end}.legend li span{grid-column:2;font-weight:800;font-size:16px}.ticket{display:grid;justify-items:center;align-content:center;grid-gap:0;gap:0;width:56px;height:72px;background:var(--card);border:var(--line);border-radius:14px;position:relative}.ticket b{font-size:28px;line-height:1;font-weight:800}.demoCodes .ticket{background:var(--dir);width:48px;height:60px}.demoCodes .ticket b{font-size:24px}.codes{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.codes .ticket{width:62px;height:80px;border-style:dashed}.codes .ticket b{font-size:32px}.codes .ticket.done{background:var(--dir);border-style:solid}.codes .ticket.done:after{content:"";position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;border:var(--line);background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center /14px no-repeat}.codes .ticket.active{background:var(--dir);border-style:solid;border-width:4px;transform:translateY(-6px);box-shadow:0 6px 0 var(--ink)}.play{display:grid;grid-template-columns:1fr 1.1fr;grid-template-rows:auto auto 1fr;grid-template-areas:"intro board" "panel board" ". board";grid-gap:28px 44px;gap:28px 44px;align-items:start;padding-top:36px}.intro{grid-area:intro}.boardCard{grid-area:board}.panel{grid-area:panel;display:grid;grid-gap:14px;gap:14px}.levelBar{display:flex;align-items:center;gap:14px;margin-bottom:18px}.levelNo{font-weight:800;color:var(--ink-soft);white-space:nowrap}.levelNo b{font-size:22px;color:var(--ink)}.dots{display:flex;gap:5px;flex:1 1}.dots li{flex:1 1;height:12px;border:2px solid var(--ink);border-radius:99px;background:var(--card)}.dots li.past{background:var(--ink)}.dots li.now{background:var(--sun)}.intro h2{font-size:clamp(34px,5vw,46px);font-weight:800;line-height:1;letter-spacing:-.8px}.sub{margin-top:10px;font-size:17px;line-height:1.5;font-weight:700;color:var(--ink-soft);max-width:26em}.boardCard{background:var(--card);border:var(--line);border-radius:26px;box-shadow:8px 8px 0 var(--ink);padding:18px}.boardHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-weight:800;color:var(--ink-soft)}.boardHead b{font-size:22px;color:var(--ink)}.legendLine{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:14px;font-weight:700;color:var(--ink-soft);line-height:1.35}.legendLine svg{flex:none}.board{display:grid;grid-gap:7px;gap:7px;width:100%}.cell{aspect-ratio:1;display:grid;place-items:center;padding:0;background:#fff;border:2.5px solid var(--ink);border-radius:12px;font-size:clamp(22px,6vw,36px);transition:background .12s,transform .12s;position:relative}.cell:disabled{cursor:default}.cell b{font-size:clamp(24px,6vw,38px);line-height:1;font-weight:800}.cell.near{border-style:dashed;background:#fff9ec}.cell.near:hover{background:var(--sun)}.cell[class*=dir]{background:var(--dir)}.cell.start{background:var(--ink)}.cell.here{transform:translateY(-3px);box-shadow:0 5px 0 var(--ink);border-width:4px}.cell.here.start{background:var(--ink)}.cell.found{background:var(--sun);animation:pop .45s cubic-bezier(.3,1.6,.5,1)}.cell svg{width:52%;height:52%}.reward{font-size:clamp(30px,8vw,50px);line-height:1}.msg{padding:14px 16px;border:var(--line);border-radius:16px;font-weight:800;font-size:17px;line-height:1.4}.msg.retry{background:#ffe2d6}.msg.ok{background:#d5f5e6;display:flex;align-items:center;gap:12px}.msg .big{font-size:38px;line-height:1}.hint{font-size:14px;font-weight:700;color:var(--ink-soft)}.finish,.hint{text-align:center}.finish{display:grid;justify-items:center;grid-gap:18px;gap:18px;padding:64px 0 20px}.finish .lead{margin:0 auto}.sheet{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:12px;gap:12px;max-width:520px;width:100%;margin:14px 0 22px}.sheet li{aspect-ratio:1;display:grid;place-items:center;font-size:clamp(30px,7vw,46px);background:var(--card);border:var(--line);border-radius:16px;box-shadow:3px 3px 0 var(--ink);transform:rotate(var(--tilt))}@keyframes pop{0%{transform:scale(.7)}to{transform:scale(1)}}@media (max-width:860px){.hero{grid-template-columns:1fr;gap:36px;padding-top:32px}.demo{max-width:420px;justify-self:center;width:100%}.legend ul{grid-template-columns:repeat(2,1fr)}.play{grid-template-columns:1fr;grid-template-areas:"intro" "board" "panel";gap:22px;padding-top:24px}}@media (max-width:480px){.boardCard{padding:12px;box-shadow:5px 5px 0 var(--ink)}.board{gap:5px}.codes .ticket{width:54px;height:70px}}