/* ==================== Reset & Base ==================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* warm dark brown ink instead of black for a softer papercraft feel */
  --ink:        #3A2E20;
  --ink-soft:   #5A4A38;
  --paper:      #FAF6E8;
  --paper-dark: #E8DCBE;
  --cream:      #FBF0D2;
  --pink:       #F8E0D2;
  --yellow:     #F4C946;
  --yellow-dk:  #D4A52A;
  --orange:     #E08C5D;
  --orange-dk:  #A6603A;
  --red:        #D87F4F;
  --red-dk:     #A6603A;
  --blue:       #7BBED1;
  --blue-dk:    #3A7A99;
  --green:      #7BB342;
  --green-dk:   #4A7A1F;
}

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #B0E0E6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  font-family: 'Fredoka', 'Noto Sans SC', system-ui, sans-serif;
  color: var(--ink);
  font-weight: 600;
}

#gameContainer {
  position: fixed;
  inset: 0;
  z-index: 1;
}

#gameContainer canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ==================== Flash & Shake ==================== */
.flash-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: rgba(255,255,255,0);
  transition: background 0.06s linear;
}
.flash-overlay.flash-white { background: rgba(255,255,255,0.85); }
.flash-overlay.flash-red   { background: rgba(220,40,40,0.55); }

.shake { animation: shake 0.34s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
  10%, 90% { transform: translate3d(-3px, 0, 0); }
  20%, 80% { transform: translate3d(5px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-9px, 1px, 0); }
  40%, 60% { transform: translate3d(9px, -1px, 0); }
}

/* ==================== Top Bar (papercut buttons) ==================== */
.topbar {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 30;
  display: flex;
  gap: 10px;
}

.icon-btn {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink), 0 4px 0 1px rgba(0,0,0,0.05);
  color: var(--ink);
  font-family: 'Lilita One', 'Fredoka', sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, box-shadow 0.12s;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
}
.icon-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}
.icon-btn.lang-btn {
  width: auto;
  padding: 0 14px;
  min-width: 48px;
  font-family: 'Lilita One', 'Noto Sans SC', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
}

/* SVG icons inside buttons (override inline fill) */
.icon-btn .ic {
  width: 24px;
  height: 24px;
  display: block;
}
.icon-btn .ic [fill="#fff"]   { fill: var(--ink) !important; }
.icon-btn .ic [stroke="#fff"] { stroke: var(--ink) !important; }
.icon-btn .ic-play  { display: none; }
.icon-btn .ic-mute  { display: none; }
.icon-btn.paused .ic-pause { display: none; }
.icon-btn.paused .ic-play  { display: block; }
.icon-btn.muted  .ic-sound { display: none; }
.icon-btn.muted  .ic-mute  { display: block; }

/* ==================== Score HUD ==================== */
.score-hud {
  position: fixed;
  top: max(22px, env(safe-area-inset-top));
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px) scale(0.9);
  transition: opacity 0.25s, transform 0.25s;
}
.score-hud.visible { opacity: 1; transform: translateY(0) scale(1); }

.score-digits {
  display: flex;
  gap: 4px;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.25));
}
.score-digits img,
.score-digits canvas {
  height: clamp(48px, 9vh, 80px);
  width: auto;
}
.score-digits.pop { animation: pop-scale 0.18s ease-out; }
@keyframes pop-scale {
  0% { transform: scale(1); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ==================== Overlays ==================== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.18);
  transition: opacity 0.3s;
  padding: 24px;
}
.overlay.hidden { opacity: 0; pointer-events: none; }

#readyOverlay {
  background: transparent;
  align-items: flex-end;
  padding-bottom: clamp(20px, 8vh, 80px);
}
#gameOverOverlay,
#pauseOverlay {
  background: rgba(40, 30, 20, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ============== Papercut card ============== */
.ready-card,
.gameover-card,
.pause-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 30px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 6px 0 var(--ink), 0 8px 24px rgba(0,0,0,0.18);
  color: var(--ink);
  max-width: min(94vw, 440px);
}
/* small "tape" decorations on top corners */
.ready-card::before,
.gameover-card::before,
.pause-card::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 18px;
  width: 60px;
  height: 18px;
  background: rgba(255, 200, 100, 0.7);
  border: 2px solid var(--ink);
  border-radius: 3px;
  transform: rotate(-6deg);
  box-shadow: 1px 2px 0 rgba(0,0,0,0.1);
}
.ready-card::after,
.gameover-card::after,
.pause-card::after {
  content: '';
  position: absolute;
  top: -10px;
  right: 18px;
  width: 50px;
  height: 18px;
  background: rgba(180, 220, 255, 0.7);
  border: 2px solid var(--ink);
  border-radius: 3px;
  transform: rotate(7deg);
  box-shadow: 1px 2px 0 rgba(0,0,0,0.1);
}

