/*
 * styles.css — chrome that floats on top of the canvas.
 *
 * The canvas is the screen: it is fixed, full-viewport, and paints the game's
 * whole world including the background. Nothing here draws a box around it.
 * Every colour comes from theme.js via applyThemeCss.
 */

:root {
  --bg: #fff3e6; --bg-far: #ffe2c8; --bg-near: #fff8f0;
  --panel: rgba(255,255,255,.92); --panel-edge: rgba(198,126,74,.28);
  --text: #4a2c17; --muted: #9a7358;
  --accent: #ff7a3d; --accent-2: #3fb98a; --danger: #e0344f;
  --radius: 22px;
  --font-display: 'Trebuchet MS', 'Avenir Next', Verdana, system-ui, sans-serif;
  --font-body: 'Trebuchet MS', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;                 /* the page never scrolls */
  overscroll-behavior: none;        /* no pull-to-refresh */
  touch-action: manipulation;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none; user-select: none;
}

h1, h2, .stat strong, .btn, .pw-price span, .hud-level strong { font-family: var(--font-display); }
a { color: var(--accent); }

/* ---------------------------------------------------------------- canvas -- */
#game {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;               /* no double-tap zoom, no scroll steal */
}

/* The chrome layer. Pointer-transparent by default so the canvas gets the
   gestures; individual controls opt back in. */
.ui {
  position: fixed; inset: 0;
  pointer-events: none;
  display: flex; flex-direction: column;
  padding: calc(var(--safe-t) + .55rem) calc(var(--safe-r) + .7rem)
           calc(var(--safe-b) + .35rem) calc(var(--safe-l) + .7rem);
}

/* ------------------------------------------------------------------- HUD -- */
.hud-top { display: flex; align-items: flex-start; gap: .8rem; }

