@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Orbitron:wght@600;800&display=swap');
/**
 * Copyright (c) 2012-2018, Andy Janata
 * All rights reserved.
 * 
 * Redistribution and use in source and binary forms, with or without modification, are permitted
 * provided that the following conditions are met:
 * 
 * * Redistributions of source code must retain the above copyright notice, this list of conditions
 *   and the following disclaimer.
 * * Redistributions in binary form must reproduce the above copyright notice, this list of
 *   conditions and the following disclaimer in the documentation and/or other materials provided
 *   with the distribution.
 * 
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR
 * IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
 * FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
 * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
 * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY
 * WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

#gamebody {
    overflow: hidden;
}

body {
    min-height: 640px;
    background: #eee;
    color: #000;
    font-size: 12px;
    margin: 0;
}

.card, #game_list {
    font-family: "helvetica neue", helvetica, Arial, sans-serif;
}

h2, h3, h4 {
    margin: 0 0 .25em;
}

/*
#browser {
  background: rgba(0, 0, 0, .5);
}

#browser_inner {
  border: 10px solid red;
  padding: 15px;
  background: white;
  margin: 150px;
  min-height: 150px;
}

#browser, #browser_inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9001;
}

#browser_ok {
  margin: 15px;
  position: absolute;
  right: 0;
  bottom: 0;
}
*/

#menubar {
    background: #555;
    border-bottom: 1px solid #333;
    color: #fff;
    height: 25px;
    padding: .5em;
}

#menubar_left {
    float: left;
}

#menubar_right {
    float: right;
}

#nickbox {
    border: 1px solid black;
    display: inline;
    padding: 5px;
}

#canvas {
    height: 533px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#main {
    height: 506px;
    padding: .5em;
}

#welcome {
    padding: 1em;
}

#game_list {
    height: 100%;
    width: 100%;
    overflow: auto;
}

.gamelist_lobby {
    background: #fff;
    border-radius: .25em;
    width: 575px;
    height: 175px;
    float: left;
    border: 1px solid #ccc;
    margin: 4px;
}

.gamelist_lobby_left {
    width: 77%;
    height: 100%;
    padding: .5em 1.5%;
    float: left;
}

.gamelist_lobby_right {
    width: 20%;
    height: 100%;
    float: right;
}

.gamelist_lobby_join {
    width: 100%;
    height: 75%;
    border: 1px solid #aaa;
    background: linear-gradient(#fff, #ddd) #ddd;
    border-radius: .25em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: normal;
}

.gamelist_lobby_spectate {
    width: 100%;
    height: 25%;
    border: 1px solid #aaa;
    background: linear-gradient(#fff, #ddd) #ddd;
    border-radius: .25em;
    text-transform: uppercase;
    font-weight: 700;
}

.gamelist_lobby_status {
    float: right;
    font-weight: 700;
}

.gamelist_lobby_status_joinable {
    color: green;
}

.gamelist_lobby_status_unjoinable {
    color: #c0c0c0;
}

#bottom {
    width: 100%;
    height: 215px;
    position: absolute;
    top: 543px;
    min-height: 100px;
}

#info_area {
    width: 250px;
    height: 100%;
    position: absolute;
    bottom: 0;
    min-height: 100px;
    border: 1px solid #999;
}

#tabs {
    min-height: 100px;
    width: 50%;
    height: 100%;
    border: 0;
    position: absolute;
    bottom: 0;
    right: 14px;
}

#tabs .ui-widget {
    line-height: 16px !important;
}

.tab-button {
    font-size: 14px !important;
}

.cardset_filter_list {
    display: inline-block;
    width: 33%;
}

.cardset_filter_list select {
    height: 150px;
    width: 100%;
}

.cardset_filter_list span {
    font-weight: bold;
}

.cardset_filter_list .buttons {
    text-align: center;
}

.log {
    width: 100%;
    height: 198px;
    border-style: none solid solid none;
    border-color: black;
    border-width: 1px;
    position: absolute;
    bottom: 18px;
    right: 0;
    overflow-y: scroll;
    min-height: 43px;
    font-size: 16px;
    font-family: serif;
}

#tab-preferences input[type='button'] {
    float: right;
}

#tab-preferences, #tab-gamelist-filters {
    overflow-y: auto;
}

.chat {
    border: 1px solid black;
    left: -1px;
    bottom: 0;
    height: 17px;
    position: absolute;
    padding: 0;
    width: 90%;
    font-family: serif;
    font-size: 12pt;
}

