/* Dadtris: made for an older player on a 5.5" phone held upright, pressing one button at a time with one finger.
   So: every button at least about 12 mm (76 CSS px) tall, big plain words, strong contrast, nothing that needs a
   gesture. The board itself is drawn by three.js on the #view canvas laid over the page; #board-slot, #hold-slot and
   #next-slot only mark out where (render/scene.js reads their positions). Each theme is a body class setting the
   colour variables below (js/themes.js has the matching block colours). */

:root {
    --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --title-font: var(--font);
    --bg: #111;
    --ink: #fff;
    --muted: #bbb;
    --panel: rgba(255, 255, 255, 0.06);
    --panel-edge: rgba(255, 255, 255, 0.25);
    --btn: #2b2f3a;
    --btn-ink: #fff;
    --btn-edge: #0b0d12;
    --btn-down: #3d4352;
    --primary: #2e9d4f;
    --primary-ink: #fff;
    --primary-edge: #155c2a;
    --gold: #f2b632;
    --gold-ink: #2a1c00;
    --gold-edge: #9a6a00;
    --overlay: rgba(0, 0, 0, 0.72);
    --radius: 14px;
    --vw: 1vw; /* (js/fit.js: see #ui) */
    --vh: 1vh;
    --top-h: 76px;
    --hi: #ffd60a; /* (the full-screen buttons) */
    --hi-ink: #1a1300;
    --hi-edge: #8a6d00;
}

