:root {
  color-scheme: dark;
  --ink: #f8fbff;
  --night: #071827;
  --paper: #fffaf0;
  --paper-ink: #17313b;
  --gold: #ffc95c;
  --orange: #ff8a38;
  --teal: #32dbc8;
  --purple: #b68cff;
  --cyan: #56d9ff;
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-width: 900px; min-height: 650px; overflow: hidden; }
body { margin: 0; color: var(--ink); background: var(--night); }
button { color: inherit; font: inherit; }
:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }

.game { position: relative; height: 100%; min-height: 650px; overflow: hidden; isolation: isolate; background: #071827; }
.world-art { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.world-wash { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg,rgba(4,13,24,.22),rgba(4,13,24,.02) 43%,rgba(4,13,24,.28)),radial-gradient(circle at 50% 48%,transparent 0 22%,rgba(2,9,18,.18) 72%); }

.travel-hud { position: absolute; z-index: 30; left: 24px; right: 24px; top: 18px; height: 64px; display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 18px; pointer-events: none; }
.mission-chip,.passport,.practice-hud { border: 1px solid rgba(255,255,255,.24); border-radius: 17px; background: rgba(7,24,39,.78); box-shadow: 0 8px 24px rgba(0,0,0,.22); backdrop-filter: blur(12px); }
.mission-chip { height: 64px; display: grid; align-content: center; padding: 9px 15px; }
.mission-chip span,.passport > span,.practice-hud span { color: #bad3df; font-size: 9px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.mission-chip strong { margin-top: 2px; font-size: 15px; }
.passport { justify-self: center; height: 58px; min-width: 250px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 8px 15px; }
.stamp-row { display: flex; gap: 9px; }
.stamp-row i { width: 31px; height: 31px; display: grid; place-items: center; border: 2px dashed rgba(255,255,255,.4); border-radius: 50%; transition: transform 160ms ease-out,background 160ms ease-out; }
.stamp-row i.is-stamped { border-style: solid; border-color: #744509; background: var(--gold); box-shadow: 0 0 18px rgba(255,201,92,.48); transform: rotate(-8deg) scale(1.08); }
.stamp-row i.is-stamped::after { content: "★"; color: #744509; font-style: normal; }
.practice-hud { height: 64px; display: flex; align-items: stretch; padding: 6px 8px; }
.practice-hud > div { min-width: 64px; display: grid; place-content: center; padding: 0 12px; text-align: center; }
.practice-hud > div + div { border-left: 1px solid rgba(255,255,255,.18); }
.practice-hud strong { font-size: 20px; line-height: 1; }
.practice-hud .difficulty { min-width: 160px; text-align: left; }
.difficulty > i { display: block; width: 132px; height: 7px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.16); }
.difficulty > i b { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--gold),var(--purple)); transition: width 180ms ease-out; }

.mascot { position: absolute; z-index: 16; left: 24px; top: 103px; width: 170px; }
.mascot-art { width: 150px; height: 166px; margin-left: 8px; padding: 7px; transform: rotate(-2deg); transition: transform 160ms ease-out; }
.mascot-art img { width: 100%; height: 100%; object-fit: cover; border-radius: 17px; }
.mascot-speech { position: absolute; z-index: 2; left: 123px; top: 2px; width: 190px; padding: 11px 14px; border-radius: 16px 16px 16px 5px; color: var(--paper-ink); background: var(--paper); box-shadow: 0 6px 18px rgba(0,0,0,.2); font-size: 12px; font-weight: 900; line-height: 1.25; }
.mascot.is-happy .mascot-art { transform: rotate(4deg) scale(1.06); }
.mascot.is-thinking .mascot-art { transform: rotate(-5deg) translateY(4px); }

.mission-copy { position: absolute; z-index: 12; left: 50%; top: 96px; width: min(590px,48vw); transform: translateX(-50%); text-align: center; text-shadow: 0 3px 14px #06111c; }
.mission-copy span { color: #ffe1a1; font-size: 10px; font-weight: 1000; letter-spacing: .14em; text-transform: uppercase; }
.mission-copy h1 { margin: 5px 0 3px; font-size: clamp(27px,3vw,41px); line-height: 1; letter-spacing: -.035em; }
.mission-copy p { margin: 0; color: #dcecf4; font-size: 13px; font-weight: 750; }

.sticker-art { overflow: hidden; border: 2px solid rgba(255,255,255,.92); border-radius: 24px; background: #fff; box-shadow: 0 8px 0 rgba(3,17,28,.36),0 17px 38px rgba(0,0,0,.28); }
.object-stage { position: absolute; z-index: 20; left: 50%; top: 193px; width: 210px; height: 235px; transform: translateX(-50%); display: grid; place-items: center; pointer-events: none; }
.object-card { position: relative; z-index: 2; width: 183px; height: 213px; display: grid; grid-template-rows: 1fr auto auto; gap: 2px; padding: 10px 10px 11px; color: var(--paper-ink); cursor: grab; touch-action: none; pointer-events: auto; transition: transform 150ms ease-out,box-shadow 150ms ease-out,opacity 150ms ease-out; }
.object-card:hover { transform: translateY(-4px) rotate(1deg); box-shadow: 0 12px 0 rgba(3,17,28,.35),0 24px 42px rgba(0,0,0,.3); }
.object-card:active,.object-card.is-dragging { cursor: grabbing; transform: scale(1.06) rotate(-2deg); }
.object-card img { min-height: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }
.object-emoji { min-height: 0; display: grid; place-items: center; border-radius: 15px; background: radial-gradient(circle,#fff 15%,#eef8f6 72%); font-size: 88px; line-height: 1; }
.object-card strong { font-size: 16px; line-height: 1.05; }
.object-card small { color: #60737b; font-size: 10px; font-weight: 800; }
.object-card.is-warping { animation: whoosh 520ms ease-in forwards; }
.object-card.is-rejected { animation: reject 360ms ease-out; }
.warp-rings { position: absolute; inset: 10px; opacity: 0; pointer-events: none; }
.warp-rings i { position: absolute; inset: 16%; border: 3px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 18px var(--cyan); }
.game.is-warping .warp-rings { opacity: 1; animation: ring-burst 550ms ease-out; }

.portal-row { position: absolute; z-index: 10; left: 3.4%; right: 3.4%; bottom: 23px; height: 238px; display: grid; grid-template-columns: repeat(4,1fr); align-items: end; gap: 3.2%; }
.portal { position: relative; min-width: 0; height: 220px; display: flex; align-items: end; justify-content: center; padding: 0 8px 12px; border: 0; border-radius: 42% 42% 24px 24px; color: white; background: transparent; cursor: pointer; text-shadow: 0 2px 8px #000; transition: transform 150ms ease-out,filter 150ms ease-out,opacity 150ms ease-out; }
.portal::before { position: absolute; inset: 1px 0; content: ""; border: 3px solid var(--portal); border-radius: inherit; background: radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--portal) 36%,transparent),transparent 66%); box-shadow: inset 0 0 25px color-mix(in srgb,var(--portal) 38%,transparent),0 0 22px color-mix(in srgb,var(--portal) 60%,transparent); opacity: .48; }
.portal:hover,.portal.is-over { transform: translateY(-8px) scale(1.025); filter: brightness(1.25); }
.portal:active { transform: translateY(-2px) scale(.99); }
.portal strong { position: relative; z-index: 2; min-width: 124px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; background: rgba(5,16,27,.82); box-shadow: 0 5px 15px rgba(0,0,0,.28); font-size: clamp(13px,1.2vw,17px); }
.portal small { display: block; margin-top: 2px; color: #d6e7ef; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.portal[data-era="stone"] { --portal: #ff8a38; }.portal[data-era="ancient"] { --portal: #32dbc8; }.portal[data-era="medieval"] { --portal: #b68cff; }.portal[data-era="modern"] { --portal: #56d9ff; }
.portal.is-hidden { visibility: hidden; pointer-events: none; }
.portal.is-rejecting { animation: portal-push 360ms ease-out; }
.portal.is-chosen { filter: brightness(1.5); transform: translateY(-10px) scale(1.04); }

.reveal-card { position: absolute; z-index: 40; left: 50%; top: 177px; width: min(470px,44vw); min-height: 220px; transform: translateX(-50%); padding: 22px 26px; border: 2px solid #f5c767; border-radius: 25px; color: var(--paper-ink); background: rgba(255,250,240,.97); box-shadow: 0 12px 0 rgba(51,28,3,.24),0 30px 70px rgba(0,0,0,.4); text-align: center; animation: reveal-in 190ms ease-out; }
.reveal-card span { color: #a65013; font-size: 10px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
.reveal-card > strong { display: block; margin-top: 5px; font-size: 29px; }
.reveal-card p { min-height: 43px; margin: 7px auto 16px; color: #53666c; font-size: 14px; font-weight: 700; line-height: 1.42; }
.primary,.explain-choice { min-height: 52px; border: 2px solid #154d52; border-radius: 14px; color: white; background: #14766f; box-shadow: 0 5px 0 #0d4744; cursor: pointer; font-weight: 950; transition: transform 140ms ease-out,box-shadow 140ms ease-out; }
.primary { min-width: 220px; padding: 0 20px; }.primary:hover,.explain-choice:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #0d4744; }.primary:active,.explain-choice:active { transform: translateY(3px); box-shadow: 0 2px 0 #0d4744; }
.explain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.explain-choice { padding: 8px 10px; font-size: 12px; }

.toast { position: absolute; z-index: 70; left: 50%; bottom: 278px; max-width: 530px; padding: 10px 17px; opacity: 0; transform: translate(-50%,10px); border-radius: 999px; color: #23353a; background: #fff9e9; box-shadow: 0 8px 25px rgba(0,0,0,.3); pointer-events: none; font-size: 13px; font-weight: 900; text-align: center; transition: opacity 150ms ease-out,transform 150ms ease-out; }
.toast.is-showing { opacity: 1; transform: translate(-50%,0); }
.celebration { position: absolute; z-index: 60; left: 50%; top: 40%; pointer-events: none; }
.celebration i { position: absolute; width: 13px; height: 18px; opacity: 0; border-radius: 4px; background: var(--gold); }
.game.is-celebrating .celebration i { animation: confetti 700ms ease-out both; }
.celebration i:nth-child(1){--x:-260px;--y:-170px;--r:160deg}.celebration i:nth-child(2){--x:-190px;--y:130px;--r:250deg;background:var(--teal)}.celebration i:nth-child(3){--x:-90px;--y:-205px;--r:210deg;background:var(--purple)}.celebration i:nth-child(4){--x:55px;--y:180px;--r:300deg}.celebration i:nth-child(5){--x:155px;--y:-190px;--r:230deg;background:var(--cyan)}.celebration i:nth-child(6){--x:245px;--y:100px;--r:330deg;background:var(--orange)}.celebration i:nth-child(7){--x:290px;--y:-100px;--r:220deg}.celebration i:nth-child(8){--x:-280px;--y:50px;--r:300deg;background:var(--cyan)}

@keyframes whoosh { 35% { transform: scale(1.14) rotate(-7deg); filter: brightness(1.4); } 100% { transform: scale(.1) rotate(28deg); opacity: 0; filter: blur(5px) brightness(2); } }
@keyframes ring-burst { from { transform: scale(.4); opacity: 0; } 35% { opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes reject { 20%,60% { transform: translateX(-9px) rotate(-3deg); } 40%,80% { transform: translateX(9px) rotate(3deg); } }
@keyframes portal-push { 40% { transform: scale(.94); filter: brightness(.7); } 70% { transform: scale(1.03); } }
@keyframes reveal-in { from { opacity: 0; transform: translate(-50%,16px) scale(.96); } }
@keyframes confetti { 0% { opacity: 0; transform: translate(0,0) rotate(0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) rotate(var(--r)) scale(1.1); } }

@media (max-height: 760px) { .travel-hud{top:10px}.mascot{top:86px;transform:scale(.88);transform-origin:top left}.mission-copy{top:79px}.object-stage{top:158px;transform:translateX(-50%) scale(.87)}.portal-row{height:214px;bottom:10px}.portal{height:202px}.reveal-card{top:140px}.toast{bottom:236px} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }.object-card{cursor:pointer}.object-card small{font-size:0}.object-card small::after{content:"Tap a portal";font-size:10px} }