.chat_submit {
    width: 50px;
    height: 20px;
    position: absolute;
    right: -1px;
    bottom: -1px;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

span.error {
    color: red;
}

span.debug, span.admin {
    color: blue;
}

.card {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid #999;
    padding: 15px;
    font-size: 15pt;
    float: left;
    border-radius: .25em;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.blackcard {
    color: white;
    background: #231f20 linear-gradient(#231f20, #231f20 75%, #333);
}

.whitecard {
    background: white;
    color: #231f20;
}

.whitecard, .gamelist_lobby {
    background-image: linear-gradient(#fff, #fff 75%, #f8f8f8);
}

.cah {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 15px;
}

.hide {
    display: none;
}

.game {
    height: 100%;
    width: 100%;
    position: relative;
}

.your_hand {
    position: absolute;
    bottom: 10px;
    right: 5px;
}

.game_hand {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
}

.game_hand_filter {
    height: 100%;
    position: relative;
    background: rgba(192, 192, 192, .5);
    z-index: 100;
    text-align: center;
}

.game_hand_filter_text {
    position: absolute;
    top: 50%;
    font-size: 300%;
    margin-top: -30px;
    background: #eee;
    padding: .25em;
}

.game_hand_filter_text::before {
    content: "";
    display: inline-block;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-image: url('assets/czar.png');
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
}

.game_hand_cards {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 99%;
    padding-left: 2px;
    min-width: 750px;
}

.game_hand_cards .card {
    cursor: pointer;
}

.game_top {
    padding: 5px;
}

.game_menu_bar {
    float: right;
}

.game_message {
    font-size: 150%;
    font-weight: bold;
}

.game_black_card_wrapper {
    width: 232px;
    float: left;
}

.game_black_card {
    width: 232px;
    height: 232px;
    margin-top: 15px;
}

.confirm_card {
    float: left;
    margin-top: 10px;
    width: 100%;
    z-index: 500;
}

.game_left_side {
    float: left;
    width: 232px;
    padding-left: 10px;
    padding-top: 10px;
}

.game_right_side, .game_options {
    position: absolute;
    left: 246px;
    width: 75%;
}

.game_options {
    background: #eee;
    z-index: 500;
}

.custom_decks_list {
    margin-top: 10px;
    height: 120px;
    width: 100%;
}

.game_right_side_box {
    height: 60%;
    margin: 10px;
}

.game_right_side_cards {
    margin-top: 15px;
    min-width: 600px;
    cursor: pointer;
    z-index: 200;
}

.game_right_side_cards .card_holder, .game_white_cards_binder {
    z-index: 200;
}

.game_white_cards_binder {
    border: 3px solid silver;
    display: inline-block;
    margin-right: 4px;
    margin-bottom: 4px;
    border-radius: .25em;
}

.card_holder {
    float: left;
    position: relative;
    overflow-x: visible !important;
    overflow-y: visible !important;
    margin-right: 2px;
    z-index: 1;
}

.game_white_cards_binder .card_holder {
    margin-right: 0;
}

.scoreboard {
    width: 250px;
    height: 100%;
    position: absolute;
    overflow-y: scroll;
}

.scorecard {
    background: #fff;
    height: 36px;
    padding: .25em .5em;
    border-bottom: 1px solid #bbb;
    font-size: 11pt;
}

.scorecard:nth-child(even) {
    background: #f8f8f8;
}

.scorecard_status {
    float: right;
    margin-right: 5px;
}

.clear {
    clear: both;
}

.selected {
    color: #fff;
    background: #3c7fb1 !important;
}

.logo {
    position: absolute;
    width: 250px;
    height: 32px;
    bottom: 15px;
    left: 15px;
}

.logo_element {
    top: 2px;
    position: absolute;
    width: 22px;
    height: 22px;
}

.blackcard .logo_element {
    border: 1px solid #231f20;
}

.logo_1 {
    left: 2px;
}

.blackcard .logo_1 {
    background: #57585a;
}

.whitecard .logo_1 {
    background: #231f20;
}

.logo_2 {
    left: 10px;
}

.blackcard .logo_2 {
    background: #b2b3b7;
}

.whitecard .logo_2 {
    background: #636366;
}

.logo_3 {
    left: 16px;
    top: 5px;
}

.blackcard .logo_3 {
    background: white;
    color: black;
}

.whitecard .logo_3 {
    background: #c7c8ca;
    color: black;
}

.watermark_container {
    font-size: 5pt;
    text-align: center;
}

.logo_text {
    position: absolute;
    font-size: 8pt;
    font-weight: bold;
    left: 45px;
    bottom: 4px;
}

.card_metadata {
    position: absolute;
    right: 15px;
    bottom: 15px;
}

.draw, .pick {
    float: right;
    clear: both;
    font-weight: bold;
    font-size: 12pt;
}

.card_number {
    width: 20px;
    height: 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

.blackcard .card_number {
    background: white;
    display: inline-block;
    color: #231f20;
    text-align: center;
}

/* TODO .whitecard .card_number ??? */

.previous_round {
    z-index: 50;
    border: 3px solid black;
    width: 60%;
    height: 60%;
    position: absolute;
    top: 20%;
    left: 20%;
    padding: 5px;
}

.previous_round_close {
    position: absolute;
    right: 0;
}

.card_set_label {
    margin-right: 15px;
}

.scorecard_score, .scorecard_player {
    font-weight: 700;
}

.checkbox {
    margin-right: 4px;
    white-space: nowrap;
}

.checkbox input {
    vertical-align: middle;
}

.checkbox span {
    vertical-align: middle;
}

.nowrap {
    white-space: nowrap;
}

.cardnum {
    position: absolute;
    right: 10px;
    bottom: 19px;
    font-size: 8pt;
}

dfn {
    border-bottom: 1px dotted black;
}

#tweetbox {
    float: right;
}

.gamelink {
    cursor: pointer;
    text-decoration: underline;
}

.imagecard {
    height: 100%;
    width: 100%;
}

.card_text {
    word-wrap: break-word;
    overflow: hidden;
}



/* =========================================================================
   Suburban Senshi theme — CONSOLIDATED REWRITE (single source of truth)

   Everything above this point (~687 lines) is the original 2013 PYX base
   stylesheet and is left untouched.

   Architecture notes for future editors:
   - Written MOBILE-FIRST. Rules with no media query apply to every
     screen size; the ONE `@media (min-width: 769px)` block at the bottom
     layers on desktop-only enhancements (side-by-side columns, hover
     effects, etc). There is no `max-width` override block anywhere else
     in this file — that pattern is what caused the override wars/
     duplicate rule problem in the previous version of this file.
   - Every selector appears ONCE. If you need to change how something
     looks, find its existing rule and edit it — do not append a new
     override block at the end of the file. That drift is exactly what
     this rewrite fixes.
   - Colors, fonts, and repeated sizes live in the :root custom
     properties below. Change the theme by changing variables, not by
     hunting down every hex code.
   ========================================================================= */

:root {
    --neon-cyan: #00d9ff;
    --neon-magenta: #ff2fd6;
    --neon-purple: #7b2ff7;
    --gold: #ffd700;
    --felt-green-1: #1f7a4d;
    --felt-green-2: #0d5c34;
    --felt-green-3: #0a4a2a;
    --ink: #000;
    --panel-black: #0a0a0a;
    --panel-dark: #1a1a1a;
    --panel-darker: #111;
    --border-dim: #333;
    --font-ui: 'Rajdhani', 'Segoe UI', sans-serif;
    --font-display: 'Orbitron', 'Rajdhani', sans-serif;

    /* Card sizing — one clamp() controls every hand/judging card so there
       is exactly one place to tune "how big are the cards". Scales down
       smoothly on narrow phones instead of jumping between fixed sizes. */
    --card-w: clamp(88px, 22vw, 158px);
    --card-h: clamp(117px, 29.3vw, 211px); /* 3:4 aspect ratio of --card-w */
    --card-font: clamp(8px, 2.5vw, 12.5pt);
    --card-pad: clamp(6px, 2vw, 14px);

    --menubar-h: auto;
    --bottom-h: 230px;
    --bottom-min-h: 160px;
}

/* Overrides the base stylesheet's fixed 15pt font / 15px padding on
   every card — those were sized for the original 200px fixed card and
   clip badly (via .card_text's overflow:hidden) once cards scale down
   to their clamp()'d minimum on small viewports. Scaling both with the
   same clamp() logic as the card itself keeps text readable at every
   size instead of invisible past a certain point. */
.card {
    font-size: var(--card-font);
    padding: var(--card-pad);
    box-sizing: border-box;
}

/* ---------- Global neon scrollbars — applies everywhere automatically,
   replacing the need for a separate rule per scrollable element ---------- */
* {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--neon-cyan) var(--panel-darker); /* Firefox: thumb, track */
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--panel-darker);
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--neon-cyan), var(--neon-magenta));
    border-radius: 6px;
    box-shadow: 0 0 6px var(--neon-cyan), 0 0 10px rgba(255, 47, 214, .6);
}

*::-webkit-scrollbar-thumb:hover {
    box-shadow: 0 0 10px var(--neon-cyan), 0 0 16px rgba(255, 47, 214, .8);
}