.brand-title {
  font-size: clamp(2rem, 6.5vw, 2.8rem);
  letter-spacing: 1px;
  color: var(--orange);
  text-shadow:
    -2px 0  0 var(--ink),  2px 0  0 var(--ink),
    0 -2px  0 var(--ink),  0  2px 0 var(--ink),
   -2px -2px 0 var(--ink),  2px -2px 0 var(--ink),
   -2px  2px 0 var(--ink),  2px  2px 0 var(--ink),
    0 5px 0 var(--ink),
    4px 7px 0 rgba(0,0,0,0.15);
  text-align: center;
  font-family: 'Lilita One', 'Fredoka', cursive;
  line-height: 1.0;
  padding-top: 4px;
}

.ready-msg {
  font-size: clamp(1.1rem, 3.4vw, 1.6rem);
  color: var(--red);
  text-shadow:
    -1.5px 0  0 var(--ink), 1.5px 0  0 var(--ink),
    0 -1.5px 0 var(--ink), 0  1.5px 0 var(--ink),
   -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink),
   -1.5px  1.5px 0 var(--ink), 1.5px  1.5px 0 var(--ink),
    0 3px 0 var(--ink);
  letter-spacing: 2px;
  font-family: 'Lilita One', 'Fredoka', cursive;
}

.ready-hint {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.8rem;
  color: var(--ink);
  flex-wrap: wrap;
  justify-content: center;
  font-weight: 600;
}
.ready-hint .key {
  display: inline-block;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 2px 0 var(--ink);
}

/* ============== Game Over ============== */
.gameover-title {
  font-size: clamp(1.6rem, 5.5vw, 2.4rem);
  color: var(--red);
  text-shadow:
    -2px 0  0 var(--ink), 2px 0  0 var(--ink),
    0 -2px 0 var(--ink), 0  2px 0 var(--ink),
   -2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
   -2px  2px 0 var(--ink), 2px  2px 0 var(--ink),
    0 5px 0 var(--ink),
    4px 7px 0 rgba(0,0,0,0.15);
  letter-spacing: 2px;
  font-family: 'Lilita One', 'Fredoka', cursive;
  padding-top: 4px;
  line-height: 1.0;
}

.score-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 10px;
  padding: 14px 16px;
  width: 100%;
  position: relative;
  box-shadow: 0 4px 0 var(--ink);
}
/* a "stitched" inner frame line for papercraft feel */
.score-panel::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1.5px dashed rgba(44,62,80,0.35);
  border-radius: 6px;
  pointer-events: none;
}

.medal-wrap {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
/* "ribbon tail" behind medal for papercraft feel */
.medal-wrap::before,
.medal-wrap::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 28px;
  background: var(--red);
  border: 2px solid var(--ink);
  bottom: -4px;
  z-index: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%);
}
.medal-wrap::before { left: 12px; transform: rotate(-12deg); }
.medal-wrap::after  { right: 12px; transform: rotate(12deg); background: var(--blue); }

