[x-cloak] {
    display: none !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #141a2b;
    color: #f4f1ea;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* The board is a square sized by whichever runs out first: the viewport
   width, or the viewport height less the room the header strip needs. */
#game-wrapper {
    --page-pad: 12px;
    --hud-allowance: 160px;
    --board-max: 600px;
    --board-size: min(100vw - 2 * var(--page-pad), 100vh - var(--hud-allowance), var(--board-max));
    --board-size: min(100vw - 2 * var(--page-pad), 100dvh - var(--hud-allowance), var(--board-max));
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: var(--page-pad);
}

#hud {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: var(--board-size);
}

#hud h1 {
    font-size: 28px;
    letter-spacing: 1px;
}

.scores {
    display: flex;
    gap: 8px;
}

.score-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 88px;
    padding: 6px 12px;
    border-radius: 8px;
    background: #2a3350;
}

.score-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.75;
}

.score-value {
    font-size: 20px;
    font-weight: 700;
}

#hud button,
.overlay button {
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 24px;
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: #f2b134;
    color: #2b1d0e;
    cursor: pointer;
    text-shadow: none;
}

#hud button {
    padding: 8px 16px;
    min-height: 36px;
    font-size: 14px;
}

#hud button:hover,
.overlay button:hover {
    background: #ffc857;
}

/* Board */

/* Cell size and stride derive from the board size, so no script measures
   the board and no resize listener is needed. Container query units would
   also do, but Firefox resolves them to zero inside transform. */
#board {
    --gap: clamp(6px, 2vmin, 12px);
    --cell-size: calc((var(--board-size) - 5 * var(--gap)) / 4);
    --stride: calc(var(--cell-size) + var(--gap));
    position: relative;
    width: var(--board-size);
    aspect-ratio: 1;
    padding: var(--gap);
    border-radius: 10px;
    background: #2a3350;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.cells {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: var(--gap);
    width: 100%;
    height: 100%;
}

.cell {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

/* A tile sits at the origin and is placed by its --row and --col. */
.tiles {
    position: absolute;
    inset: var(--gap);
}

.tile {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--cell-size);
    height: var(--cell-size);
    transform: translate(calc(var(--col) * var(--stride)), calc(var(--row) * var(--stride)));
    transition: transform var(--slide-duration) ease-in-out;
    border-radius: 8px;
}

.tile .face {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: #f4f1ea;
}

/* A dragged image would cancel the pointer sequence a swipe relies on. */
.tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* A paper-white crop needs an edge to read as a tile on the board. */
.tile .face::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px rgba(20, 26, 43, 0.35);
    pointer-events: none;
}

.tile .badge {
    position: absolute;
    right: 5%;
    bottom: 5%;
    padding: 0.1em 0.45em;
    border-radius: 0.5em;
    background: rgba(20, 26, 43, 0.7);
    color: #f4f1ea;
    font-size: calc(var(--cell-size) * 0.16);
    font-weight: 700;
    line-height: 1.4;
}

.tile.numeric .face {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: calc(var(--cell-size) * 0.32);
    font-weight: 800;
}

.tile-8 .face {
    background: #e2a23a;
}

.tile-9 .face {
    background: #d4822b;
}

.tile-10 .face {
    background: #c0621f;
}

.tile-high .face {
    background: #8f2f14;
}

/* Animations; every duration comes from a custom property main.js sets
   from js/constants.js at boot. */

.tile.spawn .face {
    animation: spawn-pop var(--pop-duration) ease-out;
}

.tile.merge .face {
    animation: merge-pop var(--pop-duration) ease-in-out;
}

.tile-11 {
    animation: glow 1.6s ease-in-out infinite alternate;
}

#board.shake {
    animation: shake var(--shake-duration) ease-in-out;
}

@keyframes spawn-pop {
    from {
        transform: scale(0.2);
    }
    to {
        transform: scale(1);
    }
}

@keyframes merge-pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.18);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes glow {
    from {
        box-shadow: 0 0 6px 2px rgba(255, 200, 87, 0.45);
    }
    to {
        box-shadow: 0 0 22px 8px rgba(255, 200, 87, 0.9);
    }
}

@keyframes shake {
    0%,
    100% {
        translate: 0;
    }
    25% {
        translate: -6px;
    }
    75% {
        translate: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tile {
        transition-duration: 0s;
    }

    .tile.spawn .face,
    .tile.merge .face,
    #board.shake {
        animation-duration: 0s;
    }

    .tile-11 {
        animation: none;
    }
}

/* Overlays */

.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
    background: rgba(20, 26, 43, 0.6);
}

/* The name prompt toggles the hidden attribute rather than x-show, so its
   input can be focused in the same tick the overlay appears; the class's
   display: flex would otherwise outrank the user-agent [hidden] rule. */
.overlay[hidden] {
    display: none;
}

.overlay button,
.overlay input,
.overlay .panel {
    pointer-events: auto;
}

.overlay h2 {
    font-size: 32px;
}

.overlay .hint {
    font-size: 16px;
    opacity: 0.9;
}

.overlay .score-line {
    font-size: 20px;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 240px;
    max-width: 90%;
    padding: 20px;
    border-radius: 12px;
    background: rgba(20, 26, 43, 0.92);
    text-shadow: none;
}

.panel label {
    font-size: 14px;
    opacity: 0.85;
}

.panel input {
    font: inherit;
    font-size: 18px;
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #f2b134;
    border-radius: 8px;
    background: #0e1220;
    color: #f4f1ea;
    text-align: center;
}

.panel table {
    border-collapse: collapse;
    width: 100%;
    font-size: 16px;
}

.panel th,
.panel td {
    padding: 6px 10px;
    text-align: left;
}

.panel th:last-child,
.panel td:last-child {
    text-align: right;
}

.panel tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.05);
}

/* Ten rows plus a header must fit a short phone; the panel scrolls before
   the overlay would clip it. */
.panel {
    max-height: 100%;
    overflow-y: auto;
}

.panel th:first-child,
.panel td:first-child {
    width: 2.5em;
    opacity: 0.7;
}

.panel td:nth-child(2) {
    overflow-wrap: anywhere;
}

/* A short landscape viewport puts the header beside the board. */
@media (orientation: landscape) and (max-height: 520px) {
    #game-wrapper {
        --hud-width: 200px;
        --board-size: min(100vh - 2 * var(--page-pad), 100vw - var(--hud-width) - 3 * var(--page-pad), var(--board-max));
        --board-size: min(100dvh - 2 * var(--page-pad), 100vw - var(--hud-width) - 3 * var(--page-pad), var(--board-max));
        flex-direction: row;
        align-items: center;
    }

    #hud {
        width: var(--hud-width);
    }

    #hud h1 {
        font-size: 22px;
    }
}

@media (max-width: 400px) {
    #hud h1 {
        font-size: 22px;
    }

    .overlay h2 {
        font-size: 26px;
    }

    .overlay .score-line {
        font-size: 18px;
    }
}