*::-webkit-scrollbar-corner {
    background: var(--panel-darker);
}

*::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* NOTE: .hide is deliberately left as the original, non-!important
   base-stylesheet rule below — cah.game.js relies heavily on jQuery's
   .show()/.hide() (which toggle an INLINE style), and inline style
   without !important only wins over a NON-important class rule. Making
   .hide !important here previously broke that everywhere (Leave Game,
   Start Game, Stop Game, chat tab visibility, etc. all stopped
   appearing, since they still carry the "hide" class in markup and
   rely on .show() to override it).
   Two templates in game.jsp legitimately share a class with a live,
   styled element (both classes on one div): the scorecard template
   (`class="scoreboard hide"`) and the white-cards binder template
   (`class="game_white_cards_binder hide"`). Those two get a narrowly
   targeted !important instead, so only they are hardened rather than
   changing .hide's contract for the entire app. */
.scoreboard.hide,
.game_white_cards_binder.hide {
    display: none !important;
}

/* ---------- Hard reset so the black theme has no light edges ---------- */
html, body {
    background: var(--ink) !important;
    margin: 0;
    padding: 0;
    border-radius: 0 !important;
    height: 100%;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    min-height: 0;
}

body,
#menubar,
.tab-button,
input[type="button"],
input[type="text"],
input[type="password"],
select,
button,
h2, h3, h4,
.card_set_label,
.scoreboard,
.scorecard,
.scorecard_player,
.scorecard_score,
.scorecard_status,
.log,
.chat,
#menubar_left,
#menubar_right,
#menubar_right span,
#menubar_right label,
.game_menu_bar,
.game_menu_bar span,
.checkbox span,
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget button,
#tab-preferences,
#tab-gamelist-filters,
#tab-preferences label,
#tab-gamelist-filters label,
#tab-preferences span,
#tab-gamelist-filters span {
    font-family: var(--font-ui) !important;
}

h1,
.logo_text {
    font-family: var(--font-display);
}

/* =========================================================================
   PAGE SKELETON — body is the flex column: #canvas (game screen, grows to
   fill available space) then #bottom (scoreboard + chat, fixed band at
   the end of the column). #canvas itself is a column of #menubar (auto
   height) + #main (flexes, scrolls internally). Nothing here is
   position:absolute/fixed, so nothing can overlap unexpectedly.
   ========================================================================= */
#canvas {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background: radial-gradient(ellipse at center, var(--felt-green-1) 0%, var(--felt-green-2) 70%, var(--felt-green-3) 100%);
}

/* Playfield background art, layered between the felt gradient and the content */
#canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('assets/playfield-background.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

#menubar,
#main {
    position: relative;
    z-index: 1;
}

#main {
    flex: 1 1 auto;
    min-height: 50vh;
    height: auto !important;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
    box-sizing: border-box;
    padding: 0;
    display: flex;
    flex-direction: column;
}

#bottom {
    position: static !important;
    top: auto !important;
    flex: 0 1 var(--bottom-h);
    width: 100% !important;
    height: auto !important;
    max-height: var(--bottom-h) !important;
    min-height: var(--bottom-min-h);
    display: flex;
    flex-direction: column;
    background: var(--ink);
    border-top: 2px solid var(--border-dim);
    z-index: 900;
}

#bottom.hide {
    display: none !important;
}

/* =========================================================================
   MENUBAR — single consolidated row. .game_top's contents (Leave Game,
   Stop Game, status message, timer) are moved into #menubar_right by JS
   on game join; `display: contents` on the wrapper divs means all of it
   participates in ONE flex context so `order` works across the old
   left/right/game_top boundaries.
   ========================================================================= */
#menubar {
    flex: 0 0 auto;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: .5em;
    background: transparent !important;
    border-bottom: none;
    border-radius: 0 !important;
    height: auto !important;
    padding: .5em .75em;
    box-sizing: border-box;
    position: relative;
    z-index: 3001;
}

#menubar_left,
#menubar_right,
.game_top {
    display: contents !important;
}

/* Leave Game and Hide/Show Game Options removed from the visible
   menubar — with only ever one game running, logging out covers
   "leave", and game options are still shown automatically in the
   lobby regardless of this toggle. Explicit visual order, independent
   of DOM order: Confirm Selection first (the standout action), the
   status pill pushed to the far right via margin-left:auto, the timer
   after it, Log out after that, and Stop Game trailing everything at
   the very end — it's destructive, so it shouldn't sit next to
   Confirm Selection where it could get hit by accident. */
#leave_game,
.game_show_options {
    display: none !important;
}

input[type="button"].confirm_card { order: 1; }
.game_top .game_message {
    order: 6;
    margin-left: auto;
}
.timer_display { order: 7; }
.suburban-senshi-mute-btn { order: 7.5; }
#logout { order: 8; }
#stop_game { order: 9; }

/* Mute toggle button — small round icon, matches the menubar buttons'
   scale without competing visually with Confirm Selection/Log out. */
.suburban-senshi-mute-btn {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--neon-cyan);
    background: rgba(0, 217, 255, .12);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 0 6px rgba(0, 217, 255, .3);
    transition: background .15s ease, box-shadow .15s ease;
}

.suburban-senshi-mute-btn:hover {
    background: rgba(0, 217, 255, .22);
    box-shadow: 0 0 10px rgba(0, 217, 255, .5);
}

.suburban-senshi-mute-btn.suburban-senshi-muted {
    border-color: var(--neon-magenta);
    background: rgba(255, 47, 214, .12);
    box-shadow: 0 0 6px rgba(255, 47, 214, .3);
}

#menubar input[type="button"] {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 13px !important;
    padding: .5em .9em !important;
}

/* Permanently hidden: single-game server / redundant controls */
.game_show_last_round,
.game_menu_bar.checkbox, /* "Animate Cards" checkbox */
#filter_games,
li:has(a[href="#tab-gamelist-filters"]),
li:has(a[href="#tab-preferences"]),
#tab-preferences {
    display: none !important;
}

/* With Game List Filters and User Preferences both hidden, Global Chat
   is the only tab a normal player ever needs to reach — the tab strip
   itself is pointless overhead at that point, so it's hidden here.
   NOTE: this is purely cosmetic. jQuery UI Tabs still tracks which
   panel is "active" internally regardless of whether the nav is
   visually hidden, and still toggles that panel's inline display
   normally — an earlier version of this file also forced #tab-global
   to `display: flex !important` as a belt-and-suspenders safety net,
   but that caused it to render simultaneously alongside a real
   per-game chat tab once one became active (duplicate log panels).
   Removed — the conditional `:not([style*="display: none"])` pattern
   below is sufficient on its own and matches how per-game chat tabs
   are already handled. */
#tabs .ui-tabs-nav {
    display: none !important;
}

