/* Compact portrait table. Dialogs remain independently scrollable. */
.pack-store {
  margin-top: 20px;
  padding: 16px;
  background: #152f32;
  border: 1px solid #68ada4;
  border-radius: 10px;
}
.pack-store h3 {
  margin: 0;
  font-size: 22px;
}
.pack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pack-grid article {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: #224b49;
  border-radius: 8px;
}
.pack-grid article span {
  font-size: 14px;
  color: #c2d7cc;
}
.pack-grid button {
  padding: 10px;
  background: #7f693b;
  border-radius: 6px;
}
.pack-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.pack-choice {
  width: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px;
  border: 1px solid #6c9180;
  border-radius: 9px;
  background: #1c3935;
}
.pack-choice p {
  font-size: 14px;
}
.pack-choice h3 {
  font-size: 17px;
}
.pack-choice button {
  font-size: 16px;
  margin-top: auto;
  min-width: 0;
}
.joker-card.spectral {
  background: #a9e5dd;
}
.board-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.board-tabs button {
  padding: 10px;
  border-radius: 6px;
  background: #254e42;
}
.board-tabs .active {
  background: #e9c473;
  color: #293f36;
}
.mini-card small {
  position: absolute;
  right: 1px;
  top: 0;
  font-size: 10px;
  color: #985480;
}
@media (max-width: 480px) {
  .pack-choices {
    gap: 8px;
  }
  .pack-choice {
    width: calc(50% - 4px);
    padding: 10px 7px;
  }
  .pack-grid {
    gap: 8px;
  }
  .pack-grid article {
    padding: 12px;
  }
  .pack-grid strong {
    font-size: 15px;
  }
}
.update-banner {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: #f6c566;
  color: #183c32;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 4px 20px #0005;
}
.install-pwa {
  font-size: 12px;
  border: 1px solid #a0bb95;
  padding: 6px;
  border-radius: 5px;
}
.save-list {
  display: grid;
  gap: 12px;
}
.save-row {
  padding: 14px;
  background: #1b3330;
  border: 1px solid #627f69;
  border-radius: 8px;
  display: grid;
  gap: 8px;
}
.save-row small {
  font-size: 12px;
  color: #bad0bf;
}
.save-row span {
  font-size: 14px;
}
.save-row button,
.file-import {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 5px;
  background: #466458;
  margin: 3px;
  font-size: 14px;
}
.file-import input {
  display: block;
  max-width: 200px;
  font-size: 12px;
}
.hand,
.joker-slots,
.manage-order {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.hand .card,
.hand .card.selected,
.hand .card:hover,
.hand .card.selected:hover {
  z-index: auto;
}
@media (max-width: 700px) {
  .topbar {
    padding: 6px 12px;
  }
  .wordmark {
    font-size: 25px;
  }
  .wordmark i,
  .edition,
  .top-actions .icon-btn span {
    display: none;
  }
  .top-actions {
    gap: 10px;
  }
  .icon-btn {
    min-width: 36px;
    min-height: 36px;
  }
  .eyebrow span,
  .blind-chip,
  .target-label,
  .blind-name span {
    display: none;
  }
  .target span {
    font-size: 16px;
  }
  .blind-rule {
    font-size: 12px;
    line-height: 1.3;
    min-height: 0;
    padding: 4px 0;
    background: none;
    text-align: left;
  }
  .calculation > span {
    font-size: 21px;
  }
  .resources span {
    font-size: 12px;
  }
  .zone-label > span:last-child {
    font-size: 12px;
  }
  .joker-slots .joker-card,
  .consume-slots .joker-card {
    width: calc((100% - 16px) / 5);
    height: 64px;
    min-width: 0;
    flex: 1;
    border-width: 2px;
    padding: 2px;
  }
  .joker-slots .joker-card .j-symbol,
  .consume-slots .joker-card .j-symbol {
    font-size: 25px;
  }
  .slot {
    height: 64px;
    font-size: 18px;
  }
  .play-zone {
    min-height: 78px;
    flex: 1;
    padding: 2px;
    gap: 1px;
  }
  .played-cards .card {
    --card-width: 40px;
  }
  .hand-top {
    font-size: 13px;
    margin: 0 0 24px;
  }
  .hand-top span {
    font-size: 12px;
    margin-left: 3px;
  }
  .hand {
    height: 99px;
    padding: 0;
    justify-content: center;
  }
  .hand .card {
    --card-width: 64px;
    margin-left: clamp(-30px, calc((100vw - 32px - 512px) / 7), -4px);
  }
  .hand .card:first-child {
    margin-left: 0;
  }
  .hand-bottom > span,
  .hand-bottom button {
    font-size: 12px;
  }
  .hand-bottom > span:last-child {
    display: none;
  }
  footer > span:not(#save-status) {
    display: none;
  }
}
@media (max-width: 700px) and (max-height: 720px) {
  .joker-slots .joker-card,
  .consume-slots .joker-card,
  .slot {
    height: 52px;
  }
  .joker-card .j-symbol {
    font-size: 21px !important;
  }
  .play-zone {
    min-height: 64px;
  }
  .played-cards .card {
    --card-width: 32px;
  }
  .hand-top {
    margin-bottom: 20px;
  }
  .hand .card {
    --card-width: 58px;
    margin-left: clamp(-27px, calc((100vw - 32px - 464px) / 7), -3px);
  }
  .hand {
    height: 88px;
  }
  .blind-rule {
    font-size: 12px;
  }
  .hand-level {
    display: none;
  }
}

/* Sound uses an explicit on/off icon; mobile reserves label space for cloud status. */
#sound {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 5px 8px;
  border: 1px solid;
  border-radius: 7px;
  white-space: nowrap;
}
#sound svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.top-actions #sound span {
  display: inline;
  font-size: 12px;
  margin: 0;
}
#sound[data-state='on'] {
  color: #b9f8d5;
  background: #174d3f;
  border-color: #71cfa1;
}
#sound[data-state='off'] {
  color: #d2d7d6;
  background: #283c3d;
  border-color: #778987;
}
@media (max-width: 700px) {
  .top-actions {
    gap: 6px;
  }
}
@media (max-width: 380px) {
  .topbar {
    padding-inline: 8px;
  }
  .wordmark {
    font-size: 20px;
  }
  .top-actions {
    gap: 3px;
  }
  .top-actions .icon-btn {
    min-width: 32px;
    padding-inline: 3px;
  }
}
/* Cloud sync is optional. Hidden must win over the toolbar's display rules. */
#account[hidden] {
  display: none !important;
}
#account {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 5px 7px;
  border: 1px solid #91a8a466;
  border-radius: 7px;
  color: #bfd0ca;
}
#account svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#account .cloud-check {
  display: none;
}
#account[data-state='synced'] .cloud-check {
  display: block;
}
#account span {
  font-size: 12px;
  margin: 0;
}
#account .cloud-dot {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px #164f43;
}
#account[data-state='synced'],
#account[data-state='ready'] {
  color: #b9f8d5;
  border-color: #71cfa177;
}
#account[data-state='syncing'] {
  color: #96dafa;
}
#account[data-state='pending'],
#account[data-state='signin'] {
  color: #f6d88f;
}
#account[data-state='error'],
#account[data-state='conflict'],
#account[data-state='account'] {
  color: #ffaba7;
  border-color: #ee8d8877;
}
#account[data-state='offline'] {
  color: #a7b6b4;
  border-style: dashed;
}
#account[data-state='syncing'] .cloud-dot {
  animation: cloud-pulse 1s ease-in-out infinite;
}
@keyframes cloud-pulse {
  50% {
    opacity: 0.25;
    transform: scale(0.6);
  }
}
.reduce-motion #account .cloud-dot {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  #account .cloud-dot {
    animation: none;
  }
}
@media (max-width: 700px) {
  /* Wrap only when a narrow viewport, larger text or install action needs room. */
}