/* ---- the themes ---- */
body.theme-classic {
    --font: "Courier New", ui-monospace, monospace;
    --title-font: "Courier New", ui-monospace, monospace;
    --bg: #9bbc0f;
    --ink: #0f380f;
    --muted: #306230;
    --panel: rgba(15, 56, 15, 0.08);
    --panel-edge: #306230;
    --btn: #8bac0f;
    --btn-ink: #0f380f;
    --btn-edge: #0f380f;
    --btn-down: #306230;
    --primary: #306230;
    --primary-ink: #9bbc0f;
    --primary-edge: #0f380f;
    --gold: #0f380f;
    --gold-ink: #9bbc0f;
    --gold-edge: #000;
    --overlay: rgba(155, 188, 15, 0.9);
}
body.theme-modern {
    --bg: radial-gradient(ellipse at 50% 20%, #24305e 0%, #0d1126 70%);
    --ink: #f4f7ff;
    --muted: #aab4d6;
    --panel: rgba(255, 255, 255, 0.05);
    --panel-edge: rgba(160, 180, 255, 0.35);
    --btn: linear-gradient(#3a4a8c, #27336a);
    --btn-ink: #fff;
    --btn-edge: #121a3d;
    --btn-down: #4d60ad;
    --primary: linear-gradient(#35c46a, #1f9a4c);
    --primary-edge: #0d5a28;
    --overlay: rgba(6, 9, 26, 0.82);
}
body.theme-contrast {
    --hi: #ff9100; /* (Resume is the yellow one here) */
    --hi-ink: #000;
    --hi-edge: #fff;
    --font: Verdana, "Segoe UI", Arial, sans-serif;
    --bg: #000;
    --ink: #fff;
    --muted: #fff;
    --panel: #000;
    --panel-edge: #fff;
    --btn: #000;
    --btn-ink: #fff;
    --btn-edge: #fff;
    --btn-down: #444;
    --primary: #ffe600;
    --primary-ink: #000;
    --primary-edge: #fff;
    --gold: #ff9100;
    --gold-ink: #000;
    --gold-edge: #fff;
    --overlay: rgba(0, 0, 0, 0.92);
}
body.theme-pub {
    --font: Georgia, "Times New Roman", serif;
    --title-font: Georgia, "Times New Roman", serif;
    --bg: repeating-linear-gradient(90deg, #3b2414 0 34px, #432a17 34px 36px, #3a2313 36px 70px), #3b2414;
    --ink: #f6e7c1;
    --muted: #d9bf86;
    --panel: rgba(20, 10, 4, 0.45);
    --panel-edge: #c9a24a;
    --btn: linear-gradient(#1e5b34, #154428);
    --btn-ink: #f6e7c1;
    --btn-edge: #0b2614;
    --btn-down: #2a7a46;
    --primary: linear-gradient(#e0b54a, #b88a23);
    --primary-ink: #2a1a05;
    --primary-edge: #6b4c0c;
    --overlay: rgba(25, 13, 5, 0.86);
}
body.theme-neon {
    --bg:
        radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 72% 8%, #cff, transparent),
        radial-gradient(1.5px 1.5px at 40% 60%, #fcf, transparent),
        radial-gradient(1px 1px at 88% 44%, #fff, transparent), radial-gradient(1px 1px at 22% 82%, #ccf, transparent),
        radial-gradient(1.5px 1.5px at 60% 92%, #fff, transparent),
        radial-gradient(1px 1px at 6% 50%, #fff, transparent), radial-gradient(1px 1px at 94% 76%, #fcf, transparent),
        radial-gradient(ellipse at 50% 30%, #1c0b3a 0%, #05020d 75%);
    --ink: #f0e8ff;
    --muted: #b9a4ff;
    --panel: rgba(120, 60, 255, 0.08);
    --panel-edge: #b04dff;
    --btn: rgba(40, 10, 80, 0.85);
    --btn-ink: #6ff6ff;
    --btn-edge: #b04dff;
    --btn-down: #4a1a8a;
    --primary: #ff2bd6;
    --primary-ink: #fff;
    --primary-edge: #7a0a66;
    --overlay: rgba(5, 2, 13, 0.85);
}
body.theme-neon .big,
body.theme-neon .ctl {
    box-shadow:
        0 0 12px rgba(176, 77, 255, 0.55),
        0 5px 0 var(--btn-edge);
}

/* ---- the page ---- */
* {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%; /* (the phone's own text size is left to js/fit.js, not boosted here and there) */
    text-size-adjust: 100%;
}
html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}
body {
    background: var(--bg);
    background-color: #111;
    color: var(--ink);
    font-family: var(--font);
    font-weight: 700;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
body.theme-classic {
    background-color: #9bbc0f;
}
button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
}
svg {
    fill: currentColor;
}
[hidden] {
    display: none !important;
}

/* everything on the page (index.html #ui), scaled down as one by js/fit.js when the page is smaller than the game is
   laid out for. Inside it, sizes that follow the page use var(--vw) / var(--vh): fit.js sets them to the laid-out
   page's 1vw and 1vh (a transform leaves vw and vh at the real page's). */
#ui {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    background: inherit;
    --ctl-h: clamp(72px, 12.5 * var(--vh), 112px);
    --drop-h: clamp(62px, 9.5 * var(--vh), 92px);
}

#app {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top) + var(--top-h)) env(safe-area-inset-right) env(safe-area-inset-bottom)
        env(safe-area-inset-left);
}
body:not(.playing) .in-game {
    visibility: hidden;
}

/* top bar: full screen on the left, the score in the middle, pause on the right */
#topbar {
    position: fixed;
    top: env(safe-area-inset-top);
    left: env(safe-area-inset-left);
    right: env(safe-area-inset-right);
    height: var(--top-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    gap: 8px;
    z-index: 60; /* (over the screens too: full screen is always one press away) */
}
body.screen-open #hud,
body.screen-open #btn-pause {
    visibility: hidden;
}
.icon-btn {
    width: 72px;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: var(--btn);
    color: var(--btn-ink);
    border: 3px solid var(--btn-edge);
    border-radius: 12px;
    padding: 4px;
}
.icon-btn svg {
    width: 30px;
    height: 30px;
}
.icon-btn .lbl {
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}
.icon-btn:active {
    background: var(--btn-down);
}
#hud {
    text-align: center;
    flex: 1;
}
.hud-label {
    font-size: 14px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
#hud-score {
    font-size: clamp(28px, 8.5 * var(--vw), 40px);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

/* the play area: Hold + level on the left, the board, Next on the right */
#play {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    padding: 2px 6px;
}
.side {
    flex: 1;
    min-width: 0;
    max-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
#board-slot {
    flex: none;
    align-self: center;
    border: 3px solid var(--panel-edge);
    border-radius: 6px;
    box-sizing: content-box;
    touch-action: none;
}
.slot {
    position: relative;
    display: block;
    width: 100%;
    background: var(--panel);
    border: 3px solid var(--panel-edge);
    border-radius: 10px;
    padding: 0;
}
#hold-slot {
    aspect-ratio: 1 / 1.05;
    min-height: 76px;
}
#hold-slot:active {
    background: var(--btn-down);
}
#hold-slot.used {
    opacity: 0.55;
}
#next-slot {
    aspect-ratio: 1 / 2.6;
}
.slot-label {
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--panel);
    border: 2px solid var(--panel-edge);
    border-radius: 10px;
    padding: 4px 2px;
    font-size: clamp(22px, 6.5 * var(--vw), 30px);
    font-variant-numeric: tabular-nums;
}
.stat-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.relaxed-tag {
    font-size: 15px;
}

/* the big buttons under the board */
#controls {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 6px 8px 10px;
    position: relative;
    z-index: 30;
}
#controls .row {
    flex: 1 1 var(--ctl-h);
    max-height: 150px;
    display: flex;
    gap: 8px;
}
.ctl {
    flex: 1;
    height: auto;
    min-height: var(--ctl-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--btn);
    color: var(--btn-ink);
    border: 3px solid var(--btn-edge);
    border-radius: var(--radius);
    box-shadow: 0 5px 0 var(--btn-edge);
    touch-action: none;
    padding: 0;
}
.ctl svg {
    width: 54%;
    max-width: 58px;
    height: 58%;
}
.ctl.drop {
    flex: none;
    min-height: var(--drop-h);
    font-size: 26px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.ctl.drop svg {
    width: 30px;
    height: 30px;
}
.drop-row {
    flex: none;
    display: flex;
    gap: 8px;
}
.drop-row .ctl.drop {
    flex: 1;
    min-width: 0;
    overflow: hidden; /* (big writing stays inside its own half, so a press there is that half's) */
}
/* "Hard drop button": the bar in two halves, Slow and Drop */
#btn-harddrop,
body.hard-btn #btn-drop .drop-end {
    display: none;
}
body.hard-btn #btn-harddrop {
    display: flex;
}
body.hard-btn .ctl.drop {
    gap: 10px;
}
.ctl.down,
.ctl:active {
    background: var(--btn-down);
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--btn-edge);
}
#tap-hint {
    margin: 0;
    text-align: center;
    font-size: 17px;
    color: var(--muted);
}
/* tap-where-it-lands: only Rotate; touching the board: no buttons at all */
body.ctl-tap #btn-left,
body.ctl-tap #btn-right,
body.ctl-tap .drop-row,
body.ctl-zones #controls {
    display: none;
}

