[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;
}

#game-wrapper {
    position: relative;
}

/* 360 / 640 duplicates WORLD_WIDTH and WORLD_HEIGHT from js/constants.js;
   CSS cannot import them, so the two must change together. The height
   caps at whichever runs out first, viewport height or the width the
   ratio implies at 100vw, so the canvas is never distorted. */
#game-canvas {
    display: block;
    aspect-ratio: 360 / 640;
    height: min(100vh, calc(100vw * 640 / 360));
    height: min(100dvh, calc(100vw * 640 / 360));
    width: auto;
    max-width: 100vw;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.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);
}

/* 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 h1 {
    font-size: 44px;
    letter-spacing: 2px;
}

.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;
}

.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;
}

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

.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;
}

@media (max-width: 400px) {
    .overlay h1 {
        font-size: 34px;
    }

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

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