/* Mobile table: five independent play lanes, with controls in a thumb dock.
   Sizes are capped, so tablet/device previews do not inflate the buttons. */
.mobile-menu,.mobile-turn { display:none }
@media (max-width:760px) and (orientation:portrait) {
  html,body { height:100%; overflow:hidden; overscroll-behavior:none }
  body { padding:0 }
  #app { --card-w:clamp(54px,15vw,86px); --card-h:calc(var(--card-w)*1.54); width:100%; max-width:none; height:100dvh; min-height:0; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); transform:none }
  .topbar { position:absolute; top:calc(env(safe-area-inset-top) + 4px); right:calc(env(safe-area-inset-right) + 8px); z-index:20; width:44px; height:44px; min-height:0; padding:0; border:0; background:none }
  .topbar .brand,.topbar .run,.topbar nav { display:none }
  .mobile-menu { display:grid; place-items:center; width:44px; height:44px; min-height:44px; padding:0; border:1px solid var(--line); border-radius:14px; background:#07140fe6; color:var(--gold); font-size:22px; line-height:1 }
  .table { flex:1; width:100%; height:100%; min-height:0; max-height:none; padding:0; border-radius:18px; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) 56px clamp(108px,17dvh,146px); overflow:hidden }
  .table-border { inset:5px; border-radius:13px; pointer-events:none }
  .playfield { grid-column:1; grid-row:1; height:auto!important; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:calc(var(--card-h) + 42px) minmax(54px,1fr) 94px minmax(54px,1fr) calc(var(--card-h) + 38px); padding:8px 12px 0; overflow:visible }
  .seat { position:relative; inset:auto; width:100%; min-width:0; min-height:0; gap:0; display:flex; align-items:center; justify-content:flex-end; padding:36px 0 3px }
  .seat.opponent { grid-row:1; top:auto }
  .seat.player { grid-row:5; bottom:auto; padding:3px 0 32px; justify-content:flex-start }
  .identity,.player .identity { position:absolute; top:0; bottom:auto; left:0; right:auto; width:100%; height:32px; transform:none; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:8px; text-align:left; --vital-size:14px; --vital-gap:2px }
  .opponent .identity { padding-right:48px; height:36px }
  .player .identity { top:auto; bottom:0 }
  .identity h1,.identity h2,.opponent .identity h1,.player .identity h2 { order:0; flex:1; min-width:0; max-width:none; margin:0; font-size:clamp(12px,3.3vw,16px); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .identity .hearts { order:2; flex:none; margin:0 }
  .identity .shields { order:1; flex:none; margin:0 }
  .identity .stake { display:none }
  .hand { width:100%; height:var(--card-h); min-height:0; gap:4px; flex:none; overflow:visible }
  .number-card,.number-card img { width:var(--card-w); min-width:var(--card-w); max-width:var(--card-w); height:var(--card-h); flex-basis:var(--card-w) }
  .hand:has(.number-card:nth-child(4)) { gap:0 }
  .hand:has(.number-card:nth-child(4)) .number-card+.number-card { margin-left:calc(var(--card-w)*-.28) }
  .hand:has(.number-card:nth-child(7)) .number-card+.number-card { margin-left:calc(var(--card-w)*-.62) }
  .scorebox { position:absolute; z-index:3; right:0; bottom:4px; min-width:54px; min-height:26px; padding:4px 8px; border-radius:20px; background:#07140feb }
  .player .scorebox { top:3px; bottom:auto }
  .scorebox strong { font-size:14px }
  .scorebox small { display:none }
  .played-zone { position:relative; inset:auto; width:100%; min-width:0; display:flex; align-items:center; justify-content:center; z-index:4 }
  .opponent-played { grid-row:2; top:auto; align-items:flex-start; padding-top:8px }
  .player-played { grid-row:4; bottom:auto; align-items:flex-end; padding-bottom:8px }
  .played-list { display:flex; flex-wrap:nowrap; justify-content:center; gap:6px; width:100%; padding:0 4px }
  .played-label,.played-placeholder { display:none }
  .played-card,.played-card img { width:31px; height:48px; min-height:0 }
  .played-card { flex:0 0 31px }
  .played-card+.played-card { margin:0 }
  .played-tip { position:fixed; left:12px; right:12px; top:50%; bottom:auto; width:auto; z-index:40; pointer-events:none }
  .opponent-played .played-tip { top:30%; bottom:auto }
  .center { position:relative; grid-row:3; left:auto; top:auto; transform:none; width:100%; height:94px; display:flex; align-items:center; justify-content:center; gap:24px; padding-right:110px; padding-left:48px }
  .deck,.trump-deck,.deck img { width:36px; height:55px }
  .deck span { width:20px; height:20px; line-height:18px; right:-5px; bottom:-3px; font-size:10px }
  .deck>small { top:63px; font-size:7px; letter-spacing:.4px }
  .center .revolver-station { position:absolute; left:auto; right:0; top:50%; transform:translateY(-50%); width:104px; margin:0 }
  .center #revolver { width:104px }
  .center #revolver-message { margin:0 auto; padding:3px 5px; min-height:18px }
  .center #revolver-message .ammo-bullet { width:10px; height:16px; flex-basis:10px }
  .target { padding:0; border:0!important; left:12px; top:50%; width:48px; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center }
  .target>span { display:block; font-size:7px; letter-spacing:.3px; margin:0 }
  .target strong { font-size:25px }
  .pool-wrap { display:none }
  .table-feed { z-index:6; pointer-events:none }
  .opponent-feed,.opponent-feed.pass-bubble { top:calc(50% - 86px); max-width:85%; min-height:0; padding:5px 10px }
  .opponent-feed.pass-bubble strong { font-size:11px; max-width:none }
  .player-feed { top:auto; bottom:0; width:70%; max-width:none; transform:translateX(-50%); display:none }
  .table .actionbar { grid-column:1; grid-row:2; height:56px; min-height:0; padding:4px 0; margin:0 12px; display:flex; gap:0 }
  .table .actions { width:100%; max-width:440px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; position:relative }
  .table .actions:has(.match-clock:not([hidden])) { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .actions .match-clock { position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); max-width:100%; min-height:20px; padding:2px 7px; font-size:10px; white-space:nowrap }
  .table .actions button { min-width:0; min-height:44px; height:44px; padding:6px 10px; font-size:12px; letter-spacing:.8px; border-radius:10px }
  .table .sleeve { grid-column:1; grid-row:3; height:auto; min-height:0; margin:0 12px; padding:0; overflow:visible }
  .table .sleeve-heading { top:2px; left:0; right:0 }
  .sleeve-heading h2 { font-size:8px; letter-spacing:1px }
  .table .trumps { height:100%; min-height:0; padding:20px 4px 6px; display:flex; flex-wrap:nowrap; flex-direction:row; align-items:center; justify-content:center; gap:5px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none }
  .trumps>.trump,.trumps>.trump>img { width:clamp(54px,14vw,72px); height:calc(clamp(54px,14vw,72px)*1.54) }
  .trumps>.trump { flex:0 0 clamp(54px,14vw,72px); transform:none; touch-action:pan-x }
  .trumps>.trump+.trump,.trumps.many>.trump+.trump { margin:0 }
  .trumps:has(.trump:nth-child(5)) { justify-content:flex-start }
  .trumps>.trump:hover:enabled,.trumps>.trump:focus-visible { transform:none }
  .trumps>.trump>.copy { display:none }
  .trumps>.empty { min-height:0; font-size:11px }
  .empty span { font-size:20px }
}
@media (max-width:760px) and (orientation:portrait) and (max-height:650px) {
  #app { --card-w:43px }
  .table { grid-template-rows:minmax(0,1fr) 52px 96px }
  .playfield { grid-template-rows:104px minmax(40px,1fr) 76px minmax(40px,1fr) 100px; padding-top:4px }
  .center { height:76px }
  .played-card,.played-card img { width:25px; height:38px }.played-card { flex-basis:25px }
  .table .actionbar { height:52px }
  .trumps>.trump,.trumps>.trump>img { width:48px; height:74px }.trumps>.trump { flex-basis:48px }
}

@media (max-width:760px) and (orientation:portrait) {
  .mobile-turn { display:block; margin-left:auto; max-width:65%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:10px/1.3 Arial,sans-serif; letter-spacing:.2px; color:var(--jade) }
  .target>span { max-width:48px; line-height:1.3 }
  .target strong { line-height:1 }
  .identity:has(.shield-icon) { --vital-size:12px; --vital-gap:1px; gap:5px }
}
/* Landscape keeps a side dock; every played card gets its own visible slot. */
@media (orientation:landscape) and (max-height:580px) {
  #app { padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom) }
  .topbar { height:0; min-height:0; padding:0; border:0 }
  .topbar .brand,.topbar .run,.topbar nav { display:none }
  .mobile-menu { display:grid; place-items:center; position:absolute; z-index:20; right:14px; top:6px; width:44px; height:44px; min-height:44px; padding:0; border-radius:12px; font-size:22px }
  .table { height:100%; flex:1; grid-template-columns:minmax(0,1fr) 128px; grid-template-rows:minmax(0,1fr) 52px }
  .table .sleeve { padding-top:52px }
  .table .sleeve-heading { display:none }
  .table .trumps { flex-direction:row; flex-wrap:wrap; align-content:center; gap:6px; overflow-y:auto; justify-content:center }
  .trumps>.trump,.trumps>.trump>img { width:48px; height:74px }.trumps>.trump { flex:0 0 48px; touch-action:pan-y }
  .trumps>.trump+.trump,.trumps.many>.trump+.trump { margin:0 }
  .trumps>.trump>.copy { display:none }
  .played-zone { width:100px }.played-list { flex-wrap:nowrap; gap:3px }.played-card+.played-card { margin:0 }
  .played-card,.played-card img { width:23px; height:36px }.played-card { flex-basis:23px }
  .identity { width:106px }.identity h1,.identity h2 { font-size:12px; line-height:1.2; overflow-wrap:normal }
  .table .actions,.table .actions:has(.match-clock:not([hidden])) { grid-template-columns:repeat(2,minmax(0,1fr)); position:relative; max-width:360px }
  .table .actions button { min-height:44px; font-size:11px }
  .actions .match-clock { position:absolute; left:50%; bottom:calc(100% + 2px); transform:translateX(-50%); font-size:9px; white-space:nowrap }
  .table .actionbar { height:52px }
  .player-feed { display:block; top:65%; left:15%; max-width:110px }.player-feed strong { font-size:10px }
}
/* Played cards retain a generous focus/touch area around the miniature art. */
@media (max-width:760px) and (orientation:portrait) {
  .played-card { width:44px; flex-basis:44px; min-height:44px; display:flex; justify-content:center; align-items:center }
  .hand:has(.number-card:nth-child(9)) .number-card+.number-card { margin-left:calc(var(--card-w)*-.72) }
}
@media (max-width:760px), (orientation:landscape) and (max-height:580px) {
  .played-card:hover .played-tip,.played-card:focus-visible .played-tip { display:none }
  .played-card:hover,.played-card:focus-visible { transform:none }
  .settings-menu #modal-content { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:24px }
  .settings-menu #modal-content > :not(button) { grid-column:1/-1; margin:0 0 8px }
  .settings-menu #modal-content > h2 { font-size:30px }
  .settings-menu #modal-content > button { width:100%; min-height:44px; margin:0; padding:10px; font-size:11px; letter-spacing:.5px }
}
@media (orientation:landscape) and (max-height:580px) {
  .played-zone { width:180px }
  .played-card { width:40px; flex-basis:40px; min-height:44px; display:flex; align-items:center; justify-content:center }
}

/* Newest trump on top; the complete round history is available from the stack. */
.played-list.played-stack { position:relative; display:block; width:80px; height:116px; padding:0; isolation:isolate }
.played-stack .played-card { position:absolute; left:calc(var(--stack-index)*4px); top:calc(var(--stack-index)*3px); width:67px; height:103px; min-height:0; margin:0; z-index:calc(5 - var(--stack-index)); pointer-events:none; display:block; transform:none }
.played-stack .played-card img { width:100%; height:100% }
.played-stack .played-tip { display:none }
.played-stack-button { position:absolute; inset:0; z-index:10; width:100%; height:100%; padding:0; border:0; border-radius:7px; background:transparent; box-shadow:none; cursor:pointer }
.played-stack-button:hover { background:transparent }
.played-stack-button:focus-visible { outline:2px solid var(--gold); outline-offset:4px }
.played-stack-count { position:absolute; bottom:0; right:0; min-width:23px; height:23px; padding:0 5px; display:grid; place-items:center; border:1px solid var(--gold); border-radius:50%; background:var(--deep); color:var(--gold-bright); font:12px/1 Arial,sans-serif }
.stack-cards { display:grid; gap:14px; margin:16px 0 20px }
.stack-card { display:grid; grid-template-columns:65px minmax(0,1fr); gap:14px; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--line) }
.stack-card img { display:block; width:65px; height:100px; object-fit:contain }
.stack-card h3 { margin:0 0 6px; font:18px/1.2 Georgia,serif; color:var(--gold) }
.stack-card p { margin:0; font:12px/1.5 Arial,sans-serif; color:var(--ink) }
@media (max-width:760px) and (orientation:portrait) {
  .identity,.player .identity,.identity:has(.shield-icon) { display:grid; grid-template-columns:minmax(0,1fr) max-content; grid-template-rows:16px 16px; gap:2px 8px; height:36px; align-content:center; --vital-size:14px; --vital-gap:2px }
  .identity h1,.identity h2 { grid-column:1; grid-row:1/3 }
  .identity .hearts { grid-column:2; grid-row:1; justify-self:end }
  .identity .shields { grid-column:2; grid-row:2; justify-self:end }
  .identity .seat-feedback { right:0; top:100%; font-size:14px }
  .player .identity .seat-feedback { top:auto; bottom:100% }
  .played-zone { position:absolute; left:12px; width:64px; display:block; padding:0; grid-row:auto }
  .opponent-played { top:52px; bottom:auto }
  .player-played { top:auto; bottom:42px }
  .played-list.played-stack { width:60px; height:83px }
  .played-stack .played-card { width:48px; height:74px; left:calc(var(--stack-index)*3px); top:calc(var(--stack-index)*2px) }
  .played-stack .played-placeholder { display:block; width:48px; height:74px; opacity:.3 }
  .seat .hand { width:calc(100% - 112px) }
  .hand:has(.number-card:nth-child(9)) .number-card+.number-card { margin-left:calc(var(--card-w)*-.8) }
}
@media (orientation:landscape) and (max-height:580px) {
  .played-zone { width:60px }
  .played-list.played-stack { width:53px; height:74px }
  .played-stack .played-card { width:42px; height:65px; left:calc(var(--stack-index)*3px); top:calc(var(--stack-index)*2px) }
  .identity .seat-feedback { right:0; top:100%; font-size:12px }
  .player .identity .seat-feedback { top:auto; bottom:100% }
}
/* Keep the stack title and return action visible while its cards scroll. */
.stack-view #modal-content { padding:24px }
.stack-view .stack-cards { max-height:50dvh; overflow-y:auto; overscroll-behavior:contain; padding-right:8px }
.stack-view #modal-content > h2 { font-size:28px; margin:6px 0 10px }
.stack-view #modal-content > p { margin:0 }
.stack-view #modal-content > button { min-height:44px }

/* Thin, square-cut paper edges instead of thick rounded slabs. */
.center .deck { transform:rotate(2deg) }
.center .trump-deck { transform:rotate(-2deg) }
.center .deck>img { outline:none; border-radius:3px; box-shadow:0 1px 0 #e3d2a6 }
body .center .deck::before,body .center .deck::after,
body[data-table-theme] .center .deck::before,body[data-table-theme] .center .deck::after {
  border-radius:3px; border:1px solid #ac9b71;
  box-shadow:0 1px 0 #eadbb8,0 2px 0 #655b40,0 3px 0 #d9caa7;
}
.center .deck::before { transform:translate(1px,3px) }
.center .deck::after { transform:translate(2px,6px); box-shadow:0 1px 0 #eadbb8,0 2px 0 #655b40,0 3px 0 #d9caa7,0 7px 7px #0006 }
@media (max-width:760px) and (orientation:portrait) {
  .identity,.player .identity,.identity:has(.shield-icon) { grid-template-rows:17px 19px; height:38px }
  .identity .shield-icon { width:18px; height:18px }
  .identity .shields { gap:2px }
  .player .identity .shields { grid-row:1 }
  .player .identity .hearts { grid-row:2 }
  .player .identity { grid-template-rows:19px 17px }
  .playfield { grid-template-rows:calc(var(--card-h) + 70px) minmax(54px,1fr) 94px minmax(54px,1fr) calc(var(--card-h) + 38px) }
  .seat.opponent { padding-top:64px }
  .seat .scorebox { left:50%; right:auto; transform:translateX(-50%); width:max-content; min-width:76px; top:36px; bottom:auto }
  .seat.player .scorebox { top:-28px; bottom:auto }
}
@media (max-width:760px) and (orientation:portrait) and (max-height:650px) {
  .playfield { grid-template-rows:136px minmax(40px,1fr) 76px minmax(40px,1fr) 100px }
}
@media (orientation:landscape) and (max-height:580px) {
  .identity .shield-icon { width:14px; height:14px }
}

/* Post-table screens scroll inside the game viewport. Yandex permits in-game
   menu scrolling, while the page itself remains fixed to prevent pull-to-refresh. */
.reward-screen #modal-content,
.victory-screen #modal-content {
  max-height:90dvh;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#d9bc7880 #07130d;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
}

@media (max-width:760px), (orientation:landscape) and (max-height:580px) {
  dialog.reward-screen,
  dialog.victory-screen {
    width:calc(100% - 16px);
    max-width:620px;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin:auto;
  }
  .reward-screen #modal-content,
  .victory-screen #modal-content {
    max-height:calc(100dvh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding-bottom:calc(20px + env(safe-area-inset-bottom));
  }
  .reward-screen #modal-content { padding:22px 18px calc(20px + env(safe-area-inset-bottom)) }
  .reward-screen #modal-content > .eyebrow { margin-bottom:7px; letter-spacing:2.4px }
  .reward-screen #modal-content > h2 { max-width:85%; margin-bottom:10px; font-size:clamp(30px,9vw,42px); line-height:.95 }
  .reward-screen #modal-content > p { margin-bottom:14px; font-size:12px; line-height:1.5 }
  .reward-screen .boss-reward { gap:8px; margin-bottom:16px; padding:11px }
  .reward-screen .boss-reward > .eyebrow,
  .reward-screen .reward-list > .eyebrow { margin-bottom:0; letter-spacing:2.5px }
  .reward-screen .trump {
    display:grid;
    grid-template-columns:68px minmax(0,1fr);
    align-items:center;
    gap:12px;
    width:100%;
    height:auto;
    min-height:112px;
    margin:0;
    padding:9px 11px;
    text-align:left;
  }
  .reward-screen .trump .card-art,
  .reward-screen .boss-earned .card-art {
    width:68px;
    height:105px;
    align-self:center;
  }
  .reward-screen .trump .copy { min-width:0; gap:6px }
  .reward-screen .trump b { font-size:clamp(16px,5vw,21px); line-height:1.05; overflow-wrap:anywhere }
  .reward-screen .trump small { font-size:10px; line-height:1.4; overflow-wrap:anywhere }
  .reward-screen .boss-earned { min-height:112px; opacity:1 }
  .reward-screen .boss-note { font-size:10px; line-height:1.45 }
  .reward-screen .reward-list { gap:9px }
  .reward-screen .reward-list .trump { min-height:112px }

  .victory-screen #modal-content { padding-bottom:calc(20px + env(safe-area-inset-bottom)) }
  .victory-screen .victory-art { height:clamp(112px,23dvh,170px) }
  .victory-screen #modal-content > .eyebrow,
  .victory-screen #modal-content > h2,
  .victory-screen #modal-content > p,
  .victory-screen #modal-content > .victory-unlock,
  .victory-screen #modal-content > button { margin-left:18px; margin-right:18px }
  .victory-screen #modal-content > .eyebrow { margin-top:2px; letter-spacing:2.5px }
  .victory-screen #modal-content > h2 { margin-bottom:10px; font-size:clamp(28px,8.5vw,38px); line-height:1 }
  .victory-screen #modal-content > p { margin-bottom:12px; font-size:12px; line-height:1.5 }
  .victory-screen .victory-unlock { margin-top:14px!important; margin-bottom:10px!important; padding:12px 14px }
  .victory-screen .victory-unlock strong { font-size:20px }
  .victory-screen #modal-content > button { width:calc(100% - 36px); min-height:48px; margin-top:8px; padding:10px 12px }
}

@media (max-width:360px), (orientation:landscape) and (max-height:480px) {
  .reward-screen #modal-content { padding:17px 14px calc(16px + env(safe-area-inset-bottom)) }
  .reward-screen #modal-content > h2 { font-size:28px }
  .reward-screen .trump { grid-template-columns:58px minmax(0,1fr); min-height:96px; gap:10px; padding:7px 9px }
  .reward-screen .trump .card-art,
  .reward-screen .boss-earned .card-art { width:58px; height:89px }
  .reward-screen .trump b { font-size:16px }
  .victory-screen .victory-art { height:96px }
}