#view-boardgames, #view-joker { --jk-gold: #e8c27c; --jk-mint: #8cddbd; --jk-felt: #12483d; --jk-ink: #132129; max-width: 100%; }
#view-boardgames button, #view-joker button { touch-action: manipulation; }
#view-joker .btn:disabled { opacity: .45; cursor: not-allowed; }
.jk-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.jk-heading > div { min-width: 0; }
.jk-heading .page-title { font-size: clamp(26px, 4vw, 42px); margin: 8px 0 12px; letter-spacing: -.045em; }
.jk-heading .page-sub { font-size: 13px; line-height: 1.8; }
.jk-eyebrow { color: var(--jk-mint); font-size: 10px; letter-spacing: .12em; font-weight: 700; }
.jk-back { flex-shrink: 0; min-height: 44px; }
.jk-muted { color: #adbdc9; font-size: 12px; line-height: 1.9; }
.jk-pill { display: inline-block; border: 1px solid #e8c27c55; border-radius: 50px; padding: 7px 12px; color: var(--jk-gold); background: #e8c27c0c; font-size: 10px; font-weight: 700; line-height: 1.5; }
.jk-section-hero { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 30px; padding: 40px; background: radial-gradient(ellipse at 90% 90%, #29655766, transparent 60%), #152e31; border: 1px solid #59867b66; border-radius: 26px; overflow: hidden; }
.jk-section-hero h2 { margin: 20px 0 14px; font-size: clamp(25px, 4vw, 36px); letter-spacing: -.035em; }
.jk-section-hero p { color: #b3c9c7; line-height: 1.9; font-size: 14px; }
.jk-hero-cards { display: flex; justify-content: center; padding: 30px 0; }
.jk-hero-cards .jk-card { width: 90px; height: 132px; margin-left: -20px; box-shadow: 0 15px 35px #0005; }
.jk-hero-cards .jk-card:nth-child(1) { transform: rotate(-16deg) translateY(8px); }
.jk-hero-cards .jk-card:nth-child(2) { transform: rotate(-2deg) translateY(-6px); }
.jk-hero-cards .jk-card:nth-child(3) { transform: rotate(14deg) translateY(8px); }
.jk-game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.jk-mode-card.btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 30px; border-radius: 22px; background: #182b35; border: 1px solid #3d5a68; white-space: normal; }
.jk-mode-card.btn:hover { background: #1d373b; border-color: #8cddbd; transform: translateY(-3px); }
.jk-mode-japanese.btn { background: #292b39; border-color: #5d5269; }
.jk-mode-icon { font-size: 28px; letter-spacing: .12em; color: var(--jk-gold); margin-bottom: 24px; }
.jk-mode-card h2 { font-size: 23px; margin: 18px 0 12px; letter-spacing: -.03em; }
.jk-mode-card p { font-size: 13px; color: #adbdc9; line-height: 1.9; flex: 1; }
.jk-card-link { display: block; font-size: 12px; color: var(--jk-mint); margin-top: 22px; }
.jk-section-note { color: #8fa6b1; text-align: center; line-height: 1.9; font-size: 11px; padding: 25px 0; }
.jk-variant-switch, .jk-targets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.jk-variant-switch .btn, .jk-targets .btn { min-height: 44px; font-size: 12px; }
#view-joker .is-selected.btn { color: #bdf2db; border-color: #79cbb2; background: #285648; }
.jk-lobby-panel { border: 1px solid #3e665d; background: radial-gradient(ellipse at 50% 0, #1f5d4c55, transparent 70%), #162c31; border-radius: 24px; padding: 32px; text-align: center; }
.jk-lobby-panel h2 { font-size: 26px; margin: 20px 0 12px; letter-spacing: -.035em; }
.jk-lobby-panel > .jk-muted { max-width: 640px; margin: 0 auto 22px; }
.jk-menu-hand { display: flex; justify-content: center; gap: 5px; margin: 0 0 26px; }
.jk-menu-hand .jk-card { box-shadow: 0 8px 18px #0003; }
.jk-menu-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 25px; }
.jk-menu-actions .btn { min-height: 46px; }
.jk-join { display: flex; gap: 8px; min-width: 0; }
.jk-join input { width: 145px; min-width: 0; border: 1px solid #537267; border-radius: 12px; background: #0d2528; color: #fff; padding: 13px; text-transform: uppercase; letter-spacing: .1em; }
.jk-resume { margin-top: 18px; }
.jk-rules { margin-top: 25px; padding: 21px 4px; color: #a4b9bf; font-size: 12px; line-height: 1.95; border-top: 1px solid #345157; }
.jk-rules summary { color: #c9dedc; font-weight: 700; cursor: pointer; min-height: 36px; }
.jk-rules p { margin: 12px 0; }
.jk-rules .jk-fairness { color: var(--jk-mint); }
.jk-wait-symbol { font-size: 65px; color: var(--jk-gold); }
.jk-connection { min-height: 20px; color: #f3d394; font-size: 12px; text-align: center; line-height: 1.7; margin: 12px 0; }
.jk-waiting .btn { margin: 12px 6px 0; }
.jk-code-box { display: grid; gap: 9px; justify-content: center; margin: 20px 0 26px; }
.jk-code-box > span { font-size: 11px; color: #adc4c4; }
.jk-room-code { color: var(--jk-gold); letter-spacing: .25em; font-size: 32px; padding: 10px 12px 10px 20px; border: 1px dashed #9b956a; border-radius: 12px; background: #0d2425; }
.jk-roster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.jk-player { display: flex; align-items: center; gap: 9px; min-width: 0; border: 1px solid #3d5d63; border-radius: 14px; background: #172e38; padding: 13px 10px; text-align: left; position: relative; }
.jk-player.is-you { border-color: #61b899; background: #21483e; }
.jk-player.is-turn { box-shadow: 0 0 0 2px var(--jk-gold); }
.jk-player.is-empty { border-style: dashed; opacity: .65; }
.jk-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 31px; height: 31px; border-radius: 50%; background: #68888130; color: #c2ded4; font-size: 15px; font-weight: 700; }
.jk-player-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.jk-player-copy strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jk-player-status, .jk-player-tricks { font-size: 10px; color: #acc6c6; }
.jk-roster-compact { margin: 12px 0 8px; }
.jk-card-count { position: absolute; right: 6px; bottom: 6px; font-size: 9px; color: #79999a; }
.jk-stage { position: relative; background: radial-gradient(ellipse at center, #225e4d 0, #174b40 55%, #123b34 100%); border: 1px solid #4f7863; border-radius: 26px; box-shadow: inset 0 0 0 6px #122d2b88, 0 12px 30px #0002; padding: 26px; max-width: 820px; margin: 0 auto; }
.jk-stage::before { content: ''; position: absolute; inset: 10px; border: 1px solid #a3b48925; border-radius: 18px; pointer-events: none; }
.jk-stage-heading { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.jk-phase-title { font-size: 17px; margin-top: 7px; line-height: 1.6; overflow-wrap: anywhere; }
.jk-clock { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #baf3d9; padding: 9px 12px; border: 1px solid #b4e7cd44; border-radius: 12px; background: #0b302c; }
.jk-clock.is-urgent { color: #f6d28b; }
.jk-trump-badge { display: flex; justify-content: center; align-items: center; gap: 10px; color: #c9dfc9; font-size: 11px; margin: 12px auto; }
.jk-trump-badge strong { color: var(--jk-gold); }
.jk-trump-badge .jk-card { width: 34px; height: 49px; pointer-events: none; border-radius: 5px; }
.jk-trump-badge .jk-card .jk-card-center { display: none; }
.jk-trump-badge .jk-card .jk-card-corner { font-size: 10px; left: 3px; top: 3px; }
.jk-trick { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, 124px); max-width: 460px; margin: 8px auto 16px; align-items: center; justify-items: center; }
.jk-trick-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; position: relative; }
.jk-trick-slot .jk-card { box-shadow: 0 6px 15px #0004; }
.jk-place-0 { grid-row: 3; grid-column: 2; }
.jk-place-1 { grid-row: 2; grid-column: 1; }
.jk-place-2 { grid-row: 1; grid-column: 2; }
.jk-place-3 { grid-row: 2; grid-column: 3; }
.jk-trick-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 130px; max-width: 290px; margin-top: 20px; }
.jk-trick-2 .jk-place-0 { grid-column: 1; grid-row: 1; }
.jk-trick-2 .jk-place-1 { grid-column: 2; grid-row: 1; }
.jk-trick-name { color: #c3d7c8; font-size: 10px; max-width: 90px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jk-empty-card { height: 94px; width: 64px; border: 1px dashed #c6ddbd44; border-radius: 8px; display: grid; place-items: center; color: #c5d8bf55; font-size: 26px; }
.jk-trick-slot.is-winner .jk-card { outline: 3px solid var(--jk-gold); outline-offset: 3px; }
.jk-joker-call { color: var(--jk-gold); font-size: 9px; }
.jk-card { width: 76px; height: 110px; min-width: 0; flex-shrink: 0; position: relative; display: block; padding: 0; border: 1px solid #dedfd7; border-radius: 10px; color: var(--jk-ink); background: linear-gradient(135deg, #fffef6, #e7ede6); font-family: Georgia, 'Times New Roman', serif; box-shadow: 0 3px 5px #0002; overflow: hidden; user-select: none; }
button.jk-card { cursor: pointer; transition: transform .12s, box-shadow .12s; }
button.jk-card:enabled:hover { transform: translateY(-4px); box-shadow: 0 8px 14px #0004; }
button.jk-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
button.jk-card:disabled { cursor: default; }
.jk-hand button.jk-card:disabled, .is-own button.jk-card:disabled { background: linear-gradient(135deg, #e3e6df, #c9d3cd); filter: saturate(.65); }
.jk-hand button.jk-card:enabled, .is-own button.jk-card:enabled { box-shadow: 0 0 0 2px #8cddbd55, 0 5px 12px #0003; }
button.jk-card.is-selected { transform: translateY(-6px); outline: 3px solid var(--jk-gold); outline-offset: 2px; }
.jk-card-red { color: #b63b48; }
.jk-card-corner { position: absolute; top: 7px; left: 7px; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 18px; line-height: 1; }
.jk-card-corner b { font-weight: 800; }
.jk-card-center { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); font-size: 43px; line-height: 1; }
.jk-card-small { width: 64px; height: 94px; border-radius: 8px; }
.jk-card-small .jk-card-corner { font-size: 15px; top: 6px; left: 6px; }
.jk-card-small .jk-card-center { font-size: 36px; }
.jk-joker { color: #70501c; background: linear-gradient(135deg, #fff2bf, #f7e1aa); border-color: #dcb773; }
.jk-joker-art { display: block; position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; pointer-events: none; }
.jk-card-back { color: #e9cc91; border: 2px solid #d0bd8b; background: repeating-linear-gradient(45deg, #164c43 0, #164c43 4px, #266454 4px, #266454 5px); display: grid; place-items: center; box-shadow: 0 2px 5px #0003; }
.jk-card-back > span { border: 1px solid #ddc38b88; border-radius: 50%; display: grid; place-items: center; height: 28px; width: 28px; font-size: 24px; }
.jk-hand-section { margin: 24px auto 10px; max-width: 820px; }
.jk-hand-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 15px; }
.jk-hand-heading h3 { font-size: 14px; }
.jk-hand-heading .jk-muted { font-size: 10px; }
.jk-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; padding: 12px 5px; min-height: 124px; }
.jk-action-panel { max-width: 820px; margin: 14px auto; padding: 19px; text-align: center; border: 1px solid #3d5e61; border-radius: 17px; background: #182d36; }
.jk-action-status { font-size: 12px; line-height: 1.8; color: #c5d4d7; margin-bottom: 12px; }
.jk-action-choices { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.jk-option.btn { min-height: 44px; min-width: 72px; font-size: 12px; }
.jk-confirm-action { min-height: 47px; min-width: 190px; }
.jk-joker-help { margin: 9px 0 14px; }
.jk-leave { display: block; margin: 20px auto; min-height: 44px; font-size: 11px; }
.jk-japanese-table { margin: 16px auto; width: calc(100% - 8px); max-width: 370px; }
.jk-table-caption { display: block; text-align: center; margin-bottom: 10px; font-size: 10px; color: #c4d9c9; }
.jk-table-columns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(4px, 1.5vw, 10px); }
.jk-column { position: relative; min-width: 0; padding-top: 6px; }
.jk-column .jk-card { width: 100%; height: auto; aspect-ratio: 64 / 94; }
.jk-column > .jk-card-back { position: absolute; top: 0; left: 3px; transform: rotate(4deg); }
.jk-column > .jk-card:not(.jk-card-back) { position: relative; }
.jk-column-empty { display: grid; width: 100%; aspect-ratio: 64 / 94; place-items: center; color: #a6c9b155; border: 1px dashed #aac7ac22; border-radius: 8px; }
.jk-dealing-art { text-align: center; font-size: 42px; color: var(--jk-gold); margin: 60px 0 35px; letter-spacing: .1em; }
.jk-stage > .jk-muted { text-align: center; margin: 20px 0; }
.jk-hand-result, .jk-result { text-align: center; background: #192d36; border: 1px solid #436158; border-radius: 23px; padding: 30px; }
.jk-hand-result h2, .jk-result h2 { font-size: 27px; margin: 20px 0; line-height: 1.5; }
.jk-hand-result .jk-clock { display: block; width: fit-content; margin: 20px auto; }
.jk-hand-ready { min-height: 46px; white-space: normal; line-height: 1.5; }
.jk-ledger { margin: 20px 0; border: 1px solid #344e58; background: #152630; border-radius: 16px; padding: 16px; }
.jk-ledger summary { font-size: 13px; font-weight: 700; color: #c7dbd7; cursor: pointer; min-height: 32px; }
.jk-ledger-scroll { overflow-x: auto; margin-top: 12px; }
.jk-ledger table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; }
.jk-ledger th, .jk-ledger td { padding: 12px 7px; border-bottom: 1px solid #31444b; text-align: center; overflow-wrap: anywhere; }
.jk-ledger th:first-child { width: 55px; font-size: 10px; color: #8faeac; }
.jk-ledger thead th { color: #b7d7c7; font-size: 10px; }
.jk-ledger td strong, .jk-ledger td small { display: block; }
.jk-ledger td small { font-size: 9px; margin-top: 5px; color: #90aaa9; line-height: 1.5; }
.jk-ledger .jk-bonus { color: #9edcb0; }
.jk-ledger .jk-penalty { color: #e6a5a5; }
.jk-total { background: #213d3c; color: var(--jk-gold); font-weight: bold; }
.jk-result-symbol { color: var(--jk-gold); font-size: 65px; margin-top: 18px; }
.jk-standings { display: grid; gap: 8px; max-width: 500px; margin: 25px auto; }
.jk-standing { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-radius: 12px; background: #10252c; padding: 16px; text-align: left; }
.jk-standing span { overflow-wrap: anywhere; font-size: 12px; min-width: 0; }
.jk-standing strong { color: #d7e7d7; font-size: 20px; }
.jk-standing.is-you { outline: 1px solid #79b09b; background: #21463e; }
.jk-exit-confirm { position: sticky; z-index: 25; top: 8px; margin-bottom: 20px; background: #2b3442; border: 1px solid #e6c07b; border-radius: 18px; box-shadow: 0 12px 40px #0007; padding: 23px; text-align: center; }
.jk-exit-confirm h2 { font-size: 20px; line-height: 1.7; }
.jk-exit-confirm p { font-size: 12px; line-height: 1.8; color: #cad4da; margin: 12px 0 18px; }
.jk-exit-confirm .btn { min-height: 44px; margin: 4px; white-space: normal; }
.jk-danger { color: #ffc3c3; border-color: #98565d; background: #5b3139; }
@media (max-width: 700px) {
  .jk-section-hero { grid-template-columns: 1fr; gap: 0; padding: 25px; }
  .jk-hero-cards { padding: 25px 0 12px; }
  .jk-hero-cards .jk-card { width: 76px; height: 112px; }
  .jk-game-grid { gap: 12px; }
  .jk-mode-card.btn { padding: 20px; }
  .jk-mode-card h2 { font-size: 19px; }
  .jk-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jk-lobby-panel { padding: 23px 18px; }
  .jk-stage { padding: 20px 16px; }
}
@media (max-width: 430px) {
  .jk-heading { gap: 8px; margin-bottom: 16px; }
  .jk-heading .page-title { font-size: 25px; line-height: 1.45; margin-bottom: 8px; }
  .jk-heading .page-sub { font-size: 10px; }
  .jk-eyebrow { font-size: 8px; }
  .jk-back.btn { font-size: 10px; padding: 8px 10px; }
  .jk-game-grid { grid-template-columns: 1fr; }
  .jk-mode-card.btn { padding: 23px; }
  .jk-variant-switch .btn { flex: 1; font-size: 10px; padding: 10px 8px; }
  .jk-lobby-panel { padding: 23px 14px; }
  .jk-lobby-panel h2 { font-size: 22px; }
  .jk-menu-actions { flex-direction: column; }
  .jk-menu-actions > .btn { width: 100%; }
  .jk-join { width: 100%; }
  .jk-join input { flex: 1; width: 80px; }
  .jk-join .btn { padding: 11px; font-size: 11px; }
  .jk-player { padding: 10px 8px; gap: 6px; }
  .jk-avatar { flex-basis: 25px; height: 25px; font-size: 12px; }
  .jk-player-copy strong { font-size: 9px; }
  .jk-player-status, .jk-player-tricks { font-size: 8px; }
  .jk-roster { gap: 8px; }
  .jk-card-count { font-size: 8px; }
  .jk-stage { padding: 17px 12px; border-radius: 20px; }
  .jk-phase-title { font-size: 13px; }
  .jk-clock { font-size: 14px; padding: 8px 9px; }
  .jk-trick { grid-template-rows: repeat(3, 112px); }
  .jk-trick-2 { grid-template-rows: 118px; }
  .jk-trick-slot .jk-card, .jk-empty-card { width: 56px; height: 82px; }
  .jk-trick-name { max-width: 65px; font-size: 8px; }
  .jk-joker-call { font-size: 8px; }
  .jk-column .jk-card-corner { font-size: clamp(11px, 3.5vw, 15px); top: 5px; left: 5px; }
  .jk-column .jk-card-center { font-size: clamp(26px, 8vw, 34px); }
  .jk-hand { gap: 12px 8px; padding: 10px 0; min-height: 104px; }
  .jk-hand .jk-card { width: 58px; height: 84px; }
  .jk-hand .jk-card-corner { font-size: 14px; top: 6px; left: 6px; }
  .jk-hand .jk-card-center { font-size: 33px; }
  .jk-hand-heading { flex-wrap: wrap; gap: 3px; }
  .jk-action-panel { padding: 15px 10px; }
  .jk-option.btn { min-width: 66px; padding: 10px 9px; font-size: 10px; }
  .jk-action-status { font-size: 10px; }
  .jk-confirm-action { font-size: 12px; }
  .jk-ledger { padding: 12px 7px; }
  .jk-ledger th, .jk-ledger td { padding: 9px 3px; font-size: 11px; }
  .jk-ledger th:first-child { width: 36px; }
  .jk-ledger thead th, .jk-ledger td small { font-size: 8px; }
  .jk-hand-result, .jk-result { padding: 23px 15px; }
  .jk-hand-result h2, .jk-result h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .jk-mode-card.btn, button.jk-card { transition: none; } }