@media (hover: none) {
  .hand .card:hover {
    --lift: 0px;
    --fan: var(--rot, 0deg);
  }
  .hand .card.selected,
  .hand .card.selected:hover {
    --lift: -18px;
    --fan: 0deg;
  }
  [data-info-card],
  [data-info-item] {
    -webkit-touch-callout: none;
  }
  .card-tooltip {
    max-width: min(20rem, calc(100vw - 20px));
    font-size: 14px;
  }
}
@media (max-width: 700px) {
  body {
    min-height: 100svh;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .game {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 10px;
    margin: 0;
    min-height: calc(100svh - 66px - env(safe-area-inset-bottom));
  }
  .sidebar {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 6px;
    width: 100%;
    padding: 7px;
    border-width: 2px;
    border-radius: 10px;
    align-self: stretch;
  }
  .blind-panel {
    grid-column: 1;
    grid-row: 1;
    border: 0;
    padding: 5px;
  }
  .eyebrow {
    padding: 0;
    background: none;
    font-size: 12px;
  }
  .blind-name {
    margin: 4px 0;
    justify-content: flex-start;
  }
  .blind-name h1 {
    font-size: 18px;
    margin: 0;
  }
  .target {
    text-align: left;
    font-size: 24px;
    line-height: 1.1;
  }
  .score-panel {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .score-label {
    font-size: 12px;
  }
  .score-label strong {
    font-size: 19px;
  }
  .score-track {
    margin: 4px 0;
    height: 3px;
  }
  .hand-title {
    font-size: 18px;
    min-height: 0;
    line-height: 1.2;
  }
  .hand-level {
    font-size: 12px;
    margin: 2px 0 4px;
  }
  .calculation {
    font-size: 23px;
    grid-template-columns: 1fr 15px 1fr;
    gap: 3px;
  }
  .calculation > div {
    padding: 0;
    overflow-wrap: anywhere;
  }
  .calc-label {
    display: none;
  }
  .resources {
    grid-column: 1/-1;
    display: flex;
    gap: 6px;
  }
  .resources > div,
  .resources .money {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 3px;
  }
  .resources strong,
  .money strong {
    font-size: 21px;
  }
  .ante-row,
  .side-buttons,
  .deck-label {
    display: none;
  }
  .table {
    flex: 1;
    gap: 5px;
  }
  .inventory-row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
    gap: 8px;
    min-height: 0;
  }
  .zone-label {
    font-size: 12px;
    margin: 0 0 3px;
  }
  .joker-slots,
  .consume-slots {
    min-height: 0;
    padding: 4px;
    gap: 4px;
    border-radius: 6px;
  }
  .consume-slots .joker-card {
    width: calc((100% - 4px) / 2);
  }
  .joker-card .j-type {
    display: none;
  }
  .joker-slots .joker-card .j-name,
  .consume-slots .joker-card .j-name {
    font-size: 10px;
    white-space: normal;
    line-height: 1.1;
    margin-top: 1px;
  }
  .table-caption {
    display: none;
  }
  .played-cards {
    margin-top: 0;
    gap: 6px;
  }
  #event-message {
    font-size: 12px;
    line-height: 1.3;
    margin-top: 3px;
  }
  .last-score {
    font-size: 21px;
    min-height: 24px;
    line-height: 1.1;
  }
  .skip-animation {
    font-size: 12px;
    right: 0;
    bottom: 0;
    min-height: 30px;
  }
  .hand-zone {
    padding: 0;
  }
  .sort {
    font-size: 12px;
    gap: 3px;
  }
  .sort button {
    font-size: 12px;
    min-height: 30px;
    padding: 4px 6px;
  }
  .hand .card.selected,
  .hand .card.selected:hover {
    --lift: -18px;
    --fan: 0deg;
  }
  .hand .card.not-scoring::before {
    display: none;
  }
  .hand-bottom {
    font-size: 12px;
    margin: 0;
    padding: 2px 0;
    gap: 5px;
  }
  .hand-bottom button {
    min-height: 26px;
  }
  .assist-tools {
    margin: 3px 0 0;
    gap: 4px;
    flex-wrap: nowrap;
  }
  .assist-tools button,
  .assist-tools button:last-child {
    font-size: 12px;
    padding: 5px 4px;
    min-height: 31px;
  }
  .assist-tools kbd {
    display: none;
  }
  .table-bottom {
    padding: 6px 0 0;
    gap: 8px;
  }
  .play-actions {
    flex: 1;
    gap: 10px;
  }
  .play-actions .action {
    min-width: 0;
    flex: 1;
    padding: 8px;
    font-size: 21px;
    min-height: 48px;
  }
  .play-actions small,
  .keyboard-tip,
  .deck-button .card-back {
    display: none;
  }
  .deck-button {
    gap: 2px;
    min-width: 45px;
    padding: 0;
    font-size: 12px;
  }
  .deck-button b {
    font-size: 18px;
  }
  .deck-button small {
    font-size: 12px;
  }
  footer {
    height: 20px;
    margin: 0;
    padding: 3px 12px;
    font-size: 12px;
  }
  footer #save-status {
    font-size: 12px;
  }
  dialog {
    max-height: calc(100dvh - 20px);
    max-width: calc(100vw - 16px);
  }
  .modal-actions {
    flex-wrap: wrap;
  }
  .modal-header h2 {
    font-size: 23px;
  }
  .top-actions #sound {
    width: 36px;
    padding: 4px;
    gap: 0;
    flex: none;
  }
  .top-actions #sound span {
    display: none;
  }
  .top-actions #account span {
    display: inline;
    font-size: 14px;
    white-space: nowrap;
  }
  .top-actions #account {
    padding: 4px 6px;
    flex: none;
  }
  .topbar {
    height: auto;
    min-height: 46px;
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .sort button,
  .assist-tools button,
  .hand-bottom button {
    min-height: 36px;
  }
  .selection-hint {
    line-height: 1.35;
    min-height: 17px;
    margin: 3px 0;
    font-size: 0.875rem;
  }
  .modal-inner {
    padding: 16px;
    overflow-wrap: anywhere;
  }
  .modal-actions .action {
    font-size: 16px;
    min-width: 100px;
    padding: 10px;
    min-height: 44px;
  }
}

