.pq-shell{--pq:#9ce6cb;color:#e7f3fa;border:1px solid #a5c9df30;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 10% 0,#9eeacb12,transparent 60%),#0e1925;margin:28px 0}
.pq-shell[data-kind=match]{--pq:#f5adcf;background:radial-gradient(ellipse at 10% 0,#db5a9c22,transparent 60%),#1a142b}.pq-shell[data-kind=blocks]{--pq:#82deff;background:radial-gradient(ellipse at 60% 0,#3882cb22,transparent 60%),#0b1729}.pq-shell[data-kind=fusion]{--pq:#f2d49b;background:radial-gradient(ellipse at 40% 0,#cb923822,transparent 60%),#211e21}.pq-shell[data-kind=reversi]{--pq:#b8dfc5;background:radial-gradient(ellipse at 40% 0,#579a7822,transparent 60%),#122524}.pq-shell[data-kind=naval]{--pq:#83d2f4;background:radial-gradient(ellipse at 40% 0,#389dcb22,transparent 60%),#102535}.pq-shell[data-kind=three]{--pq:#d3b2ff;background:radial-gradient(ellipse at 40% 0,#9566d122,transparent 60%),#1b1730}
.pq-toolbar{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;padding:22px 26px;border-bottom:1px solid #a5c9df20}.pq-toolbar>span{font-size:10px;letter-spacing:2px;color:var(--pq)}.pq-toolbar b{display:block;font-size:18px;letter-spacing:0;color:#e7f3fa;margin-top:7px}.pq-toolbar>div,.pq-controls{display:flex;gap:10px;flex-wrap:wrap}.pq-shell button{font:inherit;color:#e4edf5;background:#c8e6f00a;border:1px solid #bbdff02b;border-radius:11px;padding:11px 15px;cursor:pointer;line-height:1.4;transition:background .18s,transform .18s}.pq-shell button:hover:not(:disabled){background:#c8e6f018;border-color:var(--pq)}.pq-shell button:disabled{cursor:default}.pq-shell :is(a,button,[tabindex]):focus-visible{outline:2px solid var(--pq);outline-offset:4px}.pq-toolbar button{font-size:12px}
.pq-dashboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:24px 28px 12px}.pq-dashboard>div{padding:12px 0;min-width:0}.pq-dashboard span{font-size:10px;letter-spacing:1.4px;display:block;color:#9bb4c9;margin-bottom:9px}.pq-dashboard b{font-size:clamp(18px,3vw,28px);font-variant-numeric:tabular-nums;color:var(--pq);overflow-wrap:anywhere}.pq-shell #pq-status{font-size:14px;line-height:1.7;color:#abc2d4;min-height:48px;margin:8px 28px 20px;max-width:85ch}.pq-arena{position:relative;margin:0 28px;padding:24px;background:#020b132e;border:1px solid #c5e1f016;border-radius:20px;min-width:0}.pq-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:7px;width:100%;max-width:570px;margin:auto}.pq-shell button.pq-cell{aspect-ratio:1;padding:0;display:grid;place-items:center;min-width:0;border-radius:12px;font-weight:700;font-size:clamp(17px,3.3vw,33px);position:relative}.pq-shell .pq-cell.selected{outline:3px solid #fff;outline-offset:1px}.pq-shell .pq-cell.hint{outline:3px dashed var(--pq);outline-offset:1px}.pq-controls{justify-content:center;margin:24px}.pq-controls button{min-width:48px;min-height:46px}.pq-tip{font-size:13px;line-height:1.85;color:#a5bed1;margin:0 28px 28px;max-width:95ch}
.pq-shell button.gem{border-color:#fff2;box-shadow:inset 0 2px 2px #ffffff20,inset 0 -5px 12px #0003;text-shadow:0 2px 3px #0006;transition:transform .22s,opacity .22s}.gem-0{color:#e5afff!important;background:linear-gradient(145deg,#8854c0,#47315f)!important}.gem-1{color:#a8eaff!important;background:linear-gradient(145deg,#388ba3,#264365)!important}.gem-2{color:#ffe8a0!important;background:linear-gradient(145deg,#b6893e,#624622)!important}.gem-3{color:#b3f0cc!important;background:linear-gradient(145deg,#38946c,#244e40)!important}.gem-4{color:#ffb6ce!important;background:linear-gradient(145deg,#bb4c7f,#612d56)!important}.gem-5{color:#e2dbff!important;background:linear-gradient(145deg,#5a70b8,#36395f)!important}.gem.pop{transform:scale(.4);opacity:.2}
.pq-fusion{max-width:450px;gap:12px;touch-action:none;background:#dcc6a00c;padding:12px;border-radius:18px}.pq-number{display:grid;place-items:center;aspect-ratio:1;border:1px solid #c9b89125;border-radius:14px;font-size:clamp(21px,4vw,38px);font-weight:800;color:#e9dcc4;background:#a5936f0c;animation:pq-appear .18s ease-out}.pq-number[data-value="2"]{background:#526663;color:#d1f2e9}.pq-number[data-value="4"]{background:#676747;color:#f3e9be}.pq-number[data-value="8"]{background:#886640}.pq-number[data-value="16"]{background:#a06b47}.pq-number[data-value="32"]{background:#a85d54}.pq-number[data-value="64"]{background:#a24e65}.pq-number[data-value="128"],.pq-number[data-value="256"]{background:#8461a5}.pq-number[data-value="512"],.pq-number[data-value="1024"],.pq-number[data-value="2048"]{background:#d6ad59;color:#282328}
.pq-block-layout{display:flex;align-items:flex-start;justify-content:center;gap:26px}.pq-blocks{width:min(100%,300px);flex:0 1 300px;max-width:300px;gap:2px;padding:8px;background:#050f20;border:1px solid #78a3c236;border-radius:10px}.pq-block{display:block;aspect-ratio:1;background:#adcde708;border-radius:3px;box-shadow:inset 0 1px 1px #ffffff0b}.pq-block.v1{background:#52c9e9}.pq-block.v2{background:#f2ce71}.pq-block.v3{background:#b88be0}.pq-block.v4{background:#81dba8}.pq-block.v5{background:#ef8ca8}.pq-block.v6{background:#8b9deb}.pq-block.v7{background:#eeab71}.pq-block.ghost{opacity:.2;box-shadow:inset 0 0 0 2px #fff}.pq-next{width:130px;font-size:13px;color:#b7d6e3;line-height:1.8;flex-shrink:0}.pq-next>span{font-size:10px;letter-spacing:1.6px}.pq-next .pq-grid{margin:20px 0 25px;gap:3px;max-width:110px}.pq-next p{margin:10px 0}
.pq-shell .reversi-cell{background:#244b40;border:1px solid #b2dcba19;border-radius:5px!important}.pq-reversi{gap:4px;padding:12px;border:8px solid #466452;border-radius:16px;background:#17372d}.pq-disc{display:block;width:78%;height:78%;border-radius:50%;box-shadow:0 3px 3px #0006,inset 0 2px 2px #fff5;animation:pq-disc .4s ease-out}.pq-disc.light{background:radial-gradient(circle at 35% 25%,#f0f2d9,#a9bba9)}.pq-disc.dark{background:radial-gradient(circle at 35% 25%,#536071,#111e2c)}.pq-dot{width:14%;height:14%;border-radius:50%;background:#b4dfc5aa}.pq-three{max-width:420px;gap:14px}.pq-shell .pq-mark{font-size:clamp(45px,8vw,75px);border:1px solid #c9b6e73b;background:#b5a0df08;aspect-ratio:1;border-radius:18px}.mark-x{color:#d5b8ff!important}.mark-o{color:#93e3da!important}.pq-oceans{display:grid;grid-template-columns:1fr 1fr;gap:24px}.pq-oceans section{min-width:0}.pq-oceans h3{font-size:16px;margin:0 0 18px;color:#cce7ed}.pq-oceans .pq-grid{gap:4px}.pq-shell .pq-sea{aspect-ratio:1;padding:0;display:grid;place-items:center;border:1px solid #8bc4df20;border-radius:6px;font-size:22px;background:linear-gradient(145deg,#163f54,#173143);color:#b5e4ed}.pq-sea.ship{background:#44606b;color:#bfd8dd}.pq-sea.hit{background:#ad5c5940;color:#ffc2ad}.pq-sea.miss{color:#9cb5c4;background:#31506333}
#pq-overlay{position:absolute;inset:0;z-index:3;background:#08121aed;backdrop-filter:blur(10px);border-radius:20px;padding:24px;overflow:auto;display:grid;place-items:center}#pq-overlay[hidden]{display:none}.pq-result{text-align:center;max-width:430px;margin:auto;display:grid;justify-items:center;gap:16px;padding:16px 0}.pq-result>span:not(.pq-medal){font-size:10px;letter-spacing:2px;color:var(--pq)}.pq-result h2{font-size:clamp(26px,4vw,38px);line-height:1.15;margin:0;color:#edf4fa}.pq-result p{font-size:14px;line-height:1.8;color:#b6cedf;margin:0}.pq-result strong{font-size:38px;color:var(--pq)}.pq-result small{font-size:14px}.pq-result a{color:#b6cedf;font-size:13px}.pq-medal{font-size:70px;line-height:1;color:var(--pq);text-shadow:0 0 40px var(--pq)}.pq-result button{background:var(--pq);color:#13232e;font-weight:700}
#puzzle-game:fullscreen{background:#0a1522;overflow:auto;padding:15px;display:grid;align-items:start;justify-items:center}#puzzle-game:fullscreen .pq-shell{width:min(1200px,100%);margin:0}#puzzle-game:fullscreen .pq-grid:not(.pq-blocks){max-width:min(65vh,700px)}
@keyframes pq-appear{from{opacity:.5;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes pq-disc{from{transform:rotateY(80deg)}to{transform:rotateY(0)}}
@media(max-width:760px){.pq-toolbar{padding:20px}.pq-dashboard{padding:18px 20px 8px;gap:10px}.pq-arena{padding:16px;margin:0 16px}.pq-shell #pq-status{margin:8px 20px 20px}.pq-tip{margin:0 20px 24px}.pq-toolbar>div{gap:8px}.pq-toolbar button{padding:9px 11px}.pq-oceans{grid-template-columns:1fr}.pq-oceans section:last-child .pq-grid{max-width:280px}.pq-block-layout{gap:12px}.pq-next{width:80px}.pq-next .pq-grid{max-width:75px}.pq-dashboard span{font-size:9px;letter-spacing:.8px}}
@media(max-width:420px){.pq-arena{padding:10px;margin:0 10px}.pq-grid{gap:4px}.pq-shell button.pq-cell{border-radius:7px}.pq-dashboard{padding-left:16px;padding-right:16px}.pq-fusion{gap:7px;padding:7px}.pq-reversi{border-width:4px;padding:6px}.pq-number{font-size:24px;border-radius:10px}.pq-block-layout{gap:8px}.pq-next{width:62px}.pq-blocks{padding:4px;gap:1px}.pq-toolbar>div{display:grid;grid-template-columns:1fr 1fr;width:100%}.pq-controls{gap:8px;margin:20px 12px}.pq-controls button{font-size:12px;padding:10px;min-width:38px}.pq-tip{font-size:12px}.pq-oceans{gap:24px}}
@media(prefers-reduced-motion:reduce){.pq-shell *{animation:none!important;transition:none!important}}

/* Keep the block well and next-piece preview together. */
.pq-block-layout{max-width:480px;margin:0 auto}.pq-blocks{margin:0}