:root{--bg: #edf1eb;--panel: #fcfdf9;--board-panel: rgba(237, 241, 235, .14);--info-panel: rgba(252, 253, 249, .8);--sticker-locked: rgba(227, 234, 226, .2);--sticker-unlocked: rgba(244, 227, 174, .72);--border: rgba(201, 214, 205, .65);--text: #243f38;--muted: #4c6258;--active: #256b57;--hover: #35826b;--pressed: #194d3f;--inactive-cell: rgba(227, 234, 226, .6);--inactive-text: #43574a;--active-text: #ffffff;--reward: #f4e3ae;--success: #39845b;--success-glow: #91c86c;--hint: #d9ad61;--series-panel: rgba(227, 234, 226, .8);--series-box: rgba(255, 255, 255, .8);--scrim: rgba(0, 0, 0, .16);--dialog-dim: rgba(0, 0, 0, .45);--dialog-confirm: #b0503c;--dialog-cancel: #dde7dd;--question-text: #ffffff;--question-outline: #1c332d;--screen-margin: 20px;--info-spacing: 12px;--corner: 8px;--cell-gap: 4px;--board-padding: 6px;--panel-padding: 20px;--question-font: 64px;--question-column-font: 48px;--question-height: 86px;--info-font: 20px;--heading-font: 26px;--caption-font: 16px;--cell-font: 24px;--slot-font: 14px;--slot-label-padding: 3px;--rank-icon-size: 64px;--sticker-hint-font: 34px;--sticker-hint-caption-font: 12px;--series-symbol-size: 34px;--series-symbol-font: 18px;--series-product-font: 14px;--series-factor-font: 10px;--series-box-min-width: 18px;--series-box-height: 24px;--series-box-gap: 3px;--button-height: 44px;--dialog-button-height: 58px;--dialog-button-min-width: 172px;--dialog-button-font: 22px;--name-input-height: 52px;--profile-button-width: 120px;--reveal-title: 34px;--reveal-art-size: 120px;--question-outline-size: 5px;--question-column-width: 240px;--feedback-dim: .3;--button-padding: 12px;--sticker-gap: 8px;--series-panel-padding: 6px;--series-symbol-gap: 6px;--series-dot-size: 7px;--div-sign-raise: .1em;--album-min-height: 90px;--series-product-fit: 4.2cqi;--plain-button: rgba(252, 253, 249, .75);--panel-shadow: 0 8px 28px rgba(18, 38, 32, .22);--card-shadow: 0 2px 6px rgba(18, 38, 32, .16);--key-edge: #123b30;--key-highlight: rgba(255, 255, 255, .28);--key-top: #2f7d66;--selected-ring: #256b57;--locked-border: rgba(60, 84, 74, .35);--ripple: rgba(255, 255, 255, .55);--ripple-dark: rgba(37, 107, 87, .22);--sticker-land-glow: 0 0 0 6px rgba(145, 200, 108, .65);--panel-corner: 16px;--panel-blur: 10px;--board-panel-blur: 1.5px;--dialog-blur: 5px;--key-depth: 3px;--selected-ring-size: 3px;--hover-lift: 2px;--press-scale: .94;--cell-appear-scale: .6;--dialog-start-scale: .9;--press-time: .08s;--ripple-time: .5s;--cell-appear-time: .3s;--view-fade-time: .35s;--dialog-enter-time: .28s;--reveal-wiggle-angle: 8deg;--reveal-wiggle-time: .9s;--reveal-enter-time: .3s}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Viga,Trebuchet MS,Segoe UI,sans-serif;-webkit-user-select:none;user-select:none;touch-action:manipulation}.bg{position:fixed;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0}#bg-a{opacity:1}.scrim{position:fixed;inset:0;background:var(--scrim);pointer-events:none}body:not(.ready) #app{visibility:hidden}#app{position:fixed;left:0;top:0;width:100%;height:100%;transform-origin:0 0;overflow:hidden}#fx-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}#stage{position:absolute;inset:0;display:flex;flex-direction:row;align-items:stretch;justify-content:center;gap:var(--screen-margin);padding:var(--screen-margin);z-index:10}#stage.portrait{flex-direction:column;align-items:center}#stage.portrait #left{flex:0 0 auto}#stage.portrait .info-panel{flex:1 1 0}#stage{transition:opacity var(--view-fade-time) ease,visibility 0s linear 0s}#stage.hidden-view{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--view-fade-time) ease,visibility 0s linear var(--view-fade-time)}#left{display:flex;flex-direction:column;align-items:center;gap:var(--info-spacing);flex:0 0 auto;min-width:0;min-height:0}.question{margin:0;width:100%;min-height:var(--question-height);display:flex;align-items:center;justify-content:center;text-align:center;white-space:pre-line;color:var(--question-text);font-size:var(--question-font);font-weight:400;line-height:1.05;-webkit-text-stroke:var(--question-outline-size) var(--question-outline);paint-order:stroke fill;flex:0 0 auto;transform-origin:center center}.question .div-sign{position:relative;top:calc(-1 * var(--div-sign-raise))}.question.wide{width:var(--question-column-width);min-height:0;font-size:var(--question-column-font)}.question.rich{font-size:var(--question-rich-font)}.question.rich.wide{font-size:var(--question-rich-column-font)}.question-body{display:flex;flex-direction:column;align-items:center;gap:var(--question-box-gap);width:100%}.question-caption{font-size:var(--question-caption-font);-webkit-text-stroke-width:calc(var(--question-outline-size) / 2);white-space:nowrap}.question-series{display:flex;align-items:center;gap:var(--question-box-gap);width:100%}.question-series .q-boxes{flex:1 1 auto;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--question-box-gap)}.question.wide .question-series{flex-direction:column}.question.wide .question-series .q-boxes{align-self:stretch;grid-template-columns:repeat(var(--question-series-wide-columns),minmax(0,1fr))}.q-box{min-width:0;border-radius:var(--corner);background:var(--series-box);border:1px solid var(--border);color:var(--text);-webkit-text-stroke:0;line-height:1.3;font-size:.8em}.q-box.open{background:transparent;border-style:dashed;border-color:var(--question-text)}.q-box.current{background:var(--hint);border:2px solid var(--question-text);box-shadow:0 0 0 3px var(--question-outline)}.question .fx-hidden-mark{color:transparent;-webkit-text-stroke-color:transparent}.question-series>.question-mark{flex:0 0 auto}.picture,.info-panel.picture-mode .album-heading,.info-panel.picture-mode #album-hint,.info-panel.picture-mode .album-area,.info-panel.picture-mode .series{display:none}.info-panel.picture-mode .picture{flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--info-spacing);background:var(--series-panel);border:1px solid var(--border);border-radius:var(--corner);padding:var(--series-panel-padding);overflow:hidden}.picture .picture-text{text-align:center;font-size:var(--info-font);color:var(--text)}.picture .dots{display:grid;gap:var(--picture-dot-gap)}.picture .groups{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--picture-group-gap)}.picture .group{padding:var(--picture-group-padding);border:2px solid var(--active);border-radius:calc(2 * var(--corner));display:grid;gap:var(--picture-dot-gap);grid-template-columns:repeat(var(--group-columns),var(--picture-dot))}.picture .dot{width:var(--picture-dot);height:var(--picture-dot);border-radius:50%;background:var(--active)}.slot .art.shadow,.slot .art.outline{position:absolute;inset:0;width:100%;height:100%}.slot .name,.slot .hint{position:relative}.slot .art.shadow{filter:brightness(0) blur(var(--silhouette-shadow-blur));opacity:var(--silhouette-shadow-alpha)}.slot .art.outline,.reward-card img.art.outline{filter:brightness(0);opacity:var(--silhouette-outline-alpha)}.reward-card img.art.shadow{filter:brightness(0) blur(var(--silhouette-shadow-blur));opacity:var(--silhouette-shadow-alpha)}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--panel-corner);box-shadow:var(--panel-shadow)}.board-panel{padding:var(--board-padding);background:var(--board-panel);-webkit-backdrop-filter:blur(var(--board-panel-blur));backdrop-filter:blur(var(--board-panel-blur));width:100%;margin:auto 0}.board{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--cell-gap);aspect-ratio:1 / 1;width:100%}.cell{appearance:none;border:1px solid var(--border);border-radius:var(--corner);background:var(--inactive-cell);color:var(--inactive-text);font-family:inherit;font-size:var(--cell-font);font-weight:400;padding:0;display:flex;align-items:center;justify-content:center;cursor:default;min-width:0;position:relative;overflow:hidden;transition:transform var(--press-time) ease-out,box-shadow var(--press-time) ease-out,background-color var(--press-time) ease-out,opacity var(--press-time) linear}.cell:not(:disabled){background:linear-gradient(180deg,var(--key-top),var(--active));border-color:var(--key-edge);color:var(--active-text);cursor:pointer;box-shadow:inset 0 1px 0 var(--key-highlight),0 var(--key-depth) 0 var(--key-edge),var(--card-shadow);transform:translateY(calc(-1 * var(--key-depth) / 2))}@media(hover:hover){.cell:not(:disabled):hover{background:linear-gradient(180deg,var(--hover),var(--key-top))}}.cell:not(:disabled):active{background:var(--pressed);box-shadow:inset 0 2px 4px #0000004d;transform:translateY(calc(var(--key-depth) / 2)) scale(var(--press-scale))}.cell.appear{animation:cell-appear var(--cell-appear-time) cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--appear-delay, 0s)}@keyframes cell-appear{0%{transform:scale(var(--cell-appear-scale));filter:brightness(1.6)}}.cell.fx-dim{opacity:var(--feedback-dim)}.info-panel{flex:0 0 auto;min-height:0;overflow-x:hidden;overflow-y:auto;padding:var(--panel-padding);background:var(--info-panel);-webkit-backdrop-filter:blur(var(--panel-blur)) saturate(1.2);backdrop-filter:blur(var(--panel-blur)) saturate(1.2);display:flex;flex-direction:column;gap:var(--info-spacing)}.info-side,.info-main{display:contents}.info-panel .heading-row{order:1}.info-panel .rank-row{order:2}.info-panel .sep{order:3}.info-main>*{order:4}.info-panel #feedback{order:5}.info-panel #accuracy{order:6}.info-panel #reset-button{order:7}.info-panel.portrait{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);column-gap:var(--screen-margin)}.info-panel.portrait .info-side,.info-panel.portrait .info-main{display:flex;flex-direction:column;gap:var(--info-spacing);min-width:0;min-height:0}.info-panel.portrait .sep{display:none}.info-panel.portrait #reset-button{margin-top:auto}.row{display:flex;align-items:center;gap:var(--info-spacing);min-width:0}.column{display:flex;flex-direction:column;gap:var(--info-spacing)}.grow{flex:1 1 auto;min-width:0}.center{text-align:center}.center-row{justify-content:center}.sep{width:100%;border:0;border-top:1px solid var(--border);margin:0}.heading{font-size:var(--heading-font);line-height:1.15}.info{font-size:var(--info-font);line-height:1.15}.caption{font-size:var(--caption-font);line-height:1.2}.muted{color:var(--muted)}.rank-icon{width:var(--rank-icon-size);height:var(--rank-icon-size);object-fit:contain;flex:0 0 auto}.rank-text{display:flex;flex-direction:column;min-width:0;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}.feedback{min-height:1.2em;transform-origin:left center}.button{font-family:inherit;border:1px solid var(--border);border-radius:var(--corner);min-height:var(--button-height);padding:0 var(--button-padding);cursor:pointer;position:relative;overflow:hidden;box-shadow:var(--card-shadow);transition:transform var(--press-time) ease-out,filter var(--press-time) linear,box-shadow var(--press-time) ease-out}@media(hover:hover){.button:hover{filter:brightness(.92)}}.button:active{filter:brightness(.84);box-shadow:none;transform:scale(var(--press-scale))}.button.plain{background:var(--plain-button);color:var(--muted);font-size:var(--caption-font)}.heading-row .caption{flex:1 0 auto}.profile-button{flex:0 1 auto;width:var(--profile-button-width);min-width:var(--button-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.about-button{flex:0 0 auto;width:var(--button-height);padding:0;border-radius:50%}.about-link{display:flex;align-items:center;justify-content:center;text-decoration:none}.about-ai{font-size:calc(.8 * var(--caption-font));line-height:1.35}.album-area{contain:size;flex:1 1 0;min-height:var(--album-min-height);display:flex;justify-content:center;align-items:center}.album{display:grid;gap:var(--sticker-gap);flex:0 0 auto}.slot{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:center;border:1px solid var(--border);border-radius:var(--corner);background:var(--sticker-locked);border-style:dashed;border-color:var(--locked-border);min-width:0;min-height:0;overflow:hidden;cursor:pointer;text-align:center;transition:transform var(--press-time) ease-out,box-shadow var(--press-time) ease-out}.slot:active{transform:scale(var(--press-scale))}.slot.selected{box-shadow:inset 0 0 0 var(--selected-ring-size) var(--selected-ring)}.slot.microbe-first{grid-column-start:1}.slot.unlocked{background:var(--sticker-unlocked);border-style:solid;border-color:var(--border);box-shadow:var(--card-shadow)}.slot.unlocked.selected{box-shadow:inset 0 0 0 var(--selected-ring-size) var(--selected-ring),var(--card-shadow)}@media(hover:hover){.slot.unlocked:hover{transform:translateY(calc(-1 * var(--hover-lift)))}}.slot .art{flex:1 1 0;min-height:0;width:100%;object-fit:contain;pointer-events:none}.slot .name{flex:0 0 auto;white-space:nowrap;overflow:hidden;padding:0 var(--slot-label-padding);font-size:var(--slot-font);color:var(--muted);line-height:1.2;pointer-events:none}.slot.unlocked .name{color:var(--text)}.slot .name.hint-number{font-size:var(--sticker-hint-font);color:var(--active);line-height:1.1}.slot .hint{white-space:nowrap;overflow:hidden;padding:0 var(--slot-label-padding);font-size:var(--sticker-hint-caption-font);color:var(--muted);line-height:1.2;pointer-events:none}.series{flex:0 0 auto;width:100%;background:var(--series-panel);border:1px solid var(--border);border-radius:var(--corner);padding:var(--series-panel-padding);display:flex;align-items:center;justify-content:center;gap:var(--series-symbol-gap);container-type:inline-size}.series-row{display:flex;align-items:center;width:100%;gap:var(--series-symbol-gap)}.series[hidden]{display:none}.series .symbol{width:var(--series-symbol-size);height:var(--series-symbol-size);flex:0 0 auto;border:1px solid var(--border);border-radius:var(--corner);background:var(--sticker-locked);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.series .symbol.unlocked{background:var(--sticker-unlocked)}.series .symbol img{width:100%;height:100%;object-fit:contain}.series .symbol .lock{font-size:var(--series-symbol-font);color:var(--muted)}.series .grid{flex:1 1 auto;display:grid;grid-template-columns:auto repeat(10,minmax(var(--series-box-min-width),1fr));gap:var(--series-box-gap);align-items:center;min-width:0}.series .cell-label{text-align:center;font-size:var(--series-factor-font);color:var(--muted)}.series .box{background:var(--series-box);box-shadow:var(--card-shadow);border:1px solid var(--border);border-radius:var(--corner);height:var(--series-box-height);display:flex;align-items:center;justify-content:center;font-size:min(var(--series-product-font),var(--series-product-fit));color:var(--text)}.series .dot{width:var(--series-dot-size);height:var(--series-dot-size);border-radius:50%;background:var(--muted);justify-self:center}.series .factor{text-align:center;font-size:var(--series-factor-font);color:var(--muted)}.overlay{position:fixed;inset:0;pointer-events:none}#reward-layer{z-index:70}#fx-layer{z-index:75}.reward-card{position:absolute;box-shadow:var(--panel-shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--info-spacing);background:var(--reward);border:1px solid var(--border);border-radius:var(--panel-corner);padding:var(--panel-padding);transform-origin:center center;overflow:hidden}.reward-card .title{font-size:var(--reveal-title);text-align:center}.reward-card .caption,.reward-card .info{text-align:center}.reward-card.tappable{pointer-events:auto;cursor:pointer}.reward-card .tap-hint{text-align:center;color:var(--muted);animation:tap-pulse var(--tap-pulse-time) ease-in-out infinite}@keyframes tap-pulse{50%{opacity:.45}}.reward-card img.art{width:var(--reveal-art-size);height:var(--reveal-art-size);flex:0 0 auto;object-fit:contain;animation:art-wiggle var(--reveal-wiggle-time) ease-in-out var(--reveal-enter-time) both}@keyframes art-wiggle{0%,to{transform:none}20%{transform:rotate(calc(-1 * var(--reveal-wiggle-angle))) scale(1.08)}45%{transform:rotate(var(--reveal-wiggle-angle)) scale(1.08)}70%{transform:rotate(calc(-.5 * var(--reveal-wiggle-angle)))}}.dialog{position:fixed;inset:0;z-index:90}.dialog[hidden]{display:none}.dialog-dim{position:absolute;inset:0;background:var(--dialog-dim);-webkit-backdrop-filter:blur(var(--dialog-blur));backdrop-filter:blur(var(--dialog-blur));animation:fade-in var(--dialog-enter-time) ease-out both}.dialog-card{animation:dialog-in var(--dialog-enter-time) cubic-bezier(.34,1.56,.64,1) both}@keyframes fade-in{0%{opacity:0}}@keyframes dialog-in{0%{opacity:0;transform:scale(var(--dialog-start-scale))}}.dialog-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.dialog-card{background:var(--panel);padding:var(--panel-padding);max-width:min(92vw,520px)}.dialog-box{width:min(88vw,460px)}.dialog-button{font-family:inherit;min-width:var(--dialog-button-min-width);min-height:var(--dialog-button-height);font-size:var(--dialog-button-font);background:var(--dialog-cancel);color:var(--text)}.dialog-button.confirm{background:var(--dialog-confirm);color:#fff}.dialog-button.confirm-green,.dialog-button.gender.selected{background:var(--active);color:#fff}.name-input:focus{outline:none;border-color:var(--active);box-shadow:0 0 0 var(--selected-ring-size) var(--success-glow)}.name-input{font-family:inherit;font-size:var(--info-font);min-height:var(--name-input-height);border:1px solid var(--border);border-radius:var(--corner);padding:0 var(--button-padding);background:#fff;color:var(--text);width:100%}.hint{color:var(--dialog-confirm)}.dialog-button[hidden],.column[hidden]{display:none}.board.input-locked{pointer-events:none}.ripple{position:absolute;border-radius:50%;background:var(--ripple);pointer-events:none;transform:scale(0);animation:ripple var(--ripple-time) ease-out forwards}.slot .ripple,.button.plain .ripple,.dialog-button:not(.confirm):not(.confirm-green):not(.selected) .ripple{background:var(--ripple-dark)}@keyframes ripple{to{transform:scale(1);opacity:0}}@media(prefers-reduced-motion:reduce){.cell.appear,.reward-card img.art,.reward-card .tap-hint,.ripple,.dialog-card,.dialog-dim{animation:none}#stage,.cell,.button,.slot{transition:none}}