/* ===== Popups ===== */
.pop-back{position:fixed;inset:0;z-index:100;background:rgba(6,24,34,.5);backdrop-filter:blur(5px);display:grid;place-items:center;padding:16px;animation:fade .18s ease-out}
.pop{position:relative;width:min(440px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface);border-radius:26px;box-shadow:var(--shadow-lg);animation:pop .32s cubic-bezier(.2,1.4,.4,1)}
.pop.wide{width:min(620px,100%)}
.pop.xwide{width:min(760px,100%)}
.pop-head{display:flex;align-items:center;gap:12px;padding:22px 56px 6px 24px}
.pop-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:var(--accent-soft);flex:none}
.pop-icon.coral{background:var(--coral-soft)}.pop-icon.gold{background:var(--gold-soft)}
.pop-head h3{margin:0;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.25}
.pop-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:var(--surface-3);color:var(--muted);font-size:16px}
.pop-x:hover{color:var(--text)}
.pop-body{padding:8px 24px 6px;font-size:14.5px;color:var(--text)}
.pop-body p{margin:6px 0}
.pop-body:last-child{padding-bottom:24px}
.pop-body .muted{color:var(--muted);font-size:13.5px}
.pop-acts{display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 22px}
.pop-acts .btn{min-width:92px;padding:10px 18px}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.94)}}
.pop-back.closing{animation:fade .15s reverse forwards}
.popover{position:fixed;z-index:90;width:340px;max-width:calc(100vw - 20px);background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;animation:pop .25s cubic-bezier(.2,1.3,.4,1)}
.popover h4{margin:0;padding:14px 16px 8px;font-family:var(--display);font-weight:400;font-size:18px;display:flex;align-items:center}
.popover h4 button{margin-left:auto}
.noti{display:flex;gap:10px;padding:10px 16px;border-top:1px solid var(--line);font-size:13.5px;align-items:flex-start;width:100%;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left}
.noti:hover{background:var(--surface-2)}
.noti.unread{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
.noti .ne{font-size:18px;width:28px;text-align:center}
.noti .nw{font-size:11.5px;color:var(--muted)}
.ledger{list-style:none;margin:8px 0 0;padding:0;max-height:240px;overflow:auto}
.ledger li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px dashed var(--line);font-size:13.5px}
.ledger .plus{color:var(--ok);font-weight:700}.ledger .minus{color:var(--danger);font-weight:700}
.ledger .w{font-size:11.5px;color:var(--muted);display:block}
.big-thumb{display:grid;place-items:center;background:var(--surface-2);border-radius:18px;margin:6px 0 12px;min-height:200px}
.big-thumb img{width:220px;height:220px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13.5px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500}
.mood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mood-grid button{border:1.5px solid var(--line);background:var(--surface);border-radius:16px;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:700;font-size:13px}
.mood-grid button span{font-size:28px}
.mood-grid button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.opt-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px dashed var(--line)}
.opt-row:first-child{border-top:0}
.opt-row .l{flex:1;font-weight:700;font-size:14px}
.opt-row .l small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:38px;height:38px;border-radius:12px;border:2px solid var(--line);position:relative}
.swatch[aria-pressed="true"]{border-color:var(--text);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--text)}

/* reward */
.reward{text-align:center;padding:8px 0 0}
.reward .amt{font-size:46px;font-weight:900;color:var(--ok);display:flex;justify-content:center;align-items:center;gap:8px;animation:rise .6s cubic-bezier(.2,1.5,.4,1)}
.reward .amt .seed{width:42px;height:42px}
@keyframes rise{from{transform:translateY(20px) scale(.6);opacity:0}}
.coins{position:relative;height:0}
.coins i{position:absolute;left:50%;top:-30px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6b0,#f2b300 60%,#b07800);animation:coin 1s ease-out forwards}
@keyframes coin{to{transform:translate(var(--dx),var(--dy)) rotate(260deg);opacity:0}}
.stamps{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:10px 0}
.stamp{aspect-ratio:1;border-radius:14px;border:2px dashed var(--line-strong);display:grid;place-items:center;font-size:11px;color:var(--muted);font-weight:700;position:relative}
.stamp.got{border-style:solid;border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.stamp.got::after{content:"🌱";position:absolute;font-size:18px;top:4px}
.stamp.got span{margin-top:18px}
.stamp.bonus{border-color:var(--gold)}
.stamp.now{animation:stampIn .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes stampIn{from{transform:scale(1.6) rotate(-15deg);opacity:0}}

/* typing / match */
.game-hud{display:flex;gap:10px;justify-content:space-between;background:var(--surface-2);border-radius:14px;padding:10px 14px;font-size:13px;color:var(--muted)}
.game-hud b{display:block;font-size:20px;color:var(--text)}
.typing-word{font-family:var(--display);font-size:44px;text-align:center;margin:22px 0 4px;letter-spacing:1px}
.typing-next{text-align:center;color:var(--muted);font-size:13px;margin-bottom:14px}
.typing-input{width:100%;font-size:20px;text-align:center;padding:12px;border-radius:14px;border:2px solid var(--line-strong);background:var(--surface)}
.typing-input:focus{outline:none;border-color:var(--accent)}
.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.timebar{height:6px;border-radius:9px;background:var(--surface-3);margin-top:12px;overflow:hidden}
.timebar i{display:block;height:100%;background:var(--coral);width:100%}
.match-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.mcard{aspect-ratio:1;border:0;border-radius:14px;font-size:30px;background:linear-gradient(135deg,var(--accent),#57c7b0);color:transparent;transition:transform .16s;display:grid;place-items:center;position:relative}
.mcard::after{content:"?";position:absolute;color:rgba(255,255,255,.75);font-family:var(--display);font-size:26px}
.mcard.open,.mcard.done{background:var(--surface-2);color:inherit;border:2px solid var(--line)}
.mcard.open::after,.mcard.done::after{content:none}
.mcard.done{border-color:var(--ok);opacity:.75}
.mcard.flip{transform:scaleX(0)}

/* toast */
#toastRoot{position:fixed;left:16px;right:16px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{max-width:100%;word-break:keep-all;background:#173246;color:#fff;border-radius:18px;padding:11px 18px;font-size:14px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;gap:8px;align-items:center;animation:toastIn .35s cubic-bezier(.2,1.4,.4,1)}
.toast.out{animation:toastIn .25s reverse forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.9)}}
:root[data-theme="dark"] .toast{background:#e9f4f7;color:#123}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .toast{background:#e9f4f7;color:#123}}