body{background:#26351d}body[data-view="profile"],body[data-view="home"]{overflow-x:hidden}.front-stage{width:min(100%,560px);min-width:0;height:100svh;min-height:600px;max-height:none}.front-screen{overflow:hidden}.front-world-label{font-size:7px;letter-spacing:2px}.front-side-note{display:none}body[data-view="story"] .front-screen{display:none}body[data-view="profile"] .front-logo{top:8%;transform:translateX(-50%) rotate(-2deg) scale(.76);transform-origin:top center;max-width:350px}.registration-panel{position:absolute;bottom:max(5.5%,env(safe-area-inset-bottom,0px));left:7%;right:7%;padding:19px 21px 15px;background:linear-gradient(150deg,#65452bf0,#302d1bf2);border:2px solid #d5b579b8;border-radius:23px;box-shadow:inset 0 2px 0 #f5d09155,0 7px 0 #3024148a,0 14px 35px #14261355;backdrop-filter:blur(12px);z-index:2}.registration-eyebrow{font-size:6px;font-weight:900;letter-spacing:1.3px;color:#ebcd94;text-align:center;margin:0 0 6px}.registration-panel h1{font:800 25px/1.2 Baloo,system-ui;letter-spacing:-.3px;text-align:center;margin:0 0 4px;text-shadow:0 2px 0 #322515}.registration-intro{font-size:10px;color:#d8c7a4;text-align:center;line-height:1.6;margin:0 0 16px}.form-field{margin:0 0 11px}.form-field label{display:block;font-size:10px;font-weight:900;margin:0 0 5px;color:#ffebbd;letter-spacing:.3px}.form-field input{width:100%;height:43px;padding:10px 12px;border:1px solid #c3a16699;border-radius:9px;background:#fff8e9;color:#483c2b;font:700 16px/1.2 Nunito,system-ui;outline-offset:2px;box-shadow:inset 0 2px 4px #3a2b1915}.form-field input::placeholder{color:#8f8067;font-weight:500;font-size:13px}.form-field input:focus{outline:2px solid #ffe3a0;border-color:#ffe3a0}.form-field input[aria-invalid="true"]{border-color:#ff997f;outline-color:#ff997f}.field-error{display:block;font-size:9px;color:#ffbda3;line-height:1.5;margin-top:4px}.registration-submit{width:100%;height:50px;margin-top:5px;display:flex;align-items:center;justify-content:center;gap:17px;background:linear-gradient(150deg,#ffe59d,#edb25b);color:#31551f;border:2px solid #ffe9b1;border-radius:13px;box-shadow:inset 0 -4px 0 #c58a3a,0 4px 0 #3c2c1a;transition:filter .15s,transform .15s}.registration-submit-label,.registration-submit span{font:800 26px/1 Baloo,system-ui;letter-spacing:-.5px;text-shadow:0 1px 0 #fff3cf}.registration-submit svg{width:20px;height:20px}.registration-submit:hover{filter:brightness(1.07);transform:translateY(-1px)}.registration-submit:disabled{opacity:.7;cursor:wait;transform:none}.registration-note{font-size:8px;line-height:1.6;color:#c5b794;text-align:center;margin:13px 0 0}.registration-feedback{font-size:10px;line-height:1.6;color:#ffd5a2;background:#211e164d;border:1px solid #c4a16855;border-radius:8px;padding:9px;margin:5px 0 10px}.story-screen{position:relative;width:100%;height:100svh;min-height:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#23332b,#111b16 72%);overflow:hidden;isolation:isolate}.story-frame{position:relative;width:min(100vw,calc(100svh * .5625));height:min(100svh,calc(100vw * 1.77777778));flex-shrink:0;box-shadow:0 0 80px #070f0ac9}.story-frame>img{width:100%;height:100%;object-fit:contain;display:block}.story-page{position:absolute;top:12px;left:12px;padding:6px 10px;background:#17231cbb;backdrop-filter:blur(6px);color:#fff1c1;border:1px solid #e5c87977;border-radius:15px;font-size:10px;font-weight:900;letter-spacing:1px}.story-home{position:absolute;top:11px;right:12px;width:33px;height:33px;border-radius:11px;background:#352a1ecc;color:#ffe8ad;border:1px solid #d9b771b3;box-shadow:0 3px 0 #171f1599;display:grid;place-items:center}.story-home svg{width:17px;height:17px}.story-next{position:absolute;bottom:max(13px,env(safe-area-inset-bottom,0px));right:13px;display:flex;align-items:center;gap:13px;height:46px;padding:0 18px;background:linear-gradient(145deg,#ffe498,#edb75e);border:2px solid #fff0bc;border-radius:14px;color:#30551f;box-shadow:inset 0 -3px 0 #c18b3d,0 4px 0 #3e321b,0 5px 17px #101b1477;font-family:Baloo;font-size:23px;font-weight:800;text-shadow:0 1px 0 #fff7d4}.story-next svg{width:19px;height:19px}.story-next:hover{filter:brightness(1.1)}.story-next:active{transform:translateY(2px)}.story-back{position:absolute;left:13px;bottom:max(13px,env(safe-area-inset-bottom,0px));width:42px;height:42px;background:#342a1bd9;border:1px solid #deb877;border-radius:12px;display:grid;place-items:center;color:#ffe3a6;box-shadow:0 3px 0 #172015}.story-back svg{width:20px;height:20px;transform:rotate(180deg)}
/* Seluruh layar permainan selalu berformat portrait, termasuk di desktop. */
#game-screen{max-width:500px;margin:auto;padding:0 15px;--board-w:min(420px,calc(100vw - 48px),calc((100svh - 320px)*.82353))}#game-screen .intro-panel,#game-screen .chain-panel,#game-screen .header-center{display:none}#game-screen .topbar{height:74px;border:0;gap:10px}#game-screen .brand{gap:7px}#game-screen .brand-mark{width:39px;height:39px;border-width:2px}#game-screen .brand-mark img{width:36px}#game-screen .brand-words{font-size:24px}#game-screen .brand-words small{font-size:5px;letter-spacing:1.8px;margin-top:6px}#game-screen .top-actions{gap:8px}#game-screen .help-link{margin:0;padding:8px 0}#game-screen .help-link span{display:none}#game-screen .help-link svg{width:18px;height:18px}#game-screen .stone-icon{width:33px;height:35px;border-radius:12px}#game-screen .stone-icon svg{width:17px;height:17px}#game-screen .game-layout{display:block;margin:6px 0 0;max-width:none}#game-screen .game-column{width:calc(var(--board-w) + 28px);margin:auto}#game-screen .game-hud{height:89px;padding:0 5px}#game-screen .score-plaque{width:calc((var(--board-w) - 62px)/2);height:67px;border-width:2px;margin-top:3px}#game-screen .plaque-label{font-size:8px;margin-top:7px;gap:7px;letter-spacing:1px}#game-screen .score-value{font-size:29px;margin-top:2px}#game-screen .next-holder{height:87px;width:80px;border-width:2px;top:-6px}#game-screen .next-holder>span{font-size:8px;margin-top:4px}#game-screen .next-well{width:54px;height:54px;margin-top:5px}#game-screen .next-well img{width:38px;height:41px}#game-screen .board-frame{width:calc(var(--board-w) + 28px);padding:12px 14px 15px;border-radius:28px 28px 26px 26px}#game-screen .board-inner{border-radius:17px 17px 20px 20px}#game-screen .horn{transform:scale(.8) rotate(-9deg);transform-origin:center center;left:-9px;top:-17px}#game-screen .horn-right{left:auto;right:-9px;transform:scaleX(-1) scale(.8) rotate(-9deg)}#game-screen .frame-stone{width:11px;top:38px;bottom:15px}#game-screen .frame-bottom{height:11px;font-size:7px}#game-screen .under-board{height:34px;font-size:8px;padding-top:8px}#game-screen .game-actions{padding:2px 4px 0;gap:10px}#game-screen .action-button{height:43px;width:132px;font-size:10px;gap:7px}#game-screen .action-motif{font-size:11px;letter-spacing:1px}#game-screen .mobile-chain{display:block;margin-top:20px;padding:0 2px}#game-screen .mobile-chain-label{display:flex;align-items:center;justify-content:center;gap:8px;font-size:7px;letter-spacing:1.7px;color:#d2bd8d}#game-screen .mobile-chain-label:before,#game-screen .mobile-chain-label:after{content:"";height:1px;background:#d4b57544;flex:1}#game-screen .mobile-chain-label span{font-size:6px;letter-spacing:1px}#mobile-tiers{display:flex;justify-content:space-between;margin-top:8px;gap:2px}#mobile-tiers .mini-tier{position:relative;display:flex;align-items:center;flex-direction:column;gap:2px;padding:0;background:none;width:10%;font-size:7px;color:#d1c39d}#mobile-tiers .mini-tier img{width:24px;height:28px;object-fit:contain}#game-screen .page-footer{border:0;margin:0;padding:19px 0 13px;justify-content:center;font-size:6px;letter-spacing:1.5px}#game-screen .page-footer>span:first-child,#game-screen .footer-triangles{display:none}
@media(max-height:720px){body[data-view="profile"] .front-logo{top:8%;transform:translateX(-50%) rotate(-2deg) scale(.66)}.registration-panel{bottom:5%;padding:14px 18px 12px}.registration-panel h1{font-size:21px}.registration-intro{font-size:9px;margin-bottom:12px}.form-field{margin-bottom:9px}.form-field label{font-size:9px;margin-bottom:4px}.form-field input{height:39px;padding:8px 11px}.registration-submit{height:45px}.registration-submit span{font-size:24px}.registration-note{font-size:7px;margin-top:11px}#game-screen{--board-w:min(420px,calc(100vw - 48px),calc((100svh - 300px)*.82353))}#game-screen .topbar{height:64px}#game-screen .game-hud{height:83px}#game-screen .score-plaque{height:61px}#game-screen .score-value{font-size:25px}#game-screen .next-holder{height:82px}#game-screen .next-well{width:49px;height:49px}#game-screen .mobile-chain{margin-top:17px}}
@media(max-height:600px){.front-stage{min-height:100svh}body[data-view="profile"] .front-logo{top:5%;transform:translateX(-50%) rotate(-2deg) scale(.55)}.registration-panel{bottom:4%;padding:12px 17px 10px}.registration-eyebrow{font-size:5px}.registration-intro{margin-bottom:9px;font-size:8px}.registration-panel h1{font-size:19px}.form-field{margin-bottom:7px}.form-field input{height:36px}.registration-submit{height:42px}.registration-note{margin-top:9px;font-size:6.5px}.field-error{font-size:8px}}
#game-screen{--board-w:min(420px,calc(100vw - 48px),calc((100svh - 345px)*.82353))}#game-screen .game-column{width:min(448px,calc(100vw - 30px))}#game-screen .game-hud{width:calc(var(--board-w) + 28px);margin:auto}#game-screen .board-frame{margin:auto}#game-screen .page-footer{display:none}#game-screen .game-actions .action-button{flex:1;min-width:0;width:auto}#game-screen .game-actions .action-motif{flex-shrink:0}#game-screen .empty-message{padding-top:25px}#game-screen .empty-message strong{font-size:clamp(14px,3.9vw,21px)}#game-screen .empty-message p{font-size:7px}#game-screen .empty-symbol{width:48px;height:55px}#game-screen .empty-symbol img{width:48px}
.story-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;text-align:center;padding:40px;color:#fce6b7;font-size:13px;line-height:1.8;background:#1b2b22}.story-loading button{background:#dfb768;color:#2d481e;border-radius:9px;padding:8px 15px;font-weight:900}.story-next:disabled{opacity:.5;cursor:wait}
