/*
 * Mug Climb — game-specific shell.
 * The canvas draws the whole game world; this file styles the DOM around it:
 * HUD panels, the menu and tab screens, touch controls. Palette leans on the
 * arcade colours drawn inside the canvas rather than the site tokens, so the
 * chrome and the game read as one cabinet.
 */
.mc-stage { position: relative; overflow: hidden; touch-action: none; }
/* An explicit display on these would otherwise defeat the hidden attribute. */
.mc-hud[hidden], .mc-touch[hidden], .mc-panel-screen[hidden],
.mc-initials[hidden], #hud-combo[hidden], .mc-keys[hidden],
.mc-ctrl-row[hidden], .mc-zonehint[hidden], .mc-btns[hidden] {
  display: none !important;
}
.mc-stage canvas { display: block; width: 100%; height: 100%; background: #06030f; }

:root {
  --mc-gold: #ffc93c;
  --mc-cyan: #35e0e0;
  --mc-red: #ff3b30;
  --mc-ink: #fff6e0;
  --mc-panel: rgba(10, 5, 25, 0.82);
  --mc-line: #4a2f8f;
  --mc-num: "Press Start 2P", "Courier New", monospace;
  --mc-px: "DotGothic16", "Courier New", monospace;
}

/* ------- HUD ------- */
.mc-hud { position: absolute; inset: 0; pointer-events: none; padding: 10px 12px;
  display: flex; flex-direction: column; justify-content: space-between; }
.mc-panel { background: var(--mc-panel); border: 2px solid var(--mc-line);
  padding: 6px 9px; display: flex; flex-direction: column; gap: 3px; }
.mc-hud-top, .mc-hud-bot { display: flex; justify-content: space-between;
  align-items: flex-start; gap: 8px; }
.mc-hud-bot { align-items: flex-end; }
.mc-right { text-align: right; align-items: flex-end; }
.mc-lbl { font-family: var(--mc-num); font-size: 7px; letter-spacing: .08em;
  color: var(--mc-cyan); }
.mc-dim { color: rgba(255, 246, 224, 0.45); }
.mc-gold { color: var(--mc-gold); }
.mc-ml { font-family: var(--mc-num); font-size: 22px; color: var(--mc-ink);
  text-shadow: 0 2px 0 #6a2fb0; line-height: 1.1; }
.mc-ml i { font-style: normal; font-size: 10px; }
.mc-score { font-family: var(--mc-num); font-size: 13px; color: var(--mc-cyan);
  text-shadow: 0 2px 0 #0a5c5c; }
.mc-lbl.mc-near { color: var(--mc-red); animation: mc-blink .28s steps(2) infinite; }
@keyframes mc-blink { 50% { opacity: .25; } }

.mc-chips { display: flex; flex-direction: column; gap: 4px; }
.mc-chip { font-family: var(--mc-num); font-size: 7px; letter-spacing: .06em;
  background: var(--mc-panel); border: 2px solid var(--mc-line);
  padding: 4px 7px; color: var(--mc-gold); }
.mc-chip.mc-chip-cyan { color: var(--mc-cyan); }

/* ------- toast ------- */
.mc-toast { position: absolute; left: 50%; top: 18%;
  transform: translate(-50%, 0) scale(.9);
  font-family: var(--mc-px); font-size: 15px; background: #150c2e;
  border: 2px solid var(--mc-gold); color: var(--mc-gold);
  padding: 6px 13px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s; z-index: 3; }
.mc-toast.on { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ------- screens (menu + tab) ------- */
.mc-panel-screen { position: absolute;
  /* .jg-panel sets inset:0 and centers with flex, which caps the height at
     50% of the stage and clips overflow at the top. Undo both. */
  inset: auto; left: 50%; top: 50%; right: auto; bottom: auto;
  justify-content: flex-start;
  transform: translate(-50%, -50%); width: min(92%, 380px);
  max-height: 94%; overflow-y: auto;
  background: rgba(21, 12, 46, 0.96); border: 2px solid var(--mc-line);
  font-family: var(--mc-px); color: var(--mc-ink); z-index: 4; }
.mc-logo { text-align: center; margin: .2rem 0 .4rem; }
.mc-logo span { display: block; font-size: 44px; letter-spacing: .08em;
  color: var(--mc-gold); text-shadow: 0 4px 0 var(--mc-red), 0 8px 0 #7a0f0a;
  line-height: 1.1; }
.mc-logo em { display: block; font-style: normal; font-family: var(--mc-num);
  font-size: 9px; letter-spacing: .3em; color: var(--mc-cyan); margin-top: 8px; }
.mc-panel-screen p { font-size: 15px; line-height: 1.5; }
.mc-keys { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.mc-keys kbd { font-family: var(--mc-num); font-size: 8px; background: #3d2a6b;
  border: 2px solid #6a4fb5; border-bottom-width: 4px; padding: 3px 6px;
  color: var(--mc-ink); }
.mc-keys i { font-style: normal; color: rgba(255, 246, 224, 0.75); }
.mc-btn-gold { background: var(--mc-gold); color: #3a1400;
  border-color: #a06a00; font-family: var(--mc-num); font-size: 10px; }
.mc-panel-screen .jg-btn { font-family: var(--mc-num); font-size: 10px; }
.mc-date { font-size: 8px; opacity: .75; }

/* ------- leaderboard ------- */
.mc-board { font-family: var(--mc-num); font-size: 8px; line-height: 2.1;
  background: #1c1138; border: 2px solid var(--mc-line); padding: 7px 9px; }
.mc-board h3 { font-size: 7px; letter-spacing: .14em; color: var(--mc-cyan);
  margin: 0 0 4px; font-weight: 400; }
.mc-board ol { list-style: none; margin: 0; padding: 0; }
.mc-board li { display: flex; gap: 8px; color: var(--mc-ink); }
.mc-board li .r { color: var(--mc-cyan); width: 2em; }
.mc-board li .n { letter-spacing: .2em; }
.mc-board li .s { margin-left: auto; color: var(--mc-gold); }
.mc-board li.me { color: var(--mc-gold); animation: mc-blink .5s steps(2) infinite; }
.mc-board .mc-empty { color: rgba(255, 246, 224, 0.45); }

#menu-board { background: none; border: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }

/* ------- receipt ------- */
.mc-receipt-h { text-align: center; font-size: 22px; margin: .2rem 0; }
.mc-receipt-h span { color: var(--mc-gold); }
.mc-receipt-h em { display: block; font-style: normal; font-family: var(--mc-num);
  font-size: 8px; letter-spacing: .3em; color: var(--mc-cyan); margin-top: 6px; }
.mc-receipt { background: var(--mc-ink); color: #1a1208;
  font-family: var(--mc-num); font-size: 8px; line-height: 2.2;
  padding: 10px 12px; border-bottom: 6px dashed #b8a67e; }
.mc-receipt .row { display: flex; justify-content: space-between; gap: 8px; }
.mc-receipt .big { font-size: 12px; }
.mc-receipt .rule { border-top: 1px dashed #8a7a58; margin: 4px 0; }
.mc-receipt .record { color: #c7271c; text-align: center;
  animation: mc-blink .4s steps(2) infinite; }
.mc-initials { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; }
.mc-initials input { width: 5.2em; font-family: var(--mc-num); font-size: 16px;
  letter-spacing: .4em; text-transform: uppercase; text-align: center;
  background: #1c1138; color: var(--mc-gold); border: 2px solid var(--mc-line);
  padding: 6px 4px; }
.mc-initials input:focus { outline: 2px solid var(--mc-gold); }

/* ------- touch -------
 * Two schemes. The explicit pad is the default because the floating
 * thumbstick shipped first and was reported as hard to use; the stick stays
 * behind a toggle for anyone who prefers it, retuned so it is no longer
 * twitchy (see the hysteresis note in mug-climb.js).
 *
 * Input is read on the stage with pointer events, never per button (see
 * mug-climb.js). A touch is implicitly captured by the element it starts on,
 * so per-button handlers cannot see a thumb slide from one arrow to the
 * other: changing direction meant lifting and re-pressing, in a game that
 * changes direction constantly. Everything here is therefore a pure
 * affordance, pointer-events: none throughout. Nothing is a hit target.
 *
 * There is no drop-through button. This is a climber; you are going up, and
 * a fourth control crowding a 375px phone cost more than it was worth. The
 * down key still works on desktop.
 */
.mc-touch { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.mc-touch * { pointer-events: none; }

.mc-tbtn { position: absolute; width: 84px; height: 84px;
  /* Lifted well clear of the bottom edge and the home indicator: the first
     cut sat 12px off the bottom with no inset and players were missing it. */
  bottom: calc(54px + env(safe-area-inset-bottom, 0px));
  background: rgba(61, 42, 107, 0.68); border: 3px solid #6a4fb5;
  border-bottom-width: 6px; color: var(--mc-ink); font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none; }
.mc-tbtn.press { background: var(--mc-gold); color: #3a1400;
  border-color: #a06a00; transform: translateY(3px); }

#tL { left: 14px; }
#tR { left: 126px; }        /* 28px of clear air between the arrows */

/* Jump is the most-pressed control by a distance, and with the drop button
   gone there is room to make it one. Visually big, and its hit box is padded
   wider still in mug-climb.js. */
.mc-tjump { right: 14px; width: 124px; height: 124px; font-size: 40px;
  bottom: calc(46px + env(safe-area-inset-bottom, 0px)); }

/* Thumbstick mode. The ring marks where the thumb landed; the knob shows
   how far it has travelled against the deadzone. */
.mc-stick { position: absolute; width: 0; height: 0; }
.mc-stick::before { content: ""; position: absolute; left: -52px; top: -52px;
  width: 104px; height: 104px; border: 3px solid rgba(255, 201, 60, 0.28);
  border-radius: 50%; }
.mc-stick i { position: absolute; left: -28px; top: -28px; width: 56px;
  height: 56px; border: 3px solid rgba(255, 201, 60, 0.85); border-radius: 50%;
  background: rgba(255, 201, 60, 0.18); }

.mc-zonehint { position: absolute; inset: auto 0 0 0; display: flex;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.mc-zonehint span { flex: 1; text-align: center; font-family: var(--mc-num);
  font-size: 7px; letter-spacing: .12em; color: rgba(255, 246, 224, 0.26); }
.mc-zonehint span + span { border-left: 1px solid rgba(255, 246, 224, 0.10); }

/* Scheme toggle on the menu. */
.mc-ctrl-row { display: flex; align-items: center; justify-content: center;
  gap: 8px; font-family: var(--mc-num); font-size: 7px;
  letter-spacing: .12em; color: var(--mc-cyan); }
.mc-seg { font-family: var(--mc-num); font-size: 8px; letter-spacing: .06em;
  padding: 8px 12px; background: #3d2a6b; color: var(--mc-ink);
  border: 2px solid var(--mc-line); border-bottom-width: 4px; cursor: pointer; }
.mc-seg.on { background: var(--mc-gold); color: #3a1400; border-color: #a06a00; }

/* Keep the HUD above the control band. */
body.mc-touch-on .mc-hud {
  padding-bottom: calc(182px + env(safe-area-inset-bottom, 0px));
}
body.mc-touch-on.mc-zones .mc-hud {
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}