:root{color-scheme:dark;--bg-top: #09111f;--bg-bottom: #142744;--panel: rgba(10, 16, 29, .78);--panel-border: rgba(255, 255, 255, .12);--text-main: #eef4ff;--text-soft: rgba(238, 244, 255, .72);--accent: #6db7ff;--accent-warm: #ff9c6b;--success: #8fe388;--hud-padding-x: 20px;--hud-gap-x: 20px;--hud-left-column-width: 280px;--hud-right-column-width: 190px;--level-progress-left: calc(var(--hud-padding-x) + var(--hud-left-column-width) + var(--hud-gap-x));--level-progress-right-offset: calc(var(--hud-padding-x) + var(--hud-right-column-width) + var(--hud-gap-x));--level-progress-width: calc(100vw - var(--level-progress-left) - var(--level-progress-right-offset))}*{box-sizing:border-box;margin:0;padding:0}body{overflow:hidden;font-family:Trebuchet MS,Segoe UI,sans-serif;color:var(--text-main);background:radial-gradient(circle at top left,rgba(109,183,255,.18),transparent 35%),radial-gradient(circle at bottom right,rgba(255,156,107,.18),transparent 32%),linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%);user-select:none;-webkit-user-select:none}.asset-credit-inline{position:absolute;left:50%;bottom:-40px;z-index:1;display:flex;align-items:center;gap:8px;transform:translate(-50%,8px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;white-space:nowrap}.asset-credit-link{padding:6px 10px;border-radius:999px;color:#eef4ff8a;background:#09111f47;border:1px solid rgba(255,255,255,.06);font-size:11px;letter-spacing:.02em;text-decoration:none;transition:color .18s ease,background .18s ease,border-color .18s ease}.asset-credit-separator{padding:6px 10px;font-size:11px;color:#eef4ff6b}.asset-credit-link:hover{color:#eef4ffe6;background:#09111f80;border-color:#6db7ff33}body.dog-focus-active .asset-credit-inline{opacity:1;pointer-events:auto;transform:translate(-50%)}#app,#app>canvas{display:block;width:100vw;height:100vh}body.dog-focus-active #app,body.dog-focus-active #app>canvas{opacity:0;pointer-events:none;visibility:hidden}.dog-backdrop{position:fixed;inset:0;opacity:0;pointer-events:none;background:#04081000;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:opacity .24s ease,background .24s ease,backdrop-filter .24s ease,-webkit-backdrop-filter .24s ease;z-index:17}.dog-backdrop.is-visible{opacity:1;pointer-events:auto;background:#0408102e;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.dog-corner{position:fixed;right:12px;bottom:62px;width:clamp(220px,24vw,340px);height:clamp(220px,30vh,360px);pointer-events:auto;z-index:18;border-radius:0;background:transparent;border:0;cursor:zoom-in;transition:right .26s ease,bottom .26s ease,transform .24s ease}.dog-corner:before{content:"";position:absolute;inset:12% 10% 0;border-radius:50%;background:radial-gradient(circle,rgba(109,183,255,.2) 0%,rgba(109,183,255,.09) 42%,transparent 74%);opacity:.8}.dog-corner:hover{transform:translateY(-4px) scale(1.02)}.dog-corner.is-expanded{right:var(--level-progress-right-offset);bottom:calc(50vh - (min(780px,82vh)/2));width:var(--level-progress-width);height:min(780px,82vh);cursor:zoom-out;transform:none;background:transparent}.dog-corner.is-expanded:hover{transform:none}.dog-stage{position:absolute;right:0;bottom:0;width:74%;height:74%;cursor:inherit;transition:width .26s ease,height .26s ease}.dog-corner.is-expanded .dog-stage{width:100%;height:100%}.dog-stage canvas{display:block;width:100%;height:100%}.dog-contact-copy{position:absolute;left:50%;top:calc(100% + 8px);width:max-content;max-width:min(320px,86vw);padding:8px 12px;border-radius:16px;background:#080e18b8;border:1px solid rgba(255,255,255,.08);color:#eef4ffd1;font-size:12px;line-height:1.45;text-align:center;text-decoration:none;pointer-events:auto;transform:translate(-50%);box-shadow:0 12px 28px #00000038}.dog-contact-copy span{color:#8fe388}.dog-corner.is-expanded .dog-contact-copy{display:none}.dog-qr-button{position:absolute;--dog-qr-original-size: 1491px;--dog-qr-collapsed-size: clamp(220px, 24vw, 320px);--dog-qr-expanded-size: min(var(--dog-qr-original-size), calc(100vw - 64px) , calc(100vh - 180px) );top:138px;right:32px;width:0;height:0;padding:0;border:0;background:transparent;opacity:0;pointer-events:none;cursor:zoom-in;z-index:2;transition:opacity .22s ease,width .22s ease,height .22s ease,transform .22s ease;transform:translateY(8px)}.dog-qr{display:block;width:100%;height:100%;object-fit:cover;border-radius:18px;border:1px solid rgba(255,255,255,.06);background:#080e18b8;box-shadow:0 18px 40px #00000047}.dog-qr-hint{position:absolute;top:calc(100% - 38px);left:50%;padding:8px 14px;border-radius:999px;background:#080e18d1;border:1px solid rgba(255,255,255,.08);color:#eef4ffe0;font-size:13px;font-weight:700;letter-spacing:.03em;white-space:nowrap;opacity:1;transform:translate(-50%);box-shadow:0 14px 28px #0003;transition:opacity .18s ease,transform .18s ease}.dog-corner.is-expanded .dog-stage{cursor:grab}.dog-corner.is-expanded .dog-stage:active{cursor:grabbing}.dog-corner.is-expanded .dog-qr-button{width:var(--dog-qr-collapsed-size);height:var(--dog-qr-collapsed-size);opacity:1;pointer-events:auto;transform:translateY(0)}.dog-donation-copy{position:absolute;top:138px;left:32px;width:min(400px,32vw);max-width:min(400px,32vw);display:flex;flex-direction:column;gap:12px;padding:18px 20px;border-radius:24px;background:linear-gradient(180deg,#080e18d6,#0a121fc7);box-shadow:0 22px 46px #00000042;color:#eef4ffeb;font-family:Lucida Handwriting,Apple Chancery,URW Chancery L,Trebuchet MS,cursive;font-size:clamp(14px,1.1vw,16px);font-style:italic;line-height:1.55;opacity:0;pointer-events:none;z-index:1;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease}.dog-donation-copy p{margin:0}.dog-donation-copy-lead{color:#f6f9ff;font-size:clamp(15px,1.28vw,17px);font-weight:700;line-height:1.45}.dog-donation-copy-accent{color:#8fe388;font-weight:600}.dog-donation-copy-plain{font-style:normal}.dog-donation-copy-thanks{color:#eef4fffa}.dog-donation-copy-contact{font-style:normal;color:#eef4ffd6;font-size:15px}.dog-donation-copy-contact span{color:#8fe388}.dog-donation-copy-heart{display:inline-block;margin-left:4px;font-style:normal}.dog-donation-copy-signature{padding-top:4px;color:#ffffffc7;font-size:15px;font-weight:700;letter-spacing:.03em;font-style:italic}.dog-corner.is-expanded .dog-donation-copy{opacity:1;transform:translateY(0)}.dog-corner.is-qr-expanded .dog-qr-button{width:var(--dog-qr-expanded-size);height:var(--dog-qr-expanded-size);cursor:zoom-out}.dog-corner.is-qr-expanded .dog-qr-hint{opacity:0;transform:translate(-50%) translateY(-6px)}.dog-corner.is-qr-expanded .dog-donation-copy{opacity:.45}.dog-close{position:absolute;top:74px;right:32px;min-width:112px;height:46px;padding:0 18px;display:grid;place-items:center;border:0;border-radius:999px;background:#080e18db;color:#ffffffeb;font-size:15px;font-weight:700;letter-spacing:.03em;line-height:1;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(-8px) scale(.92);box-shadow:0 16px 34px #00000047;transition:opacity .22s ease,transform .22s ease,background .22s ease}.dog-close:hover{background:#121c2df0}.dog-close:focus-visible{outline:2px solid rgba(109,183,255,.9);outline-offset:3px}.dog-corner.is-expanded .dog-close{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}.hud{position:fixed;inset:0;display:grid;grid-template-columns:minmax(240px,280px) minmax(360px,1fr) minmax(170px,190px);grid-template-rows:auto 1fr;align-content:start;gap:18px var(--hud-gap-x);padding:18px var(--hud-padding-x) 20px;overflow-y:auto;overflow-x:hidden;pointer-events:none}.level-progress{position:relative;grid-column:2;grid-row:1;width:100%;min-width:0;align-self:start;padding:8px 14px 10px;border-radius:22px;border:1px solid rgba(255,255,255,.12);background:#0a101db8;backdrop-filter:blur(18px);box-shadow:0 22px 50px #0000003d;pointer-events:auto}.start-center-row{grid-column:2;grid-row:1;justify-self:center;align-self:start;margin-top:146px;pointer-events:auto;z-index:1}.level-progress-title{margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);text-align:center}.level-track{position:relative;height:82px}.level-track.is-two-rows{height:122px}.level-track.is-three-rows{height:162px}.level-track-line,.level-track-fill{position:absolute;left:14px;right:14px;top:33px;height:4px;border-radius:999px}.level-track-line{display:none}.level-track-fill{right:auto;width:0;background:linear-gradient(90deg,#6db7ff,#8fe388);box-shadow:0 0 18px #6db7ff47;transition:width .26s ease;z-index:0}.level-markers{position:absolute;inset:42px 0 0;z-index:1}.level-marker{position:absolute;top:0;width:52px;margin-left:-26px;text-align:center;transition:transform .18s ease}.level-marker.is-selectable{cursor:pointer}.level-marker.is-selectable:hover{transform:translateY(-3px)}.level-marker.is-selectable .level-dot{border-color:#6db7ff59}.level-marker.is-active{transform:translateY(-4px) scale(1.04)}.level-dot{width:34px;height:34px;margin:-24px auto 6px;border-radius:999px;border:2px solid rgba(255,255,255,.18);background:#1c2738;color:var(--text-soft);font-size:14px;font-weight:800;line-height:30px;position:relative;z-index:1}.level-marker.is-complete .level-dot{background:#6db7ff;border-color:#6db7ffcc;color:#eef4ff}.level-marker.is-active .level-dot{background:#ff9c6b;border-color:#ff9c6bd9;color:#fff5ef;box-shadow:0 0 24px #ff9c6b6b,0 0 0 4px #ff9c6b24;transform:scale(1.08)}.level-marker.is-locked .level-dot{opacity:.5;filter:blur(1.4px);color:#c4c9d2d1}.level-marker.is-locked .level-stars{opacity:.35;filter:blur(1.6px)}.level-stars{font-size:12px;font-weight:700;letter-spacing:.06em;color:#ffd166;white-space:nowrap}.star-earned{color:#ffd166}.star-empty{color:#c2c8d2b3}.panel{position:relative;max-width:min(420px,calc(100vw - 32px));padding:20px 22px;background:var(--panel);backdrop-filter:blur(18px);border:1px solid var(--panel-border);border-radius:18px;box-shadow:0 22px 50px #00000047}.panel-left{grid-column:1;grid-row:1;width:100%;max-width:none;align-self:start}.theme-panel{position:absolute;left:20px;bottom:20px;width:min(220px,calc(100vw - 32px));padding:16px 18px;border-radius:18px;border:1px solid var(--panel-border);background:var(--panel);backdrop-filter:blur(18px);box-shadow:0 22px 50px #0000003d}.theme-title{margin-bottom:10px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft)}.theme-options{display:block;pointer-events:auto}.theme-select{appearance:none;width:100%;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 34px 12px 14px;background:#ffffff0a;color:var(--text-main);font-size:14px;font-weight:700;cursor:pointer;transition:border-color .18s ease,background .18s ease;background-image:linear-gradient(45deg,transparent 50%,rgba(238,244,255,.78) 50%),linear-gradient(135deg,rgba(238,244,255,.78) 50%,transparent 50%);background-position:calc(100% - 20px) calc(50% - 2px),calc(100% - 14px) calc(50% - 2px);background-size:6px 6px,6px 6px;background-repeat:no-repeat}.theme-select:focus{outline:none;border-color:#6db7ffb3;background:#6db7ff1f}.theme-select option{background:#101a29;color:var(--text-main)}.panel-right{grid-column:3;grid-row:1;width:100%;min-width:0;max-width:none;justify-self:end;align-self:start;padding:14px 16px}.phase-popup-shell{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .22s ease;z-index:20}.phase-popup-shell.is-visible{opacity:1}.phase-popup-backdrop{position:absolute;inset:0;background:#060a1275;backdrop-filter:blur(10px)}.phase-popup{position:relative;width:min(560px,calc(100vw - 32px));padding:28px 30px;border-radius:24px;border:1px solid rgba(255,255,255,.14);background:radial-gradient(circle at top,rgba(109,183,255,.22),transparent 45%),#09111feb;box-shadow:0 30px 80px #00000057;transform:translateY(16px) scale(.96);transition:transform .26s ease;text-align:center}.phase-popup-shell.is-visible .phase-popup{transform:translateY(0) scale(1)}.phase-popup.is-bonus{background:radial-gradient(circle at top,rgba(255,183,3,.26),transparent 45%),#140d07ed;border-color:#ffd16657}.phase-popup-tag{display:inline-block;margin-bottom:12px;padding:6px 10px;border-radius:999px;background:#6db7ff26;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.phase-popup.is-bonus .phase-popup-tag{background:#ffd16624;color:#ffd166}.primary-actions{display:flex;gap:10px;margin-top:18px;pointer-events:auto;flex-wrap:wrap}.start-button{margin-top:0;pointer-events:auto;appearance:none;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:16px 26px;background:linear-gradient(180deg,#fff3,#fff0 42%),linear-gradient(135deg,#9ad4ff,#6db7ff 42%,#4f8ef7);color:#04101f;font-size:17px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 18px 36px #4f8ef757,inset 0 1px #ffffff57;flex:1 1 0;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.start-button:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 22px 44px #4f8ef766,inset 0 1px #ffffff61;filter:saturate(1.06)}.start-button:active{transform:translateY(0) scale(.995)}.start-button:focus-visible{outline:2px solid rgba(109,183,255,.96);outline-offset:4px}.start-center-row .start-button{min-width:220px;flex:none}.secondary-button{margin-top:0;margin-left:0;pointer-events:auto;appearance:none;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 18px;background:#ffffff0f;color:var(--text-main);font-size:15px;font-weight:700;cursor:pointer;flex:1 1 0}.phase-popup-title{font-size:clamp(30px,5vw,48px);font-weight:700;line-height:1;margin-bottom:10px}.phase-popup-copy{color:var(--text-soft);font-size:16px;line-height:1.5}.phase-popup-next{margin-top:14px;font-size:21px;font-weight:700;color:var(--text-main)}.phase-popup-actions{display:flex;gap:10px;margin-top:18px;pointer-events:auto;justify-content:center}.popup-button{appearance:none;border:0;border-radius:14px;padding:12px 16px;font-size:14px;font-weight:800;cursor:pointer}.popup-button-primary{background:linear-gradient(135deg,#6db7ff,#4f8ef7);color:#08111f}.popup-button-secondary{background:#ffffff14;color:var(--text-main);border:1px solid rgba(255,255,255,.12)}.challenge-shell{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .22s ease;z-index:21}.challenge-shell.is-visible{opacity:1;pointer-events:auto}.challenge-backdrop{position:absolute;inset:0;background:#060a1294;backdrop-filter:blur(10px)}.challenge-panel{position:relative;width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;padding:24px;border-radius:24px;border:1px solid rgba(255,255,255,.14);background:#09111ff0;box-shadow:0 30px 80px #00000057}.challenge-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.challenge-title{font-size:28px;font-weight:800}.challenge-close{pointer-events:auto;appearance:none;border:0;width:40px;height:40px;border-radius:999px;background:#ffffff14;color:var(--text-main);font-size:18px;font-weight:800;cursor:pointer}.challenge-grid{display:grid;gap:12px}.challenge-item{display:grid;gap:6px;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a}.challenge-item.is-complete{border-color:#8fe38880;background:linear-gradient(180deg,#8fe38824,#8fe38814);box-shadow:inset 0 0 0 1px #8fe3881f}.challenge-item.is-locked{opacity:.62}.challenge-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}.challenge-name{font-size:16px;font-weight:800}.challenge-meta{font-size:12px;color:var(--text-soft);letter-spacing:.08em;text-transform:uppercase}.challenge-stars{color:#ffd166;font-size:15px;font-weight:700}.challenge-item.is-complete .challenge-stars{color:#8fe388}.challenge-status{font-size:13px;color:var(--text-soft)}.challenge-item.is-complete .challenge-status,.challenge-item.is-complete .challenge-name,.challenge-item.is-complete .challenge-meta{color:#8fe388}.celebration-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:19}.achievement-toast-stack{position:fixed;right:20px;bottom:20px;display:grid;gap:10px;z-index:22;pointer-events:none}.achievement-toast{min-width:280px;max-width:min(360px,calc(100vw - 32px));padding:14px 16px;border-radius:16px;border:1px solid rgba(143,227,136,.36);background:linear-gradient(180deg,#112a16f5,#0b1a0ff5);box-shadow:0 20px 50px #00000047;opacity:0;transform:translateY(10px) scale(.98);animation:achievement-in .26s ease forwards}.achievement-toast.is-exit{animation:achievement-out .26s ease forwards}.achievement-toast-tag{margin-bottom:6px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8fe388}.achievement-toast-title{font-size:16px;font-weight:800;color:#efffed}.achievement-toast-copy{margin-top:4px;font-size:13px;line-height:1.45;color:#efffedc7}@keyframes achievement-in{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes achievement-out{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-6px) scale(.98)}}.confetti{position:absolute;top:-10vh;width:8px;height:16px;border-radius:999px;opacity:.95;animation:confetti-fall linear forwards}@keyframes confetti-fall{0%{transform:translateZ(0) rotate(0)}to{transform:translate3d(var(--drift, 0px),110vh,0) rotate(680deg)}}.eyebrow{display:inline-block;margin-bottom:10px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}h1{font-size:clamp(22px,3vw,32px);line-height:1;margin-bottom:12px}h2{font-size:23px;margin-top:8px;margin-bottom:10px}p{color:var(--text-soft);line-height:1.45}.status{margin-top:14px;font-size:14px;color:var(--accent-warm);font-weight:700}.game-copy{margin-top:16px;display:grid;gap:10px}.target{font-size:20px;line-height:1.5;font-weight:700;color:var(--text-main);word-break:break-word}.phase-center-target{position:fixed;left:50%;top:calc(52% - 200px);transform:translate(-50%,-50%);width:min(900px,calc(100vw - 120px));padding:18px 24px;text-align:center;font-size:clamp(26px,4.8vw,56px);font-weight:800;letter-spacing:.03em;line-height:1.28;color:var(--text-main);opacity:0;transition:opacity .18s ease;pointer-events:none;z-index:9;text-wrap:balance}.phase-center-target.is-visible{opacity:1}.phase-center-target.is-scrolling{left:0;width:100vw;max-width:none;padding:18px 0;transform:translateY(-50%);overflow:hidden;text-align:left;white-space:nowrap;text-wrap:nowrap}.target-track{position:relative;left:50%;display:inline-flex;gap:.04em;font-family:Consolas,Courier New,monospace;transform:translate(calc(-.5ch + var(--target-shift, 0ch)));transition:transform .12s ease;will-change:transform}.target-char{color:var(--text-main);transition:color .12s ease}.target-char.is-complete{color:#eef4ff5c}.target-char.is-current{color:#ffd166}.feedback{font-size:14px;color:var(--success);min-height:21px}.metric{display:grid;gap:3px;margin-bottom:8px}.metric:last-child{margin-bottom:0}.metric-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-soft)}.metric-value{font-size:18px;font-weight:700}.stars-value{letter-spacing:.08em;color:#ffd166}.streak-value{color:#8fe388}.hint{font-size:13px;color:var(--text-soft);line-height:1.5}@media (max-width: 1080px){:root{--hud-left-column-width: 0px;--hud-right-column-width: 0px;--level-progress-left: var(--hud-padding-x);--level-progress-right-offset: var(--hud-padding-x);--level-progress-width: calc(100vw - (var(--hud-padding-x) * 2))}.hud{grid-template-columns:minmax(240px,280px) minmax(0,1fr) minmax(170px,190px);grid-template-rows:auto auto 1fr}.level-progress{grid-column:1 / -1;grid-row:1}.panel-left{grid-column:1;grid-row:2}.panel-right{grid-column:3;grid-row:2}}@media (max-width: 780px){:root{--hud-padding-x: 12px;--hud-gap-x: 12px}.hud{grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr;gap:12px;padding:10px 12px 16px}.level-progress{grid-column:1;grid-row:1;width:100%;padding:12px 12px 14px}.panel{width:100%;max-width:none}.panel-left{grid-column:1;grid-row:2}.panel-right{grid-column:1;grid-row:3}.theme-panel{left:16px;bottom:16px;width:min(280px,calc(100vw - 32px))}.dog-corner{right:8px;bottom:28px;width:172px;height:172px}.dog-corner.is-expanded{right:calc(50vw - (min(94vw,460px)/2));bottom:calc(50vh - (min(68vh,460px)/2));width:min(94vw,460px);height:min(68vh,460px)}}
