/* Shared look for the 情報漏洩ゲームズ series. Each game sets --accent / --bg in its own CSS. */
@font-face { font-family: "Dela"; src: url("./fonts/DelaGothicOne-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Maru"; src: url("./fonts/MPLUSRounded1c-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Maru"; src: url("./fonts/MPLUSRounded1c-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --ink: #1a1a2e;
  --paper: #fffaf0;
  --accent: #ff3b5c;
  --accent-2: #ffd23f;
  --bg: #2b2d42;
  --bg-2: #1f2033;
  --radius: 22px;
  --shadow: 0 6px 0 rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg-2); color: var(--paper); overflow: hidden;
  font-family: "Maru", system-ui, sans-serif; font-weight: 800; user-select: none; -webkit-user-select: none;
  touch-action: none; overscroll-behavior: none; }

/* Stage: fixed 9:16 logical area, centred and letterboxed on wide screens. */
#stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100vw, calc(100dvh * 9 / 16)); height: min(100dvh, calc(100vw * 16 / 9));
  overflow: hidden; background: var(--bg); }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(circle at 50% 40%, var(--bg) 0%, var(--bg-2) 70%); }

/* Overlay screens */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.2cqh; padding: 6cqw; text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s; container-type: size; }
.screen.on { opacity: 1; pointer-events: auto; }
#stage { container-type: size; }

.title-logo { font-family: "Dela"; line-height: 1.05; font-size: 13cqw; color: var(--paper);
  -webkit-text-stroke: 1.6cqw var(--ink); paint-order: stroke fill; text-shadow: 0 1.4cqw 0 var(--ink);
  transform: rotate(-4deg); }
.title-logo .sub { display: block; font-size: 6.4cqw; color: var(--accent-2); margin-top: 1cqh; }
.title-art { width: 78cqw; max-height: 42cqh; object-fit: contain; filter: drop-shadow(0 1.5cqw 0 rgba(0,0,0,.25)); }

.btn { font-family: "Dela"; font-size: 7cqw; color: var(--ink); background: var(--accent-2); border: .9cqw solid var(--ink);
  border-radius: 99px; padding: 2.4cqw 9cqw; box-shadow: 0 1.6cqw 0 var(--ink); cursor: pointer; transition: transform .08s; }
.btn:active { transform: translateY(1.2cqw); box-shadow: 0 .4cqw 0 var(--ink); }
.btn.sub { font-size: 4.6cqw; background: var(--paper); padding: 1.8cqw 6cqw; }
.btn.x { background: #000; color: #fff; border-color: #000; box-shadow: 0 1.6cqw 0 #444; }
.pulse { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.07); } }

/* Result card */
.result-label { font-size: 5cqw; opacity: .9; }
.result-big { font-family: "Dela"; font-size: 15cqw; line-height: 1; color: var(--accent-2);
  -webkit-text-stroke: 1.2cqw var(--ink); paint-order: stroke fill; text-shadow: 0 1.2cqw 0 var(--ink); }
.result-unit { font-size: 6cqw; }
.result-rank { font-family: "Dela"; font-size: 8cqw; background: var(--accent); color: #fff; padding: 1cqw 5cqw;
  border: .8cqw solid var(--ink); border-radius: 14px; transform: rotate(-3deg); box-shadow: var(--shadow); }
.row { display: flex; gap: 3cqw; flex-wrap: wrap; justify-content: center; }

/* HUD */
.hud { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start;
  padding: 3cqw 4cqw; pointer-events: none; font-size: 5cqw; }
.chip { background: rgba(26,26,46,.82); border-radius: 99px; padding: 1.2cqw 3.6cqw; border: .5cqw solid rgba(255,255,255,.15); }
.icon-btn { pointer-events: auto; width: 10cqw; height: 10cqw; border-radius: 50%; border: .6cqw solid var(--ink);
  background: var(--paper); color: var(--ink); font-size: 5cqw; display: grid; place-items: center; cursor: pointer; box-shadow: 0 .8cqw 0 var(--ink); }

/* Big centre callouts ("LEVEL 3", "×100!" etc.) */
.callout { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(0); font-family: "Dela";
  font-size: 12cqw; white-space: nowrap; color: var(--paper); -webkit-text-stroke: 1.2cqw var(--ink); paint-order: stroke fill;
  text-shadow: 0 1.2cqw 0 var(--ink); pointer-events: none; }
.callout.go { animation: callout 1.1s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes callout { 0% { transform: translate(-50%, -50%) scale(0) rotate(-8deg); opacity: 1; }
  25% { transform: translate(-50%, -50%) scale(1.15) rotate(-4deg); } 40% { transform: translate(-50%, -50%) scale(1) rotate(-4deg); }
  80% { opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1) rotate(-4deg); opacity: 0; } }

.back-link { position: absolute; left: 3cqw; bottom: 2.5cqw; font-size: 3.4cqw; color: var(--paper); opacity: .7; text-decoration: none; pointer-events: auto; }

/* Dela Gothic One has a single weight: never let the browser synthesise bold. */
.title-logo, .btn, .result-big, .result-rank, .callout, [style*="Dela"] { font-weight: 400; font-synthesis: none; }