/* Pirate Reef Defense — interface styles. 1rem = 10 logical pixels of the 1280x720 stage. */
:root {
  --navy: #0f2340; --deep: #04263f; --sea: #0b5d8c; --teal: #2ec4b6; --aqua: #7df9ff; --coral: #ff5d8f;
  --sun: #ffd166; --gold: #ffb703; --pearl: #fff8ef; --sand: #ffe9c7; --green: #5be37d; --red: #ff4d6d; --purple: #c77dff;
  --glass: rgba(4, 24, 50, 0.86); --glass-line: rgba(125, 249, 255, 0.28);
  --f-display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --f-body: "Nunito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #021526; overflow: hidden; }
body {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-body); font-weight: 800; color: var(--pearl);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; overscroll-behavior: none;
}
#stage { position: relative; overflow: hidden; background: var(--deep); width: 100vw; height: 56.25vw; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: absolute; inset: 0; pointer-events: none; font-size: 1.8rem; }
button { font: inherit; color: inherit; }
img { -webkit-user-drag: none; user-select: none; }

.screen { position: absolute; inset: 0; display: none; }
.screen.on { display: block; pointer-events: auto; }
#hud.on { pointer-events: none; }

/* ---------- buttons ---------- */
.btn {
  pointer-events: auto; font-family: var(--f-display); font-weight: 400; font-size: 2.4rem; letter-spacing: 0.04em;
  color: var(--navy); border: 0.35rem solid var(--navy); border-radius: 1.8rem; padding: 0.9rem 2.4rem;
  background: linear-gradient(#fff4bd, #ffd166 45%, #ffb703);
  box-shadow: 0 0.7rem 0 var(--navy), inset 0 -0.5rem 0 rgba(0, 0, 0, 0.12), inset 0 0.35rem 0 rgba(255, 255, 255, 0.6);
  cursor: pointer; transition: transform 0.08s, box-shadow 0.08s, filter 0.15s; position: relative; white-space: nowrap; line-height: 1.1;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(0.5rem); box-shadow: 0 0.2rem 0 var(--navy), inset 0 -0.3rem 0 rgba(0, 0, 0, 0.12); }
.btn:disabled { filter: grayscale(0.85) brightness(0.8); cursor: default; transform: none; }
.btn:focus-visible, .qc:focus-visible, .node:focus-visible, .tcard:focus-visible, .abil:focus-visible { outline: 0.4rem solid var(--aqua); outline-offset: 0.3rem; }
.btn-teal { background: linear-gradient(#c4fff7, #2ec4b6 50%, #179086); }
.btn-pink { background: linear-gradient(#ffd6e3, #ff7aa5 50%, #e8467c); color: #fff; text-shadow: 0 0.2rem 0 var(--navy); }
.btn-blue { background: linear-gradient(#cdeeff, #4ea8de 50%, #2a7fb8); color: #fff; text-shadow: 0 0.2rem 0 var(--navy); }
.btn-ghost { background: rgba(15, 35, 64, 0.6); color: var(--pearl); box-shadow: 0 0.6rem 0 var(--navy); }
.btn-sell { background: linear-gradient(#ffe0e6, #ff8fa3 50%, #e8467c); color: #fff; text-shadow: 0 0.2rem 0 var(--navy); }
.btn-sm { font-size: 1.8rem; padding: 0.55rem 1.5rem; border-radius: 1.4rem; box-shadow: 0 0.5rem 0 var(--navy), inset 0 0.3rem 0 rgba(255, 255, 255, 0.5); }
.btn-md { font-size: 2.6rem; padding: 0.9rem 2.6rem; }
.btn-icon { padding: 0.9rem 1.6rem; }
.btn-play { font-size: 5.6rem; padding: 1.2rem 6rem; border-radius: 3rem; box-shadow: 0 0.9rem 0 var(--navy), inset 0 -0.7rem 0 rgba(0, 0, 0, 0.12), inset 0 0.5rem 0 rgba(255, 255, 255, 0.65); animation: breathe 2.2s ease-in-out infinite; }
.btn-play.btn-md, .btn-play.btn-sm { animation: none; }
.btn-play.btn-md { font-size: 2.8rem; padding: 1rem 3rem; border-radius: 2rem; }
.btn-play.btn-sm { font-size: 1.8rem; padding: 0.55rem 1.5rem; border-radius: 1.4rem; box-shadow: 0 0.5rem 0 var(--navy); }
.row { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.col { display: flex; flex-direction: column; gap: 1.3rem; align-items: stretch; min-width: 36rem; margin-top: 1.4rem; }

/* ---------- title ---------- */
.title-wrap { position: absolute; top: 2.6rem; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.logo { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: 0.88; font-family: var(--f-display); font-weight: 400; filter: drop-shadow(0 0.9rem 0 var(--navy)) drop-shadow(0 1.6rem 1.6rem rgba(0, 0, 0, 0.35)); }
.logo span span { display: inline-block; animation: bob 2.6s ease-in-out infinite; -webkit-text-stroke: 0.6rem var(--navy); paint-order: stroke fill; }
.logo-top { font-size: 12.4rem; color: var(--sun); }
.logo-top span { color: #ffd166; text-shadow: 0 -0.5rem 0 #fff3b0; }
.logo-bot { font-size: 6.8rem; margin-top: 0.4rem; }
.logo-bot span { color: #7df9ff; text-shadow: 0 -0.3rem 0 #d9fdff; }
.tagline { margin: 0.6rem 0 0.4rem; font-family: var(--f-display); font-size: 2.8rem; letter-spacing: 0.03em; color: #fff; -webkit-text-stroke: 0.25rem var(--navy); paint-order: stroke fill; filter: drop-shadow(0 0.35rem 0 var(--navy)); }
.title-stats { display: flex; gap: 1.8rem; font-size: 1.8rem; background: rgba(2, 20, 45, 0.62); padding: 0.6rem 1.8rem; border-radius: 2rem; border: 0.25rem solid var(--glass-line); margin-top: 0.6rem; }
.title-stats b { font-family: var(--f-display); font-weight: 400; color: var(--sun); }
.credit { position: absolute; right: 1.6rem; top: 1.2rem; font-size: 1.6rem; opacity: 0.85; font-family: var(--f-display); letter-spacing: 0.04em; }

/* ---------- header bar (menus) ---------- */
.bar { position: absolute; top: 0; left: 0; right: 0; height: 8rem; display: flex; align-items: center; gap: 1.6rem; padding: 0 1.8rem; background: linear-gradient(rgba(2, 20, 45, 0.95), rgba(2, 20, 45, 0.7)); border-bottom: 0.3rem solid var(--glass-line); z-index: 5; }
.bar h2 { font-family: var(--f-display); font-weight: 400; font-size: 3.6rem; margin: 0; flex: 1; text-shadow: 0 0.3rem 0 var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chips { display: flex; gap: 0.8rem; }
.chip { background: rgba(255, 255, 255, 0.12); border: 0.25rem solid rgba(255, 255, 255, 0.25); border-radius: 2rem; padding: 0.4rem 1.3rem; font-size: 1.9rem; white-space: nowrap; }
.chip.big { font-size: 2.2rem; }
.chip b { font-family: var(--f-display); font-weight: 400; color: var(--sun); }
.eyebrow { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; letter-spacing: 0.12em; color: var(--aqua); text-transform: uppercase; }

/* ---------- sea chart ---------- */
.map-scroll { position: absolute; top: 8rem; bottom: 0; left: 0; right: 0; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.map-inner { position: relative; }
.map-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-path path { fill: none; stroke: rgba(230, 251, 255, 0.55); stroke-width: 7; stroke-dasharray: 2 20; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.node-wrap { position: absolute; transform: translate(-5.5rem, -50%); display: flex; align-items: center; gap: 1.6rem; }
.node {
  width: 11rem; height: 11rem; flex: none; border-radius: 50%; border: 0.45rem solid var(--navy); font-family: var(--f-display); font-size: 4.6rem; color: #fff; cursor: pointer; position: relative;
  box-shadow: 0 0.7rem 0 var(--navy), inset 0 -0.8rem 0 rgba(0, 0, 0, 0.2), inset 0 0.5rem 0 rgba(255, 255, 255, 0.4); text-shadow: 0 0.3rem 0 var(--navy); transition: transform 0.1s;
}
.node:active { transform: translateY(0.4rem); }
.node.b-coral { background: radial-gradient(circle at 40% 30%, #ffd0df, #ff5d8f 70%); }
.node.b-kelp { background: radial-gradient(circle at 40% 30%, #d4ffb8, #3fa34d 70%); }
.node.b-wreck { background: radial-gradient(circle at 40% 30%, #e2d4ff, #7b5cc4 70%); }
.node.b-volcano { background: radial-gradient(circle at 40% 30%, #ffd2a8, #ff7043 70%); }
.node.b-ice { background: radial-gradient(circle at 40% 30%, #f0fdff, #4dd0e1 70%); }
.node.b-abyss { background: radial-gradient(circle at 40% 30%, #9bf6ff, #2b3a67 70%); }
.node.locked { background: radial-gradient(circle at 40% 30%, #b3bccb, #4a5568 70%); cursor: default; font-size: 3.6rem; }
.node.cur { animation: breathe 1.6s ease-in-out infinite; box-shadow: 0 0.7rem 0 var(--navy), 0 0 0 0.6rem rgba(255, 209, 102, 0.7), 0 0 3rem rgba(255, 209, 102, 0.6); }
.node-b { position: absolute; bottom: -0.8rem; right: -0.8rem; font-size: 3rem; text-shadow: none; }
.node-cap { position: absolute; top: -7.2rem; left: 50%; width: 7.4rem; margin-left: -3.7rem; animation: bob 1.6s ease-in-out infinite; pointer-events: none; }
.node-label { background: rgba(2, 20, 45, 0.78); border: 0.25rem solid rgba(255, 255, 255, 0.2); border-radius: 1.4rem; padding: 0.6rem 1.3rem; display: flex; flex-direction: column; min-width: 22rem; }
.node-label b { font-family: var(--f-display); font-weight: 400; font-size: 2.2rem; }
.node-label small { font-size: 1.5rem; opacity: 0.8; }
.st { color: rgba(255, 255, 255, 0.25); font-size: 2.2rem; }
.st.on { color: var(--sun); }
.map-more { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--f-display); font-size: 2.4rem; opacity: 0.85; }

/* ---------- briefing ---------- */
.brief { position: absolute; top: 9.4rem; left: 2rem; right: 2rem; bottom: 2rem; display: grid; grid-template-columns: 54rem 1fr; gap: 2rem; }
.brief-l { min-width: 0; }
.brief-prev img { width: 100%; border-radius: 1.8rem; border: 0.4rem solid var(--navy); box-shadow: 0 0.6rem 0 rgba(0, 0, 0, 0.4); display: block; }
.boss-card { margin-top: 1.6rem; display: flex; gap: 1.4rem; align-items: center; background: linear-gradient(rgba(130, 20, 50, 0.85), rgba(60, 10, 30, 0.9)); border: 0.35rem solid var(--red); border-radius: 1.8rem; padding: 1rem 1.4rem; }
.boss-card img { width: 15rem; flex: none; filter: drop-shadow(0 0.4rem 0 rgba(0, 0, 0, 0.35)); }
.boss-card h3 { font-family: var(--f-display); font-weight: 400; font-size: 3rem; margin: 0.2rem 0; }
.boss-card p { margin: 0; font-size: 1.7rem; opacity: 0.9; }
.boss-card .eyebrow { color: #ff9fb2; }
.brief-r { min-width: 0; background: rgba(2, 20, 45, 0.8); border: 0.3rem solid var(--glass-line); border-radius: 2rem; padding: 1.6rem 2rem; display: flex; flex-direction: column; gap: 1.2rem; overflow: auto; }
.icon-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.6rem; }
.ic { display: flex; flex-direction: column; align-items: center; width: 9rem; background: rgba(255, 255, 255, 0.08); border-radius: 1.2rem; padding: 0.4rem; }
.ic img { width: 6.6rem; height: 6.6rem; }
.ic span { font-size: 1.4rem; text-align: center; }
.dive { display: flex; align-items: center; gap: 1.6rem; background: rgba(255, 93, 143, 0.15); border: 0.25rem solid rgba(255, 93, 143, 0.55); border-radius: 1.6rem; padding: 1rem 1.4rem; }
.dive p { font-size: 1.7rem; margin: 0.3rem 0 0; }
.dive b { color: var(--sun); }
.brief-bonus { background: rgba(255, 209, 102, 0.16); border: 0.25rem solid var(--sun); border-radius: 1.4rem; padding: 0.6rem 1.2rem; font-size: 1.8rem; }
.brief-bonus b { color: var(--sun); }
.brief-bonus.stash { background: rgba(91, 227, 125, 0.16); border-color: var(--green); }
.btn-start { font-size: 4.2rem; align-self: center; margin-top: auto; }

/* ---------- HUD ---------- */
.hud-top { position: absolute; left: 1.2rem; right: 1.2rem; top: 1rem; display: flex; gap: 0.8rem; align-items: center; pointer-events: none; z-index: 10; }
.spacer { flex: 1; }
.pill {
  pointer-events: auto; display: flex; align-items: center; gap: 0.6rem; height: 4.8rem; padding: 0 1.5rem 0 1.1rem;
  background: linear-gradient(rgba(14, 52, 92, 0.92), rgba(5, 22, 45, 0.92)); border: 0.3rem solid #081628;
  box-shadow: inset 0 0 0 0.2rem rgba(125, 249, 255, 0.25), 0 0.4rem 0 rgba(0, 0, 0, 0.35); border-radius: 2.4rem;
  font-family: var(--f-display); font-size: 2.5rem; color: #fff; white-space: nowrap;
}
.pill b { font-weight: 400; }
.pill small { font-size: 1.5rem; color: var(--sun); }
.pill.streak.hot { background: linear-gradient(#ffb347, #e85d04); }
.ico-pearl { display: inline-block; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; vertical-align: middle; background: radial-gradient(circle at 35% 30%, #fff 0 16%, #fff1fa 30%, #f3c6e8 70%, #c58fb8); box-shadow: 0 0 0.8rem rgba(255, 255, 255, 0.55), inset 0 0 0 0.15rem rgba(15, 35, 64, 0.5); }
.next-ic { display: flex; align-items: center; }
.next-ic img { width: 3.2rem; height: 3.2rem; margin-left: -0.3rem; }
.nx { font-family: var(--f-body); font-size: 1.3rem; opacity: 0.75; margin: 0 0.4rem 0 0.8rem; }
.nx-boss { color: var(--red); font-size: 1.9rem; margin-left: 0.8rem; animation: blink 0.9s infinite; }
.hbtn { pointer-events: auto; height: 4.8rem; min-width: 5.6rem; padding: 0 1.4rem; border-radius: 2.4rem; border: 0.3rem solid var(--navy); background: linear-gradient(#cdeeff, #4ea8de 55%, #2a7fb8); color: #fff; font-family: var(--f-display); font-size: 2.2rem; text-shadow: 0 0.2rem 0 var(--navy); box-shadow: 0 0.4rem 0 var(--navy); cursor: pointer; }
.hbtn:active { transform: translateY(0.3rem); box-shadow: 0 0.1rem 0 var(--navy); }
.bump { animation: bump 0.35s; }
.nope { animation: nope 0.45s; }

.hud-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 10.6rem; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 1.2rem 1rem; pointer-events: none; z-index: 10; }
.hud-bottom::before { content: ""; position: absolute; inset: auto 0 0 0; height: 10.6rem; background: linear-gradient(rgba(2, 15, 35, 0), rgba(2, 15, 35, 0.72)); pointer-events: none; }
.build-bar { display: flex; gap: 0.8rem; pointer-events: auto; position: relative; }
.tcard {
  position: relative; width: 10.6rem; height: 8.8rem; border-radius: 1.6rem; border: 0.33rem solid var(--navy); cursor: pointer; padding: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 62%), var(--tc);
  box-shadow: 0 0.55rem 0 var(--navy), inset 0 -0.4rem 0 rgba(0, 0, 0, 0.15); transition: transform 0.12s, filter 0.2s; touch-action: none;
}
.tcard img { position: absolute; left: 50%; top: -2.2rem; width: 8rem; height: 8rem; margin-left: -4rem; filter: drop-shadow(0 0.3rem 0 rgba(0, 0, 0, 0.3)); pointer-events: none; transition: transform 0.15s; }
.tcard:hover img { transform: translateY(-0.4rem) scale(1.05); }
.tc-name { position: absolute; left: 0; right: 0; bottom: 2.7rem; font-family: var(--f-display); font-size: 1.5rem; color: #fff; text-shadow: 0 0.15rem 0 var(--navy), 0 0 0.4rem var(--navy); pointer-events: none; }
.tc-cost { position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.4rem; height: 2.3rem; border-radius: 1.2rem; background: rgba(5, 22, 45, 0.85); display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--f-display); font-size: 1.7rem; color: #fff; pointer-events: none; }
.tc-cost .ico-pearl { width: 1.6rem; height: 1.6rem; }
.tc-cost b { font-weight: 400; }
.tc-key { position: absolute; top: 0.3rem; left: 0.6rem; font-family: var(--f-display); font-size: 1.3rem; color: rgba(15, 35, 64, 0.65); pointer-events: none; }
.tc-lock { position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.4rem; height: 2.3rem; border-radius: 1.2rem; background: rgba(5, 22, 45, 0.85); font-size: 1.4rem; display: flex; align-items: center; justify-content: center; }
.tcard.sel { transform: translateY(-1.2rem); box-shadow: 0 0.55rem 0 var(--navy), 0 0 0 0.45rem var(--sun), 0 0 2.4rem var(--sun); }
.tcard.poor { filter: saturate(0.35) brightness(0.78); }
.tcard.poor .tc-cost { color: #ff9fb2; }
.tcard.locked { filter: grayscale(1) brightness(0.6); cursor: default; }
.abil-row { display: flex; gap: 1rem; align-items: flex-end; pointer-events: auto; position: relative; }
.abil {
  position: relative; width: 8.2rem; height: 8.2rem; border-radius: 50%; border: 0.35rem solid var(--navy); cursor: pointer; padding: 0;
  background: radial-gradient(circle at 40% 32%, #c4fff7, #2ec4b6 58%, #157a71); box-shadow: 0 0.5rem 0 var(--navy); font-size: 4rem; line-height: 1;
}
.abil:active { transform: translateY(0.3rem); box-shadow: 0 0.2rem 0 var(--navy); }
.abil .cd { position: absolute; inset: -0.1rem; border-radius: 50%; background: conic-gradient(rgba(5, 18, 38, 0.74) calc(var(--cd, 0) * 360deg), transparent 0); pointer-events: none; }
.abil.ready { animation: glow 1.4s ease-in-out infinite; }
.ab-key { position: absolute; bottom: -0.3rem; right: -0.3rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--f-display); font-size: 1.5rem; display: flex; align-items: center; justify-content: center; }
.abil .boost { display: none; position: absolute; top: -2.6rem; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--purple); color: #fff; border: 0.25rem solid var(--navy); border-radius: 1.2rem; padding: 0.1rem 0.8rem; font-family: var(--f-display); font-size: 1.4rem; text-shadow: 0 0.15rem 0 var(--navy); animation: bob 1.2s ease-in-out infinite; }
.abil.canboost .boost { display: block; }
.abil.blast { width: 10.4rem; height: 10.4rem; background: radial-gradient(circle at 40% 32%, #fff6c2, #ffd166 55%, #ff9f1c); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.abil.blast .ab-ico { font-size: 3.6rem; }
.ab-lbl { font-family: var(--f-display); font-size: 1.4rem; line-height: 1; color: var(--navy); }
.abil.blast.ready { animation: glowGold 1s ease-in-out infinite; }
.btn-wave { pointer-events: auto; display: flex; flex-direction: column; align-items: center; min-width: 22rem; padding: 0.7rem 2rem; font-size: 2.6rem; }
.btn-wave .wv-sub { font-family: var(--f-body); font-weight: 900; font-size: 1.5rem; }
.btn-wave.pulse { animation: breathe 1.1s ease-in-out infinite; }
.place-hint { position: absolute; bottom: 11.8rem; left: 50%; transform: translateX(-50%); background: rgba(2, 20, 45, 0.9); border: 0.3rem solid var(--sun); border-radius: 2rem; padding: 0.5rem 0.8rem 0.5rem 1.8rem; display: flex; gap: 1.2rem; align-items: center; font-size: 1.8rem; pointer-events: auto; z-index: 11; white-space: nowrap; }

.bossbar { position: absolute; top: 6.6rem; left: 50%; transform: translateX(-50%); width: 62rem; text-align: center; z-index: 9; pointer-events: none; }
.bb-name { font-family: var(--f-display); font-size: 2.4rem; -webkit-text-stroke: 0.25rem var(--navy); paint-order: stroke fill; filter: drop-shadow(0 0.25rem 0 var(--navy)); }
.bb-track { position: relative; height: 2.6rem; border-radius: 1.4rem; border: 0.35rem solid var(--navy); background: rgba(5, 18, 38, 0.9); overflow: hidden; margin-top: 0.2rem; }
.bb-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(#ff8fa3, #ff4d6d 55%, #c9184a); transition: width 0.15s; }
.bb-shield { position: absolute; left: 0; top: 0; height: 45%; width: 0; background: linear-gradient(#e6fbff, #7df9ff); opacity: 0.9; }
.bb-track i { position: absolute; top: 0; bottom: 0; width: 0.3rem; background: rgba(15, 35, 64, 0.85); }
.bb-phase { font-family: var(--f-display); font-size: 1.6rem; color: #ffb3c1; margin-top: 0.2rem; }
.bossbar.weak .bb-fill { background: linear-gradient(#fff3b0, #ffd166 55%, #ff9f1c); }

#banner { position: absolute; left: 0; right: 0; top: 26%; text-align: center; pointer-events: none; z-index: 12; }
.bn { display: inline-block; opacity: 0; }
#banner.go .bn { animation: banner 2.3s ease forwards; }
.bn-t { font-family: var(--f-display); font-size: 8.4rem; color: var(--sun); -webkit-text-stroke: 0.55rem var(--navy); paint-order: stroke fill; filter: drop-shadow(0 0.7rem 0 var(--navy)); line-height: 1; }
.bn-s { font-family: var(--f-display); font-size: 2.6rem; color: #fff; -webkit-text-stroke: 0.25rem var(--navy); paint-order: stroke fill; margin-top: 0.6rem; }
.bn.small .bn-t { font-size: 6.4rem; color: var(--aqua); }

#toasts { position: absolute; top: 12.6rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 0.6rem; align-items: center; width: 74rem; pointer-events: none; z-index: 30; }
.toast { background: rgba(255, 248, 239, 0.97); color: var(--navy); border: 0.3rem solid var(--navy); border-radius: 1.6rem; padding: 0.7rem 1.8rem; font-size: 1.9rem; box-shadow: 0 0.45rem 0 rgba(0, 0, 0, 0.3); animation: toastIn 0.35s cubic-bezier(0.2, 1.5, 0.4, 1); text-align: center; transition: opacity 0.4s, transform 0.4s; }
.toast.out { opacity: 0; transform: translateY(-1rem); }

/* tower panel */
.tpanel { position: absolute; top: 6.8rem; width: 37rem; max-height: 55rem; overflow: auto; background: linear-gradient(#fffaf2, #ffeccc); color: var(--navy); border: 0.35rem solid var(--navy); border-radius: 2rem; box-shadow: 0 0.6rem 0 rgba(0, 0, 0, 0.35); padding: 1.1rem; pointer-events: auto; font-size: 1.6rem; z-index: 15; animation: popIn 0.25s cubic-bezier(0.2, 1.5, 0.4, 1); touch-action: pan-y; }
.tpanel.right { right: 1.2rem; }
.tpanel.left { left: 1.2rem; }
.tp-head { display: flex; gap: 0.8rem; align-items: center; background: var(--tc); border-radius: 1.4rem; padding: 0.5rem 0.8rem; border: 0.25rem solid var(--navy); color: #fff; position: relative; }
.tp-head img { width: 6.6rem; height: 6.6rem; flex: none; }
.tp-head h3 { font-family: var(--f-display); font-weight: 400; font-size: 2.3rem; margin: 0; -webkit-text-stroke: 0.2rem var(--navy); paint-order: stroke fill; }
.tp-head p { margin: 0.1rem 0 0; font-size: 1.3rem; text-shadow: 0 0.1rem 0 var(--navy); padding-right: 2.6rem; }
.x { position: absolute; top: 0.4rem; right: 0.4rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 0.25rem solid var(--navy); background: #fff; color: var(--navy); font-size: 1.4rem; cursor: pointer; }
.tp-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0 0.4rem; }
.tp-stats span { background: #fff; border: 0.2rem solid rgba(15, 35, 64, 0.25); border-radius: 1rem; padding: 0.15rem 0.7rem; font-size: 1.5rem; }
.tp-mode { display: flex; align-items: center; gap: 0.6rem; font-size: 1.5rem; margin: 0.4rem 0; flex-wrap: wrap; }
.tp-mode .btn { font-size: 1.5rem; padding: 0.3rem 1rem; box-shadow: 0 0.35rem 0 var(--navy); }
.tp-gb { font-size: 1.3rem; opacity: 0.8; }
.up-row { border: 0.25rem solid var(--navy); border-left: 0.9rem solid var(--pc); border-radius: 1.3rem; padding: 0.5rem 0.8rem; margin-top: 0.7rem; background: #fff; }
.up-speed { --pc: #ffd23f; } .up-range { --pc: #5be37d; } .up-power { --pc: #ff4d6d; }
.up-head { display: flex; align-items: center; gap: 0.6rem; }
.up-head > div { flex: 1; display: flex; flex-direction: column; line-height: 1.05; }
.up-head b { font-family: var(--f-display); font-weight: 400; font-size: 1.8rem; }
.up-head small { font-size: 1.25rem; opacity: 0.75; }
.up-ico { font-size: 2.2rem; }
.pips { display: flex; gap: 0.3rem; }
.pips i { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 0.2rem solid var(--navy); background: #e3e6ea; }
.pips i.on { background: var(--pc); }
.up-body { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.3rem; }
.up-body p { flex: 1; margin: 0; font-size: 1.4rem; line-height: 1.2; }
.up-body em { color: #9d4edd; font-style: normal; }
.btn-up { font-size: 1.8rem; padding: 0.35rem 1.1rem; border-radius: 1.2rem; box-shadow: 0 0.4rem 0 var(--navy); display: flex; align-items: center; gap: 0.4rem; flex: none; }
.btn-up .ico-pearl { width: 1.8rem; height: 1.8rem; }
.btn-up b { font-weight: 400; }
.btn-up.poor { filter: grayscale(0.75); opacity: 0.7; }
.up-max { font-family: var(--f-display); color: #d48c00; font-size: 1.7rem; flex: none; white-space: nowrap; }
.up-max.lock { color: #7a8699; font-size: 1.3rem; }
.tp-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.9rem; }
.tp-bad { font-size: 1.3rem; opacity: 0.8; }

/* ---------- modals ---------- */
#modal, #quiz { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(2, 12, 28, 0.62); pointer-events: auto; }
#modal { z-index: 40; }
#quiz { z-index: 50; background: rgba(2, 12, 28, 0.7); }
#modal.show, #quiz.show { display: flex; }
.mcard { background: linear-gradient(#fffaf2, #ffe9c7); color: var(--navy); border: 0.4rem solid var(--navy); border-radius: 2.6rem; box-shadow: 0 1rem 0 rgba(0, 0, 0, 0.35); padding: 2.4rem 3rem; max-width: 84rem; max-height: 68rem; overflow: auto; text-align: center; animation: popIn 0.35s cubic-bezier(0.2, 1.5, 0.4, 1); position: relative; touch-action: pan-y; }
.m-title { font-family: var(--f-display); font-weight: 400; font-size: 4.4rem; margin: 0 0 0.6rem; }
.m-sub { font-size: 2rem; margin: 0.4rem 0; }
.m-sub.small { font-size: 1.6rem; opacity: 0.8; }
.howto { text-align: left; font-size: 1.9rem; line-height: 1.35; max-width: 70rem; padding-left: 2.4rem; margin: 1rem 0; }
.howto li { margin: 0.5rem 0; }

/* quiz */
.qcard { width: 94rem; max-height: 69rem; overflow: auto; background: linear-gradient(#fffdf8, #fff0d4); border: 0.45rem solid var(--navy); border-top: 1.2rem solid var(--sc); border-radius: 2.8rem; padding: 1.6rem 2.6rem 2.2rem; color: var(--navy); position: relative; box-shadow: 0 1rem 0 rgba(0, 0, 0, 0.35); animation: popIn 0.35s cubic-bezier(0.2, 1.5, 0.4, 1); touch-action: pan-y; }
.q-top { display: flex; gap: 1rem; align-items: center; }
.q-subj { background: var(--sc); color: #fff; border: 0.25rem solid var(--navy); border-radius: 2rem; padding: 0.3rem 1.3rem; font-family: var(--f-display); font-size: 1.8rem; text-shadow: 0 0.15rem 0 var(--navy); }
.q-rew { margin-left: auto; background: #fff3c4; border: 0.25rem solid var(--navy); border-radius: 2rem; padding: 0.3rem 1.3rem; font-size: 1.7rem; }
.q-speak { width: 4.6rem; height: 4.6rem; border-radius: 50%; border: 0.25rem solid var(--navy); background: #fff; font-size: 2.2rem; cursor: pointer; flex: none; }
.q-top .q-speak:first-of-type:not(:nth-child(2)) { margin-left: auto; }
.q-title { font-family: var(--f-display); font-size: 3.2rem; margin-top: 0.8rem; text-align: center; }
.q-sub { font-size: 1.7rem; opacity: 0.8; text-align: center; }
.q-passage { background: #fff; border: 0.25rem dashed rgba(15, 35, 64, 0.4); border-radius: 1.4rem; padding: 1rem 1.6rem; font-size: 2.1rem; line-height: 1.4; text-align: left; margin: 1rem 0 0; font-weight: 700; }
.q-prompt { font-size: 3.3rem; font-weight: 900; line-height: 1.22; margin: 1.2rem 0; text-align: center; }
.q-prompt.long { font-size: 2.7rem; }
.q-visual { background: #fff; border-radius: 1.6rem; border: 0.25rem solid rgba(15, 35, 64, 0.25); padding: 0.8rem; margin: 0 auto 1.3rem; max-width: 44rem; }
.q-visual svg { width: 100%; height: auto; max-height: 22rem; display: block; margin: 0 auto; }
.q-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.q-choices.n3 { grid-template-columns: 1fr 1fr 1fr; }
.qc { display: flex; align-items: center; gap: 1.2rem; min-height: 7.4rem; padding: 0.8rem 1.4rem; border: 0.35rem solid var(--navy); border-radius: 1.8rem; font-family: var(--f-body); font-weight: 900; font-size: 2.7rem; color: var(--navy); cursor: pointer; box-shadow: 0 0.55rem 0 var(--navy); text-align: left; transition: transform 0.08s, opacity 0.2s; line-height: 1.15; }
.qc b { flex: none; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 400; font-size: 2.2rem; }
.qc span { min-width: 0; overflow-wrap: anywhere; }
.qc0 { background: #ffd6e3; } .qc1 { background: #c9f7ef; } .qc2 { background: #fff1b8; } .qc3 { background: #d6eaff; }
.qc:hover:not(:disabled) { transform: translateY(-0.25rem); }
.qc:active:not(:disabled) { transform: translateY(0.4rem); box-shadow: 0 0.15rem 0 var(--navy); }
.qc:disabled { cursor: default; }
.qc.right { background: var(--green); animation: bump 0.4s; }
.qc.right b { background: #157a3a; }
.qc.wrong { background: #ff9fb2; }
.qc.dim { opacity: 0.4; }
.q-result { margin-top: 1.4rem; text-align: center; animation: popIn 0.3s; }
.r-ok { font-family: var(--f-display); font-size: 4.6rem; color: #149447; }
.r-no { font-size: 2.5rem; }
.r-no b { color: #149447; }
.r-streak { font-family: var(--f-display); font-size: 2.6rem; color: #f07800; }
.r-exp { font-size: 2.1rem; background: #fff; border-radius: 1.4rem; padding: 0.8rem 1.4rem; border: 0.25rem solid rgba(15, 35, 64, 0.2); font-weight: 700; margin: 0.8rem 0 1.2rem; line-height: 1.3; }
.shake { animation: shake 0.45s; }
.conf { position: absolute; top: 35%; width: 1.3rem; height: 0.8rem; border-radius: 0.2rem; animation: conf 1.5s ease-out forwards; pointer-events: none; z-index: 5; }

/* other cards */
.new-en { display: flex; gap: 1.8rem; align-items: center; text-align: left; margin: 1.2rem 0; }
.new-en img { width: 14rem; height: 14rem; flex: none; background: radial-gradient(circle at 40% 35%, #e0f6ff, #4ea8de); border-radius: 50%; border: 0.35rem solid var(--navy); }
.new-en h3 { font-family: var(--f-display); font-weight: 400; font-size: 3.2rem; margin: 0; }
.new-en p { font-size: 1.9rem; margin: 0.3rem 0 0.6rem; }
.tipbox { background: #fff3c4; border: 0.25rem solid #e0a800; border-radius: 1.2rem; padding: 0.6rem 1rem; font-size: 1.8rem; }
.en-stats { font-size: 1.6rem; margin-top: 0.6rem; opacity: 0.8; }
.eyebrow.pinkish { color: #e8467c; font-size: 2.6rem; }
.fact-bottle { font-size: 7rem; animation: bob 2s ease-in-out infinite; display: inline-block; }
.factcard .eyebrow { color: #2a7fb8; }
.fact-text { font-size: 2.9rem; font-weight: 900; line-height: 1.3; max-width: 62rem; margin: 1rem auto; }
.fact-rew { font-size: 1.6rem; opacity: 0.75; margin-bottom: 1.2rem; }
.vic-ribbon { font-family: var(--f-display); font-size: 8.4rem; color: var(--sun); -webkit-text-stroke: 0.55rem var(--navy); paint-order: stroke fill; filter: drop-shadow(0 0.6rem 0 var(--navy)); animation: popIn 0.5s cubic-bezier(0.2, 1.5, 0.4, 1); line-height: 1; }
.vic-stars { margin: 0.4rem 0; }
.vs { font-size: 9rem; color: #d6d9de; display: inline-block; transform: scale(0); animation: starIn 0.5s cubic-bezier(0.2, 1.7, 0.4, 1) forwards; -webkit-text-stroke: 0.35rem var(--navy); paint-order: stroke fill; line-height: 1; }
.vs.on { color: var(--sun); }
.vic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.4rem 0 0.6rem; }
.vic-grid > div { background: #fff; border: 0.3rem solid var(--navy); border-radius: 1.4rem; padding: 0.8rem; display: flex; flex-direction: column; align-items: center; }
.vic-grid span { font-size: 3rem; }
.vic-grid b { font-family: var(--f-display); font-weight: 400; font-size: 3rem; }
.vic-grid small { font-size: 1.4rem; }
.unlock { display: flex; gap: 1.2rem; align-items: center; background: linear-gradient(90deg, #fff3c4, #ffe08a); border: 0.35rem solid var(--navy); border-radius: 1.6rem; padding: 0.8rem 1.6rem; text-align: left; margin-top: 1rem; animation: popIn 0.5s 1s both; }
.unlock img { width: 9rem; flex: none; }
.unlock p { margin: 0.2rem 0 0; font-size: 1.6rem; }
.unlock .eyebrow { color: #d48c00; }
.def-title { font-family: var(--f-display); font-size: 5rem; color: #e8467c; }
.puff-tip { display: flex; gap: 1.2rem; align-items: center; background: #fff; border: 0.3rem solid var(--navy); border-radius: 1.6rem; padding: 1rem 1.4rem; text-align: left; margin: 1.2rem 0; }
.puff-tip img { width: 10rem; flex: none; }
.puff-tip p { font-size: 1.9rem; margin: 0.3rem 0 0; }

/* boss warning */
#bosswarn { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; z-index: 38; }
#bosswarn.show { display: flex; animation: warnLife 3.3s forwards; }
.bw-edge { position: absolute; inset: 0; box-shadow: inset 0 0 14rem 4rem rgba(255, 30, 60, 0.75); animation: redpulse 0.45s ease-in-out infinite alternate; }
.bw-card { position: relative; text-align: center; animation: popIn 0.45s cubic-bezier(0.2, 1.5, 0.4, 1); }
.bw-warn { font-family: var(--f-display); font-size: 8.6rem; color: var(--red); -webkit-text-stroke: 0.55rem var(--navy); paint-order: stroke fill; filter: drop-shadow(0 0.6rem 0 var(--navy)); animation: blink 0.45s infinite; line-height: 1; }
.bw-sub { font-family: var(--f-display); font-size: 3.4rem; color: #fff; -webkit-text-stroke: 0.3rem var(--navy); paint-order: stroke fill; letter-spacing: 0.2em; }
.bw-card img { width: 34rem; display: block; margin: 0.6rem auto; filter: drop-shadow(0 0 3rem rgba(255, 60, 90, 0.7)); }
.bw-name { font-family: var(--f-display); font-size: 5rem; color: var(--sun); -webkit-text-stroke: 0.4rem var(--navy); paint-order: stroke fill; line-height: 1; }
.bw-title { font-family: var(--f-display); font-size: 2.4rem; color: #fff; -webkit-text-stroke: 0.2rem var(--navy); paint-order: stroke fill; }
.bw-card p { font-size: 2.1rem; max-width: 60rem; margin: 0.6rem auto; text-shadow: 0 0.2rem 0 var(--navy), 0 0 1rem var(--navy); }
.bw-hint { display: inline-block; font-family: var(--f-display); font-size: 2.2rem; background: var(--sun); color: var(--navy); border: 0.3rem solid var(--navy); border-radius: 2rem; padding: 0.3rem 1.6rem; }

/* tutorial */
#tut { position: absolute; left: 1.2rem; bottom: 11.4rem; display: flex; align-items: flex-end; gap: 0.6rem; max-width: 56rem; z-index: 35; pointer-events: auto; }
#tut.pop { animation: popIn 0.4s cubic-bezier(0.2, 1.5, 0.4, 1); }
#tut img { width: 11rem; flex: none; animation: bob 2s ease-in-out infinite; }
.tut-b { background: #fffaf2; color: var(--navy); border: 0.35rem solid var(--navy); border-radius: 2rem 2rem 2rem 0.4rem; padding: 1rem 1.5rem; font-size: 1.9rem; box-shadow: 0 0.5rem 0 rgba(0, 0, 0, 0.3); margin-bottom: 2rem; }
.tut-b p { margin: 0 0 0.6rem; line-height: 1.3; }
.tut-btns { display: flex; gap: 0.8rem; justify-content: flex-end; }
.tut-btns .btn-ghost { color: var(--pearl); }
.tut-hl { animation: tutglow 0.9s ease-in-out infinite !important; z-index: 6; }

/* workshop */
.shop { position: absolute; top: 9.4rem; left: 2rem; right: 2rem; bottom: 2rem; display: grid; grid-template-columns: 30rem 1fr; gap: 2rem; }
.shop-cap { background: rgba(2, 20, 45, 0.8); border-radius: 2rem; border: 0.3rem solid var(--glass-line); padding: 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; align-self: start; }
.shop-cap img { width: 20rem; }
.shop-cap b { font-family: var(--f-display); font-weight: 400; font-size: 2.8rem; }
.shop-cap p { font-size: 1.6rem; margin: 0; opacity: 0.9; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; overflow: auto; align-content: start; touch-action: pan-y; padding-bottom: 1rem; }
.shop-item { display: flex; align-items: center; gap: 1.2rem; background: linear-gradient(#fffaf2, #ffe9c7); color: var(--navy); border: 0.35rem solid var(--navy); border-radius: 1.8rem; padding: 1rem 1.4rem; box-shadow: 0 0.5rem 0 rgba(0, 0, 0, 0.3); }
.shop-item.max { background: linear-gradient(#fff6c2, #ffe08a); }
.si-ico { font-size: 4.4rem; flex: none; }
.si-txt { flex: 1; min-width: 0; }
.si-txt b { font-family: var(--f-display); font-weight: 400; font-size: 2.2rem; }
.si-txt p { font-size: 1.5rem; margin: 0.2rem 0 0.4rem; }
.si-txt small { font-size: 1.3rem; opacity: 0.8; }
.si-bar { height: 1rem; background: rgba(15, 35, 64, 0.15); border-radius: 1rem; overflow: hidden; margin: 0.3rem 0; }
.si-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2ec4b6, #7df9ff); border-radius: 1rem; }

/* journal */
.journal { position: absolute; top: 9.4rem; left: 2rem; right: 2rem; bottom: 1.6rem; overflow: auto; touch-action: pan-y; padding-bottom: 1rem; }
.tabs { display: flex; gap: 0.6rem; }
.tabs button { font-family: var(--f-display); font-size: 1.8rem; padding: 0.6rem 1.4rem; border-radius: 1.4rem; border: 0.3rem solid var(--navy); background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; white-space: nowrap; }
.tabs button.on { background: var(--sun); color: var(--navy); }
.badge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.badge-card { display: flex; align-items: center; gap: 1.2rem; background: linear-gradient(#fffaf2, #ffe9c7); color: var(--navy); border: 0.35rem solid var(--navy); border-left: 1.2rem solid var(--sc); border-radius: 1.8rem; padding: 1rem 1.4rem; }
.bc-ico { font-size: 4.6rem; flex: none; }
.bc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bc-txt b { font-family: var(--f-display); font-weight: 400; font-size: 2.4rem; }
.bc-txt small { font-size: 1.4rem; opacity: 0.85; }
.medals { display: flex; gap: 0.3rem; }
.medal { font-size: 2.6rem; opacity: 0.3; width: 3.2rem; text-align: center; }
.medal.on { opacity: 1; filter: drop-shadow(0 0 0.5rem var(--mc)); }
.j-totals { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; justify-content: center; }
.j-totals span { background: rgba(2, 20, 45, 0.78); border: 0.25rem solid var(--glass-line); border-radius: 2rem; padding: 0.5rem 1.4rem; font-size: 1.8rem; }
.j-totals b { font-family: var(--f-display); font-weight: 400; color: var(--sun); }
.j-note { font-size: 1.9rem; margin-bottom: 1.2rem; background: rgba(2, 20, 45, 0.7); border-radius: 1.4rem; padding: 0.7rem 1.4rem; display: inline-block; }
.j-note b { color: var(--sun); }
.j-h { font-family: var(--f-display); font-weight: 400; font-size: 2.6rem; margin: 1.4rem 0 0.8rem; text-shadow: 0 0.25rem 0 var(--navy); }
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.fact-card { background: #fffaf2; color: var(--navy); border: 0.3rem solid var(--navy); border-radius: 1.4rem; padding: 0.8rem 1.1rem; font-size: 1.6rem; }
.fact-card b { font-family: var(--f-display); font-weight: 400; color: #2a7fb8; }
.fact-card p { margin: 0.2rem 0 0; }
.fact-card.locked { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.2); }
.fact-card.locked b { color: rgba(255, 255, 255, 0.5); }
.look-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.look { background: #fffaf2; color: var(--navy); border: 0.35rem solid var(--navy); border-radius: 1.6rem; padding: 0.9rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; cursor: pointer; }
.look img { width: 9rem; height: 9rem; }
.look b { font-family: var(--f-display); font-weight: 400; font-size: 1.8rem; }
.look small { font-size: 1.3rem; }
.look.on { box-shadow: 0 0 0 0.5rem var(--sun); }
.look.locked { opacity: 0.6; filter: grayscale(0.85); cursor: default; }
.swatch { width: 7rem; height: 7rem; border-radius: 50%; border: 0.35rem solid var(--navy); display: block; }

/* settings */
.set-grid { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem 2rem; align-items: center; text-align: left; font-size: 2rem; margin: 1.4rem 0; }
.set-grid input[type="range"] { width: 100%; accent-color: var(--teal); height: 3rem; }
.tog { font-family: var(--f-display); font-size: 1.8rem; padding: 0.4rem 1.8rem; border-radius: 2rem; border: 0.3rem solid var(--navy); background: #d9dee6; color: var(--navy); cursor: pointer; justify-self: start; }
.tog.on { background: var(--green); }
.seg { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.seg button { font-family: var(--f-display); font-size: 1.7rem; padding: 0.4rem 1.3rem; border-radius: 1.4rem; border: 0.3rem solid var(--navy); background: #e8ebef; color: var(--navy); cursor: pointer; }
.seg button.on { background: var(--sun); }
.subj-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.subj { font-weight: 900; font-size: 1.6rem; padding: 0.4rem 1.1rem; border-radius: 2rem; border: 0.3rem solid var(--navy); background: #e3e6ea; color: #7a8699; cursor: pointer; }
.subj.on { background: var(--sc); color: #fff; text-shadow: 0 0.15rem 0 var(--navy); }
#set-name { font-family: var(--f-display); font-size: 2.2rem; padding: 0.4rem 1rem; border-radius: 1.2rem; border: 0.3rem solid var(--navy); width: 24rem; -webkit-user-select: text; user-select: text; background: #fff; color: var(--navy); }

#rotate { position: fixed; inset: 0; z-index: 100; background: rgba(2, 15, 35, 0.95); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font: 900 20px var(--f-body); text-align: center; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
#rotate .rot-ico { font-size: 64px; animation: rot 2s ease-in-out infinite; }
#rotate button { font: 400 20px var(--f-display); padding: 10px 22px; border-radius: 16px; border: 3px solid var(--navy); background: var(--sun); color: var(--navy); }
#boot-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 400 28px var(--f-display); color: var(--aqua); }

/* ---------- animations ---------- */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.7rem); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes nope { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-0.8rem); background: #c9184a; } 40% { transform: translateX(0.8rem); } 60% { transform: translateX(-0.5rem); } 80% { transform: translateX(0.4rem); } }
@keyframes popIn { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-1rem); } 40% { transform: translateX(1rem); } 60% { transform: translateX(-0.6rem); } 80% { transform: translateX(0.5rem); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0.5rem 0 var(--navy), 0 0 0 0 rgba(125, 249, 255, 0.0); } 50% { box-shadow: 0 0.5rem 0 var(--navy), 0 0 0 0.5rem rgba(125, 249, 255, 0.55), 0 0 2.4rem rgba(125, 249, 255, 0.8); } }
@keyframes glowGold { 0%, 100% { box-shadow: 0 0.5rem 0 var(--navy), 0 0 0 0 rgba(255, 209, 102, 0); transform: scale(1); } 50% { box-shadow: 0 0.5rem 0 var(--navy), 0 0 0 0.6rem rgba(255, 209, 102, 0.7), 0 0 3rem rgba(255, 209, 102, 0.9); transform: scale(1.06); } }
@keyframes banner { 0% { opacity: 0; transform: translateX(-30rem) scale(0.8); } 14% { opacity: 1; transform: translateX(0) scale(1.08); } 22% { transform: scale(1); } 78% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(30rem); } }
@keyframes toastIn { 0% { opacity: 0; transform: translateY(-1.5rem) scale(0.9); } 100% { opacity: 1; transform: none; } }
@keyframes redpulse { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0.45; } }
@keyframes starIn { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes conf { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 55% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 22rem)) rotate(calc(var(--r) * 1.6)); opacity: 0; } }
@keyframes warnLife { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tutglow { 0%, 100% { box-shadow: 0 0.55rem 0 var(--navy), 0 0 0 0.3rem #ffd166, 0 0 1rem #ffd166; } 50% { box-shadow: 0 0.55rem 0 var(--navy), 0 0 0 0.8rem #ffd166, 0 0 3.2rem #ffd166; } }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }

@media (prefers-reduced-motion: reduce) {
  .logo span span, .btn-play, .node.cur, .node-cap, .abil.ready, .abil.blast.ready, .btn-wave.pulse, #tut img, .fact-bottle, .bw-edge, .bw-warn, .nx-boss, .abil .boost { animation: none !important; }
}