/* ---------- Round status pill ("You are the Card Czar.") ---------- */
.game_top .game_message {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    background: linear-gradient(145deg, var(--panel-dark), #2a2a2e);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: .4em 1.1em;
    box-shadow: 0 0 12px rgba(255, 215, 0, .5), 0 0 24px rgba(255, 215, 0, .25);
    color: var(--gold) !important;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(.75em, 2.2vw, 1.05em);
    text-shadow: 0 0 6px rgba(255, 215, 0, .6);
    white-space: nowrap;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game_top .game_message::before {
    content: "";
    display: inline-block;
    width: 1.6em;
    height: 1.6em;
    border-radius: 6px;
    background-image: url('assets/czar.png');
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

/* ---------- Timer: compact circular badge, number only ---------- */
.timer_display {
    font-size: 0 !important; /* collapses the "Current timer duration: / seconds" text nodes */
    display: inline-flex;
    align-items: center;
}

#current_timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--neon-cyan);
    box-shadow: 0 0 8px rgba(0, 217, 255, .5);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 14px !important;
    font-family: var(--font-display);
}

/* ---------- Global buttons/inputs: outrun neon glossy ---------- */
input[type="button"],
button {
    background: linear-gradient(180deg, var(--neon-cyan) 0%, var(--neon-purple) 100%) !important;
    color: #fff !important;
    border: 1px solid #00fff0 !important;
    border-radius: 8px !important;
    padding: .5em 1.3em !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    box-shadow: 0 0 6px rgba(0, 217, 255, .5), 0 2px 6px rgba(0,0,0,.4);
    cursor: pointer;
    transition: box-shadow .2s ease, transform .1s ease, background .2s ease;
    width: auto;
}

input[type="button"]:active,
button:active {
    transform: translateY(1px);
}

input[type="button"]:disabled,
button:disabled {
    background: #444 !important;
    color: #999 !important;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* User Preferences tab keeps original right-aligned, non-stretched buttons */
#tab-preferences input[type='button'] {
    float: right;
    width: auto !important;
}

select {
    border-radius: 6px !important;
    border: 1px solid #ccc !important;
    padding: .3em .5em !important;
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--neon-cyan);
}

/* =========================================================================
   WELCOME / LOGIN SCREEN
   ========================================================================= */
#welcome {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    background: url('assets/loginbackground.jpg') center center / cover no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    padding: 2em 1em;
}

#welcome h1 {
    font-size: clamp(1.6em, 6vw, 2.75em);
    font-weight: 700;
    margin-bottom: 1em;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* Hide CAH-clone subtitle + IP/license disclaimer + privacy link (private server) */
#welcome h3,
#welcome > p:nth-of-type(1),
#welcome > p:nth-of-type(2),
#welcome > p:nth-of-type(3) {
    display: none;
}

#nickbox {
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 16px;
    padding: 1.5em 2em;
    width: 90%;
    max-width: 340px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75em;
    position: static;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

#nickbox label {
    color: #fff;
    font-weight: 600;
}

#nickbox input[type="text"],
#nickbox input[type="password"] {
    padding: .6em .8em;
    border-radius: 8px;
    border: none;
    font-size: 16px; /* 16px prevents iOS auto-zoom on focus */
    width: 100%;
    box-sizing: border-box;
}

/* Hide the optional ID-code row */
#nickbox label[for="idcode"],
#nickbox input#idcode,
#nickbox a[href*="Identification-Codes"] {
    display: none;
}

#nickbox_error {
    color: #ff6b6b;
}

@keyframes outrun-glow {
    0%, 100% { box-shadow: 0 0 8px var(--neon-cyan), 0 0 4px var(--neon-magenta); }
    50% { box-shadow: 0 0 20px var(--neon-magenta), 0 0 30px var(--neon-cyan); }
}

#nickbox input[type="button"] {
    animation: outrun-glow 2.5s ease-in-out infinite;
}

/* =========================================================================
   GAME LIST / LOBBY
   ========================================================================= */
#game_list {
    height: 100%;
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: .5em;
}

.gamelist_lobby {
    background: #fff;
    border-radius: .25em;
    width: 100%;
    max-width: 575px;
    height: auto;
    min-height: 175px;
    display: flex;
    flex-wrap: wrap;
    float: none;
    border: 1px solid #ccc;
    margin: 4px auto;
    padding-bottom: .5em;
    box-sizing: border-box;
}

.gamelist_lobby_left {
    float: none;
    width: 100%;
    box-sizing: border-box;
    padding: .5em 1.5%;
}

.gamelist_lobby_right {
    float: none;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    gap: 4px;
    box-sizing: border-box;
    padding: 0 1.5% .5em;
}

.gamelist_lobby_join,
.gamelist_lobby_spectate {
    height: auto;
    min-height: 2.4em;
    flex: 1;
    border: 1px solid #aaa;
    background: linear-gradient(#fff, #ddd) #ddd;
    border-radius: .25em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: normal;
}

/* =========================================================================
   GAME BOARD — restructured as two clearly separate, independently
   horizontally-scrolling rows, matching the "4 horizontal bands" model:
     row 1 = #menubar (buttons/status/timer)
     row 2 = .game_board_top (black card + judging/preview cards)
     row 3 = .game_hand (player's hand)
     row 4 = #bottom (scoreboard + chat)

   `.game_board` and `.game_board_top` are real classes added to
   game.jsp specifically for this layout (they were previously anonymous
   `<div style="...">` wrappers with no class — seeing the actual markup
   confirmed that guessing at them via `#main > div:first-child` was
   wrong: #main's real first child is the hidden #game_list, not the
   game content, which is why the row-split never actually applied
   before). Chain of flex columns from #main down to .game_board so
   height passes through correctly to the two real rows.
   ========================================================================= */
#main_holder {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.game {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto !important;
    position: relative;
}

.game_board {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto !important;
}

/* ROW 2: black card + judging/preview cards, one horizontally-scrolling strip */
/* ---------- Scroll-hint arrows for the two horizontally-scrollable
   rows, replacing the (now-hidden) horizontal scrollbar. Zero-width
   sticky pseudo-elements: sticky keeps them pinned to the visible edge
   as the row scrolls, and zero width means they don't add to the
   row's scrollable width or shift card layout — the glyph itself
   simply renders past its own box via overflow:visible. ---------- */
.game_board_top::before,
.game_board_top::after,
.game_hand_cards::before,
.game_hand_cards::after {
    content: "\276E";
    position: sticky;
    top: 0;
    align-self: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    line-height: 1;
    color: rgba(255, 255, 255, .65);
    text-shadow: 0 0 6px var(--neon-cyan), 0 0 10px var(--neon-magenta);
    pointer-events: none;
    z-index: 60;
}

.game_board_top::before,
.game_hand_cards::before {
    left: 0;
    order: -1;
    animation: scroll-hint-pulse-left 1.6s ease-in-out infinite;
}

