/* UX Pass #6 — strategic time economy + stronger game feel */

.player-card-v2 {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "identity score"
    "resources resources";
  gap: 7px 10px;
  align-items: center;
  border: 1px solid #3b434b;
  border-radius: 14px;
  background: linear-gradient(145deg, #1b2025 0%, #15191d 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
  overflow: hidden;
}

.player-card-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 20% 20%, rgba(213, 239, 110, .12), transparent 48%);
  transition: opacity .2s ease;
}

.player-card-v2.active {
  border-color: #d2ef68;
  box-shadow: 0 0 0 1px rgba(210,239,104,.22), 0 0 22px rgba(185,224,70,.18), inset 0 1px rgba(255,255,255,.08);
  transform: translateY(-1px);
}

.player-card-v2.active::after { opacity: 1; }
.player-card-v2:not(.active) { opacity: .78; }

.player-identity {
  grid-area: identity;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.player-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid #535d67;
  background: linear-gradient(145deg, #303840, #20262c);
  box-shadow: inset 0 1px rgba(255,255,255,.09);
  color: #f5f8f1;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .02em;
  overflow: hidden;
}

.player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-card-v2.active .player-avatar {
  border-color: #d2ef68;
  box-shadow: 0 0 14px rgba(210,239,104,.2), inset 0 1px rgba(255,255,255,.1);
}

.player-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.player-copy .player-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 850;
  color: #eef2ed;
}

.player-turn-state {
  font-size: .57rem;
  font-weight: 950;
  letter-spacing: .1em;
  color: #7f8a92;
}

