/*
 * Tourney on rodesia.org (deploy/theme/page-tourney.html). Uses the Card
 * theme's tokens (--card-border, --shadow, --accent...) with fallbacks.
 */

.tourney-game {
    margin: 0 0 3.5rem;
}

/* With room to spare, the arena widens past the text column. */
@media (min-width: 64rem) {
    .tourney-game {
        margin-inline: calc((100% - 60rem) / 2);
    }
}

.tourney-stage {
    position: relative;
    /* The arena is 303 x 230 world units; keep it whole in the window. */
    width: min(100%, calc(80vh * 303 / 230));
    aspect-ratio: 303 / 230;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--card-border, rgb(22 22 29 / 0.08));
    border-radius: 14px;
    background: #0b0a14;
    box-shadow: var(--shadow, 0 8px 24px -12px rgb(22 22 29 / 0.3));
}

.tourney-stage:has(canvas:focus-visible) {
    outline: 2px solid var(--accent, #1a7f4b);
    outline-offset: 3px;
}

.tourney-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Phones held upright: a taller stage, the arena at the top and the
   touch buttons below it (the game pins the arena when it sees touch). */
@media (pointer: coarse) and (orientation: portrait) {
    .tourney-stage {
        width: 100%;
        aspect-ratio: auto;
        /* Nearly a screen tall: the arena fills it down to the controls. */
        height: calc(100svh - 1.5rem);
        max-height: 210vw;
    }

    .tourney-fullscreen {
        right: auto;
        left: calc(50% - 1.125rem);
    }
}

/* Full screen, and the same look where the browser has no full-screen API
   (iPhone): the game fills the screen; held upright, the arena sits at the
   top with the controls below it. */
/* Phones on their side: the controls take the bottom corners, so the
   full-screen button moves up beside the pause button. */
@media (pointer: coarse) and (orientation: landscape) {
    .tourney-fullscreen {
        top: 0.6rem;
        bottom: auto;
        right: 3.75rem;
    }
}

.tourney-stage:fullscreen,
.tourney-stage.is-max {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    outline: none;
}

.tourney-stage.is-max {
    position: fixed;
    inset: 0;
    z-index: 1000;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing: border-box;
}

html.tourney-locked,
html.tourney-locked body {
    overflow: hidden;
    overscroll-behavior: none;
}

.tourney-stage:fullscreen .tourney-fullscreen,
.tourney-stage.is-max .tourney-fullscreen {
    bottom: max(0.6rem, env(safe-area-inset-bottom));
}

.tourney-offer:focus {
    outline: none;
}

/* "A place on the high-score table": over the arena, so it shows in full
   screen too. */
.tourney-offer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgb(8 4 14 / 0.55);
}

.tourney-offer[hidden] {
    display: none;
}

.tourney-offer-card {
    max-width: 22rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgb(242 201 76 / 0.45);
    border-radius: 14px;
    background: rgb(20 12 28 / 0.92);
    color: #f6e7c1;
    text-align: center;
    box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.7);
}

.tourney-offer-score {
    margin: 0;
    color: #f2c94c;
    font: 700 2.2rem/1.1 var(--serif, Georgia, serif);
}

.tourney-offer-text {
    margin: 0.4rem 0 1rem;
    font: 500 0.95rem/1.4 var(--sans, system-ui, sans-serif);
}

.tourney-offer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.tourney-btn {
    padding: 0.55rem 1rem;
    border: 1px solid rgb(246 231 193 / 0.35);
    border-radius: 999px;
    background: transparent;
    color: #f6e7c1;
    font: 600 0.9rem/1 var(--sans, system-ui, sans-serif);
    cursor: pointer;
}

.tourney-btn-primary {
    border-color: transparent;
    background: linear-gradient(#f2c94c, #c8901f);
    color: #1a0f14;
}

.tourney-btn:disabled {
    opacity: 0.7;
    cursor: progress;
}

/* Under the game: who is signed in, and news from signing in. */
.tourney-status {
    max-width: 36rem;
    margin: -2.25rem auto 3rem;
    text-align: center;
}

.tourney-scores-me {
    margin: 0;
    color: var(--muted, #5f6170);
    font-size: 0.9rem;
}

.tourney-scores-me:empty {
    display: none;
}

.tourney-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent, #1a7f4b);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.tourney-scores-note {
    margin: 0 0 0.5rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--card-border, rgb(22 22 29 / 0.08));
    border-radius: 10px;
    background: var(--card, rgb(255 255 255 / 0.78));
    color: var(--text, #16161d);
}

.tourney-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    color: #e8c66a;
    font: 600 1.1rem/1.2 var(--serif, Georgia, serif);
    letter-spacing: 0.06em;
}

.tourney-fullscreen {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid rgb(246 231 193 / 0.25);
    border-radius: 999px;
    background: rgb(11 10 20 / 0.55);
    color: rgb(246 231 193 / 0.8);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.tourney-fullscreen:hover,
.tourney-fullscreen:focus-visible {
    background: rgb(11 10 20 / 0.8);
    color: #fff;
}

.tourney-noscript {
    color: var(--muted, #5f6170);
    text-align: center;
}

/* The game page opens with the arena, not a big headline. */
.card-page:has(.tourney-game) {
    padding-top: clamp(1.25rem, 4vh, 2.25rem);
}

.card-page:has(.tourney-game) .hero {
    margin-bottom: 2rem;
}