:root {
  --ink: #e8f4f1;
  --muted: #96aaa7;
  --void: #071112;
  --deep: #0b1a1c;
  --panel: rgba(13, 32, 34, .78);
  --line: rgba(152, 245, 218, .2);
  --mint: #7df5d2;
  --cyan: #57c8ff;
  --coral: #ff7f72;
  --amber: #ffc865;
  --danger: #ff766b;
  --shadow: 0 20px 45px rgba(0, 0, 0, .26);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--void); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: Georgia, "Noto Serif SC", "Songti SC", serif;
  background:
    linear-gradient(rgba(7, 17, 18, .88), rgba(7, 17, 18, .97)),
    linear-gradient(125deg, transparent 0 44%, rgba(88, 200, 255, .09) 44.2% 44.45%, transparent 44.7%),
    linear-gradient(38deg, transparent 0 70%, rgba(125, 245, 210, .08) 70.2% 70.45%, transparent 70.7%),
    var(--void);
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: .26;
  background-image: radial-gradient(rgba(199,255,237,.82) .75px, transparent .8px);
  background-size: 33px 33px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1160px, calc(100% - 32px)); margin: 0 auto; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: .04em; }
.brand-mark {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  color: var(--void);
  font-family: ui-monospace, Consolas, monospace;
  background: var(--mint);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--coral);
}
.nav { display: flex; align-items: center; gap: 7px; }
.nav a {
  padding: 8px 10px;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 4px;
  transition: color .18s, border-color .18s, background .18s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-color: var(--line); background: rgba(125,245,210,.07); }

.eyebrow { margin: 0 0 11px; color: var(--mint); font: 700 12px/1 ui-monospace, Consolas, monospace; letter-spacing: .13em; text-transform: uppercase; }
.hero { padding: clamp(58px, 11vw, 120px) 0 56px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: clamp(30px, 7vw, 90px); align-items: end; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 720px; margin-bottom: 19px; font-size: clamp(44px, 8vw, 90px); line-height: .91; letter-spacing: 0; }
h2 { font-size: clamp(28px, 4vw, 46px); line-height: 1; }
h3 { font-size: 23px; }
.hero-copy { max-width: 530px; color: #c1d3ce; font-size: 19px; line-height: 1.65; }
.hero-copy strong { color: var(--mint); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 17px;
  font-weight: 700;
  border: 1px solid var(--mint);
  border-radius: 4px;
  color: #05100f;
  background: var(--mint);
  transition: transform .17s ease, box-shadow .17s ease, background .17s;
}
.button:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--coral); }
.button.secondary { color: var(--ink); border-color: var(--line); background: rgba(10, 28, 29, .45); }
.button.secondary:hover { border-color: var(--cyan); box-shadow: 4px 4px 0 var(--cyan); }
.button.small { min-height: 38px; padding: 7px 11px; font-size: 14px; }

.signal-panel { padding: 21px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 6px; }
.signal-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(150,170,167,.14); }
.signal-row:last-child { border-bottom: 0; }
.signal-label { color: var(--muted); font-size: 14px; }
.signal-value { font-family: ui-monospace, Consolas, monospace; font-size: 14px; text-align: right; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 4px rgba(125,245,210,.1); }