.player-card-v2.active .player-turn-state { color: #d2ef68; }

.player-score-block {
  grid-area: score;
  display: grid;
  justify-items: end;
  line-height: 1;
}

.player-score-block span {
  font-size: .58rem;
  color: #89939b;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.player-score-block strong {
  margin-top: 3px;
  font-size: 1.55rem;
  color: #fff;
}

.player-resources {
  grid-area: resources;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.resource-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid #414a52;
  background: #20262b;
  color: #aeb7bd;
  font-size: .65rem;
  line-height: 1;
}

.resource-pill.speed {
  border-color: #827328;
  background: rgba(106, 91, 24, .18);
  color: #f0dc67;
}

.resource-pill.time {
  border-color: #217b7d;
  background: rgba(19, 103, 106, .2);
  color: #84e9e4;
}

.resource-pill.time.mega {
  border-color: #2398a0;
  box-shadow: inset 0 0 10px rgba(60,210,218,.06);
}

.resource-changed { animation: resourcePop .46s ease both; }
.turn-arrival { animation: playerArrival .48s cubic-bezier(.2,.8,.2,1) both; }
.turn-switch-pop { animation: turnSwitch .42s ease both; }

@keyframes resourcePop {
  0% { transform: scale(1); }
  42% { transform: scale(1.14); filter: brightness(1.35); }
  100% { transform: scale(1); }
}

@keyframes playerArrival {
  0% { transform: translateY(2px) scale(.985); }
  55% { transform: translateY(-2px) scale(1.015); }
  100% { transform: translateY(-1px) scale(1); }
}

@keyframes turnSwitch {
  0% { opacity: .35; transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}

.turn-objective {
  margin-top: 4px;
  color: #d2ef68;
  font-size: .68rem;
  line-height: 1.2;
  font-weight: 800;
}

.legend-time {
  color: #7be3df;
  font-weight: 850;
}

.cell.bonus-TIME_5,
.cell.bonus-TIME_10 {
  position: relative;
  color: #eaffff;
  font-weight: 950;
  letter-spacing: -.02em;
  text-shadow: 0 1px 5px rgba(0,0,0,.5);
  background: linear-gradient(145deg, #126e71 0%, #174e5d 100%);
  border-color: #2da1a5;
  box-shadow: inset 0 0 12px rgba(126,246,240,.08);
}

.cell.bonus-TIME_10 {
  background: linear-gradient(145deg, #168c91 0%, #14536a 100%);
  border-color: #6ce7e2;
  box-shadow: inset 0 0 14px rgba(126,246,240,.14), 0 0 7px rgba(64,219,213,.08);
}

.definition-modal-v2 {
  width: min(680px, calc(100vw - 24px));
  max-height: min(92dvh, 820px);
  overflow: auto;
}

.definition-extension-panel {
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid #38464b;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(25,44,48,.82), rgba(24,29,33,.92));
}

.definition-extension-copy {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 8px;
}

.definition-extension-copy strong {
  color: #d9f7f4;
  font-size: .8rem;
}

.definition-extension-copy span {
  color: #88ddd8;
  font-size: .7rem;
  font-weight: 800;
}

.definition-extension-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.definition-extension-actions button {
  min-height: 34px;
  padding: 6px 7px;
  border: 1px solid #347478;
  background: #173c42;
  color: #d8fbf8;
  font-size: .68rem;
  font-weight: 850;
}

.definition-extension-actions button small {
  display: block;
  margin-top: 2px;
  color: #f2d866;
  font-size: .58rem;
}

.definition-extension-actions button:disabled {
  opacity: .34;
  filter: grayscale(.35);
}

.definition-extension-status {
  min-height: 1em;
  margin-top: 7px;
  color: #89999e;
  font-size: .62rem;
  line-height: 1.25;
}

.definition-extension-panel.extension-used {
  border-color: #4d7f6d;
  background: linear-gradient(145deg, rgba(27,64,53,.75), rgba(24,32,31,.95));
}

.timer.extended {
  color: #81ece5;
  border-color: #2f9392;
  box-shadow: 0 0 16px rgba(62,212,205,.15);
}

.turn-definition-text {
  font-weight: 650 !important;
  color: #d8ded8;
  line-height: 1.35;
}

.game-toast {
  position: fixed;
  z-index: 140;
  left: 50%;
  top: max(18px, env(safe-area-inset-top));
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 28px));
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid #53606a;
  background: rgba(20,24,28,.96);
  box-shadow: 0 14px 38px rgba(0,0,0,.38);
  color: #eef3f1;
  text-align: center;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .01em;
  animation: toastIn .25s ease both;
}

.game-toast.time {
  border-color: #39a9a8;
  color: #a9fbf4;
}

@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -8px) scale(.98); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.game-intro-card-v2 {
  max-height: min(92dvh, 850px);
  overflow: auto;
  scrollbar-width: thin;
}

.game-intro-card-v2 .game-intro-flow > div { align-content: start; }
.game-intro-card-v2 .game-intro-flow span { line-height: 1.35; }

.game-intro-bonus.time {
  color: #d8fffc;
  border-color: #2c9496;
  background: #14545b;
}

.game-intro-bonus.time.mega {
  border-color: #72e7e2;
  background: #17676d;
}

.game-intro-strategy {
  border-top: 1px solid rgba(255,255,255,.065);
  padding-top: 8px;
}

.game-intro-gate em { color: #d2ef68; }

.match-result-modal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 18%, rgba(143,176,55,.12), transparent 35%), rgba(7,9,10,.78);
  backdrop-filter: blur(10px);
}

