/* Șeptică: cărțile și masa de joc (se încarcă după style.css) */

/* =================================================================== CĂRȚILE */
.sp-card {
  --cw: 64px;
  position: relative; width: var(--cw); aspect-ratio: 100 / 140; border-radius: calc(var(--cw) * .085);
  background: linear-gradient(160deg, #ffffff 0%, #fbf8f1 55%, #efe9dc 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .22), 0 2px 4px rgba(0, 0, 0, .25), 0 6px 14px rgba(0, 0, 0, .22);
  user-select: none; -webkit-user-select: none; flex: 0 0 auto; overflow: hidden;
}
.sp-card .sp-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sp-svg.red { --ink: #c4122f; --tint: #fdecec; }
.sp-svg.blk { --ink: #18181d; --tint: #eceff6; }
.sp-s { fill: var(--ink); }
.sp-r { fill: var(--ink); font: 800 17px/1 Georgia, 'Times New Roman', serif; text-anchor: middle; }
.sp-r.ten { font-size: 15px; letter-spacing: -1.2px; }
.sp-ring { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: .25; }
.sp-frame { fill: var(--tint); stroke: var(--ink); stroke-width: 1.6; opacity: .95; }
.sp-frame2 { fill: none; stroke: var(--ink); stroke-width: .6; opacity: .5; }
.sp-big { fill: var(--ink); font: 900 46px/1 Georgia, 'Times New Roman', serif; text-anchor: middle; }
.sp-o { fill: #c9a03a; stroke: var(--ink); stroke-width: .9; }

.sp-card.back { background: linear-gradient(150deg, var(--back-1, #8b1d2c), var(--back-2, #3b0a12)); }
.sp-svg.back .sp-bk-in { fill: none; }
.sp-svg.back .sp-bk-lat path { stroke: rgba(255, 255, 255, .16); stroke-width: 1.4; fill: none; }
.sp-svg.back .sp-bk-edge { fill: none; stroke: rgba(255, 230, 170, .75); stroke-width: 2; }
.sp-svg.back .sp-bk-em { fill: rgba(0, 0, 0, .25); stroke: rgba(255, 230, 170, .85); stroke-width: 2; }
.sp-svg.back .sp-bk-7 { fill: rgba(255, 236, 190, .95); font: 900 25px/1 Georgia, serif; text-anchor: middle; }
.sp-svg.back { clip-path: inset(0 round 8%); }

/* =================================================================== MASA */
#game.sp { grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; }
#game.sp .g-main { display: flex; min-height: 0; }
#game.sp .table-wrap { flex: 1; }
#game.sp .felt { padding: 0; gap: 0; display: block; border-radius: 40px; }

.g-pill.sp-pill { gap: 10px; align-items: center; font-size: 15px; padding: 6px 16px; }
.sp-pill .sp-match { color: var(--gold-2); }
.sp-rule { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 2px; }
.sp-rule .sp-cut { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: rgba(196, 18, 47, .28); border: 1px solid rgba(255, 120, 130, .5); color: #ffe1e4; white-space: nowrap; }
.sp-rule .sp-out { font-size: 11.5px; color: #e4ddc8; font-weight: 700; white-space: nowrap; background: rgba(0, 0, 0, .3); padding: 2px 8px; border-radius: 999px; }
.sp-rule .sp-out b { color: #fff; }

/* locurile jucătorilor, pe marginea mesei */
.sp-seats { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sp-seat { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sp-seat .pcard { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 14px; min-width: 0; max-width: 220px;
  background: linear-gradient(160deg, rgba(34, 30, 52, .94), rgba(14, 12, 26, .95)); border: 1.5px solid rgba(232, 199, 123, .35);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45); position: relative; }
.sp-seat .pcard.turn { border-color: #f3d48a; animation: turnGlow 1.6s ease-in-out infinite; }
.sp-seat .avatar { width: 42px; height: 42px; font-size: 16px; border-width: 2px; flex: 0 0 auto; }
.sp-seat .pinfo { min-width: 0; }
.sp-seat .pname { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.sp-seat .pname .nm { overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.sp-seat .pmeta { display: flex; gap: 5px; align-items: center; font-size: 11.5px; margin-top: 2px; color: #cfc8b4; font-weight: 700; white-space: nowrap; }
.sp-team { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.sp-seat .pts { color: #ffe39a; }
.sp-seat .ptag.turn { font-size: 10.5px; padding: 1px 6px; border-radius: 6px; background: #f3d48a; color: #2a1d06; font-weight: 900; }
.sp-seat .ptag.mate { font-size: 10.5px; padding: 1px 6px; border-radius: 6px; background: rgba(120, 190, 255, .18); color: #bfe0ff; border: 1px solid rgba(120, 190, 255, .4); }
.sp-seat .pcnt { display: none; color: #e4ddc8; }
.sp-seat .ptimer { position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.sp-seat .ptimer i { display: block; height: 100%; background: linear-gradient(90deg, #f3d48a, #ffecb8); }
.sp-seat .pchat { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; z-index: 5; }
/* evantaiul cu cărțile din mâna adversarului (cu spatele) */
.sp-fan { display: flex; height: calc(var(--fw, 26px) * 1.4); }
.sp-fan .sp-card { --cw: var(--fw, 26px); margin-left: calc(var(--fw, 26px) * -.62); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 2px 5px rgba(0, 0, 0, .35); }
.sp-fan .sp-card:first-child { margin-left: 0; }
.sp-seat.pos-top .sp-fan { order: -1; }

/* centrul mesei: cărțile din mâna (turul) curentă */
.sp-center { position: absolute; left: 50%; top: 47%; width: 0; height: 0; z-index: 2; }
.sp-trick { position: absolute; left: 0; top: 0; }
.sp-trick .sp-card { --cw: var(--tcw, 70px); position: absolute; left: calc(var(--tcw, 70px) * -.5); top: calc(var(--tcw, 70px) * -.7);
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); transition: transform .25s ease; }
.sp-trick .sp-card.win { box-shadow: 0 0 0 2px #f3d48a, 0 0 18px rgba(243, 212, 138, .75), 0 6px 14px rgba(0, 0, 0, .3); }
.sp-trick .sp-card.cut::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(255, 90, 100, .75); }
.sp-lead { position: absolute; left: 0; top: calc(var(--tcw, 70px) * 1.32); transform: translateX(-50%); white-space: nowrap; font-size: 12.5px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .35); color: #f4ead2; border: 1px solid rgba(255, 255, 255, .12); }
.sp-lead.empty { opacity: 0; }

/* pachetul */
.sp-deck { position: absolute; left: 9%; top: 74%; transform: translate(-50%, -50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sp-deck .stk { position: relative; width: var(--dw, 52px); height: calc(var(--dw, 52px) * 1.4); }
.sp-deck .stk .sp-card { --cw: var(--dw, 52px); position: absolute; left: 0; top: 0; }
.sp-deck .cnt { font-size: 12px; font-weight: 800; color: #f4ead2; background: rgba(0, 0, 0, .35); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.sp-deck.empty .stk { opacity: .18; }

/* scorul jocului curent (punctele strânse) */
.sp-score { position: absolute; right: 2.5%; bottom: 13%; z-index: 2; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.sp-score .row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 10px; background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .1); font-weight: 800; font-size: 13px; color: #f4ead2; }
.sp-score .row b { margin-left: auto; font-size: 16px; color: #ffe39a; min-width: 14px; text-align: right; }
.sp-score .row.me { border-color: rgba(243, 212, 138, .5); }
.sp-score .row .nm { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-score .wins { font-size: 11px; color: #c8c2b0; font-weight: 700; text-align: center; }
.sp-last { pointer-events: auto; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; color: #f4ead2; padding: 5px 10px; border-radius: 10px;
  background: rgba(0, 0, 0, .3); border: 1px dashed rgba(255, 255, 255, .25); }
.sp-last:disabled { opacity: .35; cursor: default; }

/* mesajul de stare */
#game.sp .sp-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 4; max-width: 92%; text-align: center;
  font-size: 14px; font-weight: 800; padding: 7px 16px; border-radius: 999px; background: rgba(8, 10, 18, .72); border: 1px solid rgba(232, 199, 123, .35); color: #f6edd6; }
#game.sp .sp-hint.good { border-color: rgba(120, 220, 140, .7); color: #d9ffe0; }
#game.sp .sp-hint.warn { border-color: rgba(255, 200, 90, .8); color: #ffe7b0; }

/* jos: mâna mea */
.sp-bottom { display: flex; align-items: flex-end; justify-content: center; gap: 14px; min-height: 0; position: relative; padding: 0 6px; }
.sp-me { align-self: center; }
.sp-me .pcard { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 14px; position: relative;
  background: linear-gradient(160deg, rgba(48, 40, 78, .94), rgba(18, 16, 36, .95)); border: 1.5px solid rgba(232, 199, 123, .6); }
.sp-me .pcard.turn { border-color: #f3d48a; animation: turnGlow 1.6s ease-in-out infinite; }
.sp-me .avatar { width: 46px; height: 46px; }
.sp-me .pname { font-weight: 800; font-size: 14px; display: flex; gap: 5px; align-items: center; }
.sp-me .pmeta { font-size: 11.5px; color: #cfc8b4; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.sp-me .pchat { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; }
.sp-hand { display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--hw, 96px) * .1); padding-top: 18px; min-height: calc(var(--hw, 96px) * 1.4 + 18px); }
.sp-hand .sp-card { --cw: var(--hw, 96px); transition: transform .18s ease, box-shadow .18s ease, opacity .18s; cursor: default; }
.sp-hand.mine .sp-card.can { cursor: pointer; }
.sp-hand.mine .sp-card.can:hover, .sp-hand.mine .sp-card.can:focus-visible { transform: translateY(-14px); }
.sp-hand.mine .sp-card.can { box-shadow: 0 0 0 2px rgba(243, 212, 138, .9), 0 0 16px rgba(243, 212, 138, .45), 0 6px 14px rgba(0, 0, 0, .3); }
.sp-hand.mine .sp-card.no { filter: brightness(.62) saturate(.7); }
.sp-hand .sp-card.going { transform: translateY(-30px) scale(1.04); opacity: .0; }
.sp-hand .sp-card.pending { visibility: hidden; }
.sp-hand .sp-card.cutter::before { content: ''; position: absolute; right: 6%; top: 4%; width: 7px; height: 7px; border-radius: 50%; background: #e2383f; box-shadow: 0 0 0 2px #fff; z-index: 1; }
.sp-acts { display: flex; flex-direction: column; gap: 8px; align-self: center; }
.sp-acts .btn { min-width: 112px; }
.sp-acts .sp-stop { background: linear-gradient(180deg, #f3d48a, #c99a35); color: #2a1d06; border: 0; font-weight: 900; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.sp-acts .hidden { display: none; }
.sp-clock { align-self: center; }

/* animații */
.sp-fly { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; margin: 0; }
.sp-flash { position: absolute; left: 0; top: calc(var(--tcw, 70px) * -1.15); transform: translateX(-50%); z-index: 6; font-weight: 900; font-size: 22px; color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6); white-space: nowrap; animation: spFlash 1.1s ease forwards; pointer-events: none; }
.sp-flash.cut { color: #ffd0d4; }
.sp-flash.all { color: #ffe39a; font-size: 26px; }
@keyframes spFlash { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.8); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px) scale(1); } }

/* ultima mână (fereastră mică) */
.sp-lastpop { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); z-index: 8; padding: 12px 14px; border-radius: 16px; background: rgba(10, 12, 22, .94);
  border: 1px solid rgba(232, 199, 123, .5); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); text-align: center; }
.sp-lastpop h4 { margin: 0 0 8px; font-size: 14px; }
.sp-lastpop .sp-lc { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; max-width: 360px; }
.sp-lastpop .sp-card { --cw: 48px; }
.sp-lastpop .who { font-size: 10.5px; color: #c8c2b0; margin-top: 2px; max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* tabletă / calculator orizontal: cărți mai mari */
@media (min-width: 900px) and (min-height: 640px) { .sp-seat .avatar { width: 48px; height: 48px; } }
/* telefon vertical */
@media (max-width: 600px) {
  #game.sp .felt { border-radius: 26px; }
  .sp-seat .pcard { padding: 3px 8px 3px 3px; gap: 6px; border-radius: 11px; }
  .sp-seat .avatar { width: 32px; height: 32px; font-size: 13px; }
  .sp-seat .pname { font-size: 12px; } .sp-seat .pname .nm { max-width: 70px; }
  .sp-seat .pmeta { font-size: 10.5px; }
  .sp-score { right: 2%; bottom: 9%; } .sp-score .row { padding: 3px 7px; font-size: 11.5px; } .sp-score .row .nm { max-width: 58px; }
  .sp-deck { left: 13%; top: 78%; }
  .sp-rule .sp-out { display: none; }
  /* locurile adversarilor: avatar cu numele dedesubt */
  .sp-seat .pcard { flex-direction: column; gap: 2px; padding: 4px 6px; max-width: 92px; text-align: center; }
  .sp-seat .pname { justify-content: center; } .sp-seat .pname .nm { max-width: 72px; } .sp-seat .pname .flag, .sp-seat .pname .lg, .sp-seat .pclub, .sp-seat .pfire { display: none; }
  .sp-seat .pmeta { justify-content: center; flex-wrap: wrap; } .sp-seat .ptag.turn { display: none; }
  .sp-seat .sp-fan { display: none; } .sp-seat .pcnt { display: inline; }
  .sp-bottom { flex-wrap: wrap; gap: 6px 10px; }
  .sp-me { order: 2; } .sp-acts { order: 3; flex-direction: row; } .sp-hand { order: 1; width: 100%; padding-top: 12px; }
  #game.sp .sp-hint { font-size: 12.5px; padding: 5px 12px; bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) { .sp-hand .sp-card, .sp-trick .sp-card { transition: none; } }

/* logo „7” (lobby, bara de sus, meniu) */
.sp-logo7 { display: inline-grid; place-items: center; width: 34px; height: 46px; border-radius: 6px; flex: none;
  background: linear-gradient(160deg, #fff, #efe6d2); color: #c4122f; font: 900 28px/1 Georgia, serif; box-shadow: 0 0 0 1.5px #c9a03a, 0 3px 8px rgba(0, 0, 0, .45); transform: rotate(-6deg); }
.g-logo .sp-logo7 { width: 26px; height: 36px; font-size: 22px; margin-right: 6px; }
.gm-logo.sp-logo7 { width: 30px; height: 40px; font-size: 24px; }
/* cărți mici (rezultate, magazin, reluare) */
.sp-card.mini { --cw: 30px; display: inline-block; vertical-align: middle; margin: 1px; }
.sp-re-cards { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.rp .sp-card { --cw: 52px; display: inline-block; margin: 2px; }
/* filigranul de pe postav */
.sp-wm { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); font: 700 clamp(28px, 7vw, 74px)/1 Georgia, serif; letter-spacing: .18em;
  color: rgba(0, 0, 0, .14); text-shadow: 0 1px 0 rgba(255, 255, 255, .05); pointer-events: none; white-space: nowrap; z-index: 0; }
/* lobby: mese de 5 și 6 */
.tc-seat.nw { left: 28%; top: 13%; } .tc-seat.ne { left: 72%; top: 13%; } .tc-seat.sw { left: 18%; top: 82%; } .tc-seat.se { left: 82%; top: 82%; }

/* tabletă / calculator orizontal (aspectul cu unelte pe coloana din stânga) */
body.land-tab #game.sp { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
body.land-tab #game.sp .g-top { grid-column: 1; grid-row: 1 / 3; }
body.land-tab #game.sp .g-main { grid-column: 2; grid-row: 1; }
body.land-tab #game.sp .sp-bottom { grid-column: 2; grid-row: 2; padding-top: 4px; }
body.land-tab #game.sp .g-pill { width: 62px; }
body.land-tab #game.sp .g-pill #gRound { font-size: 0; }
body.land-tab #game.sp .g-pill #gRound::before { content: attr(data-short); font-size: 13px; line-height: 1.25; white-space: pre-line; }

/* locurile din lateral stau lipite de marginea mesei */
.sp-seat.pos-left { transform: translate(0, -50%); }
.sp-seat.pos-right { transform: translate(-100%, -50%); }