/* Fixed full-screen page background, admin-configurable (solid /
* gradient / image) — sits behind #kg-app, which goes transparent
* via inline style in KG_Shortcode::render() so this shows through.
* Independent of --kg-felt/--kg-felt-dark (the table color). */
.kg-bg-layer {
position: fixed; inset: -20px; z-index: -1;
background-repeat: no-repeat; background-size: cover; background-position: center;
}
/* แคง (Kang) — self-contained front-end styles (cloned from ผสมสิบ).
* Table felt / accent colors are CSS custom properties on #kg-app so
* the in-game "customize" panel can override them live (persisted in
* localStorage) without touching this stylesheet. */
/* Same digital-clock face already used for the turn timer in
* thai-checkers-game — reused here 2026-09-27 for this game's own
* "your turn / time / coins" status bar. */
@font-face {
font-family: 'Digital-Dismay';
src: url('../fonts/Digital-Dismay.woff2') format('woff2');
font-weight: normal; font-style: normal; font-display: swap;
}
#kg-app,
#kg-app *:not(h1, h2, h3, h4, h5, p) {
font-family: 'db', 'SF Thonburi', 'Sarabun', sans-serif !important;
font-weight: normal !important;
}
#kg-app {
--kg-felt: #1e6b46;
--kg-felt-dark: #123f29;
--kg-accent: #d4af37;
--kg-bg: #faf6ef;
--kg-card: #ffffff;
/* Admin-configurable (2026-09-26, "สีข้อความ" in the theme admin
* screen), applied once at boot in game.js's applyTextColorTheme() --
* covers only text OUTSIDE boxes/buttons (headings, .kg-field
* labels, etc. that inherit this via the plain `color:` below).
* Every place that sits on a light/white box background (inputs,
* secondary buttons, round-over card, preset-swatch border) was
* switched to a fixed #2c2416 so it can't be set illegible by this. */
--kg-text: #2c2416;
--kg-muted: #7a6f5c;
--kg-danger: #c0392b;
--kg-success: #2e7d32;
--kg-card-red: #c0392b;
--kg-card-black: #24211c;
--kg-radius: 14px;
--kg-shadow: 0 4px 18px rgba(20, 20, 10, 0.14);
/* Card sizing, tied to the bundled 329x500px card-face photos (see
* KG_Theme::default_card_image_urls()) so every .kg-card box is
* exactly that aspect ratio — no cropping, no stretching, no
* letterboxing. --kg-card-w is the width a hand card actually
* gets: it's solved so that 6 cards (the post-draw hand size, the
* largest a player ever holds) plus 5 gaps of --kg-hand-gap fill
* the app's own content width exactly, clamped between a legible
* floor and a not-comically-huge ceiling. That means a 6-card hand
* shrinks to fit on narrow phones and grows on wide screens, but
* never has to wrap or overflow — no fixed-breakpoint media query
* needed. Every other .kg-card use (opponent counters, the joker
* pile card, etc.) just sets its own --kg-card-w override and
* inherits the same aspect-ratio.
*/
--kg-card-ratio: 329 / 500;
--kg-hand-gap: 6px;
--kg-card-w-min: 40px;
--kg-card-w-max: 78px;
--kg-card-w: clamp(
var(--kg-card-w-min),
calc((min(560px, 100vw) - 32px - 5 * var(--kg-hand-gap)) / 6),
var(--kg-card-w-max)
);
box-sizing: border-box;
max-width: 560px;
margin: 0 auto;
padding: 16px;
color: var(--kg-text);
background: var(--kg-bg);
border-radius: 18px;
}
#kg-app *, #kg-app *::before, #kg-app *::after { box-sizing: border-box; }
#kg-app .kg-loading { text-align: center; padding: 40px 0; color: var(--kg-muted); }
/* ---------- Layout shell ---------- */
#kg-app .kg-screen { display: none; }
#kg-app .kg-screen.active { display: block; animation: kg-fade-in .18s ease; }
/* Opacity only -- no transform here. A `transform` on this ancestor would
* (per spec) make it the containing block for any `position: fixed`
* descendant instead of the viewport for as long as the animation runs,
* which broke the full-screen round-over overlay's positioning for a
* couple of frames on every re-render (it would flash showing whatever
* table content was directly behind it at that ancestor's coordinates). */
@keyframes kg-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Set by render() (game.js) whenever a render is just a same-screen data
* refresh — a draw, a discard, a bot move, a busy-flag toggle, a drag
* reorder, a timer expiry, an error message, etc. — rather than an
* actual screen change. Without this, EVERY one of those would replay
* the fade-in above across the whole table, which is exactly the
* "stutters like a page refresh" symptom this fixes. Same specificity
* as .kg-screen.active, so it must come after it in source order to
* win; the compound selector below also wins outright regardless of
* order. */
#kg-app .kg-screen.active.kg-no-anim { animation: none; }
#kg-app .kg-logo { text-align: center; margin-bottom: 6px; }
#kg-app .kg-logo img { width: 220px; max-width: 80%; height: auto; display: inline-block; }
#kg-app .kg-header { text-align: center; margin-bottom: 18px; }
#kg-app .kg-header h1, #kg-app .kg-header h2 { font-size: 26px; margin: 0 0 4px; }
/* "— เข้าร่วมห้อง —" section divider on the online setup screen, promoted
* from a small muted line to a proper h2 (2026-09-28 request) — same size
* as the other screen headers, inheriting var(--kg-text) like they do
* rather than the old hardwired --kg-muted. */
#kg-app .kg-join-divider { font-size: 26px; margin: 18px 0 12px; text-align: center; }
/* Room code / player count / latest activity line (2026-09-28 request) —
* sits above the usual back/stats header row on the table screen, and
* above the big room-code box on the lobby screen (there with its own
* room-code span suppressed, so it isn't shown twice). Fixed, legible
* colors rather than the admin-adjustable --kg-text, same "always
* readable regardless of theme" reasoning as .kg-round-over-card. */
#kg-app .kg-room-info-bar {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px;
background: #6b1f1f; color: #fff; font-size: 12px; border-radius: 999px;
padding: 5px 12px; margin: 0 0 8px; text-align: center;
}
#kg-app .kg-room-info-code { font-weight: 800; letter-spacing: .5px; }
#kg-app .kg-room-info-count { opacity: .9; }
#kg-app .kg-room-info-log { opacity: .85; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
/* Per-player online/offline/paused presence (2026-09-28 request), replacing
* the old "latest activity log" line in this same bar. Online = blue,
* sitting out (paused) = light gray regardless of online state, offline =
* dim (2026-09-28 follow-up: was green/dim, changed to blue/light-gray). */
#kg-app .kg-room-info-presence { opacity: .95; }
#kg-app .kg-room-info-presence.kg-online { color: #6ec3ff; }
#kg-app .kg-room-info-presence.kg-offline { color: #d9d0c8; opacity: .6; }
#kg-app .kg-room-info-presence.kg-paused { color: #d0d0d0; opacity: .85; }
/* A small "·" separator before every span but the first one, using the
* bar's own gap for spacing on both sides instead of hand-tuned margins. */
#kg-app .kg-room-info-bar > span + span::before { content: '·'; margin-right: 10px; opacity: .6; }
/* Host-only mid-game join-request banner (2026-09-28 request), sitting
* just under the room-info bar on the table screen. */
#kg-app .kg-join-requests { margin: 0 0 8px; }
#kg-app .kg-join-request-row {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
background: rgba(0,0,0,.35); color: #fff; font-size: 13px;
border-radius: 10px; padding: 8px 12px; margin: 0 0 6px;
}
#kg-app .kg-join-request-actions { display: flex; gap: 6px; flex-shrink: 0; }
#kg-app .kg-btn-tiny {
border: none; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700;
cursor: pointer;
}
#kg-app .kg-btn-approve { background: #3a9d5c; color: #fff; }
#kg-app .kg-btn-deny { background: rgba(255,255,255,.15); color: #fff; }
/* Small, thin pill button below the game for "ขอพักชั่วคราว" / "ขอเข้าเล่น"
* (2026-09-28 request) — deliberately understated (no bold, low-key
* outline) so it doesn't compete with the black back/stats bar above it. */
#kg-app .kg-sit-row { display: flex; justify-content: center; margin: 8px 0 0; }
#kg-app .kg-pill-btn {
background: transparent; color: var(--kg-text); border: 1px solid currentColor; opacity: .75;
border-radius: 999px; padding: 4px 16px; font-size: 12px; font-weight: 400;
cursor: pointer;
}
#kg-app .kg-pill-btn:hover { opacity: 1; }
/* Waiting-for-host-approval screen (2026-09-28 request). */
#kg-app .kg-join-pending { text-align: center; padding: 40px 16px; color: var(--kg-text); }
/* Bottom action bar on the table screen (ย้อนกลับ / ดูสถิติ), moved down
* from the top header per 2026-09-28 request — black background, white
* text/buttons, sits below the whole game board. */
#kg-app .kg-bottom-bar {
display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px;
background: none; padding: 0; margin: 14px 0 0;
}
#kg-app .kg-bottom-bar .kg-back {
margin: 0; opacity: 1; background: #000; color: #fff; border: none; border-radius: 999px; padding: 10px 22px; font-size: 15px; font-weight: 600; line-height: 1.2; width: auto; cursor: pointer;
}
#kg-app .kg-bottom-bar .kg-back:hover { background: #1c1c1c; }
/* Outside-box copy on the app's own (often dark/photo) background -- this
* is the admin-configurable --kg-text, not the fixed --kg-muted, so the
* "สีข้อความ" setting actually reaches the front-page tagline / กลับหน้าหลัก
* / ย้อนกลับ / สถิติ (2026-09-26 follow-up: these were still hardwired to
* --kg-muted, so the new admin color had no visible effect on them). */
#kg-app .kg-header p { margin: 0; color: var(--kg-text); font-size: 14px; opacity: .8; }
/* Snug white pill, rounded corners, black ink, centered under the mode
* list (user request 2026-09-27: unify "กลับหน้าหลัก" across
* uno-game/domino-game/kang-game as a white/rounded/black-text
* button sized to its own text, kept centered) -- was a plain
* underline-free text link with a top divider border. `display:flex`
* + `width:fit-content` + `margin:auto` centers a shrink-to-fit block
* without needing a wrapper element. Same fixed-ink colour/border as
* .kg-back.kg-back-standalone just above, for consistency. */
/* 2026-09-27: "กลับหน้าหลัก" now sits beside the 🎨 customize button
* (moved off its old fixed bottom-right FAB spot) in one equal-width row,
* same pattern as thai-checkers-game's .tcg-btn-row — so both drop the
* old shrink-to-fit / fixed-position sizing in favor of flex:1. */
#kg-app .kg-home-btn-row { display: flex; gap: 10px; margin: 18px 0 0; }
#kg-app .kg-home-link,
#kg-app .kg-customize-toggle {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
background: #ffffff;
border: 1.5px solid #e7ddc9;
border-radius: 999px;
color: #2c2416;
font-size: 14px;
font-weight: 600;
padding: 10px 18px;
text-decoration: none;
box-shadow: var(--kg-shadow);
cursor: pointer;
}
#kg-app .kg-back {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: none; color: var(--kg-text);
font-size: 14px; padding: 6px 0; margin-bottom: 8px; cursor: pointer;
opacity: .8;
}
#kg-app .kg-back:hover { opacity: 1; }
/* Bottom-of-form back button on the pre-game setup/lobby screens only
* (vs-computer, pass-play, online, waiting room) — user request
* (2026-09-27): snug white pill (width fits its own text) with fixed
* ink text and rounded corners, instead of the plain-text link. The
* extra .kg-back-standalone class (added by backBtn() in game.js)
* keeps the in-table leave-table/toggle-stats buttons — plain
* .kg-back, written directly, not through backBtn() — on their
* original small inline look. game.js already moved this button to
* the end of each screen's markup (after the primary "start"/actions
* button), so no CSS reordering is needed here, only the restyle. */
#kg-app .kg-back.kg-back-standalone {
background: #ffffff; border: 1.5px solid #e7ddc9; border-radius: 999px;
color: #2c2416; opacity: 1; font-weight: 600;
padding: 10px 18px; margin-top: 14px; margin-bottom: 0;
box-shadow: var(--kg-shadow);
}
/* ---------- Mode select ---------- */
#kg-app .kg-mode-list { display: flex; flex-direction: column; gap: 12px; }
#kg-app .kg-mode-card {
display: flex; align-items: center; gap: 14px;
background: var(--kg-card); border: 1.5px solid #e7ddc9; border-radius: var(--kg-radius);
padding: 16px; cursor: pointer; text-align: left; width: 100%;
box-shadow: var(--kg-shadow); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
font: inherit;
/* Fixed ink, not --kg-text: this card is a white/cream box (still
* legible under any outside-box text color -- 2026-09-26 follow-up). */
color: #2c2416;
}
#kg-app .kg-mode-card:hover { transform: translateY(-2px); border-color: var(--kg-accent); box-shadow: 0 8px 22px rgba(20,20,10,.18); }
#kg-app .kg-mode-card .kg-mode-icon {
width: 46px; height: 46px; border-radius: 50%; flex: none;
display: flex; align-items: center; justify-content: center;
background: #ffffff; color: var(--kg-accent);
border: 1px solid #eee1c8; box-shadow: 0 2px 6px rgba(60,40,10,.10);
}
#kg-app .kg-mode-card .kg-mode-icon svg { width: 24px; height: 24px; }
/* Mode-select icons (2026-09-30): white line icon on a diagonal
* (top-left -> bottom-right) gradient disc, same in all card games.
* vs computer = blue-green, same device = yellow-orange, online = pink-purple. */
#kg-app .kg-mode-card .kg-mode-icon.kg-mode-icon--computer, #kg-app .kg-mode-card .kg-mode-icon.kg-mode-icon--phone, #kg-app .kg-mode-card .kg-mode-icon.kg-mode-icon--globe { color: #ffffff; border-color: transparent; }
#kg-app .kg-mode-card .kg-mode-icon.kg-mode-icon--computer { background: linear-gradient(135deg, #29b6f6 0%, #12c98b 100%); box-shadow: 0 3px 8px rgba(18,201,139,.35); }
#kg-app .kg-mode-card .kg-mode-icon.kg-mode-icon--phone { background: linear-gradient(135deg, #ffd23f 0%, #ff8a1f 100%); box-shadow: 0 3px 8px rgba(255,138,31,.35); }
#kg-app .kg-mode-card .kg-mode-icon.kg-mode-icon--globe { background: linear-gradient(135deg, #ff5fa2 0%, #8b5cf6 100%); box-shadow: 0 3px 8px rgba(139,92,246,.35); }
#kg-app .kg-mode-card .kg-mode-title { font-weight: 700; font-size: 16px; }
#kg-app .kg-mode-card .kg-mode-desc { font-size: 13px; color: var(--kg-muted); margin-top: 2px; }
/* ---------- Forms ---------- */
#kg-app .kg-field { margin-bottom: 14px; }
#kg-app .kg-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
#kg-app .kg-field input[type="text"],
#kg-app .kg-field select {
width: 100%; padding: 10px 12px; border: 1px solid #d9cdb6; border-radius: 8px;
/* Fixed dark ink, not the admin-configurable --kg-text (2026-09-26) --
* this sits on a solid white background, so it must stay legible even
* when the outside-box text color is set to something like white. */
font-size: 15px; background: #fff; color: #2c2416;
}
#kg-app .kg-field input[type="text"]:focus, #kg-app .kg-field select:focus { outline: 2px solid var(--kg-accent); }
#kg-app .kg-stepper { display: flex; align-items: center; gap: 12px; }
#kg-app .kg-stepper button {
width: 36px; height: 36px; border-radius: 50%; border: 1px solid #d9cdb6; background: #fff;
font-size: 18px; cursor: pointer;
}
#kg-app .kg-stepper .kg-stepper-val { font-size: 18px; font-weight: 700; min-width: 24px; text-align: center; }
#kg-app .kg-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 12px 16px; border-radius: 10px; border: 1.5px solid transparent;
background: var(--kg-accent); color: #241a02; font-weight: 700; font-size: 15px;
cursor: pointer; box-shadow: var(--kg-shadow);
transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, border-color .12s ease;
}
#kg-app .kg-btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
#kg-app .kg-btn:disabled { opacity: .5; cursor: not-allowed; }
#kg-app .kg-btn.kg-btn-secondary { background: #fff; border: 1.5px solid #d9cdb6; color: #2c2416; box-shadow: none; } /* fixed ink: white-background button, not the admin-configurable outside-box --kg-text */
#kg-app .kg-btn.kg-btn-secondary:hover:not(:disabled) { border-color: var(--kg-accent); filter: none; box-shadow: 0 4px 10px rgba(20,20,10,.10); }
#kg-app .kg-btn.kg-btn-danger { background: var(--kg-danger); color: #fff; }
#kg-app .kg-btn-row { display: flex; gap: 10px; margin-top: 10px; }
#kg-app .kg-btn-row .kg-btn { width: auto; flex: 1; }
#kg-app .kg-error { background: #fdecea; color: var(--kg-danger); border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-bottom: 12px; }
/* ---------- Lobby ---------- */
#kg-app .kg-room-code { text-align: center; margin: 6px 0 18px; }
#kg-app .kg-room-code .kg-code-value {
font-size: 34px; letter-spacing: 6px; font-weight: 800; background: var(--kg-card);
border: 2px dashed var(--kg-accent); border-radius: 12px; padding: 10px 14px; display: inline-block; cursor: pointer;
/* Fixed ink, not --kg-text: white/cream box (2026-09-26 follow-up). */
color: #2c2416;
}
/* var(--kg-text), not --kg-muted (2026-09-28 request): this sits on the
* app's own outside-box background like the header/back-link text, so it
* should follow the admin's "สีข้อความ" color the same way they do. */
#kg-app .kg-room-code .kg-code-hint { font-size: 12px; color: var(--kg-text); margin-top: 6px; }
#kg-app .kg-seat-list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
#kg-app .kg-seat-row {
display: flex; align-items: center; justify-content: space-between; background: var(--kg-card);
border: 1px solid #e7ddc9; border-radius: 10px; padding: 10px 14px;
/* Fixed ink, not --kg-text: white/cream box (2026-09-26 follow-up). */
color: #2c2416;
}
#kg-app .kg-seat-row .kg-seat-name { font-weight: 600; }
#kg-app .kg-seat-empty { color: var(--kg-muted); font-style: italic; }
/* ---------- Pass device interstitial ---------- */
#kg-app .kg-pass-device { text-align: center; padding: 50px 20px; }
#kg-app .kg-pass-device .kg-pass-icon { font-size: 44px; margin-bottom: 10px; }
#kg-app .kg-pass-device h2 { margin: 6px 0; }
#kg-app .kg-pass-device p { color: var(--kg-muted); margin-bottom: 22px; }
/* ---------- Table ---------- */
#kg-app .kg-table {
background: linear-gradient(180deg, var(--kg-felt), var(--kg-felt-dark));
border-radius: 18px; padding: 14px; color: #fff; box-shadow: var(--kg-shadow);
/* Own stacking context so the optional photo layer below can sit
* BEHIND the table's content (z-index:-1) but still above the felt
* color/gradient painted on this element. */
position: relative; isolation: isolate;
}
/* Admin-configured table photo (--kg-felt-image is set in game.js's
* applyTheme(): 'none' unless an image is configured and the player
* hasn't picked their own color). */
#kg-app .kg-table::before {
content: ''; position: absolute; inset: 0; z-index: -1;
border-radius: inherit; pointer-events: none;
background-image: var(--kg-felt-image, none);
background-size: cover; background-position: center; background-repeat: no-repeat;
}
#kg-app .kg-table-top {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px;
}
#kg-app .kg-round-info { display: flex; gap: 8px; flex-wrap: wrap; }
#kg-app .kg-pill {
background: rgba(255,255,255,.14); border-radius: 999px; padding: 4px 10px; font-size: 12px; white-space: nowrap;
}
#kg-app .kg-pill.kg-pill-dead { background: rgba(192,57,43,.35); }
#kg-app .kg-pill.kg-pill-joker { background: rgba(212,175,55,.35); }
#kg-app .kg-pill.kg-pill-mypairs { background: rgba(46,204,113,.28); font-weight: 700; }
#kg-app .kg-pill.kg-pill-waiting {
background: rgba(212,50,50,.85); font-weight: 700; color: #fff;
animation: kg-waiting-pulse 1.1s ease-in-out infinite;
}
/* ---------- Your-turn / timer / your-coins status bar ---------- */
/* Replaces the old separate turn-banner line + progress-bar timer +
* inline coin badge (2026-09-27 request): one low gray-overlay strip,
* split into 3 equal columns, sitting right above the hand. */
/* Narrowed to the width of a 5-card hand (the resting hand size) instead
* of stretching to #kg-app's full content width, same reasoning and
* same formula as .kg-hand-actions below — matches the user's explicit
* ask (2026-09-27) to bring ALL 5 buttons/readouts above the hand (this
* row's now-2 plus the action row's 2) in to that width. Down to 2
* columns (was 3): the "ตาของคุณ" column was removed entirely the same
* day — it never reliably reflected the real turn for this user across
* several attempted fixes (alpha-blend orange → solid orange → blinking
* white text), so rather than keep chasing it, it's just gone. */
#kg-app .kg-status-bar {
display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch;
background: rgba(0,0,0,.28); border-radius: 8px; margin: 8px auto 10px; overflow: hidden;
max-width: calc( 5 * var(--kg-card-w) + 4 * var(--kg-hand-gap) );
}
#kg-app .kg-status-col {
display: flex; align-items: center; justify-content: center; gap: 4px;
text-align: center; font-size: 12px; font-weight: 700; padding: 7px 4px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#kg-app .kg-status-col + .kg-status-col { border-left: 1px solid rgba(255,255,255,.15); }
/* The full "คุณมีเวลา 00:XX นาที" sentence (2026-09-27) is noticeably
* longer than the old bare 2-digit readout this column used to hold —
* let it wrap onto 2 lines and shrink slightly rather than truncating
* with an ellipsis like a plain .kg-status-col normally would. */
#kg-app .kg-status-col.kg-status-timer {
white-space: normal; overflow: visible; text-overflow: clip;
font-size: 11px; line-height: 1.3; gap: 3px;
}
#kg-app .kg-timer-digital {
/* Red at all times (2026-09-27 request, was gold) — only the blink
* itself is reserved for the last 10 seconds. font-family needs
* !important: the site-wide "#kg-app *:not(h1,h2,h3,h4,h5,p)" rule
* a few lines up the file also carries !important (it forces the
* admin's chosen "db" font almost everywhere inside the app), and
* without matching it here Digital-Dismay silently lost every time
* despite this selector otherwise being more specific — found live
* 2026-09-27 by inspecting the actual computed style/matched rules
* on game.mind2uspace.com, not something visible from the source
* alone. */
font-family: 'Digital-Dismay', monospace !important; font-size: 16px; letter-spacing: 1px;
font-variant-numeric: tabular-nums; color: #ff3b30; line-height: 1;
}
#kg-app .kg-timer-digital.kg-timer-warn { animation: kg-timer-blink .6s ease-in-out infinite; }
#kg-app .kg-waiting-note {
display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 999px;
background: rgba(212,50,50,.9); color: #fff; font-size: 11px; font-weight: 700;
animation: kg-waiting-pulse 1.1s ease-in-out infinite;
}
@keyframes kg-waiting-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .75; transform: scale(1.05); }
}
#kg-app .kg-opponents { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0; }
/* Redesigned 2026-09-27: one horizontal row per opponent (card-back fan,
* name, coins pinned to the far right) instead of a 3-line stack, so each
* box stays short and never wraps onto a second line. The exact "5 cards"
* count is never shown as a numeral (it's always 5 at rest) — a small fan
* of overlapping backs stands in for it instead. */
#kg-app .kg-opponent {
background: rgba(255,255,255,.1); border-radius: 10px; padding: 6px 10px; text-align: left;
position: relative; min-width: 0;
}
#kg-app .kg-opponent.kg-turn { outline: 2px solid var(--kg-accent); }
#kg-app .kg-opp-row { display: flex; align-items: center; gap: 6px; }
#kg-app .kg-opp-cardbacks { display: flex; align-items: center; flex: none; }
#kg-app .kg-opp-back {
width: 12px; height: 17px; border-radius: 3px; flex: none; display: inline-block;
box-shadow: 0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.25);
margin-left: -7px;
}
#kg-app .kg-opp-back:first-child { margin-left: 0; }
/* Same 4 admin-chosen card-back looks as the stock pile (.kg-cardback-*
* on .kg-pile-btn above) instead of a fixed stripe pattern of its own
* (2026-09-27 request) — cardBackClass() in game.js applies whichever of
* these 4 classes matches the site-wide "ธีมและรูปไพ่" setting to both. */
#kg-app .kg-opp-back.kg-cardback-stripes {
background: repeating-linear-gradient(45deg, var(--kg-cardback-color, var(--kg-accent)), var(--kg-cardback-color, var(--kg-accent)) 3px, #241a02 3px, #241a02 6px);
}
#kg-app .kg-opp-back.kg-cardback-dots {
background-color: #241a02;
background-image: radial-gradient(var(--kg-cardback-color, var(--kg-accent)) 32%, transparent 33%);
background-size: 6px 6px;
}
#kg-app .kg-opp-back.kg-cardback-solid { background: var(--kg-cardback-color, var(--kg-accent)); }
#kg-app .kg-opp-back.kg-cardback-image {
background-color: #241a02;
background-image: var(--kg-cardback-image, none);
background-size: cover; background-position: center;
}
#kg-app .kg-opponent .kg-opp-name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92px; }
#kg-app .kg-opponent .kg-opp-coins { font-size: 11px; opacity: .9; display: flex; align-items: center; margin-left: auto; padding-left: 10px; white-space: nowrap; flex: none; }
#kg-app .kg-opponent .kg-waiting-note { font-size: 13px; flex: none; margin: 0; animation: kg-waiting-pulse 1.1s ease-in-out infinite; }
#kg-app .kg-opponent .kg-opp-out { position: absolute; inset: 0; background: rgba(0,0,0,.55); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 11px; }
#kg-app .kg-opponent .kg-card { width: 30px; height: auto; font-size: 10px; box-shadow: none; cursor: default; }
#kg-app .kg-opponent .kg-card .kg-card-suit { font-size: 10px; }
/* ---------- Coins: a small drawn gold coin, reused as an icon next to
* every balance/pot amount, plus a bigger 3-coin "stack" for the pot. */
#kg-app .kg-coin {
position: relative;
display: inline-block; border-radius: 50%; flex: 0 0 auto;
background: radial-gradient(circle at 34% 28%, #fff7d6 0%, #f3d675 32%, var(--kg-accent) 62%, #93700f 100%);
border: 1px solid #7a5e0c;
box-shadow: 0 1px 3px rgba(0,0,0,.4), inset 0 -2px 2px rgba(0,0,0,.22), inset 0 1px 2px rgba(255,255,255,.6);
}
#kg-app .kg-coin-sm { width: 14px; height: 14px; }
#kg-app .kg-coin-md { width: 20px; height: 20px; }
#kg-app .kg-coin-lg { width: 34px; height: 34px; border-width: 2px; }
#kg-app .kg-coin-face {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 800; color: #5c4300; text-shadow: 0 1px 0 rgba(255,255,255,.55);
line-height: 1;
}
#kg-app .kg-coin-amount { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
#kg-app .kg-my-coins { display: inline-flex; margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--kg-muted); vertical-align: middle; }
/* Coin-stack graphic dropped 2026-09-27 — a plain number reads faster and
* takes less vertical room than the 3 drawn coins used to. */
#kg-app .kg-pot-display { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 0 12px; }
#kg-app .kg-pot-amount { font-size: 19px; font-weight: 800; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.4); }
#kg-app .kg-pot-label { font-size: 11px; opacity: .85; }
#kg-app .kg-win-amount { font-size: 17px; font-weight: 800; }
#kg-app .kg-piles { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 16px 0; }
#kg-app .kg-pile { text-align: center; position: relative; }
#kg-app .kg-pile-label { font-size: 11px; opacity: .85; margin-top: 6px; }
#kg-app .kg-pile-btn {
/* Same footprint as a real .kg-card (var(--kg-card-w) + the shared
* 329:500 aspect-ratio) so the stock pile, joker pile and discard
* pile all read as one same-sized row of cards. */
width: var(--kg-card-w); aspect-ratio: var(--kg-card-ratio); height: auto;
border-radius: 8px; border: 2px solid rgba(255,255,255,.5);
background: var(--kg-card); cursor: pointer; display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 800; box-shadow: var(--kg-shadow); position: relative;
}
#kg-app .kg-pile-btn:disabled { cursor: not-allowed; opacity: .55; }
#kg-app .kg-pile-btn.kg-stock-back { color: #fff; font-size: 12px; }
/* Card-back design is an admin-wide setting (see the "ธีมและรูปไพ่" admin
* screen / KG_Theme) — exactly one of these four modifier classes is
* applied alongside .kg-stock-back at render time, driven by
* --kg-cardback-color / --kg-cardback-image (set once at boot). */
#kg-app .kg-pile-btn.kg-cardback-stripes {
background: repeating-linear-gradient(45deg, var(--kg-cardback-color, var(--kg-accent)), var(--kg-cardback-color, var(--kg-accent)) 6px, #241a02 6px, #241a02 12px);
}
#kg-app .kg-pile-btn.kg-cardback-dots {
background-color: #241a02;
background-image: radial-gradient(var(--kg-cardback-color, var(--kg-accent)) 32%, transparent 33%);
background-size: 11px 11px;
}
#kg-app .kg-pile-btn.kg-cardback-solid { background: var(--kg-cardback-color, var(--kg-accent)); }
#kg-app .kg-pile-btn.kg-cardback-image {
background-color: #241a02;
background-image: var(--kg-cardback-image, none);
background-size: cover; background-position: center;
}
#kg-app .kg-pile-count {
position: absolute; bottom: -8px; right: -8px; background: #241a02; color: #fff; border-radius: 999px;
font-size: 11px; padding: 1px 6px;
}
#kg-app .kg-reveal-card { display: flex; flex-direction: column; align-items: center; margin: 4px 0 14px; }
#kg-app .kg-reveal-card .kg-card { transform: scale(.85); }
/* The joker-rank card flipped at the start of the round, shown face-up
* beside the draw pile for the whole round — informational only. */
#kg-app .kg-joker-pile-card { pointer-events: none; }
/* No width/height override here on purpose: inherit .kg-card's own
* width: var(--kg-card-w) / aspect-ratio sizing so the joker card
* matches the hand cards exactly, per the user's request. */
#kg-app .kg-joker-pile-card .kg-card {
cursor: default; box-shadow: var(--kg-shadow);
/* Blue, not the gold/accent color, to match the joker-rank blue used
* everywhere else in the UI (corner triangle, wild outline, badge). */
border: 2px solid #3498db;
}
/* Discard-pile top card: a .kg-pile-btn wrapper (for the click target /
* disabled state) around a real .kg-card face image (see cardHtml() in
* game.js) instead of .kg-pile-btn's own plain box — strip that box's
* own background/border/shadow/fixed-size so only the inner .kg-card
* shows, sized to match the joker-pile card beside it. */
#kg-app .kg-pile-btn.kg-discard-pile-card {
width: auto; height: auto; background: none; border: none; box-shadow: none; padding: 0;
}
/* The button is permanently :disabled (the pile isn't clickable), which
* used to fade the card to .55 opacity via the generic .kg-pile-btn:disabled
* rule. Keep it fully opaque; only dim it (3+ players, not my turn). */
#kg-app .kg-pile-btn.kg-discard-pile-card:disabled { opacity: 1; cursor: default; }
#kg-app .kg-pile-btn.kg-discard-pile-card.kg-discard-dim:disabled { opacity: .55; }
/* No width/height override here either, for the same reason as the
* joker pile card above: inherit .kg-card's var(--kg-card-w) sizing
* so the discard pile matches the hand cards exactly. */
/* "หยิบ" flag floated above the discard-pile card when it would complete
* a pair (2026-09-27 request: the blue card border alone was easy to
* miss) — reuses .kg-wild-flag's blue-pill look, just positioned
* absolutely since .kg-discard-pile-card is a single button with no
* flex-column wrap the way a hand card's flag has (.kg-pile-btn is
* already `position: relative`, see the base rule above). */
#kg-app .kg-pick-flag {
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
z-index: 2; pointer-events: none;
}
/* The card art itself sets cursor:default via .kg-not-clickable (it's
* not directly selectable the way a hand card is) — but when its parent
* .kg-pile-btn IS an active click target (drawing from stock/discard),
* that inner art was winning the hit-test and showing the wrong cursor.
* Force the pointing-hand cursor here whenever the button isn't disabled. */
#kg-app .kg-pile-btn:not(:disabled) .kg-card { cursor: pointer; }
#kg-app .kg-hand-area { margin-top: 8px; }
/* Always-visible 2-button row above the hand (2026-09-27 redesign,
* replaces the old "ไพ่ในมือคุณ" label that used to swap for a single
* discard button — the swap made the button easy to miss on some
* desktop setups since the row's shape never visibly changed). Both
* buttons keep the exact same layout at all times — gray/disabled by
* default, lighting up in their own color only once their action is
* actually available — so there's nothing to "not show up". */
/* Narrowed to the width of a 5-card hand (2026-09-27: first pass used 6
* cards/the post-draw max, but the user asked again for all 5
* buttons/readouts above the hand — this row's 2 plus .kg-status-bar's
* 3 — to match the RESTING 5-card hand width exactly, since that first
* pass still looked wider than the visible cards) instead of stretching
* to #kg-app's full content width like a block element normally would
* — on wide/desktop screens the hand row visually centers narrower than
* that (its cards don't stretch, just this row's two buttons did via
* flex:1). Same formula as .kg-status-bar above, kept in sync. */
#kg-app .kg-hand-actions {
display: flex; gap: 8px; margin: 0 auto 6px;
max-width: calc( 5 * var(--kg-card-w) + 4 * var(--kg-hand-gap) );
}
#kg-app .kg-hand-action-btn {
flex: 1; text-align: center; padding: 8px 4px; font-size: 13px; font-weight: 800;
border: none; border-radius: 6px; background: #5a5a5a; color: #d8d8d8;
cursor: not-allowed; line-height: 1.3;
}
#kg-app .kg-hand-action-btn:not(:disabled) { cursor: pointer !important; }
/* "รอน๊อค" is a status readout, not a real action — it never actually
* becomes clickable, it just lights up blue as a heads-up once 2 pairs
* are already complete (same alert the old top-of-table ⏳ pill used to
* give, just relocated here). */
#kg-app .kg-hand-waitknock.kg-active { background: #3498db; color: #fff; }
/* "ทิ้ง" lights up orange/black — the color scheme originally requested
* for it — the instant a card is selected during the discard phase. */
#kg-app .kg-hand-discard-btn.kg-active { background: #e67e22; color: #1a1200; }
/* Shown instead of the 2-button row for a player who timed out earlier
* this same round (removed from round.in_round server-side) but the
* round is still going for everyone else — 3+ player games only, since
* a 2-player timeout always ends the round outright. */
#kg-app .kg-fold-banner {
background: rgba(192,57,43,.35); color: #fff; text-align: center; font-size: 12px; font-weight: 700;
border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; line-height: 1.4;
}
#kg-app .kg-hand.kg-hand-folded { opacity: .45; pointer-events: none; }
#kg-app .kg-hand { display: flex; justify-content: center; align-items: flex-end; gap: var(--kg-hand-gap); flex-wrap: wrap; padding: 4px 0 10px; }
/* Each hand card sits in a small column so a joker flag can float above
* it; the whole column is what drag-to-reorder grabs. */
#kg-app .kg-hand-card-wrap {
display: flex; flex-direction: column; align-items: center; gap: 4px;
/* touch-action:none (was pan-y) — the hand row itself never needs to
* scroll, and pan-y was letting the browser's own touch-scroll
* handling compete with/beat our pointermove-based drag on phones,
* which is why grabbing a card to reorder it felt unreliable there. */
touch-action: none; user-select: none;
}
#kg-app .kg-hand-card-wrap.kg-dragging { z-index: 20; cursor: grabbing; }
#kg-app .kg-hand-card-wrap.kg-dragging .kg-card { box-shadow: 0 10px 18px rgba(0,0,0,.4); }
/* Joker-rank badge: blue (matches the joker outline/corner-mark color
* used everywhere else), white text. */
#kg-app .kg-wild-flag {
background: #3498db; color: #fff; font-size: 10px; font-weight: 800;
padding: 2px 8px; border-radius: 999px; line-height: 1.4; white-space: nowrap;
}
/* Dead-rank ("ขี้") badge — same shape as the joker badge above the hand
* card, red instead of blue (2026-09-27 request: show it the same way
* the joker card is shown, as text above the card). */
#kg-app .kg-dead-flag {
background: var(--kg-danger); color: #fff; font-size: 10px; font-weight: 800;
padding: 2px 8px; border-radius: 999px; line-height: 1.4; white-space: nowrap;
}
#kg-app .kg-wild-flag-spacer { visibility: hidden; }
/* The flag above already marks a joker card in your own hand — don't
* also stack the small corner badge (still used elsewhere, e.g. an
* opponent's revealed hand at showdown). */
#kg-app .kg-hand-card-wrap .kg-card.kg-wild::after { content: none; }
#kg-app .kg-card.kg-card-paired {
/* All card border/outline marks sit 1-2px clear of the card art
* itself (outline-offset) rather than flush against its edge, per
* explicit request — easier to read against busy card art and
* doesn't get clipped by .kg-card's own overflow:hidden (outlines
* always render outside the element's box regardless). Outline
* thinned 3px -> 1.5px 2026-09-27. */
outline: 1.5px solid #3498db; outline-offset: 2px; box-shadow: 0 6px 14px rgba(0,0,0,.3);
}
#kg-app .kg-card {
width: var(--kg-card-w); aspect-ratio: var(--kg-card-ratio); height: auto;
background: var(--kg-card);
/* 7px -> 3px (2026-09-27 request) turned out too square once seen live
* ("เหลี่ยมเกินไป") -- 5px is the mobile-default landing point (still
* flatter than the old 7px but no longer looking clipped-square), with
* an explicit ~8px desktop override below matching .kg-pile-btn's own
* corner radius, per the user's own reference point. */
border-radius: 5px; border: 1px solid #d9cdb6;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
font-weight: 800; font-size: 16px; box-shadow: 0 2px 6px rgba(0,0,0,.25); flex: 0 0 auto;
cursor: pointer; user-select: none; transition: transform .12s ease, box-shadow .12s ease;
position: relative; overflow: hidden;
-webkit-user-drag: none; user-drag: none; /* belt-and-suspenders alongside the : stop the browser's own native image drag from fighting the custom Pointer-Events drag on desktop mice */
}
#kg-app .kg-card.kg-card-red { color: var(--kg-card-red); }
#kg-app .kg-card.kg-card-black { color: var(--kg-card-black); }
/* A card with an admin-uploaded custom face image (see KG_Theme) fills
* the whole box with that image instead of the drawn rank+suit; the
* dead/wild corner badges and the paired blue outline still layer on top
* fine since they're just absolutely-positioned siblings/pseudo-elements. */
#kg-app .kg-card.kg-card-imaged { padding: 0; overflow: hidden; }
#kg-app .kg-card-face-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; -webkit-user-drag: none; user-drag: none; pointer-events: none; }
/* The theme's site-wide "hover to zoom" image CSS targets the
* itself, not the .kg-card div around it, so the translateY override
* below (which only touches .kg-card) never reached it — the photo kept
* zooming in place on hover/click regardless. Force it to never scale,
* on its own or through any ancestor :hover/:focus rule the theme adds. */
#kg-app .kg-card-face-img,
#kg-app .kg-card-face-img:hover,
#kg-app .kg-card:hover .kg-card-face-img,
#kg-app .kg-card:focus .kg-card-face-img,
#kg-app a:hover .kg-card-face-img { transform: none !important; }
#kg-app .kg-card .kg-card-suit { font-size: 18px; }
/* !important here because the WordPress theme's own site-wide button/
* card hover CSS (a generic transform:scale(...) on hover) otherwise
* wins and the card visibly enlarges instead of lifting — force the
* slide-up behavior regardless of what the theme sets. */
#kg-app .kg-card.kg-selectable:hover { transform: translateY(-6px) !important; }
/* Selected cards always lift by exactly the same amount. The extra
* :hover selector matters: on mobile a tapped card keeps a "sticky" :hover
* state, and .kg-selectable:hover (-6px, higher specificity) used to
* beat .kg-selected (-10px), so two selected cards sat at different
* heights (2026-09-30 fix). Outline is 2px. */
#kg-app .kg-card.kg-selected,
#kg-app .kg-card.kg-selectable.kg-selected,
#kg-app .kg-card.kg-selectable.kg-selected:hover { transform: translateY(-10px) !important; box-shadow: 0 6px 14px rgba(0,0,0,.4); outline: 2px solid var(--kg-accent); outline-offset: 2px; }
#kg-app .kg-card.kg-not-clickable { cursor: default; }
#kg-app .kg-pile-btn:not(:disabled):hover { transform: translateY(-4px) !important; }
#kg-app .kg-pile-btn:not(:disabled):active { transform: translateY(-1px) !important; }
/* Cloned card used purely for the fly-between-piles animation (see
* flyCard() in game.js) — always fixed-positioned and never intercepts
* clicks; sized/placed entirely via inline styles set at creation time. */
.kg-flying-card { position: fixed; pointer-events: none; z-index: 999; }
.kg-flying-card .kg-card { width: 100%; height: 100%; cursor: default; }
/* Joker-rank ("โจ๊ก") corner mark — a small solid triangle cut into the
* card's own top-right corner. Sized in % of the card box (not a fixed
* px), so it stays proportional at every --kg-card-w size from the
* smallest phone up; .kg-card's own overflow:hidden (see
* .kg-card-imaged / the base rule below) clips it to the card's rounded
* corner automatically. The matching dead-rank ("ขี้") red triangle was
* removed 2026-09-27 — the "ขี้" text flag shown above the card already
* says so, the corner mark was redundant. */
#kg-app .kg-card.kg-wild::after {
content: ""; position: absolute; top: 0; right: 0; width: 28%; height: 28%;
background: #3498db; clip-path: polygon(0 0, 100% 0, 100% 100%);
}
/* On top of the corner triangle above, a full blue border around a
* joker-rank card in your own hand — easier to spot at a glance than
* the small corner mark alone. */
#kg-app .kg-card.kg-wild {
outline: 2px solid #3498db; outline-offset: 2px;
}
#kg-app .kg-card-back {
background: repeating-linear-gradient(45deg, var(--kg-cardback-color, var(--kg-accent)), var(--kg-cardback-color, var(--kg-accent)) 6px, #241a02 6px, #241a02 12px);
}
/* The discard-pile top card, when it would complete a pair for me right
* now: a blue border (offset, like every other card mark) that pulses
* gently rather than sitting static, so it draws the eye without being
* obnoxious about it. */
#kg-app .kg-card.kg-card-pairable {
outline: 2px solid #3498db; outline-offset: 2px;
animation: kg-pairable-pulse 1.4s ease-in-out infinite;
}
@keyframes kg-pairable-pulse {
0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 0 0 0 rgba(52,152,219,.55); }
50% { box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 0 0 5px rgba(52,152,219,0); }
}
/* Brief "just arrived" pop-in for a card that was just drawn into my
* hand or just landed on the discard pile — gives a change that would
* otherwise appear instantly (a full-state re-render, not an
* incremental DOM patch) something visible to actually watch happen. */
#kg-app .kg-card.kg-card-arrived {
animation: kg-card-pop-in .38s ease;
}
@keyframes kg-card-pop-in {
0% { opacity: 0; transform: translateY(16px) scale(.75); }
60% { opacity: 1; transform: translateY(-3px) scale(1.05); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Small pointer + label nudging an idle player toward the stock pile
* once their turn clock has run past the halfway point with nothing
* useful on the discard — appended/removed directly by game.js's
* updateDrawHintDom(), not part of the templated pile markup. */
#kg-app .kg-draw-hint-pointer {
position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
margin-bottom: 4px; white-space: nowrap; font-size: 11px; font-weight: 700;
color: #fff; background: var(--kg-danger); padding: 2px 8px; border-radius: 999px;
box-shadow: 0 2px 6px rgba(0,0,0,.3);
animation: kg-draw-hint-bounce 1s ease-in-out infinite;
}
#kg-app .kg-draw-hint-pointer::after {
content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
border: 5px solid transparent; border-top-color: var(--kg-danger);
}
@keyframes kg-draw-hint-bounce {
0%, 100% { margin-bottom: 4px; }
50% { margin-bottom: 9px; }
}
#kg-app .kg-turn-banner { text-align: center; font-weight: 700; margin: 6px 0 10px; font-size: 15px; }
#kg-app .kg-timer { text-align: center; font-size: 13px; opacity: .9; margin-bottom: 10px; }
#kg-app .kg-timer .kg-timer-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.2); overflow: hidden; margin-top: 4px; }
#kg-app .kg-timer .kg-timer-fill { height: 100%; background: var(--kg-danger); transition: width 1s linear; }
/* Close to running out (last 10s, toggled from game.js's tick()): the
* line itself was already red, so the remaining cue is a gentle blink
* rather than another color swap. */
#kg-app .kg-timer.kg-timer-warn .kg-timer-fill { animation: kg-timer-blink .6s ease-in-out infinite; }
@keyframes kg-timer-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
#kg-app .kg-actions { display: flex; gap: 10px; margin-top: 12px; }
#kg-app .kg-actions .kg-btn { flex: 1; }
#kg-app .kg-log { max-height: 90px; overflow-y: auto; font-size: 12px; opacity: .85; margin-top: 12px; background: rgba(0,0,0,.15); border-radius: 8px; padding: 6px 10px; }
#kg-app .kg-log div { padding: 2px 0; }
/* ---------- Round-over overlay ---------- */
/* A fixed, center-of-screen overlay (rather than an inline card tucked
below the table) so the round result is unmissable the instant it
happens, like a real showdown announcement. */
#kg-app .kg-round-over {
position: fixed; inset: 0; z-index: 60;
display: flex; align-items: center; justify-content: center;
background: rgba(10, 20, 14, .72);
padding: 20px; box-sizing: border-box;
animation: kg-fade-in .18s ease;
}
#kg-app .kg-round-over-card {
/* Fixed ink, not --kg-text: this is a white card, always legible
* regardless of the admin's outside-box text color choice. */
background: var(--kg-card); color: #2c2416; border-radius: var(--kg-radius);
padding: 22px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.4);
text-align: center; max-width: 360px; width: 100%; max-height: 88vh; overflow-y: auto;
animation: kg-winner-pop .22s ease;
}
/* This overlay sits outside #kg-app's own .kg-screen wrapper (see
* render() in game.js), so the screen-level .kg-no-anim rule doesn't
* reach it. Every online poll while a round is over rebuilds this element
* fresh, which replayed the fade-in/pop animation on each one — game.js
* adds this same class here once the overlay has already played it once
* for the current round, so it stops "blinking" every ~2.5s while players
* decide who presses รอบต่อไป (2026-09-28 report). */
#kg-app .kg-round-over.kg-no-anim,
#kg-app .kg-round-over.kg-no-anim .kg-round-over-card { animation: none; }
#kg-app .kg-winner-banner { margin: 0 0 6px; font-size: 24px; font-weight: 800; line-height: 1.25; }
/* Shown only to the specific player this round-over is a timeout loss
* for (reason === 'last_standing' and they're not the winner) — sits
* above the usual winner banner so it's the first thing they read. */
#kg-app .kg-foul-badge {
display: inline-block; background: var(--kg-danger); color: #fff; font-size: 12px; font-weight: 800;
border-radius: 999px; padding: 4px 14px; margin-bottom: 10px;
}
#kg-app .kg-round-over p { margin: 2px 0; color: var(--kg-muted); }
/* The actual cards the round was won with — sized down from the normal
* responsive --kg-card-w (which assumes the full table width, not a
* ~320px modal) so a 5-6 card meld still fits comfortably. */
/* align-items: flex-end (2026-09-27) — a joker card's real "โจ๊ก" flag is
* taller than a plain card's invisible spacer flag (real text vs an empty
* box), so without this every card row would start flush with its own
* flag's top and the joker's card would sit visibly lower than its
* neighbors. Bottom-aligning the wraps instead means the CARDS always line
* up regardless of flag height — the same fix already used for the
* in-hand row (see #kg-app .kg-hand { align-items: flex-end }). */
/* "น็อคสี ข้าวหลาม" / "เรียง 3 4 5 6 7" / "ตอง 3" — explains WHICH
* สี/เรียง/ตอง an instant-knock hand actually is (2026-09-28 request),
* sits between the winner banner and the revealed cards. */
#kg-app .kg-hand-type-detail {
font-size: 14px; font-weight: 700; color: var(--kg-accent, #b8860b);
margin: 4px 0 0;
}
#kg-app .kg-meld-row, #kg-app .kg-meld-groups {
display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: 6px; margin: 12px 0;
}
#kg-app .kg-meld-groups { gap: 12px; }
#kg-app .kg-meld-pair-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#kg-app .kg-meld-pair { display: flex; gap: 3px; align-items: flex-end; }
#kg-app .kg-meld-card-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
/* "หยิบได้ / จั่วได้คู่ / จั่วได้โจ๊ก" — shown only above the ONE pair the
* deciding draw actually completed (2026-09-27 request); green so it reads
* distinctly from the blue joker flag it can sit next to. */
#kg-app .kg-pair-summary {
background: #2ecc71; color: #fff; font-size: 9px; font-weight: 800;
padding: 1px 6px; border-radius: 999px; line-height: 1.4; white-space: nowrap;
}
#kg-app .kg-meld-row .kg-card, #kg-app .kg-meld-pair .kg-card {
width: 44px; height: auto; cursor: default; box-shadow: 0 2px 5px rgba(0,0,0,.3);
/* Less-rounded than a normal hand card (7px), per explicit request. */
border-radius: 1px;
}
/* A knock-reveal joker card gets the same blue "โจ๊ก" flag shown above it
* during play (2026-09-27 request), white-on-blue same as during play. */
#kg-app .kg-meld-card-wrap .kg-wild-flag { font-size: 9px; padding: 1px 6px; }
#kg-app .kg-standings { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; text-align: left; }
#kg-app .kg-standing-row { display: flex; justify-content: space-between; font-size: 14px; background: #faf6ef; border-radius: 8px; padding: 6px 10px; }
#kg-app .kg-standing-row.kg-winner-row { background: #fff6df; font-weight: 700; }
@keyframes kg-winner-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
/* ---------- Stats ---------- */
/* Fixed ink, not --kg-text: white/cream box (2026-09-26 follow-up). */
#kg-app .kg-stats-panel { background: var(--kg-card); color: #2c2416; border-radius: var(--kg-radius); padding: 16px; box-shadow: var(--kg-shadow); margin-top: 14px; }
#kg-app .kg-stats-panel h3 { margin-top: 0; }
#kg-app .kg-stats-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f0e9d8; font-size: 14px; }
#kg-app .kg-stats-row:last-child { border-bottom: none; }
#kg-app .kg-net-pos { color: var(--kg-success); font-weight: 700; }
#kg-app .kg-net-neg { color: var(--kg-danger); font-weight: 700; }
/* ---------- Customize overlay ---------- */
/* .kg-customize-toggle's own look now lives with .kg-home-link above
* (they're a matched pair in the same row) — this button moved off its
* old fixed bottom-right FAB spot and now only ever renders on the mode-
* select ("หน้าแรก") screen, per user request. */
#kg-app .kg-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 30; padding: 18px;
}
#kg-app .kg-overlay.kg-open { display: flex; }
#kg-app .kg-overlay-panel {
background: var(--kg-bg); width: 100%; max-width: 560px; border-radius: 18px; padding: 18px; max-height: 80vh; overflow-y: auto;
}
/* Panel sits on the light --kg-bg card, not the app's own outside-box
* background, so its heading/labels use a fixed dark ink color instead
* of the admin-adjustable --kg-text (same pattern as .kg-preset-active
* above) — otherwise a light theme color can make this text unreadable. */
#kg-app .kg-overlay-panel h3 { margin-top: 0; color: #2c2416; }
#kg-app .kg-preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
#kg-app .kg-preset-swatch { height: 44px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
#kg-app .kg-preset-swatch.kg-active { border-color: #2c2416; } /* fixed: swatch sits on the light overlay panel, not the admin outside-box text color */
/* Table-photo choices in the customize panel: square thumbnails (enough
* of the texture shows), 5 to a row. */
#kg-app .kg-bg-label { color: #2c2416; margin-top: 6px; }
#kg-app .kg-bg-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 8px 0 12px; }
#kg-app .kg-bg-swatch { aspect-ratio: 1 / 1; border-radius: 8px; border: 2px solid transparent; cursor: pointer; background-size: cover; background-position: center; background-color: #ddd; }
#kg-app .kg-bg-swatch.kg-active { border-color: #2c2416; box-shadow: 0 0 0 2px #fff inset; }
#kg-app .kg-color-row { display: flex; align-items: center; justify-content: space-between; margin: 10px 0; color: #2c2416; }
#kg-app .kg-overlay-actions { display: flex; gap: 10px; margin-top: 12px; }
#kg-app .kg-overlay-actions .kg-btn { flex: 1; width: auto; margin: 0; }
#kg-app .kg-color-row input[type="color"] { width: 46px; height: 34px; border: none; background: none; cursor: pointer; }
/* ---------- Shared room chat (2026-09-28 request) ---------- */
/* .kg-chat-root sits OUTSIDE #kg-app (a sibling — see game.js) so its
* own never gets torn down by #kg-app's frequent full innerHTML
* rebuilds. Being outside #kg-app also means it does NOT inherit that
* element's CSS custom properties (--kg-accent, --kg-text, the admin
* font, etc.) or its `#kg-app *` font-family rule above, so everything
* here uses fixed colors/fonts instead — same "always legible regardless
* of the admin's theme" reasoning already used for .kg-round-over-card
* and .kg-stats-panel. */
.kg-chat-root, .kg-chat-root * {
font-family: 'db', 'SF Thonburi', 'Sarabun', 'Noto Sans Thai', sans-serif;
box-sizing: border-box;
}
.kg-chat-root { position: fixed; right: 16px; bottom: 16px; z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.kg-chat-fab {
/* Gradient speech-bubble fab with 3 white dots inside (2026-09-28
* follow-up request, replacing the plain white/3-dot fab), kept
* gently glow burst via the chat-glow animation
* animation below (2026-09-28 follow-up: swapped from an earlier
* side-to-side wiggle to this softer float-updown motion, per the
* user's own float-anim snippet). */
position: relative; width: 56px; height: 52px; border: none; cursor: pointer;
background: transparent; padding: 0; display: flex; align-items: flex-start; justify-content: center;
isolation: isolate; overflow: visible;
}
.kg-chat-fab-icon { position: relative; z-index: 1; display: block; width: 52px; height: 47px; }
.kg-chat-fab-icon svg { width: 100%; height: 100%; display: block; }
/* Orange glow burst instead of the old up/down bob (no layout/transform
* jitter on the button itself): every 5s a soft orange light spreads out
* from behind the bubble and fades, then stays still until the next
* burst. Only opacity/transform are animated, so it stays on the
* compositor and never stutters. */
.kg-chat-fab::before,
.kg-chat-fab::after {
content: ""; position: absolute; left: 50%; top: 45%; width: 56px; height: 56px;
margin: -28px 0 0 -28px; border-radius: 50%; pointer-events: none; z-index: 0;
background: radial-gradient(circle, rgba(255,150,30,.85) 0%, rgba(255,122,0,.45) 40%, rgba(255,122,0,0) 70%);
opacity: 0; transform: scale(.7); will-change: transform, opacity;
animation: kg-chat-glow 5s ease-out infinite;
}
.kg-chat-fab::after { animation-delay: .35s; }
@keyframes kg-chat-glow {
0% { opacity: 0; transform: scale(.7); }
6% { opacity: .9; transform: scale(1.1); }
26% { opacity: 0; transform: scale(2.8); }
100% { opacity: 0; transform: scale(2.8); }
}
@media (prefers-reduced-motion: reduce) {
.kg-chat-fab::before, .kg-chat-fab::after { animation: none; opacity: 0; }
}
/* Reddish-orange circle with a black number (2026-09-28 follow-up
* request, replacing the previous plain black dot). */
.kg-chat-badge {
position: absolute; top: -2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px;
background: #ff5a36; color: #000; font-size: 11px; font-weight: 800; line-height: 18px;
border-radius: 999px; text-align: center; box-shadow: 0 0 0 2px #fff;
}
.kg-chat-panel {
width: 300px; max-width: calc(100vw - 32px); height: 380px; max-height: 60vh;
background: #fff; color: #2c2416; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.35);
display: flex; flex-direction: column; overflow: hidden;
}
.kg-chat-header {
display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
background: #2c2416; color: #fff; font-weight: 700; font-size: 14px;
}
/* Down-pointing triangle "▼" (2026-09-28 follow-up request, replacing the
* "×" close mark) — meant to read as "collapse" rather than "close". */
.kg-chat-close { background: none; border: none; color: #fff; font-size: 12px; line-height: 1; cursor: pointer; padding: 0 4px; }
.kg-chat-messages { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.kg-chat-empty { color: #9a8f7a; font-size: 13px; text-align: center; margin-top: 20px; }
.kg-chat-msg { max-width: 82%; background: #f3ede0; border-radius: 10px; padding: 6px 10px; align-self: flex-start; }
.kg-chat-msg-mine { background: #fff1c4; align-self: flex-end; }
.kg-chat-msg-name { font-size: 11px; font-weight: 800; color: #7a6f5c; margin-bottom: 2px; }
.kg-chat-msg-text { font-size: 14px; word-break: break-word; white-space: pre-wrap; }
.kg-chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #eee2cc; }
.kg-chat-input {
/* font-size MUST be >= 16px (2026-09-28 fix) — below that, iOS Safari
* (and some Android browsers) auto-zoom the whole page in the moment
* this field gets focus, which read as "the chat box suddenly gets
* huge" on a phone. 16px is the actual threshold; it can't be worked
* around with a viewport meta tweak without disabling pinch-zoom
* sitewide, so the fix has to be this field's own font-size. */
flex: 1; min-width: 0; border: 1px solid #e0d6bd; border-radius: 999px; padding: 8px 12px; font-size: 16px; color: #2c2416; background: #fff;
}
/* No color fill while typing (2026-09-28 follow-up request reverting the
* previous orange-fill focus state) — just a plain neutral border. */
.kg-chat-input:focus { outline: none; border-color: #c7bb9e; }
.kg-chat-send {
border: none; border-radius: 999px; padding: 8px 16px; background: #ffb600; color: #fff; font-weight: normal; font-size: 14px; cursor: pointer;
}
/* Orange-yellow gradient fill on hover, and a slight shrink on press
* (2026-09-28 follow-up request). */
.kg-chat-send:hover { background: linear-gradient(135deg, #ffd400, #ff7a00); }
.kg-chat-send:active { transform: scale(.97); }
@media (max-width: 1023px) {
.kg-chat-root { right: 12px; bottom: 12px; }
.kg-chat-panel { width: calc(100vw - 24px); height: 50vh; }
}
/* No fixed-breakpoint .kg-card size override needed any more — the
* responsive --kg-card-w (see the #kg-app custom-property block near
* the top) already shrinks a 6-card hand to fit any phone width, down
* to --kg-card-w-min, while keeping the exact 329:500 photo aspect
* ratio intact at every size. */
/* On mobile (below the desktop breakpoint below), no left/right padding
* on the outer container -- user-requested 2026-09-26, same change as
* the sibling thai-checkers-game/atari-go-game/uno-game/domino-game
* plugins. Only horizontal padding is dropped; top/bottom (16px) is
* untouched. */
@media (max-width: 1023px) {
#kg-app { padding-left: 0; padding-right: 0; }
}
/* ---------- Mobile table enlargement (2026-09-27 request) ----------
* On phones: make the joker/stock/discard piles noticeably bigger (near
* full width), let the resting/post-draw hand wrap onto 2 rows of BIGGER
* cards (3 on top, 2 or 3 below) instead of shrinking all 5-6 down to fit
* one row, tighten the felt's own inner padding to ~10px, go full-bleed
* (no page background visible) while a round is on screen, and — for a
* 2-player game specifically — give the single opponent's card-back row
* more room so their count (5 or 6) reads at a glance. Sized with simple
* vw-based clamp()s rather than the exact padding-subtracting formula the
* hand-card width normally uses above (which solves for a specific
* on-screen width to just barely avoid ever wrapping) — here wrapping is
* the whole point, so an approximate size that's comfortably safe against
* overflow matters more than an exact fit; treat these as a first-pass
* calibration to refine after seeing it live. Desktop (>=1024px, the
* block below) is completely untouched. */
@media (max-width: 1023px) {
#kg-app {
/* 6-per-row -> 3-per-row: solving for 3 cards instead of 6 is what
* actually forces the wrap — .kg-hand already has flex-wrap:wrap,
* it just never had a reason to use it before now that 6 cards
* were deliberately sized to always fit on one line. */
/* 80% (2026-09-27 first follow-up) -> 90% of THAT again (second
* follow-up, same day): 58/23vw/88px * .9, rounded. Still the same
* 3-per-row wrap behaviour throughout. */
--kg-card-w: clamp( 52px, 21vw, 79px );
padding-top: 10px; padding-bottom: 10px;
}
/* Edge margin widened 10px -> 15px left/right (2026-09-27 second
* follow-up: 10px still read as too tight once seen live), top/bottom
* kept at 10px. */
#kg-app .kg-table { padding: 10px 15px; }
/* Pot ("เงิน 40 เหรียญ" / "เงินกองกลาง"): the amount and its label sat on
* 2 stacked lines (desktop's own default), which read as unnecessarily
* tall on a phone — per explicit request (2026-09-27 second follow-up)
* put them on one line instead. */
#kg-app .kg-pot-display { flex-direction: row; gap: 6px; margin: 4px 0 10px; }
/* The header row ("ย้อนกลับ" / "คลิกดูสถิติ") lives outside .kg-table,
* directly in #kg-app, so once the table screen goes full-bleed to the
* true viewport edge (.kg-on-table below) it had no side inset of its
* own and its text clipped against the screen edge. A small side
* padding here (only while .kg-on-table is active, so the lobby/setup
* screens keep their existing look) keeps the buttons' text clear of
* the edge without touching the buttons themselves. Matches .kg-table's
* own 15px side inset above. */
#kg-app.kg-on-table .kg-header { padding: 0 15px; }
/* The 4 controls (time / coins / รอน๊อค / ทิ้ง) were previously
* width-matched to the hand's own (narrow, 3-card-per-row) width, which
* read as visually cramped/small on a full phone screen — per explicit
* request (2026-09-27 second follow-up) they now span the table's full
* available width instead. */
#kg-app .kg-hand-actions,
#kg-app .kg-status-bar {
max-width: 100%;
}
/* Joker / stock / discard piles: their own bigger width (a separate
* var so this doesn't also feed back into the hand-card formula
* above). */
#kg-app .kg-piles { gap: 10px; }
#kg-app .kg-piles .kg-pile-btn,
#kg-app .kg-joker-pile-card .kg-card {
/* ~80% of the first-pass 88/27vw/140px calibration (2026-09-27
* follow-up), matching the hand-card scale-down above. */
width: clamp( 70px, 22vw, 112px );
}
/* Full-bleed felt board while the table screen is up (see the
* kg-on-table class toggle in game.js's render()) — width:100vw with
* matching negative auto-margins is the standard trick for breaking a
* centered, padded element out to the true viewport edge regardless of
* its own/its ancestors' padding; it only assumes nothing up the
* ancestor chain sets overflow-x:hidden (which would clip it back). */
#kg-app.kg-on-table {
max-width: 100vw; width: 100vw;
margin-left: calc( 50% - 50vw ); margin-right: calc( 50% - 50vw );
border-radius: 0;
}
#kg-app.kg-on-table .kg-table { border-radius: 0; min-height: calc( 100vh - 20px ); }
/* Heads-up (exactly 1 opponent — see the kg-heads-up class toggle in
* game.js) opponent row: bigger card-back fan + name text. Previously
* stretched edge-to-edge via width:100% + a negative margin matching
* .kg-table's own padding, which (2026-09-27 second follow-up) read as
* sitting flush against the true screen edge once the felt went
* full-bleed — too tight. Reverted to a centered pill (relies on
* .kg-opponents' own `justify-content: center`, unchanged above) that
* keeps clear of the edge, still enlarged so the card count reads at a
* glance. */
#kg-app.kg-heads-up .kg-opponents { margin: 0 0 10px; }
#kg-app.kg-heads-up .kg-opponent { width: 80vw !important; min-width: 80vw !important; max-width: 80vw !important; flex: 0 0 80vw !important; box-sizing: border-box !important; border-radius: 15px; padding: 11px 20px; }
#kg-app.kg-heads-up .kg-opp-row { width: 100% !important; }
#kg-app.kg-heads-up .kg-opp-row { gap: 7px; }
#kg-app.kg-heads-up .kg-opp-back { width: 24px; height: 34px; margin-left: -13px; }
#kg-app.kg-heads-up .kg-opponent .kg-opp-name { font-size: 16.5px; max-width: none; }
#kg-app.kg-heads-up .kg-opponent .kg-opp-coins { font-size: 12px; padding-left: 11px; }
}
/* ---------- Desktop (>=1024px): wider table + larger cards/text ----------
* Requested 2026-09-25: on screens wide enough to be "a computer" (not a
* tablet/phone), let the table grow from the mobile 560px cap to 1000px
* and scale up the game's visual elements (card art, headers, room code,
* coins, buttons) to fill that space instead of just adding side padding.
* Everything below the breakpoint (all phones, and portrait tablets up to
* 1023px) is completely untouched — the mobile-first rules above still
* apply unchanged. */
@media (min-width: 1024px) {
#kg-app {
/* Re-derive the responsive card width against the new 1000px cap
* (was 560px) and raise its ceiling so a 6-card hand actually
* grows to fill the wider table instead of hitting the old
* 78px max immediately. */
--kg-hand-gap: 10px;
--kg-card-w-max: 108px;
--kg-card-w: clamp(
var(--kg-card-w-min),
calc((min(1000px, 100vw) - 48px - 5 * var(--kg-hand-gap)) / 6),
var(--kg-card-w-max)
);
max-width: 1000px;
padding: 24px;
}
#kg-app .kg-logo img { width: 260px; }
#kg-app .kg-header h1, #kg-app .kg-header h2 { font-size: 32px; }
#kg-app .kg-header p { font-size: 16px; }
/* Desktop-only corner radius (2026-09-27 follow-up): a card looked too
* square at the mobile-default 5px once seen on a bigger card at
* desktop's larger --kg-card-w -- 8px matches .kg-pile-btn's own
* corner radius, the user's own reference point ("ดูไพ่กองจั่วเป็น
* ตัวอย่าง"). Mobile keeps the smaller 5px set on .kg-card above. */
#kg-app .kg-card { border-radius: 8px; }
#kg-app .kg-mode-card { padding: 20px; }
#kg-app .kg-mode-card .kg-mode-icon { width: 56px; height: 56px; }
#kg-app .kg-mode-card .kg-mode-icon svg { width: 28px; height: 28px; }
#kg-app .kg-mode-card .kg-mode-title { font-size: 18px; }
#kg-app .kg-mode-card .kg-mode-desc { font-size: 14px; }
#kg-app .kg-room-code .kg-code-value { font-size: 42px; letter-spacing: 8px; padding: 14px 20px; }
#kg-app .kg-table { padding: 20px; }
#kg-app .kg-opponent { min-width: 96px; padding: 8px 14px; }
#kg-app .kg-opponent .kg-opp-name { font-size: 14px; max-width: 140px; }
#kg-app .kg-opp-back { width: 15px; height: 21px; }
#kg-app .kg-opponent .kg-card { width: 36px; }
#kg-app .kg-pot-amount { font-size: 24px; }
#kg-app .kg-coin-lg { width: 42px; height: 42px; }
#kg-app .kg-coin-md { width: 24px; height: 24px; }
#kg-app .kg-status-col { font-size: 14px; padding: 8px 6px; }
#kg-app .kg-timer-digital { font-size: 20px; }
#kg-app .kg-btn { font-size: 17px; padding: 14px 18px; }
#kg-app .kg-winner-banner { font-size: 28px; }
#kg-app .kg-round-over-card { max-width: 440px; }
#kg-app .kg-meld-row .kg-card, #kg-app .kg-meld-pair .kg-card { width: 56px; }
#kg-app .kg-overlay-panel { max-width: 640px; }
}
/* ทิ้ง — orange-yellow gradient + pulsing glow when a card is selected */
#kg-app .kg-hand-discard-btn.kg-active {
background: linear-gradient(135deg, #ffd400, #ff8a00); color: #3a2000;
animation: kg-discard-glow 1.1s ease-in-out infinite;
}
@keyframes kg-discard-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,209,102,.6); }
50% { box-shadow: 0 0 0 7px rgba(255,209,102,0), 0 0 12px 2px rgba(255,170,40,.55); }
}
/* กองจั่ว — three back cards fanned slightly behind, like a big deck */
#kg-app .kg-pile-btn.kg-stock-back {
overflow: visible;
box-shadow:
3px 3px 0 -1px rgba(255,255,255,.85), 3px 3px 0 0 rgba(0,0,0,.35),
6px 6px 0 -1px rgba(255,255,255,.7), 6px 6px 0 0 rgba(0,0,0,.3),
0 8px 14px rgba(0,0,0,.4);
}
/* v1.9.2 - revealed cards on the knock screen: rounder, real-card corners */
#kg-app .kg-meld-row .kg-card, #kg-app .kg-meld-pair .kg-card { border-radius: 5px; }
/* ===== แคง (Kang) additions ===== */
/* แคง — red-orange while it can be declared (start of my turn) */
#kg-app .kg-hand-waitknock.kg-active { background: linear-gradient(135deg, #ff5a36, #d63a1a); color: #fff; }
/* ไหล — blue while cards matching the previous discard are selected */
#kg-app .kg-hand-lai-btn.kg-active { background: linear-gradient(135deg, #4aa8ff, #2a6fdb); color: #fff; }
#kg-app .kg-score-chip {
width: fit-content; margin: 0 auto 6px; padding: 3px 12px; border-radius: 999px;
background: rgba(0,0,0,.45); color: #fff; font-size: 13px; font-weight: 800;
}
/* Round-over reveal: every hand with its total, winner highlighted */
#kg-app .kg-showdown { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; text-align: left; }
#kg-app .kg-showdown-row { padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.06); }
#kg-app .kg-showdown-row.kg-showdown-win { background: rgba(255,182,0,.22); outline: 1.5px solid #ffb600; }
#kg-app .kg-showdown-head { display: flex; justify-content: space-between; font-weight: 800; font-size: 14px; margin-bottom: 4px; }
#kg-app .kg-showdown-cards { display: flex; gap: 3px; flex-wrap: wrap; }
#kg-app .kg-showdown-cards .kg-card { width: 52px; border-radius: 4px; cursor: default; }
#kg-app .kg-showdown-empty { font-size: 13px; opacity: .7; }
/* ---------- 2-player: opponent box + card-back fan +40% (2026-09-29) ----------
* Heads-up only (kg-heads-up class, game.js). Phones and desktop alike. */
#kg-app.kg-heads-up .kg-opponent { border-radius: 4px; padding: 15px 28px; }
#kg-app.kg-heads-up .kg-opp-row { gap: 10px; }
#kg-app.kg-heads-up .kg-opp-back { width: 34px; height: 48px; margin-left: -18px; border-radius: 2px; }
#kg-app.kg-heads-up .kg-opp-back:first-child { margin-left: 0; }
#kg-app.kg-heads-up .kg-opponent .kg-opp-name { font-size: 23px; max-width: none; }
#kg-app.kg-heads-up .kg-opponent .kg-opp-coins { font-size: 17px; padding-left: 16px; }
/* ไหล — light-blue glow spreading out whenever there is a card in hand that can
* ไหล (matches the previous player's discard), same style as the ทิ้ง glow. */
#kg-app .kg-hand-lai-btn.kg-lai-ready {
animation: kg-lai-glow 1.1s ease-in-out infinite;
}
#kg-app .kg-hand-lai-btn.kg-lai-ready:not(.kg-active) { background: linear-gradient(135deg, #6f8fb3, #4f6f96); color: #fff; }
@keyframes kg-lai-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(140,205,255,.65); }
50% { box-shadow: 0 0 0 7px rgba(140,205,255,0), 0 0 14px 3px rgba(120,195,255,.6); }
}
/* Home-screen subtitle (คำโปรย under the game name): black 70% oval behind the
* text, exactly as wide as the text (2026-09-29 request). */
#kg-app .kg-header p {
display: block; width: fit-content; max-width: 100%; box-sizing: border-box;
margin: 6px auto 0; padding: 6px 22px; background: rgba(0,0,0,.7);
border-radius: 24px; opacity: 1;
}
/* "กองจั่ว" text on the deck back (2026-09-30): black 70% pill, only as wide
* as the text; blinks red once the player has sat on a draw for 15s. */
#kg-app .kg-stock-label {
display: inline-block; width: fit-content; padding: 2px 10px; border-radius: 999px;
background: rgba(0,0,0,.7); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4;
}
#kg-app .kg-stock-label.kg-stock-label-blink { color: #ff3b30; animation: kg-stock-label-blink 1s ease-in-out infinite; }
@keyframes kg-stock-label-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
/* Home screen (2026-09-30): the 3 mode cards and the 2 buttons below them
* (🎨 ปรับแต่งสี / กลับหน้าหลัก) all react the same way on hover -- lift 3px
* and take the accent-colored border (they all keep a visible border at rest). */
#kg-app .kg-mode-card,
#kg-app .kg-home-link,
#kg-app .kg-customize-toggle {
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#kg-app .kg-mode-card:hover,
#kg-app .kg-home-link:hover,
#kg-app .kg-customize-toggle:hover {
transform: translateY(-3px);
border-color: var(--kg-accent);
box-shadow: 0 8px 22px rgba(20,20,10,.18);
}