:root{color-scheme:light;font-family:Avenir Next,Trebuchet MS,Segoe UI,sans-serif;line-height:1.45;font-weight:400;--page-bg: #f4efe5;--page-bg-deep: #ece4d6;--surface: rgba(255, 252, 247, .97);--surface-muted: #f8f3eb;--surface-raised: #fffdf9;--surface-soft: #f2ebdf;--border: #d9cfbf;--border-strong: #c8b69d;--text: #25333a;--text-soft: #67767f;--accent: #5d7989;--accent-soft: #dce7ed;--success: #66856f;--success-soft: #e7f1e9;--warning: #ba7d58;--warning-soft: #f5e7dd;--coral: #cd8478;--gold: #e3ba64;--mint: #7ea08c;--sky: #7ca6c4;--violet: #aa9ac7;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);background:radial-gradient(circle at top,rgba(255,255,255,.82),transparent 28rem),linear-gradient(180deg,var(--page-bg) 0%,var(--page-bg-deep) 100%);color:var(--text)}*{box-sizing:border-box}html{min-height:100%;max-width:100%;overflow-x:clip}body{margin:0;min-width:320px;max-width:100%;min-height:100dvh;overflow-x:clip;color:var(--text);background:radial-gradient(circle at top,rgba(255,255,255,.82),transparent 28rem),linear-gradient(180deg,var(--page-bg) 0%,var(--page-bg-deep) 100%);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{font:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid rgba(93,121,137,.28);outline-offset:3px}[hidden]{display:none!important}#app{min-height:100dvh}.page-shell{width:min(1180px,calc(100% - 16px));max-width:100%;margin:0 auto;padding:max(8px,var(--safe-top)) max(8px,var(--safe-right)) max(8px,var(--safe-bottom)) max(8px,var(--safe-left))}.game-panel{display:flex;flex-direction:column;gap:12px;width:100%;max-width:100%;min-height:calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom));padding:16px;border:1px solid var(--border);border-radius:28px;background:var(--surface);box-shadow:0 18px 40px #20303d14;overflow:clip;--active-color: var(--accent);--active-soft: var(--accent-soft);--active-deep: #476270;--active-glow: #eef5f8;--active-border: rgba(93, 121, 137, .28)}.game-panel[data-rainbow=red]{--active-color: #d05f59;--active-soft: #f7e3e1;--active-deep: #ac4540;--active-glow: #fff1ef;--active-border: rgba(208, 95, 89, .32)}.game-panel[data-rainbow=orange]{--active-color: #d98a45;--active-soft: #f8e8da;--active-deep: #ab642a;--active-glow: #fff4ea;--active-border: rgba(217, 138, 69, .32)}.game-panel[data-rainbow=yellow]{--active-color: #dcb64b;--active-soft: #fbf1cf;--active-deep: #97741c;--active-glow: #fff8e7;--active-border: rgba(220, 182, 75, .34)}.game-panel[data-rainbow=green]{--active-color: #7ea460;--active-soft: #e8f1e0;--active-deep: #5b7f45;--active-glow: #f2f8ec;--active-border: rgba(126, 164, 96, .34)}.game-panel[data-rainbow=blue]{--active-color: #5f93d9;--active-soft: #e2ecf9;--active-deep: #406daa;--active-glow: #edf3ff;--active-border: rgba(95, 147, 217, .32)}.game-panel[data-rainbow=indigo]{--active-color: #706ad3;--active-soft: #e7e5fa;--active-deep: #4f4aa9;--active-glow: #f1efff;--active-border: rgba(112, 106, 211, .32)}.game-panel[data-rainbow=violet]{--active-color: #a07bd6;--active-soft: #efe7fb;--active-deep: #7954b3;--active-glow: #f6f1ff;--active-border: rgba(160, 123, 214, .32)}.toolbar{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:center;gap:10px}.title-group{min-width:0}.eyebrow{margin:0 0 4px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft)}.game-title{margin:0;font-size:clamp(1.62rem,2.8vw,2.38rem);line-height:.95;letter-spacing:-.05em;color:var(--text)}.subtitle{margin:6px 0 0;max-width:40ch;color:var(--text-soft);font-size:.95rem}.mode-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.mode-pill,.restart-button,.ghost-button{border-radius:999px;font-weight:700}.mode-pill{display:inline-flex;align-items:center;padding:8px 14px;border:1px solid var(--border);background:var(--surface-muted);color:var(--text);white-space:nowrap}.toolbar-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.restart-button,.ghost-button,.mode-card,.bubble-button{cursor:pointer;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,color .14s ease,opacity .14s ease,transform .14s ease}.restart-button,.ghost-button{min-height:48px;padding:11px 16px;border:1px solid transparent}.restart-button{background:var(--active-color);color:#f9fbfd;box-shadow:0 10px 24px color-mix(in srgb,var(--active-color) 28%,transparent)}.restart-button:hover:not(:disabled){background:var(--active-deep)}.ghost-button{border-color:var(--border);background:var(--surface-muted);color:var(--accent)}.ghost-button:hover:not(:disabled){border-color:var(--border-strong)}.restart-button:disabled,.ghost-button:disabled{cursor:default;opacity:.55}.play-layout{display:flex;flex:1;flex-direction:column-reverse;gap:12px;min-height:0}.board-column,.info-column{min-width:0}.board-column{display:flex;justify-content:center}.board-stage{width:min(100%,calc(100dvh - 420px),620px);max-width:100%;margin:0 auto}.board-frame{position:relative;width:100%;aspect-ratio:1 / 1;padding:clamp(12px,2vw,18px);border-radius:28px;border:1px solid var(--border);background:radial-gradient(circle at top,rgba(255,255,255,.85),transparent 34%),linear-gradient(180deg,#efe7d9,#e4d8c8);box-shadow:inset 0 1px #fffc,0 16px 30px #20303d1f}.board-overlay{position:absolute;inset:0;display:none;z-index:2;align-content:center;justify-items:center;gap:10px;padding:24px;text-align:center;background:linear-gradient(180deg,#f4efe53d,#f4efe58f);pointer-events:none}.board-overlay strong{max-width:18ch;color:var(--text);font-size:clamp(1rem,2.2vw,1.22rem);letter-spacing:-.03em}.board-overlay-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--border-strong);background:#fffdf9f0;color:var(--accent);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.bubble-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.2vw,12px);width:100%;height:100%}.bubble-button{display:block;width:100%;aspect-ratio:1 / 1;padding:0;border:0;background:transparent}.bubble-button:disabled{cursor:default}.bubble-surface{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:999px;background:radial-gradient(circle at 35% 30%,#fffdfa,#f4ecdd 58%,#decfba);box-shadow:inset 0 5px 8px #ffffffe0,inset 0 -10px 14px #ab937547,0 5px #c2b196e6,0 18px 24px #4c3d2d1f;transform:translateY(0);transition:transform .14s ease,box-shadow .14s ease,background .14s ease}.bubble-ring{position:absolute;inset:11%;border-radius:999px;border:1px solid rgba(255,255,255,.56);opacity:.75}.bubble-label{position:relative;z-index:1;font-size:clamp(1rem,2.4vw,1.22rem);font-weight:800;color:#222b34e0;font-variant-numeric:tabular-nums}.bubble-button:not(:disabled):hover .bubble-surface{transform:translateY(1px)}.bubble-button[data-lit=true] .bubble-surface{background:radial-gradient(circle at 35% 30%,var(--active-glow) 0%,color-mix(in srgb,var(--active-color) 42%,white) 42%,var(--active-color) 100%);box-shadow:inset 0 5px 8px #ffffffe0,inset 0 -10px 14px #615a482e,0 5px #ad977ebd,0 0 0 5px color-mix(in srgb,var(--active-color) 20%,white),0 14px 22px color-mix(in srgb,var(--active-color) 24%,rgba(76,61,45,.18));animation:lit-bubble 1.6s ease-in-out infinite}.bubble-button[data-popped=true]:not([data-tone=neutral]) .bubble-surface{background:radial-gradient(circle at 35% 30%,var(--active-glow) 0%,color-mix(in srgb,var(--active-color) 34%,white) 44%,color-mix(in srgb,var(--active-deep) 86%,black) 100%);transform:translateY(8px) scale(.985);box-shadow:inset 0 10px 16px #63523d2e,inset 0 -2px 4px #ffffff4d,0 1px color-mix(in srgb,var(--active-deep) 28%,rgba(194,177,150,.72))}.bubble-button[data-popped=true] .bubble-ring{opacity:.36}.bubble-button[data-popped=true] .bubble-label{opacity:.8}.info-column{display:flex;flex-direction:column;gap:10px}.info-card,.status-badge,.stat-card,.mode-card{border:1px solid var(--border);background:var(--surface-muted);box-shadow:inset 0 1px #ffffffe0}.info-card,.mode-card{border-radius:22px}.hero-card{display:flex;flex-direction:column;gap:8px;padding:14px}.section-label{margin:0;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-soft)}.mode-heading{margin:0;font-size:1.28rem;letter-spacing:-.04em}.message{margin:0;min-height:3.2rem;color:var(--text);font-size:1.02rem;font-weight:700}.prompt{margin:0;min-height:2.7rem;color:var(--text-soft);font-size:.94rem}.status-badge{display:inline-flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px 14px;border-radius:999px}.status-dot{width:15px;aspect-ratio:1 / 1;border-radius:999px;background:var(--surface-raised);box-shadow:inset 0 1px #ffffffd6}.status-badge strong{text-align:center;width:100%}.status-badge.is-accent{border-color:var(--active-border);background:var(--active-soft);color:var(--active-deep)}.status-badge.is-accent .status-dot{background:var(--active-color)}.status-badge.is-success{border-color:#66856f52;background:var(--success-soft);color:#4d6d57}.status-badge.is-success .status-dot{background:var(--success)}.status-badge.is-warning{border-color:#ba7d5847;background:var(--warning-soft);color:#986444}.status-badge.is-warning .status-dot{background:var(--warning)}.status-badge.is-calm{border-color:#c9baa3b3;background:#f3ede3;color:var(--text-soft)}.status-badge.is-calm .status-dot{background:#bbb0a0}.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.stat-card{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:72px;padding:10px 8px;border-radius:18px}.stat-card.is-accent{border-color:var(--active-border);background:var(--active-soft)}.stat-card.is-success{background:#eef6ef}.stat-card.is-warning{background:#f7eee7}.stat-card.is-calm{background:#f4eee4}.stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-soft)}.stat-card strong{font-size:clamp(1.08rem,2.4vw,1.3rem);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--text)}.mode-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mode-picker-intro{grid-column:1 / -1;display:flex;flex-direction:column;gap:4px;padding:4px 2px 2px}.mode-picker-copy{margin:0;color:var(--text-soft);font-size:.94rem}.mode-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:132px;padding:14px;text-align:left;color:var(--text)}.mode-card:hover{border-color:var(--border-strong);transform:translateY(-1px)}.mode-card-tag{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:var(--surface-soft);color:var(--text-soft);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.mode-card strong{font-size:1.02rem;letter-spacing:-.02em}.mode-card span:nth-of-type(2){color:var(--text-soft);font-size:.92rem}.mode-card-cta{margin-top:auto;color:var(--accent);font-size:.85rem;font-weight:800}.game-panel[data-mode=none] .board-stage{width:min(100%,320px)}.game-panel[data-mode=none] .board-overlay{display:grid}.game-panel[data-mode=none] .board-frame{opacity:.92}.game-panel[data-mode=none] .bubble-board{gap:6px}.game-panel[data-mode=none] #statusBadge,.game-panel[data-mode=none] #statsGrid,.game-panel[data-mode=none] #backButton,.game-panel[data-mode=none] #resetButton{display:none}.game-panel[data-mode=none] .toolbar-actions{justify-content:center}.game-panel[data-mode=none] .mode-card{min-height:148px;border-width:2px;border-color:var(--border-strong);background:linear-gradient(180deg,#fffdf8,#f7f1e7);box-shadow:inset 0 1px #ffffffeb,0 10px 18px #3e312414}.game-panel[data-mode=none] .mode-card:hover{border-color:var(--accent);box-shadow:inset 0 1px #fffffff5,0 14px 22px #3e31241f}@keyframes lit-bubble{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(1px) scale(1.02)}}@media(orientation:landscape)and (min-width:900px){.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"board info";align-items:start;gap:16px}.board-column{grid-area:board;align-items:flex-start}.info-column{grid-area:info}.board-stage{width:min(100%,calc(100dvh - 206px),760px)}.game-panel[data-mode=none] .play-layout{grid-template-columns:minmax(0,.95fr) 360px}.game-panel[data-mode=none] .board-stage{width:min(100%,calc(100dvh - 250px),420px)}}@media(max-width:980px){.toolbar{grid-template-columns:1fr;justify-items:center;text-align:center}.subtitle{max-width:50ch}.toolbar-actions{justify-content:center}.game-panel[data-mode]:not([data-mode=none]) .subtitle,.game-panel[data-mode]:not([data-mode=none]) .mode-strip{display:none}.hero-card{gap:6px;padding:12px}.message{min-height:2.6rem;font-size:.98rem}.prompt{min-height:2rem;font-size:.88rem}.status-badge{min-height:48px}.stat-card{min-height:64px;padding:9px 7px}.board-stage{width:min(100%,calc(100dvh - 560px),540px)}}@media(max-width:720px){.page-shell{width:min(100%,calc(100% - 12px));padding:max(6px,var(--safe-top)) max(6px,var(--safe-right)) max(6px,var(--safe-bottom)) max(6px,var(--safe-left))}.game-panel{min-height:calc(100dvh - 12px - var(--safe-top) - var(--safe-bottom));padding:12px;border-radius:24px}.toolbar-actions{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.board-stage{width:min(100%,calc(100dvh - 530px),360px)}.mode-picker{grid-template-columns:1fr}.mode-card{min-height:108px}}@media(max-width:520px){.page-shell{width:min(100%,calc(100% - 8px));padding:max(4px,var(--safe-top)) max(4px,var(--safe-right)) max(4px,var(--safe-bottom)) max(4px,var(--safe-left))}.game-panel{min-height:calc(100dvh - 8px - var(--safe-top) - var(--safe-bottom));gap:10px;padding:9px}.mode-strip{width:100%}.toolbar-actions{gap:6px}.restart-button,.ghost-button{min-height:44px;padding-inline:10px;font-size:.9rem}.board-stage{width:min(100%,calc(100dvh - 522px),300px)}.board-frame{padding:9px}.bubble-board{gap:6px}.hero-card{gap:4px;padding:8px}.message{height:2.8rem;min-height:2.8rem;font-size:.92rem;line-height:1.3}.prompt{height:1.4rem;min-height:1.4rem;font-size:.84rem;line-height:1.2}.status-badge{min-height:46px;padding:9px 12px}.stats-grid{gap:6px}.stat-card{min-height:64px;padding:8px 6px}.mode-card{padding:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}.restart-button,.ghost-button,.mode-card,.bubble-button,.bubble-surface{transition:none!important}.bubble-button[data-lit=true] .bubble-surface{animation:none!important}}