/* base.css: shell, 3D buttons, customize sheet, HUD, island stage, footer (ported from prototypes/game.html).
   Talks to: app/index.html and every component that uses these classes.
   Update: change a look here; class names are used by the JS components. */
:root {
  --ink: #2B2350;
  --gold: #FFC93C; --gold-dark: #D9921A;
  --purple: #7B5CFF; --purple-dark: #4B32C8;
  --sheet: #FFF8EC;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: #8FD8FF; color: var(--ink);
  font-family: 'Varela Round', 'Rubik', 'Arial Hebrew', 'DejaVu Sans', sans-serif;
  line-height: 1.7;
  display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
button { font-family: inherit; }
/* chunky 3D buttons: thick bottom border that sinks on press */
.btn3d {
  font: inherit; font-size: 19px; line-height: 1.6; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 6px 18px; border-radius: 18px; border: 0;
  border-bottom: 6px solid var(--b-dark); background: linear-gradient(180deg, var(--b-hi), var(--b));
  box-shadow: 0 6px 12px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.45);
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
  transition: transform .06s, border-bottom-width .06s, margin-top .06s;
}
.btn3d:active, .btn3d.pressed { transform: translateY(4px); border-bottom-width: 2px; margin-top: 4px; box-shadow: 0 2px 4px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.45); }
.btn3d:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.btn-gold { --b: #FFB72B; --b-hi: #FFE07A; --b-dark: var(--gold-dark); color: #6B3B00; text-shadow: 0 1px 0 rgba(255,255,255,.5); flex: 1 1 0; max-width: 190px; }
.btn-purple { --b: #6A4BF0; --b-hi: #9C86FF; --b-dark: var(--purple-dark); flex: 1 1 0; max-width: 190px; }
.btn-green { --b: #2EB86A; --b-hi: #6EE59A; --b-dark: #1B7F45; }

/* clouds drift, river flows, fruit glows, sea twinkles */
.cloud { animation: drift linear infinite; }
.c1 { animation-duration: 46s; } .c2 { animation-duration: 64s; animation-delay: -20s; } .c3 { animation-duration: 54s; animation-delay: -38s; }
@keyframes drift { from { transform: translateX(-160px); } to { transform: translateX(520px); } }
.flow { stroke-dasharray: 5 13; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -36; } }
.fruit-glow { animation: glow 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes glow { 0%,100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
.twinkle { animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: 0; } 50% { opacity: .85; } }
.foam { animation: foam 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes foam { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: .75; transform: scale(1.012); } }
.rune-spin { animation: spin 3s linear infinite; transform-box: fill-box; transform-origin: center; }
.rune-spin.rev { animation-direction: reverse; animation-duration: 4.5s; }
@keyframes spin { to { transform: rotate(360deg); } }
.hat-star { animation: glow 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.eyelid { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .07s ease-in; }
.blinking .eyelid { transform: scaleY(.1); }
/* bottom sheet */
#scrim { position: fixed; inset: 0; background: rgba(43,35,80,.38); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 10; }
#scrim.open { opacity: 1; pointer-events: auto; }
#sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 11;
  max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--sheet); border-radius: 26px 26px 0 0;
  padding: 6px 16px max(16px, env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .32s cubic-bezier(.2,.9,.3,1.15);
  box-shadow: 0 -8px 24px rgba(43,35,80,.25);
}
#sheet.open { transform: translateY(0); }
.grab { width: 48px; height: 5px; border-radius: 3px; background: #D8CDB8; margin: 4px auto 6px; }
.sheet-top { display: flex; align-items: center; gap: 10px; position: sticky; top: -6px; z-index: 3; background: var(--sheet); margin: 0 -16px; padding: 4px 16px 6px; box-shadow: 0 8px 10px -8px rgba(43,35,80,.25); }
#preview { width: 225px; height: 156px; /* 150 x 104 x 1.5 (CHAR_SCALE) */ flex: 0 0 auto; background: radial-gradient(circle at 50% 80%, #CFF5B8, #E8F7FF 70%); border-radius: 18px; }
.sheet-top h2 { font-size: 20px; font-weight: normal; margin: 0; flex: 1; line-height: 1.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec { margin-top: 6px; }
.sec-label { font-size: 15px; margin: 0 0 2px; opacity: .8; line-height: 1.9; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip {
  font: inherit; font-size: 15px; line-height: 1.7; cursor: pointer; color: var(--ink);
  padding: 4px 12px; border-radius: 14px; border: 2px solid #D9CCF5; border-bottom-width: 5px; background: #fff;
  transition: transform .06s, border-bottom-width .06s;
}
.chip:active { transform: translateY(3px); border-bottom-width: 2px; }
.chip[aria-pressed="true"] { background: linear-gradient(180deg, #9C86FF, #6A4BF0); color: #fff; border-color: var(--purple-dark); }
.sw {
  width: 40px; height: 40px; border-radius: 50%; padding: 0; cursor: pointer; flex: 0 0 auto;
  border: 3px solid #fff; box-shadow: 0 3px 0 rgba(43,35,80,.25), 0 3px 8px rgba(43,35,80,.2);
  transition: transform .12s;
}
.sw[aria-pressed="true"] { transform: scale(1.14); border-color: var(--ink); }
#nameInput {
  font: inherit; font-size: 18px; line-height: 1.8; width: 100%; color: var(--ink);
  padding: 2px 12px; border-radius: 14px; border: 2px solid #D9CCF5; border-bottom-width: 5px; background: #fff;
  user-select: text; -webkit-user-select: text;
}
#blinkyName { font-size: 16px; margin: 2px 0 0; min-height: 1.9em; }
.sheet-done { width: 100%; margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .cloud, .flow, .twinkle, .foam, .rune-spin, .hat-star { animation: none; }
  .fruit-glow { animation: none; opacity: .8; }
  #sheet { transition: transform .01s; }
}
.tw { animation: twinkle2 1.8s ease-in-out infinite; }
.tw.d2 { animation-delay: .6s; } .tw.d3 { animation-delay: 1.2s; }
@keyframes twinkle2 { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- HUD (top bar) ---------- */
header#hud {
  flex: 0 0 auto; position: relative; z-index: 3;
  padding: max(6px, env(safe-area-inset-top)) 10px 6px;
  background: linear-gradient(180deg, #5B3FD6 0%, #7B5CFF 100%);
  border-bottom: 5px solid #3F2AA8; box-shadow: 0 4px 12px rgba(43,35,80,.3);
}
.hud-row { display: flex; align-items: center; gap: 8px; }
.hud-row + .hud-row { margin-top: 5px; }
.title-chip {
  flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #fff, #F1EBFF); border-radius: 999px; padding: 0 12px 0 8px;
  border-bottom: 4px solid #C9BDF2; font-size: 17px; line-height: 1.95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.title-chip span { overflow: hidden; text-overflow: ellipsis; }
.pill {
  flex: 1 1 0; min-width: 0; height: 44px; display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(180deg, #3B2A8F, #2C1F70); border-radius: 999px; padding: 0 10px 0 4px;
  border: 2px solid rgba(255,255,255,.25); border-bottom: 4px solid #1B1250; color: #fff;
  font-family: 'Rubik', 'Varela Round', sans-serif; font-weight: 700; font-size: 18px; line-height: 1;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.15);
}
.pill svg { flex: 0 0 auto; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.pill .vw { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1; }
.pill .val { display: inline-block; direction: ltr; flex: 0 0 auto; }
.pill .lbl { font-family: 'Varela Round', sans-serif; font-weight: normal; font-size: 11px; line-height: 1.45; opacity: .85; white-space: nowrap; }
.bump { animation: bump .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---------- island stage ---------- */
#stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: none; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }
.bubble {
  position: absolute; z-index: 4; pointer-events: none; transform: translate(-50%, -100%) scale(.8); opacity: 0;
  background: #fff; color: var(--ink); border-radius: 16px; padding: 4px 12px; font-size: 16px; line-height: 1.8;
  width: max-content; max-width: 240px; text-align: center; box-shadow: 0 4px 12px rgba(43,35,80,.22);
  transition: opacity .2s, transform .2s;
}
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
.bubble.show { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.slot { cursor: pointer; }
.slot-ring { animation: spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.slot-glow { animation: slotPulse 1.8s ease-in-out infinite; }
@keyframes slotPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.popin { animation: popin .7s cubic-bezier(.3,1.7,.5,1) both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes popin { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.swim { animation: spin 7s linear infinite; }
.swim.rev { animation-direction: reverse; animation-duration: 9s; }
.flicker { animation: flicker 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes flicker { 0%,100% { opacity: .65; transform: scale(.92); } 30% { opacity: 1; transform: scale(1.06); } 60% { opacity: .8; transform: scale(.98); } }
.smoke { animation: smoke 3s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.smoke.s2 { animation-delay: -1s; } .smoke.s3 { animation-delay: -2s; }
@keyframes smoke { 0% { opacity: 0; transform: translate(0,0) scale(.5); } 20% { opacity: .8; } 100% { opacity: 0; transform: translate(6px,-26px) scale(1.4); } }

/* ---------- footer ---------- */
footer {
  flex: 0 0 auto; display: flex; gap: 10px; align-items: flex-end; justify-content: center;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #2A8FD0, #1F6FAE); position: relative; z-index: 3;
}
#mapBtn {
  flex: 1 1 auto; max-width: 360px; min-height: 64px; flex-direction: row; gap: 10px; padding: 4px 14px;
  --b: #FFB72B; --b-hi: #FFE88A; --b-dark: #C7780C; color: #5A2E00; text-shadow: 0 1px 0 rgba(255,255,255,.55);
  animation: mapGlow 2s ease-in-out infinite;
}
#mapBtn .t { display: flex; flex-direction: column; align-items: center; line-height: 1.45; }
#mapBtn .t1 { font-size: 21px; } #mapBtn .t2 { font-size: 15px; }
@keyframes mapGlow { 0%,100% { box-shadow: 0 6px 12px rgba(0,0,0,.18), 0 0 0 0 rgba(255,236,140,.0), inset 0 2px 0 rgba(255,255,255,.45); } 50% { box-shadow: 0 6px 12px rgba(0,0,0,.18), 0 0 22px 6px rgba(255,236,140,.85), inset 0 2px 0 rgba(255,255,255,.45); } }
#custBtn { flex: 0 0 auto; width: 64px; min-height: 64px; padding: 0; max-width: none; flex-direction: column; gap: 0; font-size: 12px; line-height: 1.4; }