#view {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}
#banner {
    position: fixed;
    left: 0;
    right: 0;
    top: 38%;
    text-align: center;
    z-index: 40;
    font-size: clamp(34px, 11 * var(--vw), 56px);
    pointer-events: none;
    text-shadow:
        0 3px 0 rgba(0, 0, 0, 0.45),
        0 0 18px rgba(0, 0, 0, 0.35);
    animation: pop 1.1s ease-out forwards;
}
body.theme-classic #banner {
    text-shadow: 0 3px 0 #9bbc0f;
}
@keyframes pop {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }
    15% {
        transform: scale(1.12);
        opacity: 1;
    }
    30% {
        transform: scale(1);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}
body.fx-simple #banner {
    animation: none;
}

/* ---- the screens ---- */
.screen {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: calc(env(safe-area-inset-top) + 78px) 16px calc(env(safe-area-inset-bottom) + 16px);
    background: var(--bg);
    background-color: #111;
    overflow-y: auto;
}
body.theme-classic .screen {
    background-color: #9bbc0f;
}
.screen.on {
    display: flex;
}
.screen.overlay {
    background: var(--overlay);
    justify-content: center;
    padding-top: calc(env(safe-area-inset-top) + 20px);
}
.screen.scroll {
    padding-top: calc(env(safe-area-inset-top) + 78px);
}
.screen h2 {
    font-family: var(--title-font);
    font-size: clamp(32px, 9 * var(--vw), 44px);
    margin: 0 0 18px;
}
.screen-head {
    width: min(100%, 520px);
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}
.screen-head h2 {
    margin: 0;
}
.hint {
    color: var(--muted);
    font-size: 18px;
    text-align: center;
    max-width: 420px;
    font-weight: 600;
}

