.app-shell{position:relative;min-height:100vh;max-width:1540px;margin:0 auto;padding:clamp(1rem,2.4vw,2rem);overflow-x:clip;overflow-y:visible;isolation:isolate;color:var(--text-primary);--app-background: radial-gradient(circle at top left, rgba(214, 168, 91, .2), transparent 28%), radial-gradient(circle at bottom right, rgba(81, 146, 203, .14), transparent 24%), linear-gradient(160deg, #161116 0%, #101720 50%, #1b242f 100%);--surface-bg: rgba(16, 20, 28, .72);--surface-soft: rgba(255, 255, 255, .05);--surface-subtle: rgba(255, 255, 255, .035);--surface-strong: rgba(9, 12, 18, .5);--surface-border: rgba(244, 228, 201, .1);--surface-border-strong: rgba(244, 228, 201, .14);--text-primary: #f7efe2;--text-secondary: rgba(247, 239, 226, .8);--text-muted: rgba(247, 239, 226, .62);--text-dim: rgba(247, 239, 226, .54);--board-light: #f0dec2;--board-dark: #875a3b;--board-frame: rgba(198, 145, 69, .56);--board-highlight: rgba(72, 195, 255, .78);--board-last-move: rgba(255, 211, 102, .5);--board-target: rgba(55, 173, 235, .74);--board-glow: rgba(214, 168, 91, .22);--theme-accent: #d6a85b;--theme-panel: linear-gradient(160deg, rgba(214, 168, 91, .22), rgba(78, 54, 28, .08));--hero-badge-bg: linear-gradient(160deg, rgba(214, 168, 91, .24), rgba(55, 121, 189, .14));--button-hover-border: rgba(214, 168, 91, .54);--button-active-bg: linear-gradient(160deg, rgba(214, 168, 91, .28), rgba(65, 155, 225, .12));--button-active-border: rgba(214, 168, 91, .68);--primary-bg: linear-gradient(150deg, #d6a85b 0%, #9a6b27 100%);--primary-text: #141821;--focus-border: rgba(72, 195, 255, .72);--focus-ring: rgba(72, 195, 255, .16);--danger-border: rgba(255, 112, 112, .28);--danger-text: #ffb2b2;--chat-own-bg: rgba(214, 168, 91, .14);--chat-own-border: rgba(214, 168, 91, .2);--fullscreen-bg: #090d13}.app-shell:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--app-background)}.hero,.board-panel,.card,.history-panel{background:var(--surface-bg);border:1px solid var(--surface-border);box-shadow:0 22px 50px #0000003d;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.hero{position:relative;z-index:1;display:flex;justify-content:space-between;gap:2rem;align-items:flex-end;padding:1.8rem;border-radius:1.8rem;margin-bottom:1.35rem}.eyebrow,.toolbar-label,.panel-head span,.field span,.room-line span{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--text-muted)}.hero-copy h1{margin:.45rem 0 .75rem;font-size:clamp(2.5rem,5vw,4.2rem);line-height:.95;letter-spacing:-.06em}.hero-copy p{margin:0;max-width:44rem;color:var(--text-secondary);font-size:1.02rem}.hero-badge{display:flex;flex-direction:column;gap:.45rem;min-width:11rem;padding:1rem 1.15rem;border-radius:1.2rem;background:var(--hero-badge-bg)}.hero-badge strong{font-size:1.25rem}.arena-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:1.35rem;align-items:start}.board-panel{border-radius:1.8rem;padding:1.35rem}.board-toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin-bottom:1rem}.board-toolbar strong{display:block;margin-top:.35rem;font-size:1rem}.board-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}.board-action-btn.active,.secondary-btn.active{border-color:var(--theme-accent);background:var(--theme-panel)}.theme-strip{margin-bottom:1rem;padding:1rem;border-radius:1.3rem;border:1px solid var(--surface-border);background:var(--surface-subtle)}.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.9rem}.panel-head.compact{margin-bottom:.8rem}.panel-head h2{margin:0;font-size:1rem}.history-head{display:flex;flex-direction:column;gap:.25rem}.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.theme-chip{display:flex;align-items:center;gap:.85rem;padding:.8rem;border-radius:1rem;border:1px solid var(--surface-border-strong);background:var(--surface-subtle);color:var(--text-primary);cursor:pointer;text-align:left;transition:transform .18s ease,border-color .18s ease,background .18s ease}.theme-chip:hover{transform:translateY(-1px);border-color:var(--theme-chip-accent)}.theme-chip.active{border-color:var(--theme-chip-accent);background:var(--theme-chip-panel);box-shadow:0 16px 28px #0000002e}.theme-swatch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:2.8rem;aspect-ratio:1;overflow:hidden;border-radius:.85rem;border:1px solid var(--surface-border-strong);flex:none}.theme-swatch-light{background:var(--theme-chip-light)}.theme-swatch-dark{background:var(--theme-chip-dark)}.theme-copy{display:flex;flex-direction:column;gap:.2rem;min-width:0}.theme-copy strong{font-size:.95rem}.theme-copy small{color:var(--text-muted);font-size:.78rem}.board-content{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;align-items:start}.board-stage{display:flex;justify-content:center;min-width:0}.board-viewport{display:flex;justify-content:center;width:100%}.board-viewport:fullscreen{display:grid;place-items:center;width:100vw;height:100vh;padding:1rem;background:var(--fullscreen-bg)}.board-viewport:fullscreen .board-wrap{width:min(calc(100vh - 2rem),calc(100vw - 2rem))}.board-wrap{display:flex;flex-direction:column;gap:.65rem;width:min(100%,700px)}.board-frame{display:grid;grid-template-columns:20px minmax(0,1fr);gap:.65rem;align-items:stretch}.rank-labels,.file-labels{display:grid;color:var(--text-dim);font-weight:700}.rank-labels{grid-template-rows:repeat(8,minmax(0,1fr));align-items:center;justify-items:center}.file-labels{grid-template-columns:repeat(8,minmax(0,1fr));padding-left:calc(20px + .65rem)}.board-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);width:100%;height:100%;border-radius:1.15rem;overflow:hidden;aspect-ratio:1;border:10px solid var(--board-frame);background:var(--surface-strong);box-shadow:0 22px 40px #00000047,0 0 0 1px var(--surface-soft),0 0 44px var(--board-glow)}.square{position:relative;border:none;display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0;padding:0;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.square:hover{transform:translateY(-1px);z-index:1}.square.light{background:linear-gradient(160deg,#ffffff29,#ffffff05),var(--board-light)}.square.dark{background:linear-gradient(160deg,#ffffff0f,#00000029),var(--board-dark)}.square.selected{box-shadow:inset 0 0 0 4px var(--board-highlight)}.square.last-move{box-shadow:inset 0 0 0 4px var(--board-last-move)}.square.target:after{content:"";position:absolute;inset:16%;border-radius:50%;border:3px solid var(--board-target)}.piece{display:flex;align-items:center;justify-content:center;width:68%;aspect-ratio:1;pointer-events:none;-webkit-user-select:none;user-select:none}.piece-image{width:100%;height:100%;object-fit:contain}.target-dot{width:18%;height:18%;border-radius:50%;background:var(--board-target);opacity:.35}.history-panel{margin-top:0;border-radius:1.35rem;padding:1rem}.move-list{display:grid;gap:.55rem}.move-row{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);gap:.65rem;align-items:center;padding:.65rem .8rem;border-radius:.95rem;background:var(--surface-soft);color:var(--text-secondary)}.move-number{color:var(--text-dim);font-variant-numeric:tabular-nums}.move-san{min-width:0}.export-btn{white-space:nowrap}.empty-state{padding:1rem;border-radius:1rem;color:var(--text-muted);background:var(--surface-soft)}.control-panel{display:flex;flex-direction:column;gap:1rem}.card{border-radius:1.6rem;padding:1.2rem}.segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}.segmented.compact{grid-template-columns:repeat(2,minmax(0,1fr));max-width:14rem}.mode-copy{margin:1rem 0 1.1rem;color:var(--text-secondary);line-height:1.5}.segmented-btn,.secondary-btn,.primary-btn,.level-tile{border:1px solid var(--surface-border-strong);border-radius:1rem;color:var(--text-primary);background:var(--surface-soft);transition:transform .18s ease,border-color .18s ease,background .18s ease;cursor:pointer}.segmented-btn:hover,.secondary-btn:hover,.primary-btn:hover,.level-tile:hover{transform:translateY(-1px);border-color:var(--button-hover-border)}.segmented-btn.active,.level-tile.active{background:var(--button-active-bg);border-color:var(--button-active-border)}.segmented-btn,.secondary-btn{padding:.8rem 1rem}.primary-btn{width:100%;padding:.95rem 1.1rem;background:var(--primary-bg);color:var(--primary-text);font-weight:800}.secondary-btn.danger{border-color:var(--danger-border);color:var(--danger-text)}.secondary-btn.wide{width:100%}.disconnect-btn{margin-top:1rem}.field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.95rem}.field input{width:100%;padding:.9rem 1rem;border-radius:1rem;border:1px solid var(--surface-border-strong);background:var(--surface-strong);color:var(--text-primary);outline:none}.field input:focus{border-color:var(--focus-border);box-shadow:0 0 0 4px var(--focus-ring)}.inline-field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem}.level-grid,.action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.level-tile{text-align:left;padding:1rem}.level-tile strong,.level-tile span{display:block}.level-tile span{margin-top:.25rem;color:var(--text-muted)}.field-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:1.1rem 0}.room-card{margin-top:1rem;padding:1rem;border-radius:1.2rem;background:var(--surface-soft);border:1px solid var(--surface-border)}.chat-card{display:flex;flex-direction:column;gap:.85rem}.chat-list{display:flex;flex-direction:column;gap:.65rem;max-height:16rem;overflow:auto;padding-right:.15rem}.chat-message{padding:.7rem .8rem;border-radius:1rem;background:var(--surface-soft)}.chat-message.own{background:var(--chat-own-bg);border:1px solid var(--chat-own-border)}.chat-meta{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.35rem}.chat-meta strong{font-size:.92rem}.chat-meta span{color:var(--text-dim);font-size:.76rem;text-transform:uppercase;letter-spacing:.12em}.chat-message p{margin:0;color:var(--text-secondary);line-height:1.4;word-break:break-word}.chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.7rem}.chat-form input{width:100%;padding:.9rem 1rem;border-radius:1rem;border:1px solid var(--surface-border-strong);background:var(--surface-strong);color:var(--text-primary);outline:none}.chat-form input:focus{border-color:var(--focus-border);box-shadow:0 0 0 4px var(--focus-ring)}.room-line{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.8rem}.room-line strong{text-align:right}.message-card p{margin:0;color:var(--text-secondary);line-height:1.5}.message-card.error p{color:var(--danger-text)}button:disabled{opacity:.58;cursor:not-allowed;transform:none}@media(min-width:1500px){.board-content{grid-template-columns:minmax(0,700px) minmax(220px,280px);justify-content:center}.history-panel{min-height:100%}.move-list{grid-template-columns:1fr;max-height:35rem;overflow:auto;padding-right:.2rem}}@media(max-width:1180px){.arena-layout{grid-template-columns:1fr}}@media(max-width:980px){.board-wrap{width:min(100%,640px)}}@media(max-width:720px){.app-shell{padding:1rem}.hero{flex-direction:column;align-items:flex-start;padding:1.4rem}.board-toolbar,.theme-grid,.level-grid,.action-grid,.segmented,.inline-field,.chat-form{grid-template-columns:1fr}.board-actions{flex-direction:column}.board-action-btn{width:100%}.field-row,.room-line{flex-direction:column;align-items:flex-start}.room-line strong{text-align:left}.board-frame{grid-template-columns:18px minmax(0,1fr);gap:.55rem}.file-labels{padding-left:calc(18px + .55rem)}}@media(max-width:520px){.board-panel,.card,.history-panel{padding:1rem}.panel-head{flex-direction:column;align-items:flex-start}.move-row{grid-template-columns:38px minmax(0,1fr)}.move-row .move-san:last-child{grid-column:2}}:root{font-family:Segoe UI,Trebuchet MS,sans-serif;color:#f7efe2;background:linear-gradient(160deg,#161219,#0f1620 48%,#1b2530);color-scheme:dark}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-height:100vh}button,input,select{font:inherit}
