:root {
  --bg: #0d1117; --panel: #161b22; --line: #30363d; --text: #e6edf3; --muted: #8b949e;
  --green: #3fb950; --red: #f85149; --accent: #d29922;
  --mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 1.25rem 1rem 2rem; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
#game { max-width: 760px; margin: 0 auto; }

.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
h1 { margin: 0 0 .25rem; font-size: 1.5rem; color: var(--accent); }
h2 { margin: 0 0 .4rem; font-size: 1.2rem; }
.sub { margin: 0; color: var(--muted); font-size: .95rem; }
.primary { font: inherit; cursor: pointer; padding: .6rem 1.1rem; border-radius: 8px;
  border: 1px solid var(--accent); background: var(--panel); color: var(--text); }
.primary:hover { background: #21262d; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: 1rem; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; }
.label { display: block; font-size: .75rem; color: var(--muted); }
.num { font-family: var(--mono); font-size: 1.05rem; }
#portfolio { color: var(--green); }

.bar { height: 10px; margin-top: .6rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden; }
.fill { height: 100%; width: 100%; background: var(--green); transition: width .4s, background .4s; }
.fill.warn { background: var(--accent); }
.fill.danger { background: var(--red); }

.message { min-height: 1.5rem; margin: .8rem 0; }

.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.card { position: relative; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer; perspective: 800px; }
.card-inner { position: absolute; inset: 0; transition: transform .45s; transform-style: preserve-3d; }
.card.flipped .card-inner { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: .3rem; text-align: center; border-radius: 8px; border: 2px solid var(--line);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow-wrap: anywhere; hyphens: auto; }
.front { background: var(--panel); color: var(--muted); font-family: var(--mono); font-size: 1.5rem; }
.back { background: #1c2128; transform: rotateY(180deg); font-size: .8rem; line-height: 1.2; }
.card.matched .back { border-color: var(--green); color: var(--green); }
.card.matched { cursor: default; }
.card.wrong .back { border-color: var(--red); color: var(--red); }

.result { margin-top: 1rem; padding: 1rem; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.result.win { border-color: var(--green); }
.result.win h2 { color: var(--green); }
.result.lose { border-color: var(--red); }
.result.lose h2 { color: var(--red); }
.result p { margin: 0; }
.best { margin-top: 1rem; color: var(--muted); font-size: .9rem; }

@media (max-width: 520px) {
  body { padding: 1rem .6rem 1.5rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .board { gap: .35rem; }
  .card { aspect-ratio: 3 / 4; }
  .back { font-size: .62rem; padding: .15rem; }
}