.bf { gap: 10px; padding-top: 10px; }

.modes { display: flex; gap: 6px; justify-content: center; }
.modes .btn { min-height: 38px; padding: 6px 12px; font-size: .85rem; }

.stage { display: flex; gap: 8px; justify-content: center; align-items: flex-start; }

.well { position: relative; flex: none; }
.well.thud { animation: thud .14s ease-out; }
.pop { animation: boxpop .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes boxpop { 40% { transform: scale(1.06); } }
#next { animation: nextin .25s ease-out; }
.cover h1 { animation: titlein .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes titlein { from { transform: scale(.4) rotate(-8deg); opacity: 0; } }
@keyframes nextin { from { transform: translateY(8px); opacity: .4; } }
@keyframes thud { 40% { transform: translateY(4px); } }
#board {
  display: block;
  background: #1A1424 linear-gradient(180deg, #241B33, #15101D);
  border: 3px solid var(--ink); border-radius: 8px;
  box-shadow: 0 5px 0 var(--shadow);
  touch-action: none;
}

.cover {
  position: absolute; inset: 3px; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; text-align: center;
  background: rgba(20, 16, 26, .82); color: var(--paper);
}
.cover h1 {
  margin: 0; font: 900 1.9rem/1 system-ui, sans-serif; color: var(--gold);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink);
}
.cover p { margin: 0; font-weight: 700; line-height: 1.35; }
.cover[hidden] { display: none; }

.side { display: flex; flex-direction: column; gap: 8px; width: 78px; flex: none; }
.box {
  background: var(--paper); border: 2px solid var(--ink); border-radius: 6px;
  padding: 3px; text-align: center;
}
.box span { display: block; font: 900 .68rem/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; margin: 2px 0 3px; }
.box canvas { display: block; margin: 0 auto; max-width: 100%; }

.stats { margin: 0; display: grid; gap: 1px; }
.stats dt { font: 900 .64rem/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.stats dd { margin: 0; font: 900 1.05rem/1.15 system-ui, sans-serif; overflow-wrap: anywhere; }
.pause { min-height: 36px; padding: 4px; }
.modes { flex-wrap: wrap; }

.tops-title { margin: 6px 0 0 !important; font: 900 .72rem/1 system-ui, sans-serif !important; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-2); }
.tops { margin: 0; padding-left: 1.4em; text-align: left; font-weight: 700; font-size: .9rem; }
.tops li.now { color: var(--gold); }

.sheet {
  width: min(92vw, 400px); padding: 18px;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 6px 0 var(--shadow);
}
.sheet::backdrop { background: rgba(20, 16, 26, .55); }
.sheet h2 { margin: 0 0 10px; text-align: center; text-transform: uppercase; letter-spacing: .06em; }
.sheet .close { display: flex; margin: 14px auto 0; }
.sheet .label { margin: 12px 0 6px; font-weight: 800; font-size: .9rem; }
.sheet .btn { min-height: 40px; padding: 6px 12px; font-size: .82rem; }
.switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.switch input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--water); flex: none; }
.switch small { display: block; color: var(--shadow); font-size: .82rem; }

