/* ============================================================
   responsive.css: desktop-first.

   The base scale in tokens.css targets a monitor. Everything below
   steps that down: width breakpoints trim the chrome, height
   breakpoints shrink the cards (the board is height-bound, not
   width-bound), and the phone block re-lays the whole thing.
   ============================================================ */

/* ---------------- Laptop / small desktop ---------------- */

@media (max-width: 1400px) {
    :root {
        --card-w: 98px;
        --card-h: 147px;
        --card-w-mini: 38px;
        --card-h-mini: 57px;
        --dock-h: 238px;
        --log-w: 348px;
    }
}

@media (max-width: 1180px) {
    :root {
        --card-w: 90px;
        --card-h: 135px;
        --card-w-mini: 35px;
        --card-h-mini: 53px;
        --dock-h: 222px;
        --log-w: 324px;
    }
}

/* Seat plate width is intentionally absent from the width breakpoints: it is
   sized from the table itself with cqw in players.css, so it already tracks
   every viewport change. A fixed px width here would out-specify that and
   leave oversized plates on a shrunken table. */

/* ---------------- Short viewports ---------------- */

@media (max-height: 880px) {
    :root {
        --card-w: 92px;
        --card-h: 138px;
        --dock-h: 224px;
        --hud-h: 64px;
    }
}

@media (max-height: 780px) {
    :root {
        --card-w: 82px;
        --card-h: 123px;
        --card-w-mini: 34px;
        --card-h-mini: 51px;
        --dock-h: 202px;
        --hud-h: 60px;
    }

    .seat__avatar {
        width: 34px;
        height: 34px;
        font-size: 19px;
    }

    .suit-medallion__glyph {
        font-size: 38px;
    }

    .btn--action {
        height: 56px;
        min-width: 168px;
    }

    /*
     * Plate *width* needs no help here: it scales with the table via cqw in
     * players.css. Height does, though. A plate is ~112px tall because of the
     * mini fan, that height is fixed, and the gap between the side and
     * upper-side slots is only 38% of the table's height, so on a short window
     * the two collide. Dropping the fans takes a plate to ~50px, which is what
     * actually buys the clearance. Three opponents or fewer keep theirs.
     */
    #seats[data-count="4"] .seat__cards,
    #seats[data-count="5"] .seat__cards,
    #seats[data-count="6"] .seat__cards {
        display: none;
    }
}

@media (max-height: 680px) {
    :root {
        --card-w: 70px;
        --card-h: 105px;
        --card-w-mini: 29px;
        --card-h-mini: 44px;
        --dock-h: 172px;
        --hud-h: 56px;
    }

    .seat__avatar {
        width: 30px;
        height: 30px;
        font-size: 17px;
    }

    .seat__name {
        font-size: 13px;
    }

    .btn--action {
        height: 48px;
        min-width: 144px;
    }

    .btn--action .btn__label {
        font-size: 22px;
    }

    .revolver-stage {
        height: 178px;
    }

    .revolver-svg {
        width: 166px;
        height: 166px;
    }

    .suit-medallion__glyph {
        font-size: 32px;
    }
}

/* ---------------- Tablet ---------------- */

/* ---------------- Waiting room: ring → stack ----------------
   The seat ring is the nicest way to preview the table, but it needs real
   width. Below ~820px it flattens into a code plate with the seats gridded
   underneath, which says the same thing in a column. */

@media (max-width: 1040px) and (min-width: 821px) {
    .waitroom {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: var(--sp-4);
    }

    .waitroom__side {
        padding: var(--sp-4);
    }
}

@media (max-width: 820px) {
    .lobby-step.is-active {
        align-items: start;
    }

    .waitroom {
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
        height: auto;
        max-height: none;
        max-width: 520px;
        margin: auto;
    }

    .waitroom__stage {
        display: block;
        height: auto;
    }

    .wtable {
        position: static;
        width: 100%;
        aspect-ratio: auto;
        max-height: none;
        padding: var(--sp-5) var(--sp-4);
        border: 1px solid var(--rule);
        border-radius: var(--r-md);
        background-color: var(--felt);
        background-image: var(--hatch-cross);
        box-shadow: var(--sh-2);
    }

    .wtable__rim,
    .wtable__felt,
    .wtable__inlay {
        display: none;
    }

    .wtable__center {
        position: static;
    }

    #waitroom-seats {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-2);
        margin-top: var(--sp-4);
    }

    .wseat {
        position: static;
        width: auto;
        transform: none !important;
        animation: fadeIn .3s var(--ease-out) backwards;
    }

    .waitroom__side {
        padding: var(--sp-4);
    }

    .waitroom__foot {
        margin-top: var(--sp-4);
        padding-top: 0;
    }
}