/* Short laptop and tablet-landscape screens: keep the play and discard buttons above the fold. */
@media (min-width: 701px) and (max-height: 900px) {
  .topbar {
    height: 64px;
    padding-block: 8px;
  }
  .wordmark {
    font-size: 30px;
  }
  .wordmark i {
    margin-top: 5px;
  }
  .blind-name {
    margin: 8px 0 4px;
  }
  .blind-chip {
    height: 50px;
    width: 50px;
    border-width: 5px;
    font-size: 24px;
  }
  .target {
    font-size: 30px;
    line-height: 1.2;
  }
  .score-panel {
    padding-top: 10px;
  }
  .score-track {
    margin: 6px 0 10px;
  }
  .hand-level {
    margin: 2px 0 8px;
  }
  .calc-label {
    margin: 6px 0 10px;
  }
  .resources > div {
    padding: 5px;
  }
  .inventory-row {
    min-height: 0;
  }
  /* Fixed height so a played hand does not push the action buttons down. */
  .play-zone {
    min-height: 0;
    flex: 0 0 140px;
    padding-block: 4px;
  }
  .table-caption {
    display: none;
  }
  .played-cards {
    margin-top: 0;
  }
  .played-cards .card {
    --card-width: 54px;
  }
  .last-score {
    font-size: 26px;
    min-height: 32px;
  }
  .hand-top {
    margin-bottom: 10px;
  }
  .resources {
    grid-template-columns: repeat(3, 1fr);
  }
  .resources .money {
    grid-column: auto;
    flex-direction: column;
    gap: 0;
  }
  .ante-row {
    padding: 8px 0;
  }
  .deck-label {
    margin-top: 10px;
  }
  .joker-slots,
  .consume-slots {
    min-height: 0;
    padding: 6px 10px;
  }
  .zone-label {
    margin-bottom: 6px;
  }
  .hand .card {
    --card-width: 92px;
  }
  .hand {
    height: 140px;
  }
  .hand-bottom {
    padding: 4px 0 6px;
  }
  .selection-hint {
    margin-bottom: 6px;
  }
  .assist-tools {
    margin-bottom: 8px;
  }
  .table-bottom {
    padding-top: 10px;
  }
}

