/* ==========================================================================
   Game CMB — Unblock Me
   Original visual identity: dark navy / deep blue, cyan accent, coral
   target block, glass panels, soft shadows. No copied Unblock Me art.
   ========================================================================== */

:root {
  --navy-950: #070a14;
  --navy-900: #0a0e1a;
  --navy-800: #121a2e;
  --navy-700: #1a2440;
  --navy-600: #253357;
  --cyan: #38e0f0;
  --cyan-dim: #1c8fa0;
  --coral: #ff5a5f;
  --coral-dark: #c83236;
  --gold: #ffc43d;
  --green: #6cc97a;
  --violet: #9a8cff;
  --orange: #ff9660;
  --coral-rgb: 255, 90, 95;
  --violet-rgb: 154, 140, 255;
  --gold-rgb: 255, 196, 61;
  --green-rgb: 108, 201, 122;
  --orange-rgb: 255, 150, 96;
  --cyan-rgb: 56, 224, 240;
  --text-hi: #f2f6fc;
  --text-mid: #b9c4dc;
  --text-dim: #7c88a8;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --shadow-lift: 0 10px 30px rgba(0, 0, 0, 0.45);
  --touch-min: 44px;
  --board-max: 600px;
}

* { box-sizing: border-box; }

/* Global reset: the [hidden] attribute must always win over any author
   `display` rule (e.g. .overlay { display: flex }), since CSS origin
   (author beats user-agent) takes priority over specificity regardless
   of which rule is more specific. Without this, any element whose CSS
   sets display and that also gets toggled via `el.hidden = true/false`
   will silently stay visible. Covers every current and future overlay/
   modal/screen/icon-button in this game. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(1200px 800px at 50% -10%, var(--navy-800), var(--navy-950) 70%);
  color: var(--text-hi);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--cyan); color: var(--navy-950); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* ---------------- header ---------------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; max-width: var(--board-max); margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--text-hi); text-decoration: none; font-weight: 700; }
.brand img { border-radius: 6px; }
.header-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.icon-btn {
  width: var(--touch-min); height: var(--touch-min);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm); color: var(--text-hi); font-size: 18px; cursor: pointer;
}
.icon-btn[aria-pressed="false"] { opacity: 0.45; }
.icon-btn:active { transform: scale(0.94); }

/* ---------------- layout ---------------- */
.game-shell { max-width: var(--board-max); margin: 0 auto; padding: 4px 16px 40px; }
.screen[hidden] { display: none !important; }

.screen-topbar {
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin: 8px 0 14px;
}
.screen-topbar h2 { text-align: center; margin: 0; font-size: 1.1rem; }
.btn-back {
  width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-hi); cursor: pointer;
}

/* ---------------- home ---------------- */
#screen-home { text-align: center; padding-top: 10px; }
.game-title {
  font-size: clamp(2rem, 8vw, 2.8rem); letter-spacing: 2px; margin: 10px 0 4px;
  background: linear-gradient(180deg, #fff, var(--cyan) 140%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { color: var(--text-mid); margin: 0 0 22px; }
.player-row {
  color: var(--text-mid); font-size: 0.85rem; margin: -12px 0 18px;
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
}
.player-row strong { color: var(--text-hi); }
.link-btn {
  background: none; border: none; padding: 0; margin: 0; color: var(--cyan);
  font: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer;
  min-height: auto; min-width: auto;
}
.link-btn:hover, .link-btn:focus-visible { color: var(--text-hi); }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .mode-grid { grid-template-columns: 1fr; } }
.mode-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px;
  background: linear-gradient(160deg, var(--navy-700), var(--navy-800));
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md);
  color: var(--text-hi); cursor: pointer; box-shadow: var(--shadow-lift); min-height: 88px;
}
.mode-card:active { transform: translateY(1px) scale(0.99); }
.mode-name { font-weight: 700; font-size: 1.05rem; }
.mode-desc { color: var(--text-dim); font-size: 0.82rem; line-height: 1.3; }
.btn-continue { margin-top: 20px; width: 100%; }

