/* Royal Chess v2: original sky-kingdom artwork, tactile pieces, and luminous glass. */
:root{--gold:#ffe08e;--mint:#a2f2f4;--muted:#d6e6ff;--line:#d0e5ff40;--board-light:#ead3ac;--board-dark:#967050;--board-accent:#edc76b}
body{background:#124c94 url('/assets/sky-kingdom-v2.png') center top/cover fixed no-repeat;color:#f4f8ff}
body::before{content:'';position:fixed;inset:0;background:linear-gradient(180deg,#071c4559 0%,#071d506b 45%,#061329e8 100%);pointer-events:none;z-index:-1}
.ambient{display:none}#app{max-width:1440px;padding:24px 44px 125px}header{display:grid;grid-template-columns:auto minmax(130px,1fr) auto auto;gap:20px;align-items:center;position:relative;z-index:2}
.brand{gap:11px}.brand b{font-family:Georgia,serif;font-size:21px;letter-spacing:1.8px;color:#fff1c9;text-shadow:0 3px 5px #07183d}
.brand small{font-size:9px;color:#d0e9ff;letter-spacing:1px}.brand img{width:46px;height:49px;background:linear-gradient(#7cb9ef44,#132c7044);box-shadow:0 4px 12px #091c4955;border-color:#dfefff70}
header nav{gap:8px}.icon-button{background:linear-gradient(145deg,#9bcaff26,#143f8f88);border:1px solid #bad6ff77;border-radius:14px;box-shadow:inset 0 1px 0 #ffffff35,0 5px 12px #05235066;color:#e5f4ff}
.player-badge{justify-self:end;display:flex;gap:10px;align-items:center;max-width:220px;min-height:48px;padding:7px 14px 7px 8px;border-radius:13px;text-align:left;color:#fff;cursor:pointer}
.player-badge b{font-size:12px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.player-badge small{font-size:7px;letter-spacing:1.4px;color:#9fe4ff;display:block;margin-top:5px}.profile-crown{display:grid;place-items:center;background:linear-gradient(140deg,#69c5ff,#3844a5);color:#ffe598;width:32px;height:32px;border-radius:9px;border:1px solid #c3e9ff70}.profile-crown svg{width:20px;height:20px}
.wallet-bar{display:flex;gap:9px}.wallet-currency{display:flex;align-items:center;gap:8px;border:1px solid #afcef978;border-radius:12px;background:linear-gradient(#255faaa6,#12386ca6);box-shadow:inset 0 1px 0 #ffffff20,0 4px 9px #061b4f55;padding:7px 9px;font-size:12px;min-height:43px}.wallet-currency>b{min-width:24px;text-align:left}.wallet-currency>span:last-child{display:grid;place-items:center;width:18px;height:21px;border-radius:5px;color:#efffff;background:linear-gradient(#83e3c7,#219f92);font-size:17px;border:1px solid #b5fff177}
.coin-mark{width:23px;height:23px;display:inline-grid;place-items:center;border-radius:50%;border:2px solid #ffedb4;background:radial-gradient(circle at 35% 25%,#ffe892,#d48724);box-shadow:inset 0 0 0 2px #b46b2744,0 2px 3px #422c3655;color:#fff5bc;font-size:15px;flex-shrink:0}.gem-mark{color:#83e9ff;text-shadow:0 0 9px #68c9ff;display:inline-block;font-size:23px;line-height:1;flex-shrink:0}
main{padding-top:30px}.glass{background:linear-gradient(135deg,#5097d82d,#153b7b8c);border:1px solid #d2eaff80;box-shadow:inset 0 1px 0 #ffffff3a,0 12px 30px #06194044;backdrop-filter:blur(17px)}
.fantasy-hero{min-height:420px;padding:38px 42px 28px;border-radius:28px;position:relative;overflow:hidden;grid-template-columns:1.1fr 1fr;background:linear-gradient(90deg,#123a77e8 0%,#254a8d9e 48%,#3169a555 100%),url('/assets/sky-kingdom-v2.png') right center/cover}
.fantasy-hero::after{content:'';position:absolute;inset:0;border-radius:28px;box-shadow:inset 0 0 60px #c3e9ff15;pointer-events:none}.hero-copy{position:relative;z-index:1}.eyebrow{color:#b6edff;font-size:9px;letter-spacing:2.8px;text-shadow:0 2px 8px #062153}.hero h1{font-size:clamp(47px,4.7vw,69px);font-weight:700;letter-spacing:-1.8px;text-shadow:0 5px 0 #09245133,0 6px 25px #081d5144;color:#fff9e7;margin:18px 0 16px}.hero h1 em{color:#ffdf81}.hero p{color:#e2eeff;font-size:13px;line-height:1.8;text-shadow:0 1px 8px #12284d}.hero-start{margin-top:24px;font-size:14px;min-height:55px;padding:13px 23px;box-shadow:inset 0 2px 0 #fff7c7bb,0 5px 0 #9e6224,0 10px 24px #d6b14444;position:relative}.hero-start>svg:last-child{margin-left:10px}.primary{background:linear-gradient(180deg,#ffe9a6,#f1bf4b);color:#28345d;border:1px solid #fff5cc;box-shadow:inset 0 1px 0 #fff8d9aa,0 3px 0 #b38234,0 6px 16px #0a22542a;font-weight:750}.primary:hover{transform:translateY(-1px)}.primary:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff8d988,0 1px 0 #b38234}.tags{margin-top:24px}.tag{color:#dcecff;background:#1d4b8444;border-color:#cbe6ff33;font-size:8px;padding:8px 10px}.tag svg{color:#ffe09a}
.royal-family{position:relative;height:345px;min-width:0;overflow:visible;transform:none;isolation:isolate}.hero-podium{position:absolute;width:85%;height:78px;bottom:29px;border-radius:50%;background:radial-gradient(ellipse at center,#7aaffb88,#213e9a44 55%,transparent 73%);box-shadow:0 6px 45px #92d7ff77;transform:rotate(-5deg)}.family-piece{position:absolute;filter:drop-shadow(8px 17px 8px #03214f88);animation:royal-idle 6s ease-in-out infinite}.family-piece .piece{width:100%;height:100%}.family-king{height:325px;width:220px;left:-4%;bottom:24px;transform:rotate(-7deg);animation-delay:-1.5s;z-index:1}.family-queen{height:288px;width:210px;right:-1%;bottom:27px;transform:rotate(7deg);animation-delay:-3.1s;z-index:2}.family-kid{height:245px;width:205px;left:26%;bottom:7px;z-index:3;animation-delay:-.5s}.family-spark{position:absolute;color:#fff4ba;text-shadow:0 0 18px #8be8ff;animation:star-glimmer 3s ease-in-out infinite;z-index:4}.family-spark.one{font-size:30px;left:28%;top:21px}.family-spark.two{font-size:18px;right:0;top:102px;animation-delay:-1s}.art-caption{z-index:5;bottom:-14px;background:#3a69ad8a;color:#f1f8ff;border-color:#d7e7ff88;box-shadow:0 5px 17px #05265777;font-size:10px}.art-caption svg{color:#9ff7ff}
.lobby-presence{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:14px 7px;color:#e1f2ff;font-size:10px;line-height:1.7}.live-dot{width:6px;height:6px;border-radius:50%;background:#80f5d1;box-shadow:0 0 12px #62efc8;display:inline-block;margin-right:3px}.lobby-divider{margin:0 5px;color:#b8d0f6}.lobby-names{margin-left:auto;color:#c1dcfb;font-size:9px}.section-heading{margin:19px 0 18px}.section-heading h2{font-size:23px;font-weight:750;letter-spacing:-.7px;text-shadow:0 2px 9px #082656}.section-heading span{color:#d2e5ff}.modes{gap:17px}.mode-card{background:linear-gradient(135deg,#4c99e977,#125f9977);border-color:#c4e4ff88;border-radius:22px;box-shadow:inset 0 1px 0 #ffffff44,0 7px 20px #06275766;padding:23px 25px;transition:transform .2s,box-shadow .2s}.mode-card:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #ffffff55,0 12px 27px #061d5666}.mode-card.featured{background:linear-gradient(135deg,#7d74cd88,#246cc77d);border-color:#c3dbff99}.mode-card:nth-child(2){background:linear-gradient(135deg,#389bf077,#184ea899)}.mode-card:nth-child(3){background:linear-gradient(135deg,#45c7bf66,#1c737b99)}.mode-card h3{color:#fff8e9;font-size:22px;font-weight:750;margin:19px 0 9px;text-shadow:0 3px 0 #15366444}.mode-card p{color:#d5e8ff;font-size:12px}.mode-icon{background:linear-gradient(145deg,#8bddff55,#1361a577);border:1px solid #c1e9ff66;box-shadow:inset 0 1px 0 #fff7,0 5px 13px #07357066;color:#d9f8ff;width:49px;height:49px;border-radius:15px}.featured .mode-icon{background:linear-gradient(145deg,#b7adff55,#5c6fc277);color:#ffeab0}.card-kicker{color:#ffebae;font-size:7px;letter-spacing:1.3px}.secondary{color:#eff8ff;border-color:#b8d8ff77;background:linear-gradient(#386eac40,#194a8055);box-shadow:inset 0 1px 0 #ffffff22}.text-button{color:#ffecb2}.invitation{color:#e1edff;font-size:11px}.monthly-banner{width:100%;display:flex;align-items:center;text-align:left;gap:18px;margin-top:21px;padding:19px 23px;border-radius:19px;color:#fff;background:linear-gradient(115deg,#7250a966,#244792aa);cursor:pointer}.monthly-banner>span:nth-child(2){display:flex;flex-direction:column;gap:4px}.monthly-banner small{font-size:8px;letter-spacing:2px;color:#d3baff}.monthly-banner b{font-family:Georgia,serif;font-size:22px;color:#ffe5ad}.monthly-banner em{font-style:normal;font-size:10px;color:#d2e1fa}.monthly-gem{font-size:48px;color:#a9eaff;filter:drop-shadow(0 0 13px #b28cff);line-height:1}.monthly-cta{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:12px;color:#ffe6ac}.monthly-cta svg{width:17px;height:17px}
footer{border-color:#c6dcff26;color:#c2d5f3;margin-top:28px;font-size:8px}.server-state{color:#abffe5}.bottom-dock{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;justify-content:space-around;align-items:center;gap:10px;padding:8px 16px;border-radius:23px;z-index:30;min-width:340px;background:linear-gradient(#7ca4dd55,#16386ed9);box-shadow:inset 0 1px 0 #fff6,0 15px 40px #03193888}.bottom-dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 21px;border:1px solid transparent;border-radius:15px;background:none;color:#c7e0ff;font-size:9px;min-height:52px;min-width:69px}.bottom-dock button>svg{width:23px;height:23px}.bottom-dock button.active{color:#fff0a7;background:linear-gradient(#d0e3ff38,#85a7d411);border-color:#e8f0ffb3;box-shadow:inset 0 0 18px #e6f0ff26,0 0 18px #c0ddff33}
.match{padding-top:19px}.back-row{margin-bottom:16px}.back-row small{color:#e1ebff;font-size:9px}.match-layout{max-width:1130px;gap:28px;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr)}.player-card{background:linear-gradient(120deg,#508bcb88,#163f7aaa);border-color:#c9e8ff88;box-shadow:inset 0 1px 0 #ffffff35,0 5px 15px #092e5f55;padding:11px 15px;min-height:63px;border-radius:16px}.player-card b{font-size:13px;color:#fff4d7}.player-card small{color:#d4e7ff;font-size:9px}.player-card small.inherited{color:#ffe28a}.avatar{background:linear-gradient(#fff0ca,#d8b36c);border:1px solid #fff1c999;box-shadow:0 2px 5px #09285a55;width:37px;height:37px}.avatar.black{background:linear-gradient(#3b4253,#0f172c);color:#e9c979;border-color:#c9a65e}.turn-pill{color:#bcfff2;font-size:8px}.turn-pill .dot{box-shadow:0 0 8px #80fff1}.board-frame{padding:10px;border:2px solid #eac875;background:linear-gradient(135deg,#c49d54,#49301f 18%,#9b6c32 50%,#d5b46f 85%,#76532a);box-shadow:inset 0 1px 0 #ffedc5,0 16px 30px #041c4e88,0 0 0 5px #113d7455;margin:14px 0;border-radius:15px;overflow:visible}.board-grid{border:1px solid #412a1f;border-radius:6px;box-shadow:0 0 0 1px #ffe2a044,inset 0 0 20px #3f2b1f33}.square{background:var(--board-light);box-shadow:inset 0 0 15px #5f3c1e0a;padding:0}.square.dark{background:var(--board-dark)}.square::before{content:'';position:absolute;inset:0;background:linear-gradient(130deg,#fff1 0%,#ffffff0a 35%,#4d301312);pointer-events:none}.square .piece{width:98%;height:98%;filter:drop-shadow(1px 2px 1px #22170a55);position:relative;z-index:1}.square.last{background:color-mix(in srgb,var(--board-light) 65%,#ffe78e)}.square.dark.last{background:color-mix(in srgb,var(--board-dark) 72%,#edc766)}.square.selected{background:#f5d485;box-shadow:inset 0 0 0 2px #fff0b1,inset 0 0 22px #f8dc8aaa}.square.selected .piece{animation:piece-ready 1.3s ease-in-out infinite}.rank,.file{font-size:8px;color:#3c2c1d;text-shadow:0 1px 0 #fff5;z-index:3}.square.dark .rank,.square.dark .file{color:#fff0d2;text-shadow:0 1px 1px #3e241b}.move-dot{background:#154f78aa;border:1px solid #dbf9ff99;box-shadow:0 0 7px #b4efff55;z-index:4}.capture-ring{border-color:#e66063;box-shadow:0 0 10px #f2776d88;z-index:4}.royal-inherited{filter:drop-shadow(0 0 5px #ffdf70)!important}.skin-moonsteel{filter:grayscale(.35) hue-rotate(155deg) saturate(.75) drop-shadow(0 0 3px #b9dfff66)!important}.skin-sunfire{filter:sepia(.18) saturate(1.4) hue-rotate(-12deg) drop-shadow(0 0 3px #ffad5688)!important}.board-hint{color:#e4f5ff;font-size:10px;text-shadow:0 2px 5px #123255}.match-panel{background:linear-gradient(145deg,#4979ba88,#14376dcc);border-color:#cde7ff88;padding:25px;border-radius:21px}.panel-head .eyebrow{color:#bdf6ff;font-size:9px}.connection{color:#b9ffe2;font-size:9px}.connection.offline{color:#ffe3a0}.match-panel h2{font-weight:650;font-size:28px;color:#fff0c6;text-shadow:0 3px 9px #103664}.match-meta{color:#daeaff;font-size:11px}.room-block{background:#08366a55;border-color:#b2d9ff44}.room-block small{color:#cfe7ff}.room-code b{color:#ffdf80}.journal-head{border-color:#bad9ff33}.journal-head h3{font-weight:650;color:#fff7e5}.journal-head small{color:#c1d6f0}.journal{height:218px}.journal-empty{color:#bcceeb}.move-row{color:#f1f7ff;font-size:11px}.move-row small{color:#b8d1f1}.move-row:nth-child(even){background:#b1d8ff0c}.panel-actions{border-color:#b3d5ff33;gap:11px}.panel-actions .text-button{font-size:10px}.tiny-note{color:#adc7e8}.match-reward{margin-top:16px;font-size:10px;color:#ffdf91;background:#b28b3322;padding:10px 12px;border-radius:9px;border:1px solid #f1d58433}.match-search{display:flex;align-items:center;flex-direction:column;gap:10px;padding-top:17px}.match-search p{font-size:11px;line-height:1.8;text-align:center;color:#d3e8ff}.search-orbit{width:39px;height:39px;border:2px solid #94d6ff33;border-top-color:#ffde87;border-right-color:#adeaff;border-radius:50%;animation:spin 1.2s linear infinite}
.move-ghost{position:fixed;z-index:100;pointer-events:none;filter:drop-shadow(0 6px 4px #09235566);will-change:transform}.move-ghost>.piece{width:100%;height:100%}.move-ghost.effect-starfall:after,.move-ghost.effect-sakura:after{content:'';position:absolute;width:80%;height:40%;left:10%;top:55%;border-radius:50%;background:radial-gradient(ellipse,var(--effect-color),transparent 70%);opacity:.75;filter:blur(5px);z-index:-1}.vfx-particle{position:fixed;pointer-events:none;z-index:150;will-change:transform;font-style:normal;text-shadow:0 0 10px currentColor}.vfx-particle.sakura{font-size:19px}.capture-shockwave{position:fixed;pointer-events:none;z-index:99;border:2px solid #fff3b2;box-shadow:0 0 20px #ffe295,inset 0 0 16px #ffe295;border-radius:50%}.reaction-bubble{position:absolute;z-index:12;right:12px;top:25%;background:linear-gradient(#365c9edb,#163461eb);border:2px solid #cceaff;border-radius:22px;padding:12px 17px;box-shadow:0 6px 25px #09214f88;animation:reaction-appear .3s ease-out;display:flex;align-items:center;flex-direction:column;pointer-events:none}.reaction-bubble>span:last-child{font-size:11px;color:#fff2ce}.reaction-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.reaction-picker>button{border:1px solid #a9d2ff66;background:#5b87c52c;border-radius:15px;display:flex;flex-direction:column;align-items:center;padding:12px 5px;gap:8px;font-size:10px;color:#fff4cf}.sticker-art{display:inline-flex;align-items:center;justify-content:center;width:90px;height:90px;position:relative;color:var(--sticker-accent,#ffdd80);filter:drop-shadow(0 3px 2px #10275555)}.sticker-art>b{font-family:Georgia,serif;font-size:63px;line-height:1;text-shadow:0 2px 0 #aa7d3f,0 0 20px currentColor;animation:sticker-wiggle 2.4s ease-in-out infinite}.sticker-art>i{position:absolute;font-style:normal;font-size:18px;right:1px;top:10px;animation:star-glimmer 2s infinite}.sticker-art>i:last-child{left:3px;top:auto;bottom:10px;font-size:13px;animation-delay:-.8s}.sticker-thinking>b{font-size:55px;letter-spacing:4px}.sticker-stars>b{font-size:75px}.sticker-cheer>b{animation:sticker-cheer 1.4s ease-in-out infinite}
.shop-view{padding-top:27px}.shop-intro{display:flex;align-items:center;justify-content:space-between;padding:28px 34px;border-radius:25px;background:linear-gradient(110deg,#243785d9,#9a5de455),url('/assets/sky-kingdom-v2.png') 70% 43%/cover;overflow:hidden}.shop-intro h1{font-family:Georgia,serif;font-size:40px;color:#fff0c7;margin:14px 0 10px;letter-spacing:-.7px;text-shadow:0 3px 9px #202965}.shop-intro p{font-size:12px;line-height:1.8;color:#d4e7ff;max-width:650px;margin:0}.shop-intro-art{height:160px;width:140px;flex-shrink:0;animation:royal-idle 6s ease-in-out infinite}.shop-intro-art>.piece{width:100%;height:100%}.shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:22px 0}.shop-tabs{display:flex;flex-wrap:wrap;gap:8px}.shop-tabs>button{border:1px solid #bad9ff66;background:#194c8a66;color:#d9eaff;font-size:11px;min-height:40px;padding:9px 15px;border-radius:11px}.shop-tabs>button.active{background:linear-gradient(#e8c686,#bd8c42);color:#21375e;border-color:#ffeac1;box-shadow:0 3px 0 #89663755;font-weight:700}.collection-button{font-size:10px;min-height:40px;white-space:nowrap}.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.shop-card{overflow:hidden;border-radius:19px;background:linear-gradient(140deg,#4c82bc88,#153c73bb);border-color:#b9dbff66}.shop-card.premium{border-color:#cdb4ff99;background:linear-gradient(140deg,#765eae88,#233b83bb)}.item-stage{height:178px;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--item-accent) 22%,transparent),transparent 66%);overflow:hidden}.rarity-badge{position:absolute;top:12px;left:12px;font-size:7px;letter-spacing:1px;color:#e3f1ff;border-radius:5px;background:#0e327855;border:1px solid #c9e3ff22;padding:5px 7px}.premium .rarity-badge{color:#f3d7ff;background:#7545a555}.item-copy{padding:15px 17px 18px}.item-category{font-size:7px;letter-spacing:1.5px;color:#abd7ff}.item-copy h3{font-size:16px;color:#fff0c5;margin:9px 0 8px;font-weight:700}.item-copy p{font-size:10px;color:#d0e2f8;line-height:1.7;margin:0;min-height:35px}.item-controls{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-top:17px}.item-controls>.text-button{font-size:9px;min-height:36px}.item-controls .primary,.item-controls .secondary,.gem-button{font-size:10px;min-height:37px;padding:8px 11px;border-radius:9px;gap:7px}.item-controls .coin-mark{width:17px;height:17px;border-width:1px;font-size:10px}.item-controls .gem-mark{font-size:18px}.gem-button{background:linear-gradient(#a68aef,#6f58ba);border:1px solid #ead6ff;color:#fff7ff;box-shadow:0 3px 0 #4e398b;display:flex;align-items:center;font-weight:700}.equipped-badge{font-size:9px;color:#b8ffe4}.board-swatch{width:132px;height:132px;display:grid;grid-template-columns:repeat(5,1fr);transform:perspective(400px) rotateX(30deg) rotateZ(-12deg);box-shadow:0 8px 0 #967133,0 16px 15px #102b594d;border:5px solid #d3ac62;border-radius:5px;overflow:hidden}.board-swatch>span{background:var(--swatch-light)}.board-swatch>span.dark{background:var(--swatch-dark)}.skin-swatch{display:flex;width:165px;height:145px;align-items:flex-end;justify-content:center}.skin-swatch>.piece{width:95px;height:145px;flex-shrink:0}.skin-swatch>.piece:last-child{width:82px;height:122px;margin-left:-16px;position:relative;z-index:2}.skin-swatch.skin-moonsteel{filter:none!important}.skin-swatch.skin-moonsteel>.piece{filter:grayscale(.35) hue-rotate(155deg) saturate(.75) drop-shadow(0 0 5px #b1dbff)!important}.skin-swatch.skin-sunfire{filter:none!important}.skin-swatch.skin-sunfire>.piece{filter:sepia(.18) saturate(1.4) hue-rotate(-12deg) drop-shadow(0 0 6px #ffad5688)!important}.animation-swatch{width:130px;height:140px;position:relative;display:flex;align-items:center;justify-content:center}.animation-swatch>.piece{width:100%;height:100%;animation:royal-idle 3s infinite}.animation-swatch>i{position:absolute;font-style:normal;font-size:30px;color:#b6f5ff;right:0;top:14px;text-shadow:0 0 18px #9ed8ff;animation:star-glimmer 2s infinite}.animation-swatch>i:last-child{left:0;right:auto;top:auto;bottom:15px;font-size:18px}.animation-swatch.effect-sakura>i{color:#ffb8dd;text-shadow:0 0 14px #ffb8dd}.shop-footnote{padding:23px 27px;border-radius:19px;margin-top:24px}.shop-footnote h3{font-size:16px;color:#fff0c3;margin:0 0 9px}.shop-footnote p{font-size:11px;line-height:1.8;color:#c8def8;margin:0;max-width:900px}.shop-footnote .text-button{font-size:11px;margin-top:5px}.item-preview-stage,.purchase-summary{display:flex;justify-content:center;align-items:center;min-height:190px;background:radial-gradient(ellipse,#8bb9ff22,transparent 65%)}.item-preview-stage .skin-swatch,.purchase-summary .skin-swatch{transform:scale(1.2)}.gem-display{text-align:center;font-size:80px;color:#90edff;text-shadow:0 0 30px #9e95ff;margin:20px 0}.audio-settings{margin-top:20px;padding-top:20px;border-top:1px solid #d5e7ff33}.volume-label{display:flex;justify-content:space-between;gap:20px;margin-top:19px;font-size:12px;color:#c9e0ff}#sound-volume{width:100%;margin:13px 0 17px;accent-color:#ecc974;min-height:25px}#test-sound{min-height:40px;font-size:11px}.setting small{color:#bed5f5}dialog{background:linear-gradient(135deg,#395d98f5,#18376af7);border-color:#cce7ff99;box-shadow:inset 0 1px 0 #ffffff55,0 20px 90px #041638aa}dialog h2{color:#ffebbc}dialog p,dialog li{color:#d5e7ff}.dialog-actions .primary{box-shadow:inset 0 1px 0 #fff9,0 3px 0 #b38234}dialog input[type=text]{background:#13386c88;border-color:#bedaff77;color:#ffedbd}.toast{background:linear-gradient(#4579bfe8,#21477feb);border-color:#d7ebffa8;color:#fff1c7}.error-banner{background:#784662cc;border-color:#ebadbf88}body.reduced .glass{background:#244d82}body.reduced .fantasy-hero{background:linear-gradient(90deg,#183d7ef7,#315e9999),url('/assets/sky-kingdom-v2.png') right center/cover}body.reduced::before{background:linear-gradient(#17386e55,#0b1c3eee)}
@keyframes royal-idle{0%,100%{translate:0 0}50%{translate:0 -9px}}@keyframes star-glimmer{0%,100%{opacity:.4;scale:.8}50%{opacity:1;scale:1.15}}@keyframes piece-ready{0%,100%{translate:0 -1px}50%{translate:0 -5px}}@keyframes sticker-wiggle{0%,100%{rotate:-5deg;translate:0 0}50%{rotate:5deg;translate:0 -4px}}@keyframes sticker-cheer{0%,100%{scale:1;rotate:-6deg}40%{scale:1.16;rotate:8deg}65%{scale:1.08;rotate:-6deg}}@keyframes reaction-appear{from{opacity:0;transform:translateY(10px) scale(.5)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:1150px){#app{padding:23px 30px 125px}header{gap:12px}.brand b{font-size:17px}.player-badge{padding-right:10px;gap:7px;max-width:165px}.player-badge b{max-width:100px;font-size:11px}.wallet-currency{gap:6px;padding:6px 7px;font-size:11px}header nav{gap:6px}.fantasy-hero{padding:30px 31px;gap:10px}.hero h1{font-size:58px}.family-king{left:-11%;height:305px}.family-queen{right:-10%;height:270px}.family-kid{left:22%;height:235px}.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.match-layout{gap:22px;grid-template-columns:minmax(0,1.5fr) minmax(275px,1fr)}}
@media(max-width:900px){header{grid-template-columns:auto 1fr auto;gap:12px}.player-badge{display:none}.wallet-bar{justify-self:end}.hero h1{font-size:52px}.fantasy-hero{padding:26px;min-height:390px}.royal-family{height:310px}.family-king{height:280px;width:185px;left:-10%}.family-queen{height:245px;width:175px;right:-13%}.family-kid{height:210px;width:180px;left:20%}.art-caption{font-size:8px;padding:10px;white-space:nowrap;bottom:-1px}.hero p{font-size:12px}.hero-start{font-size:12px;padding:12px 15px}.hero .tag{font-size:7px;padding:7px}.mode-card{padding:21px}.mode-card h3{font-size:20px}.mode-card p{font-size:11px}.card-kicker{display:none}.monthly-cta{font-size:11px;gap:7px}.match-panel{padding:21px}.journal{height:177px}.match-panel h2{font-size:25px}}
@media(max-width:760px){#app{padding:18px 18px 112px}header{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'brand nav' 'profile wallet';gap:12px 8px}.brand{grid-area:brand;gap:9px}.brand b{font-size:16px;letter-spacing:1.2px}.brand small{font-size:8px;letter-spacing:.5px}.brand img{width:36px;height:40px;border-radius:11px}header nav{grid-area:nav;gap:6px}.icon-button{width:35px;height:37px;border-radius:11px}header nav svg{width:17px;height:17px}.player-badge{grid-area:profile;display:flex;justify-self:start;max-width:158px;min-height:39px;padding:4px 8px 4px 5px;gap:7px;border-radius:10px}.player-badge .profile-crown{width:27px;height:27px;border-radius:7px}.profile-crown svg{width:17px;height:17px}.player-badge b{font-size:10px;max-width:95px}.player-badge small{font-size:6px;letter-spacing:1px;margin-top:3px}.wallet-bar{grid-area:wallet;justify-self:end;gap:6px}.wallet-currency{gap:5px;padding:5px 6px;min-height:36px;font-size:10px;border-radius:10px}.wallet-currency>b{min-width:14px}.coin-mark{width:20px;height:20px;font-size:12px}.gem-mark{font-size:21px}.wallet-currency>span:last-child{width:14px;height:17px;font-size:14px}main{padding-top:22px}.fantasy-hero{grid-template-columns:1fr;padding:25px 25px 13px;gap:0;min-height:0;border-radius:23px;background:linear-gradient(180deg,#17396beb 0%,#204b86a6 55%,#3a65a138),url('/assets/sky-kingdom-v2.png') 65% center/cover}.hero h1{font-size:48px;line-height:1.02;margin:15px 0 15px;letter-spacing:-1px}.hero .eyebrow{font-size:8px;letter-spacing:2px}.hero p{font-size:11px;line-height:1.8}.hero-start{margin-top:20px;min-height:51px;font-size:13px;padding:12px 17px;width:100%}.hero .tags{margin-top:20px;gap:7px}.hero .tag{font-size:7px;padding:7px 8px;letter-spacing:.7px}.royal-family{height:231px;width:100%;margin:8px 0 0;transform:none;overflow:hidden}.family-king{height:220px;width:155px;left:-2%;bottom:20px}.family-queen{height:198px;width:150px;right:-3%;bottom:22px}.family-kid{height:164px;width:147px;left:26%;bottom:7px}.hero-podium{height:50px;bottom:15px}.family-spark.one{left:27%;top:5px;font-size:23px}.family-spark.two{top:55px;right:7%;font-size:14px}.art-caption{bottom:0;font-size:8px;padding:8px 10px;position:absolute;left:50%;transform:translateX(-50%);background:#3c71b494;white-space:nowrap}.art-caption svg{width:12px;height:12px}.lobby-presence{font-size:9px;padding:12px 2px;gap:5px}.lobby-names{display:none}.section-heading{margin:16px 0 15px;align-items:center}.section-heading h2{font-size:21px;letter-spacing:-.5px}.section-heading>.text-button{font-size:10px}.modes{grid-template-columns:1fr;gap:13px}.mode-card{padding:20px 21px;border-radius:21px;min-height:0;display:grid;grid-template-columns:49px minmax(0,1fr);column-gap:14px;align-items:center}.mode-icon{grid-column:1;grid-row:1/3;width:47px;height:49px;border-radius:13px}.mode-card h3{grid-column:2;margin:0 0 5px;font-size:20px}.mode-card p{grid-column:2;font-size:10px;line-height:1.65;min-height:0}.mode-card p br{display:none}.mode-card button{grid-column:1/-1;margin-top:17px;min-height:44px;font-size:11px}.mode-card .card-kicker{display:none}.invitation{font-size:10px;gap:10px;margin-top:13px}.invitation .text-button{font-size:10px}.monthly-banner{gap:12px;padding:17px 16px;margin-top:17px;flex-wrap:wrap;border-radius:18px}.monthly-gem{font-size:36px}.monthly-banner b{font-size:19px}.monthly-banner small{font-size:7px;letter-spacing:1.5px}.monthly-banner em{font-size:9px}.monthly-cta{margin-left:49px;margin-top:3px;font-size:10px}.bottom-dock{min-width:0;width:calc(100% - 28px);max-width:480px;bottom:10px;gap:4px;padding:7px 9px;border-radius:22px;backdrop-filter:blur(20px)}.bottom-dock button{padding:7px 13px;min-width:57px;min-height:50px;font-size:8px;gap:5px;border-radius:15px}.bottom-dock button>svg{width:22px;height:22px}footer{gap:10px;margin-top:23px;font-size:7px;letter-spacing:1.1px}.server-state{font-size:9px}.match{padding-top:15px}.back-row{margin-bottom:13px}.back-row .text-button{font-size:10px}.back-row small{font-size:7px}.match-layout{grid-template-columns:1fr;gap:17px}.board-frame{padding:6px;margin:11px 0;border-width:1px;border-radius:12px;box-shadow:inset 0 1px 0 #ffe9b1,0 10px 22px #08244f88,0 0 0 3px #173d6b66}.board-grid{border-radius:5px}.player-card{min-height:57px;padding:9px 12px;border-radius:14px;gap:9px}.avatar{width:33px;height:33px;border-radius:10px}.player-card b{font-size:11px}.player-card small{font-size:8px}.turn-pill{font-size:7px;gap:5px}.rank,.file{font-size:6px}.square .piece{width:100%;height:100%}.board-hint{font-size:9px;line-height:1.8;min-height:30px;margin-top:9px}.match-panel{padding:21px;border-radius:18px}.match-panel h2{font-size:26px;margin-top:16px}.journal{height:165px}.panel-actions{gap:13px}.panel-actions .text-button{font-size:10px;min-height:38px}.reaction-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.reaction-bubble{right:7px;padding:8px 11px;top:24%;border-radius:17px}.reaction-bubble .sticker-art{width:65px;height:65px}.reaction-bubble .sticker-art>b{font-size:46px}.reaction-bubble>span:last-child{font-size:9px}.shop-intro{padding:23px 21px;gap:8px;min-width:0}.shop-intro .eyebrow{font-size:7px;letter-spacing:1.4px}.shop-intro h1{font-size:31px;margin:12px 0 10px;line-height:1.05}.shop-intro p{font-size:10px}.shop-intro-art{width:82px;height:112px;align-self:flex-end;opacity:.95}.shop-toolbar{align-items:flex-start;gap:13px;flex-direction:column;margin:17px 0}.shop-tabs{gap:6px}.shop-tabs>button{font-size:9px;padding:8px 10px;min-height:35px;border-radius:9px}.collection-button{min-height:35px;font-size:9px;padding:8px 12px;align-self:flex-end;margin-top:-2px}.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.shop-card{border-radius:16px}.item-stage{height:146px}.rarity-badge{font-size:6px;letter-spacing:.6px;top:9px;left:9px;padding:4px 5px}.item-copy{padding:12px 11px 14px}.item-category{font-size:6px;letter-spacing:1.1px}.item-copy h3{font-size:14px;line-height:1.2;margin:8px 0;min-height:33px}.item-copy p{font-size:9px;min-height:46px;line-height:1.6}.item-controls{gap:2px;margin-top:12px;flex-wrap:wrap}.item-controls .text-button{font-size:8px;min-height:32px}.item-controls .primary,.item-controls .secondary,.gem-button{font-size:9px;min-height:33px;padding:7px 8px;gap:5px;border-radius:8px}.item-controls .gem-mark{font-size:15px}.item-controls .coin-mark{width:15px;height:15px;font-size:9px}.equipped-badge{font-size:8px}.board-swatch{width:103px;height:103px;border-width:4px}.skin-swatch{width:134px;height:124px}.skin-swatch>.piece{width:80px;height:124px}.skin-swatch>.piece:last-child{width:67px;height:104px;margin-left:-15px}.animation-swatch{width:110px;height:120px}.animation-swatch>i{font-size:24px}.item-stage .sticker-art{width:80px;height:80px}.item-stage .sticker-art>b{font-size:57px}.shop-footnote{padding:20px}.shop-footnote h3{font-size:15px}.shop-footnote p{font-size:10px}dialog{padding:25px 22px;border-radius:21px}dialog h2{font-size:26px}dialog p{font-size:12px}.dialog-actions{gap:10px}.dialog-actions .primary,.dialog-actions .secondary{font-size:11px;padding:11px 15px}.toast{bottom:102px;font-size:11px;text-align:center;padding:11px 16px}}
@media(max-width:370px){#app{padding:15px 14px 110px}.brand b{font-size:14px}.brand small{font-size:7px}.brand img{width:33px;height:37px}.brand{gap:7px}header nav{gap:5px}.icon-button{width:32px;height:35px}.player-badge{max-width:136px}.player-badge b{max-width:79px;font-size:9px}.player-badge small{font-size:6px}.wallet-currency{gap:4px;padding:4px 5px;font-size:9px}.coin-mark{width:18px;height:18px;font-size:11px}.gem-mark{font-size:19px}.wallet-currency>span:last-child{width:13px;height:16px}.fantasy-hero{padding:22px 20px 11px}.hero h1{font-size:43px}.hero .eyebrow{font-size:7px;letter-spacing:1.8px}.hero .tag{font-size:6px;padding:7px;letter-spacing:.5px}.royal-family{height:217px}.family-king{left:-10%;height:207px}.family-queen{right:-13%;height:188px}.family-kid{left:23%;height:153px}.hero-start{font-size:12px}.bottom-dock button{padding:7px 10px;min-width:53px}.item-copy h3{font-size:13px}.item-controls{flex-direction:column;align-items:stretch}.item-controls .text-button{justify-content:center}.equipped-badge{text-align:center;min-height:33px;display:flex;align-items:center;justify-content:center}.shop-intro{padding:20px 18px}.shop-intro h1{font-size:29px}}
@media(orientation:landscape) and (max-width:760px){header{grid-template-columns:auto 1fr auto;grid-template-areas:'brand wallet nav'}.player-badge{display:none}.fantasy-hero{grid-template-columns:1.2fr 1fr;gap:5px}.hero h1{font-size:41px}.royal-family{height:230px;margin:0}.family-king{left:-15%;height:215px}.family-queen{right:-20%;height:190px}.family-kid{left:18%;height:160px}.hero-start{font-size:11px;padding:11px}.hero .tags{gap:5px;flex-wrap:wrap}.modes{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.mode-card{display:flex;align-items:flex-start;flex-direction:column;padding:16px}.mode-icon{width:38px;height:39px}.mode-card h3{font-size:16px;margin:14px 0 7px}.mode-card p{font-size:9px;min-height:47px}.mode-card button{margin-top:17px;min-height:40px;padding:9px;font-size:9px}.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.bottom-dock{max-width:370px}}