html{height:100dvh}body{color:#fff;background:#1e1e1e;height:100%;min-height:100dvh;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}#app{flex-direction:column;width:100%;min-height:100dvh;display:flex}.page{box-sizing:border-box;flex-direction:column;justify-content:flex-start;align-items:center;gap:14px;width:100%;min-height:100dvh;padding:40px 12px 24px;display:flex}.hidden{display:none!important}.screen-panel{box-sizing:border-box;background:#2a2a2a;border:1px solid #3a3a3a;border-radius:8px;flex-direction:column;align-items:stretch;gap:20px;width:min(92vw,460px);margin:auto 0;padding:28px;display:flex}.screen-panel h1{margin:0;font-size:32px;line-height:1.1}.rules-page,.changelog-page{width:min(92vw,720px);max-height:none;overflow:visible}.rules-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.rules-header .byline{margin-top:8px}.rules-section{gap:8px;display:grid}.rules-section h2,.rules-section p{margin:0}.rules-section h2{color:#f0d9b5;font-size:20px}.rules-section p{color:#d5d5d5;line-height:1.5}.changelog-entry{background:#202020;border:1px solid #383838;border-radius:8px;gap:10px;padding:16px;display:grid}.changelog-entry-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.changelog-entry-header h2{color:#f0d9b5;margin:0;font-size:18px}.changelog-date{color:#cfcfcf;background:#2e2e2e;border:1px solid #444;border-radius:4px;padding:3px 8px;font-size:12px;font-weight:600}.changelog-list{color:#d5d5d5;gap:8px;margin:0;padding-left:20px;font-size:14px;line-height:1.45;display:grid}.changelog-list li strong{color:#f0d9b5}.byline{color:#cfcfcf;margin:-12px 0 0;font-size:14px}.home-wrapper{box-sizing:border-box;flex-direction:column;flex-grow:1;justify-content:center;align-items:center;width:100%;padding:0 0 68px;display:flex;position:relative}.home-screen-footer{justify-content:center;align-items:center;display:flex;position:absolute;bottom:24px;left:0;right:0}.changelog-link-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#a8a8a8;cursor:pointer;letter-spacing:.3px;background:#2a2a2ab3;border:1px solid #444;border-radius:20px;min-height:34px;padding:0 18px;font-size:13px;font-weight:600;transition:color .15s,border-color .15s,background .15s,transform .1s}.changelog-link-button:hover{color:#f0d9b5;background:#f0d9b51f;border-color:#f0d9b5}.changelog-link-button:active{transform:scale(.96)}.actions{gap:12px;display:flex}.home-actions{flex-wrap:wrap}.home-actions button{white-space:nowrap;flex:150px;padding:0 12px}.room-entry{gap:8px;display:grid}.room-entry label{color:#cfcfcf;font-size:14px;font-weight:700}.room-entry-row{gap:10px;display:flex}.room-entry input,.friend-room-form input{box-sizing:border-box;color:#f4f4f4;min-width:0;height:42px;min-height:42px;font:inherit;background:#181818;border:1px solid #444;border-radius:6px;flex:1;padding:0 14px;font-size:14px;transition:border-color .15s}.room-entry input:focus,.friend-room-form input:focus{border-color:#f0d9b5;outline:none}.form-message{color:#f08f8f;min-height:18px;margin:0;font-size:14px}.info-panel{color:#e8e8e8;background:#202020;border:1px solid #3a3a3a;border-radius:8px;gap:10px;padding:16px;display:grid}.info-panel h2,.info-panel p{margin:0}.info-panel h2{color:#f0d9b5;font-size:20px}.info-panel p{color:#d5d5d5;font-size:14px;line-height:1.45}.info-panel a{color:#f0d9b5}.friend-panel{gap:14px;display:grid}.friend-create-btn{width:100%}.friend-divider{text-align:center;color:#888;text-transform:uppercase;letter-spacing:.5px;align-items:center;font-size:12px;display:flex}.friend-divider:before,.friend-divider:after{content:"";border-bottom:1px solid #383838;flex:1}.friend-divider span{padding:0 10px}.friend-room-form{gap:8px;display:grid}button{color:#111;min-height:42px;font:inherit;cursor:pointer;background:#f0d9b5;border:0;border-radius:6px;padding:0 16px;font-weight:700}button:hover{filter:brightness(1.06)}button:disabled{cursor:not-allowed;opacity:.52}.secondary-button{color:#f4f4f4;background:#3a3a3a}.danger-button{color:#fff;background:#b43d3d}.room-code{color:#f0d9b5;margin:0;font-size:22px;font-weight:700}.lobby-status{color:#cfcfcf;margin:0}.player-list{gap:10px;display:grid}.player-slot{color:#bdbdbd;background:#202020;border:1px solid #3a3a3a;border-radius:6px;padding:12px 14px}.player-slot.occupied{color:#f4f4f4;border-color:#6b8e6f}.game-view{flex-direction:column;align-items:center;gap:14px;width:min(94vw,560px);margin:0 auto;display:flex}.players-panel{box-sizing:border-box;grid-template-columns:1fr 1fr;gap:12px;width:100%;display:grid}.player-hud{box-sizing:border-box;background:#2a2a2a;border:1px solid #444;border-radius:8px;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;transition:border-color .2s,box-shadow .2s;display:flex}.player-hud.mine{border-color:#f0d9b5;box-shadow:0 0 8px #f0d9b533}.player-details{flex-direction:column;flex:1;gap:5px;min-width:0;display:flex}.player-label{color:#f0d9b5;font-size:14px;font-weight:700}.player-top{justify-content:space-between;align-items:center;gap:8px;display:flex}.player-score{color:#9fd6a3;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px;font-weight:700}.elixir-row{align-items:center;gap:7px;display:flex}.elixir-bar{box-sizing:border-box;background:#141414;border:1px solid #3d3550;border-radius:999px;flex:1;min-width:0;height:16px;position:relative;overflow:hidden}.elixir-fill{background:linear-gradient(90deg,#7b3fbf 0%,#b44ce0 55%,#e070f0 100%);border-radius:999px;width:0;transition:width .32s cubic-bezier(.22,.68,.34,1);position:absolute;inset:0 auto 0 0}.elixir-bar:after{content:"";z-index:2;pointer-events:none;background:repeating-linear-gradient(90deg,#0000 0 calc(10% - 1px),#0a0a0a8c calc(10% - 1px) 10%);position:absolute;inset:0}.elixir-value{color:#dcaef0;font-variant-numeric:tabular-nums;text-align:right;flex-shrink:0;min-width:15px;font-size:12px;font-weight:700}.elixir-bar.surplus{border-color:#8a6fb0}.elixir-bar.surplus+.elixir-value{color:#ffd9ff}.elixir-bar.surplus .elixir-fill{background:linear-gradient(90deg,#b44ce0 0%,#e070f0 50%,#ffd9ff 100%)}.elixir-bar.gained .elixir-fill{animation:.6s ease-out elixir-gain}@keyframes elixir-gain{0%{filter:brightness();box-shadow:none}35%{filter:brightness(1.55);box-shadow:0 0 12px 2px #e070f0bf}to{filter:brightness();box-shadow:none}}.ambient-layer{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.ambient-piece{bottom:-14vh;left:var(--ambient-left);color:#f0d9b5;font-size:var(--ambient-size);opacity:0;filter:blur(1px);will-change:transform, opacity;animation:ambient-rise var(--ambient-duration) linear var(--ambient-delay) infinite;line-height:1;position:absolute}@keyframes ambient-rise{0%{opacity:0;transform:translate(0,0)rotate(0)}14%{opacity:var(--ambient-peak)}86%{opacity:var(--ambient-peak)}to{opacity:0;transform:translate3d(var(--ambient-drift), -128vh, 0) rotate(var(--ambient-spin))}}.home-wrapper,.screen-panel,.game-view{z-index:1;position:relative}@media (prefers-reduced-motion:reduce){.ambient-layer{display:none}.elixir-fill{transition:none}.elixir-bar.gained .elixir-fill{animation:none}}.board-wrap{box-sizing:border-box;justify-content:center;width:100%;display:flex}.game-actions{box-sizing:border-box;justify-content:center;align-items:center;gap:12px;width:100%;display:flex}.game-actions button{flex:1;max-width:200px}.play-again-btn{font-weight:700;max-width:240px!important}.modal-backdrop{z-index:10000;background:#000000a3;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.draw-offer{color:#f4f4f4;background:#2a2a2a;border:1px solid #555;border-radius:8px;gap:16px;width:min(92vw,360px);padding:20px;display:grid}.resign-dialog{text-align:center;color:#f4f4f4;background:#2a2a2a;border:1px solid #555;border-radius:12px;gap:16px;width:min(92vw,360px);padding:24px;display:grid;box-shadow:0 12px 36px #0009}.resign-dialog h2{color:#f0d9b5;margin:0;font-size:22px}.resign-dialog p{color:#cfcfcf;margin:0;font-size:14px;line-height:1.45}.modal-actions{gap:12px;display:flex}.modal-actions button{flex:1}.game-over-dialog{text-align:center;color:#f4f4f4;background:#2a2a2a;border:1px solid #555;border-radius:12px;gap:16px;width:min(92vw,380px);padding:24px;display:grid;box-shadow:0 12px 36px #0009}.game-over-dialog h2{color:#f0d9b5;letter-spacing:.5px;margin:0;font-size:24px}.game-over-content{flex-direction:column;gap:6px;display:flex}.game-over-winner{color:#fff;margin:0;font-size:20px;font-weight:700}.game-over-reason{color:#cfcfcf;margin:0;font-size:14px}.game-bar{box-sizing:border-box;color:#f4f4f4;justify-content:space-between;align-items:center;gap:16px;width:100%;display:flex}.game-bar-actions{align-items:center;gap:12px;display:flex}.compact-button{min-height:34px;padding:0 12px}.game-bar strong{margin-right:12px}#room-label,.status{color:#cfcfcf;font-size:14px}.status{text-align:right}.board{aspect-ratio:1;touch-action:none;border:4px solid #444;grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);width:100%;display:grid}.square{justify-content:center;align-items:center;display:flex;position:relative}.board-coordinate{z-index:1;color:#141414b8;pointer-events:none;font-size:12px;font-weight:700;position:absolute}.rank-coordinate{top:4px;left:5px}.file-coordinate{bottom:3px;right:5px}.clock{color:#f4f4f4;text-align:center;letter-spacing:.5px;background:#1e1e1e;border:1px solid #444;border-radius:6px;flex-shrink:0;min-width:52px;padding:6px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:18px;font-weight:700;transition:background .2s,color .2s,border-color .2s}.clock.active{color:#111;background:#f0d9b5;border-color:#f0d9b5;font-weight:800}.clock.low-time{color:#ff6b6b;border-color:#d9534f}.clock.active.low-time{color:#fff;background:#c53030;border-color:#e53e3e}.history-panel{box-sizing:border-box;background:#2a2a2a;border:1px solid #444;border-radius:8px;align-items:center;gap:8px;width:100%;padding:8px 12px;display:flex;overflow:hidden}.history-panel h2{color:#f0d9b5;white-space:nowrap;flex-shrink:0;margin:0 4px 0 0;font-size:14px;font-weight:700}.history-scroll-btn{color:#f0d9b5;cursor:pointer;background:#1e1e1e;border:1px solid #444;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;min-height:26px;padding:0;transition:background .15s,border-color .15s,color .15s,transform .1s;display:flex}.history-scroll-btn:hover{color:#fff;background:#383838;border-color:#f0d9b5}.history-scroll-btn:active{transform:scale(.92)}.history-scroll-btn svg{display:block}.move-history{white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;flex:1;align-items:center;gap:6px;min-width:0;padding:2px 0;display:flex;overflow:auto hidden}.move-history::-webkit-scrollbar{display:none}.history-item{background:#1e1e1e;border:1px solid #3a3a3a;border-radius:6px;flex-shrink:0;align-items:center;gap:3px;padding:3px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13px;display:inline-flex}.history-turn{color:#8e8e8e;padding:0 3px;font-weight:700}.history-move{font:inherit;cursor:pointer;min-height:unset;background:0 0;border:0;border-radius:4px;padding:2px 5px;font-size:13px;line-height:1.2;transition:background .12s,color .12s}.history-move:hover{filter:none;background:#333}.history-move.active-move{color:#111;background:#f0d9b5;font-weight:700}.white-move{color:#f4f4f4;font-weight:600}.black-move{color:#cfcfcf;font-weight:600}.history-empty{color:#8e8e8e;font-size:13px;font-style:italic}.light{background:#f0d9b5}.dark{background:#b58863}.piece{z-index:3;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;touch-action:none;width:80%;height:80%;position:relative}.reserve{touch-action:none;box-sizing:border-box;background:#2a2a2a;border:1px solid #3a3a3a;border-radius:12px;justify-content:center;gap:16px;width:100%;padding:12px 16px;display:flex}.reserve-item{touch-action:none;flex-direction:column;align-items:center;gap:4px;display:flex}.reserve-item.unaffordable{opacity:.42}.reserve-cost{color:#cfcfcf;font-size:12px}.floating-piece{z-index:9999;pointer-events:none;width:80px;height:80px;position:fixed}.selected-reserve{border-radius:8px;outline:3px solid #4da3ff}.square{justify-content:center;align-items:center;transition:filter .12s;display:flex;position:relative}.square:hover{filter:brightness(1.08)}.selected-square{box-shadow:inset 0 0 0 4px #f6f669}.last-move{box-shadow:inset 0 0 0 4px #ffd240d9}.premove-square:before{content:"";pointer-events:none;z-index:1;background:#60a5fa59;border-radius:8px;position:absolute;inset:8%}.light.premove-square:before{background:#60a5fa52}.dark.premove-square:before{background:#6380fa5c}.king-in-check{box-shadow:inset 0 0 0 5px #dc2626f2}.last-move.king-in-check{box-shadow:inset 0 0 0 5px #dc2626f2,inset 0 0 0 9px #ffd240a6}.selected-square.last-move{box-shadow:inset 0 0 0 4px #f6f669,inset 0 0 0 8px #ffd240a6}.legal-move:after,.legal-capture:after{content:"";pointer-events:none;z-index:2;position:absolute}.legal-move:after{background:#00000047;border-radius:50%;width:22px;height:22px}.legal-capture:after{background:#f871716b;border-radius:8px;inset:8%}@media (width<=720px){.rules-header{flex-direction:column;align-items:flex-start}.actions,.room-entry-row,.modal-actions{flex-direction:column;align-items:stretch}.home-actions button{flex:none}}@media (width<=600px){.page{gap:8px;min-height:100dvh;padding:6px 8px}.home-wrapper{padding:0 0 50px}.home-screen-footer{bottom:12px}.screen-panel.home-panel{gap:14px;padding:22px 18px}.home-panel h1{font-size:28px}.game-view{gap:8px;width:min(96vw,560px)}.game-bar{align-items:flex-start;gap:6px}.game-bar-actions{justify-content:space-between;width:100%}.status{text-align:left}.players-panel{gap:8px}.player-hud{gap:6px;padding:8px 10px}.player-label{font-size:13px}.player-score{font-size:11px}.elixir-bar{height:14px}.elixir-value{font-size:10px}.clock{min-width:44px;padding:4px 6px;font-size:15px}.reserve{gap:8px;padding:10px}.reserve-cost{font-size:10px}.history-panel{gap:6px;padding:6px 8px}.history-panel h2{margin-right:0;font-size:12px}.history-scroll-btn{width:22px;height:22px;min-height:22px}.history-scroll-btn svg{width:12px;height:12px}.history-item{gap:3px;padding:3px 5px;font-size:11px}}.board-shell{aspect-ratio:1;--pl-duration:.3s;--pl-ease:cubic-bezier(.22, .68, .34, 1);--pl-piece-size:88%;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;position:relative}.square-layer{grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);display:grid;position:absolute;inset:0;overflow:hidden}.pl-square{position:relative}.pl-occupied{cursor:grab}.pl-square.light{background:#f0d9b5}.pl-square.dark{background:#b58863}.pl-coordinate{z-index:1;color:#1414148c;pointer-events:none;font-size:clamp(8px,1.4vw,11px);font-weight:700;position:absolute}.pl-coordinate-rank{top:3px;left:4px}.pl-coordinate-file{bottom:2px;right:4px}.pl-square.pl-last-move:before{content:"";background:#ffd24061;position:absolute;inset:0}.pl-square.pl-selected:before{content:"";background:#f6f66973;position:absolute;inset:0}.pl-square.pl-premove:before{content:"";background:#60a5fa6b;position:absolute;inset:0}.pl-square.pl-check:before{content:"";background:radial-gradient(circle,#dc2626d9 0%,#dc262659 55%,#0000 78%);animation:1.1s ease-in-out infinite pl-check-pulse;position:absolute;inset:0}@keyframes pl-check-pulse{0%,to{opacity:.75}50%{opacity:1}}.pl-square.pl-legal:after{content:"";width:26%;height:26%;animation:pl-dot-in .14s var(--pl-ease) forwards;background:#14141442;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.4)}.pl-square.pl-capture:after{content:"";animation:pl-ring-in .14s var(--pl-ease) forwards;border:4px solid #dc3c3c8c;border-radius:8px;position:absolute;inset:6%;transform:scale(.85)}@keyframes pl-dot-in{to{transform:translate(-50%,-50%)scale(1)}}@keyframes pl-ring-in{to{transform:scale(1)}}.piece-layer{z-index:3;pointer-events:none;position:absolute;inset:0}.pl-piece{will-change:transform;width:12.5%;height:12.5%;transition:transform var(--pl-duration) var(--pl-ease), opacity .17s linear;position:absolute;top:0;left:0}.pl-piece-art{background-size:var(--pl-piece-size) var(--pl-piece-size);width:100%;height:100%;transition:transform .18s var(--pl-ease), filter .18s linear;background-position:50%;background-repeat:no-repeat}.pl-piece.pl-moving{z-index:20}.pl-piece.pl-dragging{z-index:40;transition:none}.pl-piece.pl-dragging .pl-piece-art{filter:drop-shadow(0 6px 10px #00000073);transform:scale(1.08)}.pl-piece.pl-captured{z-index:2;opacity:0}.pl-piece.pl-captured .pl-piece-art{transform:scale(.62)}.pl-piece.pl-summoned .pl-piece-art{animation:pl-summon .5s var(--pl-ease)}.pl-piece.pl-promoted .pl-piece-art{animation:pl-promote .34s var(--pl-ease)}@keyframes pl-summon{0%{opacity:0;filter:brightness(2.4)drop-shadow(0 0 14px #78c8ffe6);transform:scale(.2)}55%{opacity:1;filter:brightness(1.5)drop-shadow(0 0 12px #78c8ffb3);transform:scale(1.18)}to{opacity:1;filter:none;transform:scale(1)}}@keyframes pl-promote{0%{filter:none;transform:scale(1)}45%{filter:brightness(1.7)drop-shadow(0 0 12px #ffe282f2);transform:scale(1.26)}to{filter:none;transform:scale(1)}}.board-shell.pl-reduced-motion .pl-piece,.board-shell.pl-reduced-motion .pl-piece-art,.board-shell.pl-reduced-motion .pl-square:after{transition:none!important;animation:none!important}.board-shell.pl-reduced-motion .pl-square.pl-check:before{animation:none!important}@media (prefers-reduced-motion:reduce){.pl-piece,.pl-piece-art{transition:none}.pl-piece.pl-summoned .pl-piece-art,.pl-piece.pl-promoted .pl-piece-art,.pl-square.pl-check:before,.pl-square.pl-legal:after,.pl-square.pl-capture:after{animation:none}}.board.board-shell{display:block}.board.board-shell .square-layer{border-radius:0}.board.board-shell{--pl-piece-size:80%}