@media (min-width: 701px) and (max-height: 760px) {
  .hand .card {
    --card-width: 82px;
  }
  .hand {
    height: 124px;
  }
  .wordmark i {
    display: none;
  }
  .topbar {
    height: 52px;
  }
}

/* Phones with browser toolbars showing (roughly 600–800px of visible height): the whole
   table, including play and discard, must fit without scrolling. */
@media (max-width: 700px) and (max-height: 800px) {
  .joker-slots .joker-card,
  .consume-slots .joker-card,
  .slot,
  .consume-slots .slot {
    height: 46px;
  }
  .consume-slots {
    height: auto;
  }
  .play-zone {
    min-height: 0;
    flex: 1 0 78px;
    padding-block: 2px;
  }
  .hand-top {
    margin-bottom: 10px;
  }
  .hand-bottom {
    padding: 2px 0;
  }
  .selection-hint {
    margin-bottom: 2px;
  }
  .assist-tools {
    margin-bottom: 4px;
  }
  .table-bottom {
    padding-top: 6px;
  }
  .topbar {
    height: 42px;
  }
  #game-view :is(.sort, .assist-tools, .hand-bottom) button {
    min-height: 26px;
    padding-block: 3px;
  }
  footer {
    display: none;
  }
}
@media (max-width: 700px) and (max-height: 700px) {
  .played-cards .card {
    --card-width: 28px;
  }
  .last-score {
    font-size: 18px;
    min-height: 20px;
  }
}