.pad { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; touch-action: none; user-select: none; -webkit-user-select: none; }
.pad button {
  min-height: 54px; padding: 0;
  background: var(--gold); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 8px; box-shadow: 0 3px 0 var(--rust);
  font: 900 1.35rem/1 system-ui, sans-serif; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pad button[data-act="hold"] { font-size: .72rem; }
.pad button[data-act="drop"] { background: var(--sky); }
.pad button.down { transform: translateY(2px); box-shadow: 0 1px 0 var(--rust); }

@media (hover: hover) and (pointer: fine) {
  /* With a keyboard and mouse the buttons are optional; keep them smaller. */
  .pad button { min-height: 44px; }
}

/* ------------------------------------------------------------------
   Night arcade look: a deep indigo page, glass panels, glowing edges.
   ------------------------------------------------------------------ */
.bf-page {
  --glass: rgba(255, 255, 255, .07);
  --glass-edge: rgba(255, 255, 255, .14);
  --neon: #7CE8FF;
  --text: #EDEBFF;
  --muted: #A6A2C8;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, #3B2A7A 0, rgba(59, 42, 122, 0) 70%),
    radial-gradient(900px 500px at 100% 100%, #123D6B 0, rgba(18, 61, 107, 0) 70%),
    #0D0B1E;
}
.bf-page::before, .bf-page::after { display: none; }
.bf-page .small { color: var(--muted); }

.bf-page .modes .btn {
  background: var(--glass); color: var(--text);
  border: 1px solid var(--glass-edge); border-radius: 999px; box-shadow: none;
  text-transform: none; letter-spacing: .02em; font-weight: 800;
}
.bf-page .modes .btn:hover { background: rgba(255, 255, 255, .14); }
.bf-page .modes .btn[aria-pressed="true"] {
  background: linear-gradient(180deg, #8EF0FF, #3FB8E8); color: #0D0B1E; border-color: transparent;
  box-shadow: 0 0 16px rgba(124, 232, 255, .55);
}
.bf-page #levels-btn { background: linear-gradient(180deg, #FFE27A, #FFB627); color: #2A1A00; border-color: transparent; }

.bf-page #board {
  border: 2px solid rgba(124, 232, 255, .45); border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(124, 232, 255, .08), 0 0 32px rgba(124, 232, 255, .22), 0 18px 40px rgba(0, 0, 0, .5);
}
.bf-page .cover {
  inset: 2px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(13, 11, 30, .9), rgba(25, 17, 55, .94));
  backdrop-filter: blur(3px);
  justify-content: safe center; overflow-y: auto; gap: 8px;
}
.bf-page .cover h1 {
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  background: linear-gradient(180deg, #FFF3A8, #FFB627); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 0; text-shadow: none;
  filter: drop-shadow(0 3px 0 #5A2E00) drop-shadow(0 0 14px rgba(255, 182, 39, .45));
}
.bf-page .cover p { color: var(--text); }
.bf-page #play {
  min-width: 150px; min-height: 50px; font-size: 1.1rem; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #FFE27A, #FFB627); color: #2A1A00;
  box-shadow: 0 4px 0 #B86E00, 0 0 22px rgba(255, 182, 39, .45);
  animation: bf-breathe 1.8s ease-in-out infinite;
}
@keyframes bf-breathe { 50% { transform: scale(1.05); } }

.bf-page .box { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 10px; }
.bf-page .box span, .bf-page .stats dt { color: var(--muted); }
.bf-page .stats dd { color: var(--text); }
.bf-page .side .btn { background: var(--glass); color: var(--text); border: 1px solid var(--glass-edge); box-shadow: none; border-radius: 10px; }

.bf-page .pad button {
  background: linear-gradient(180deg, #2C2560, #1B1640); color: var(--text);
  border: 1px solid rgba(124, 232, 255, .3); border-radius: 12px; box-shadow: 0 3px 0 #0A0818;
}
.bf-page .pad button[data-act="drop"] { background: linear-gradient(180deg, #8EF0FF, #3FB8E8); color: #0D0B1E; border-color: transparent; }
.bf-page .pad button[data-act="hold"] { background: linear-gradient(180deg, #E79BFF, #A65BEF); color: #1A0A2A; border-color: transparent; }
.bf-page .pad button.down { transform: translateY(2px); box-shadow: 0 1px 0 #0A0818; }

/* The career card on the cover: rank, XP, streak and today's missions. */
.career {
  width: 100%; max-width: 280px; padding: 10px 12px; text-align: left;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--glass-edge); border-radius: 14px;
}
.rank-row { display: flex; align-items: center; gap: 8px; }
.rank-badge {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  background: linear-gradient(180deg, #FFE27A, #FFB627); color: #2A1A00;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); font-size: .8rem;
}
.rank { font-weight: 900; font-size: .95rem; flex: 1; }
.streak { font-weight: 900; font-size: .95rem; color: #FFB25C; }
.streak.cold { filter: grayscale(1); opacity: .6; }
.xpbar { height: 8px; margin-top: 6px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #7CE8FF, #C77DFF); transition: width .8s ease; }
.xp-text { margin-top: 3px; font-size: .72rem; color: var(--muted); text-align: right; }
.cover .gain { margin: 4px 0 0 !important; font-size: .85rem; color: #8DFFB0 !important; font-weight: 900; text-align: center; }
.cover .missions-title { margin: 8px 0 4px !important; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important; }
.missions { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.missions li { display: grid; grid-template-columns: 18px 1fr auto; column-gap: 6px; align-items: center; font-size: .8rem; font-weight: 700; }
.missions .tick { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--glass-edge); display: grid; place-items: center; font-size: .65rem; }
.missions .count { font-size: .72rem; color: var(--muted); }
.missions .bar { grid-column: 2 / 4; height: 4px; margin-top: 3px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.missions .bar i { display: block; height: 100%; background: #7CE8FF; border-radius: 2px; }
.missions li.done .tick { background: #43D46A; border-color: #43D46A; color: #0D0B1E; }
.missions li.done .what { color: var(--muted); text-decoration: line-through; }
.missions li.done .count { color: #8DFFB0; font-weight: 900; }
.missions li.done .bar i { background: #43D46A; }
.bf-page .tops-title { color: var(--neon); }

/* Settings: block themes. */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
.theme {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px;
  background: #1B1640; color: #EDEBFF; border: 2px solid transparent; border-radius: 10px; cursor: pointer;
  font: 800 .75rem/1.1 system-ui, sans-serif;
}
.theme[aria-pressed="true"] { border-color: #7CE8FF; box-shadow: 0 0 12px rgba(124, 232, 255, .5); }
.theme:disabled { opacity: .55; cursor: default; }
.theme:disabled canvas { filter: grayscale(.8) brightness(.7); }

/* Dialogs in the night look. */
.bf-page .sheet, .bf-page .rc {
  background: linear-gradient(180deg, #221A4D, #15112F); color: #EDEBFF;
  border: 1px solid rgba(124, 232, 255, .35); border-radius: 18px;
  box-shadow: 0 0 30px rgba(124, 232, 255, .2), 0 20px 50px rgba(0, 0, 0, .6);
}
.bf-page .sheet .switch small, .bf-page .rc .small { color: #A6A2C8; }
.bf-page .sheet .btn, .bf-page .rc .btn { background: rgba(255, 255, 255, .08); color: #EDEBFF; border: 1px solid rgba(255, 255, 255, .16); box-shadow: none; border-radius: 999px; }
.bf-page .sheet .btn[aria-pressed="true"] { background: linear-gradient(180deg, #8EF0FF, #3FB8E8); color: #0D0B1E; border-color: transparent; }
.bf-page .sheet .close { background: linear-gradient(180deg, #FFE27A, #FFB627); color: #2A1A00; border: 0; }
.bf-page .lv-btn { background: rgba(255, 255, 255, .07); color: #EDEBFF; border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; }
.bf-page .lv-btn.current { background: linear-gradient(180deg, #FFE27A, #FFB627); color: #2A1A00; }
.bf-page .theme { background: rgba(255, 255, 255, .06); }
.theme canvas { width: 60px; height: 30px; }

/* The moving sky (backdrop.js) sits behind everything. */
.bf-backdrop { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
.bf-page { isolation: isolate; background-attachment: fixed; }
.bf-page .game-bar { background: rgba(13, 11, 30, .75); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(124, 232, 255, .15); }
.bf-page .more-list a { background: rgba(255, 255, 255, .07); color: #EDEBFF; border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; }
.bf-page .more-list a:hover { background: rgba(255, 255, 255, .14); }
.bf-page .more-list small { color: #A6A2C8; }
.bf-page .more-list .flappy { background: linear-gradient(180deg, #FFE27A, #FFB627); color: #2A1A00; }
.bf-page .more-list .flappy small { color: #5A3A00; }
.bf-page .more-games h2 { color: #EDEBFF; }
.bf-page .box, .bf-page .side .btn { background: rgba(22, 18, 50, .88); }
.bf-page .modes .btn:not([aria-pressed="true"]):not(#levels-btn) { background: rgba(22, 18, 50, .8); }

/* The help line under the controls: keys on a computer, touch on a phone. */
.for-touch { display: none; }
@media (pointer: coarse) {
  .for-keys { display: none; }
  .for-touch { display: block; }
}

/* ------------------------------------------------------------------
   A phone on its side is too short for the well with the buttons under
   it. The buttons go to the edges instead - moving under the left thumb,
   turning and dropping under the right - and the well takes the height.
   ------------------------------------------------------------------ */
@media (orientation: landscape) and (max-height: 540px) {
  .bf {
    max-width: 980px; padding-top: 8px;
    display: grid; gap: 6px;
    grid-template-columns: 62px 62px minmax(0, 1fr) auto minmax(0, 1fr) 62px 62px;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
  /* The help lines and the other games: full width, under it all. */
  .bf > * { grid-column: 1 / -1; }
  .bf > .modes { grid-column: 1 / 4; grid-row: 1; justify-content: flex-start; align-self: start; }
  .modes .btn { min-height: 32px; padding: 4px 10px; font-size: .78rem; }
  .bf > .stage { grid-column: 4; grid-row: 1 / 5; position: relative; }

  .pad { display: contents; }
  .pad button { min-height: 52px; touch-action: none; user-select: none; -webkit-user-select: none; }
  .pad [data-act="left"] { grid-column: 1; grid-row: 3; }
  .pad [data-act="right"] { grid-column: 2; grid-row: 3; }
  .pad [data-act="soft"] { grid-column: 1 / 3; grid-row: 4; }
  .pad [data-act="ccw"] { grid-column: 6; grid-row: 3; }
  .pad [data-act="cw"] { grid-column: 7; grid-row: 3; }
  .pad [data-act="drop"] { grid-column: 6; grid-row: 4; }
  .pad [data-act="hold"] { grid-column: 7; grid-row: 4; }

  /* Hold and next side by side, the numbers under them as a table. */
  .side { width: 160px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
  .side > .box:nth-child(1) { grid-column: 1; grid-row: 1; }
  .side > .box:nth-child(2) { grid-column: 2; grid-row: 1 / 4; }
  .side > #pause { grid-column: 1; grid-row: 2; }
  .side > #opt-btn { grid-column: 1; grid-row: 3; }
  .side > .stats { grid-column: 1 / -1; grid-row: 4; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; }
  .side .stats dt { margin-top: 0; }
  .side .stats dd { text-align: right; }

  /* The start, pause and game-over card spreads over the well and the side, not just the narrow well. */
  .well { position: static; }
  .bf-page .cover { inset: 0; }
}