/*
 * Nawanoren — the grapple-swing puzzle.
 *
 * Third distinct look in the set on purpose. Mug Climb is a pixel arcade
 * cabinet, Tsumami is soft and glossy; this is ink-and-lantern night: deep
 * indigo, black brush silhouettes, warm paper light. One house style across
 * three very different games would flatten all of them.
 */
.nw-stage { position: relative; overflow: hidden; touch-action: none; }
.nw-stage canvas#canvas { display: block; width: 100%; height: 100%;
  background: #0a0d18; }

:root {
  --nw-gold: #f0b840;
  --nw-paper: #f4ecdc;
  --nw-red: #d0402c;
  --nw-line: rgba(240, 184, 64, 0.26);
  --nw-panel: rgba(10, 13, 24, 0.78);
  --nw-serif: "Shippori Mincho B1", "Hiragino Mincho ProN", Georgia, serif;
}

.nw-hud[hidden], .nw-screen[hidden], .nw-retry[hidden] { display: none !important; }

.nw-hud { position: absolute; inset: 0; pointer-events: none; padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.nw-panel { background: var(--nw-panel); border: 1px solid var(--nw-line);
  border-radius: 10px; padding: 7px 11px; backdrop-filter: blur(6px);
  display: flex; flex-direction: column; gap: 2px; }
.nw-right { align-items: flex-end; }
.nw-lbl { font-family: Inter, system-ui, sans-serif; font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244, 236, 220, 0.5); }
.nw-lbl b { color: var(--nw-gold); font-size: 12px; margin-left: 3px; }
.nw-name { font-family: var(--nw-serif); font-size: 14px; color: var(--nw-paper); }

.nw-retry { position: absolute; right: 14px; bottom: 16px; z-index: 3;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--nw-panel); border: 1px solid var(--nw-line);
  color: var(--nw-paper); font-size: 22px; cursor: pointer;
  backdrop-filter: blur(6px); }
.nw-retry:active { background: var(--nw-gold); color: #23180a; }

/* ---- screens ---- */
.nw-screen { position: absolute; inset: auto; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: min(94%, 400px); max-height: 94%;
  overflow-y: auto; justify-content: flex-start;
  background: linear-gradient(180deg, rgba(17, 22, 38, 0.97), rgba(8, 11, 20, 0.98));
  border: 1px solid var(--nw-line); border-radius: 16px;
  font-family: var(--nw-serif); color: var(--nw-paper);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65); z-index: 5; }
.nw-logo { text-align: center; margin: 0; }
.nw-logo span { display: block; font-size: 44px; letter-spacing: .12em;
  color: var(--nw-gold); line-height: 1.15; }
.nw-logo em { display: block; font-style: normal;
  font-family: Inter, system-ui, sans-serif; font-size: 9px; letter-spacing: .32em;
  color: rgba(244, 236, 220, 0.5); margin-top: 8px; }
.nw-logo.nw-small span { font-size: 32px; }
.nw-screen p { font-size: 15px; line-height: 1.55; text-align: center;
  color: rgba(244, 236, 220, 0.82); }
.nw-fine { font-size: 12px !important; color: rgba(244, 236, 220, 0.45) !important; }

.nw-btn-gold { background: var(--nw-gold); color: #23180a; border: 0;
  font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; border-radius: 999px;
  padding: 13px 28px; }
.nw-screen .jg-btn { border-radius: 999px; font-family: Inter, system-ui, sans-serif;
  font-size: 12px; letter-spacing: .14em; }

/* ---- level grid ---- */
.nw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; width: 100%; }
/* 24 levels is six rows; cap the height so the grid scrolls inside the panel
   instead of pushing the buttons off a phone screen. */
.nw-grid { max-height: 46vh; overflow-y: auto; padding-right: 2px; }
.nw-cell { font-size: 17px; }
.nw-cell { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--nw-line);
  background: rgba(255, 255, 255, .035); color: var(--nw-paper);
  font-family: var(--nw-serif); font-size: 19px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 0; }
.nw-cell .st { font-size: 8px; letter-spacing: .12em; color: var(--nw-gold); height: 10px; }
.nw-cell.locked { color: rgba(244, 236, 220, 0.22); border-color: rgba(244, 236, 220, .08);
  cursor: not-allowed; background: rgba(255, 255, 255, .012); }
.nw-cell.cleared { border-color: rgba(240, 184, 64, .5); }
/* opened because you kept trying, not because you cleared the one before */
.nw-cell.skipped { border-style: dashed; border-color: rgba(240, 184, 64, .32); }
.nw-cell.skipped .st { color: rgba(244, 236, 220, .35); letter-spacing: .06em; }
.nw-cell:not(.locked):active { background: var(--nw-gold); color: #23180a; }

.nw-stars { font-size: 30px; letter-spacing: .18em; color: var(--nw-gold);
  text-align: center; }
.nw-stars .off { color: rgba(244, 236, 220, 0.16); }

@media (max-width: 430px) {
  .nw-logo span { font-size: 36px; }
  .nw-screen { gap: .7rem; padding: 1rem; }
  .nw-screen p { font-size: 14px; }
}