@import url("../go-fish/go-fish.css");

:root {
  --ocean-950: #271b2b;
  --ocean-900: #342538;
  --ocean-800: #59425d;
  --ocean-700: #87658a;
  --ocean-500: #ad8bb0;
  --coral: #c95855;
  --yellow: #e9bd62;
}

.game-intro h1 { color: var(--ocean-900); }
.aliases { display: flex; gap: .45rem; margin-top: .8rem; }
.aliases span { padding: .35rem .7rem; border: 1px solid #c9c0b0; border-radius: 999px; color: #77706f; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.game-topbar { background: var(--ocean-950); }
.deal-status { display: flex; align-items: center; justify-content: center; gap: 1.2rem; color: #b9a7bb; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.deal-status b { color: #fff; }
.trump-chip { padding: .5rem .75rem; border-radius: 999px; background: rgba(255,255,255,.09); }
.trump-chip b { margin-left: .25rem; color: var(--yellow); font-size: 1rem; }

.ecarte-table { position: relative; min-width: 0; min-height: 750px; overflow: hidden; background-color: var(--ocean-800); background-image: radial-gradient(circle at center,rgba(233,189,98,.13),transparent 31%),url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E"); }
.ecarte-table::before { content: ""; position: absolute; left: 50%; top: 48%; width: 650px; height: 650px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: inset 0 0 0 82px rgba(39,27,43,.07),inset 0 0 0 83px rgba(255,255,255,.035); transform: translate(-50%,-50%); }
.table-monogram { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.025); font-family: var(--serif); font-size: 18rem; }
.opponent-seat { left: 50%; top: 24px; transform: translateX(-50%); }
.human-seat { left: 50%; bottom: 174px; transform: translateX(-50%); }
.avatar.opponent { background: #b38ab6; }
.avatar.human { background: var(--yellow); color: var(--ocean-950); }
.opponent-hand { position: absolute; z-index: 6; left: 50%; top: 79px; display: flex; justify-content: center; width: 210px; transform: translateX(-50%); }
.back-card { width: 43px; height: 62px; flex: 0 0 auto; margin-left: -17px; border: 3px solid var(--paper-light); border-radius: 6px; background: var(--coral); box-shadow: 0 7px 13px rgba(0,0,0,.24); transform: rotate(calc((var(--i) - 2) * 2deg)); }
.back-card:first-child { margin-left: 0; }
.back-card::after,.stock-pile::after { content: "É"; position: absolute; inset: 4px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 3px; color: #fff; font-family: var(--serif); }

.stock-zone { position: absolute; z-index: 7; left: calc(50% - 235px); top: 44%; width: 155px; height: 140px; transform: translate(-50%,-50%); }
.stock-pile,.trump-card { position: absolute; width: 72px; height: 104px; border-radius: 7px; }
.stock-pile { z-index: 2; left: 62px; top: 0; border: 3px solid var(--paper-light); background: var(--coral); box-shadow: -5px 5px 0 #963e45,-9px 10px 16px rgba(0,0,0,.25); }
.stock-pile::after { content: ""; }
.stock-pile span { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: #fff; font-family: var(--serif); font-size: 1.35rem; }
.stock-pile.is-empty { display: none; }
.trump-card { z-index: 1; left: 0; top: 18px; background: var(--paper-light); color: var(--ink); box-shadow: 0 8px 15px rgba(0,0,0,.22); transform: rotate(-8deg); }
.trump-card.red { color: var(--coral); }
.stock-zone > small { position: absolute; left: 0; right: 0; bottom: 0; color: #d7c8d7; font-size: .57rem; font-weight: 700; letter-spacing: .13em; text-align: center; text-transform: uppercase; }

.trick-area { position: absolute; z-index: 5; left: 50%; top: 44%; width: 260px; height: 330px; transform: translate(-50%,-50%); }
.played-slot { position: absolute; left: 50%; width: 78px; height: 112px; border: 1px dashed rgba(255,255,255,.2); border-radius: 8px; transform: translateX(-50%); }
.opponent-slot { top: 0; }
.human-slot { bottom: 0; }
.table-message { position: absolute; left: 50%; top: 50%; width: 280px; text-align: center; transform: translate(-50%,-50%); }
.table-message span { display: inline-block; margin-bottom: .55rem; padding: .34rem .65rem; border-radius: 999px; background: rgba(39,27,43,.48); color: var(--yellow); font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.table-message strong { display: block; color: #fff7ee; font-size: .72rem; line-height: 1.5; }
.exchange-marker { position: absolute; z-index: 5; left: calc(50% + 235px); top: 44%; display: flex; align-items: center; flex-direction: column; justify-content: center; width: 138px; height: 138px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: rgba(39,27,43,.18); transform: translate(-50%,-50%); }
.exchange-marker span,.exchange-marker small { color: #ccbace; font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; }
.exchange-marker strong { margin: .2rem 0;color: var(--yellow); font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.exchange-marker small { max-width: 80px; text-align: center; }

.human-hand { align-items: flex-end; }
.playing-card { margin-left: -10px; }
.playing-card.is-selected { transform: translateY(-18px); }
.played-slot .playing-card { position: absolute; inset: 3px auto auto 3px; margin: 0; cursor: default; pointer-events: none; }
.card-rank { line-height: .72; }
.game-panel { background: #211824; }
.action-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; margin-top: 1rem; }
.action-buttons button { min-height: 42px; padding: .65rem; border: 0; background: var(--coral); color: #fff; font-size: .68rem; font-weight: 700; cursor: pointer; }
.action-buttons button.secondary { background: #ddd2c2; color: #382f36; }
.action-buttons button:disabled { cursor: default; opacity: .42; }
.tricks-card > div:last-child { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1rem 0; }
.tricks-card p { display: flex; flex-direction: column; margin: 0; text-align: center; }
.tricks-card strong { color: #fff; font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.tricks-card small { color: #9e899f; font-size: .55rem; text-transform: uppercase; }
.tricks-card i { color: var(--yellow); font-style: normal; }
.rank-card p { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin: 1rem 0 0; }
.rank-card p b { color: var(--yellow); font-family: var(--serif); font-size: 1.1rem; font-weight: 400; }
.rank-card p span { color: #c2afc4; font-size: .62rem; }
.activity-panel { min-height: 150px; }
.activity-panel ol { max-height: 165px; overflow: auto; }
.final-scores { grid-template-columns: repeat(2,1fr); }

.game-taxonomy { margin-top: 0; }

@media (max-width: 1080px) {
  .ecarte-table { min-height: 750px; }
}

@media (max-width: 760px) {
  .game-topbar { grid-template-columns: 1fr auto; }
  .score-strip { grid-column: 1/-1; justify-content: center; }
  .deal-status { grid-row: 1; justify-content: flex-start; flex-wrap: wrap; }
  .quiet-button { grid-column: 2; grid-row: 1; }
  .ecarte-table { min-height: 700px; }
  .ecarte-table::before { width: 500px; height: 500px; }
  .opponent-hand { top: 76px; }
  .stock-zone { left: 12px; top: 40%; width: 115px; height: 118px; transform: translateY(-50%); }
  .stock-pile,.trump-card { width: 55px; height: 80px; }
  .stock-pile { left: 47px; }
  .exchange-marker { left: auto; right: 8px; top: 40%; width: 102px; height: 102px; transform: translateY(-50%); }
  .exchange-marker strong { font-size: 1.5rem; }
  .trick-area { top: 44%; width: 190px; height: 300px; }
  .table-message { width: 190px; }
  .human-seat { bottom: 155px; }
  .human-hand { width: calc(100% - 8px); overflow-x: auto; justify-content: flex-start; padding: 15px max(4px,calc((100% - 280px)/2)); scrollbar-width: none; }
  .human-hand::-webkit-scrollbar { display: none; }
  .playing-card { width: 62px; height: 91px; margin-left: -7px; }
  .playing-card:first-child { margin-left: 0; }
  .action-buttons { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .deal-status span:first-child { display: none; }
  .stock-zone { left: 5px; }
  .exchange-marker { right: 3px; }
}