:root {
  --btn-top: #fff176;
  --btn-mid: #ffd54f;
  --btn-bottom: #ffb300;
  --btn-shadow: rgba(255,179,0,0.55);
  --btn-shadow-active: rgba(255,179,0,0.4);
  --slogan-shadow: #6a1b9a;
  --slogan-glow: rgba(255,213,79,0.7);
  --btn-border: #fff;
  --btn-text: #4a148c;
  --btn-text-sub: rgba(74,20,140,0.85);
  --game-bg: linear-gradient(180deg, #1a0a2e 0%, #2d1b4e 55%, #4a148c 100%);
  --score-color: #fff176;
  --score-glow: 0 0 14px rgba(255,241,118,0.75), 0 2px 4px rgba(0,0,0,0.45);
  --hud-bg: rgba(74,20,140,0.65);
  --hud-border: rgba(255,241,118,0.45);
  --hud-label: #ce93d8;
  --hud-value: #fff;
  --hud-shadow: 0 4px 16px rgba(106,27,154,0.35);
  --home-color: #ffd54f;
  --overlay-bg: rgba(26,10,46,0.82);
  --result-title: #fff176;
  --result-msg: #ce93d8;
  --result-card-bg: rgba(45,27,78,0.92);
  --result-card-border: rgba(255,241,118,0.5);
  --result-box-bg: rgba(255,241,118,0.1);
  --result-label: #ce93d8;
  --home-link: #ffd54f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.screen { display: none; width: 100vw; height: 100vh; position: relative; }
.screen.active { display: flex; flex-direction: column; align-items: center; }

#splash { justify-content: flex-end; }
.splash-bg {
  position: absolute; inset: 0;
  background: url('splash.png') center top/cover no-repeat;
  z-index: 0;
}
.splash-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.0) 40%,
    rgba(0,0,0,0.45) 75%, rgba(0,0,0,0.65) 100%);
}
.splash-bottom {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; padding: 0 24px 7vh;
}
.start-btn {
  min-width: 260px; max-width: 88vw;
  padding: 15px 48px 11px;
  border: 4px solid var(--btn-border);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-mid) 45%, var(--btn-bottom) 100%);
  box-shadow: 0 10px 32px var(--btn-shadow), inset 0 2px 0 rgba(255,255,255,0.42);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.start-btn:active {
  transform: scale(0.96);
  box-shadow: 0 6px 20px var(--btn-shadow-active), inset 0 2px 0 rgba(255,255,255,0.3);
}
.start-btn-sm { min-width: 220px; padding: 12px 36px 9px; margin-top: 4px; }
.start-main {
  font-size: 1.38rem; font-weight: 800; color: var(--btn-text);
  letter-spacing: 0.06em; line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.start-sub {
  font-size: 0.7rem; font-weight: 700; color: var(--btn-text-sub);
  letter-spacing: 0.22em;
}
.splash-slogan {
  margin-top: 20px;
  font-size: clamp(0.95rem, 3.8vw, 1.12rem);
  font-weight: 800; color: #fff; text-align: center;
  text-shadow: 0 2px 0 var(--slogan-shadow), 0 0 16px var(--slogan-glow);
  letter-spacing: 0.02em; line-height: 1.35;
}

#game-screen {
  background: var(--game-bg);
  justify-content: flex-start;
}
.home-btn {
  position: absolute; top: 12px; left: 12px; z-index: 6;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2.5px solid var(--hud-border);
  background: var(--hud-bg);
  color: var(--home-color);
  box-shadow: var(--hud-shadow);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
  backdrop-filter: blur(4px);
}
.home-btn:active { transform: scale(0.93); }
.hud-bar {
  position: absolute; top: 12px; left: 66px; right: 12px; z-index: 5;
  display: flex; gap: 8px;
}
.hud-box {
  flex: 1;
  background: var(--hud-bg);
  border: 2px solid var(--hud-border);
  border-radius: 16px;
  padding: 7px 8px 6px;
  text-align: center;
  box-shadow: var(--hud-shadow);
  backdrop-filter: blur(4px);
}
.hud-label {
  display: block;
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--hud-label);
  text-shadow: none;
  margin-bottom: 2px;
}
.hud-value {
  display: block;
  font-size: 1.18rem; font-weight: 800;
  color: var(--hud-value);
  text-shadow: none;
}
.score-gold {
  color: var(--score-color) !important;
  text-shadow: var(--score-glow) !important;
}

.game-area {
  flex: 1; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 72px 10px 14px;
  position: relative;
}
#game-canvas {
  display: block;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  max-width: 100%;
  max-height: calc(100% - 64px);
}

.tetris-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 4;
  padding: 0 8px;
  max-width: 100%;
}

.ctrl-btn {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 2px solid var(--hud-border);
  background: var(--hud-bg);
  color: var(--hud-value);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--hud-shadow);
  backdrop-filter: blur(4px);
  flex-shrink: 0;
}

.ctrl-btn-drop {
  width: auto;
  padding: 0 14px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--score-color);
}

.ctrl-btn:active {
  transform: scale(0.94);
  opacity: 0.9;
}
#game-board { margin: 0 auto; }

.overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--overlay-bg);
  backdrop-filter: blur(8px);
  padding: 20px;
}
.overlay.hidden { display: none; }
.result-card {
  background: var(--result-card-bg);
  border: 3px solid var(--result-card-border);
  border-radius: 28px;
  padding: 30px 34px 26px;
  box-shadow: var(--hud-shadow);
  min-width: 290px; max-width: 92vw;
  text-align: center;
  backdrop-filter: blur(6px);
}
.result-title {
  font-size: 1.65rem; font-weight: 800;
  color: var(--result-title);
  margin-bottom: 6px; letter-spacing: 0.02em;
}
.result-msg {
  font-size: 0.92rem; font-weight: 600;
  color: var(--result-msg);
  margin-bottom: 18px; line-height: 1.45;
}
.result-score-box {
  background: var(--result-box-bg);
  border: 2px solid var(--result-card-border);
  border-radius: 18px;
  padding: 14px 16px 12px;
  margin-bottom: 22px;
}
.result-score-box .hud-label {
  color: var(--result-label);
  margin-bottom: 4px;
}
.result-score-box .score-gold { font-size: 2.2rem; display: block; }
.home-text-btn {
  margin-top: 14px;
  background: none; border: none; cursor: pointer;
  font-size: 0.88rem; font-weight: 700;
  color: var(--home-link);
  letter-spacing: 0.04em;
  padding: 8px 12px;
  opacity: 0.85;
}
.home-text-btn:active { opacity: 1; }