/* Tarneb owns its layout inside the shared authenticated shell. */
.tn-app {
  --tn-gold: #dfbf77;
  --tn-ivory: #fff8e8;
  --tn-muted: #b8bdc5;
  --tn-line: rgba(223,191,119,.23);
  --tn-surface: #151d27;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px 32px;
  color: var(--tn-ivory);
  font-family: Cairo, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}
.tn-app *, .tn-app *::before, .tn-app *::after { box-sizing: border-box; }
.tn-app [hidden] { display: none !important; }
.tn-app h1, .tn-app h2, .tn-app h3, .tn-app p { margin: 0; }
.tn-app h1, .tn-app h2, .tn-app h3 { font-family: Cairo, system-ui, sans-serif; font-weight: 700; letter-spacing: normal; }
.tn-app h1 { font-size: 28px; line-height: 1.45; }
.tn-app h2 { font-size: 17px; line-height: 1.5; }
.tn-app h3 { font-size: 15px; }
.tn-app a { color: inherit; }
.tn-app button, .tn-app input, .tn-app select { font: inherit; }
.tn-app button, .tn-app a, .tn-app select { -webkit-tap-highlight-color: transparent; }
.tn-app button { cursor: pointer; }
.tn-app button:disabled { cursor: default; opacity: .48; }
.tn-app :focus-visible { outline: 3px solid #ffe1a0; outline-offset: 3px; }
.tn-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tn-subnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; border-bottom: 1px solid var(--tn-line); margin-bottom: 12px; }
.tn-wordmark { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-size: 20px; font-weight: 700; }
.tn-wordmark span { color: var(--tn-gold); }
.tn-subnav > div { display: flex; gap: 8px; }
.tn-subnav > div a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--tn-muted); font-size: 13px; text-decoration: none; }
.tn-eyebrow { display: block; color: var(--tn-gold); font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.tn-muted { color: var(--tn-muted); font-size: 13px; }
.tn-panel { border: 1px solid var(--tn-line); border-radius: 16px; padding: 18px; background: linear-gradient(140deg,#18212c,#101720); }
.tn-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tn-btn, .tn-icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid var(--tn-line); border-radius: 10px; padding: 9px 16px; color: var(--tn-ivory); background: #1a2530; text-decoration: none; font-size: 14px; font-weight: 700; touch-action: manipulation; }
.tn-btn:hover:not(:disabled), .tn-icon-btn:hover:not(:disabled) { background: #293744; border-color: var(--tn-gold); }
.tn-btn-gold { background: linear-gradient(115deg,#ead093,#cfaa5c); border-color: #f0d99e; color: #201b10; }
.tn-btn-gold:hover:not(:disabled) { background: #f0d99e; color: #201b10; }
.tn-btn-danger { background: #773442; border-color: #bb6a7b; }
.tn-btn-small { font-size: 13px; padding-inline: 12px; }
.tn-icon-btn { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; font-size: 22px; }
.tn-app select, .tn-app input { min-height: 44px; width: 100%; max-width: 100%; padding: 8px 12px; border: 1px solid #65707b; border-radius: 10px; color: var(--tn-ivory); background: #101720; color-scheme: dark; }
.tn-field-label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; }
.tn-message { padding: 10px 14px; margin-bottom: 10px; border-radius: 10px; font-size: 13px; overflow-wrap: anywhere; }
.tn-error { border: 1px solid #d3828e; color: #fff3f2; background: #542630; }
.tn-lobby-intro { display: grid; grid-template-columns: minmax(0,1fr) 130px; align-items: center; gap: 6px 20px; padding: 6px 4px 18px; }
.tn-lobby-intro h1 { font-size: 34px; color: var(--tn-gold); }
.tn-lobby-intro p { color: var(--tn-muted); font-size: 14px; }
.tn-lobby-cards { position: relative; height: 108px; direction: ltr; }
.tn-lobby-cards img { position: absolute; width: 65px; height: 91px; top: 7px; left: 15px; transform: rotate(-14deg); filter: drop-shadow(0 7px 7px #0006); }
.tn-lobby-cards img + img { left: 55px; top: 12px; transform: rotate(13deg); }
.tn-facts { grid-column: 1/-1; display: flex; gap: 8px; flex-wrap: wrap; }
.tn-facts span { color: #cbd1d7; font-size: 12px; padding: 3px 10px; background: #1a252f; border-radius: 6px; }
.tn-play-options { display: grid; gap: 10px; margin-bottom: 22px; }
.tn-play-choice { display: flex; width: 100%; min-height: 76px; padding: 12px 16px; align-items: center; gap: 15px; text-align: start; color: var(--tn-ivory); background: #17222b; border: 1px solid #3b4952; border-radius: 14px; }
.tn-play-choice > span:nth-child(2) { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.tn-play-choice strong { font-size: 17px; font-weight: 700; }
.tn-play-choice small { font-size: 13px; color: #bdc7d0; }
.tn-choice-icon { color: var(--tn-gold); font-size: 29px; width: 30px; text-align: center; }
.tn-choice-arrow { font-size: 22px; color: var(--tn-gold); }
.tn-app[dir=ltr] .tn-choice-arrow { transform: rotate(180deg); }
.tn-play-choice-primary { background: linear-gradient(115deg,#e7ca87,#ccaa60); border-color: #f0d99e; color: #211c10; box-shadow: 0 5px 18px #0002; }
.tn-play-choice-primary small, .tn-play-choice-primary .tn-choice-icon, .tn-play-choice-primary .tn-choice-arrow { color: #4b3b17; }
.tn-play-choice:hover { border-color: #f0d99e; }
.tn-resume { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 58px; padding: 12px 16px; margin-bottom: 12px; border: 1px solid #70a18a; border-radius: 12px; background: #1b3a30; text-decoration: none; font-size: 13px; }
.tn-room-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--tn-line); }
.tn-room-row-main { flex: 1; min-width: 0; }
.tn-room-row h3 { overflow-wrap: anywhere; }
.tn-room-row p { color: var(--tn-muted); font-size: 12px; margin-top: 3px; }
.tn-room-row .tn-room-rules { color: var(--tn-gold); }
.tn-room-seats { color: var(--tn-gold); white-space: nowrap; font-size: 13px; }
.tn-empty { padding: 10px 0; }
.tn-empty-symbol { display: none; }
.tn-empty h3 { margin-bottom: 4px; }
.tn-empty p { color: var(--tn-muted); font-size: 13px; }
.tn-learn-link { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 64px; padding: 14px 4px; text-decoration: none; font-size: 13px; color: var(--tn-muted); }
.tn-learn-link strong { color: var(--tn-gold); }
.tn-career { margin-top: 18px; }
.tn-history-row { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--tn-line); font-size: 13px; }
.tn-history-row small { grid-column: 2/-1; color: var(--tn-muted); }
.tn-history-win { color: var(--tn-gold); }
.tn-history-score { direction: ltr; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Native dialogs keep keyboard focus and retain errors beside the decision. */
.tn-dialog { position: fixed; inset: 0; margin: auto; width: min(440px,calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 22px; background: #17212c; color: var(--tn-ivory); border: 1px solid #aa8c51; border-radius: 20px; font-family: Cairo,system-ui,sans-serif; box-shadow: 0 20px 80px #0008; }
.tn-dialog::backdrop { background: #02070de0; }
.tn-dialog:not([open]) { display: none; }
.tn-dialog h2 { font-size: 21px; }
.tn-dialog p { margin: 10px 0 18px; color: var(--tn-muted); font-size: 14px; line-height: 1.7; }
.tn-dialog .tn-section-heading { margin-bottom: 2px; }
.tn-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.tn-dialog-actions .tn-btn { flex: 1; }
.tn-create-visibility, .tn-create-rules-choice { display: grid; gap: 10px; padding: 0; margin: 18px 0; border: 0; }
.tn-create-visibility legend, .tn-create-rules-choice legend { margin-bottom: 10px; padding: 0; font-size: 14px; font-weight: 600; }
.tn-mode-option { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #42515b; border-radius: 12px; cursor: pointer; }
.tn-mode-option:has(input:checked) { border-color: var(--tn-gold); background: #3b3422; }
.tn-mode-option input { flex: 0 0 22px; width: 22px; min-height: 22px; height: 22px; accent-color: var(--tn-gold); }
.tn-mode-option span { display: flex; flex-direction: column; gap: 2px; }
.tn-mode-option strong { font-size: 15px; }
.tn-mode-option small, .tn-difficulty-field > small { color: var(--tn-muted); font-size: 12px; }
.tn-difficulty-field > small { display: block; margin-top: 6px; }
.tn-create-rules { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; margin-top: 14px; border-block: 1px solid var(--tn-line); font-size: 13px; }
.tn-create-rules strong { color: var(--tn-gold); }
.tn-friend-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--tn-line); }
.tn-friend-row span { flex: 1; overflow-wrap: anywhere; }
.tn-friend-row img { width: 36px; height: 36px; border-radius: 50%; }

/* The room is a game surface, not a long document below site navigation. */
body:has(.tn-app[data-page=room]) { height: 100dvh; min-height: 0; overflow: hidden; }
body:has(.tn-app[data-page=room]) > .app-footer { display: none; }
body:has(.tn-app[data-page=room]) main { width: 100%; max-width: none; height: 100dvh; min-height: 0; margin: 0 !important; padding: 0 !important; animation: none !important; transform: none !important; }
.tn-app[data-page=room] { display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100dvh; min-height: 0; max-width: 1100px; padding: max(6px,env(safe-area-inset-top)) 12px max(8px,env(safe-area-inset-bottom)); }
.tn-app[data-page=room] > .tn-subnav { display: none; }
.tn-room-heading { display: flex; flex: 0 0 44px; align-items: center; gap: 8px; min-width: 0; }
.tn-room-identity { flex: 1; min-width: 0; }
.tn-room-mode { display: block; color: var(--tn-gold); font-size: 11px; line-height: 1.3; }
.tn-room-heading h1 { flex: 1; min-width: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-room-tools { display: flex; align-items: center; gap: 4px; }
.tn-room-tools .tn-icon-btn { border-color: transparent; background: transparent; }
.tn-room-tools .tn-icon-btn:hover { background: #23313b; }
.tn-connection { display: inline-flex; align-items: center; gap: 5px; color: var(--tn-muted); font-size: 11px; }
.tn-connection::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #d4aa58; }
.tn-connection[data-status=online]::before { background: #8bd4ad; }
.tn-connection[data-status=offline]::before { background: #ef9292; }
#tn-room-content { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; }
.tn-scoreboard { display: grid; flex: 0 0 64px; grid-template-columns: 1fr 1.2fr 1fr; align-items: stretch; border: 1px solid var(--tn-line); border-radius: 12px; background: #15212b; overflow: hidden; }
.tn-app[dir=rtl] .tn-scoreboard { direction: rtl; }
.tn-score-team { display: grid; grid-template-columns: 1fr auto; align-content: center; align-items: center; column-gap: 8px; padding: 5px 12px; }
.tn-score-team > span { font-size: 12px; }
.tn-score-team > strong { grid-column: 2; grid-row: 1/3; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tn-score-team > small { color: var(--tn-muted); font-size: 11px; }
.tn-score-team > .tn-bonus-badge { grid-column: 1 / -1; color: #ffe4a0; font-size: 10px; line-height: 1.3; }
.tn-team-us { background: #d9b7750d; }
.tn-team-us strong { color: var(--tn-gold); }
.tn-score-center { border-inline: 1px solid var(--tn-line); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2px 6px; }
.tn-score-center > span, .tn-score-center > small { color: var(--tn-muted); font-size: 11px; line-height: 1.3; }
.tn-score-center > strong { color: var(--tn-gold); font-size: 14px; line-height: 1.5; }
.tn-game-layout { display: flex; flex: 1; min-height: 0; }
.tn-table-column { display: grid; grid-template-rows: minmax(190px,1fr) auto auto auto auto; gap: 4px; width: 100%; min-width: 0; min-height: 0; }
.tn-table { position: relative; isolation: isolate; width: 100%; min-height: 190px; }
.tn-table::before { content: ""; position: absolute; inset: 23px 28px; border: 4px solid #5b4c31; outline: 1px solid #cda85b33; border-radius: 44%; background: radial-gradient(ellipse at 50% 40%,#265844,#143b30 70%,#102a23); box-shadow: inset 0 0 35px #071d14,0 6px 18px #0003; z-index: -1; }
.tn-table::after { content: ""; position: absolute; inset: 33px 38px; border: 1px solid #d2b37336; border-radius: 44%; z-index: -1; pointer-events: none; }
.tn-table-inscription { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #dcc5881a; font-size: 35px; font-weight: 700; pointer-events: none; }
.tn-table-inscription small { font: 600 8px system-ui,sans-serif; letter-spacing: .4em; }
.tn-trump-emblem { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 32px; height: 38px; display: grid; place-items: center; z-index: 4; pointer-events: none; border: 1px solid #cda85b66; border-radius: 50%; color: #e4c789; background: #183d30; font: 700 26px/1 system-ui,sans-serif; }
.tn-seat { position: absolute; display: flex; flex-direction: column; align-items: center; width: 112px; gap: 1px; text-align: center; z-index: 3; }
.tn-seat[data-relative="0"] { bottom: 0; left: calc(50% - 56px); }
.tn-seat[data-relative="1"] { right: 0; top: 50%; transform: translateY(-50%); }
.tn-seat[data-relative="2"] { top: 0; left: calc(50% - 56px); }
.tn-seat[data-relative="3"] { left: 0; top: 50%; transform: translateY(-50%); }
.tn-seat-avatar { width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid #8e9b88; border-radius: 50%; color: #f0dba8; background: #1c3430; font-size: 16px; font-weight: 700; box-shadow: 0 3px 10px #06110c88; }
.tn-seat-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tn-seat.is-active .tn-seat-avatar { border-color: #ffda79; box-shadow: 0 0 0 3px #f3ce6438; }
.tn-seat.is-partner .tn-seat-avatar { background: #345840; }
.tn-seat-name { max-width: 112px; padding: 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #10251fee; border-radius: 4px; font-size: 12px; font-weight: 700; line-height: 1.4; }
.tn-seat-label, .tn-seat-badge { color: #d4dfd6; font-size: 11px; line-height: 1.3; max-width: 112px; }
.tn-seat-badge { color: #e7c888; }
.tn-seat-empty .tn-seat-avatar { border-style: dashed; color: #bbcec0; }
.tn-seat .tn-btn { min-width: 104px; min-height: 44px; padding: 5px 7px; font-size: 12px; background: #1c3028; }
.tn-waiting { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 4px; padding: 0 100px; pointer-events: none; }
.tn-waiting p { color: #f0dcb0; font-size: 15px; font-weight: 700; }
.tn-waiting small { color: #c4d3c7; font-size: 12px; }
.tn-trick { position: absolute; inset: 0; direction: ltr; z-index: 2; pointer-events: none; }
.tn-trick-card { position: absolute; left: calc(50% - 24px); top: calc(50% - 33px); width: 48px; height: 67px; border-radius: 5px; filter: drop-shadow(0 3px 3px #0005); }
.tn-trick-card[data-relative="0"] { transform: rotate(-4deg); }
.tn-trick-card[data-relative="1"] { transform: rotate(7deg); }
.tn-trick-card[data-relative="2"] { transform: rotate(4deg); }
.tn-trick-card[data-relative="3"] { transform: rotate(-7deg); }
.tn-trick.is-last { opacity: .7; }
.tn-turn-line { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 3px 6px; text-align: center; }
.tn-turn-line p { color: #f2e7ca; font-size: 13px; }
.tn-timer { display: grid; place-items: center; min-width: 30px; height: 28px; padding: 0 5px; border: 1px solid #937945; border-radius: 8px; color: #f3d594; font-size: 13px; font-variant-numeric: tabular-nums; }
.tn-timer.is-urgent { color: #ffb5b0; border-color: #d88178; background: #642d29; }
.tn-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.tn-actions:empty { display: none; }
.tn-actions .tn-btn { min-width: 44px; height: 44px; padding: 6px 10px; font-size: 16px; }
.tn-trump-button { font-size: 27px !important; min-width: 58px !important; }
.tn-red { color: #ff9e9e; }
.tn-waiting-tools { display: none; }
.tn-hand-section { border-top: 1px solid var(--tn-line); padding-top: 3px; min-width: 0; }
.tn-hand-heading { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.tn-hand-heading h2 { font-size: 14px; white-space: nowrap; }
.tn-hand-heading > span { flex: 1; color: var(--tn-muted); font-size: 12px; }
.tn-hand-heading select { width: auto; max-width: 120px; min-height: 44px; padding: 4px 8px; font-size: 12px; border-color: #586471; background: #17212b; }
.tn-hand { display: flex; justify-content: center; direction: ltr; gap: 0; padding: 13px 0 4px; min-height: 122px; position: relative; }
.tn-card { position: relative; flex: 0 0 44px; width: 44px; height: 103px; padding: 0; border: 0; border-radius: 6px; background: transparent; overflow: visible; text-align: left; box-shadow: none !important; transition: transform .12s; touch-action: none; user-select: none; -webkit-user-select: none; }
.tn-card:last-child { flex-basis: 72px; }
.tn-card > img { display: block; width: 72px; height: 101px; max-width: none; border-radius: 5px; box-shadow: -2px 2px 4px #0005; pointer-events: none; }
.tn-card:disabled { opacity: 1 !important; }
.tn-card.is-illegal > img { filter: brightness(.63) saturate(.6); }
.tn-card.is-selected { transform: translateY(-10px); z-index: 2; }
.tn-card.is-selected > img, .tn-card:focus-visible > img { outline: 3px solid #ffdb86; outline-offset: 1px; }
.tn-card:focus-visible { outline: none; transform: translateY(-10px); z-index: 3; }
.tn-card.is-drag-source > img { opacity: .25; }
.tn-table.is-drop-target::after { border: 2px solid #f5d58d; background: #dfbf7715; box-shadow: inset 0 0 18px #dfbf7720; }
/* Fixed clones stay outside transformed game surfaces and never intercept input. */
.tn-drag-card, .tn-flight-card, .tn-flight-trail, .tn-collect-card { position: fixed; z-index: 100; pointer-events: none; user-select: none; border-radius: 5px; max-width: none; box-shadow: 0 7px 16px #0006; will-change: transform; }
.tn-drag-card { z-index: 102; }
.tn-flight-trail { z-index: 98; opacity: 0; box-shadow: 0 0 14px #ffc858; }
.tn-flight-card[data-effect=trump], .tn-drag-card[data-effect=trump] { box-shadow: 0 0 0 2px #ffe2a0, 0 0 22px #efb64bab, 0 12px 24px #0008; }
.tn-flight-card[data-effect=ace], .tn-drag-card[data-effect=ace] { box-shadow: 0 0 0 2px #fff0bc, 0 0 16px 5px #ffd36dbb, 0 0 42px 12px #f4aa3b66, 0 16px 30px #0009; }
.tn-flight-card[data-effect=king-ace], .tn-collect-card[data-effect=king-ace] { box-shadow: 0 0 0 3px #fff4ca, 0 0 20px 7px #ffd369d9, 0 0 48px 16px #eea93370, 0 16px 30px #0009; }
.tn-flight-aura { position: fixed; z-index: 99; pointer-events: none; border-radius: 50%; color: #fff0b4; background: radial-gradient(ellipse,#fff4ba88,#ffc04444 48%,transparent 72%); will-change: transform; }
.tn-flight-aura::before, .tn-flight-aura::after { content: ''; position: absolute; inset: -12px; border: 2px solid #ffdb8499; border-radius: 50%; box-shadow: 0 0 16px #ffc85766; transform: rotate(-25deg); }
.tn-flight-aura::after { inset: -21px -7px; border-width: 1px; border-color: #fff0b488; transform: rotate(35deg); }
.tn-flight-aura[data-effect=ace]::before { inset: -24px; border: 3px double #ffe8a5; box-shadow: 0 0 28px #ffbb4a99, inset 0 0 24px #ffd76b55; }
.tn-flight-aura[data-effect=ace]::after { inset: -36px -18px; border: 2px dashed #ffdf9399; }
.tn-flight-symbol { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font: 700 24px/1 system-ui,sans-serif; text-shadow: 0 0 12px #ffba36; }
.tn-flight-aura[data-effect=ace] .tn-flight-symbol { top: -52px; font-size: 38px; }
.tn-flight-aura[data-effect=king-ace] { background: radial-gradient(ellipse,#fff5cba6,#eec45966 48%,transparent 72%); }
.tn-flight-aura[data-effect=king-ace]::before { inset: -26px; border: 4px double #ffe6a0; box-shadow: 0 0 32px #ffd369a6; }
.tn-flight-aura[data-effect=king-ace]::after { inset: -40px -20px; border: 2px dotted #fff0b4; }
.tn-flight-aura[data-effect=king-ace] .tn-flight-symbol { top: -54px; font-size: 42px; }
.tn-trump-impact { position: fixed; z-index: 101; pointer-events: none; width: 108px; height: 108px; border: 2px solid #f8d786; border-radius: 50%; background: radial-gradient(circle,#ffdc7738,transparent 70%); box-shadow: 0 0 22px #ffc75b55, inset 0 0 18px #ffd76b33; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 0; color: #ffe5a7; font: 700 13px Cairo,system-ui,sans-serif; text-align: center; }
.tn-trump-impact[data-effect=ace] { width: 174px; height: 174px; border: 4px double #ffe7a9; box-shadow: 0 0 0 12px #f6c85b18, 0 0 48px #ffc75b77, inset 0 0 36px #ffd76b55; }
.tn-trump-symbol { color: #fff0c2; font-size: 24px; line-height: 1; text-shadow: 0 0 12px #f7b749; }
.tn-trump-impact[data-effect=ace] .tn-trump-symbol { font-size: 34px; }
.tn-trump-impact strong { padding: 3px 10px; border: 1px solid #dfbf7770; border-radius: 7px; background: #243329f5; white-space: nowrap; }
.tn-capture-impact, .tn-capture-spark, .tn-capture-token { position: fixed; z-index: 101; pointer-events: none; user-select: none; color: #ffe9a9; }
.tn-capture-impact { width: 70px; height: 86px; display: grid; place-items: center; border: 4px double #ffe8a5; border-radius: 50%; box-shadow: 0 0 0 9px #edbf5822, 0 0 28px #ffd36b99, inset 0 0 14px #ffd36b55; font: 700 30px/1 system-ui,sans-serif; }
.tn-capture-impact::after { content: ''; position: absolute; inset: 7px; border: 1px solid #fff1bf; border-radius: inherit; }
.tn-capture-spark { width: 5px; height: 10px; border-radius: 50%; background: #ffe9ac; box-shadow: 0 0 8px #ffc65f; }
.tn-capture-token { padding: 5px 8px; border: 1px solid #ffe4a0; border-radius: 10px; background: #244a39; box-shadow: 0 0 18px #eebe5788; font: 700 18px/1.3 system-ui,sans-serif; white-space: nowrap; }
.tn-bonus-result { padding: 8px 10px; border: 1px solid #b99a5455; border-radius: 8px; color: #f6daa0; background: #b99a540d; }
.tn-selection-bar { display: flex; align-items: center; justify-content: center; min-height: 32px; padding-top: 4px; text-align: center; }
.tn-selection-bar > span { color: #d5dde3; font-size: 12px; }
.tn-app:not([data-phase=playing]) .tn-selection-bar { display: none; }
.tn-table-sidebar { position: relative; }
.tn-table-sidebar > summary { list-style: none; cursor: pointer; }
.tn-table-sidebar > summary::-webkit-details-marker { display: none; }
.tn-table-sidebar[open] > summary { background: #334435; border-color: var(--tn-gold); }
.tn-table-info-content { position: fixed; z-index: 20; inset-inline-end: max(12px,calc((100vw - 1080px)/2)); top: 58px; width: min(360px,calc(100vw - 24px)); max-height: calc(100dvh - 76px); overflow: auto; padding: 18px; border: 1px solid #89764e; border-radius: 15px; background: #16222e; box-shadow: 0 15px 40px #0009; }
.tn-table-details h2, .tn-chat h2 { font-size: 16px; margin-bottom: 8px; }
.tn-table-details > p { line-height: 1.7; }
.tn-bid-history { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 12px 0 18px; }
.tn-bid-entry { display: flex; justify-content: space-between; gap: 8px; padding-top: 5px; border-top: 1px solid var(--tn-line); font-size: 12px; }
.tn-bid-entry span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-bid-entry strong { color: var(--tn-gold); }
.tn-chat { border-top: 1px solid var(--tn-line); padding-top: 15px; }
.tn-chat-log { list-style: none; margin: 0 0 12px; padding: 0; max-height: 210px; min-height: 48px; overflow: auto; font-size: 13px; }
.tn-chat-log li { padding: 7px 0; overflow-wrap: anywhere; }
.tn-chat-log strong { display: block; color: var(--tn-gold); font-size: 12px; }
.tn-chat form { display: flex; gap: 6px; }
.tn-chat input { min-width: 0; font-size: 16px; }
.tn-join-panel { max-width: 460px; width: 100%; margin: auto; text-align: center; padding: 28px 20px; }
.tn-join-symbol { color: var(--tn-gold); font-size: 45px; }
.tn-join-panel p { color: var(--tn-muted); margin: 14px 0 22px; font-size: 15px; }

/* Waiting and results have different decisions from an active hand. */
.tn-app[data-phase=waiting] .tn-scoreboard { display: none; }
.tn-app[data-phase=waiting] .tn-table-column { grid-template-rows: minmax(320px,1fr) auto auto auto; gap: 12px; padding-bottom: 18px; }
.tn-app[data-phase=waiting] .tn-waiting-tools { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.tn-app[data-phase=waiting] .tn-table { min-height: 320px; }
.tn-app[data-phase=waiting] .tn-actions .tn-btn { min-width: 220px; width: 100%; max-width: 420px; font-size: 16px; min-height: 48px; }
.tn-app:is([data-phase=round_end],[data-phase=finished]) .tn-table,
.tn-app:is([data-phase=round_end],[data-phase=finished]) .tn-turn-line,
.tn-app:is([data-phase=round_end],[data-phase=finished]) .tn-actions,
.tn-app:is([data-phase=round_end],[data-phase=finished]) .tn-hand-section { display: none !important; }
.tn-app:is([data-phase=round_end],[data-phase=finished]) .tn-table-column { display: flex; align-items: center; justify-content: center; overflow: auto; }
.tn-result { text-align: center; width: 100%; max-width: 520px; padding: 28px 22px; }
.tn-result h2 { color: var(--tn-gold); font-size: 25px; line-height: 1.55; margin-bottom: 12px; }
.tn-result p { color: var(--tn-muted); font-size: 14px; }
.tn-final-scores { display: block; color: var(--tn-gold); font-size: 45px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.tn-final-labels { display: flex; justify-content: space-around; max-width: 270px; margin: 0 auto 16px; color: #d0d5db; font-size: 13px; }
.tn-result-scores { display: flex; justify-content: center; gap: 24px; margin: 15px 0; font-size: 20px; }
.tn-result .tn-hand-points-label { margin-top: 14px; font-size: 12px; }
.tn-hand-points-label + .tn-result-scores { font-size: 15px; margin: 5px 0 18px; }
.tn-result .tn-btn { display: flex; min-width: 210px; margin: 18px auto 0; min-height: 48px; }
.tn-rules-heading { text-align: center; margin: 24px 0; }
.tn-rules-heading p { color: var(--tn-muted); margin-top: 12px; }
.tn-rules-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.tn-rules-grid h2 { color: var(--tn-gold); margin: 6px 0 12px; }
.tn-rules-grid p { color: #d0d5db; font-size: 14px; line-height: 1.9; }
.tn-rule-number { color: #cfae6c99; font-size: 24px; font-variant-numeric: tabular-nums; }
.tn-rules-scoring { margin-top: 18px; }
.tn-rules-scoring h2 { margin-bottom: 14px; }
.tn-table-scroll { max-width: 100%; overflow-x: auto; }
.tn-rules-scoring table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tn-rules-scoring th, .tn-rules-scoring td { padding: 12px 10px; text-align: start; border-bottom: 1px solid var(--tn-line); }
.tn-rules-scoring th { color: var(--tn-gold); background: #c9a9610a; }
.tn-rules-scoring .tn-muted { margin-top: 16px; }
.tn-rules-cta { display: flex; width: max-content; max-width: 100%; margin: 24px auto; }
@keyframes tn-card-enter { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }

@media (min-width: 850px) {
  .tn-lobby-intro { grid-template-columns: minmax(0,1fr) 180px; padding-block: 18px; }
  .tn-lobby-intro h1 { font-size: 42px; }
  .tn-lobby-cards { height: 125px; }
  .tn-lobby-cards img { width: 78px; height: 109px; left: 24px; }
  .tn-lobby-cards img + img { left: 76px; }
  .tn-play-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .tn-play-choice { gap: 10px; padding: 17px 14px; }
  .tn-play-choice small { font-size: 12px; }
  .tn-play-choice strong { font-size: 16px; }
  .tn-choice-arrow { display: none; }
  .tn-table { max-width: 900px; margin-inline: auto; }
  .tn-hand { padding-top: 15px; min-height: 137px; }
  .tn-card { flex-basis: 48px; width: 48px; height: 115px; }
  .tn-card:last-child { flex-basis: 82px; }
  .tn-card > img { width: 82px; height: 115px; }
  .tn-seat-avatar { width: 42px; height: 42px; }
}
@media (max-width: 720px) {
  .tn-app { padding-inline: 12px; }
  .tn-app[data-page=room] { padding-inline: 10px; }
  .tn-connection { width: 8px; overflow: hidden; font-size: 0; gap: 0; }
  .tn-room-heading h1 { font-size: 16px; }
  .tn-room-tools { gap: 0; }
  .tn-score-team { padding: 5px 8px; column-gap: 4px; }
  .tn-score-team > span { font-size: 11px; }
  .tn-score-team > strong { font-size: 23px; }
  .tn-score-center > strong { font-size: 13px; }
  .tn-hand { display: grid; grid-template-columns: repeat(7,44px); justify-content: center; gap: 8px 0; padding: 12px 15px 3px 0; min-height: 0; }
  .tn-card, .tn-card:last-child { width: 44px; height: 80px; }
  .tn-card > img { width: 57px; height: 80px; }
  .tn-seat { width: 90px; }
  .tn-seat[data-relative="0"], .tn-seat[data-relative="2"] { left: calc(50% - 45px); }
  .tn-seat-name, .tn-seat-label, .tn-seat-badge { max-width: 90px; }
  .tn-seat-label { max-height: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .tn-seat .tn-btn { min-width: 88px; padding-inline: 4px; font-size: 11px; }
  .tn-waiting { padding-inline: 90px; }
  .tn-waiting p { font-size: 14px; }
  .tn-hand-heading { gap: 6px; }
  .tn-hand-heading > span { font-size: 11px; }
  .tn-hand-heading select { max-width: 105px; }
  .tn-actions { gap: 5px; }
  .tn-actions .tn-btn { padding-inline: 8px; }
}
@media (max-width: 460px) {
  .tn-lobby-intro { grid-template-columns: minmax(0,1fr) 106px; gap: 7px 10px; }
  .tn-lobby-cards img { width: 55px; height: 77px; left: 9px; top: 12px; }
  .tn-lobby-cards img + img { left: 44px; top: 20px; }
  .tn-lobby-cards { height: 95px; }
  .tn-lobby-intro h1 { font-size: 30px; }
  .tn-lobby-intro p { font-size: 13px; }
  .tn-play-choice { min-height: 75px; padding: 11px 14px; }
  .tn-play-choice small { font-size: 12px; }
  .tn-panel { padding: 15px; }
  .tn-learn-link { flex-wrap: wrap; justify-content: start; gap: 3px 12px; }
  .tn-rules-grid { grid-template-columns: 1fr; }
  .tn-dialog { padding: 18px; }
  .tn-dialog h2 { font-size: 20px; }
  .tn-result { padding: 24px 16px; }
}
@media (max-height: 500px) and (min-width: 650px) {
  .tn-app[data-page=lobby] .tn-subnav { min-height: 44px; margin-bottom: 6px; }
  .tn-lobby-intro { grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 2px 4px 12px; }
  .tn-lobby-intro .tn-eyebrow, .tn-lobby-cards { display: none; }
  .tn-lobby-intro h1 { font-size: 26px; }
  .tn-lobby-intro p { font-size: 13px; }
  .tn-facts { grid-column: 2; grid-row: 1; justify-content: end; }
  .tn-play-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  .tn-play-choice { gap: 9px; padding: 10px 12px; }
  .tn-play-choice strong { font-size: 16px; }
  .tn-play-choice small { font-size: 12px; }
  .tn-choice-arrow { display: none; }
  .tn-app[data-page=room] { max-width: 1100px; padding: 3px 10px 5px; gap: 2px; }
  .tn-room-heading { flex-basis: 44px; }
  #tn-room-content { position: relative; display: grid; grid-template-columns: minmax(280px,1fr) minmax(340px,1fr); grid-template-rows: 60px minmax(0,1fr); gap: 3px 14px; direction: ltr; }
  .tn-scoreboard { grid-column: 1; grid-row: 1; }
  .tn-game-layout, .tn-table-column { display: contents; }
  .tn-table { grid-column: 1; grid-row: 2; min-height: 190px; }
  .tn-turn-line { grid-column: 2; grid-row: 1; align-self: start; min-height: 30px; }
  .tn-actions { grid-column: 2; grid-row: 1; align-self: end; gap: 5px; transform: translateY(19px); z-index: 4; }
  .tn-actions .tn-btn { min-width: 44px; height: 44px; padding: 5px 8px; }
  .tn-hand-section { grid-column: 2; grid-row: 2; align-self: end; direction: inherit; padding-top: 0; border: 0; }
  .tn-hand-heading { min-height: 44px; gap: 5px; direction: rtl; }
  .tn-app[dir=ltr] .tn-hand-heading { direction: ltr; }
  .tn-hand-heading > span { display: none; }
  .tn-hand-heading select { margin-inline-start: auto; max-width: 105px; }
  .tn-hand { display: grid; grid-template-columns: repeat(7,44px); gap: 4px 0; padding: 10px 14px 1px 0; min-height: 0; }
  .tn-card, .tn-card:last-child { width: 44px; height: 71px; }
  .tn-card > img { width: 51px; height: 71px; }
  .tn-selection-bar { min-height: 30px; padding-top: 2px; direction: rtl; }
  .tn-app[dir=ltr] .tn-selection-bar { direction: ltr; }
  .tn-selection-bar > span { font-size: 12px; }
  .tn-app:not([data-phase=playing]) .tn-hand-section { align-self: end; padding-bottom: 2px; }
  .tn-app[data-phase=waiting] #tn-room-content { grid-template-rows: minmax(0,1fr); }
  .tn-app[data-phase=waiting] .tn-table { grid-column: 1; grid-row: 1; min-height: 270px; }
  .tn-app[data-phase=waiting] .tn-turn-line { grid-column: 2; grid-row: 1; align-self: start; padding-top: 30px; }
  .tn-app[data-phase=waiting] .tn-waiting-tools { grid-column: 2; grid-row: 1; flex-direction: column; align-self: center; }
  .tn-app[data-phase=waiting] .tn-actions { grid-column: 2; grid-row: 1; align-self: end; transform: none; padding-bottom: 10px; }
  .tn-app:is([data-phase=round_end],[data-phase=finished]) #tn-room-content { display: flex; }
  .tn-app:is([data-phase=round_end],[data-phase=finished]) .tn-game-layout { display: flex; }
  .tn-app:is([data-phase=round_end],[data-phase=finished]) .tn-table-column { display: flex; }
  .tn-result { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4px 20px; max-width: 780px; padding: 12px 20px; }
  .tn-result h2 { font-size: 19px; margin: 0; }
  .tn-result p { font-size: 12px; }
  .tn-final-scores { font-size: 32px; }
  .tn-final-labels, .tn-result-scores { margin: 0; }
  .tn-result .tn-btn { margin: 0 auto; min-height: 44px; }
  .tn-result .tn-hand-points-label { margin: 0; }
}
/* Small or magnified viewports retain readable controls through document scrolling. */
@media (max-width: 359px), (max-height: 640px) and (max-width: 649px) {
  body:has(.tn-app[data-page=room]) { height: auto; min-height: 100dvh; overflow: auto; }
  body:has(.tn-app[data-page=room]) main { height: auto; min-height: 100dvh; }
  .tn-app[data-page=room] { height: auto; min-height: 100dvh; }
  #tn-room-content, .tn-game-layout { display: block; }
  .tn-table-column { display: flex; flex-direction: column; gap: 6px; }
  /* Short browser viewports keep the current decision ahead of table decoration. */
  .tn-app:is([data-phase=bidding],[data-phase=trump]) .tn-turn-line { order: -2; }
  .tn-app:is([data-phase=bidding],[data-phase=trump]) .tn-actions { order: -1; }
  .tn-table { height: 270px; flex: 0 0 270px; }
  .tn-hand { grid-template-columns: repeat(auto-fit,44px); }
  .tn-scoreboard { min-height: 64px; margin-bottom: 6px; }
  .tn-room-heading { flex-wrap: wrap; }
  .tn-room-heading h1 { min-width: 115px; }
  .tn-room-tools { margin-inline-start: auto; }
  .tn-hand-heading { flex-wrap: wrap; }
  .tn-hand-heading > span { min-width: 105px; }
  .tn-selection-bar { flex-wrap: wrap; }
  .tn-app[data-phase=waiting] .tn-table { height: 340px; flex-basis: 340px; }
}
@media (max-width: 359px) {
  .tn-lobby-intro { grid-template-columns: minmax(0,1fr) 86px; }
  .tn-lobby-cards img + img { left: 32px; }
  .tn-dialog-actions { flex-wrap: wrap; }
  .tn-dialog-actions .tn-btn { min-width: 100px; }
  .tn-scoreboard { grid-template-columns: 1fr 1fr 1fr; }
  .tn-score-team { display: flex; flex-direction: column; padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .tn-app *, .tn-app *::before, .tn-app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .tn-flight-card, .tn-flight-trail, .tn-flight-aura, .tn-collect-card, .tn-trump-impact, .tn-capture-impact, .tn-capture-spark, .tn-capture-token { display: none !important; }
}