.medal {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: #C7C7C7;
}
/* solid-color medals (no gradients, papercraft) */
.medal[data-tier="none"]   { background: #C2C9D1; }
.medal[data-tier="bronze"] { background: #D08C4A; }
.medal[data-tier="silver"] { background: #C9CDD1; }
.medal[data-tier="gold"]   { background: #F2C336; }
.medal[data-tier="plat"]   { background: #6FCFC8; }

/* inner ring (paper layer) */
.medal::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: inherit;
  filter: brightness(1.13);
  border: 2px solid var(--ink);
}
.medal::after {
  position: relative;
  z-index: 1;
  font-size: 1.7rem;
  color: var(--paper);
  text-shadow: 0 2px 0 var(--ink);
  font-family: 'Lilita One', sans-serif;
  line-height: 1;
}
.medal[data-tier="bronze"]::after { content: '★'; }
.medal[data-tier="silver"]::after { content: '★'; }
.medal[data-tier="gold"]::after   { content: '★'; }
.medal[data-tier="plat"]::after   { content: '✦'; }
.medal[data-tier="none"]::after   { content: '?'; font-size: 1.4rem; }
.medal.show { transform: scale(1.06) rotate(-6deg); }

/* grid layout aligns labels (col 1) and values (col 2) across both rows */
.score-rows {
  flex: 1;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 28px;
  row-gap: 12px;
  align-items: center;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.score-row {
  display: contents;
  font-family: 'Fredoka', sans-serif;
  color: var(--ink);
}
.score-row .label {
  justify-self: start;
  min-width: 64px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 3px 10px;
  letter-spacing: 1px;
  font-weight: 600;
  box-shadow: 0 2px 0 var(--ink);
  font-family: 'Lilita One', sans-serif;
  text-transform: uppercase;
  box-sizing: border-box;
}
.score-row .value {
  justify-self: end;
  text-align: right;
  font-size: 1.7rem;
  color: var(--red);
  font-family: 'Lilita One', cursive;
  text-shadow:
    -1.5px 0  0 var(--ink), 1.5px 0  0 var(--ink),
    0 -1.5px 0 var(--ink), 0  1.5px 0 var(--ink),
    0 3px 0 var(--ink);
  line-height: 1;
}

.new-best {
  grid-column: 1 / -1;
  justify-self: end;
  background: var(--orange);
  color: var(--paper);
  font-size: 0.65rem;
  padding: 5px 10px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  letter-spacing: 2px;
  box-shadow: 0 3px 0 var(--ink);
  transform: rotate(-6deg);
  animation: blink 0.7s infinite alternate;
  font-family: 'Lilita One', cursive;
  font-weight: 600;
  text-shadow: 0 1.5px 0 var(--ink);
}
.new-best.hidden { display: none; }
@keyframes blink {
  from { transform: rotate(-4deg) scale(0.94); opacity: 0.7; }
  to   { transform: rotate(-4deg) scale(1.06); opacity: 1; }
}

/* ============== Pause ============== */
.pause-card { padding: 32px 36px; }
.pause-title {
  font-size: 1.8rem;
  color: var(--blue);
  text-shadow:
    -1.5px 0  0 var(--ink), 1.5px 0  0 var(--ink),
    0 -1.5px 0 var(--ink), 0  1.5px 0 var(--ink),
   -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink),
   -1.5px  1.5px 0 var(--ink), 1.5px  1.5px 0 var(--ink),
    0 4px 0 var(--ink);
  letter-spacing: 4px;
  font-family: 'Lilita One', cursive;
  padding-top: 4px;
}

/* ============== Buttons ============== */
.btn {
  font-family: 'Lilita One', 'Fredoka', 'Noto Sans SC', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 1px;
  padding: 12px 32px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  pointer-events: auto;
  text-shadow: 0 2px 0 rgba(0,0,0,0.2);
}
.btn:active { transform: translateY(3px); }
.btn.primary {
  background: linear-gradient(180deg, var(--yellow), var(--orange));
  color: var(--paper);
  text-shadow: 0 2px 0 var(--ink), 0 -1px 0 rgba(0,0,0,0.3);
  box-shadow: 0 5px 0 var(--ink);
}
.btn.primary:active { box-shadow: 0 2px 0 var(--ink); }
.btn.ghost {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  text-shadow: 0 2px 0 rgba(255,255,255,0.4);
}
.btn.ghost:active { box-shadow: 0 2px 0 var(--ink); }

/* ==================== Loading ==================== */
.loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #B0E0E6 0%, #FFF8DC 100%);
  transition: opacity 0.4s;
}
.loading.hidden { opacity: 0; pointer-events: none; }
.loading-bar {
  width: min(60vw, 280px);
  height: 18px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 4px 0 var(--ink);
}
.loading-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--yellow), var(--orange));
  transition: width 0.2s;
}
.loading-text {
  color: var(--ink);
  font-size: 0.95rem;
  letter-spacing: 2px;
  text-shadow: 0 2px 0 rgba(255,255,255,0.6);
  font-family: 'Lilita One', 'Fredoka', sans-serif;
  font-weight: 600;
}

/* ==================== Responsive ==================== */
@media (max-width: 480px) {
  .icon-btn { width: 42px; height: 42px; }
  .ready-card, .gameover-card, .pause-card { padding: 22px 22px; gap: 12px; }
  .score-panel { padding: 10px 12px; gap: 12px; }
  .medal-wrap { width: 64px; height: 64px; }
  .medal { width: 56px; height: 56px; }
  .btn { padding: 11px 22px; font-size: 0.75rem; }
}

@media (max-height: 480px) and (orientation: landscape) {
  .topbar { top: 8px; right: 8px; gap: 6px; }
  .icon-btn { width: 40px; height: 40px; border-radius: 10px; }
  .score-hud { top: 8px; }
  .score-digits img, .score-digits canvas { height: clamp(32px, 9vh, 50px); }
  .ready-card, .gameover-card, .pause-card {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 14px 18px;
    max-width: min(96vw, 580px);
    gap: 12px;
  }
  .gameover-card { flex-direction: column; }
  .brand-title { width: 100%; font-size: 1.4rem; }
  .ready-msg { font-size: 0.9rem; }
  .ready-hint { font-size: 0.6rem; }
  .btn { padding: 9px 18px; font-size: 0.7rem; }
}

@media (min-width: 768px) and (min-height: 600px) {
  #readyOverlay {
    align-items: center;
    padding-bottom: 24px;
  }
  .ready-card, .gameover-card, .pause-card { padding: 36px 40px; gap: 20px; }
  .score-panel { padding: 18px 22px; }
  .medal-wrap { width: 92px; height: 92px; }
  .medal { width: 80px; height: 80px; }
}