/* Touch and small-screen layouts (phones, tablets). Loaded by header.php
   after style.min.css/ui.css on every page; per-view CSS files carry their
   own compact rules at their end, under the same media queries.

   Desktop and landscape tablets keep the fixed 4:3 frame (main 90rem ×
   67.5rem, rem = 1/90 of the width or 1/67.5 of the height — fits a
   1024×768 or 1180×820 tablet as is). The COMPACT layout replaces the frame
   with the whole viewport, a fixed reading-size rem and scrolling content:

     @media (orientation: portrait) and (max-width: 1100px), (max-height: 520px)

   = phones in any orientation and tablets held upright. Landscape phones
   (max-height: 520px) get a few extra rules (two columns where it pays).
   Touch input (html.touch, html.keypad — set by header.php / lib/device.js)
   is independent of the layout: a landscape tablet keeps the frame but gets
   the keypad. */

/* ---------------------------------------------------------------------------
   Touch, any layout
   ------------------------------------------------------------------------ */

html.touch .element,
html.touch button,
html.touch a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* no double-tap zoom delay */
}

/* no sticky hover highlight after a tap (the focus ring stays — it marks
   the keyboard/autofocus choice) */
@media (hover: none) {
    .element:hover:not(:focus) {
        border-color: #000;
    }
}

/* pressed feedback instead of hover */
html.touch .element:active {
    filter: brightness(1.25);
}

/* the in-game keypad (ui/keypad.js) ------------------------------------- */

.numpad {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    padding: 0.5rem;
    background-color: #214d1d;
    user-select: none;
    -webkit-user-select: none;
}

.numpad .kp-display {
    flex-shrink: 0;
    /* fixed height: typing, the placeholder and the locked state never
       move the keys */
    height: 4.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5em;
    border: 0.25rem solid orange;
    border-radius: 0.5rem;
    background: #fff;
    color: #000;
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.numpad .kp-display.empty {
    color: #666;
    font-size: 1.6rem;
    font-weight: normal;
}

.numpad.locked .kp-display {
    border-color: #000;
    background: #e8f0e6;
}

.numpad .kp-keys {
    flex-grow: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr); /* rows never size by their labels */
    gap: 0.5rem;
}

.numpad button {
    min-height: 0;
    min-width: 0;
    padding: 0;
    line-height: 1;
    overflow: hidden;
    border: 0.3rem solid #000;
    border-radius: 0.5rem;
    background-color: #2f6f2a;
    color: #fff;
    font-family: "Open Sans", sans-serif;
    font-size: 2.4rem;
    font-weight: bold;
    text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.8);
    box-shadow: 0.2rem 0.2rem 0.6rem rgba(0, 0, 0, 0.3);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.numpad button:active:not(:disabled) {
    border-color: orange;
    filter: brightness(1.3);
}

.numpad button.kp-quick {
    background-color: #193a16;
    font-size: 2rem;
}

.numpad button.kp-erase,
.numpad button.kp-rest {
    background-color: #5e716a;
    font-size: 1.8rem;
}

.numpad button.kp-ok {
    background-color: orange;
    color: #000;
    text-shadow: none;
}

.numpad button:disabled {
    opacity: 0.35;
    cursor: default;
}

.numpad.locked button.kp-erase {
    opacity: 1;
}

/* the visit input under the keypad mirrors the typed value */
html.keypad body.xoi main .xoi .game > div > div.input input {
    caret-color: transparent;
}

/* keypad toggle in the scoreboard's nav row: the size of the Back button
   (ui.css .appback in the scoreboard) */
body.xoi main .xoi .nav .kptoggle.element.plain {
    width: 10rem;
    padding: 0.2em 0;
    font-size: 1.6rem;
}

/* frame layout with the keypad (landscape tablets, a touch laptop): the
   centre column splits into visit table and keypad */
body.xoi main .xoi.withpad {
    grid-template-rows: 11.5rem minmax(0, 1fr) 31rem 4rem;
    grid-template-areas:
        "scorer1 toGo1 score toGo2 scorer2"
        "scorer1 game game game scorer2"
        "scorer1 pad pad pad scorer2"
        "navi navi navi navi navi";
}

body.xoi main .xoi .keypadslot {
    grid-area: pad;
    min-height: 0;
    background-color: #214d1d; /* empty while a dialog asks */
}

