/* Page-owned TRCC recreation surfaces. No global selectors or inline layout. */
.trcc-game { --game-navy: var(--color-primary, #17334e); --game-muted: #526578; --game-border: #cbd5dc; --game-header: 104px; --game-board-width: min(18.75rem, calc((100svh - var(--game-header) - 7rem) / 2)); max-width: 60rem; margin: 0 auto; padding: 2.5rem 1rem; color: var(--game-navy); }
.trcc-game__heading { margin-bottom: 1.75rem; max-width: 42rem; }
.trcc-game__heading h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; margin: .35rem 0 .8rem; }
.trcc-game__eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; color: #786135; }
.trcc-game__layout { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
.trcc-game__play { min-width: 0; scroll-margin-top: calc(var(--game-header) + 1rem); }
.trcc-game__arena { display: grid; grid-template-columns: minmax(0, var(--game-board-width)) minmax(0, 6rem); gap: .75rem; align-items: start; justify-content: center; }
.trcc-game__live, .trcc-game__field { min-width: 0; }
.trcc-game__session-controls { display: grid; }
.trcc-game__session-controls > button { width: 100%; padding: .65rem .25rem; margin-top: .5rem; }
.trcc-game__board-wrap { position: relative; max-width: 18.75rem; width: 100%; margin: 0 auto; border: 3px solid var(--game-navy); border-radius: .55rem; background: #112337; }
.trcc-game__board { display: block; width: 100%; height: auto; border-radius: .3rem; }
.trcc-game__overlay { position: absolute; top: 42%; left: .5rem; right: .5rem; margin: 0; padding: 1rem .5rem; text-align: center; background: #fff; color: var(--game-navy); font-weight: 700; border-radius: .3rem; pointer-events: none; }
.trcc-game [hidden] { display: none; }
.trcc-game button { border: 1px solid var(--game-border); border-radius: .4rem; background: #fff; color: var(--game-navy); font: inherit; font-weight: 600; cursor: pointer; min-height: 2.75rem; padding: .7rem .85rem; touch-action: manipulation; }
.trcc-game button:hover:not(:disabled) { background: #edf2f5; }
.trcc-game button:disabled { opacity: .55; cursor: default; }
.trcc-game :focus-visible { outline: 3px solid #b57912; outline-offset: 3px; }
.trcc-game button.trcc-game__primary { background: var(--game-navy); color: #fff; border-color: var(--game-navy); }
.trcc-game button.trcc-game__primary:hover:not(:disabled) { background: var(--color-primary-strong, #294c68); }
.trcc-game__touch { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; margin-top: .75rem; }
.trcc-game__touch button { padding: .35rem .15rem; font-size: 1.3rem; user-select: none; }
.trcc-game__movement { display: contents; }
.trcc-game__touch button.is-pressed:not(:disabled) { background: var(--game-navy); color: #fff; border-color: var(--game-navy); box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #b57912; }
.trcc-game__touch span { display: block; font-size: .7rem; }
.trcc-game__touch [data-action=drop] { border-color: var(--color-gold, #c7a45a); background: #faf4e7; }
.trcc-game__panel { background: #f3f6f8; border: 1px solid var(--game-border); padding: 1.25rem; border-radius: .6rem; min-width: 0; scroll-margin-top: calc(var(--game-header) + 1rem); }
.trcc-game__stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.trcc-game__secondary-stats { display: contents; }
.trcc-game__screen-exit { display: none; }
.trcc-game__stats span, .trcc-game__next > span { display: block; line-height: 1.3; font-size: .8rem; color: var(--game-muted); }
.trcc-game__stats strong { display: block; line-height: 1.25; font-size: 1.35rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.trcc-game__next { margin-top: 1rem; }
.trcc-game__next canvas { display: block; margin-top: .5rem; max-width: 100%; height: auto; }
.trcc-game__status { min-height: 3rem; font-size: .9rem; }
.trcc-game__buttons { display: grid; gap: .5rem; }
.trcc-game__member-note { margin-top: 1rem; font-size: .85rem; }
.trcc-game__member-note a { text-decoration: underline; }
.trcc-game__instructions { margin-top: 1.75rem; border-top: 1px solid var(--game-border); padding-top: 1rem; font-size: .9rem; }
.trcc-game__instructions summary { cursor: pointer; font-weight: 700; padding: .6rem 0; }
.trcc-game__instructions kbd { padding: .1rem .35rem; border: 1px solid var(--game-border); border-radius: .2rem; }
.trcc-game__restart-confirm { border: 1px solid var(--game-border); padding: .8rem; margin-top: .8rem; }
@media (width < 56.3125rem) { .trcc-game { --game-header: 88px; } }
@media (max-width: 620px) {
    .trcc-game { padding: 1.5rem .75rem; }
    .trcc-game__layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .trcc-game__play { max-width: 27rem; width: 100%; margin: 0 auto; }
    .trcc-game__panel { padding: 1rem; grid-row: 1; }
    .trcc-game__arena { grid-template-columns: minmax(0, var(--game-board-width)) 5rem; gap: .5rem; }
    .trcc-game__stats { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
    .trcc-game__stats strong { font-size: 1.3rem; }
    .trcc-game__stats span { font-size: .7rem; }
}
@media (min-width: 621px) and (max-height: 600px) {
    .trcc-game__layout { grid-template-columns: minmax(0, 1fr); }
    .trcc-game__play { max-width: 30rem; margin-inline: auto; width: 100%; }
    .trcc-game__arena { grid-template-columns: minmax(0, var(--game-board-width)) minmax(0, 14rem); }
    .trcc-game__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .75rem; }
    .trcc-game__stats strong { font-size: 1.1rem; }
    .trcc-game__next { margin-top: .25rem; display: flex; align-items: center; gap: .75rem; }
    .trcc-game__next canvas { margin-top: 0; width: 5rem; }
    .trcc-game__session-controls > button { margin-top: .25rem; padding: .35rem; }
}
/* Same play surface in a native modal. Safe-area and browser toolbars own the
   available space; only the field shrinks when that space gets shorter. */
.trcc-game__screen { position: fixed; inset: 0; box-sizing: border-box; width: 100%; height: 100svh; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: max(.5rem, env(safe-area-inset-top)) max(.5rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); background: #f7f6f3; color: var(--game-navy); overflow: auto; }
.trcc-game__screen::backdrop { background: #f7f6f3; }
.trcc-game__screen .trcc-game__play { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .5rem; height: 100%; width: 100%; max-width: none; margin: 0; }
.trcc-game__screen .trcc-game__arena, .trcc-game__screen .trcc-game__stats, .trcc-game__screen .trcc-game__session-controls { display: contents; }
.trcc-game__screen .trcc-game__live { grid-row: 1; display: grid; grid-template-columns: minmax(3.5rem, 1fr) 4rem minmax(3.5rem, 1fr) 3rem 3rem; gap: .25rem .5rem; align-items: center; }
.trcc-game__screen .trcc-game__score { grid-column: 1; grid-row: 1; }
.trcc-game__screen .trcc-game__secondary-stats { display: flex; flex-wrap: wrap; gap: .25rem .5rem; grid-row: 1; grid-column: 3; min-width: 0; }
.trcc-game__screen .trcc-game__secondary-stats > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem; }
.trcc-game__screen .trcc-game__secondary-stats .trcc-game__best { display: none; }
.trcc-game__screen .trcc-game__secondary-stats strong { font-size: .875rem; }
.trcc-game__screen .trcc-game__stats span { font-size: .75rem; }
.trcc-game__screen .trcc-game__next { grid-column: 2; grid-row: 1; margin: 0; display: block; }
.trcc-game__screen .trcc-game__next > span { font-size: .75rem; }
.trcc-game__screen .trcc-game__next canvas { width: 4rem; height: auto; margin: 0; }
.trcc-game__screen .trcc-game__session-controls > button { grid-row: 1; margin: 0; width: auto; min-width: 3rem; min-height: 3rem; padding: .25rem; font-size: .75rem; }
.trcc-game__screen [data-pause] { grid-column: 4; }
.trcc-game__screen .trcc-game__screen-exit { grid-column: 5; display: block; }
.trcc-game__screen .trcc-game__status { grid-row: 2; grid-column: 1 / -1; margin: 0; min-height: 0; font-size: .75rem; line-height: 1.35; color: var(--game-muted); }
.trcc-game__screen .trcc-game__field { grid-row: 2; min-height: 0; display: grid; place-items: center; container-type: size; }
.trcc-game__screen .trcc-game__board-wrap { box-sizing: content-box; width: min(calc(100cqw - 6px), calc((100cqh - 6px) / 2)); max-width: none; margin: 0; }
.trcc-game__screen .trcc-game__board { width: 100%; height: auto; }
.trcc-game__screen .trcc-game__touch { grid-row: 3; display: grid; grid-template-columns: minmax(7.5rem, 1fr) 3.5rem minmax(4.5rem, 1fr); align-items: end; gap: 1.5rem; margin: 0; }
.trcc-game__screen .trcc-game__movement { display: grid; grid-template-columns: repeat(2, 3.5rem); grid-template-rows: repeat(2, 3.5rem); gap: .5rem; }
.trcc-game__screen .trcc-game__movement [data-action=left] { grid-row: 2; grid-column: 1; }
.trcc-game__screen .trcc-game__movement [data-action=right] { grid-row: 2; grid-column: 2; }
.trcc-game__screen .trcc-game__movement [data-action=down] { grid-row: 1; grid-column: 1 / -1; justify-self: center; }
.trcc-game__screen .trcc-game__touch button { width: 3.5rem; min-height: 3.5rem; padding: .25rem .1rem; line-height: 1.2; }
.trcc-game__screen .trcc-game__touch span { margin-top: .25rem; font-size: .75rem; }
/* Drop has its own middle zone, with at least 24px of empty space on either
   side. The left minimum shifts it slightly on the narrowest phones. */
.trcc-game__screen [data-action=drop] { grid-column: 2; justify-self: center; }
.trcc-game__screen .trcc-game__touch [data-action=rotate] { grid-column: 3; justify-self: end; width: 4.5rem; min-height: 4.5rem; border-color: var(--game-navy); }
@media (orientation: landscape) {
    .trcc-game__screen .trcc-game__play { grid-template-columns: 7.5rem minmax(0, 1fr) 4.5rem; grid-template-rows: auto minmax(0, 1fr) 3.5rem; }
    .trcc-game__screen .trcc-game__live { grid-column: 1 / -1; grid-row: 1; grid-template-columns: minmax(3.5rem, 1fr) 4rem minmax(6rem, 1fr) auto auto; }
    .trcc-game__screen .trcc-game__secondary-stats { grid-column: 3; grid-row: 1; justify-self: center; }
    .trcc-game__screen .trcc-game__status { grid-row: 2; }
    .trcc-game__screen .trcc-game__field { grid-column: 2; grid-row: 2; }
    .trcc-game__screen .trcc-game__touch { display: contents; }
    .trcc-game__screen .trcc-game__movement { grid-column: 1; grid-row: 2 / 4; align-self: end; }
    .trcc-game__screen [data-action=drop] { grid-column: 2; grid-row: 3; align-self: end; }
    .trcc-game__screen [data-action=rotate] { grid-column: 3; grid-row: 2 / 4; align-self: end; }
}
.member-games__form { max-width: 36rem; }
.member-games__form label { display: block; font-weight: 600; margin: .75rem 0 .35rem; }
.member-games__form input[type=text] { max-width: 100%; width: 100%; min-height: 2.75rem; padding: .65rem; }
.member-games__consent { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0; }
.member-games__consent input { flex: 0 0 auto; margin-top: .25rem; width: 1.25rem; height: 1.25rem; }
.member-games__consent label { margin: 0; font-weight: 400; }
.member-games__table { border-collapse: collapse; width: 100%; }
.member-games__table th, .member-games__table td { text-align: left; padding: .65rem .4rem; border-bottom: 1px solid var(--workspace-line, #cbd5dc); overflow-wrap: anywhere; }
.member-games__table th { white-space: nowrap; overflow-wrap: normal; }
.member-games__rank { width: 3rem; }
@media (max-width: 430px) { .member-games__table { font-size: .8rem; } .member-games__table th, .member-games__table td { padding: .65rem .2rem; } }