/* Sevens (Badam Satti). The table reuses the Thurupu card table
   (body.thurupu-mode); these rules cover what differs: the opponents across
   the top in turn order, the viewer at the bottom, and the four-row layout in
   between. */
.sevens-tile .game-tile-art{background:radial-gradient(ellipse at 30% 20%,#d8b55a44,transparent 60%),linear-gradient(150deg,#2f5a4a,#1d3a31)}
.sevens-tile .game-tile-art .decorative-hand{transform:translate(-62%,-60%)}
.sevens-tile-row{position:absolute;right:8%;bottom:9%;display:flex;transform:rotate(-6deg)}
.sevens-tile-row .playing-card{width:54px;height:76px;margin-left:-30px;box-shadow:0 4px 8px #0b1c1655}
.sevens-tile-row .playing-card:first-child{margin-left:0}
@media (max-width:580px){.sevens-tile-row .playing-card{width:46px;height:64px;margin-left:-26px}}

.sevens-rule-pick{border:1px solid var(--line);border-radius:12px;padding:10px 12px 6px;margin:0;display:grid;gap:4px}
.sevens-rule-pick legend{font-size:.78rem;font-weight:650;padding:0 4px}
.sevens-rule-pick .option-row{display:flex;gap:10px;align-items:flex-start;padding:6px 2px;cursor:pointer}
.sevens-rule-pick .option-row input{margin-top:4px}
.sevens-rule-pick .option-row strong{display:block;font-size:.86rem}
.sevens-rule-pick .option-row small{display:block;color:var(--muted);font-size:.74rem;line-height:1.45}
.sevens-rules-card h2{font-size:1.5rem}

/* The table: opponents band, layout, own seat. */
.sevens-table{position:relative;display:flex;flex-direction:column;height:clamp(440px,62vh,640px);min-height:0}
/* Phones give the card table a fixed height; the layout takes what the seats
   leave. A portrait phone puts four or more opponents in two staggered rows. */
@media (max-width:580px) and (orientation:portrait){
  body.thurupu-mode.in-game .thurupu-surface .sevens-table{flex:1 1 auto;height:auto}
  .sevens-table .table-orbit.sevens-top[data-rows="2"]{height:calc(var(--seat-height) * 2 + 6px)}
  .sevens-top[data-rows="2"] .seat-circle .player-seat{--seat-y:var(--zig-y)}
}
@media (orientation:landscape) and (min-width:568px) and (max-height:650px){
  .in-game .game-surface .sevens-table{flex:1 1 auto;height:auto}
  .in-game .sevens-table .table-orbit.sevens-band{--seat-width:88px;--seat-height:44px}
  .in-game .sevens-table .table-orbit.sevens-top{height:calc(var(--seat-height) + 18px)}
  /* Five or more opponents do not fit in one row on a landscape phone. */
  .in-game .sevens-table .table-orbit.sevens-top:is([data-others="5"],[data-others="6"],[data-others="7"]){height:calc(var(--seat-height) * 2 + 4px)}
  .in-game .sevens-top:is([data-others="5"],[data-others="6"],[data-others="7"]) .seat-circle .player-seat{--seat-y:var(--zig-y)}
}
.audience-board .sevens-table{height:clamp(380px,calc(100dvh - 330px),760px)}
.sevens-table .table-orbit.sevens-band{flex:0 0 auto;--seat-width:110px;--seat-height:58px;height:var(--seat-height);margin:0}
.sevens-table .table-orbit.sevens-band:before{display:none}
.sevens-table .table-orbit.sevens-top{height:calc(var(--seat-height) + 30px)}
.sevens-top .seat-circle .player-seat{--seat-y:var(--arc-y)}
.sevens-table .table-orbit.sevens-top[data-others="0"]{height:0}
.audience-board .sevens-table .table-orbit.sevens-band{--seat-width:150px;--seat-height:76px}
.sevens-band .seat-circle .player-seat.seat-fanned .name{max-width:var(--seat-width)}
.sevens-seats .seat-hand{align-items:flex-end;gap:5px;position:relative}
.sevens-count{font-size:.68rem;font-weight:800;line-height:1;padding:2px 5px;border-radius:8px;background:#0d2e2366;color:#f1ecd2;font-variant-numeric:tabular-nums}
.sevens-out-badge{display:inline-block;padding:3px 8px;border-radius:10px;background:#e7c66f;color:#2f3a22;font-size:.66rem;font-weight:800;white-space:nowrap}
.sevens-pass-tag{position:absolute;left:100%;bottom:2px;margin-left:4px;padding:1px 6px;border-radius:8px;background:#d9d4bf;color:#41443a;font-size:.6rem;font-weight:800;white-space:nowrap}
.table-orbit .seat-circle .player-seat.escaped{opacity:.82}
.sevens-seat-dealing{display:block;width:30px;height:16px}
.sevens-strip .sevens-chip{font-weight:700}
.sevens-direction{font-size:1.05rem;line-height:1;font-weight:700}

/* The layout: four rows, one per suit (hearts, spades, diamonds, clubs), Ace
   to King left to right. Higher cards lie on top, each lower card showing its
   corner; each row lies over the blank lower half of the row above. Card size
   comes from the free space (the layout is a size container). */
.sevens-layout{flex:1 1 auto;min-height:0;display:grid;place-items:center;container-type:size;padding:6px 0}
.sevens-rows{--sv-w:min(15cqw,23cqh,100px);--sv-h:calc(var(--sv-w) * 1.4);--sv-step:calc(var(--sv-w) * .46);--sv-rise:calc(var(--sv-h) * .66);
  position:relative;width:calc(var(--sv-w) + var(--sv-step) * 12);height:calc(var(--sv-h) + var(--sv-rise) * 3)}
.sevens-row{position:absolute;left:0;top:calc(var(--row) * var(--sv-rise));width:100%;height:var(--sv-h);z-index:var(--row)}
.sevens-slot{position:absolute;top:0;left:calc(var(--pos) * var(--sv-step));width:var(--sv-w);height:var(--sv-h);z-index:var(--pos)}
.sevens-slot .playing-card{width:100%;height:100%;margin:0;border-radius:calc(var(--sv-w) * .1);box-shadow:-1px 0 2px #0b221a2e,0 2px 4px #0b221a40}
.sevens-slot .simple-card .card-value{font-size:max(11px,31cqw);margin:7% 0 0 9%;letter-spacing:-.08em}
.sevens-slot .simple-card .card-suit{font-size:max(11px,30cqw);margin:4% 0 0 9%}
/* An unstarted row: an empty felt slot where its 7 goes, labelled at the top
   because the row below covers its lower part. */
.sevens-empty{display:block;border:1.5px dashed #d6e6cc80;border-radius:calc(var(--sv-w) * .1);background:#1d4a3df2;color:#d6e6cca6;font-family:Georgia,serif}
.sevens-empty b{display:block;margin:12% 0 0 10%;font-size:calc(var(--sv-w) * .3);font-weight:600;line-height:1}
.sevens-slot.last-played .playing-card{box-shadow:0 0 0 2px #f3cf7b,0 0 12px #f3cf7b99}
.sevens-ghost{border:2px dashed #f3cf7b;border-radius:calc(var(--sv-w) * .1);background:#f3cf7b26;box-shadow:0 0 12px #f3cf7b66}
.sevens-in-flight{visibility:hidden}
.sevens-flight{position:absolute;left:0;top:0;will-change:transform,opacity}

/* Phones: smaller seats, and with six or seven opponents narrower still so
   two staggered rows fit. */
@media (max-width:580px){
  .sevens-table .table-orbit.sevens-band{--seat-width:96px;--seat-height:50px}
  .sevens-table[data-seat-count="7"] .table-orbit.sevens-band,.sevens-table[data-seat-count="8"] .table-orbit.sevens-band{--seat-width:80px}
  .sevens-table[data-seat-count="7"] .seat-circle .player-seat.seat-fanned .name .gh-face,.sevens-table[data-seat-count="8"] .seat-circle .player-seat.seat-fanned .name .gh-face{--face:2.1em}
  .sevens-pass-tag{left:auto;right:-2px;bottom:-12px;margin:0}
}

/* A hand of up to 18 cards: overlap more as it grows, scroll when it no longer fits. */
.sevens-hand .hand-cards{container-type:inline-size;overflow-x:auto;overflow-y:visible;scrollbar-width:thin}
.sevens-hand .hand-fan{width:max-content;min-width:100%;margin:0 auto;justify-content:center}
.sevens-hand.hand-area .hand-fan{--step:max(calc(var(--hand-card-width) * .3),min(calc(var(--hand-card-width) * .47),calc((100cqw - var(--hand-card-width) - 20px) / max(1, var(--n) - 1))))}
.sevens-hand.hand-area .hand-fan .card-button{width:var(--step);min-width:var(--step);flex:0 0 var(--step)}
.sevens-hand.hand-area .hand-fan .card-button:last-child{width:var(--hand-card-width);min-width:var(--hand-card-width);flex-basis:var(--hand-card-width)}
.sevens-hand .unavailable-card .playing-card{filter:saturate(.45);background:#e4e4d8}
.sevens-hand .unavailable-card .card-value,.sevens-hand .unavailable-card .card-suit{opacity:.55}
.sevens-hand .card-button.selected{transform:translateY(-14px);z-index:60}
body.thurupu-mode.in-game .sevens-hand .hand-cards{overflow-x:auto;overflow-y:hidden;padding-top:16px;margin-top:-16px}
@media (max-width:580px) and (orientation:portrait){body.thurupu-mode.in-game .sevens-hand .hand-cards{--hand-card-width:min(var(--thu-card),74px);--hand-card-height:calc(min(var(--thu-card),74px) * 1.35)}}
.sevens-hand .hand-fan .simple-card .card-value{font-size:min(32cqw,calc(var(--step) * .8));margin-left:6%}
.sevens-hand .hand-fan .simple-card .card-suit{font-size:min(34cqw,calc(var(--step) * .8));margin-left:6%}
.sevens-controls .thurupu-play-actions{display:flex;gap:10px}
.sevens-controls .thurupu-play-actions .btn{flex:1}
@media (prefers-reduced-motion:reduce){.sevens-hand .card-button.selected{transform:translateY(-8px)}}

/* Round and match scores. */
.sevens-result{display:grid;gap:12px}
.sevens-result-title{font-family:Georgia,serif;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15;color:#1f4a3d;margin:4px 0 0}
.sevens-score-head,.sevens-score-row{display:grid;grid-template-columns:38px minmax(0,1.1fr) minmax(0,2fr) 44px 48px;align-items:center;gap:10px}
.sevens-score-head{padding:0 12px;font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.sevens-score-head span:nth-child(n+4){text-align:right}
.sevens-scores{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sevens-score-row{padding:8px 12px;border:1px solid #d7decf;border-radius:12px;background:#ffffff9a}
.sevens-score-row.first-out{border-color:#b7d6a6;background:#f2f8ea}
.sevens-score-row.winner{border:2px solid #e2bf62;background:#fff6dc}
.sevens-score-face .gh-face{--face:34px}
.sevens-score-name{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sevens-score-name small{display:block;font-weight:600;color:var(--muted);font-size:.72rem}
.sevens-score-left{min-width:0}
.sevens-leftover{flex-wrap:wrap;gap:3px}
.sevens-leftover .playing-card.small-card{width:30px;height:42px;margin:0}
.sevens-leftover .simple-card .card-value{font-size:max(10px,34cqw)}
.sevens-leftover .simple-card .card-suit{font-size:max(10px,32cqw)}
.sevens-score-penalty{text-align:right;color:#8a5a2e;font-variant-numeric:tabular-nums}
.sevens-score-total{text-align:right;font-size:1.1rem;font-variant-numeric:tabular-nums}
.sevens-round-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.sevens-round-list li{display:grid;gap:2px;padding:9px 0;border-top:1px solid var(--line);font-size:.82rem}
.sevens-round-list small{color:var(--muted)}
.audience-board .sevens-result-title{font-size:clamp(2.2rem,3.4vw,3.2rem)}
.audience-board .sevens-score-name{font-size:1.2rem}
@media (max-width:580px){
  .sevens-score-head,.sevens-score-row{grid-template-columns:30px minmax(0,1fr) 52px 48px;gap:8px}
  .sevens-score-head{font-size:.62rem;letter-spacing:.04em}
  .sevens-score-head span:nth-child(3){display:none}
  .sevens-score-left{grid-column:2 / -1;grid-row:2}
  .sevens-score-face .gh-face{--face:28px}
  .sevens-leftover .playing-card.small-card{width:26px;height:36px}
}