.logo {
    font-family: var(--title-font);
    font-size: clamp(50px, 15 * var(--vw), 80px);
    letter-spacing: 0.04em;
    margin: 0 0 10px;
    line-height: 1;
    display: flex;
    gap: 2px;
}
.logo span:nth-child(7n + 1) {
    color: #00c8e0;
}
.logo span:nth-child(7n + 2) {
    color: #ffd400;
}
.logo span:nth-child(7n + 3) {
    color: #c040ff;
}
.logo span:nth-child(7n + 4) {
    color: #2ecc55;
}
.logo span:nth-child(7n + 5) {
    color: #ff3b3b;
}
.logo span:nth-child(7n + 6) {
    color: #3a7bff;
}
.logo span:nth-child(7n + 7) {
    color: #ff9500;
}
body.theme-classic .logo span {
    color: #0f380f;
}
body.theme-classic .logo span:nth-child(even) {
    color: #306230;
}
.logo span {
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(88 * var(--vw), 420px);
}
.big,
.big-ish {
    min-height: 64px;
    font-size: clamp(24px, 7 * var(--vw), 30px);
    background: var(--btn);
    color: var(--btn-ink);
    border: 3px solid var(--btn-edge);
    border-radius: var(--radius);
    box-shadow: 0 5px 0 var(--btn-edge);
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.big-ish {
    min-height: 60px;
    font-size: 22px;
    flex: none;
}
.big:active,
.big-ish:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--btn-edge);
}
.big.primary {
    background: var(--primary);
    color: var(--primary-ink);
    border-color: var(--primary-edge);
    box-shadow: 0 5px 0 var(--primary-edge);
    min-height: 86px;
    font-size: clamp(32px, 9.5 * var(--vw), 40px);
}
.big.secondary {
    min-height: 76px;
    font-size: clamp(28px, 8 * var(--vw), 34px);
    border-width: 4px;
}
.big small {
    font-size: 16px;
    font-weight: 600;
    color: inherit;
    opacity: 0.8;
}
.big.gold {
    background: var(--gold);
    color: var(--gold-ink);
    border-color: var(--gold-edge);
    box-shadow: 0 5px 0 var(--gold-edge);
}
/* full screen in and out: its own bright yellow in every look, so it's the button that's easy to find */
.big.fs-toggle,
#btn-fs.on {
    background: var(--hi);
    color: var(--hi-ink);
    border-color: var(--hi-edge);
}
.big.fs-toggle {
    flex-direction: row;
    gap: 12px;
    min-height: 76px;
    box-shadow:
        0 5px 0 var(--hi-edge),
        0 0 0 4px color-mix(in srgb, var(--hi) 35%, transparent);
}
.big.fs-toggle svg {
    width: 30px;
    height: 30px;
    flex: none;
}
.big.fs-toggle:active {
    box-shadow: 0 1px 0 var(--hi-edge);
}
.big:disabled {
    opacity: 0.45;
}
.fs-prompt {
    margin: 0 0 12px;
    min-height: 54px;
    font-size: 21px;
    background: transparent;
    border: 3px dashed var(--panel-edge);
    border-radius: var(--radius);
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fs-prompt svg {
    width: 28px;
    height: 28px;
}
#scr-menu .back {
    display: none;
}

/* game over */
.over-score {
    font-size: clamp(54px, 16 * var(--vw), 80px);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.over-best {
    font-size: 28px;
    color: var(--gold);
    margin-top: 6px;
}
body.theme-classic .over-best {
    color: #0f380f;
    text-decoration: underline;
}
.over-lines,
.over-rank {
    font-size: 20px;
    color: var(--muted);
    margin: 8px 0;
    text-align: center;
}
#scr-over .menu-buttons {
    margin-top: 18px;
}

