/* ==========================================================================
   Yamato.com — Daifugō table
   Seats around a felt table, the trick pile in the middle, and your fan of
   cards along the bottom. Revolution and shibari get loud, unmissable banners
   because a player who misses them will misplay the whole trick.
   ========================================================================== */

:root {
  --df-felt-1: #1f5f7a;
  --df-felt-2: #123c4f;
  --df-gold: #d4a017;
  --df-red: #c8102e;
  --df-line: rgba(255, 255, 255, 0.14);
}

/* ------------------------------------------------------------------ cards */
.df-card {
  --df-w: 68px;
  width: var(--df-w);
  flex: 0 0 auto;
  line-height: 0;
  position: relative;
  border-radius: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.df-card .df-svg { width: 100%; height: auto; display: block; }

.df-sm { --df-w: 44px; }
.df-md { --df-w: 68px; }
.df-lg { --df-w: 88px; }

.df-selectable { cursor: pointer; }
.df-selectable:hover { transform: translateY(-10px); z-index: 4; }

.df-selected {
  transform: translateY(-18px);
  filter: drop-shadow(0 0 0 3px var(--df-gold));
  z-index: 5;
}
.df-selected::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 9px;
  border: 3px solid var(--df-gold);
  pointer-events: none;
}

.df-disabled { filter: grayscale(0.65) brightness(0.7); cursor: not-allowed; }
.df-disabled:hover { transform: none; }

/* ------------------------------------------------------------------ table */
.df-table {
  position: relative;
  border-radius: 14px;
  padding: 16px;
  background:
    radial-gradient(120% 130% at 50% 24%, var(--df-felt-1), var(--df-felt-2) 74%, #0d2a38 100%);
  box-shadow: inset 0 0 64px rgba(0, 0, 0, 0.36), 0 12px 34px rgba(0, 0, 0, 0.2);
  display: grid;
  gap: 14px;
  min-height: 500px;
}

/* Opponents across the top; in a two-player game there is just the one. */
.df-opponents {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.df-seat {
  min-width: 148px;
  padding: 10px 13px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--df-line);
  color: #e8f1f5;
  text-align: center;
}

.df-seat.is-turn {
  box-shadow: 0 0 0 2px var(--df-gold);
  background: rgba(212, 160, 23, 0.14);
}
.df-seat.is-out { opacity: 0.62; }

.df-seat-name { font-weight: 700; font-size: 14px; margin-bottom: 3px; }

.df-seat-title {
  font-family: 'Shippori Mincho B1', serif;
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.14);
  letter-spacing: 0.05em;
}
.df-seat-title[data-title="daifugo"]   { background: var(--df-gold); color: #2a2010; font-weight: 700; }
.df-seat-title[data-title="fugo"]      { background: #9ec9dc; color: #10303d; }
.df-seat-title[data-title="hinmin"]    { background: rgba(255, 255, 255, 0.22); }
.df-seat-title[data-title="daihinmin"] { background: #6b4a5c; color: #f4dde8; }

.df-seat-cards {
  display: flex;
  justify-content: center;
  gap: 2px;
  min-height: 34px;
  align-items: center;
}

/* Face-down backs, heavily overlapped so a 13-card hand fits the seat. */
.df-seat-cards .df-card { --df-w: 24px; }
.df-seat-cards .df-card + .df-card { margin-left: -17px; }

.df-seat-count { font-size: 12.5px; color: rgba(255, 255, 255, 0.7); margin-top: 5px; }
.df-seat-count b { color: #fff; font-size: 15px; }

.df-pass-tag {
  display: inline-block;
  margin-top: 5px;
  font-family: 'Shippori Mincho B1', serif;
  font-size: 11.5px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.72);
}

/* -------------------------------------------------------------- the field */
.df-field {
  border-radius: 12px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--df-line);
  min-height: 152px;
  display: grid;
  place-content: center;
  gap: 10px;
  justify-items: center;
}

.df-field-cards { display: flex; gap: 5px; }
.df-field-cards .df-card { --df-w: 76px; }

.df-field-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
}

.df-field-empty {
  font-family: 'Shippori Mincho B1', serif;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14.5px;
  text-align: center;
}

/* ------------------------------------------------------------ state flags */
.df-flags {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 26px;
}

.df-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: 'Shippori Mincho B1', serif;
  letter-spacing: 0.05em;
}
.df-flag-revolution { background: var(--df-red); color: #fff; animation: dfFlagIn 0.45s ease; }
.df-flag-shibari    { background: #7b4fa0; color: #fff; animation: dfFlagIn 0.45s ease; }
.df-flag-lead       { background: rgba(255, 255, 255, 0.16); color: #e8f1f5; }
@keyframes dfFlagIn { from { transform: scale(0.6); opacity: 0; } }

/* ------------------------------------------------------------- your seat */
.df-you {
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--df-line);
}

.df-you-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #e8f1f5;
  font-size: 13.5px;
  margin-bottom: 10px;
}
.df-you.is-turn { box-shadow: 0 0 0 2px var(--df-gold); }

.df-hand {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 20px;
  min-height: 116px;
}

/* Overlap the fan; hovering a card lifts it clear of its neighbours. */
.df-hand .df-card + .df-card { margin-left: -26px; }
.df-hand .df-card:hover { margin-right: 26px; }
@media (max-width: 720px) {
  .df-hand .df-card { --df-w: 52px; }
  .df-hand .df-card + .df-card { margin-left: -24px; }
}

.df-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.df-btn {
  border: none;
  border-radius: 9px;
  padding: 12px 24px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Shippori Mincho B1', serif;
  min-width: 118px;
  transition: filter 0.15s, transform 0.1s;
}
.df-btn-play { background: var(--df-gold); color: #2a2010; }
.df-btn-pass { background: rgba(255, 255, 255, 0.16); color: #fff; }
.df-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.df-btn:not(:disabled):hover { filter: brightness(1.1); }
.df-btn:not(:disabled):active { transform: translateY(1px); }

.df-hint {
  text-align: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.66);
  margin-top: 7px;
  min-height: 18px;
}
.df-hint.is-error { color: #ffb3bd; }

/* ------------------------------------------------------- shout / result */
.df-shout {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 24;
  font-family: 'Yuji Syuku', serif;
  font-size: clamp(36px, 8vw, 76px);
  color: var(--df-gold);
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.72);
  pointer-events: none;
  animation: dfShout 1.25s ease forwards;
}
@keyframes dfShout {
  0% { transform: translate(-50%, -50%) scale(0.45); opacity: 0; }
  24% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  72% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -60%) scale(1); opacity: 0; }
}