@media (max-width: 900px) {
    :root {
        --log-w: 100%;
    }

    #log-panel {
        max-width: 400px;
        left: auto;
    }

    .seat__name {
        font-size: 13px;
    }
}

/* ---------------- Phone ---------------- */

@media (max-width: 700px) {
    :root {
        --card-w: 74px;
        --card-h: 111px;
        --card-w-mini: 27px;
        --card-h-mini: 41px;
        --hud-h: 56px;
        --dock-h: 210px;
    }

    body {
        font-size: 15px;
    }

    /* --- lobby --- */
    /* keep the top clearance for the floating controls; only trim the sides */
    .lobby-step {
        padding: calc(var(--hud-h) + var(--sp-2)) var(--sp-3) var(--sp-3);
    }

    .menu {
        gap: var(--sp-4);
    }

    .menu__panel {
        padding: var(--sp-4);
    }

    .menu__actions {
        grid-template-columns: 1fr;
    }

    .join-card {
        padding: var(--sp-5) var(--sp-4) var(--sp-4);
    }

    /* the seat ring needs more room than a phone has, so stack it */
    .wtable {
        width: min(100%, 300px);
    }

    .wseat {
        width: 132px;
        padding: 5px 8px 5px 5px;
        gap: 6px;
    }

    .wseat .seat__avatar {
        width: 26px;
        height: 26px;
        font-size: 15px;
    }

    .wseat__name {
        font-size: 12px;
    }

    .wtable__code {
        font-size: 26px;
        letter-spacing: .18em;
        text-indent: .18em;
    }

    .option-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-2);
    }

    .segmented {
        justify-content: space-between;
    }

    .segmented button {
        flex: 1;
    }

    /* --- board: seats become a top row --- */
    #hud {
        padding: 0 var(--sp-2);
    }

    .hud__side {
        gap: 4px;
    }

    .icon-btn {
        width: 38px;
        height: 38px;
    }

    .turn-pill {
        height: 40px;
        padding-right: 16px;
    }

    /* the avatar shrinks here too, so the ring's offset has to be re-derived:
       left = avatarCentre - ringWidth / 2 = (10 + 30 / 2) - 38 / 2 */
    .turn-pill__ring {
        width: 38px;
        left: 6px;
    }

    .turn-pill__avatar {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .turn-pill__text {
        font-size: 13px;
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* the ring becomes a row across the top, so undo the table-shaped box that
       board.css gives #seats on larger screens */
    #seats {
        inset: 0 0 auto 0;
        width: auto;
        height: auto;
        aspect-ratio: auto;
        transform: none;
        /* must go too: size containment sizes the box as if it were empty, so
           with auto width it collapses to 0 and justify-content has nothing to
           centre the row within. Nothing here needs cqw anyway. */
        container-type: normal;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 6px;
        padding: 6px;
    }

    .seat {
        position: static;
        transform: none !important;
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        max-width: 148px;
        gap: 3px;
    }

    /*
     * Five or more opponents will not fit across a phone as name plates: at
     * seven they came out 47px wide and the name was squeezed to nothing, so
     * the row was unreadable while still taking the full height. Past four,
     * drop to monogram tiles. The initials and the seat colour still identify
     * everyone, and the turn pill names whoever is actually up.
     */
    #seats[data-count="5"] .seat__meta,
    #seats[data-count="6"] .seat__meta,
    #seats[data-count="7"] .seat__meta {
        display: none;
    }

    /* width must be reset explicitly: the desktop #seats[data-count] rules in
       players.css set a fixed px width at the same specificity as this, and
       would otherwise keep it here and push the row off the screen */
    #seats[data-count="5"] .seat,
    #seats[data-count="6"] .seat,
    #seats[data-count="7"] .seat {
        width: auto;
        flex: 0 0 auto;
        max-width: none;
    }

    #seats[data-count="6"] .seat__avatar,
    #seats[data-count="7"] .seat__avatar {
        width: 28px;
        height: 28px;
        font-size: 15px;
    }

    #seats[data-count="5"] .seat__plate,
    #seats[data-count="6"] .seat__plate,
    #seats[data-count="7"] .seat__plate {
        width: auto;
        padding: 4px;
        gap: 0;
    }

    .seat.is-dying {
        animation: seatDieFlat .8s var(--ease-out) both;
    }

    @keyframes seatDieFlat {
        0% {
            filter: brightness(1);
        }

        18% {
            filter: brightness(2.4) saturate(0);
        }

        100% {
            filter: grayscale(1) brightness(.7);
            opacity: .32;
        }
    }

    .seat__plate {
        padding: 4px 8px 4px 4px;
        gap: 6px;
    }

    .seat__avatar {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .seat__name {
        font-size: 12px;
    }

    .seat__host-mark {
        width: 11px;
        height: 11px;
        top: -5px;
        right: -5px;
    }

    .chamber {
        width: 6px;
        height: 6px;
    }

    .revolver__count {
        display: none;
    }

    #table {
        top: 58%;
        height: min(56%, 56vw);
    }

    .suit-medallion {
        padding: 4px 16px 6px;
    }

    .suit-medallion__glyph {
        font-size: 34px;
    }

    .suit-medallion__name {
        font-size: 13px;
    }

    .last-play {
        font-size: 12px;
        padding: 4px 11px;
    }

    /* --- dock --- */
    #dock {
        justify-content: flex-end;
    }

    /*
     * There isn't room for your own plate under the hand on a phone: the fanned
     * cards overflow the dock upward and would sit on top of it. Stand it up
     * vertically in the gutter to the left of the fan instead.
     */
    .self-plate {
        left: 6px;
        bottom: 78px;
        flex-direction: column;
        gap: 4px;
        padding: 6px;
        border-radius: var(--r-md);
    }

    .self-plate .seat__avatar {
        width: 30px;
        height: 30px;
        font-size: 17px;
    }

    .self-plate .revolver {
        gap: 2px;
        margin-top: 0;
    }

    .self-plate__label {
        display: none;
    }

    #hand-wrap {
        padding: 0 var(--sp-2);
    }

    #actions {
        gap: var(--sp-2);
        margin-top: var(--sp-3);
        width: 100%;
        padding: 0 var(--sp-3);
    }

    .btn--action {
        flex: 1;
        min-width: 0;
        height: 54px;
    }

    .btn--action .btn__label {
        font-size: 23px;
    }

    .btn--action kbd {
        display: none;
    }

    .select-counter {
        min-width: 68px;
        font-size: 10px;
        letter-spacing: .06em;
    }

    /* --- log becomes a full drawer --- */
    #log-panel {
        top: 0;
        width: 100%;
        max-width: none;
        border-left: 0;
    }

    .log-panel__head {
        padding-top: max(var(--sp-3), env(safe-area-inset-top));
    }

    /* --- modals --- */
    .modal {
        padding: var(--sp-3);
    }

    .modal__box {
        padding: var(--sp-5) var(--sp-4) var(--sp-4);
    }

    .modal__actions .btn {
        flex: 1;
        min-width: 0;
    }

    .revealed-cards .card {
        width: calc(var(--card-w) * .85);
        height: calc(var(--card-h) * .85);
    }

    .revolver-stage {
        height: 186px;
    }

    .revolver-svg {
        width: 172px;
        height: 172px;
    }

    .gameover-ornament {
        width: 180px;
        height: 32px;
    }

    .server-status {
        left: var(--sp-3);
        right: var(--sp-3);
        justify-content: center;
    }
}