.game_board_top::after,
.game_hand_cards::after {
    content: "\276F";
    right: 0;
    order: 999;
    animation: scroll-hint-pulse-right 1.6s ease-in-out infinite;
}

@keyframes scroll-hint-pulse-left {
    0%, 100% { opacity: .35; transform: translateX(0); }
    50%      { opacity: .9;  transform: translateX(-4px); }
}

@keyframes scroll-hint-pulse-right {
    0%, 100% { opacity: .35; transform: translateX(0); }
    50%      { opacity: .9;  transform: translateX(4px); }
}

.game_board_top {
    position: relative;
    flex: 55 1 0;
    min-height: calc(var(--card-h) + 1.5em);
    height: auto !important;
    width: 100% !important;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 1.25em;
    overflow-x: scroll;
    overflow-y: auto;
    box-sizing: border-box;
    padding: .75em 1em;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: flex-grow .4s ease;
    cursor: grab;
    scrollbar-width: none; /* Firefox: horizontal scrollbar hidden, drag + arrows replace it */
    -webkit-user-select: none;
    user-select: none;
}

/* Hide only the horizontal scrollbar track (height:0); vertical scroll
   (needed so pick-2/pick-3 stacked cards can be panned into view) keeps
   its normal neon scrollbar from the global rule. */
.game_board_top::-webkit-scrollbar {
    height: 0;
}

.game_board_top.dragging {
    cursor: grabbing;
    user-select: none;
}

.game_hand_cards.dragging {
    cursor: grabbing;
    user-select: none;
}

/* NOTE: an earlier version of this file tried auto-collapsing the hand
   via `body:has(input.confirm_card:not(:disabled))`, on the theory that
   Confirm is only ever enabled once there's nothing left to pick. In
   practice the hand disappeared unconditionally in testing — Confirm
   was showing as enabled far more often than that theory predicted
   (including for the Card Czar, who has nothing to confirm at all).
   Rather than patch a trigger condition I can't verify live, this is
   reverted outright. If revisited, it needs a JS-driven class toggle
   instead of relying on inferred :disabled semantics. */

.game_black_card_wrapper {
    width: var(--card-w);
    max-width: 232px;
    flex: 0 0 auto;
    float: none;
    margin: 0;
}

.game_black_card {
    width: 100%;
    height: auto;
    margin-top: 0;
}

/* The wrapper above is just an empty placeholder — cah.game.js clones
   the actual card (.card.blackcard) and appends it INSIDE .game_black_card
   via $(".game_black_card").empty().append(this.blackCard_.getElement()).
   Without this rule, that inner element was still running on the base
   stylesheet's fixed 200x200 square, ignoring the wrapper's sizing
   entirely — that's the "squat instead of rectangular" black card. */
.game_black_card .card {
    width: var(--card-w) !important;
    height: var(--card-h) !important;
    box-sizing: border-box;
}

.blackcard .card_text {
    font-size: .82em;
}

.game_left_side {
    float: none;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75em;
}

.game_right_side,
.game_options {
    position: static;
    left: auto;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-top: 0;
    box-sizing: border-box;
}

/* Confirm Selection now physically lives in .game_top in game.jsp,
   which JS already relocates into #menubar_right on game join — the
   same mechanism that consolidated Leave/Stop/status into one row.
   No more position:fixed guessing: this is a genuine, permanent menubar
   button, just styled distinctly (pulsing magenta) so it reads as the
   primary action. */
@keyframes confirm-pulse {
    0%, 100% { box-shadow: 0 0 8px var(--neon-magenta), 0 0 4px var(--neon-purple); }
    50% { box-shadow: 0 0 20px var(--neon-magenta), 0 0 34px var(--neon-purple); }
}

input[type="button"].confirm_card {
    background: linear-gradient(180deg, var(--neon-magenta) 0%, var(--neon-purple) 100%) !important;
    border-color: var(--neon-magenta) !important;
    animation: confirm-pulse 1.6s ease-in-out infinite;
    font-size: 13px !important;
    padding: .5em 1.1em !important;
    border-radius: 999px !important;
    margin: 0 !important;
    float: none !important;
}

input[type="button"].confirm_card:disabled {
    animation: none;
    background: #444 !important;
    border-color: #555 !important;
}

/* Black/white card wrapper headers ("Black card"/"White cards") + "Your Hand"
   are purely instructional labels — hide them, the cards speak for themselves */
.game_black_card_wrapper > span:first-child,
.game_right_side_box.game_white_card_wrapper > span:first-child,
.your_hand {
    display: none !important;
}

.game_black_card_wrapper > span,
.game_white_card_wrapper > span {
    color: #fff;
    font-weight: 600;
}

.game_black_card_round_indicator {
    color: var(--neon-cyan);
    text-shadow: 0 0 4px rgba(0, 217, 255, .5);
}

.game_right_side_box {
    height: auto;
    margin: 0;
}

/* Judging screen / multi-pick preview. NOTE: `.game_white_cards` and
   `.game_right_side_cards` are the SAME element (both classes on one
   div in game.jsp) — not a parent/child nesting as earlier CSS assumed.
   This is a plain flex item taking its natural width within row 2's
   horizontal scroll; row 2 itself provides the scrollbar, so this
   doesn't need its own nested overflow/scroll. */
.game_right_side_cards {
    min-width: 0;
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
    z-index: 200;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
}

/* One binder = one submission's cards, in pick order, stacked top to
   bottom. Flex (not float) so it sizes correctly and float is a no-op
   on its children regardless of what the base stylesheet set. */
.game_white_cards_binder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 3px solid silver;
    border-radius: .25em;
    padding: 6px;
    background: rgba(255, 255, 255, .04);
    box-sizing: border-box;
    flex: 0 0 auto;
}

.game_right_side_cards .card_holder,
.game_white_cards_binder .card_holder {
    float: none;
    margin-right: 0;
}

/* Judging/preview cards use the same fixed rectangular size as hand
   cards for visual consistency. */
.game_right_side_cards .card {
    width: var(--card-w) !important;
    height: var(--card-h) !important;
    box-sizing: border-box;
}

/* ===== FIX: judging-screen cards (Pick 2+ submitted pairs / the
   selection-order preview) still run the legacy roundCardMouseEnter_ /
   roundCardMouseLeave_ hover handlers in cah.game.js, which scale the
   card via an inline `transform` against the old fixed 236px card size
   (see handoff "Neutered legacy JS" — this is the sibling bug to the
   hand-card hover bug that WAS patched in JS; this one wasn't). Rather
   than wait on a JS patch, force the inline transform off here: an
   !important stylesheet rule beats an inline style that has no
   !important of its own, so this fully cancels the shrink/stick effect
   regardless of what the JS still tries to do. If cah.game.js ever gets
   patched the same way handCardMouseEnter_/Leave_ was, this rule becomes
   redundant but harmless — leave it in either way as a safety net. */
