:root{--bg: #e9efe7;--panel: #fcfdf9;--info-panel: rgba(252, 253, 249, .62);--clock-panel: rgba(237, 241, 235, .18);--border: rgba(201, 214, 205, .65);--text: #243f38;--muted: #4c6258;--active: #256b57;--hover: #35826b;--pressed: #194d3f;--sticker-locked: rgba(227, 234, 226, .35);--sticker-unlocked: rgba(244, 227, 174, .85);--locked-border: rgba(60, 84, 74, .35);--plain-button: rgba(252, 253, 249, .75);--chip: rgba(255, 255, 255, .62);--digital: rgba(255, 255, 255, .78);--reward: #f4e3ae;--success: #39845b;--success-glow: #91c86c;--hint: #d9ad61;--scrim: rgba(0, 0, 0, .06);--dialog-dim: rgba(0, 0, 0, .45);--dialog-confirm: #b0503c;--dialog-cancel: #dde7dd;--question-text: #ffffff;--question-outline: #1c332d;--clock-border: #3a4a44;--hour: #2c5aa0;--minute: #e07a1f;--second: #c23b3b;--hand-shadow: drop-shadow(0 1.2px 1px rgba(18, 38, 32, .35));--panel-shadow: 0 8px 28px rgba(18, 38, 32, .22);--card-shadow: 0 2px 6px rgba(18, 38, 32, .16);--selected-ring: #256b57;--ripple: rgba(255, 255, 255, .55);--ripple-dark: rgba(37, 107, 87, .22);--badge-land-glow: 0 0 0 6px rgba(145, 200, 108, .65);--screen-margin: 20px;--info-spacing: 10px;--corner: 8px;--panel-padding: 18px;--clock-panel-padding: 8px;--question-font: 56px;--question-column-font: 40px;--question-height: 96px;--question-column-width: 260px;--question-outline-size: 5px;--info-font: 19px;--heading-font: 24px;--caption-font: 15px;--digital-font: 34px;--badge-art-size: 64px;--badge-count-font: 22px;--button-height: 44px;--button-padding: 12px;--profile-button-width: 120px;--chip-padding: 8px;--chip-gap: 6px;--icon-button-width: 84px;--icon-button-height: 76px;--icon-art-size: 40px;--icon-bar-gap: 10px;--album-columns: 6;--album-header-size: 44px;--album-slot-size: 74px;--album-gap: 6px;--album-mark-font: 26px;--album-hint-caption-font: 11px;--dialog-button-height: 58px;--dialog-button-min-width: 172px;--dialog-button-font: 22px;--name-input-height: 52px;--reveal-title: 34px;--reveal-art-size: 130px;--panel-corner: 16px;--panel-blur: 10px;--clock-panel-blur: 1.5px;--dialog-blur: 5px;--selected-ring-size: 3px;--hover-lift: 2px;--press-scale: .94;--dialog-start-scale: .9;--help-alpha: .6;--help-pulse-count: 3;--glow-blur: 6px;--no-dial-face: rgba(253, 252, 247, .82);--reveal-wiggle-angle: 8deg;--hatch-shake-angle: 10deg;--hatch-shake-time: 1s;--press-time: .08s;--ripple-time: .5s;--view-fade-time: .35s;--dialog-enter-time: .28s;--help-pulse-time: .9s;--slot-appear-time: .3s;--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}.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;transition:opacity var(--view-fade-time) ease,visibility 0s linear 0s}#stage.mirrored{flex-direction:row-reverse}#stage.portrait{flex-direction:column;align-items:center}#stage.portrait #left{flex:0 0 auto}#stage.portrait .info-panel{flex:1 1 0}#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;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;transition:color var(--press-time) linear}.role-h{color:var(--hour)}.role-m{color:var(--minute)}.role-s{color:var(--second)}.question-text{display:inline-block;max-width:100%;transform-origin:center center}.question.solved,.question.solved span{color:var(--success-glow)}.speak-button{appearance:none;flex:0 0 auto;width:var(--button-height);height:var(--button-height);margin-left:var(--info-spacing);padding:0;border:1px solid var(--border);border-radius:50%;background:var(--plain-button);box-shadow:var(--card-shadow);cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-text-stroke:0}.speak-button svg{width:60%;height:60%;fill:var(--text);stroke:var(--text);stroke-width:1.8;stroke-linecap:round}.speak-button svg .wave{fill:none}.speak-button:active{transform:scale(var(--press-scale))}.question.wide{width:var(--question-column-width);min-height:0;font-size:var(--question-column-font)}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--panel-corner);box-shadow:var(--panel-shadow)}.clock-panel{padding:var(--clock-panel-padding);background:var(--clock-panel);-webkit-backdrop-filter:blur(var(--clock-panel-blur));backdrop-filter:blur(var(--clock-panel-blur));width:100%;aspect-ratio:1 / 1;margin:auto 0;transform-origin:center center}.clock{display:block;width:100%;height:100%;overflow:visible;touch-action:none;cursor:pointer}.clock .face{filter:drop-shadow(0 3px 6px rgba(18,38,32,.25))}.clock.no-dial .face{fill:var(--no-dial-face)}.clock .number,.clock .minute-number{font-family:inherit}.clock .hand{filter:var(--hand-shadow)}.clock .hand line{stroke-linecap:round;transition:stroke var(--press-time) linear}.clock .hand .halo{stroke:var(--success-glow);opacity:0;transition:opacity var(--press-time) linear}.clock .hand.grabbed .halo{opacity:.55}.clock.solved .hand .body{stroke:var(--success)}.clock.solved .hand .halo{opacity:.45}.clock .help-marker{stroke-linecap:round;opacity:var(--help-alpha);animation:help-pulse var(--help-pulse-time) ease-in-out var(--help-pulse-count)}@keyframes help-pulse{50%{opacity:.2}}.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)}.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)}.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}.button.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}.badge{appearance:none;flex:0 0 auto;width:var(--badge-art-size);height:var(--badge-art-size);padding:0;border:1px dashed var(--locked-border);border-radius:var(--corner);background:var(--sticker-locked);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer;font-family:inherit;transition:transform var(--press-time) ease-out}.badge.unlocked{border-style:solid;border-color:var(--border);background:var(--sticker-unlocked);box-shadow:var(--card-shadow)}.badge:active{transform:scale(var(--press-scale))}.badge-art{width:100%;height:100%;object-fit:contain;pointer-events:none}.egg-view{position:relative;display:block;pointer-events:none}.egg-view .egg-img{width:100%;height:100%;object-fit:contain;display:block}.badge .badge-egg{width:100%;height:100%}.badge-count{position:absolute;right:2px;bottom:0;font-size:var(--badge-count-font);font-weight:700;line-height:1;color:var(--active);text-shadow:0 0 3px #fff,0 0 3px #fff;pointer-events:none}.badge-text{display:flex;flex-direction:column;min-width:0;overflow-wrap:break-word}.digital-row{display:flex;gap:var(--info-spacing)}.digital{flex:1 1 0;min-width:0;text-align:center;font-size:var(--digital-font);line-height:1.25;font-variant-numeric:tabular-nums;letter-spacing:.02em;background:var(--digital);border:1px solid var(--border);border-radius:var(--corner);box-shadow:var(--card-shadow)}.phrases{flex:1 1 0;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:var(--info-spacing);font-size:var(--info-font)}.phrase-section{display:flex;flex-direction:column;gap:calc(var(--chip-gap) / 2)}.chips{display:flex;flex-wrap:wrap;gap:var(--chip-gap)}.chip{font-size:inherit;line-height:1.3;padding:0 var(--chip-padding);background:var(--chip);border:1px solid var(--border);border-radius:var(--corner)}.feedback{min-height:1.2em;transform-origin:left center;transition:color var(--press-time) linear}.feedback.help,#level-label.review{color:var(--pressed)}.icon-bar{display:flex;justify-content:center;gap:var(--icon-bar-gap);flex:0 0 auto}.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);color:var(--text);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)}.icon-button{width:var(--icon-button-width);height:var(--icon-button-height);padding:0;background:var(--plain-button);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.icon-art{width:var(--icon-art-size);height:var(--icon-art-size);object-fit:contain;pointer-events:none;display:block}.icon-art .glyph{width:100%;height:100%;display:block}.icon-caption{font-size:var(--caption-font);pointer-events:none}.dialog-card.album-card{max-width:none}.album{display:grid;grid-template-columns:var(--album-header-size) repeat(var(--album-columns),var(--album-slot-size));grid-template-rows:auto;grid-auto-rows:var(--album-slot-size);gap:var(--album-gap);justify-content:center;align-items:center}.map-head{font-size:var(--album-hint-caption-font);color:var(--muted);text-align:center;line-height:1.1}.row-head{width:var(--album-header-size);height:var(--album-header-size);justify-self:center}.row-clock{width:100%;height:100%;display:block}.album .bonus-slot{grid-column:2 / -1;height:var(--album-slot-size);flex-direction:row;justify-content:center;gap:var(--album-gap)}.album .bonus-slot .art{flex:0 0 var(--album-slot-size);height:100%}.album .bonus-slot .name{flex:0 0 auto;align-self:center;font-size:var(--caption-font)}.album .slot{align-self:stretch;justify-self:stretch}.slot{appearance:none;font-family:inherit;padding:0;position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:center;border:1px dashed var(--locked-border);border-radius:var(--corner);background:var(--sticker-locked);min-width:0;min-height:0;overflow:hidden;cursor:default;text-align:center;transition:transform var(--press-time) ease-out,box-shadow var(--press-time) ease-out}.slot.egg{border-style:solid;border-color:var(--border);background:var(--chip);cursor:pointer}.slot.egg:active{transform:scale(var(--press-scale))}.slot.locked{opacity:.55}.slot.unlocked{background:var(--sticker-unlocked);border-style:solid;border-color:var(--border);box-shadow:var(--card-shadow);cursor:pointer}.slot.unlocked:active{transform:scale(var(--press-scale))}@media(hover:hover){.slot.unlocked:hover{transform:translateY(calc(-1 * var(--hover-lift)))}}.slot.selected{box-shadow:inset 0 0 0 var(--selected-ring-size) var(--selected-ring),var(--card-shadow)}.slot .egg-view.art{flex:1 1 0;min-height:0;width:100%}.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 3px;font-size:var(--caption-font);color:var(--muted);line-height:1.2;pointer-events:none}.slot .name.egg-count{font-size:var(--album-mark-font);font-weight:700;color:var(--active);line-height:1.1}.slot.unlocked .name{color:var(--text);font-size:var(--album-hint-caption-font)}.overlay{position:fixed;inset:0;pointer-events:none}#reward-layer{z-index:70}#fx-layer{z-index:75}.fire-canvas{position:fixed;z-index:95;pointer-events:none}.fx-glow{position:fixed;background:var(--success-glow);border-radius:var(--panel-corner);filter:blur(var(--glow-blur));pointer-events:none}.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;text-align:center}.reward-card .title{font-size:var(--reveal-title)}.reward-card .caption{font-size:var(--caption-font);color:var(--muted)}.reward-card .info{font-size:var(--info-font)}.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}.reward-card.tappable{pointer-events:auto;cursor:pointer}.reward-card .tap-hint{color:var(--muted);animation:tap-pulse var(--tap-pulse-time) ease-in-out infinite}@keyframes tap-pulse{50%{opacity:.45}}.reward-card .egg-view.art{width:var(--reveal-art-size);height:var(--reveal-art-size);flex:0 0 auto}.reward-card .egg-view.art.hatching{animation:egg-shake var(--hatch-shake-time) ease-in var(--reveal-enter-time) both}@keyframes egg-shake{0%,to{transform:none}15%{transform:rotate(calc(-.3 * var(--hatch-shake-angle)))}30%{transform:rotate(calc(.4 * var(--hatch-shake-angle)))}50%{transform:rotate(calc(-.7 * var(--hatch-shake-angle)))}70%{transform:rotate(var(--hatch-shake-angle)) scale(1.05)}85%{transform:rotate(calc(-1 * var(--hatch-shake-angle))) scale(1.08)}}@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-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-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.dialog-card{background:var(--panel);padding:var(--panel-padding);max-width:min(92vw,520px);pointer-events:auto;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-box{width:min(88vw,460px)}.dialog-button{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,.button.confirm-green,.dialog-button.gender.selected{background:var(--active);color:#fff}.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%;-webkit-user-select:text;user-select:text}.name-input:focus{outline:none;border-color:var(--active);box-shadow:0 0 0 var(--selected-ring-size) var(--success-glow)}.hint{color:var(--dialog-confirm)}.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,.badge .ripple,.button.plain .ripple,.icon-button .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){.reward-card img.art,.reward-card .egg-view.art.hatching,.clock .help-marker,.ripple,.dialog-card,.dialog-dim{animation:none}#stage,.button,.slot,.badge{transition:none}}
