* {
  box-sizing: border-box;
}
html,
body {
  /* Flying cards and tooltips must never widen the mobile layout viewport. */
  overflow-x: clip;
}
body {
  margin: 0;
  background: #145547;
  color: var(--cream);
  font-family: var(--font);
  font-weight: 600;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse at 80% 0%, #26776377, transparent 50%),
    repeating-radial-gradient(
      ellipse at 75% 45%,
      #13554600 0px,
      #103e391e 100px,
      #47887714 155px,
      #13554600 220px
    );
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  transition:
    transform 0.14s,
    filter 0.15s;
  background: none;
}
button:hover:not(:disabled) {
  filter: brightness(1.13);
  transform: translateY(-2px);
}
button:active:not(:disabled) {
  transform: translateY(2px);
}
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  opacity: 0.16;
  background: repeating-linear-gradient(
    0deg,
    #0002 0px,
    #0002 1px,
    transparent 1px,
    transparent 4px
  );
}
.topbar {
  height: 100px;
  max-width: 1490px;
  padding: 22px 45px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  font-size: 38px;
  letter-spacing: -2px;
  font-weight: 900;
  text-shadow: 3px 3px 0 #072e28;
  text-decoration: none;
  color: var(--cream);
  transform: rotate(-3deg);
  line-height: 1;
}
.wordmark > span {
  color: var(--red);
}
.wordmark i {
  display: block;
  font-style: normal;
  letter-spacing: 5px;
  font-size: 12px;
  text-align: center;
  margin-top: 9px;
}
.top-actions {
  gap: 20px;
}
.edition {
  font-size: 12px;
  color: #bad2c4;
  letter-spacing: 1px;
  margin-right: 22px;
}
.icon-btn {
  font-size: 21px;
  color: #e1e9d9;
}
.icon-btn span {
  font-size: 14px;
  margin-left: 3px;
}
.game {
  grid-template-columns: 274px 1fr;
  gap: 36px;
  padding: 0 24px;
}
.sidebar {
  background: #2b3e40;
  border: 3px solid #57716c;
  border-radius: 15px;
  padding: 14px;
  box-shadow:
    0 6px 0 #10382f,
    inset 0 1px #ffffff20;
  align-self: start;
}
.blind-panel {
  border-radius: 9px;
  background: #283638;
  overflow: hidden;
  border: 2px solid #71827c;
}
.eyebrow {
  background: #526968;
  padding: 9px 12px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
.eyebrow span {
  font-size: 12px;
  color: #d5e1d3;
}
.blind-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  margin: 16px 0 11px;
}
.blind-chip {
  height: 66px;
  width: 66px;
  border-radius: 50%;
  border: 7px dashed #ebbb70;
  background: #b88945;
  box-shadow:
    0 0 0 4px #74532c,
    inset 0 0 0 3px #7c5c32,
    0 5px 0 #152c27;
  color: #ffedb9;
  font-size: 32px;
  display: grid;
  place-items: center;
}
.blind-name h1 {
  font-size: 25px;
  margin: 0 0 4px;
}
.blind-name span {
  color: var(--gold);
  font-size: 14px;
}
.target-label {
  text-align: center;
  font-size: 13px;
  color: #d2d9d0;
}
.target {
  text-align: center;
  font-size: 37px;
  line-height: 1.35;
}
.target span {
  font-size: 25px;
  color: var(--red);
}
.blind-rule {
  font-size: 12px;
  text-align: center;
  background: #172b2a;
  padding: 9px 5px;
  color: #b7ccc4;
  min-height: 32px;
}
.score-panel {
  padding-top: 16px;
}
.score-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.score-label strong {
  font-size: 28px;
}
.score-track {
  height: 5px;
  background: #192e2f;
  border-radius: 5px;
  margin: 8px 0 17px;
  overflow: hidden;
}
.score-track div {
  height: 100%;
  background: var(--gold);
  width: 0;
  transition: width 0.5s;
}
.hand-title {
  text-align: center;
  font-size: 25px;
  min-height: 34px;
}
.hand-level {
  font-size: 12px;
  text-align: center;
  color: #b5c3be;
  margin: 3px 0 12px;
}
.calculation {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  align-items: center;
  gap: 5px;
  text-align: center;
  font-size: 30px;
}
.calculation > div {
  border-radius: 7px;
  padding: 3px 2px;
  box-shadow: 0 4px 0 #152a2b;
}
.chips {
  background: var(--blue);
}
.mult {
  background: var(--red);
}
.calculation > span {
  font-size: 32px;
}
.calc-label {
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  color: #bfd0c9;
  margin: 9px 0 17px;
}
.resources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.resources > div {
  background: #1f3335;
  padding: 9px;
  border-radius: 7px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.resources span {
  font-size: 13px;
}
.resources strong {
  font-size: 35px;
  line-height: 1.2;
}
.blue {
  color: #53b5fe;
}
.red {
  color: #ff7d83;
}
.resources .money {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: var(--gold);
  padding: 8px;
}
.money strong {
  font-size: 30px;
}
.ante-row {
  display: flex;
  justify-content: space-around;
  padding: 16px 0;
  font-size: 14px;
}
.ante-row strong {
  font-size: 23px;
  display: block;
  color: var(--gold);
}
.ante-row strong span {
  font-size: 15px;
  color: #bacbc4;
}
.side-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.side-buttons button {
  background: #567170;
  border-radius: 6px;
  padding: 10px 3px;
  font-size: 13px;
  box-shadow: 0 3px #182e2f;
}
.side-buttons button:last-child {
  background: #8c5351;
}
.deck-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 14px;
  color: #d5ded3;
}
.deck-label small {
  display: block;
  font-size: 12px;
  color: #97b3a7;
  margin-top: 2px;
}
.tiny-deck {
  color: #fa7574;
  font-size: 35px;
}
.inventory-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 24px;
  min-height: 190px;
}
.zone-label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #d0dfd2;
  margin: 0 2px 10px;
}
.zone-label > span:last-child {
  color: #9fbcae;
  font-size: 13px;
}
.joker-slots,
.consume-slots {
  display: flex;
  gap: 10px;
  background: #073b302a;
  border: 2px solid #9abcd224;
  border-radius: 11px;
  padding: 12px;
  min-height: 143px;
  align-items: center;
}
.slot {
  border: 2px dashed #b9d3bc2b;
  border-radius: 6px;
  flex: 1;
  min-width: 0;
  height: 114px;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: #bfd5c02b;
}
.joker-card {
  width: 82px;
  height: 114px;
  flex-shrink: 0;
  background: #f0dab8;
  color: #302b37;
  border: 4px solid #ecddc8;
  border-radius: 6px;
  box-shadow:
    0 4px #0d3028,
    inset 0 0 0 2px #433b52;
  position: relative;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.joker-card .j-symbol {
  font-size: 42px;
  line-height: 1.3;
  filter: drop-shadow(2px 3px 0 #0002);
}
.joker-card .j-name {
  font-size: 12px;
  line-height: 1.2;
  margin-top: 4px;
  white-space: nowrap;
}
.joker-card .j-type {
  font-size: 9px;
  letter-spacing: 2px;
  position: absolute;
  top: 6px;
}
.joker-card.uncommon {
  background: #bacde4;
}
.joker-card.rare {
  background: #e8abc2;
}
.joker-card.planet {
  background: #bfc2e8;
}
.joker-card.tarot {
  background: #e3b3ce;
}
.play-zone {
  min-height: 215px;
}
.line {
  height: 1px;
  background: #b6d1c322;
  flex: 1;
  max-width: 100px;
}
#event-message {
  color: #d6e2d4;
  font-size: 15px;
  margin-top: 18px;
  text-align: center;
  line-height: 1.7;
}
.last-score {
  font-size: 34px;
  color: var(--gold);
  min-height: 42px;
  text-shadow: 2px 3px #073b30;
}
.played-cards {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
}
.played-cards:empty {
  display: none;
}
.played-cards .card {
  width: 66px;
  height: 91px;
  pointer-events: none;
  font-size: 15px;
}
.played-cards .card .center-suit {
  font-size: 32px;
}
.played-cards .card .corner {
  font-size: 16px;
}
.hand-zone {
  padding: 0 8px;
}
.hand-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 34px;
}
.hand-top span {
  color: #98baaa;
  font-size: 13px;
  margin-left: 7px;
}
.sort {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #9cb8a9;
  font-size: 12px;
}
.sort button {
  border-radius: 5px;
  padding: 6px 12px;
  background: #164338;
  color: #aec4b5;
  font-size: 13px;
}
.sort button.active {
  background: #e6dfc9;
  color: #214c40;
  box-shadow: 0 3px #092f27;
}
.hand {
  display: flex;
  justify-content: center;
  padding: 0 5px;
  height: 160px;
  align-items: start;
}
.card {
  width: 103px;
  height: 147px;
  background: #f2eee1;
  color: #283b3b;
  border-radius: 7px;
  border: 3px solid #fbf6e9;
  box-shadow:
    0 5px 0 #143c32,
    1px 2px 9px #001c273a;
  position: relative;
  /* Position (lift, fan) and pointer tilt (--rx/--ry, set by feel.js) compose in one transform. */
  transform: translateY(var(--lift, 0px)) rotate(var(--fan, var(--rot, 0deg))) perspective(800px)
    rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-origin: bottom center;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.hand .card {
  margin-left: -10px;
}
.hand .card:first-child {
  margin-left: 0;
}
.card::after {
  content: '';
  position: absolute;
  border: 1px solid #ccc7b566;
  border-radius: 3px;
  z-index: -1;
}
.card.red-suit {
  color: #e34d54;
}
.card .corner {
  position: absolute;
  top: 6px;
  left: 7px;
  font-size: 22px;
  line-height: 0.9;
  text-align: center;
  font-weight: bold;
}
.card .corner small {
  display: block;
  font-size: 20px;
  line-height: 1.25;
}
.card .corner.bottom {
  top: auto;
  left: auto;
  bottom: 6px;
  right: 7px;
  transform: rotate(180deg);
}
.center-suit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 56px;
}
.card.face .center-suit {
  font-size: 45px;
  border: 2px solid currentColor;
  inset: 25px 22px;
  background: repeating-linear-gradient(45deg, transparent 0 5px, #b5a88614 5px 8px);
  line-height: 1;
}
.card:hover:not(:disabled) {
  --lift: -12px;
  --fan: 0deg;
  z-index: 3;
}
.card.selected {
  --lift: -25px;
  --fan: 0deg;
  box-shadow:
    0 5px #eab84c,
    0 0 0 2px #f2cc6a;
  z-index: 2;
}
.card.selected:hover {
  --lift: -29px;
}
.card.debuff {
  filter: grayscale(1);
  opacity: 0.6;
}
.table-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #95b6a12b;
  padding: 17px 8px 0;
  gap: 12px;
}
.play-actions {
  display: flex;
  gap: 14px;
}
.action {
  border-radius: 8px;
  padding: 10px 31px;
  font-size: 21px;
  min-width: 137px;
  box-shadow:
    0 5px #123d39,
    inset 0 2px #ffffff25;
  text-shadow: 1px 2px #0003;
}
.action small {
  display: block;
  font-size: 10px;
  letter-spacing: 1.5px;
  margin-top: 2px;
}
.blue-btn {
  background: #278fd1;
}
.red-btn {
  background: #d85356;
}
.gold-btn {
  background: #e1ac50;
  color: #273e39;
  text-shadow: none;
}
.green-btn {
  background: #427c64;
}
.keyboard-tip {
  color: #a7c3b291;
  font-size: 11px;
}
.deck-button {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 13px;
  color: #b6cbba;
}
.deck-button b {
  color: var(--cream);
  font-size: 22px;
}
.deck-button small {
  display: block;
  font-size: 12px;
}
.card-back {
  height: 64px;
  width: 46px;
  background: repeating-linear-gradient(45deg, #ac413f 0 3px, #ce6657 3px 5px);
  border: 4px solid var(--cream);
  border-radius: 4px;
  box-shadow:
    3px 2px #d4d0be,
    6px 4px #aeb6a0;
  display: grid;
  place-items: center;
  color: #f8d6b3;
  font-size: 24px;
}
footer {
  max-width: 1352px;
  margin: 28px auto 20px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #9cbeaa77;
  padding: 0 24px;
}
footer > span:first-child {
  letter-spacing: 8px;
}
dialog {
  background: #2d4141;
  color: var(--cream);
  border: 3px solid #79988a;
  border-radius: 15px;
  padding: 0;
  max-width: min(760px, 94vw);
  width: 680px;
  max-height: 90vh;
  box-shadow: 0 15px 80px #001a18aa;
}
dialog::backdrop {
  background: #051f1ee6;
  backdrop-filter: blur(5px);
}
.modal-inner {
  padding: 28px;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.close {
  background: #536c64;
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 24px;
}
.modal-inner p {
  font-size: 15px;
  line-height: 1.85;
  color: #ccd9cd;
}
.modal-inner h3 {
  font-size: 18px;
}
.modal-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 25px;
  flex-wrap: wrap;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 15px;
}
.shop-item {
  background: #1e3333;
  border: 1px solid #68837366;
  border-radius: 9px;
  padding: 15px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shop-item p {
  font-size: 13px;
  line-height: 1.6;
  flex: 1;
  margin: 12px 0;
}
.shop-item > button:last-child {
  background: #dca652;
  color: #283e34;
  border-radius: 5px;
  padding: 7px 18px;
  width: 100%;
  font-size: 15px;
}
.shop-card {
  pointer-events: none;
  width: 90px;
  height: 125px;
}
.shop-item.sold {
  opacity: 0.4;
}
.help-line {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  margin: 18px 0;
}
.help-line b {
  color: var(--gold);
  font-size: 24px;
}
.help-line p {
  margin: 0;
}
.boss-warning {
  background: #513b50;
  padding: 12px;
  border-radius: 6px;
  color: #ecd6e6 !important;
}
.settlement {
  font-size: 20px;
  text-align: center;
  line-height: 2.3;
}
.settlement strong {
  color: var(--gold);
}
.end-number {
  font-size: 58px;
  text-align: center;
  color: var(--gold);
}
.deck-grid {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 5px;
}
.deck-mini {
  padding: 8px 0;
  background: #e6e1d4;
  border-radius: 3px;
  color: #243d39;
  text-align: center;
  font-size: 14px;
}
.deck-mini.used {
  opacity: 0.23;
}
.deck-mini.red-suit {
  color: #bc3746;
}
.toast {
  transform: translate(-50%, 20px);
  background: #e8dfc5;
  color: #253d35;
  box-shadow: 0 4px #10382f;
  border-radius: 7px;
  opacity: 0;
  transition: 0.2s;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@keyframes scorepop {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@media (min-width: 1500px) {
  .play-zone {
    min-height: 265px;
  }
  .hand {
    height: 180px;
  }
  .card {
    width: 115px;
    height: 163px;
  }
}
@media (max-width: 1150px) {
  .game {
    gap: 20px;
    grid-template-columns: 245px 1fr;
  }
  .inventory-row {
    grid-template-columns: 1fr 150px;
    gap: 13px;
  }
  .joker-slots,
  .consume-slots {
    gap: 6px;
    padding: 8px;
  }
  .joker-card {
    width: 66px;
    height: 104px;
  }
  .slot {
    height: 104px;
  }
  .joker-card .j-name {
    font-size: 10px;
  }
  .card {
    width: 87px;
    height: 129px;
  }
  .hand {
    height: 144px;
  }
  .hand .card {
    margin-left: -17px;
  }
  .action {
    padding: 10px 23px;
  }
  .topbar {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 850px) {
  .game {
    padding: 0 12px;
    grid-template-columns: 200px 1fr;
    gap: 14px;
  }
  .consume-slots .joker-card {
    height: 35px;
    width: 80px;
    flex-direction: row;
    gap: 4px;
  }
  .consume-slots .j-name {
    font-size: 10px;
  }
  .play-zone {
    min-height: 192px;
  }
  .card {
    width: 74px;
    height: 113px;
  }
  .card .corner {
    font-size: 19px;
    left: 4px;
    top: 5px;
  }
  .card .corner small {
    font-size: 17px;
  }
  .card .corner.bottom {
    right: 4px;
    bottom: 5px;
  }
  .center-suit {
    font-size: 40px;
  }
  .card.face .center-suit {
    font-size: 30px;
    inset: 24px 20px;
  }
}
@media (max-width: 620px) {
  .top-actions {
    gap: 12px;
  }
  .eyebrow span {
    font-size: 10px;
  }
  .blind-name span {
    font-size: 12px;
  }
  .calculation > span {
    font-size: 22px;
  }
  .resources span {
    font-size: 10px;
  }
  .ante-row strong span {
    font-size: 12px;
  }
  .zone-label > span:last-child {
    font-size: 10px;
  }
  .joker-card {
    width: 48px;
    height: 78px;
    border-width: 3px;
    padding: 2px;
  }
  .joker-card .j-name {
    font-size: 9px;
    white-space: normal;
    line-height: 1;
  }
  .consume-slots .joker-card {
    height: 78px;
    width: 36px;
    flex-direction: column;
  }
  .play-zone {
    min-height: 145px;
  }
  .played-cards .card {
    width: 45px;
    height: 63px;
  }
  .played-cards .card .corner {
    font-size: 11px;
  }
  .played-cards .card .corner small {
    font-size: 10px;
  }
  .played-cards .card .center-suit {
    font-size: 22px;
  }
  .played-cards .card.face .center-suit {
    inset: 15px 10px;
  }
  .hand-top span {
    font-size: 11px;
    margin-left: 2px;
  }
  .sort button {
    font-size: 11px;
    padding: 5px 8px;
  }
  .card {
    width: 66px;
    height: 97px;
  }
  .card .corner {
    font-size: 16px;
    left: 3px;
  }
  .card .corner small {
    font-size: 14px;
  }
  .card .corner.bottom {
    right: 3px;
  }
  .center-suit {
    font-size: 32px;
  }
  .card.face .center-suit {
    font-size: 24px;
    inset: 23px 18px;
  }
  .action small {
    font-size: 8px;
  }
  .deck-button small {
    font-size: 10px;
  }
  .shop-item p {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 620px) {
  .joker-slots .joker-card {
    width: calc((100% - 16px) / 5);
    min-width: 0;
  }
}
/* Interaction edition: the same table, with readable feedback and tactile motion. */
.game {
  max-width: 1400px;
  margin: 8px auto 0;
  display: grid;
  padding-bottom: 3px;
}
.table {
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.play-zone {
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 206px;
}
.table-caption {
  gap: 17px;
  width: 80%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adc8b89c;
  transition: color 0.2s;
}
.is-busy .table-caption {
  color: #f2dfb2;
}
.card,
.joker-card {
  -webkit-user-select: none;
  user-select: none;
}
.hand .card,
.joker-slots .joker-card,
.manage-order .joker-card {
  touch-action: none;
  cursor: grab;
}
.hand .card:active,
.joker-slots .joker-card:active {
  cursor: grabbing;
}
.hand .card.scoring-pick {
  box-shadow:
    0 5px #edc568,
    0 0 0 2px #f2cc6a,
    0 0 22px #ffd75a24;
}
.hand .card.not-scoring {
  box-shadow:
    0 4px #788a7e,
    0 0 0 2px #a9b8a9;
}
.hand .card.not-scoring::before {
  content: '不计分';
  position: absolute;
  bottom: -23px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  white-space: nowrap;
  color: #c6d7c7;
  line-height: 1;
}
.pending-play {
  opacity: 0.2;
  pointer-events: none;
}
.played-cards .card {
  transition:
    opacity 0.2s,
    filter 0.2s;
}
.played-cards .card.non-scoring {
  opacity: 0.4;
  filter: saturate(0.3);
}
.played-cards .card.is-scoring {
  box-shadow:
    0 4px #edc568,
    0 0 25px #ffd97888;
}
.enhanced-badge {
  position: absolute;
  right: 4px;
  top: 5px;
  color: #a45aaf;
  font-size: 16px;
  line-height: 1;
  text-shadow: 0 1px #fff;
}
.card:has(.enhanced-badge) {
  background: linear-gradient(130deg, #f4eaf3, #f2eee1 45%, #f0e4fa);
}
.drag-source {
  opacity: 0.22 !important;
  transform: none !important;
  box-shadow: 0 0 0 2px #f6c566 !important;
}
.drag-ghost {
  position: fixed !important;
  pointer-events: none !important;
  z-index: 1000 !important;
  transform: rotate(-4deg) scale(1.07) !important;
  box-shadow: 0 20px 30px #001d3670 !important;
  opacity: 1 !important;
  transition: none !important;
}
.sorting {
  cursor: grabbing;
}
.sorting .card:not(.drag-source) {
  pointer-events: none;
}
.float-label {
  position: fixed;
  z-index: 1001;
  pointer-events: none;
  font-size: 25px;
  font-weight: 900;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  box-shadow: 0 3px 0 #122b2a;
  color: white;
  text-shadow: 1px 2px #0003;
}
.float-label.chips {
  background: #269aea;
}
.float-label.mult {
  background: #ed5e6a;
}
.confetti {
  width: 7px;
  height: 11px;
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  border-radius: 1px;
}
.skip-animation {
  position: absolute;
  right: 8px;
  bottom: 13px;
  border: 1px solid #b3c9b744;
  border-radius: 6px;
  background: #183c32;
  padding: 5px 10px;
  font-size: 12px;
  color: #c3d6c2;
}
.skip-animation[hidden] {
  display: none;
}
.hand-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #9bbdab;
  padding: 8px 0 13px;
  align-items: center;
  gap: 12px;
}
.hand-bottom button {
  font-size: 12px;
  color: #d0ddca;
  padding: 3px 9px;
  background: #174334;
  border-radius: 4px;
  margin-right: auto;
}
.selection-hint {
  min-height: 22px;
  line-height: 1.6;
  font-size: 13px;
  text-align: center;
  color: #bed1be;
  margin: 0 0 11px;
}
.selection-hint.warning {
  color: #ffb3a8;
}
.selection-hint.winning {
  color: #f7d77e;
}
.assist-tools {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
.assist-tools button {
  font-size: 13px;
  background: #174638a8;
  color: #d5e4ce;
  border: 1px solid #91b79b32;
  padding: 7px 12px;
  border-radius: 6px;
}
.assist-tools button:first-child {
  color: #ffdf8f;
  border-color: #d5b86466;
}
.assist-tools button:last-child {
  font-size: 12px;
  color: #9ebfa9;
  margin-left: auto;
}
.assist-tools kbd {
  font-size: 10px;
  color: #a9c0a8;
  border: 1px solid #8baf9344;
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 3px;
}
.is-busy .hand-zone {
  pointer-events: none;
}
.is-busy .joker-card {
  cursor: default;
}
.is-busy .played-cards .card {
  cursor: default;
}
dialog[open] {
  animation: dialog-in 0.2s var(--ease-out);
}
@keyframes dialog-in {
  from {
    opacity: 0;
    translate: 0 12px;
    scale: 0.98;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}
.modal-header h2 {
  margin: 0;
  font-size: 27px;
  line-height: 1.4;
}
.modal-inner .muted {
  font-size: 13px;
  color: #b0c4b5;
  line-height: 1.7;
}
.mini-hand {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 16px 0;
}
.mini-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f0ecdd;
  border: 2px solid #f9f4e4;
  border-radius: 5px;
  width: 49px;
  height: 70px;
  color: #2d4040;
  font-size: 20px;
  line-height: 1.1;
  box-shadow: 0 4px #aeb9a4;
  font-weight: 700;
}
.mini-card > span {
  font-size: 25px;
}
.mini-card.red-suit {
  color: #d84e59;
}
.mini-card.counts {
  box-shadow: 0 4px #edc56e;
}
.mini-card.kicker {
  opacity: 0.45;
}
.modal-inner .guide-footnote {
  font-size: 13px;
  color: #b3cbb8;
  margin-bottom: 0;
}
.hint-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hint-choice {
  background: #1e3633;
  border: 1px solid #6c977d66;
  border-radius: 9px;
  text-align: left;
  padding: 14px;
}
.hint-choice:first-child {
  border-color: #d7b568;
  background: linear-gradient(135deg, #655e3822, #19352f);
}
.hint-choice-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 15px;
}
.hint-choice-title > span {
  color: #f7d583;
}
.hint-choice .mini-hand {
  gap: 5px;
  justify-content: flex-start;
}
.hint-choice .mini-card {
  width: 39px;
  height: 55px;
  font-size: 16px;
}
.hint-choice .mini-card > span {
  font-size: 21px;
}
.hint-choice small {
  font-size: 12px;
  color: #b6cbb5;
}
.history-list details {
  background: #1d3432;
  border: 1px solid #76997a33;
  border-radius: 7px;
  padding: 12px 15px;
  margin-bottom: 10px;
}
.history-list summary {
  cursor: pointer;
  font-size: 14px;
  line-height: 1.8;
}
.history-list summary strong {
  float: right;
  color: #edce7d;
}
.score-ledger {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.score-ledger li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  padding: 7px 0;
  border-top: 1px solid #6c8f7933;
  gap: 10px;
}
.score-ledger em {
  font-style: normal;
  color: #60bbff;
}
.score-ledger i {
  font-style: normal;
  color: #fa8188;
}
.score-ledger b {
  white-space: nowrap;
}
.settings-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-grid label {
  background: #203834;
  border-radius: 7px;
}
.settings-grid input[type='checkbox'] {
  width: 20px;
  height: 20px;
  accent-color: #edc373;
  cursor: pointer;
}
.settings-grid .volume-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}
.settings-grid input[type='range'] {
  width: 100%;
  accent-color: #f3c766;
}
.settings-grid output {
  color: #edce7d;
}
.settings-grid select {
  font: inherit;
  border: 1px solid #7b997d;
  background: #2d4840;
  color: #ecedda;
  border-radius: 5px;
}
.manage-order {
  display: flex;
  gap: 12px;
  padding: 16px;
  justify-content: center;
  background: #19352f;
  border-radius: 8px;
  margin: 15px 0;
}
.manage-order .joker-card {
  flex-shrink: 1;
  min-width: 0;
}
.manage-order .joker-card .j-name {
  white-space: normal;
}
.reduce-motion * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@media (min-width: 1500px) {
  .play-zone {
    min-height: 245px;
  }
}
@media (max-width: 1150px) {
  .assist-tools button {
    font-size: 12px;
    padding: 6px 9px;
  }
  .play-zone {
    min-height: 190px;
  }
}
@media (max-width: 620px) {
  .hand-bottom > span {
    font-size: 11px;
  }
  .hint-choice .mini-hand {
    margin: 12px 0;
  }
  .hint-choice .mini-card {
    width: 43px;
    height: 59px;
    font-size: 18px;
  }
  .hint-choice small {
    font-size: 13px;
  }
  .enhanced-badge {
    font-size: 12px;
    right: 2px;
    top: 3px;
  }
}
.card-tooltip {
  position: fixed;
  inset: auto;
  margin: 0;
  z-index: 2000;
  width: 260px;
  max-width: calc(100vw - 20px);
  padding: 17px 18px;
  background: #253c3b;
  color: #f2ead5;
  border: 2px solid #a0ae92;
  border-radius: 10px;
  box-shadow:
    0 8px 0 #102c2aaa,
    0 15px 35px #001b2877;
  pointer-events: auto;
  font-family: var(--font);
  font-weight: 600;
  text-align: center;
  overflow: visible;
}
.card-tooltip[hidden] {
  display: none;
}
.card-tooltip::backdrop {
  background: transparent;
  pointer-events: none;
}
.tip-category {
  font-size: 12px;
  color: #b3c7b2;
  letter-spacing: 1px;
}
.card-tooltip h3 {
  font-size: 23px;
  line-height: 1.3;
  margin: 8px 0 12px;
  color: #f7dea1;
}
.card-tooltip p {
  font-size: 14px;
  line-height: 1.7;
  margin: 11px 0;
}
.tip-value {
  font-size: 22px;
  padding: 8px;
  background: #152f30;
  border-radius: 5px;
}
.tip-value.blue {
  color: #6ac7ff;
}
.tip-value.disabled {
  color: #ff9d99;
}
.tip-detail {
  font-size: 13px;
  line-height: 1.65;
  padding: 10px 0;
  border-top: 1px solid #82988155;
  color: #d5dfcb;
}
.tip-note {
  font-size: 12px;
  line-height: 1.7;
  color: #a2bda9;
}
.shop-item .shop-card {
  pointer-events: auto;
  cursor: help;
}
.deck-mini[data-info-card] {
  cursor: help;
}
.score-contribution {
  position: fixed;
  z-index: 1002;
  pointer-events: none;
  padding: 5px 10px;
  color: white;
  border: 2px solid #e1eddf;
  border-radius: 7px;
  box-shadow: 0 2px 10px #001c3377;
  font: 700 23px var(--font);
  white-space: nowrap;
}
.score-contribution.chips {
  background: #249bec;
}
.score-contribution.mult {
  background: #ed606b;
}
.guide-intro {
  margin-top: 0 !important;
  font-size: 14px !important;
  color: #c1d4bf !important;
}
.all-hands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.hand-example {
  border: 1px solid #638a7366;
  background: #1d3532;
  padding: 17px 15px;
  border-radius: 9px;
  min-width: 0;
}
.example-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.example-heading h3 {
  font-size: 21px;
  margin: 0;
  color: #f2d58c;
}
.example-heading > span {
  font-size: 12px;
  color: #abc8b0;
}
.hand-example .example-condition {
  font-size: 14px;
  line-height: 1.7;
  min-height: 48px;
  margin: 11px 0 0;
  color: #d7e2cf;
}
.hand-example .mini-hand {
  gap: 5px;
  margin: 16px 0 20px;
}
.hand-example .mini-card {
  width: 43px;
  height: 64px;
  font-size: 19px;
}
.example-score {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  font-size: 17px;
}
.example-score > span:first-child {
  color: #6ac4ff;
}
.example-score > span:last-child {
  color: #ff8c92;
}
.hand-example > small {
  display: block;
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
  color: #9cbaa8;
  margin-top: 9px;
}
.is-busy .hand-level {
  color: #efd89b;
}
@media (max-width: 620px) {
  .hand-example > small {
    font-size: 12px;
  }
}
/* Scale the frame and all face details from a single physical card width. */
.card {
  flex-shrink: 0;
  padding: 0;
  isolation: isolate;
  --card-width: 103px;
  width: var(--card-width);
  height: calc(var(--card-width) * 147 / 103);
  border-width: calc(var(--card-width) * 3 / 103);
  border-radius: calc(var(--card-width) * 7 / 103);
}
.card::after {
  inset: calc(var(--card-width) * 5 / 103);
  border-radius: calc(var(--card-width) * 3 / 103);
}
.card .corner,
.played-cards .card .corner {
  top: calc(var(--card-width) * 6 / 103);
  left: calc(var(--card-width) * 7 / 103);
  font-size: calc(var(--card-width) * 22 / 103);
}
.card .corner small,
.played-cards .card .corner small {
  font-size: calc(var(--card-width) * 20 / 103);
}
.card .corner.bottom,
.played-cards .card .corner.bottom {
  top: auto;
  left: auto;
  right: calc(var(--card-width) * 7 / 103);
  bottom: calc(var(--card-width) * 6 / 103);
}
.card .center-suit,
.played-cards .card .center-suit {
  font-size: calc(var(--card-width) * 56 / 103);
}
.card.face .center-suit,
.played-cards .card.face .center-suit {
  font-size: calc(var(--card-width) * 45 / 103);
  inset: calc(var(--card-width) * 25 / 103) calc(var(--card-width) * 22 / 103);
  border-width: calc(var(--card-width) * 2 / 103);
}
.card .enhanced-badge {
  font-size: calc(var(--card-width) * 16 / 103);
  top: calc(var(--card-width) * 5 / 103);
  right: calc(var(--card-width) * 4 / 103);
}
.played-cards .card {
  overflow: visible;
  pointer-events: auto;
  cursor: help;
  --card-width: 66px;
  width: var(--card-width);
  height: calc(var(--card-width) * 147 / 103);
  transform-origin: center center;
  --lift: 0px;
  --fan: 0deg;
}
.played-cards .card:hover:not(:disabled),
.played-cards .card:active:not(:disabled) {
  --lift: 0px;
}
@media (min-width: 1500px) {
  .game {
    margin-top: 12px;
  }
  .card {
    --card-width: 115px;
  }
}
@media (max-width: 1150px) {
  .assist-tools {
    gap: 5px;
  }
  .keyboard-tip {
    display: none;
  }
  .assist-tools kbd {
    display: none;
  }
  .card {
    --card-width: 87px;
  }
}
@media (max-width: 850px) {
  .topbar {
    height: 80px;
    padding: 15px 20px;
  }
  .sidebar {
    padding: 10px;
  }
  .blind-name {
    gap: 10px;
  }
  .blind-name h1 {
    font-size: 21px;
  }
  .blind-chip {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
  .target {
    font-size: 32px;
  }
  .inventory-row {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
  }
  .consume-zone {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .consume-zone .zone-label {
    display: flex;
    gap: 15px;
    margin: 0;
  }
  .consume-slots {
    min-height: 40px;
    padding: 4px;
    flex: 1;
  }
  .consume-slots .slot {
    height: 30px;
  }
  .consume-slots .j-symbol {
    font-size: 20px;
  }
  .joker-slots {
    min-height: 119px;
  }
  .table-caption {
    font-size: 12px;
    width: 100%;
    gap: 8px;
  }
  .hand .card {
    margin-left: -28px;
  }
  .hand {
    height: 125px;
    padding: 0;
  }
  .hand-top {
    margin-bottom: 29px;
  }
  .hand-bottom span:last-child {
    display: none;
  }
  .table-bottom {
    padding: 15px 0 0;
  }
  .action {
    min-width: 105px;
    font-size: 18px;
    padding: 10px 16px;
  }
  .card-back {
    width: 35px;
    height: 49px;
  }
  .resources strong {
    font-size: 30px;
  }
  .hand-title {
    font-size: 22px;
  }
  .calculation {
    font-size: 27px;
  }
  .top-actions {
    gap: 12px;
  }
  .assist-tools {
    flex-wrap: wrap;
  }
  .assist-tools button {
    padding: 6px 8px;
  }
  .selection-hint {
    font-size: 12px;
    min-height: 36px;
  }
  .play-zone {
    min-height: 180px;
  }
  .wordmark {
    font-size: 30px;
  }
  .edition {
    display: none;
  }
  .consume-slots .j-type {
    display: none;
  }
  .hand-zone {
    padding: 0;
  }
  .deck-button {
    gap: 8px;
  }
  .play-actions {
    gap: 10px;
  }
  .assist-tools button:last-child {
    margin-left: 0;
  }
  .card {
    --card-width: 74px;
  }
}
@media (max-width: 620px) {
  .icon-btn span {
    display: none;
  }
  .game {
    display: flex;
    flex-direction: column;
    gap: 17px;
  }
  .sidebar {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
    border-width: 2px;
    border-radius: 10px;
  }
  .blind-panel {
    grid-row: span 2;
    position: relative;
  }
  .eyebrow {
    font-size: 12px;
    padding: 6px;
  }
  .blind-name {
    margin: 11px 0 6px;
    gap: 12px;
  }
  .blind-name h1 {
    font-size: 21px;
  }
  .blind-chip {
    width: 44px;
    height: 44px;
    border-width: 5px;
  }
  .target-label {
    font-size: 11px;
  }
  .target {
    font-size: 30px;
  }
  .blind-rule {
    font-size: 10px;
    min-height: 26px;
    padding: 6px 4px;
  }
  .score-panel {
    padding: 0;
  }
  .score-label {
    font-size: 11px;
  }
  .score-label strong {
    font-size: 21px;
  }
  .score-track {
    margin: 4px 0 6px;
    height: 3px;
  }
  .hand-title {
    font-size: 18px;
    min-height: 25px;
  }
  .hand-level {
    font-size: 10px;
    margin: 0 0 5px;
  }
  .calculation {
    font-size: 24px;
    grid-template-columns: 1fr 16px 1fr;
    gap: 4px;
  }
  .calculation > div {
    padding: 0;
  }
  .calc-label {
    display: none;
  }
  .resources {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
  }
  .resources > div {
    padding: 5px 2px;
  }
  .resources strong {
    font-size: 22px;
  }
  .resources .money {
    grid-column: auto;
    flex-direction: column;
    padding: 5px 2px;
    gap: 0;
  }
  .money strong {
    font-size: 22px;
  }
  .ante-row {
    grid-column: 1 / -1;
    padding: 2px 5px 0;
    justify-content: space-between;
    font-size: 11px;
  }
  .ante-row > div {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .ante-row strong {
    font-size: 15px;
  }
  .side-buttons,
  .deck-label {
    display: none;
  }
  .inventory-row {
    grid-template-columns: minmax(0, 1fr) 99px;
    gap: 9px;
  }
  .consume-zone {
    display: block;
  }
  .consume-zone .zone-label {
    justify-content: space-between;
    gap: 0;
    margin: 0 2px 7px;
  }
  .zone-label {
    font-size: 11px;
    margin-bottom: 7px;
  }
  .joker-slots {
    gap: 4px;
    min-height: 95px;
    padding: 6px;
  }
  .joker-card .j-symbol {
    font-size: 27px;
  }
  .joker-card .j-type {
    font-size: 7px;
    top: 3px;
    letter-spacing: 1px;
  }
  .slot {
    height: 78px;
    font-size: 20px;
  }
  .consume-slots {
    height: 95px;
    padding: 6px;
    gap: 4px;
  }
  .consume-slots .slot {
    height: 78px;
  }
  .consume-slots .j-name {
    font-size: 9px;
    writing-mode: vertical-rl;
  }
  .consume-slots .j-symbol {
    font-size: 22px;
  }
  .table-caption {
    font-size: 11px;
  }
  .played-cards {
    margin-top: 10px;
  }
  .last-score {
    font-size: 26px;
    min-height: 32px;
  }
  #event-message {
    font-size: 12px;
    margin-top: 8px;
  }
  .hand-top {
    font-size: 12px;
    margin-bottom: 30px;
  }
  .sort {
    font-size: 11px;
    gap: 3px;
  }
  .hand .card {
    margin-left: calc((100vw - 560px) / 7);
  }
  .hand .card:first-child {
    margin-left: 0;
  }
  .hand {
    height: 105px;
  }
  .table-bottom {
    padding-top: 12px;
  }
  .action {
    min-width: 105px;
    padding: 8px 18px;
  }
  .deck-button {
    font-size: 11px;
  }
  .deck-button b {
    font-size: 19px;
  }
  .card-back {
    width: 32px;
    height: 45px;
  }
  .modal-inner {
    padding: 20px 16px;
  }
  .shop-grid {
    gap: 7px;
  }
  .shop-item {
    padding: 10px 6px;
  }
  .shop-card {
    width: 75px;
    height: 107px;
  }
  .shop-card .j-symbol {
    font-size: 40px;
  }
  .shop-card .j-name {
    font-size: 12px;
  }
  .modal-header h2 {
    font-size: 24px;
  }
  .deck-grid {
    gap: 3px;
  }
  .deck-mini {
    font-size: 10px;
  }
  footer {
    margin: 18px 0 12px;
    font-size: 10px;
    padding: 0 14px;
  }
  footer > span:last-child {
    display: none;
  }
  .joker-slots .joker-card .j-name {
    font-size: 8px;
  }
  .joker-slots .slot {
    min-width: 0;
  }
  .top-actions {
    gap: 10px;
  }
  .topbar {
    height: 70px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .play-zone {
    padding: 8px 0;
    min-height: 150px;
  }
  .selection-hint {
    font-size: 12px;
    min-height: 20px;
    margin-bottom: 9px;
  }
  .hand-bottom {
    font-size: 10px;
    padding: 5px 0 10px;
    padding-top: 8px;
    margin-top: 2px;
  }
  .hand-bottom button {
    font-size: 11px;
  }
  .assist-tools {
    gap: 5px;
    margin-bottom: 12px;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .assist-tools button {
    font-size: 11px;
    padding: 7px 6px;
  }
  .assist-tools button:last-child {
    font-size: 11px;
  }
  .skip-animation {
    font-size: 11px;
    bottom: 3px;
    right: 0;
    padding: 3px 7px;
  }
  .hint-list {
    grid-template-columns: 1fr;
  }
  .hint-choice-title {
    font-size: 16px;
  }
  .history-list summary {
    font-size: 12px;
  }
  .history-list summary strong {
    font-size: 15px;
  }
  .history-list details {
    padding: 10px;
  }
  .score-ledger li {
    font-size: 12px;
  }
  .float-label {
    font-size: 18px;
    padding: 4px 7px;
  }
  .manage-order {
    gap: 6px;
    padding: 12px 8px;
  }
  .manage-order .joker-card {
    height: 102px;
    width: 64px;
  }
  .manage-order .joker-card .j-symbol {
    font-size: 32px;
  }
  .manage-order .joker-card .j-name {
    font-size: 10px;
  }
  footer #save-status {
    display: block;
    font-size: 10px;
  }
  .sort button {
    padding: 5px 6px;
  }
  .all-hands {
    grid-template-columns: 1fr;
  }
  .hand-example .example-condition {
    min-height: 0;
  }
  .hand-example .mini-card {
    width: 46px;
    height: 65px;
  }
  .card-tooltip {
    width: 230px;
    padding: 13px;
  }
  .card-tooltip h3 {
    font-size: 20px;
  }
  .card-tooltip p {
    font-size: 13px;
  }
  .score-contribution {
    font-size: 18px;
  }
  .card {
    --card-width: 66px;
  }
  .played-cards .card {
    --card-width: 45px;
  }
}
/* Separate persistent jokers from special cards at the point of purchase. */
dialog.shop-dialog {
  max-width: 94vw;
}
.shop-dialog .modal-inner {
  padding: 26px;
}
.store-wallet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #bed0c0;
  font-size: 14px;
  margin-bottom: 20px;
}
.store-wallet > div {
  white-space: nowrap;
}
.store-wallet strong {
  font-size: 29px;
  color: var(--gold);
  margin-left: 9px;
}
.store-departments {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.store-section {
  border: 2px solid;
  border-radius: 12px;
  padding: 18px;
  min-width: 0;
}
.store-jokers {
  background: linear-gradient(145deg, #5d512929, #1c332b);
  border-color: #b89b57;
}
.store-specials {
  background: linear-gradient(145deg, #54487488, #292d44);
  border-color: #9b8cc8;
}
.store-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.store-section-kicker {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #c8b57f;
}
.store-specials .store-section-kicker {
  color: #bcb1e3;
}
.store-section-head h3 {
  font-size: 25px;
  color: #f6d88f;
  margin: 4px 0 0;
  line-height: 1.2;
}
.store-specials .store-section-head h3 {
  color: #e0d2ff;
}
.store-capacity {
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
  padding: 5px 8px;
  border: 1px solid #bca46b55;
  border-radius: 5px;
  color: #d5c69e;
  background: #1e302955;
}
.store-specials .store-capacity {
  border-color: #b9a3dd55;
  color: #d6c9ef;
  background: #21253966;
}
.store-section .store-section-note {
  font-size: 13px;
  color: #c2c6ad;
  line-height: 1.7;
  margin: 13px 0 16px;
}
.store-specials .store-section-note {
  color: #c1bad6;
}
.store-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.store-specials .store-grid {
  grid-template-columns: 1fr;
}
.store-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 8px;
  border: 1px solid #a8a37444;
  background: #172b28aa;
  min-width: 0;
  padding: 12px;
}
.store-item.special-item {
  border-color: #aa98cb55;
  background: #1c2337aa;
}
.store-item.sold {
  opacity: 0.65;
}
.store-card-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  color: #ddc588;
  font-size: 12px;
  margin-bottom: 15px;
  line-height: 1.4;
}
.store-card-type > span {
  font-size: 10px;
  color: #9fb5a7;
}
.store-card-type.uncommon {
  color: #9acdf1;
}
.store-card-type.rare {
  color: #f7afc8;
}
.store-card-type.planet,
.store-card-type.tarot {
  color: #d5b6f4;
}
.store-card-type.planet > span,
.store-card-type.tarot > span {
  color: #b1a9c8;
}
.store-card-face {
  display: flex;
  justify-content: center;
  margin: 0 0 16px;
}
.store-card-face .shop-card {
  width: 87px;
  height: 120px;
  cursor: help;
  pointer-events: auto;
}
.store-item-copy {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.store-item-copy h4 {
  font-size: 16px;
  color: #f3e5c1;
  margin: 0 0 8px;
}
.special-item h4 {
  color: #e9dfff;
}
.store-item-copy > p {
  font-size: 14px;
  line-height: 1.7;
  color: #d8ddc8;
  margin: 0 0 14px;
}
.store-item-copy .store-destination {
  font-size: 11px;
  color: #a9bfaa;
  line-height: 1.65;
  margin-top: auto;
  padding-top: 8px;
  margin-bottom: 13px;
}
.special-item .store-destination {
  color: #b9b0cc;
}
.planet-upgrade {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 7px;
  background: #9281b817;
  border: 1px solid #9985c233;
  border-radius: 6px;
  margin-bottom: 8px;
}
.planet-upgrade strong {
  font-size: 15px;
  color: #dfcefc;
}
.planet-upgrade > span {
  font-size: 14px;
  color: #d6c1f2;
}
.planet-upgrade small {
  font-size: 11px;
  line-height: 1.6;
  color: #ada6c3;
}
.store-buy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  padding: 10px;
  border-radius: 5px;
  background: #d5ad5e;
  color: #22372f;
  box-shadow: 0 3px #0c211e;
  font-size: 13px;
  min-height: 41px;
}
.store-buy b {
  font-size: 17px;
}
.special-item .store-buy {
  background: #b49bd6;
  color: #25243b;
}
.store-buy:disabled {
  opacity: 0.55;
}
.store-item.sold .store-buy {
  opacity: 1;
  justify-content: center;
  background: #40594e;
  color: #c9d8c7;
}
.special-item.sold .store-buy {
  background: #4d4862;
  color: #e0d4ed;
}
.store-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.store-manage {
  font-size: 14px;
  color: #d8e4cf;
  padding: 10px 12px;
  border: 1px solid #77978466;
  border-radius: 7px;
  background: #233a33;
}
.store-manage span {
  display: block;
  font-size: 11px;
  color: #a5c0ad;
  margin-top: 3px;
}
.store-checkout {
  display: flex;
  gap: 12px;
}
.store-checkout .action {
  font-size: 17px;
  min-width: auto;
  padding: 11px 18px;
}
.store-empty {
  font-size: 14px;
  grid-column: 1/-1;
}
@media (max-width: 760px) {
  .store-departments {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .store-section {
    padding: 15px;
  }
  .store-specials .store-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0 16px;
    align-items: start;
  }
  .special-item .store-card-type {
    grid-column: 1/-1;
  }
  .special-item .store-card-face {
    grid-row: 2/4;
    margin: 5px 0;
  }
  .special-item .store-item-copy {
    text-align: left;
  }
  .special-item .store-buy {
    grid-column: 2;
  }
  .special-item .planet-upgrade {
    text-align: left;
    padding: 8px 10px;
  }
  .store-card-type > span {
    font-size: 12px;
  }
  .store-item-copy .store-destination {
    font-size: 12px;
  }
  .store-card-face .shop-card .j-name {
    font-size: 12px;
  }
  .store-card-face .shop-card .j-symbol {
    font-size: 39px;
  }
  .store-card-face .shop-card .j-type {
    font-size: 9px;
  }
  .store-footer {
    flex-wrap: wrap;
  }
  .store-checkout {
    margin-left: auto;
  }
  .shop-dialog .modal-inner {
    padding: 20px;
  }
  .store-section-kicker {
    font-size: 11px;
  }
}
@media (max-width: 420px) {
  .store-wallet {
    font-size: 12px;
  }
  .store-wallet strong {
    font-size: 25px;
  }
  .store-section {
    padding: 12px;
  }
  .store-grid {
    gap: 9px;
  }
  .store-item {
    padding: 10px 8px;
  }
  .store-section-head h3 {
    font-size: 23px;
  }
  .store-capacity {
    font-size: 11px;
    padding: 4px 6px;
  }
  .store-card-type {
    font-size: 11px;
    flex-wrap: wrap;
    min-height: 28px;
    margin-bottom: 10px;
  }
  .store-card-type > span {
    font-size: 10px;
  }
  .store-item-copy h4 {
    font-size: 15px;
  }
  .store-item-copy > p {
    font-size: 13px;
  }
  .store-buy {
    font-size: 12px;
    padding: 9px 7px;
  }
  .store-buy b {
    font-size: 16px;
  }
  .store-checkout {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }
  .store-checkout .action {
    font-size: 16px;
    flex: 1;
    padding: 11px 9px;
  }
  .store-manage {
    width: 100%;
    text-align: left;
    padding: 9px 12px;
  }
  .store-manage span {
    display: inline;
    margin-left: 12px;
  }
  .store-specials .store-item {
    grid-template-columns: 90px 1fr;
    gap: 0 10px;
  }
  .shop-dialog .modal-inner {
    padding: 18px 13px;
  }
}