.btn-primary, .btn-secondary {
  min-height: var(--touch-min); padding: 0 20px; border-radius: 999px; border: none; cursor: pointer;
  font-weight: 700; font-size: 0.95rem;
}
.btn-primary { background: linear-gradient(180deg, var(--cyan), var(--cyan-dim)); color: #05202a; }
.btn-secondary { background: rgba(255, 255, 255, 0.08); color: var(--text-hi); border: 1px solid rgba(255, 255, 255, 0.12); }
.btn-primary:active, .btn-secondary:active { transform: scale(0.97); }

/* ---------------- level select ---------------- */
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
@media (max-width: 360px) { .level-grid { grid-template-columns: repeat(4, 1fr); } }
.level-tile {
  aspect-ratio: 1 / 1; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--navy-700); color: var(--text-hi); display: flex; flex-direction: column;
  align-items: center; justify-content: center; cursor: pointer; position: relative; font-weight: 700;
  min-height: var(--touch-min);
}
.level-tile .stars { position: absolute; bottom: 3px; font-size: 0.55rem; letter-spacing: 1px; color: var(--gold); }
.level-tile.locked { opacity: 0.35; cursor: not-allowed; }
.level-tile.tier-tutorial { border-color: rgba(108, 201, 122, 0.4); }
.level-tile.tier-easy { border-color: rgba(56, 224, 240, 0.4); }
.level-tile.tier-medium { border-color: rgba(255, 196, 61, 0.4); }
.level-tile.tier-hard { border-color: rgba(255, 150, 90, 0.5); }
.level-tile.tier-expert { border-color: rgba(255, 90, 95, 0.6); }
.level-section-label { grid-column: 1 / -1; color: var(--text-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; margin: 14px 0 2px; }

/* ---------------- game screen ---------------- */
.game-heading { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.mode-pill { font-size: 0.65rem; color: var(--cyan); text-transform: uppercase; letter-spacing: 1px; }

.stats-row {
  display: flex; justify-content: space-around; background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-md); padding: 10px 6px; margin-bottom: 12px;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 70px; }
.stat-label { font-size: 0.65rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.stat-value { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-value.pop { animation: pop 0.35s ease; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); color: var(--cyan); } 100% { transform: scale(1); } }

.board-region { position: relative; }
.board {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-950));
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), var(--shadow-lift);
  touch-action: none; /* scoped to the board only — page scroll elsewhere stays enabled */
  overflow: visible;
}
.board-cell-grid { position: absolute; inset: 0; display: grid; pointer-events: none; opacity: 0.5; }
.board-cell-grid div { border: 1px solid rgba(255, 255, 255, 0.035); }

/* Movement-lane hint — a persistent, subtly-tinted stripe across the full
   row/column each block can slide along, colored to match that block, so
   the "blocks only slide along one line" mechanic is visible on sight
   rather than something you have to be told. Selecting/dragging a block
   brightens its own lane further for extra feedback mid-move. */
.block-track { position: absolute; pointer-events: none; border-radius: 4px; transition: filter 0.15s ease; }
.block-track.track-target { background: rgba(var(--coral-rgb), 0.16); }
.block-track.track-c0 { background: rgba(var(--violet-rgb), 0.14); }
.block-track.track-c1 { background: rgba(var(--gold-rgb), 0.14); }
.block-track.track-c2 { background: rgba(var(--green-rgb), 0.14); }
.block-track.track-c3 { background: rgba(var(--orange-rgb), 0.14); }
.block-track.track-c4 { background: rgba(var(--cyan-rgb), 0.14); }
.block-track.track-active { filter: brightness(1.7) saturate(1.3); }

.board-exit {
  position: absolute; background: linear-gradient(90deg, rgba(56, 224, 240, 0.55), rgba(56, 224, 240, 0));
  border-radius: 0 8px 8px 0; pointer-events: none;
}

.block {
  position: absolute; border-radius: var(--radius-sm);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: grab; will-change: transform; transition: box-shadow 0.15s ease;
  border: 1px solid rgba(0, 0, 0, 0.25);
}
.block.dragging { cursor: grabbing; z-index: 20; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.12); }
.block.settling { transition: transform 0.16s cubic-bezier(.2, .8, .3, 1); }
.block.shake { animation: shake 0.28s ease; }
@keyframes shake { 0%, 100% { transform: translate(var(--tx, 0), var(--ty, 0)); } 25% { transform: translate(calc(var(--tx, 0) - 5px), var(--ty, 0)); } 75% { transform: translate(calc(var(--tx, 0) + 5px), var(--ty, 0)); } }
.block.hint-glow { animation: hintglow 1s ease-in-out infinite; }
@keyframes hintglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 196, 61, 0.6), 0 4px 10px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 0 8px rgba(255, 196, 61, 0), 0 4px 10px rgba(0,0,0,.35); } }
.block.exiting { transition: transform 0.5s cubic-bezier(.4, 0, .2, 1), opacity 0.5s ease 0.15s; opacity: 0; }