/* the yes/no box (and the name box) */
.dialog {
    z-index: 70;
}
.dialog .panel {
    width: min(90 * var(--vw), 440px);
    background: var(--btn);
    background-color: #222;
    border: 3px solid var(--btn-edge);
    border-radius: var(--radius);
    padding: 22px 18px;
    text-align: center;
}
body.theme-classic .dialog .panel {
    background-color: #8bac0f;
}
#dlg-text {
    font-size: 24px;
    margin: 0 0 18px;
    line-height: 1.3;
}
#dlg-input {
    width: 100%;
    font: inherit;
    font-size: 28px;
    padding: 12px;
    border-radius: 10px;
    border: 3px solid var(--btn-edge);
    margin-bottom: 14px;
    text-align: center;
    -webkit-user-select: text;
    user-select: text;
}
.error {
    color: #ff6b6b;
    font-size: 18px;
}
.dlg-buttons {
    display: flex;
    gap: 12px;
}
.dlg-buttons .big {
    flex: 1;
}
.dlg-buttons .big.primary {
    min-height: 72px;
    font-size: 28px;
}

/* settings: each choice a row of big buttons, the chosen one lit */
#settings-body {
    width: min(100%, 520px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 6px 0 22px;
}
.set-row h3 {
    font-size: 21px;
    margin: 0 0 8px;
}
.set-row p {
    font-size: 16px;
    font-weight: 600;
    color: var(--muted);
    margin: 6px 0 0;
}
.seg {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.seg button {
    flex: 1 1 30%;
    min-height: 60px;
    font-size: 19px;
    background: var(--btn);
    color: var(--btn-ink);
    border: 3px solid var(--btn-edge);
    border-radius: 12px;
    padding: 6px 8px;
}
.seg button.on {
    background: var(--primary);
    color: var(--primary-ink);
    border-color: var(--primary-edge);
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}
.seg button.on::before {
    content: "✓ ";
}
#scr-settings > .back {
    width: min(88 * var(--vw), 420px);
}

/* leaderboard and about */
#board-body,
#about-body {
    width: min(100%, 520px);
}
.tabs {
    display: flex;
    gap: 6px;
    margin: 6px 0 12px;
    flex-wrap: wrap;
}
.tabs button {
    flex: 1;
    min-height: 56px;
    font-size: 18px;
    background: var(--btn);
    color: var(--btn-ink);
    border: 3px solid var(--btn-edge);
    border-radius: 10px;
}
.tabs button.on {
    background: var(--primary);
    color: var(--primary-ink);
    border-color: var(--primary-edge);
}
.scores {
    width: 100%;
    border-collapse: collapse;
    font-size: 20px;
}
.scores td {
    padding: 10px 6px;
    border-bottom: 2px solid var(--panel-edge);
}
.scores td.n {
    width: 2.4em;
    color: var(--muted);
}
.scores td.s {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.scores tr.me {
    background: var(--panel);
    outline: 3px solid var(--gold);
}
.board-note {
    font-size: 18px;
    color: var(--muted);
    text-align: center;
    margin: 18px 0;
}
.my-stats div {
    display: flex;
    justify-content: space-between;
    font-size: 21px;
    padding: 12px 4px;
    border-bottom: 2px solid var(--panel-edge);
}
#about-body {
    font-size: 19px;
    font-weight: 500;
    line-height: 1.5;
}
#about-body a {
    color: inherit;
}
#about-body h3 {
    margin: 22px 0 6px;
}
#about-body .contact a {
    overflow-wrap: anywhere;
    -webkit-user-select: text;
    user-select: text; /* (the page turns selection off for the game; an address should copy) */
}
#about-body .version {
    display: inline-block;
    margin: 4px 0 6px;
    padding: 4px 14px;
    border: 2px solid var(--panel-edge);
    border-radius: 999px;
    background: var(--panel);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
#about-body .big {
    margin: 16px auto;
    width: min(88 * var(--vw), 420px);
}
.credits {
    white-space: pre-wrap;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 13px;
    line-height: 1.45;
    background: var(--panel);
    padding: 10px;
    border-radius: 8px;
    overflow-wrap: anywhere;
}