:root{color-scheme:dark;--ink:#10223d;--muted:#adbad4;--gold:#ffdc77;--panel:#172b47;--cyan:#69e7ed}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font:700 15px/1.35 ui-rounded,'Trebuchet MS',Arial,sans-serif;color:#f5f8ff;background:#0b172d}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:1px solid #ffffff30;color:inherit;background:#243c60;border-radius:15px;min-height:44px;padding:10px 16px;box-shadow:inset 0 2px #ffffff13,0 3px #071428;touch-action:manipulation}button:active{transform:translateY(2px);box-shadow:inset 0 1px #ffffff15}button:focus-visible,a:focus-visible{outline:3px solid #ffda69;outline-offset:3px}button.primary{color:#102b30;background:linear-gradient(#ffe490,#ffbf4e);border-color:#ffe09a;box-shadow:inset 0 2px #fff8c5,0 4px #b06d25;font-weight:900}button:disabled{opacity:.5;cursor:default}a{color:#fff;text-decoration:none}[hidden]{display:none!important}.screen{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 20%,#25547055,transparent 65%),radial-gradient(ellipse at 0 100%,#44357677,transparent 60%),#0d1b32}.screen:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#8dbbdc25 1px,transparent 1px);background-size:28px 28px}.topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 18px;z-index:1}.home-link,.icon-btn{display:grid;place-items:center;width:44px;min-width:44px;height:44px;border:1px solid #ffffff30;border-radius:14px;background:#ffffff0c;font-size:22px;padding:0}.brand{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:#b0c5e2}.badge{border-radius:22px;padding:7px 13px;background:#08182b85;border:1px solid #ffffff22;color:var(--gold);font-size:12px}.home-layout{position:absolute;inset:65px 5% 22px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4%;max-width:1050px;margin:auto}.intro{text-align:center;z-index:1}.eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--cyan)}h1{font-size:clamp(45px,6.8vw,82px);line-height:.95;letter-spacing:-2px;font-weight:1000;margin:18px 0;color:#fff4c7;text-shadow:0 5px #9b4b28,3px 0 #142035,-3px 0 #142035,0 -3px #142035,0 10px 20px #0005;transform:rotate(-3deg)}h1 span{display:block;color:#67e7f0;text-shadow:0 5px #1b768a,3px 0 #142035,-3px 0 #142035,0 -3px #142035,0 10px 20px #0005}.tagline{color:#c7d5e9;font-size:14px;margin:18px auto 14px;max-width:300px}.record{display:inline-block;color:var(--gold);font-size:13px;margin:10px 0 18px}#start{display:block;margin:0 auto 18px;width:240px}.home-art{height:min(70vh,480px);min-height:170px;max-width:420px;position:relative;z-index:1;transform:rotate(5deg);filter:drop-shadow(0 20px 25px #0005)}#art{width:100%;height:100%}.home-foot{font-size:11px;color:#a7b9d6;margin:12px 0 0}#challengeNote{color:var(--gold);font-size:12px;margin:8px}.play{display:flex;flex-direction:column;padding:8px 12px max(8px,env(safe-area-inset-bottom));gap:6px}.hud{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:780px;width:100%;margin:0 auto;position:relative;flex:none}.hud-title{font-size:14px;color:var(--gold)}#modeLabel{display:block;color:#a9bdd8;font-size:10px;margin-top:2px}.hud .badge{font-variant-numeric:tabular-nums;color:#d7e3f4}.arena{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 106px;grid-template-rows:minmax(0,1fr) auto;column-gap:12px;row-gap:8px;flex:1;min-height:0;max-width:650px;margin:0 auto;width:100%}.board-box{grid-column:1;grid-row:1;position:relative;display:flex;justify-content:flex-end;min-height:0;min-width:0}#board{height:100%;width:auto;max-width:100%;aspect-ratio:1/2;border:2px solid #6b96ba80;border-radius:10px;background:#09162a;box-shadow:0 0 0 5px #ffffff07,0 12px 25px #0003;touch-action:none}.stats{grid-column:2;grid-row:1;min-height:0;display:flex;flex-direction:column;gap:10px}.stat{border:1px solid #789fcd30;border-radius:14px;background:linear-gradient(145deg,#243f5b,#152843);padding:11px 12px;box-shadow:inset 0 1px #ffffff10}.stat small{display:block;color:#aec7e1;font-size:10px;letter-spacing:1.4px}.stat strong{font-size:26px;line-height:1.3;color:#f6f5e6;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}#score{font-size:clamp(17px,3vw,26px);color:var(--gold)}#next{display:block;width:100%;height:67px;margin-top:5px}.meter{height:5px;background:#081a2d;border-radius:6px;margin-top:8px;overflow:hidden}.meter i{display:block;height:100%;background:#67e7ed;transition:width .2s}.keys-note{font-size:11px;font-weight:500;color:#a9bbd5;margin:auto 0 0;line-height:1.65}.controls{grid-column:1/3;grid-row:2;display:flex;justify-content:center;gap:7px;max-width:500px;width:100%;margin:auto;position:relative}.controls button{flex:1;min-width:44px;padding:8px 3px;height:54px;font-size:23px;background:linear-gradient(#294e71,#1a3554);border-color:#729fbd55;border-radius:13px;user-select:none;touch-action:none}.controls button small{display:block;font-size:8px;line-height:1.2;letter-spacing:.7px;color:#bdcfe2}.controls button[data-control=turn]{color:var(--gold);background:linear-gradient(#6d542c,#463c2c);border-color:#d9b27166}.controls button[data-control=drop]{color:#82f7dc;background:linear-gradient(#23545e,#183b49);border-color:#5abca966}#toast{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);pointer-events:none;font-size:clamp(21px,4vw,35px);font-weight:1000;text-align:center;white-space:pre-line;color:#fff5b4;text-shadow:0 3px #1b223c,2px 0 #1b223c,-2px 0 #1b223c;opacity:0;z-index:2}#toast.show{animation:toast 1s both}@keyframes toast{0%{opacity:0;translate:0 12px;scale:.85}20%,70%{opacity:1;translate:0 0;scale:1}100%{opacity:0;translate:0 -12px}}dialog{width:min(420px,calc(100% - 28px));max-height:calc(100% - 28px);overflow:auto;border:1px solid #a6cce255;border-radius:24px;background:linear-gradient(135deg,#243e5b,#172b43);color:#f4f7fc;box-shadow:0 20px 90px #0009;padding:24px;text-align:center}dialog::backdrop{background:#071325c9;backdrop-filter:blur(5px)}dialog h2{font-size:27px;margin:6px 0 12px;color:#ffe5a1}dialog p{color:#c2d2e5;font-size:14px}dialog button{width:100%;margin-top:9px}dialog .row{display:flex;gap:9px}dialog .row button{flex:1}#resultScore{font-size:46px;color:#ffe19a;line-height:1.2;font-weight:1000}#resultMeta{font-size:12px}#resultProgress{height:8px;border-radius:6px;background:#0a1e34;overflow:hidden;margin:14px 0}#resultProgress i{display:block;height:100%;background:#71e5d6}#help ul{text-align:left;padding-left:20px;color:#d0ddee;font-size:13px;line-height:1.7}#help kbd{background:#ffffff12;border:1px solid #ffffff25;border-radius:5px;padding:1px 4px}#live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.cover .topbar,.cover .tagline,.cover .record,.cover .home-foot,.cover #challengeNote{display:none}.cover .home-layout{inset:30px 6%;grid-template-columns:1fr 1.1fr}.cover h1{font-size:clamp(60px,8vw,110px)}.cover .eyebrow{font-size:18px}.cover .home-art{height:90%;max-height:none;max-width:none}.cover .intro:after{content:'SUSUN. LENGKAPI. ULANGI.';display:block;font-size:14px;letter-spacing:2px;margin-top:35px;color:#d0e9f1}.icon .home-layout{display:block;inset:0}.icon .intro,.icon .home-art{display:none}.icon #iconArt{display:block!important;width:100%;height:100%}#iconArt{display:none}
@media(max-width:650px) and (min-height:481px){.topbar{padding:8px 12px}.brand{display:none}.home-layout{inset:58px 5% 10px;display:flex;flex-direction:column;justify-content:center;gap:0}.intro{display:contents}.eyebrow{order:0;font-size:10px}h1{order:1;font-size:clamp(46px,13vw,62px);margin:9px 0 5px}h1 span{display:inline;margin-left:8px}.home-art{order:2;flex:1;min-height:85px;max-height:260px;width:80%;max-width:285px;transform:rotate(5deg);margin:3px 0}.tagline{display:none}.record{order:3;margin:5px 0 10px}#start{order:4;margin-bottom:9px;flex:none;width:230px}[data-dh-menu]{order:5}.home-foot{order:6;margin:6px 0}#challengeNote{order:3}.arena{column-gap:9px;grid-template-columns:minmax(0,1fr) 92px}.stats{gap:8px}.stat{padding:9px}.stat strong{font-size:23px}.keys-note{font-size:10px}.cover .home-layout{display:grid}.cover .intro{display:block}.cover h1 span{display:block;margin:0}.cover .home-art{height:95%;width:100%;max-width:none;max-height:none}}
@media(min-width:651px), (max-height:480px){.play{padding:10px 20px;gap:8px}.arena{grid-template-columns:minmax(0,1fr) 165px;grid-template-rows:1fr auto;max-width:620px;column-gap:24px}.board-box{grid-row:1/3}.stats{grid-column:2;grid-row:1;gap:8px}.stat{padding:9px 13px}.stat.next-stat{display:flex;align-items:center;gap:8px}.stat.next-stat small{max-width:52px}.stat.next-stat canvas{width:70px!important;height:42px!important;margin:0!important}.controls{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.controls button{height:48px}.controls button[data-control=drop]{grid-column:2/4}.controls button[data-control=left]{grid-column:1;grid-row:1}.controls button[data-control=right]{grid-column:3;grid-row:1}.controls button[data-control=turn]{grid-column:2;grid-row:1}.keys-note{font-size:10px}.home-layout{inset:60px 5% 15px}}
@media(max-height:480px){.topbar{padding:5px 12px}.home-layout{inset:48px 4% 5px;gap:2%;grid-template-columns:1.05fr .95fr}.eyebrow{font-size:9px}h1{font-size:45px;margin:4px 0}.tagline{display:none}.record{margin:10px 0;font-size:11px}#start{margin-bottom:6px;width:200px}.home-foot{display:none}.home-art{height:90%;min-height:0}.play{padding:5px 10px;gap:4px}.hud{max-width:490px}.hud-title{font-size:11px}.arena{max-width:450px;grid-template-columns:minmax(0,1fr) 165px;column-gap:18px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}.stat{padding:6px 8px;border-radius:9px}.stat.next-stat{grid-column:1/3}.stat strong,#score{font-size:20px}.stat small{font-size:8px}.stat.lines-stat{grid-column:1/3}.keys-note{display:none}.controls button{height:44px;padding:4px}.controls{gap:5px}.hud .icon-btn{width:44px;height:44px}.cover h1{font-size:70px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition:none!important}#toast.show{opacity:1}}
.board-box{align-items:center}
.home-art{animation:float 5s ease-in-out infinite}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}}
.cover .home-art,.icon .home-art{animation:none}
@media(prefers-reduced-motion:reduce){.home-art{animation:none}}