.game_right_side_cards .card,
.game_white_cards_binder .card,
.game_right_side_cards .card_holder,
.game_white_cards_binder .card_holder {
    transform: none !important;
}

/* =========================================================================
   ROW 3 — PLAYER'S HAND. A dedicated flex row (see .game_board above),
   fully independent of row 2's height/scroll, so it can never overlap
   or be overlapped by the black-card/judging row above it. Cards
   scroll horizontally, so a 10-card hand never gets crowded or shrinks.
   ========================================================================= */
.game_hand {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    flex: 45 1 0;
    min-height: calc(var(--card-h) + 1.5em);
    height: auto !important;
    width: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    box-sizing: border-box;
    padding: .5em 0 0;
    transition: flex-grow .4s ease;
}

.game_hand_cards {
    position: relative;
    width: 100%;
    min-width: 0;
    height: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 4px 1em 14px;
    box-sizing: border-box;
    transition: transform .4s ease, opacity .3s ease;
    cursor: grab;
    scrollbar-width: none; /* Firefox */
    -webkit-user-select: none;
    user-select: none;
}

/* Horizontal scrollbar hidden — drag-to-scroll (JS) plus the glowing
   arrow indicators below now do this job instead. */
.game_hand_cards::-webkit-scrollbar {
    height: 0;
}

.game_hand_cards .card_holder {
    float: none;
    flex: 0 0 auto;
    margin-right: 0;
    overflow: visible !important;
}

.game_hand_cards .card {
    cursor: pointer;
    width: var(--card-w);
    height: var(--card-h);
    transition: transform .15s ease, box-shadow .15s ease;
}

.game_hand_cards .card_text {
    font-size: 90%;
    line-height: 1.15;
}

/* Czar's "you can't play, you're judging" overlay — covers row 3
   completely; `.hide` (from the base stylesheet) still controls whether
   it renders at all, this only controls layout when it's shown. */
.game_hand_filter {
    position: absolute;
    inset: 0;
    z-index: 300;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
}

.game_hand_filter:not(.hide) {
    display: flex !important;
}

.game_hand_filter_text {
    position: static;
    margin-top: 0;
    background: linear-gradient(145deg, var(--panel-dark), #2a2a2e);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: .5em 1.4em;
    color: var(--gold) !important;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.1em, 4vw, 2em);
    box-shadow: 0 0 12px rgba(255, 215, 0, .5), 0 0 24px rgba(255, 215, 0, .25);
    text-shadow: 0 0 6px rgba(255, 215, 0, .6);
    display: inline-flex;
    align-items: center;
    gap: .5em;
    max-width: 90vw;
    text-align: center;
}

.game_hand_filter_text::before {
    content: "";
    display: inline-block;
    width: clamp(40px, 10vw, 96px);
    height: clamp(40px, 10vw, 96px);
    border-radius: 12px;
    background-image: url('assets/czar.png');
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}


/* =========================================================================
   GAME OPTIONS DIALOG
   ========================================================================= */
.game_options {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: min(92vw, 900px);
    max-width: 92vw;
    height: auto;
    max-height: 85vh;
    max-height: 85dvh; /* dynamic viewport height — accounts for mobile browser toolbars showing/hiding, where a plain vh-based height can end up taller than what's actually visible */
    z-index: 3000;
    background: linear-gradient(145deg, #2a2a2e 0%, #1a1a1c 100%) !important;
    color: #fff !important;
    border: 1px solid #555 !important;
    border-radius: 12px !important;
    padding: 1em 1.2em;
    overflow-y: auto;
    box-sizing: border-box;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 20px 60px rgba(0, 0, 0, .6),
        0 0 30px rgba(123, 47, 247, .25);
}

/* Full-screen takeover on narrow viewports instead of a centered box.
   Centering a fixed-position box against a shifting mobile viewport
   height (browser toolbar show/hide) has been unreliable — a simpler
   full-screen sheet sidesteps that whole problem: no centering math,
   nothing that can end up above/below the visible area, and the whole
   thing scrolls naturally if content is taller than the screen. */
@media screen and (max-width: 640px) {
    .game_options {
        top: 0 !important;
        left: 0 !important;
        transform: none;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100dvh;
        border-radius: 0 !important;
        border: none !important;
    }
}

.game_options label,
.game_options span,
.game_options legend,
.game_options fieldset {
    color: #fff !important;
}

.game_options fieldset {
    border: 1px solid #555;
    border-radius: 10px;
}

.game_options select,
.game_options input[type="text"],
.game_options input[type="password"] {
    background: #222;
    color: #fff;
    border: 1px solid #555;
}

.game_options > div[style*="display: flex"] {
    display: flex !important;
    flex-direction: column;
    gap: 1em;
}

.game_options > div[style*="display: flex"] > fieldset {
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

/* ---------- Card sets picker ---------- */
.card_sets {
    border: none;
    background: rgba(255,255,255,.04);
    border-radius: 10px;
    padding: 1em 1.2em;
    margin: .5em 0;
    max-height: 260px;
    overflow-y: auto;
    display: block;
    box-sizing: border-box;
}

.card_sets legend {
    font-weight: 700;
    font-size: 1.1em;
    color: var(--neon-magenta);
    text-shadow: 0 0 6px rgba(255, 47, 214, .4);
    padding: 0 .5em;
}

.base_card_sets,
.extra_card_sets {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5em;
    margin-top: .5em;
}

.card_sets .nowrap {
    width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: .35em;
    background: rgba(255,255,255,.06);
    border: 1px solid #444;
    border-radius: 8px;
    padding: .35em .7em;
    color: #fff;
    transition: all .15s ease;
}

.card_set_label {
    margin-right: 0;
    font-weight: 500;
    cursor: pointer;
}

/* =========================================================================
   jQuery UI TABS (game options tab strip, preferences/filters/chat tabs)
   ========================================================================= */
.ui-tabs {
    border: none !important;
    background: transparent !important;
}

.ui-tabs .ui-tabs-nav {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #222 !important;
    padding: 0 !important;
    flex: 0 0 auto;
}

.ui-tabs .ui-tabs-nav li {
    border: none !important;
    background: transparent !important;
    border-radius: 8px 8px 0 0 !important;
    margin: 0 2px 0 0 !important;
}

.ui-tabs .ui-tabs-nav li a {
    padding: .5em .9em !important;
    color: #ddd !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    background: linear-gradient(135deg, var(--neon-magenta) 0%, var(--neon-purple) 100%) !important;
    box-shadow: 0 0 14px var(--neon-magenta), 0 0 4px var(--neon-purple);
    border-radius: 8px 8px 0 0 !important;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
    color: #fff !important;
    text-shadow: 0 0 6px #fff;
}

.ui-widget-content {
    border: 1px solid #ddd !important;
    background: #fff !important;
    border-radius: 0 0 8px 8px !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    border: 1px solid #ccc !important;
    background: #f5f5f5 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.ui-state-hover {
    background: #e8e8e8 !important;
}

/* =========================================================================
   BOTTOM BAND — scoreboard is now a slim horizontal ticker strip above
   the chat panel (not a tall vertical list beside it), at every
   viewport size. This reclaims most of the vertical space the old
   scoreboard list used to take, leaving more room for the actual game
   board in rows 2/3 above.
   ========================================================================= */
#bottom {
    flex-direction: column;
}

#info_area {
    position: relative;
    width: 100%;
    height: 40px;
    max-height: 40px;
    min-height: 40px;
    flex: 0 0 40px;
    background: var(--panel-black);
    border: 1px solid var(--neon-cyan);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 0 12px rgba(0, 217, 255, .4), 0 0 24px rgba(255, 47, 214, .2);
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
}

