/* DeJam — bright toy-street theme, single deliberate look, explicit colors. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #EFE6D2;
  color: #2A2E35;
  font-family: "Nunito", system-ui, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
button, .hud, .toolbar, .win-card, .logo, .tagline { user-select: none; -webkit-user-select: none; }
.screen { display: none; height: 100dvh; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; }
.screen.active { display: flex; }

/* Type */
.logo {
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-size: clamp(3rem, 12vw, 4.6rem); font-weight: 800; letter-spacing: .01em;
  color: #E8A020; text-shadow: 0 3px 0 rgba(120, 70, 0, .18);
}
.logo span { color: #2A2E35; }
.tagline { color: #5C5648; margin-bottom: .2rem; font-size: 1.05rem; }

/* Buttons */
button {
  font: inherit; font-weight: 700; color: #2A2E35; background: #FDFBF4;
  border: 2px solid #D8CFBB; border-bottom-width: 4px;
  border-radius: 14px; padding: .8rem 1.1rem; font-size: 1.05rem; cursor: pointer;
  min-height: 44px; min-width: 44px;
  transition: transform .06s, border-color .12s;
}
button:hover { border-color: #C4B99F; }
button:active { transform: translateY(2px); border-bottom-width: 2px; }
button:focus-visible { outline: 3px solid #E8A020; outline-offset: 2px; }
button:disabled { color: #A79F8E; background: #EFEAE0; border-color: #E0DACB; cursor: default; transform: none; }
.primary { background: #F6C93F; border-color: #D9A82A; color: #3A2E10; }
.primary:hover { background: #FFD75A; }

/* Title */
#screen-title { position: relative; }
#hero { width: min(22rem, 86vw); height: 9.5rem; border-radius: 14px; box-shadow: 0 6px 18px rgba(80, 60, 20, .18); }
.menu { display: flex; flex-direction: column; gap: .7rem; width: min(20rem, 80vw); }
.corner-sound { position: absolute; top: max(.8rem, env(safe-area-inset-top)); right: .9rem; width: 48px; height: 48px; padding: 0; font-size: 1.3rem; border-radius: 50%; }
.howto { color: #5C5648; font-size: .95rem; }

/* Loading */
#loadbar { width: min(18rem, 70vw); height: 10px; background: #E0D7C2; border-radius: 99px; overflow: hidden; }
#loadbar-fill { height: 100%; width: 0; min-width: 10px; background: #F6C93F; border-radius: 99px; transition: width .2s; }
#loadmsg { color: #5C5648; }

/* Level select */
.panel { width: min(24rem, 92vw); display: flex; flex-direction: column; gap: .9rem; align-items: stretch; }
.panel h2 { font-family: "Baloo 2", "Nunito", sans-serif; text-align: center; font-size: 2rem; }
#tier-info { text-align: center; font-weight: 700; font-size: .95rem; }
#tier-tabs { display: flex; gap: .5rem; justify-content: center; }
.tab { padding: .5rem 1.1rem; border-radius: 99px; font-size: 1rem; }
.tab.on { background: var(--tier, #F6C93F); border-color: var(--tier, #D9A82A); color: #fff; }
#level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; }
.lvl { aspect-ratio: 1; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font-size: 1.15rem; padding: 0; }
.lvl .mark { font-size: .72rem; height: 1em; letter-spacing: .05em; color: #C9A227; }
.lvl.s1, .lvl.s2, .lvl.s3 { background: #FBF3DA; border-color: var(--tier, #C9A227); }
.lvl.s3 { background: #F9E9B8; }

/* Game */
#screen-game { justify-content: center; gap: .7rem; padding: .6rem; }
.hud { width: min(94vw, 34rem); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.hud .mid { text-align: center; flex: 1; min-width: 0; }
#hud-level { font-weight: 800; font-size: .95rem; color: #5C5648; letter-spacing: .02em; }
#hud-moves { display: flex; align-items: baseline; justify-content: center; gap: .45rem; font-variant-numeric: tabular-nums; line-height: 1; }
#hud-moves .lbl { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5C5648; }
#hud-moves b { font-family: "Baloo 2", "Nunito", sans-serif; font-size: 2rem; font-weight: 800; color: #2A2E35; }
#hud-moves .par { font-size: .8rem; font-weight: 700; color: #8A8172; }
#hud-moves b.warn { color: #E0662A; }
#hud-moves b.low { color: #D9482B; animation: lowPulse .8s ease-in-out infinite alternate; }
body.over .toolbar { visibility: hidden; }
@keyframes lowPulse { from { opacity: 1; } to { opacity: .55; } }
#title-meta { color: #5C5648; font-size: .85rem; font-weight: 700; text-align: center; margin-top: -.25rem; }
#title-meta:empty { display: none; }
#board-wrap {
  width: min(94vw, 78dvh, 34rem);
  height: min(94vw, 78dvh, 34rem);
  display: flex; align-items: center; justify-content: center;
}
#board { touch-action: none; border-radius: 16px; box-shadow: 0 8px 24px rgba(80, 60, 20, .22); }
.toolbar { display: flex; gap: .6rem; padding-bottom: max(.4rem, env(safe-area-inset-bottom)); }

/* Win overlay */
#win-overlay {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(40, 32, 14, .5);
}
#win-overlay.active { display: flex; }
#lose-overlay {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(40, 32, 14, .5);
}
#lose-overlay.active { display: flex; }
#lose-title { font-family: "Baloo 2", "Nunito", sans-serif; font-size: 2rem; font-weight: 800; color: #D9482B; }
#lose-sub { color: #5C5648; text-align: center; font-variant-numeric: tabular-nums; line-height: 1.4; }
.win-card {
  background: #FDFBF4; border: 2px solid #D8CFBB; border-radius: 20px;
  padding: 1.6rem 1.8rem 1.4rem; display: flex; flex-direction: column; gap: .8rem; align-items: center;
  width: min(19rem, 86vw);
  animation: cardIn .28s cubic-bezier(.2, 1.4, .4, 1);
  box-shadow: 0 14px 40px rgba(50, 38, 10, .3);
}
@keyframes cardIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#win-title { font-family: "Baloo 2", "Nunito", sans-serif; font-size: 2.2rem; font-weight: 800; color: #E8A020; }
#win-stars { display: flex; gap: .4rem; font-size: 2.1rem; }
#win-stars .star { color: #E3DCCB; transform: scale(.6); }
#win-stars .star.lit { color: #F6C93F; animation: starPop .35s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes starPop { from { transform: scale(.4); } to { transform: scale(1); } }
#win-stats { color: #5C5648; font-variant-numeric: tabular-nums; }
#win-records { width: 100%; display: flex; flex-direction: column; gap: .45rem; }
.name-row { display: flex; align-items: center; gap: .6rem; justify-content: center; }
.name-row label { font-size: .85rem; color: #5C5648; font-weight: 700; }
#gamer-name {
  font: inherit; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  width: 9rem; text-align: center; padding: .35rem .5rem; min-height: 40px;
  background: #FFF; color: #2A2E35; border: 2px solid #D8CFBB; border-radius: 10px;
}
#gamer-name:focus-visible { outline: 3px solid #E8A020; outline-offset: 1px; }
#record-list { list-style: none; display: flex; flex-direction: column; gap: .15rem; }
#record-list li {
  display: flex; justify-content: space-between; padding: .2rem .8rem;
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: .95rem;
  border-radius: 8px; color: #5C5648;
}
#record-list li.you { background: #F9E9B8; color: #2A2E35; }
#record-list li .rn { text-transform: uppercase; letter-spacing: .06em; }
.win-card button { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .win-card, #win-stars .star.lit, #hud-moves b.low { animation: none; }
  #win-stars .star.lit { transform: scale(1); }
}