@font-face{font-family:Rajdhani;src:url('/assets/playable-20261011-v9/asset-0.ttf') format('truetype');font-weight:600 700;font-display:swap}*{box-sizing:border-box}body{margin:0;background:#090f17;color:#edf4f6;font-family:Rajdhani,Arial,sans-serif;display:grid;place-items:center;min-height:100svh;padding:16px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:4px}.shell{width:min(100%,410px)}.preview-label{display:flex;justify-content:space-between;color:#82969e;font:12px Arial,sans-serif;letter-spacing:.1em;margin-bottom:12px}.phone{width:100%;aspect-ratio:390/844;position:relative;overflow:hidden;background:#1c1817;box-shadow:0 24px 90px #0008;border:1px solid #45515a;border-radius:18px;isolation:isolate}.terrain{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;z-index:-2}.shade{position:absolute;inset:0;background:linear-gradient(#07131def 0%,#09131d45 23%,#11151b18 65%,#07131de8 100%);z-index:-1}.header{position:absolute;top:4%;left:7%;right:7%;display:flex;align-items:center;justify-content:space-between}.brand{font-size:25px;font-weight:700;line-height:.85;letter-spacing:.07em}.brand span{display:block;color:#67e8f9;font-size:13px;letter-spacing:.37em;margin-top:7px}.sector{font-size:12px;letter-spacing:.14em;color:#afbec2;text-align:right}.sector b{display:block;color:#f2ab69;font-size:20px;margin-top:3px}.brief{position:absolute;top:12%;left:7%;right:7%;display:flex;justify-content:space-between;border-bottom:1px solid #8b969344;padding-bottom:10px}.brief small{font-size:12px;letter-spacing:.14em;color:#b1bec1}.brief strong{display:block;font-size:21px;letter-spacing:.04em}.timer{font-size:26px;font-variant-numeric:tabular-nums;color:#68eafa}.progress{position:absolute;left:7%;right:7%;top:20%;display:flex;gap:5px}.pip{height:3px;flex:1;background:#69767655}.pip.owned{background:#63eaf7;box-shadow:0 0 8px #63eaf755}#field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.node{position:absolute;transform:translate(-50%,-50%);width:23%;height:15%;border:0;background:transparent;color:#fff;padding:0;touch-action:none;user-select:none;--owner:#69ebfb;filter:drop-shadow(0 6px 6px #0008)}.node img{position:absolute;left:3%;top:27%;width:94%;height:67%;object-fit:contain;pointer-events:none}.node .ring{position:absolute;left:9%;right:9%;top:65%;height:28%;border:3px solid var(--owner);border-radius:50%;box-shadow:0 0 14px color-mix(in srgb,var(--owner) 45%,transparent);background:color-mix(in srgb,var(--owner) 18%,transparent);z-index:-1}.node .count{position:absolute;top:2%;left:15%;right:15%;font-size:24px;font-weight:700;text-shadow:0 2px 4px #000;background:#07131dcc;clip-path:polygon(8% 0,100% 0,100% 80%,92% 100%,0 100%,0 20%)}.node .capacity{position:absolute;top:26%;left:20%;width:60%;height:3px;background:#07131da8}.capacity i{display:block;height:100%;background:var(--owner)}.node .name{position:absolute;bottom:-5%;left:-10%;right:-10%;font-size:12px;letter-spacing:.12em;color:#ebf1f2;text-shadow:0 2px 3px #000}.node.enemy{--owner:#f47d66}.node.neutral{--owner:#a3afb6}.node.selected .ring{border-color:#fff;box-shadow:0 0 24px #67eafa}.node.target .ring{border-color:#fff}.node.captured{animation:capture .55s ease-out}@keyframes capture{50%{filter:drop-shadow(0 0 18px #6beeff);transform:translate(-50%,-50%) scale(1.12)}}.hint{position:absolute;bottom:13.5%;left:8%;right:8%;text-align:center;font-size:20px;line-height:1.15;text-shadow:0 2px 8px #000}.hint small{display:block;color:#bfced1;font-size:14px;margin-top:7px}.footer{position:absolute;bottom:3.2%;left:7%;right:7%;display:flex;align-items:center;gap:12px}.cta{flex:1;border:1px solid #76e7ef;background:#62e3f1;color:#0b252e;font-weight:700;font-size:20px;letter-spacing:.07em;padding:11px 8px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.restart{border:1px solid #7c919b66;background:#14202cc9;color:#d5e1e5;font-size:20px;width:43px;height:47px}.result{position:absolute;inset:0;background:#06121ddc;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;backdrop-filter:blur(6px)}.result[hidden]{display:none}.result .eyebrow{color:#6ce6f3;font-size:14px;letter-spacing:.23em}.result h1{font-size:48px;line-height:.95;letter-spacing:.05em;margin:18px 0}.result p{font-size:20px;color:#bccbd0;max-width:250px;line-height:1.3;margin:0 0 28px}.result .cta{flex:none;width:100%;margin:8px 0}.result .again{background:transparent;border:0;color:#d2e0e5;font-size:18px;padding:15px}.caption{text-align:center;color:#8a9aa4;font:12px/1.5 Arial,sans-serif;margin:12px 0 0} @media(max-width:600px){body{padding:0;display:block;min-height:100dvh}.shell{width:100%;max-width:none}.phone{width:100%;height:100svh;height:100dvh;aspect-ratio:auto;border-radius:0;border:0;box-shadow:none}.preview-label,.caption{display:none}.header{top:max(4%,calc(env(safe-area-inset-top) + 8px))}.footer{bottom:max(3.2%,calc(env(safe-area-inset-bottom) + 8px))}}@media(max-width:600px) and (max-height:680px){.node{height:15%}.header{top:max(3%,calc(env(safe-area-inset-top) + 6px))}.brief{top:11.5%}}@media(prefers-reduced-motion:reduce){.node.captured{animation:none}}
.intro-tools{position:absolute;top:21.5%;left:7%;right:7%;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.intro-tools span{font-size:12px;letter-spacing:.12em;color:#6befff;background:#081a24d9;padding:5px 8px}.intro-tools button{pointer-events:auto;border:1px solid #acc5ce77;background:#102432;color:#eafaff;padding:7px 10px;font-size:14px}.intro-tools [hidden],.footer [hidden]{display:none}.phone[data-intro="true"] .footer .install{display:none}.node:disabled{cursor:default}.hint{bottom:12.5%;font-size:19px}.hint small{font-size:14px}.node[aria-pressed="true"] .ring{border-color:#fff;box-shadow:0 0 24px #67eafa}.phone{container-type:inline-size}.brand{font-size:clamp(18px,6.4cqw,25px);white-space:nowrap}.brand span{font-size:clamp(10px,3.3cqw,13px);white-space:nowrap}.sector{font-size:clamp(10px,3cqw,12px);white-space:nowrap}.sector b{font-size:clamp(15px,5.1cqw,20px)}.brief strong{font-size:clamp(16px,5.4cqw,21px)}.timer{font-size:clamp(21px,6.7cqw,26px)}.hint{font-size:clamp(15px,4.9cqw,19px)}.hint small{font-size:clamp(11px,3.6cqw,14px)}.footer .cta{font-size:clamp(15px,5.1cqw,20px);white-space:nowrap}.node .count{font-size:clamp(19px,6.1cqw,24px)}.node .name{font-size:clamp(10px,3.1cqw,12px)}#field{z-index:1}#nodes{position:absolute;inset:0;z-index:2;pointer-events:none}.node{pointer-events:auto;width:26%;height:17%;appearance:none;overflow:visible}.node img{left:2%;top:24%;width:96%;height:74%;object-fit:contain;object-position:center;overflow:visible;clip-path:none}.node .ring{top:72%;height:25%}.node .count{top:0}.node .name{bottom:-8%}#gesture{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}.header,.brief,.progress,.intro-tools,.hint,.footer{z-index:4}.result{z-index:5}@media(max-width:600px) and (max-height:680px){.node{height:15%}} .brand{display:flex;align-items:center;gap:8px;font-size:clamp(16px,5.1cqw,20px);letter-spacing:.07em}.brand-logo{width:clamp(32px,10cqw,40px);height:auto;aspect-ratio:1;object-fit:contain;border-radius:8px;flex-shrink:0}.brand .brand-copy{line-height:1}.brand .brand-copy span{font-size:clamp(8px,2.5cqw,10px);letter-spacing:.17em;margin-top:6px}