.df-result-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.df-result-table th, .df-result-table td {
  padding: 8px 11px;
  border-bottom: 1px solid var(--ya-line, #ddd2bf);
  text-align: left;
}
.df-result-table .df-rank-1 { font-weight: 700; color: var(--df-gold); }

/* ----------------------------------------------------------- exchange UI */
.df-exchange {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(8, 32, 44, 0.76);
  backdrop-filter: blur(3px);
  border-radius: 14px;
  padding: 20px;
}
.df-exchange-box {
  background: var(--ya-kinari, #faf6ee);
  border-radius: 13px;
  padding: 22px 24px;
  max-width: 520px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.df-exchange-box h3 { font-family: 'Shippori Mincho B1', serif; font-size: 21px; margin-bottom: 6px; }
.df-exchange-box p { font-size: 14px; color: #55503f; margin-bottom: 14px; }
.df-exchange-cards { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }

/* Linen-finish cards on an indigo cloth table. */
.df-card { border-radius:5px; box-shadow:0 1px 0 #c4b9a5,0 2px 0 #e5dcc9,0 4px 7px #0005; }
.df-svg {border-radius:5px;}
.df-table { border-radius:10px; border:7px solid #3a3430; outline:1px solid #9c8865; background:linear-gradient(125deg,#163c526e,#122b47dd),url('/images/art/materials/felt.webp') center/cover; box-shadow:inset 0 0 50px #05172e80,inset 0 0 0 1px #d9c49360,0 6px 0 #262827,0 14px 28px #20302325; }
.df-seat,.df-you {border-radius:6px; background:#071b2a35;border-color:#dfd6b72a;}
.df-field {border-radius:6px;background:#fff7db05;border-color:#d9c49340;}
.df-seat.is-turn,.df-you.is-turn {box-shadow:0 0 0 1px #dfc38b; background:#ddbd7012;}
.df-selected {filter:none;box-shadow:0 0 0 2px #e6c479,0 8px 13px #0006;}
.df-selected::after {border-width:2px;border-color:#e6c479;}
.df-btn-play,.hf-btn-koikoi {background:linear-gradient(#ead399,#cdb070);box-shadow:inset 0 1px #fff4cf,0 2px 4px #0002;}
@media(max-width:640px) { .df-table {border-width:4px;} }

/* Playing cards are thin card stock: no stacked edge, just a soft shadow, and
   a radius that follows the card's width (the face is cut at 7.5/100) so the
   shadow and the selection ring trace the real corner at every size. */
.df-card { border-radius: calc(var(--df-w) * 0.075); box-shadow: 0 0 0 .5px #00000014, 0 1px 1.5px #00000038, 0 4px 10px -3px #00000059; }
.df-svg { border-radius: inherit; }
.df-selected { box-shadow: 0 0 0 .5px #00000014, 0 10px 18px -4px #00000066; }
.df-selected::after { inset: -3px; border-radius: calc(var(--df-w) * 0.075 + 3px); }