/* "SCOREBOARD" is a normal (non-animated) flex sibling of
   .scoreboard_track — the ticker motion is driven from JS (see
   cah.game.js), not a CSS @keyframes animation. Two different CSS-only
   approaches both failed to reliably animate on mobile (a hover-pause
   rule that gets stuck on touch devices, then unclear even after
   gating that to hover-capable devices) — JS just sets transform
   directly on a timer, sidestepping that whole category of animation
   quirks entirely. */
.scoreboard {
    background: transparent;
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
}

.scoreboard .game_message {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 .6em;
    background: var(--panel-black);
    box-shadow: 6px 0 8px -4px rgba(0, 0, 0, .6);
    z-index: 2;
}

/* The real, live track — the same DOM elements updateUserStatus/
   updateSpectator directly append to and update in place. A mirrored
   duplicate for a seamless loop was tried here twice and caused real
   problems both times (stale scores, then a per-game-instance
   setInterval leak) — plain and correct beats fancier and buggy. */
.scoreboard_track {
    flex: 0 0 auto;
    width: max-content;
    display: flex;
    align-items: center;
    gap: .5em;
    white-space: nowrap;
    padding-left: .6em;
}

.scoreboard .game_message {
    color: #2ecc71;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-shadow: 0 0 6px #2ecc71;
}

.scorecard {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    background: var(--panel-dark) !important; /* !important beats the base stylesheet's higher-specificity :nth-child(even) rule */
    color: #fff;
    border: 1px solid #2a2a2a;
    border-radius: 999px;
    font-size: 10.5pt;
    height: auto;
    padding: .25em .7em;
    white-space: nowrap;
}

/* Distinct accent color per player (cycling through 5), instead of a
   uniform background — makes each player's pill easy to tell apart at
   a glance in the ticker. */
.scorecard:nth-child(5n+1) { border-color: var(--neon-cyan); box-shadow: 0 0 6px rgba(0, 217, 255, .35); }
.scorecard:nth-child(5n+2) { border-color: var(--neon-magenta); box-shadow: 0 0 6px rgba(255, 47, 214, .35); }
.scorecard:nth-child(5n+3) { border-color: var(--gold); box-shadow: 0 0 6px rgba(255, 215, 0, .35); }
.scorecard:nth-child(5n+4) { border-color: var(--neon-purple); box-shadow: 0 0 6px rgba(123, 47, 247, .35); }
.scorecard:nth-child(5n+5) { border-color: #2ecc71; box-shadow: 0 0 6px rgba(46, 204, 113, .35); }

.scorecard .clear {
    display: none;
}

.scorecard_player {
    color: #fff;
    text-shadow: 0 0 5px #2ecc71;
    font-weight: 600;
}

.scorecard_points {
    display: inline-flex;
    align-items: center;
    gap: .2em;
}

.scorecard_score {
    color: #2ecc71;
    text-shadow: 0 0 6px #2ecc71;
    font-weight: 700;
}

/* "Awesome Point(s)" text is redundant next to the number in a compact
   ticker pill — just show the score itself. */
.scorecard_point_title {
    display: none;
}

.scorecard_status {
    font-size: 8.5pt;
    color: var(--neon-cyan);
    text-shadow: 0 0 4px rgba(0, 217, 255, .5);
}

/* Overrides the base stylesheet's flat blue .selected (#3c7fb1) — PYX
   applies this class to highlight a scorecard (e.g. round winner), and
   the stock color clashed badly against the neon theme. */
.scorecard.selected {
    background: linear-gradient(135deg, var(--neon-magenta), var(--neon-purple)) !important;
    border-color: var(--neon-magenta) !important;
    box-shadow: 0 0 10px var(--neon-magenta), 0 0 4px var(--neon-purple);
    color: #fff !important;
}


#tabs {
    position: static !important;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--panel-dark) !important;
    border: 1px solid var(--neon-cyan) !important;
    border-top: none !important;
    border-radius: 10px !important;
    box-shadow: 0 0 12px rgba(0, 217, 255, .4), 0 0 24px rgba(255, 47, 214, .2) !important;
}

/* Non-chat tab panels: plain block flow so their buttons don't stretch */
#tab-preferences,
#tab-gamelist-filters {
    flex: 1 1 auto;
    overflow-y: auto;
    box-sizing: border-box;
    padding: .5em;
    background: var(--panel-darker);
    color: #fff;
}

/* Chat panels (global + per-game clones): flex column, log/input/button stacked */
#tab-global,
[id^="tab-chat-game_"] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

/* Only apply the grid display when jQuery UI hasn't hidden this panel —
   cooperates with its own inline display:none instead of fighting it */
#tab-global.ui-tabs-panel:not([style*="display: none"]),
[id^="tab-chat-game_"].ui-tabs-panel:not([style*="display: none"]) {
    display: grid;
}

#tab-global,
[id^="tab-chat-game_"] {
    background: #111 !important;
}

#tab-global .log,
[id^="tab-chat-game_"] .log {
    grid-column: 1 / 3;
    grid-row: 1;
    position: static !important;
    width: 100% !important;
    min-height: 50px;
    height: auto;
    line-height: 1.4;
    background-color: rgba(0, 0, 0, .8) !important;
    background-image: url('assets/chatbackground.jpg') !important;
    background-size: contain !important;
    background-position: center !important;
    background-blend-mode: multiply !important;
    background-repeat: no-repeat !important;
    color: #fff !important;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 8px;
    border: none;
}