/* ---------------- Reactions + ledger ---------------- */

/*
 * Nothing in the ledger is hidden by height. It used to drop honours as the
 * window shortened, which meant a laptop an inch off the mark quietly printed a
 * different summary from the one everyone else was reading. The dialog scrolls
 * instead: every row and every honour is always there.
 */

@media (max-width: 700px) {

    /*
     * The tray is two columns of labelled marks on a monitor and three columns
     * of bare marks on a phone: the labels are what make the vocabulary
     * learnable, and once it is learned they are the first thing that can go.
     */
    .rx-tray {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rx-btn {
        justify-content: center;
        padding: 10px;
    }

    .rx-btn__label,
    .rx-btn kbd {
        display: none;
    }

    .rx-mark {
        width: 38px;
        height: 38px;
    }

    .rx-mark .ico {
        width: 22px;
        height: 22px;
    }

    /* plays is the least interesting column, and the first to go */
    .ledger__col-wide {
        display: none;
    }

    .honour {
        padding: var(--sp-2);
    }
}

/* ---------------- Very small phones ---------------- */

@media (max-width: 400px) {
    :root {
        --card-w: 64px;
        --card-h: 96px;
    }

    .seat__cards {
        display: none;
    }

    .seat {
        gap: 0;
    }

    /* the tray would otherwise run off the left edge of a 360px screen */
    .rx-tray {
        position: fixed;
        top: calc(var(--hud-h) + 8px);
        right: var(--sp-2);
        left: var(--sp-2);
        width: auto;
    }
}

/* ---------------- Touch: no hover lift, bigger targets ---------------- */

@media (hover: none) {
    .btn:hover:not(:disabled) {
        filter: none;
    }

    .hand.is-live .card:hover {
        transform: rotate(var(--rot, 0deg)) translateY(var(--lift, 0px));
        filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
        z-index: auto;
    }

    .hand.is-live .card.is-selected:hover {
        transform: rotate(var(--rot, 0deg)) translateY(calc(var(--lift, 0px) - 34px)) scale(1.04);
    }
}