.hud-stats { display: flex; gap: .9rem; }
.stat { display: flex; flex-direction: column; line-height: 1.05; }
.stat-key {
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.stat strong {
  font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
@media (max-width: 400px) { .stat-best { display: none; } }

.hud-level { flex: 1; text-align: center; min-width: 0; }
.hud-level strong {
  display: block; font-size: .95rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.hud-buttons { display: flex; gap: .4rem; pointer-events: auto; }
.round {
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--panel-edge); border-radius: 50%;
  box-shadow: 0 2px 8px rgba(120,70,30,.14);
  transition: transform .12s ease;
}
.round:active { transform: scale(.92); }
.round svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; }

.combo {
  text-align: center; margin-top: .35rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; letter-spacing: .06em; color: var(--accent-2);
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

/* ------------------------------------------------------- teaching hint --- */
.teach {
  position: absolute; left: 0; right: 0; bottom: 21%;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  animation: fadein .5s ease both;
}
.teach[hidden] { display: none; }
.teach p {
  margin: 0; padding: .4rem .95rem;
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 999px;
  font-size: .85rem; font-weight: 600; color: var(--text);
  box-shadow: 0 3px 12px rgba(120,70,30,.16);
}
.teach-finger {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  animation: swipe 2.2s ease-in-out infinite;
}
@keyframes swipe {
  0%, 100% { transform: translateX(-42px) scale(1); opacity: .35; }
  25%      { transform: translateX(-42px) scale(1.15); opacity: 1; }
  60%      { transform: translateX(42px) scale(1.15); opacity: 1; }
  80%      { transform: translateX(42px) scale(.6); opacity: 0; }
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------- overlay -- */
.overlay {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; pointer-events: auto;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(4px);
}
.overlay[hidden] { display: none; }
.overlay-card {
  text-align: center; padding: 1.6rem 1.8rem; width: min(340px, 86vw);
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: var(--radius); box-shadow: 0 20px 50px rgba(120,70,30,.22);
  animation: pop .3s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.overlay-card h2 { margin: 0 0 .3rem; font-size: 1.35rem; }
.overlay-card p { margin: 0 0 .5rem; color: var(--muted); font-size: .88rem; }
.overlay-score strong { color: var(--text); font-size: 1.3rem; font-variant-numeric: tabular-nums; }

.btn {
  display: inline-block; cursor: pointer; font-size: .95rem; font-weight: 700;
  padding: .65rem 1.3rem; margin: .35rem .18rem 0; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  text-decoration: none; transition: transform .12s ease, filter .2s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--panel-edge); }
.btn.unlock {
  display: block; width: 100%; margin-top: .6rem;
  background: transparent; color: var(--accent-2); border-color: var(--accent-2);
}

/* -------------------------------------------------------------- rotate --- */
.rotate {
  position: absolute; inset: 0; z-index: 30; pointer-events: auto;
  display: grid; place-items: center; text-align: center;
  background: var(--bg); color: var(--text);
}
.rotate[hidden] { display: none; }
.rotate-icon { font-size: 3rem; animation: tilt 2s ease-in-out infinite; }
@keyframes tilt { 0%,100% { transform: rotate(-90deg); } 50% { transform: none; } }

.legal-strip {
  margin-top: auto; display: flex; gap: .9rem; justify-content: center;
  pointer-events: auto; font-size: .62rem; opacity: .55;
}
.legal-strip a { color: var(--muted); text-decoration: none; }
.legal-strip a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- paywall -- */
.paywall {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  padding: calc(var(--safe-t) + .8rem) .8rem calc(var(--safe-b) + .8rem);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(9px);
  opacity: 0; transition: opacity .22s ease;
}
.paywall.in { opacity: 1; }
.paywall[hidden] { display: none; }

.pw-card {
  position: relative; width: min(400px, 100%);
  max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 1.7rem 1.5rem 1.1rem;
  background: linear-gradient(180deg, #fff, var(--panel));
  border: 1px solid var(--accent); border-radius: 28px;
  box-shadow: 0 26px 60px rgba(120,70,30,.28);
  transform: translateY(16px) scale(.97);
  transition: transform .26s cubic-bezier(.2,1.2,.4,1);
}
.paywall.in .pw-card { transform: none; }

.pw-close {
  position: absolute; top: .6rem; right: .6rem;
  width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
  background: #fff; color: var(--muted);
  border: 1px solid var(--panel-edge); border-radius: 50%;
}
.pw-close svg { width: 18px; height: 18px; stroke: currentColor; }
.pw-close:hover { color: var(--text); border-color: var(--accent); }

.pw-kicker { margin: 0; color: var(--accent); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; }
.pw-card h2 { margin: .35rem 0 .5rem; font-size: clamp(1.35rem, 5.4vw, 1.7rem); line-height: 1.15; }
.pw-sub { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; }

.pw-list { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: .45rem; }
.pw-list li { position: relative; padding-left: 1.55rem; color: var(--muted); font-size: .9rem; }
.pw-list li strong { color: var(--text); font-weight: 700; }
.pw-list li::before {
  content: ''; position: absolute; left: .1rem; top: .42em; width: .66rem; height: .34rem;
  border-left: 2.4px solid var(--accent-2); border-bottom: 2.4px solid var(--accent-2);
  transform: rotate(-45deg);
}

.pw-price { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .75rem; }
.pw-price span { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.pw-price em { font-style: normal; color: var(--muted); font-size: .8rem; }

.pw-card .btn.primary { display: block; width: 100%; margin: 0; padding: .85rem 1rem; font-size: 1.05rem; }
.pw-error { color: var(--danger); font-size: .84rem; margin: .6rem 0 0; }
.pw-free { color: var(--muted); font-size: .78rem; margin: .75rem 0 .1rem; }

.pw-close-text {
  display: block; width: 100%; margin: .2rem 0; padding: .6rem;
  background: none; border: 0; cursor: pointer;
  color: var(--text); font: inherit; font-size: .92rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; opacity: .8;
}
.pw-close-text:hover { opacity: 1; }

.pw-legal { color: var(--muted); font-size: .66rem; line-height: 1.75; margin: .4rem 0 0; text-align: center; }
.pw-legal a { color: var(--muted); }
.pw-legal span { opacity: .5; margin: 0 .12rem; }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent); font: inherit; font-size: inherit; text-decoration: underline; }

/* ----------------------------------------------------------------- legal -- */
.legalpage {
  max-width: 720px; margin: 0 auto; padding: 2rem 1.2rem 4rem;
  height: 100%; overflow-y: auto;
}
.legalpage h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 .3rem; }
.legalpage .updated { color: var(--muted); font-size: .82rem; margin: 0 0 2rem; }
.legalpage h2 { font-size: 1.05rem; margin: 1.8rem 0 .4rem; color: var(--accent); }
.legalpage p, .legalpage li { color: var(--muted); }
.legalpage strong { color: var(--text); }
.legalpage ul { padding-left: 1.2rem; }
.legalpage .box { background: var(--panel); border: 1px solid var(--panel-edge);
                  border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.2rem 0; }
.legalnav { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: 2.4rem;
            padding-top: 1.1rem; border-top: 1px solid var(--panel-edge); font-size: .9rem; }
body.legal { overflow: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}