*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b1022;color:#f1f7ff;font-family:system-ui,sans-serif}body{display:flex;justify-content:center;background:radial-gradient(ellipse at top,#23345b,#0b1022 70%)}main{width:min(100%,510px);height:100dvh;display:flex;flex-direction:column;padding:8px 12px max(8px,env(safe-area-inset-bottom));gap:7px}header{display:flex;justify-content:space-between;align-items:center;gap:6px;height:44px;flex-shrink:0}header b{font-size:17px;letter-spacing:-.5px}em{color:#85ffe0;font-style:normal}a{color:#b9cbea;text-decoration:none;font-size:13px}button{min-height:44px;border:1px solid #465675;border-radius:12px;background:#23304d;color:#f5f8ff;font-weight:750;font-size:13px;padding:8px 12px;cursor:pointer;touch-action:manipulation}button:hover{background:#34496e}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #ffda86}#hud{display:flex;align-items:center;justify-content:space-between;gap:8px;height:47px;flex-shrink:0}#hud span{font-size:10px;letter-spacing:1px;color:#a8b7d6}strong{display:block;font-size:21px;color:#fff;letter-spacing:0}#board{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}canvas{max-width:100%;max-height:100%;aspect-ratio:7/10;object-fit:contain;border:1px solid #354263;border-radius:18px;touch-action:none;background:#10182f}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0b10228a;border-radius:18px}#overlay[hidden]{display:none}#panel{width:min(94%,355px);padding:24px;text-align:center;background:linear-gradient(145deg,#253857,#142039);border:1px solid #63779a;border-radius:24px;box-shadow:0 20px 60px #0008}#panel h1{font-size:38px;line-height:1;margin:8px 0 18px;letter-spacing:-2px}#panel p{color:#c7d5eb;font-size:14px;line-height:1.5}#panel button{margin:4px}#panel .primary{display:block;width:100%;font-size:19px;background:#85ffe0;color:#0a2931;border:0;height:52px}#panel .mark{font-size:42px;color:#85ffe0}#hint{font-size:12px;text-align:center;color:#c4d3ee;min-height:18px;flex-shrink:0}footer{display:flex;gap:8px;flex-shrink:0}footer button{flex:1}#pulse{color:#ffdd8c}@media(max-height:500px) and (min-width:600px){main{max-width:900px;display:grid;grid-template-columns:220px 1fr 180px;grid-template-rows:50px 1fr 50px;height:100dvh}header{grid-column:1;flex-wrap:wrap;height:auto}header b{order:-1;width:100%}#hud{grid-column:3;grid-row:1/3;flex-direction:column;height:auto;justify-content:center}#board{grid-column:2;grid-row:1/4;height:100%}footer{grid-column:3;grid-row:3}footer button{font-size:10px;padding:4px}#hint{grid-column:1;grid-row:3}#panel{padding:12px}#panel h1{font-size:26px;margin:5px}#panel p{margin:5px}#panel .mark{display:none}}
@media(max-height:500px) and (min-width:600px){main{width:min(100%,900px);grid-template-columns:180px minmax(0,1fr) 160px}#overlay{position:fixed;inset:8px 190px;z-index:5}#panel{max-height:100%;overflow:auto}#panel p:last-child{font-size:11px}}
#panel .primary{margin:4px 0}#panel{overflow-x:hidden}

#panel{max-height:100%;overflow-y:auto;padding:18px}.skin{display:flex;align-items:center;width:100%;text-align:left;gap:16px}.skin small{display:block;color:#ffdc86;margin-top:3px}.swatch{display:block;width:27px;height:27px;border-radius:50%;background:#eafff9;box-shadow:inset -5px -5px 0 #0002}.swatch.gold{background:linear-gradient(130deg,#fff4b0,#ffc328,#b57713)}.swatch.crystal{border-radius:3px;transform:rotate(45deg);background:linear-gradient(130deg,#fff,#74dcff,#bd93ff)}.swatch.rainbow{background:conic-gradient(#ff82ab,#ffe46b,#77ffd0,#78baff,#d396ff,#ff82ab)}#wallet-status{font-size:12px}#hud{gap:5px}

#abilities{display:flex;gap:5px;flex-shrink:0}#abilities button{flex:1;padding:7px 3px;font-size:11px;color:#ffe0a1}.affordable{border-color:#85ffe0!important}#freeze{color:#a4eaff!important}@media(max-height:500px) and (min-width:600px){#abilities{grid-column:1;grid-row:2;flex-direction:column;justify-content:center}#abilities button{flex:0}}

#abilities button::before{content:'';display:inline-block;width:12px;height:12px;margin-right:3px;vertical-align:-2px;background-repeat:no-repeat;background-size:contain}#pulse::before{border:2px solid #ffe0a1;border-radius:50%;box-shadow:0 0 0 2px #ffe0a144;transform:scale(.75)}#bomb::before{background:#ffb27b;border-radius:50%;border-top:3px solid #f8e6ac;transform:rotate(-25deg)}#freeze::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v16M1 4l14 8M1 12L15 4' stroke='%23a4eaff' stroke-width='2'/%3E%3C/svg%3E")}@media(max-width:350px){#abilities button{font-size:10px}}

#top{font-size:10px;padding:2px 6px;color:#ffe0a1}#hud strong{font-size:18px}#hud #pause{padding:6px;font-size:11px}dialog{width:min(94vw,440px);max-height:85dvh;overflow:auto;background:#172640;color:#eef6ff;border:1px solid #85ffe0;border-radius:20px;padding:20px}dialog::backdrop{background:#050b19c9}dialog p{font-size:13px;line-height:1.5;color:#c7d5eb}dialog li{padding:8px 0;font-size:14px}dialog button{margin:3px}

#name-label{display:block;margin:12px 0}#name-label[hidden]{display:none}#rank-name{display:block;width:100%;padding:12px;font:inherit;border-radius:8px;margin:6px 0}#name-label small{display:block;font-size:12px;color:#c7d5eb}

#hud span,#top{min-width:0}#hud strong{overflow:hidden;text-overflow:ellipsis}@media(max-width:380px){#hud strong{font-size:14px}}

#close-ranks{position:sticky;top:0;z-index:2;display:block;margin-left:auto;min-height:44px;background:#243c59;border:1px solid #85ffe0}dialog{max-height:85vh;max-height:85dvh}#rank-status{overflow-wrap:anywhere}