body.xoi main .xoi:not(.withpad) .keypadslot {
    display: none;
}

body.xoi main .xoi.withpad .game {
    min-height: 0;
    grid-template-rows: 4.72727272rem minmax(0, 1fr);
}

body.xoi main .xoi.withpad .game .body {
    height: auto;
    min-height: 0;
}

body.xoi main .xoi.withpad .player {
    min-height: 0;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Compact layout: phones, upright tablets
   ------------------------------------------------------------------------ */

@media (orientation: portrait) and (max-width: 1100px), (max-height: 520px) {

    :root {
        font-size: clamp(9px, 2.85vw, 17px);
    }

    body {
        height: 100vh;
        height: 100dvh;
        background-color: #2f6f2a;
    }

    main {
        width: 100%;
        height: 100%;
        border: 0;
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    main::-webkit-scrollbar {
        width: 0;
    }

    /* text inputs: 16px+ or iOS zooms in on focus */
    input,
    .element.input {
        font-size: max(16px, 1.6rem);
    }

    .element.plain {
        font-size: 1.5rem;
    }

    /* overlays: dialogs stay centred cards, everything list-like fills the
       screen (the classes are added per view below / in its CSS) */
    /* overlays follow the viewport, not main's scroll position */
    .overlay {
        position: fixed;
        width: calc(100% - 1.6rem);
        max-width: 46rem;
        max-height: calc(100% - 1.6rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        padding: 1.4em 1.1em;
    }

    .overlay.dialog {
        max-width: 40rem;
    }

    .dialog h2 {
        font-size: 2rem;
        text-align: center;
    }

    .dialog p {
        font-size: 1.4rem;
        text-align: center;
    }

    /* dialog buttons: a row that wraps, big enough for a thumb */
    .dialog nav.list.horizontal {
        flex-wrap: wrap;
        gap: 0.7rem;
    }

    .dialog nav.list.horizontal > * + * {
        margin-left: 0;
    }

    .dialog nav.list.horizontal > .element.plain {
        flex: 1 1 8rem;
        min-height: 4.4rem;
        font-size: 1.7rem;
    }

    .overlay > .element.plain.back,
    .dialog > .element.plain.back {
        width: 100%;
        max-width: 100%;
    }

    /* full-screen pickers (d-select with class overlay); full-screen
       overlays start below the rejoin banner (--resume-h, core/resume.js) */
    .playerselect.overlay {
        top: var(--resume-h, 0px);
        left: 0;
        transform: none;
        width: 100%;
        max-width: none;
        height: calc(100% - var(--resume-h, 0px));
        max-height: none;
        border: 0;
        border-radius: 0;
        padding: calc(1.2rem + env(safe-area-inset-top)) 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
    }

    .element.player,
    .element.scorer {
        height: auto;
        min-height: 4.5em;
    }

    /* the fallback Back (core/back.js) and the rejoin banner */
    .appback.element.plain {
        position: fixed;
        left: calc(0.8rem + env(safe-area-inset-left));
        bottom: calc(0.8rem + env(safe-area-inset-bottom));
        width: 9.5rem;
        min-height: 0;
        padding: 0.4em 0;
    }

    /* in the flow at the top (pushes the page down) */
    .resumebanner {
        position: relative;
        flex-shrink: 0;
        flex-wrap: wrap;
        gap: 0.4rem 0.6rem;
        padding: calc(0.4rem + env(safe-area-inset-top)) 0.8rem 0.4rem;
        margin: calc(-1 * env(safe-area-inset-top)) calc(-1 * env(safe-area-inset-right)) 0 calc(-1 * env(safe-area-inset-left));
        white-space: normal;
        font-size: 1.1rem;
    }

    .resumebanner .label {
        display: inline;
        padding: 0;
        font-size: 1.1rem;
    }

    .resumebanner a.element.plain {
        flex: 1 1 auto;
        max-width: 100%;
        font-size: 1.25rem;
        white-space: nowrap;
    }

    /* home / login --------------------------------------------------------- */

    body.home main,
    body.login main {
        justify-content: flex-start;
    }

    body.home header,
    body.login header {
        flex-shrink: 0;
        height: auto;
        padding: 3rem 0 2rem;
    }

    body.home header > img,
    body.login header > img {
        width: 80%;
        max-width: 40rem;
    }

    body.home .menu,
    body.login .menu {
        align-items: flex-start;
        padding: 1rem 1.6rem 2rem;
    }

    body.home .menu .mainmenu,
    body.login .menu .mainmenu {
        width: 100%;
        max-width: 46rem;
    }

    body.home h1,
    body.login h1 {
        font-size: 2.2rem;
    }

    /* the four squares: a 2×2 grid */
    body.home .modeselect nav.list.horizontal {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem;
        width: 100%;
        max-width: min(46rem, 52vh);
        margin: 0 auto;
    }

    body.home .modeselect nav.list.horizontal > * + * {
        margin-left: 0;
    }

    body.home .modeselect .element.square {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        padding: 1em;
        font-size: 0.95rem;
    }

    body.home .modeselect .element.square .icon {
        width: 55%;
    }

    /* login form */
    body.home form.login {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }

    body.home form.login label {
        display: block;
        margin-bottom: 0.4rem;
        font-size: 1.4rem;
    }

    body.home form.login input.plain.element {
        width: 100%;
        min-height: 4.4rem;
        font-size: 1.7rem;
    }

    /* game: setup screen, lobby, bull-off --------------------------------- */

    body.xoi main {
        justify-content: flex-start;
    }

    body.xoi main .gamesetup,
    body.xoi main .gamesetup.lobby {
        width: 100%;
        max-width: 50rem;
        margin: 0 auto;
        padding: 2rem 1.4rem calc(5.5rem + env(safe-area-inset-bottom));
    }

    body.xoi main .gamesetup h1 {
        font-size: 2.3rem;
    }

    body.xoi main .gamesetup.lobby .seats {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    body.xoi main .gamesetup.lobby .seats .vs {
        text-align: center;
        font-size: 1.5rem;
    }

    body.xoi main .gamesetup.lobby .settings {
        grid-template-columns: repeat(3, 1fr);
    }

    body.xoi main .gamesetup.lobby .settings .label {
        font-size: 1.2rem;
        white-space: nowrap;
    }

    body.xoi main .gamesetup.lobby .actions {
        flex-wrap: wrap;
    }

    body.xoi main .gamesetup.lobby .actions > * {
        flex: 1 1 12rem;
    }

    /* who won bull: the two players side by side */
    body.xoi main .gamesetup nav.list.horizontal {
        gap: 1rem;
    }

    body.xoi main .gamesetup nav.list.horizontal > * + * {
        margin-left: 0;
    }

    body.xoi main .gamesetup .element.square {
        width: 50%;
        height: auto;
        font-size: 1.1rem;
    }

    /* game: the scoreboard ------------------------------------------------
       one column: names, big scores (+ sets/legs between them), the visit
       table, the keypad, the nav row. Player photos and the stats table
       shrink to one line of averages. */

    body.xoi main:has(.xoi) {
        overflow: hidden;
    }

    /* the rest of main below the rejoin banner */
    body.xoi main .xoi {
        flex: 1 1 0;
        height: auto;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "scorer1 score scorer2"
            "toGo1 score toGo2"
            "game game game"
            "navi navi navi";
        column-gap: 0;
    }

    body.xoi main .xoi.withpad {
        grid-template-rows: auto auto minmax(6rem, 1fr) minmax(0, 27rem) auto;
        grid-template-areas:
        "scorer1 score score scorer2" 
        "toGo1   toGo1 toGo2 toGo2  " 
        "game    game  game  game   " 
        "pad     pad   pad   pad    " 
        "navi    navi  navi  navi   ";
        grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    }

    body.xoi main .xoi.Throw,
    body.xoi main .xoi.Takeout {
        box-shadow: none;
    }

    body.xoi main .xoi .bigToGo {
        font-size: 7rem;
        line-height: 1.1;
        border-width: 0.5rem;
    }

    body.xoi main .xoi .score {
        margin: 0;
        padding: env(safe-area-inset-top) 0.6rem 0;
        justify-content: center;
        gap: 0.4rem;
    }

    body.xoi main .xoi .score > div > h2 {
        font-size: 2.4rem;
    }

    body.xoi main .xoi .score > div {
        gap: 0.5rem;
    }

    body.xoi main .xoi .score > div h3 {
        font-size: 0.9rem;
    }

    body.xoi main .xoi .score > div .info h2 {
        font-size: 1.1rem;
    }

    body.xoi main .xoi .player {
        margin: 0;
        padding: calc(0.3rem + env(safe-area-inset-top)) 0.4rem 0.2rem;
        min-width: 0;
    }

    body.xoi main .xoi .player > img,
    body.xoi main .xoi .player .team.images {
        display: none;
    }

    body.xoi main .xoi .player h2 {
        font-size: 1.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.xoi main .xoi .player h3 {
        display: none;
    }

    /* stats: only the averages of match and leg (rows: header, Avg;
       columns: label, Tnm, Match, Leg) */
    body.xoi main .xoi .player .stats {
        grid-template-columns: auto 1fr 1fr;
        margin: 0.1rem 0.4rem 0.3rem;
        row-gap: 0.1rem;
    }

    body.xoi main .xoi .player .stats .row {
        font-size: 1.2rem;
    }

    body.xoi main .xoi .player .stats .row.header {
        font-size: 1rem;
        opacity: 0.8;
    }

    body.xoi main .xoi .player .stats .row:nth-child(n + 3),
    body.xoi main .xoi .player .stats .row > :nth-child(2) {
        display: none;
    }

    /* header row as high as its cells (no black gap under it); the visit
       rows stretch to fill the table (no black area under them) */
    body.xoi main .xoi .game,
    body.xoi main .xoi.withpad .game {
        min-height: 0;
        grid-template-rows: 3.4rem minmax(0, 1fr);
    }

    body.xoi main .xoi .game .body,
    body.xoi main .xoi.withpad .game .body {
        height: auto;
        min-height: 0;
    }

    body.xoi main .xoi .game > div {
        grid-auto-rows: 3.4rem;
    }

    body.xoi main .xoi .game > div.body {
        grid-auto-rows: minmax(3.4rem, 1fr);
    }

    body.xoi main .xoi .game > div > div {
        font-size: 1.7rem;
    }

    body.xoi main .xoi .game > div > div.scorer1.toGo,
    body.xoi main .xoi .game > div > div.scorer2.toGo {
        font-size: 1.4rem;
    }

    body.xoi main .xoi .game > div.headding > div,
    body.xoi main .xoi .game > div > div.headding.rounds {
        font-size: 1.1rem;
    }

    body.xoi main .xoi .nav {
        gap: 0.6rem;
        padding: 0.3rem 0.6rem calc(0.3rem + env(safe-area-inset-bottom)) 10rem;
        justify-content: flex-end;
        flex-wrap: wrap;
        min-height: 4rem;
    }

    body.xoi main .xoi .nav span {
        font-size: 1.2rem;
    }

    body.xoi main .xoi .nav .label {
        padding: 0;
    }

    body.xoi main:has(.xoi) .appback.element.plain,
    body.xoi main .xoi .nav .kptoggle.element.plain {
        width: 9.5rem;
        padding: 0.4em 0;
        font-size: 1.5rem;
    }

    body.xoi main:has(.xoi) .appback.element.plain {
        bottom: calc(0.4rem + env(safe-area-inset-bottom));
    }

    /* keyboard shortcuts mean nothing on a phone */
    body.xoi main .xoi .nav > span:not(.label):empty {
        display: none;
    }

    .numpad {
        padding: 0.4rem 0.4rem 0.2rem;
    }

    .numpad .kp-keys {
        gap: 0.4rem;
    }

    .numpad button {
        font-size: 2.2rem;
    }
}

/* landscape phones: scoreboard left, keypad right ------------------------ */
@media (max-height: 520px) and (orientation: landscape) {

    :root {
        font-size: clamp(8px, 2.6vh, 12px);
    }

    body.home header,
    body.login header {
        padding: 1.5rem 0 1rem;
    }

    body.home header > img,
    body.login header > img {
        width: 40%;
    }

    body.home .modeselect nav.list.horizontal {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: min(80rem, 150vh);
    }

    body.xoi main .xoi.withpad {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1.1fr);
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "scorer1 score scorer2 pad"
            "toGo1 score toGo2 pad"
            "game game game pad"
            "navi navi navi pad";
    }

    body.xoi main .xoi.withpad .keypadslot {
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) 0;
        background-color: #214d1d;
    }

    body.xoi main .xoi .bigToGo {
        font-size: 4.6rem;
    }
}