.block-target { background: linear-gradient(160deg, #ff8285, var(--coral)); border-color: var(--coral-dark); }
.block-c0 { background: linear-gradient(160deg, #b7abff, var(--violet)); }
.block-c1 { background: linear-gradient(160deg, #ffd876, var(--gold)); }
.block-c2 { background: linear-gradient(160deg, #8fe89b, var(--green)); }
.block-c3 { background: linear-gradient(160deg, #ffb082, var(--orange)); }
.block-c4 { background: linear-gradient(160deg, #7fe9f2, var(--cyan)); }

.particle { position: absolute; border-radius: 50%; pointer-events: none; background: var(--cyan); }

/* overlays */
.overlay {
  position: absolute; inset: 0; background: rgba(6, 9, 18, 0.72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); z-index: 30;
  animation: fadein 0.18s ease;
}
#nickname-modal.overlay, #howto-modal.overlay { position: fixed; border-radius: 0; z-index: 100; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.overlay-card {
  background: linear-gradient(160deg, var(--navy-700), var(--navy-800));
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md);
  padding: 22px 20px; text-align: center; width: min(88%, 340px); box-shadow: var(--shadow-lift);
}
.overlay-card h3 { margin: 0 0 12px; }
.verifying { color: var(--cyan); letter-spacing: 1px; font-weight: 700; }
.result-stars { font-size: 2rem; color: var(--gold); letter-spacing: 4px; }
.result-score { font-size: 2.2rem; font-weight: 800; margin: 4px 0 8px; animation: pop 0.5s ease; }
.result-pb { color: var(--gold); font-weight: 700; margin-bottom: 8px; }
.result-grid { display: flex; justify-content: space-around; margin: 10px 0 16px; font-size: 0.85rem; color: var(--text-mid); }
.result-grid strong { display: block; color: var(--text-hi); font-size: 1rem; }
.result-error { color: var(--coral); font-size: 0.85rem; margin: 6px 0; }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.result-actions button { flex: 1 1 auto; min-width: 120px; }
.howto-card { text-align: left; max-width: 380px; }
.howto-list { padding-left: 20px; color: var(--text-mid); line-height: 1.6; }
.nickname-input {
  width: 100%; min-height: var(--touch-min); border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.15);
  background: var(--navy-900); color: var(--text-hi); padding: 0 14px; font-size: 1rem; margin: 10px 0;
}
.modal-sub { color: var(--text-dim); font-size: 0.85rem; margin-top: -4px; }

/* controls */
.controls-row { display: flex; gap: 8px; margin-top: 14px; }
.ctrl-btn {
  flex: 1; min-height: 56px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-hi); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; font-size: 1.1rem; cursor: pointer;
}
.ctrl-btn span { font-size: 0.65rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.ctrl-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ctrl-btn:active:not(:disabled) { transform: scale(0.96); }
.hint-text { text-align: center; color: var(--gold); min-height: 1.2em; font-size: 0.85rem; }

/* leaderboard */
.lb-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.lb-tab {
  flex: 1; min-height: var(--touch-min); border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent; color: var(--text-mid); cursor: pointer;
}
.lb-tab.active { background: var(--cyan); color: #05202a; border-color: transparent; font-weight: 700; }
.leaderboard-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.leaderboard-list li {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.06);
}
.leaderboard-list .rank { width: 28px; font-weight: 700; color: var(--text-dim); }
.leaderboard-list li:nth-child(1) .rank { color: var(--gold); }
.leaderboard-list li:nth-child(2) .rank { color: #d6d6e0; }
.leaderboard-list li:nth-child(3) .rank { color: #e0a06a; }
.leaderboard-list .nick { flex: 1; }
.leaderboard-list .score { font-weight: 700; font-variant-numeric: tabular-nums; }
.leaderboard-you { text-align: center; margin-top: 12px; color: var(--cyan); font-weight: 700; }
.lb-empty { text-align: center; color: var(--text-dim); padding: 20px 0; }

/* content / SEO / adsense sections */
.content-section { max-width: var(--board-max); margin: 34px auto 0; padding: 0 4px; color: var(--text-mid); line-height: 1.65; }
.content-section h2 { color: var(--text-hi); font-size: 1.15rem; }
.content-section h3 { color: var(--text-hi); font-size: 1rem; }
.ad-slot {
  max-width: var(--board-max); margin: 28px auto; min-height: 100px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(255, 255, 255, 0.12); border-radius: var(--radius-md);
  color: var(--text-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;
}
.related-games a { color: var(--cyan); }
.site-footer { text-align: center; color: var(--text-dim); font-size: 0.8rem; padding: 20px 16px 40px; }
.site-footer a { color: var(--text-dim); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* desktop widening beyond the 600px board keeps things centered; no extra breakpoint needed since --board-max caps width */
@media (min-width: 1024px) {
  .game-shell { padding-top: 10px; }
}