.match-result-card {
  position: relative;
  width: min(760px, 100%);
  max-height: min(94dvh, 900px);
  overflow: auto;
  padding: 24px;
  border: 1px solid #57643e;
  border-radius: 22px;
  background: linear-gradient(160deg, #212720 0%, #161a1d 44%, #131619 100%);
  box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.06);
  animation: resultEntrance .42s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes resultEntrance {
  from { opacity: 0; transform: translateY(12px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.match-result-confetti {
  text-align: center;
  color: #d9ed73;
  font-size: .9rem;
  letter-spacing: .22em;
  opacity: .9;
}

.match-result-kicker {
  margin: 7px 0 2px;
  text-align: center;
  color: #8f9a80;
  font-size: .65rem;
  font-weight: 950;
  letter-spacing: .15em;
}

.match-result-card h2 {
  margin: 3px 0 5px;
  text-align: center;
  font-size: clamp(1.55rem, 5vw, 2.35rem);
  letter-spacing: -.04em;
}

.match-result-subtitle {
  margin: 0 auto 16px;
  max-width: 560px;
  text-align: center;
  color: #aeb6ad;
  font-size: .82rem;
}

.match-result-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 12px 0 18px;
}

.final-score-player {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px;
  border: 1px solid #3b4446;
  border-radius: 14px;
  background: #181d20;
}

.final-score-player.winner {
  border-color: #cbe868;
  background: linear-gradient(145deg, rgba(87,105,34,.3), #181d20 70%);
  box-shadow: 0 0 18px rgba(197,230,90,.1);
}

.final-score-player span { color: #aeb5b4; font-size: .75rem; font-weight: 800; }
.final-score-player strong { color: #fff; font-size: 2rem; line-height: 1; }
.final-score-player.winner strong { color: #dcf27d; }
.final-score-vs { color: #697278; font-size: .62rem; font-weight: 950; letter-spacing: .1em; }

.match-result-highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.match-highlight {
  min-width: 0;
  padding: 11px 9px;
  border: 1px solid #343d42;
  border-radius: 12px;
  background: #171b1f;
  text-align: center;
}

.match-highlight-icon { display: block; margin-bottom: 3px; font-size: 1.05rem; }
.match-highlight > span:not(.match-highlight-icon) { display: block; color: #7f8b91; font-size: .58rem; text-transform: uppercase; letter-spacing: .07em; }
.match-highlight strong { display: block; margin-top: 3px; color: #eef2ec; font-size: .86rem; overflow-wrap: anywhere; }
.match-highlight small { display: block; margin-top: 3px; color: #919c9f; font-size: .58rem; line-height: 1.25; max-height: 3.75em; overflow: hidden; }

.match-result-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.result-breakdown-player {
  padding: 12px;
  border: 1px solid #343c40;
  border-radius: 12px;
  background: #15191c;
}

.result-breakdown-player > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  color: #8f9a9e;
  font-size: .7rem;
}

.result-breakdown-player > div strong { color: #e8ece9; }
.result-breakdown-head { padding-bottom: 7px !important; border-bottom: 1px solid #2d3438; margin-bottom: 3px; }
.result-breakdown-head strong { font-size: .82rem; }
.result-final-line { margin-top: 4px; padding-top: 8px !important; border-top: 1px solid #333c40; }
.result-final-line span, .result-final-line strong { color: #d9ed73 !important; font-weight: 950; }

.match-result-actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.25fr;
  gap: 8px;
  margin-top: 16px;
}

.match-result-actions button { min-height: 43px; }
.match-result-actions button:disabled { opacity: .42; cursor: not-allowed; }

@media (max-width: 720px) {
  .scorebar {
    gap: 5px !important;
  }

  .player-card-v2 {
    min-height: 72px !important;
    padding: 7px 8px !important;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 4px 6px;
    border-radius: 11px;
  }

  .player-avatar {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
    font-size: .6rem;
  }

  .player-identity { gap: 5px; }
  .player-copy .player-name { font-size: .72rem; }
  .player-turn-state { font-size: .45rem; letter-spacing: .06em; }
  .player-score-block strong { font-size: 1.15rem; }
  .player-score-block span { font-size: .48rem; }

  .player-resources {
    gap: 3px;
    flex-wrap: nowrap;
  }

  .resource-pill {
    min-height: 18px;
    padding: 2px 4px;
    font-size: .52rem;
  }

  .turn-card {
    min-width: 82px;
    padding-inline: 5px !important;
  }

  .turn-objective {
    font-size: .58rem;
    max-width: 130px;
  }

  .legend-time { display: inline !important; }

  .definition-extension-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .definition-extension-actions {
    grid-template-columns: 1fr 1fr;
  }

  .definition-extension-actions button {
    min-height: 31px;
    font-size: .62rem;
  }

  .match-result-card {
    padding: 17px 13px 14px;
    border-radius: 17px;
  }

  .match-result-score { gap: 6px; margin-bottom: 12px; }
  .final-score-player { padding: 9px 6px; }
  .final-score-player strong { font-size: 1.55rem; }

  .match-result-highlights {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .match-result-breakdown { grid-template-columns: 1fr; gap: 6px; }

  .match-result-actions {
    grid-template-columns: 1fr 1fr;
  }

  #matchRematch { grid-column: 1 / -1; }
  #matchNewOpponent { grid-column: 1 / -1; }

  .game-intro-card-v2 .game-intro-flow {
    gap: 5px;
  }

  .game-intro-card-v2 .game-intro-flow > div {
    padding: 7px;
  }
}