.tile {
  --press-y: -6px;
  --press-shadow: inset 0 -2px 0 var(--line), 0 6px 10px var(--shade);
  position: relative;
  width: var(--tile-w);
  height: var(--tile-h);
  flex: 0 0 auto;
  padding: 0;
  border-radius: var(--radius-s);
  background: var(--ivory);
  box-shadow: inset 0 -2px 0 var(--line), 0 1px 2px var(--shade);
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.tile svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tile--man { color: var(--man); }
.tile--pin { color: var(--pin); }
.tile--sou { color: var(--sou); }
.tile--honor { color: var(--ink); }
.tile--green { color: var(--pin); }
.tile--red { color: var(--tan); }

.tile--back {
  background: var(--tan);
  box-shadow: inset 0 -2px 0 var(--shade), 0 1px 2px var(--shade);
}

.tile--turned {
  transform: rotate(90deg);
  margin: 0 calc((var(--tile-h) - var(--tile-w)) / 2);
}

.tile--dim {
  opacity: 0.45;
}

.tile--last {
  box-shadow: 0 0 0 2px var(--tan), 0 2px 6px var(--shade);
}

.tile--pick,
.tile--best,
.tile--cite {
  color: var(--ivory);
  box-shadow: inset 0 -2px 0 var(--shade), 0 1px 2px var(--shade);
}

.tile--pick { background: var(--ink-soft); }
.tile--best { background: var(--tan); }
.tile--cite { background: var(--ink); }

.tile--drop {
  animation: drop 0.2s ease;
}

@keyframes drop {
  from { transform: translateY(-8px); opacity: 0.2; }
  to { transform: translateY(0); opacity: 1; }
}

.tile--turned.tile--drop {
  animation: none;
}

.tile-row {
  display: flex;
  gap: var(--tile-gap);
}

.btn {
  --press-y: -2px;
  --press-shadow: 0 6px 10px var(--shade);
  padding: var(--btn-pad-y) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 4px var(--shade);
  transition: background 0.12s ease, transform 0.12s ease, opacity 0.12s ease;
}

.btn:disabled {
  opacity: 0.35;
  box-shadow: none;
}

.btn--accent {
  background: var(--tan);
  color: var(--ivory);
}

.btn--on {
  background: var(--ink);
  color: var(--ivory);
}

.btn--wide {
  width: 100%;
  text-align: center;
}

.chip,
.verdict {
  padding: var(--badge-pad-y) var(--badge-pad-x);
  border-radius: 999px;
  background: var(--tan);
  color: var(--ivory);
  font-size: var(--badge-text);
  font-weight: 700;
}

.chip {
  --badge-pad-y: calc(var(--plate-unit) * 2);
  --badge-pad-x: calc(var(--plate-unit) * 8);
  --badge-text: calc(var(--plate-unit) * 11);
  visibility: hidden;
}

.chip--on {
  visibility: visible;
}

.verdict {
  --badge-pad-y: 2px;
  --badge-pad-x: var(--space-2);
  --badge-text: var(--text-s);
  box-shadow: inset 0 0 0 1px var(--line);
}

.verdict--최선 { background: var(--tan); color: var(--ivory); }
.verdict--차선 { background: var(--sage); color: var(--ink); }
.verdict--좋음 { background: var(--lime); color: var(--ink); }
.verdict--미흡 { background: var(--ivory); color: var(--ink-soft); }
.verdict--위험 { background: var(--ink-soft); color: var(--ivory); }
.verdict--최악 { background: var(--ink); color: var(--ivory); }

.plate {
  --plate-unit: max(var(--board-unit), 0.78px);
  min-width: calc(var(--plate-unit) * 62);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--plate-unit) * 1);
  padding: calc(var(--plate-unit) * 4) calc(var(--plate-unit) * 8);
  border-radius: var(--radius-s);
  background: var(--ivory);
  box-shadow: 0 1px 3px var(--shade);
  font-size: calc(var(--plate-unit) * 12);
  transition: box-shadow 0.15s ease;
}

.plate--active {
  box-shadow: 0 0 0 2px var(--tan), 0 1px 3px var(--shade);
}

.plate__wind {
  font-size: calc(var(--plate-unit) * 16);
  font-weight: 700;
  color: var(--tan);
}

.panel {
  --tile-base-w: 24px;
  --tile-base-h: 33px;
  --note-scale: 0.75;
  --tile-w: var(--tile-base-w);
  --tile-h: var(--tile-base-h);
  --hand-row: calc(var(--hand-tiles) * (var(--tile-base-w) + var(--tile-gap)));
  --panel-column: calc(var(--hand-row) + var(--space-3) * 2 + var(--space-2) * 2
    + var(--space-1) + var(--scrollbar));
  --note-reserve: calc(var(--text-m) * 3 + var(--space-2) * 3);
  width: min(calc(var(--panel-column) * 2 + var(--panel-gap) + var(--panel-pad) * 2), var(--panel-cap-w));
  max-height: var(--panel-cap-h);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
  padding: var(--panel-pad);
  border-radius: var(--radius-l);
  background: var(--ivory);
  box-shadow: 0 18px 40px var(--shade);
}

.panel > * {
  flex: 0 0 auto;
}

.panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.panel__title {
  font-size: var(--text-xl);
  font-weight: 800;
}

.panel__body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(var(--panel-column) + var(--note-reserve));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: var(--panel-gap);
}