.log span.error { color: #ff6b6b; }
.log span.debug,
.log span.admin { color: #6bb6ff; }

#tab-global .chat,
[id^="tab-chat-game_"] .chat {
    grid-column: 1;
    grid-row: 2;
    position: static !important;
    width: auto !important;
    height: 40px !important;
    background: #141414;
    color: #fff;
    border: 1px solid #444;
    border-radius: 16px !important;
    box-sizing: border-box;
    margin: 6px !important;
    padding: 0 1em !important;
    font-size: 16px !important; /* prevents iOS auto-zoom on focus */
}

/* Circular send button, sitting right after the input on the same row
   instead of its own row below — reclaims vertical space for the log,
   and the arrow glyph (set in game.jsp) replaces the "Chat" text. */
#tab-global .chat_submit,
[id^="tab-chat-game_"] .chat_submit {
    grid-column: 2;
    grid-row: 2;
    position: static !important;
    align-self: center;
    flex-shrink: 0;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    margin: 6px 6px 6px 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================================
   LOGO / WATERMARK — the little card_number+text badge in the corner of
   every card. Kept to one line, contained within the card's edge.
   ========================================================================= */
.card {
    overflow: hidden;
}

.card_text {
    display: block;
    padding-bottom: .4em;
    box-sizing: border-box;
    font-weight: 700;
}

/* The card-set icon layers and the "Cards Against Suburban Senshi"
   watermark text kept breaking in different ways (overlapping,
   mispositioned) across several attempts to fix them within the base
   stylesheet's absolute-positioning scheme. Not worth continuing to
   patch — just hide the whole badge. */
.logo {
    display: none !important;
}

/* =========================================================================
   DESKTOP ENHANCEMENTS (≥769px) — everything above already works fine on
   desktop; this block only ADDS side-by-side layout where a phone-width
   single column would waste space. No property here is ever redeclared
   above, so there is nothing to fight with.
   ========================================================================= */
@media screen and (min-width: 769px) {

    /* Game options: two balanced columns instead of stacked fieldsets */
    .game_options > div[style*="display: flex"] {
        flex-direction: row;
        align-items: flex-start;
    }

    .game_options > div[style*="display: flex"] > fieldset {
        flex: 1 1 45%;
        max-width: 45%;
    }

    .card_sets {
        flex: 1 1 55%;
        max-width: 55%;
    }

    .base_card_sets,
    .extra_card_sets {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .card_sets .nowrap:hover {
        border-color: var(--neon-magenta);
        box-shadow: 0 0 10px rgba(255, 47, 214, .5);
    }

    /* Hover nudge on hand cards (no hover state on touch devices) */
    .game_hand_cards .card:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
    }

    .game_hand_cards {
        justify-content: center;
        padding: 4px 2em 1em;
    }

    /* Gamelist lobby: original two-column card layout, still centered */
    .gamelist_lobby {
        width: 575px;
        margin: 4px auto;
    }

    .gamelist_lobby_left {
        width: 77%;
        float: left;
    }

    .gamelist_lobby_right {
        width: 20%;
        float: right;
        flex-direction: column;
    }

    .logo,
    .logo_text {
        display: block;
    }
}

/* =========================================================================
   ROUND WINNER BANNER — created dynamically by cah.game.js
   (showRoundWinnerBanner_) when a round completes. Zooms in from the
   center of the screen, holds, then fades/zooms back out.
   ========================================================================= */
#round-winner-banner {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

#round-winner-banner.round-winner-banner-show {
    visibility: visible;
    opacity: 1;
}

/* Single notification box holding both the image and the text — giving
   the border/background to this shared wrapper (instead of the text
   span alone) and clipping overflow means winner.png can never spill
   outside the visible box, however tall it naturally renders. */
.round-winner-banner-inner {
    display: flex;
    align-items: center;
    gap: .6em;
    font-size: clamp(1.4em, 6vw, 3.2em);
    background: rgba(0, 0, 0, .6);
    padding: .3em .9em;
    border-radius: 16px;
    border: 2px solid var(--gold);
    max-width: 90vw;
    box-sizing: border-box;
    overflow: hidden;
    transform: scale(.2);
    opacity: 0;
}

.round-winner-banner-text {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1em;
    color: var(--gold);
    text-shadow: 0 0 12px var(--gold), 0 0 28px var(--neon-magenta), 0 0 50px var(--neon-cyan);
    text-align: center;
}

.round-winner-banner-img {
    /* Scaled to the text's own line-height (1em = current font-size)
       so it always sits proportionate to the announcement, and can
       never exceed the box since .round-winner-banner-inner clips. */
    height: 2.6em;
    width: auto;
    max-height: 100%;
    max-width: 38vw;
    object-fit: contain;
    filter: drop-shadow(0 0 10px var(--gold)) drop-shadow(0 0 20px var(--neon-magenta));
    flex-shrink: 0;
}

@keyframes round-winner-zoom {
    0%   { transform: scale(.2); opacity: 0; }
    15%  { transform: scale(1.15); opacity: 1; }
    25%  { transform: scale(1); opacity: 1; }
    80%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}

#round-winner-banner.round-winner-banner-show .round-winner-banner-inner {
    animation: round-winner-zoom 3s ease-out forwards;
}

/* ---------- Game-winner banner: same overlay/zoom pattern as the round
   winner above, but for winning the overall game — magenta/purple
   forward instead of gold, and stays up longer (5s vs 3.2s) since it's
   the bigger moment. ---------- */
#game-winner-banner {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

#game-winner-banner.game-winner-banner-show {
    visibility: visible;
    opacity: 1;
}

.game-winner-banner-inner {
    display: flex;
    align-items: center;
    gap: .6em;
    font-size: clamp(1.6em, 7vw, 3.8em);
    background: rgba(0, 0, 0, .68);
    padding: .35em 1em;
    border-radius: 18px;
    border: 3px solid var(--neon-magenta);
    max-width: 92vw;
    box-sizing: border-box;
    overflow: hidden;
    transform: scale(.2);
    opacity: 0;
}

.game-winner-banner-text {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1em;
    color: #fff;
    text-shadow: 0 0 14px var(--neon-magenta), 0 0 30px var(--neon-cyan), 0 0 55px var(--gold);
    text-align: center;
}

.game-winner-banner-img {
    height: 3em;
    width: auto;
    max-height: 100%;
    max-width: 40vw;
    object-fit: contain;
    filter: drop-shadow(0 0 12px var(--neon-magenta)) drop-shadow(0 0 24px var(--gold));
    flex-shrink: 0;
}

@keyframes game-winner-zoom {
    0%   { transform: scale(.2); opacity: 0; }
    15%  { transform: scale(1.2); opacity: 1; }
    25%  { transform: scale(1); opacity: 1; }
    85%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.35); opacity: 0; }
}

#game-winner-banner.game-winner-banner-show .game-winner-banner-inner {
    animation: game-winner-zoom 4.6s ease-out forwards;
}

/* ---------- Next-round pie-chart countdown, glowing semi-transparent
   gold, shown once the winner banner above has finished fading ---------- */
#next-round-timer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: conic-gradient(rgba(255, 215, 0, .55) var(--pct, 100%), rgba(255, 215, 0, .12) 0);
    box-shadow: 0 0 14px rgba(255, 215, 0, .6), 0 0 28px rgba(255, 215, 0, .3);
    border: 2px solid rgba(255, 215, 0, .85);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

#next-round-timer.next-round-timer-show {
    opacity: 1;
}