.section { padding: 50px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.section-heading p { max-width: 490px; margin-bottom: 5px; color: var(--muted); line-height: 1.55; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.feature-card, .game-card, .chat-card {
  position: relative;
  display: flex;
  min-height: 212px;
  flex-direction: column;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  box-shadow: 0 10px 25px rgba(0,0,0,.13);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.feature-card::after, .game-card::after, .chat-card::after { position: absolute; right: -33px; bottom: -58px; width: 130px; height: 130px; content: ""; border: 1px solid rgba(125,245,210,.18); border-radius: 50%; }
.feature-card:hover, .game-card:hover, .chat-card:hover { transform: translateY(-4px); border-color: var(--mint); background: rgba(18, 43, 45, .94); }
.card-icon { margin-bottom: 21px; font-size: 34px; }
.feature-card p, .game-card p, .chat-card p { margin-bottom: 18px; color: var(--muted); line-height: 1.55; }
.card-link { margin-top: auto; color: var(--mint); font-weight: 700; }
.wide-chat { display: grid; grid-template-columns: 1.1fr .9fr; gap: 15px; margin-top: 15px; }
.chat-card { min-height: 230px; }
.chat-facts { display: grid; gap: 0; padding: 18px; border: 1px solid var(--line); border-radius: 5px; background: rgba(8,23,25,.64); }
.fact { padding: 12px 0; border-bottom: 1px solid rgba(150,170,167,.14); }.fact:last-child { border:0; }
.fact b { display:block; margin-bottom:5px; color:var(--mint); font:700 12px ui-monospace,Consolas,monospace; letter-spacing:.1em; }
.fact span { color:var(--muted); font-size: 14px; }

.page-head { padding: 54px 0 20px; }
.page-head h1 { font-size: clamp(39px, 6vw, 66px); }
.page-head p { max-width: 600px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.back-link { display: inline-block; margin-bottom: 22px; color: var(--mint); font-weight: 700; }
.game-card { min-height: 260px; }
.game-tag { margin-bottom: auto; color: var(--cyan); font: 700 12px ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.game-art { position:absolute; right:16px; bottom:13px; color:rgba(125,245,210,.23); font:700 58px/1 ui-monospace,Consolas,monospace; }

.game-shell { width: min(740px, 100%); margin: 18px auto 68px; }
.game-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.stat-row { display:flex; gap:9px; }.stat { min-width:92px; padding:8px 10px; border:1px solid var(--line); border-radius:4px; background:rgba(15,37,38,.9); }.stat span { display:block; color:var(--muted); font:11px ui-monospace,Consolas,monospace; letter-spacing:.09em; }.stat strong { font-size:20px; }
.game-panel { padding:clamp(13px,3vw,24px); border:1px solid var(--line); border-radius:6px; background:rgba(9,25,27,.9); box-shadow:var(--shadow); }
.game-help { margin:16px 0 0; color:var(--muted); text-align:center; font-size:14px; line-height:1.5; }

.board-2048 { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; width:min(520px,100%); margin:0 auto; padding:9px; touch-action:none; background:#173437; border-radius:4px; aspect-ratio:1; }
.tile { display:grid; place-items:center; min-width:0; color:#e8fff9; font:700 clamp(19px,6vw,39px)/1 ui-monospace,Consolas,monospace; background:#285155; border-radius:3px; transition: transform .08s, background .15s; }
.tile[data-value="2"]{background:#2d6869}.tile[data-value="4"]{background:#347c79}.tile[data-value="8"]{background:#3d8685}.tile[data-value="16"]{background:#3f9c96}.tile[data-value="32"]{background:#58b89f;color:#071112}.tile[data-value="64"]{background:#86cf9a;color:#071112}.tile[data-value="128"]{background:#f0d675;color:#17201b}.tile[data-value="256"]{background:#ffb85d;color:#17201b}.tile[data-value="512"]{background:#ff8c61}.tile[data-value="1024"]{background:#ff7670}.tile[data-value="2048"]{background:#f49be1;color:#201323}.tile[data-value="4096"]{background:#c99aff;color:#15121f}
.game-overlay { position:absolute; inset:0; display:grid; place-items:center; padding:20px; text-align:center; background:rgba(5,15,16,.8); border-radius:6px; }
.game-overlay[hidden] { display:none; }.game-overlay h2 { margin-bottom:8px; }.game-overlay p { color:var(--muted); }
.relative { position:relative; }

.snake-wrap { position:relative; width:min(540px,100%); margin:0 auto; }.snake-canvas { display:block; width:100%; background:#071415; border:1px solid #295454; border-radius:4px; image-rendering: pixelated; }.d-pad { display:grid; width:156px; grid-template-columns:repeat(3, 48px); gap:6px; margin:19px auto 0; }.d-pad button { height:45px; color:var(--ink); border:1px solid var(--line); border-radius:4px; background:#183638; }.d-pad button:active { color:#06100f; background:var(--mint); }.d-pad .up { grid-column:2; }.d-pad .left { grid-column:1; }.d-pad .down { grid-column:2; }.d-pad .right { grid-column:3; grid-row:2; }

.mine-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:13px; }.mine-controls label { color:var(--muted); }.mine-controls select { padding:8px; color:var(--ink); border:1px solid var(--line); border-radius:4px; background:#102c2e; }.mines-board { display:grid; width:var(--board-width, 100%); max-width:100%; margin:0 auto; gap:3px; touch-action:manipulation; }.mine-cell { display:grid; width:100%; height:auto; aspect-ratio:1; min-width:0; place-items:center; padding:0; color:#e9fff5; font:700 clamp(11px,3vw,15px) ui-monospace,Consolas,monospace; border:1px solid #3a7070; border-radius:2px; background:#255557; }.mine-cell.open { border-color:#224446; background:#102e30; }.mine-cell.flag { color:var(--amber); }.mine-cell.mine { color:var(--danger); background:#49252b; }.mine-cell.n1{color:#6edcff}.mine-cell.n2{color:#7df5a6}.mine-cell.n3{color:#ff9b7e}.mine-cell.n4{color:#d5aeff}

.site-footer { display:flex; justify-content:space-between; gap:16px; padding:34px 0; color:#6f8784; border-top:1px solid var(--line); font-size:13px; }
.toast { position:fixed; z-index:30; right:20px; bottom:20px; max-width:min(360px,calc(100% - 40px)); padding:12px 15px; color:#071112; font-weight:700; background:var(--mint); border-radius:4px; box-shadow:var(--shadow); transform:translateY(90px); opacity:0; transition:.25s ease; }.toast.show { transform:none; opacity:1; }

@media (max-width: 760px) {
  .site-header { min-height:68px; gap:12px; }.brand { font-size:14px; }.nav { gap:0; }.nav a { padding:7px 6px; font-size:13px; }
  .hero-grid, .wide-chat { grid-template-columns:1fr; }.hero { padding-top:60px; }.card-grid { grid-template-columns:1fr; }.section { padding:36px 0; }.section-heading { display:block; }.section-heading h2 { margin-bottom:12px; }.site-footer { flex-direction:column; }.game-toolbar { align-items:flex-start; }.stat-row { width:100%; }.stat { flex:1; }.page-head { padding-top:40px; }
}