.mahjong-shell {
  width: min(100%, 52rem);
  height: var(--game-visible-height, 100dvh);
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.mahjong-stage {
  min-height: 0;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  overflow: hidden;
}
.mahjong-help {
  margin: 0 0 .4rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
  text-align: center;
}
.mahjong-board {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(.45rem, 1.5vw, .85rem);
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: clamp(.18rem, .7vw, .45rem);
  border: 2px solid #17324d;
  border-radius: 1rem;
  background: radial-gradient(circle, #357f71, #1c6557);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .09), 5px 5px 0 rgba(23, 50, 77, .13);
  overflow: hidden;
}
.mahjong-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  border-radius: clamp(.3rem, .8vw, .55rem);
  background: #fff8e7;
  color: #17324d;
  box-shadow: inset -4px -5px 0 #d9cba8, 0 3px 4px rgba(8, 29, 35, .35);
  font: 900 clamp(.82rem, 3.1cqh, 1.75rem)/1 Georgia, "Noto Serif CJK SC", serif;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s, filter .08s, opacity .18s;
}
.mahjong-tile[data-symbol-length="2"] {
  font-size: clamp(.72rem, 3.25vw, 1.4rem);
  letter-spacing: -.06em;
}
.mahjong-tile[data-symbol-length="3"] {
  font-size: clamp(.64rem, 2.65vw, 1.15rem);
  letter-spacing: -.1em;
}
.mahjong-tile::after {
  content: '';
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(23, 50, 77, .17);
  border-radius: .2rem;
  pointer-events: none;
}
.mahjong-tile:not(.free) { filter: saturate(.55) brightness(.82); cursor: default; }
.mahjong-tile.free:hover { transform: translateY(-2px); filter: brightness(1.05); }
.mahjong-tile.selected { outline: 4px solid #ffd65a; outline-offset: -2px; transform: translateY(-3px); }
.mahjong-tile.hint { animation: tile-hint .75s ease 2; }
.mahjong-tile.removing { animation: tile-remove .2s ease forwards; }
.mahjong-tile:focus-visible { z-index: 2; outline: 3px solid #ffd65a; outline-offset: 2px; }
.game-actions button:disabled { opacity: .42; cursor: default; }
@keyframes tile-hint { 50% { box-shadow: 0 0 0 5px rgba(255, 214, 90, .55), 0 0 1.4rem #ffd65a; } }
@keyframes tile-remove { to { opacity: 0; transform: scale(.65) rotate(4deg); } }
@media (max-width: 560px) {
  .mahjong-shell { padding-inline: .35rem; gap: .5rem; }
  .mahjong-board { padding: .3rem; gap: .12rem; border-radius: .7rem; }
  .mahjong-help { font-size: .68rem; }
  .scorebar { padding: .5rem .65rem; }
  .metric-value { font-size: 1rem; }
  .mahjong-tile { box-shadow: inset -2px -3px 0 #d9cba8, 0 2px 3px rgba(8, 29, 35, .3); font-size: clamp(.68rem, 4vw, 1.2rem); }
  .game-actions { gap: .3rem; }
  .game-actions .action-button { padding: .55rem .45rem; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mahjong-tile { transition: none; }
  .mahjong-tile.hint, .mahjong-tile.removing { animation: none; }
}