#wonder-ui .capability-section{margin:28px 0}#wonder-ui .capability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#wonder-ui .capability-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:20px;display:flex;align-items:flex-start;flex-direction:column;gap:10px}#wonder-ui .capability-card .subtle{flex:1;margin:0}#wonder-ui .capability-icon{display:grid;place-items:center;background:var(--wash);border-radius:14px;width:44px;height:44px;font-size:22px}#wonder-ui .capability-unavailable{font-size:12px;color:var(--sub)}
#wonder-ui .live-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:18px;margin:18px 0 26px;overflow:hidden;min-width:0}#wonder-ui .live-header{margin-bottom:16px}#wonder-ui .live-header h3{margin-top:10px}#wonder-ui .live-actions{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}#wonder-ui .live-actions button{border:1px solid var(--line);font-size:12px;min-height:40px}#wonder-ui .live-actions button[aria-pressed=true]{background:var(--wash)}#wonder-ui .live-note{padding:12px 14px;background:var(--wash);border-radius:12px;font-size:13px;line-height:1.6;margin:14px 0}#wonder-ui .live-card[aria-busy=true]{opacity:.65;pointer-events:none}
#wonder-ui .chess-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));aspect-ratio:1;border-radius:12px;overflow:hidden;width:100%;max-width:440px;margin:auto;border:1px solid var(--line)}#wonder-ui .chess-square{position:relative;display:grid;place-items:center;border:0;border-radius:0;padding:0;min-height:0!important;aspect-ratio:1;overflow:hidden}#wonder-ui .chess-square.light{background:#eee9f2}#wonder-ui .chess-square.dark{background:#aa98b8}#wonder-ui .chess-square .piece{font-size:clamp(25px,6vw,42px);line-height:1;z-index:1;font-family:'Arial Unicode MS','DejaVu Sans',serif}#wonder-ui .white-piece{color:white;text-shadow:0 1px 2px #222,-1px 0 #555,1px 0 #555}#wonder-ui .black-piece{color:#282333;text-shadow:0 1px 1px #fff9}#wonder-ui .chess-square small{position:absolute;left:3px;bottom:1px;font-size:8px;color:#302638}#wonder-ui .chess-square.legal:after{content:'';position:absolute;inset:30%;border-radius:100%;background:#24795188;z-index:2;pointer-events:none}#wonder-ui .chess-square.marked{box-shadow:inset 0 0 0 4px #e9a62a}#wonder-ui .chess-square.selected{box-shadow:inset 0 0 0 4px #7651bb}#wonder-ui .chess-square:focus-visible{outline:3px solid #385fcc;outline-offset:-3px;z-index:3}#wonder-ui .promotion-label{font-size:11px;color:var(--sub);display:flex;align-items:center;gap:8px}#wonder-ui .promotion-label select{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px}#wonder-ui .move-list{line-height:1.8;word-spacing:6px}
#wonder-ui .connect-board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--wash);padding:8px;border-radius:16px;gap:4px}#wonder-ui .connect-board button{padding:3px;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}#wonder-ui .connect-disc{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:var(--panel);box-shadow:inset 0 2px 3px #0001}#wonder-ui .connect-disc.player-1{background:#9a78d1}#wonder-ui .connect-disc.player-2{background:#e7aa54}
#wonder-ui .live-checklist,#wonder-ui .quiz-options{display:grid;gap:8px}#wonder-ui .live-checklist button,#wonder-ui .quiz-options button{display:flex;align-items:center;text-align:start;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;line-height:1.4}#wonder-ui .live-checklist [aria-checked=true]{color:var(--sub);text-decoration:line-through}#wonder-ui .quiz-options .correct{border-color:#419f70;background:#419f7020}#wonder-ui .quiz-options .incorrect{border-color:#d2915b}#wonder-ui .live-code{max-height:340px;overflow:auto;background:#24212c;color:#ede7f5;padding:16px;border-radius:12px;font:12px/1.6 ui-monospace,monospace;white-space:pre}#wonder-ui .live-preview-slot iframe{width:100%;height:320px;border:1px solid var(--line);border-radius:12px;background:white}#wonder-ui .email-fields{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:13px}#wonder-ui .email-fields dt{color:var(--sub)}#wonder-ui .email-fields dd{margin:0;overflow-wrap:anywhere}#wonder-ui .email-body{white-space:pre-wrap;line-height:1.7;font-size:14px}
@media(max-width:650px){#wonder-ui .capability-grid{grid-template-columns:1fr}#wonder-ui .live-card{padding:12px;border-radius:18px}#wonder-ui .live-actions button{min-height:44px}#wonder-ui .chess-square .piece{font-size:clamp(25px,8vw,36px)}}

#wonder-ui .focus-game{float:inline-end;font-size:11px;color:var(--sub);padding:5px 8px}#wonder-ui[data-play-focus] .composer-wrap,#wonder-ui[data-play-focus] .chat-message:not(:has(.is-focused)),#wonder-ui[data-play-focus] .activity-line,#wonder-ui[data-play-focus] .progress-state{display:none!important}#wonder-ui[data-play-focus] .chat-message:has(.is-focused)>.assistant-label,#wonder-ui[data-play-focus] .chat-message:has(.is-focused)>.chat-text,#wonder-ui[data-play-focus] .live-card:not(.is-focused){display:none}#wonder-ui[data-play-focus] .live-card.is-focused{margin:0 auto 16px}#wonder-ui[data-play-focus] .chat{max-width:560px}

/* Game styles are validated tokens; generated CSS never enters the app. */
#wonder-ui .chess-square.light{background-color:var(--game-light);color:var(--game-light-ink)}#wonder-ui .chess-square.dark{background-color:var(--game-dark);color:var(--game-dark-ink)}#wonder-ui .chess-square small{color:inherit;background:transparent}#wonder-ui .chess-square.selected{box-shadow:inset 0 0 0 4px var(--game-accent)}#wonder-ui .themed-piece{font-family:system-ui,sans-serif;text-shadow:none;display:grid;place-items:center;font-size:.73em}#wonder-ui .piece-role{position:absolute;right:2px;bottom:2px;border-radius:4px;padding:1px 3px;font:700 9px/1.1 system-ui;color:#21192a;background:#fff;box-shadow:0 1px 2px #0005;text-shadow:none}#wonder-ui .black-piece .piece-role{background:#292032;color:white}#wonder-ui .sugar-cube{display:inline-block;width:.68em;height:.68em;min-width:12px;min-height:12px;border-radius:3px;background:radial-gradient(circle,#ded4de 1px,transparent 1.2px) 0 0/5px 5px,#fffdf9;border:1px solid #b4a4ad;box-shadow:2px 3px 0 #cbbbc6,3px 4px 3px #39243944;transform:rotate(-10deg)}#wonder-ui .texture-sprinkles .chess-square{background-image:radial-gradient(ellipse at 18% 28%,#f5b32a88 0 1px,transparent 2px),radial-gradient(ellipse at 72% 78%,#ce4a8c66 0 1px,transparent 2px);background-size:23px 19px,31px 27px}#wonder-ui .texture-stars .chess-square{background-image:radial-gradient(circle at 20% 18%,#ffffff90 0 1px,transparent 2px);background-size:21px 23px}#wonder-ui .game-legend{font:10px/1.6 system-ui;color:var(--sub);margin:9px 0;text-align:center}#wonder-ui .game-legend .sugar-cube{font-size:14px}#wonder-ui .connect-disc{display:grid;place-items:center;font-size:clamp(16px,4vw,30px)}#wonder-ui .connect-disc.player-1{background:var(--game-player)}#wonder-ui .connect-disc.player-2{background:var(--game-opponent)}#wonder-ui .connect-board{background:var(--game-dark)}#wonder-ui .connect-board button{color:var(--game-dark-ink)}#wonder-ui .connect-disc.player-0{background:var(--game-light)}#wonder-ui .game-body>*{min-width:0}#wonder-ui .layout-compact .chess-board,#wonder-ui .layout-compact .connect-board{max-width:320px;margin-inline:auto}#wonder-ui .game-styler{border-top:1px solid var(--line);padding-top:16px;margin-top:18px}#wonder-ui .game-styler summary{font-size:13px;font-weight:600;min-height:30px}#wonder-ui .game-style-form{display:grid;gap:10px;margin:12px 0 16px}#wonder-ui .game-style-form label{display:grid;gap:7px;font-size:12px;color:var(--sub)}#wonder-ui .game-style-form textarea{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:12px;resize:vertical;font-size:14px;min-height:86px}#wonder-ui .game-style-form button{justify-self:start}#wonder-ui .game-style-form small{color:var(--sub);font-size:11px}#wonder-ui .style-presets{display:flex;gap:6px;flex-wrap:wrap}#wonder-ui .style-presets button{border:1px solid var(--line);font-size:12px;min-height:40px}#wonder-ui .saved-game-styles{display:flex;flex-wrap:wrap;gap:8px}#wonder-ui .saved-game-styles>div{border:1px solid var(--line);border-radius:12px;display:flex;align-items:center}#wonder-ui .saved-game-styles button{font-size:12px}#wonder-ui .game-board-area{container-type:inline-size}#wonder-ui .chess-square .piece{font-size:clamp(20px,10cqw,44px)}
@media(min-width:850px){#wonder-ui .chat:has(.layout-side-by-side){max-width:900px}#wonder-ui .layout-side-by-side .game-body{display:grid;grid-template-columns:minmax(260px,1.4fr) minmax(200px,1fr);align-items:start;gap:24px}#wonder-ui .layout-side-by-side .game-controls .live-note{margin-top:0}}
@media(prefers-reduced-motion:no-preference){#wonder-ui .chess-square{transition:background-color .3s}#wonder-ui .connect-disc{transition:background-color .3s}}

#wonder-ui .player-legend{color:var(--game-player)}#wonder-ui .opponent-legend{color:var(--game-opponent)}

#wonder-ui .game-returns{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px;position:relative;z-index:6}#wonder-ui .game-returns[hidden]{display:none}#wonder-ui .game-returns button{flex-shrink:0;border:1px solid var(--line);background:var(--panel);font-size:12px;min-height:40px;padding:8px 12px}#wonder-ui .saved-games{margin-bottom:28px}#wonder-ui .saved-games>button{display:flex;justify-content:space-between;gap:14px;width:100%;text-align:start;border:1px solid var(--line);background:var(--panel);margin-top:8px;padding:14px}#wonder-ui .saved-games>button span:last-child{color:var(--sub);font-size:12px}#wonder-ui .saved-games>button span{overflow-wrap:anywhere}

#wonder-ui .pet-pins{position:absolute;left:-76px;top:12px;width:88px;display:grid;grid-template-columns:repeat(2,40px);gap:6px;z-index:8;pointer-events:auto}#wonder-ui .pet-pins[hidden]{display:none}#wonder-ui .pet-pins button{display:grid;place-items:center;width:40px;height:40px;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:50%;box-shadow:0 3px 14px #0002;font-size:17px}#wonder-ui .pin-activity{font-size:12px;border:1px solid var(--line);padding:5px 8px;margin-inline-start:8px}#wonder-ui .pin-activity[aria-pressed=true]{background:var(--wash)}#wonder-ui .pin-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:8px 0}#wonder-ui .pin-row>button{min-width:0;overflow-wrap:anywhere;text-align:start}#wonder-ui .pin-row>div{display:flex;flex-shrink:0}#wonder-ui .pin-row>div button{padding:8px;font-size:12px}#wonder-ui .pin-visibility{display:flex;align-items:center;gap:8px;margin:16px 0}#wonder-ui .pin-row button:disabled{opacity:.35;cursor:default}#wonder-ui .pin-settings select{max-width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px}
