/*
 * mc-entry.css — page skin for the five entry screens:
 * index.html (landing + "treasure found"), register.html, login.html,
 * award.html, offline.html.
 *
 * Loads AFTER css/mc.css; everything here is scoped under body.mc, so the
 * legacy style.css keeps doing the layout work and mc.css the shared reskin —
 * this file only paints what those two do not cover on these pages.
 */

/* ── index: hero ─────────────────────────────────────────────────────── */

/* The landing title is the one place the brand is the whole screen — let it
   breathe a little wider than the in-page .brand size. */
body.mc .panel--hero .brand {
  font-size: clamp(1.35rem, 6vw, 1.9rem);
  letter-spacing: 0.04em;
}

/*
 * "You found a treasure!" — a raised card of its own, so the state reads as an
 * event, not as the landing copy with different words. The eyebrow goes gold
 * here: on this screen it is the headline, and gold is the accent that says
 * "prize" everywhere else in the skin (5.82:1 on --panel, higher on --panel-2).
 */
body.mc .point-arrival {
  margin-top: 0.35rem;
  padding: 1rem 0.9rem 1.1rem;
  background: var(--panel-2);
  border: 2px solid var(--border-dark);
  border-radius: 2px;
  box-shadow:
    inset 2px 2px 0 var(--edge-light),
    inset -2px -2px 0 var(--edge-dark);
}

body.mc .point-arrival[hidden] {
  display: none !important;
}

body.mc .point-arrival .eyebrow {
  color: var(--accent-gold);
  /* The card sits below the lang switch, so the clearance padding of the
     page-level eyebrow is dead space here. */
  padding-inline-end: 0;
  text-shadow: var(--text-sh);
}

body.mc .point-arrival__icon {
  /* The emoji gem keeps its own colours; the drop shadow seats it on the card. */
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.45));
}

/* ── login: takeover wait card ───────────────────────────────────────── */

/*
 * A pressed (sunken) niche rather than a raised plate: this is a waiting state,
 * not a control. style.css paints it as a light grey slab that would glow on
 * the dark panel.
 */
body.mc .takeover {
  background: var(--panel-2);
  border: 2px solid var(--border-dark);
  border-radius: 2px;
  box-shadow:
    inset -2px -2px 0 var(--edge-light),
    inset 2px 2px 0 var(--edge-dark);
}

body.mc .takeover[hidden] {
  display: none !important;
}

body.mc .takeover__title {
  color: var(--text-primary);
  text-shadow: var(--text-sh);
}

body.mc .takeover__lede {
  color: var(--text-secondary); /* 7.2:1 on --panel-2 */
}

body.mc .takeover__nickname {
  color: var(--accent-gold);
  text-shadow: var(--text-sh);
}

/* style.css draws the ring in #4a4a4a — invisible on the dark card. */
body.mc .takeover__spinner {
  border-color: rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent-gold);
}

/* ── award: the festive screen ───────────────────────────────────────── */

/*
 * The artifact sits in an item slot with a gold ring and a soft glow — the one
 * screen allowed to celebrate. The ring is on the SUCCESS icon only: the
 * loading cube spins (a rotating frame would wobble) and must stay modest.
 */
body.mc #award-success .award-icon svg {
  background: var(--slot-bg);
  border: 2px solid var(--border-dark);
  border-radius: 2px;
  padding: 14px;
  box-shadow:
    inset 2px 2px 0 var(--edge-dark),
    inset -2px -2px 0 rgba(255, 255, 255, 0.14),
    0 0 0 3px #d4a017,
    0 0 28px rgba(255, 211, 92, 0.4);
}

/* Congratulation in gold — the page-level white title stays for errors. */
body.mc #award-success .page-title {
  color: var(--accent-gold);
  text-shadow: var(--text-sh);
}

/* ── offline: quiet service tone ─────────────────────────────────────── */

/*
 * The reassurance line ("everything you collected is safe") is the sentence
 * this page exists for — white, while the diagnosis and the tip stay
 * secondary/muted around it.
 */
body.mc .offline-safe {
  color: var(--text-primary);
}

body.mc .offline-hint {
  color: var(--text-muted); /* 4.65:1 on --panel */
  font-size: 0.9rem;
}

/* ── shared fixes for these pages ────────────────────────────────────── */

/*
 * Link-shaped buttons (<a class="btn">) were underlined: mc.css's `body.mc a`
 * (0,1,1) outranks style.css's `.btn { text-decoration: none }` (0,1,0).
 * Every entry page routes through such buttons, so restated here.
 */
body.mc .btn {
  text-decoration: none;
}

/* The tip sat flush against the retry button — .lede has no top margin. */
body.mc .offline-hint {
  margin-top: 0.9rem;
}

/* ── light theme (data-mc-theme="light") ─────────────────────────────── */

/*
 * The waiting ring is white-on-dark by design; on the light --panel-2 the
 * white 18% arc vanishes and only the gold quarter is left — a lone dash
 * instead of a spinner. Dark ring, same gold lead (the token flips it to the
 * readable dark amber, 4.72:1 on --panel).
 */
:root[data-mc-theme="light"] body.mc .takeover__spinner {
  border-color: rgba(0, 0, 0, 0.22);
  border-top-color: var(--accent-gold);
}

/*
 * The artifact slot STAYS dark in the light theme: the award pixel art is
 * drawn for a dark ground — the Jerusalem star is #ffd35c/#fff7d6, which is
 * 1.16:1 against the light --slot-bg (measured; the star simply vanished).
 * A dark item slot on a light panel is also the Minecraft inventory idiom,
 * so this is a deliberate constant, not a missed token.
 * Box-shadow rewritten whole (the modifier trap): same edges, but the ring
 * takes var(--accent-gold) — in light that is the dark amber (3:1+ against
 * both the slot and the panel), the raw #d4a017 washed out at 1.39:1 — and
 * the glow darkens to stay visible on the light ground.
 */
:root[data-mc-theme="light"] body.mc #award-success .award-icon svg {
  background: #333335;
  border-color: #1e1e1f;
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, 0.5),
    inset -2px -2px 0 rgba(255, 255, 255, 0.14),
    0 0 0 3px var(--accent-gold),
    0 0 28px rgba(111, 72, 0, 0.35);
}

/*
 * The loading cube's light-green rim (#5bd66b) is 1.09:1 on the light panel —
 * the cube shrank to its dark core. A pixel drop shadow seats it, same as the
 * treasure icon on index. On the WRAPPER, not the svg: the svg rotates, and a
 * shadow rotating with it would wobble around the cube.
 */
:root[data-mc-theme="light"] body.mc .award-icon--spin {
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.45));
}

/* ── award: error title vs the corner plates (both themes) ───────────── */

/*
 * The corner now holds THREE plates (two languages + theme), and every award
 * state begins at the very top of the panel: the error state's bare centered
 * title slid under the plates (style.css strips the page-title's inline-end
 * clearance on award pages), and in LTR the success slot's gold ring corner
 * ran under the עב plate too. One headroom for all three states, so nothing
 * starts beside the plates. Not theme-scoped — the layout is shared and the
 * collision was identical in dark.
 */
body.mc .panel--award .award-state {
  padding-top: 2.6rem;
}