* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 600px;
  height: 600px;
  overflow: hidden;
  background: #000000; /* 加算式ディスプレイでは透明 */
  color: #e8ecf2;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  user-select: none;
}

#stage { position: relative; width: 600px; height: 600px; }

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hidden { display: none !important; }

/* ---------- タイトル ---------- */
#screen-title { justify-content: center; gap: 26px; }

.logo {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: 4px;
  text-shadow: 0 0 18px rgba(120, 220, 255, .35);
}
.logo-num {
  color: #7fe7ff;
  text-shadow: 0 0 14px rgba(127, 231, 255, .9), 0 0 40px rgba(127, 231, 255, .5);
}
.tagline { font-size: 20px; color: #aab6c6; }

/* ---------- メニュー共通 ---------- */
.menu { list-style: none; text-align: center; }
.menu li {
  font-size: 26px;
  padding: 10px 44px;
  margin: 8px auto;
  border-radius: 14px;
  color: #93a1b5;
  background: #0e1118;
  border: 1px solid #232a38;
  width: fit-content;
}
.menu li.selected {
  color: #ffffff;
  background: #142433;
  border-color: #7fe7ff;
  box-shadow: 0 0 14px rgba(127, 231, 255, .45);
}
.menu li.selected::before { content: "▸ "; color: #7fe7ff; }

.hint { font-size: 16px; color: #6b7686; }
#screen-title .hint { position: absolute; bottom: 26px; }

/* ---------- あそびかた ---------- */
#screen-howto { justify-content: center; gap: 22px; }
.howto-title {
  font-size: 34px;
  color: #7fe7ff;
  text-shadow: 0 0 12px rgba(127, 231, 255, .6);
}
.howto-body {
  background: #0e1118;
  border: 1px solid #232a38;
  border-radius: 16px;
  padding: 22px 30px;
  width: 500px;
  font-size: 20px;
  line-height: 1.75;
}
.howto-body p + p { margin-top: 8px; }
.c-cyan { color: #7fe7ff; }

/* ---------- ゲーム ---------- */
#hud {
  width: 520px;
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hud-title { font-size: 26px; font-weight: 800; letter-spacing: 2px; }
.hud-scores { display: flex; gap: 10px; }
.scorebox {
  background: #0e1118;
  border: 1px solid #232a38;
  border-radius: 10px;
  padding: 4px 14px;
  text-align: center;
  min-width: 92px;
}
.scorebox span { display: block; font-size: 12px; color: #8b96a6; }
.scorebox b { font-size: 22px; color: #7fe7ff; }

#board {
  position: relative;
  width: 450px;
  height: 450px;
  margin-top: 10px;
  background: #0a0d13;
  border: 1px solid #232a38;
  border-radius: 14px;
}
#cells, #tiles { position: absolute; inset: 0; }

.cell {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background: #141821;
}

.tile {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  transition: transform .12s ease-out;
  will-change: transform;
}
.tile.pop { animation: pop .16s ease-out; }
.tile.spawn { animation: spawn .14s ease-out; }
@keyframes pop { 0% { scale: 1; } 50% { scale: 1.18; } 100% { scale: 1; } }
@keyframes spawn { 0% { scale: .4; opacity: 0; } 100% { scale: 1; opacity: 1; } }

.tile { font-size: 44px; }
.tile.d3 { font-size: 38px; }
.tile.d4 { font-size: 30px; }

.t2    { background: #1c212c; color: #cfd8dc; }
.t4    { background: #223041; color: #d0e8ff; }
.t8    { background: #0e3a4a; color: #7fe7ff; box-shadow: 0 0 14px rgba(127, 231, 255, .45); }
.t16   { background: #0e4a3a; color: #7fffd0; box-shadow: 0 0 14px rgba(127, 255, 208, .45); }
.t32   { background: #4a460e; color: #fff77f; box-shadow: 0 0 16px rgba(255, 247, 127, .5); }
.t64   { background: #4a2e0e; color: #ffc97f; box-shadow: 0 0 16px rgba(255, 201, 127, .5); }
.t128  { background: #4a0e2e; color: #ff7fbf; box-shadow: 0 0 18px rgba(255, 127, 191, .55); }
.t256  { background: #3a0e4a; color: #d67fff; box-shadow: 0 0 18px rgba(214, 127, 255, .55); }
.t512  { background: #0e1e4a; color: #7fa0ff; box-shadow: 0 0 20px rgba(127, 160, 255, .6); }
.t1024 { background: #4a0e0e; color: #ff8f7f; box-shadow: 0 0 20px rgba(255, 143, 127, .6); }
.t2048 { background: #4a3a0e; color: #ffe97f; box-shadow: 0 0 26px rgba(255, 233, 127, .85), 0 0 60px rgba(255, 233, 127, .4); }
.tbig  { background: #333844; color: #ffffff; box-shadow: 0 0 26px rgba(255, 255, 255, .7); }

#screen-game .hint { margin-top: 12px; }

/* ---------- オーバーレイ ---------- */
#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .72);
}
#overlay-box {
  background: #0e1118;
  border: 1px solid #2c3648;
  border-radius: 18px;
  padding: 28px 44px;
  text-align: center;
  box-shadow: 0 0 30px rgba(0, 0, 0, .8);
}
#overlay-title {
  font-size: 32px;
  margin-bottom: 6px;
  text-shadow: 0 0 14px rgba(127, 231, 255, .5);
}
#overlay-sub { font-size: 18px; color: #aab6c6; margin-bottom: 14px; }