.grade {
  margin-left: auto;
  width: var(--grade-size);
  height: var(--grade-size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tan);
  color: var(--ivory);
  font-size: var(--text-xl);
  font-weight: 800;
}

.stats {
  display: grid;
  grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr));
  gap: var(--space-2);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-m);
  background: var(--lime);
}

.stats--compact .stat {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
}

.stat__label {
  font-size: var(--text-s);
  color: var(--ink-soft);
}

.stat__value {
  font-size: var(--text-l);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.stats--compact .stat__value {
  font-size: var(--text-m);
}

.ledger,
.detail {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--tan) transparent;
}

.ledger > *,
.detail > * {
  flex: 0 0 auto;
}

.ledger::-webkit-scrollbar,
.detail::-webkit-scrollbar {
  width: var(--scrollbar);
}

.ledger::-webkit-scrollbar-track,
.detail::-webkit-scrollbar-track {
  background: transparent;
}

.ledger::-webkit-scrollbar-thumb,
.detail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--tan);
}

.ledger {
  --ledger-cols: 26px var(--tile-w) var(--tile-w) repeat(3, minmax(0, 1fr));
  --ledger-gap: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-right: var(--space-1);
}

.ledger__row {
  display: grid;
  grid-template-columns: var(--ledger-cols);
  align-items: center;
  gap: var(--ledger-gap);
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-s);
  background: var(--cream);
  font-variant-numeric: tabular-nums;
  transition: background 0.12s ease;
}

.ledger__row > * {
  justify-self: center;
}

.ledger__row--on {
  background: var(--sage);
  box-shadow: inset 0 0 0 2px var(--tan);
}

.ledger__row--head {
  background: none;
  color: var(--ink-soft);
  font-size: var(--text-s);
}

.ledger__same {
  display: grid;
  place-items: center;
  width: var(--tile-w);
  height: var(--tile-h);
  color: var(--ink-soft);
}

.detail {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.24s ease;
}

.drawer--on {
  grid-template-rows: 1fr;
}

.drawer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
  overflow: hidden;
  padding: 0 var(--space-3);
  border-radius: var(--radius-m);
  background: var(--cream);
  transition: padding 0.24s ease;
}

.drawer--on .drawer__inner {
  padding: var(--space-3);
}

.drawer__inner > * {
  flex: 0 0 auto;
}

.tile-tray {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  gap: var(--tile-gap);
  padding: var(--space-2);
  border-radius: var(--radius-m);
  background: var(--ivory);
}

.detail__board {
  --board-fit: min(100cqw, var(--detail-board-cap));
  --board-unit: calc(var(--board-fit) / var(--report-board-span));
  width: var(--board-fit);
  aspect-ratio: 1;
}

.note {
  --tile-w: calc(var(--tile-base-w) * var(--note-scale));
  --tile-h: calc(var(--tile-base-h) * var(--note-scale));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-m);
  background: var(--cream);
  font-size: var(--text-m);
  color: var(--ink-soft);
}

.compare {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.compare__row {
  display: grid;
  grid-template-columns: auto var(--tile-w) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.compare__row .stats {
  --stat-cols: 3;
}

.compare__label {
  font-size: var(--text-s);
  color: var(--ink-soft);
}

.loader {
  --tile-w: 34px;
  --tile-h: 48px;
  display: flex;
  gap: var(--space-2);
}

.loader .tile {
  animation: deal 1s ease-in-out infinite;
}

.loader .tile:nth-child(2) { animation-delay: 0.1s; }
.loader .tile:nth-child(3) { animation-delay: 0.2s; }
.loader .tile:nth-child(4) { animation-delay: 0.3s; }

@keyframes deal {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
  30% { transform: translateY(calc(var(--tile-h) * -0.45)); opacity: 1; }
}

button.tile:not(:disabled):active,
.btn:not(:disabled):active {
  transform: translateY(var(--press-y));
  box-shadow: var(--press-shadow);
}

button.ledger__row:not(.ledger__row--on):active {
  background: var(--lime);
}

@media (hover: hover) {
  button.tile:not(:disabled):hover,
  .btn:not(:disabled):hover {
    transform: translateY(var(--press-y));
    box-shadow: var(--press-shadow);
  }

  button.ledger__row:not(.ledger__row--on):hover {
    background: var(--lime);
  }
}

@media (pointer: coarse) {
  button.tile::after {
    content: '';
    position: absolute;
    inset: calc(var(--space-2) * -1) 0;
  }
}

@media (max-width: 780px) {
  :root {
    --btn-pad-y: var(--space-3);
    --panel-pad: var(--space-3);
  }

  .panel {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }

  .stats--summary {
    gap: var(--space-1);
  }

  .stats--summary .stat {
    padding: var(--space-1) var(--space-2);
  }

  .ledger {
    --ledger-gap: var(--space-1);
  }

  .detail {
    align-items: center;
  }
}

@media (max-width: 780px) and (orientation: portrait) {
  :root {
    --detail-board-cap: calc(var(--viewport-h) * 0.3);
  }

  .panel__body {
    max-height: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, auto);
  }
}

@media (max-height: 560px) {
  :root {
    --btn-pad-y: var(--space-2);
    --panel-pad: var(--space-2);
    --panel-gap: var(--space-2);
    --grade-size: 40px;
    --detail-board-cap: calc(var(--viewport-h) * 0.35);
  }
}