/* ====== יניב! — עיצוב ====== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

:root {
  --felt1: #17694a;
  --felt2: #0b3524;
  --gold: #f0c75e;
  --gold-deep: #c9992e;
  --ink: #1d232b;
  --red: #d63b4b;
  --card-w: clamp(52px, 15.5vw, 76px);
  --card-h: calc(var(--card-w) * 1.42);
}

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Heebo", "Arial Hebrew", Arial, sans-serif;
  background: var(--felt2);
  color: #fff;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

.screen {
  position: fixed; inset: 0;
  display: none;
  flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% 30%, var(--felt1) 0%, var(--felt2) 75%),
    var(--felt2);
}
.screen.active { display: flex; }

button { font-family: inherit; cursor: pointer; border: none; }

/* ============ מסך פתיחה ============ */
#scr-home { align-items: center; justify-content: center; overflow-y: auto; }
.home-inner {
  width: min(430px, 92vw);
  display: flex; flex-direction: column; align-items: center;
  padding: max(20px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom));
}

.logo-fan { position: relative; width: 140px; height: 110px; margin-bottom: 4px; }
.fan-card {
  position: absolute; top: 10px; left: 50%;
  width: 66px; height: 94px; margin-left: -33px;
  background: linear-gradient(160deg, #fff, #f1f3f6);
  border-radius: 9px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 7px 0 0 9px;
  font-weight: 800; font-size: 24px; color: var(--ink);
  direction: ltr;
}
.fan-card span { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.fan-card i { font-style: normal; font-size: 20px; }
.fan-card.red { color: var(--red); }
.fc1 { transform: translateX(-38px) rotate(-16deg); }
.fc2 { transform: translateY(-10px); z-index: 2; }
.fc3 { transform: translateX(38px) rotate(16deg); color: var(--gold-deep); }
.fc3 span { font-size: 30px; }

.game-title {
  font-size: clamp(56px, 16vw, 78px);
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--gold-deep), 0 8px 24px rgba(0,0,0,.5);
  letter-spacing: -1px;
}
.game-sub { color: #cfe7db; margin: 2px 0 26px; font-size: 15px; }

.home-menu { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 0 18px; }
.menu-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 16px; text-align: right;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  transition: transform .12s, background .2s;
}
.menu-btn:active { transform: scale(.97); }
.menu-btn.primary {
  background: linear-gradient(160deg, var(--gold), var(--gold-deep));
  color: #3a2c07; border-color: transparent;
  box-shadow: 0 8px 22px rgba(240,199,94,.28);
}
.menu-btn.ghost { background: rgba(255,255,255,.04); }
.mb-icon { font-size: 30px; }
.mb-text { display: flex; flex-direction: column; gap: 2px; }
.mb-text b { font-size: 17px; }
.mb-text small { opacity: .75; font-size: 12.5px; }

.setup-panel {
  width: 100%; padding: 4px 18px 0;
  display: flex; flex-direction: column; gap: 11px;
  animation: rise .25s ease;
}
.setup-panel h2 { font-size: 20px; color: var(--gold); text-align: center; margin-bottom: 4px; }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.opt-row > label { font-size: 15px; color: #dcefe5; }
.seg { display: flex; background: rgba(0,0,0,.3); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button {
  min-width: 46px; padding: 8px 12px; border-radius: 9px;
  background: transparent; color: #b8d4c6; font-size: 14px; font-weight: 600;
}
.seg button.sel { background: var(--gold); color: #3a2c07; }

.setup-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.btn-gold {
  padding: 14px 22px; border-radius: 14px;
  background: linear-gradient(160deg, var(--gold), var(--gold-deep));
  color: #3a2c07; font-size: 17px; font-weight: 800;
  box-shadow: 0 6px 18px rgba(240,199,94,.3);
  transition: transform .12s;
}
.btn-gold:active { transform: scale(.96); }
.btn-gold:disabled { filter: grayscale(.8) brightness(.7); box-shadow: none; }
.btn-plain {
  padding: 11px 20px; border-radius: 14px;
  background: rgba(255,255,255,.1); color: #fff; font-size: 15px;
}
.home-foot { margin-top: 26px; font-size: 12px; color: #9fc4b2; text-align: center; }

/* ============ מסך משחק ============ */
#scr-game { padding-top: env(safe-area-inset-top); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
}
.tb-btn {
  width: 38px; height: 38px; border-radius: 12px;
  background: rgba(0,0,0,.28); color: #fff; font-size: 16px;
}
.tb-left { display: flex; gap: 8px; }
.tb-mid { font-size: 13.5px; color: #cfe7db; font-weight: 600; }
.tb-dot { opacity: .5; margin: 0 4px; }

/* --- יריבים --- */
.opponents {
  display: flex; justify-content: center; gap: 10px;
  padding: 2px 10px 6px; flex-wrap: wrap;
}
.oppo {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 10px 7px; border-radius: 16px; min-width: 86px;
  background: rgba(0,0,0,.22);
  border: 2px solid transparent;
  transition: border-color .3s, box-shadow .3s, opacity .3s;
}
.oppo.active {
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(240,199,94,.35);
  animation: pulse 1.6s infinite;
}
.oppo.out { opacity: .38; filter: grayscale(1); }
@keyframes pulse { 50% { box-shadow: 0 0 26px rgba(240,199,94,.55); } }
.oppo-ava { font-size: 26px; line-height: 1; }
.oppo-name { font-size: 12.5px; font-weight: 700; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oppo-cards { display: flex; height: 26px; direction: ltr; }
.oppo-cards .mini-back {
  width: 17px; height: 25px; border-radius: 3px;
  background: linear-gradient(150deg, #4a72d8, #2c4794);
  border: 1px solid rgba(255,255,255,.7);
  margin-left: -8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.oppo-score {
  font-size: 11px; font-weight: 700; color: #3a2c07;
  background: var(--gold); border-radius: 8px; padding: 1px 8px;
}
.oppo.out .oppo-score::after { content: " ✕"; }

/* --- מרכז השולחן --- */
.table-area {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  position: relative; min-height: 0;
}
.table-center { display: flex; align-items: center; gap: min(9vw, 44px); }
.deck-wrap, .pile-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.pile-label { font-size: 11.5px; color: #a9ccbb; font-weight: 600; }

.deck-stack { position: relative; width: var(--card-w); height: var(--card-h); }
.deck-stack .card { position: absolute; inset: 0; }
.deck-stack .card:nth-child(1) { transform: translate(3px, 3px); }
.deck-stack .card:nth-child(2) { transform: translate(1.5px, 1.5px); }
.deck-stack.drawable .top { outline: 3px solid var(--gold); outline-offset: 2px; animation: glow 1.2s infinite; }
.deck-count {
  position: absolute; top: -8px; left: -8px; z-index: 3;
  background: #10281c; border: 1.5px solid var(--gold); color: var(--gold);
  font-size: 11px; font-weight: 800; border-radius: 10px; padding: 1px 7px;
}
@keyframes glow { 50% { outline-color: rgba(240,199,94,.35); } }

.pile-fan {
  display: flex; align-items: center; justify-content: center;
  min-width: calc(var(--card-w) * 1.6); height: var(--card-h);
  direction: ltr;
}
.pile-fan .card { margin-left: calc(var(--card-w) * -0.55); }
.pile-fan .card:first-child { margin-left: 0; }
.pile-fan .card.drawable {
  outline: 3px solid var(--gold); outline-offset: 2px;
  animation: glow 1.2s infinite;
  z-index: 5;
}
.pile-fan .card.fresh { animation: throwIn .3s ease; }
.pile-fan .card.under { opacity: .55; }
.pile-fan .card.sep { margin-left: 12px; }
@keyframes throwIn {
  from { transform: translateY(-46px) scale(1.15) rotate(6deg); opacity: 0; }
}

.turn-banner {
  font-size: 14px; font-weight: 700; color: #ffe9b0;
  background: rgba(0,0,0,.3); border-radius: 20px; padding: 6px 18px;
  min-height: 18px;
}
.turn-banner:empty { display: none; }

/* --- הקלפים --- */
.card {
  width: var(--card-w); height: var(--card-h);
  background: linear-gradient(160deg, #ffffff, #eef1f5);
  border-radius: calc(var(--card-w) * 0.13);
  box-shadow: 0 3px 9px rgba(0,0,0,.4);
  position: relative;
  color: var(--ink);
  direction: ltr;
  flex-shrink: 0;
}
.card.red { color: var(--red); }
.card .tl {
  position: absolute; top: 5%; left: 9%;
  font-size: calc(var(--card-w) * 0.24); font-weight: 800; line-height: 1.02;
  text-align: center;
}
.card .br {
  position: absolute; bottom: 5%; right: 9%;
  font-size: calc(var(--card-w) * 0.24); font-weight: 800; line-height: 1.02;
  text-align: center; transform: rotate(180deg);
}
.card .pip {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--card-w) * 0.52);
}
.card.joker { color: var(--gold-deep); }
.card.joker .pip { font-size: calc(var(--card-w) * 0.58); }
.card.joker .jlab {
  position: absolute; bottom: 9%; width: 100%; text-align: center;
  font-size: calc(var(--card-w) * 0.15); font-weight: 800; letter-spacing: 1px;
}
.card.back {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 5px, transparent 5px 10px),
    linear-gradient(150deg, #4a72d8, #263e85);
  border: calc(var(--card-w) * 0.055) solid #fff;
}
.card.mini { --card-w: clamp(30px, 8vw, 40px); width: var(--card-w); height: calc(var(--card-w) * 1.42); border-radius: 5px; box-shadow: 0 1px 4px rgba(0,0,0,.35); }

/* --- היד שלי --- */
.me-area {
  padding: 4px 10px calc(10px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.32));
}
.me-info {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px;
}
.me-name { font-weight: 800; font-size: 15px; }
.me-name.active { color: var(--gold); text-shadow: 0 0 12px rgba(240,199,94,.6); }
.me-sum { font-size: 13px; color: #cfe7db; background: rgba(0,0,0,.3); padding: 3px 12px; border-radius: 12px; font-weight: 700; }
.me-sum.low { color: #3a2c07; background: var(--gold); }
.sort-btn { background: rgba(255,255,255,.1); color: #dcefe5; font-size: 12.5px; padding: 5px 12px; border-radius: 10px; }

.hand {
  display: flex; justify-content: center; align-items: flex-end;
  min-height: calc(var(--card-h) + 22px);
  padding-top: 20px;
  direction: ltr;
}
.hand .card { margin-left: calc(var(--card-w) * -0.32); transition: transform .16s ease, box-shadow .16s; }
.hand .card:first-child { margin-left: 0; }
.hand .card.sel {
  transform: translateY(-20px);
  outline: 3px solid var(--gold);
  box-shadow: 0 10px 20px rgba(0,0,0,.5);
  z-index: 4;
}
.hand .card.dealt { animation: dealIn .35s ease backwards; }
@keyframes dealIn {
  from { transform: translateY(-70px) rotate(8deg); opacity: 0; }
}

/* --- שורת פעולות --- */
.actions {
  min-height: 58px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap;
}
.act-hint { color: #b9d8c9; font-size: 14px; font-weight: 600; }
.btn-throw {
  padding: 13px 26px; border-radius: 14px; font-size: 16.5px; font-weight: 800;
  background: linear-gradient(160deg, #58c48a, #2c9c62); color: #08301c;
  box-shadow: 0 5px 16px rgba(60,190,120,.3);
  transition: transform .12s;
}
.btn-throw:active { transform: scale(.95); }
.btn-throw:disabled { filter: grayscale(.85) brightness(.65); box-shadow: none; }
.btn-yaniv {
  padding: 13px 22px; border-radius: 14px; font-size: 16.5px; font-weight: 900;
  background: linear-gradient(160deg, var(--gold), var(--gold-deep)); color: #3a2c07;
  box-shadow: 0 0 22px rgba(240,199,94,.55);
  animation: yanivPulse 1.1s infinite;
}
@keyframes yanivPulse { 50% { transform: scale(1.06); box-shadow: 0 0 34px rgba(240,199,94,.85); } }
.draw-strip { display: flex; align-items: center; gap: 12px; }
.draw-strip .lbl { font-size: 14.5px; font-weight: 700; color: #ffe9b0; }
.draw-opt {
  background: none; padding: 0; border-radius: 10px;
  transition: transform .12s;
}
.draw-opt:active { transform: scale(.93); }
.draw-opt .card { --card-w: clamp(46px, 13vw, 62px); outline: 3px solid var(--gold); outline-offset: 2px; animation: glow 1.2s infinite; }
.btn-slap {
  padding: 13px 24px; border-radius: 14px; font-size: 16.5px; font-weight: 900;
  background: linear-gradient(160deg, #ff8c5f, #e05430); color: #40130a;
  box-shadow: 0 0 22px rgba(255,120,70,.5);
  animation: yanivPulse .8s infinite;
}

/* --- שכבות-על --- */
.overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(4, 20, 13, .82);
  backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  animation: fadeIn .22s ease;
}
.overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }

.panel {
  width: min(430px, 94vw); max-height: 86vh; overflow-y: auto;
  background: linear-gradient(170deg, #14523a, #0c3a27);
  border: 1px solid rgba(240,199,94,.35);
  border-radius: 22px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  animation: rise .28s ease;
}
@keyframes rise { from { transform: translateY(26px) scale(.97); opacity: 0; } }
.panel h2 { color: var(--gold); text-align: center; font-size: 22px; }

.curtain-box { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px; }
.curtain-avatar { font-size: 64px; animation: rise .3s ease; }
.curtain-box h2 { color: var(--gold); font-size: 26px; }
.curtain-box p { color: #cfe7db; font-size: 15px; max-width: 260px; }

/* שורות תוצאות */
.re-rows { display: flex; flex-direction: column; gap: 8px; }
.re-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,.25); border-radius: 14px; padding: 9px 12px;
  border: 1.5px solid transparent;
}
.re-row.winner { border-color: var(--gold); background: rgba(240,199,94,.12); }
.re-row.loser { opacity: .8; }
.re-ava { font-size: 24px; }
.re-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.re-name { font-weight: 800; font-size: 14.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.re-badge { font-size: 10.5px; font-weight: 800; border-radius: 8px; padding: 1px 7px; }
.re-badge.gold { background: var(--gold); color: #3a2c07; }
.re-badge.red { background: var(--red); color: #fff; }
.re-badge.gray { background: #5b6b63; color: #fff; }
.re-badge.green { background: #2c9c62; color: #eafff3; }
.re-cards { display: flex; direction: ltr; }
.re-cards .card.mini { margin-left: -12px; }
.re-cards .card.mini:first-child { margin-left: 0; }
.re-nums { text-align: center; min-width: 62px; }
.re-delta { font-size: 13px; font-weight: 800; color: #ffb1a1; direction: ltr; }
.re-delta.zero { color: #7fe0a8; }
.re-total { font-size: 17px; font-weight: 900; color: var(--gold); }
.re-total small { font-size: 10.5px; color: #a9ccbb; font-weight: 600; display: block; }

.go-panel { align-items: center; text-align: center; }
.go-avatar { font-size: 74px; animation: bounceIn .6s ease; }
@keyframes bounceIn {
  0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); }
}

.rules-panel .rules-body {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14.5px; line-height: 1.55; color: #e2f3ea;
}
.rules-body b { color: var(--gold); }

/* --- ספלאש יניב/אסף --- */
.splash {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.splash[hidden] { display: none; }
.splash span {
  font-size: clamp(64px, 22vw, 120px); font-weight: 900;
  color: var(--gold);
  text-shadow: 0 4px 0 var(--gold-deep), 0 14px 44px rgba(0,0,0,.7);
  animation: splashIn 1.3s ease forwards;
}
.splash span.red { color: #ff6b6b; text-shadow: 0 4px 0 #a02330, 0 14px 44px rgba(0,0,0,.7); }
@keyframes splashIn {
  0% { transform: scale(.2) rotate(-10deg); opacity: 0; }
  22% { transform: scale(1.15) rotate(2deg); opacity: 1; }
  32% { transform: scale(1) rotate(0); }
  78% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* --- טוסטים --- */
.toasts {
  position: fixed; top: calc(env(safe-area-inset-top) + 54px); left: 0; right: 0;
  z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.toast {
  background: rgba(8, 30, 20, .92);
  border: 1px solid rgba(240,199,94,.4);
  color: #ffe9b0; font-size: 14px; font-weight: 700;
  border-radius: 20px; padding: 8px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  animation: toastIn .25s ease;
  direction: rtl;
}
.toast.fade { opacity: 0; transition: opacity .4s; }
@keyframes toastIn { from { transform: translateY(-14px); opacity: 0; } }

/* --- קונפטי --- */
.confetti { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.confetti[hidden] { display: none; }
.conf-p {
  position: absolute; top: -30px;
  font-size: 22px;
  animation: confFall linear forwards;
}
@keyframes confFall {
  to { transform: translateY(110vh) rotate(720deg); opacity: .6; }
}

/* ============ זהות שחקן ============ */
.identity-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 0 18px; margin-bottom: 16px;
}
.avatar-btn {
  width: 52px; height: 52px; border-radius: 16px; font-size: 27px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  flex-shrink: 0;
}
.name-input {
  flex: 1; min-width: 0;
  padding: 13px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.3); color: #fff; font-size: 16px; font-weight: 700;
  font-family: inherit; outline: none;
}
.name-input:focus { border-color: var(--gold); }
.name-input::placeholder { color: #86a898; font-weight: 400; }

/* ============ אונליין ולובי ============ */
.join-row { display: flex; gap: 10px; }
.code-input {
  width: 110px; text-align: center;
  padding: 12px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.3); color: var(--gold); font-size: 22px; font-weight: 900;
  letter-spacing: 5px; font-family: inherit; outline: none; text-transform: uppercase;
  direction: ltr;
}
.code-input:focus { border-color: var(--gold); }
.join-row .btn-throw { flex: 1; }
.online-msg { text-align: center; font-size: 13.5px; color: #ffd9a0; min-height: 18px; }
.online-msg:empty { display: none; }

.lobby-title { color: var(--gold); font-size: 26px; margin-bottom: 14px; }
.room-code-box {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: rgba(0,0,0,.25); border: 1px dashed rgba(240,199,94,.5);
  border-radius: 18px; padding: 14px 30px; margin-bottom: 16px;
}
.room-code-box > span { font-size: 12.5px; color: #a9ccbb; }
.room-code {
  font-size: 44px; font-weight: 900; color: var(--gold);
  letter-spacing: 10px; direction: ltr; line-height: 1;
  text-shadow: 0 3px 14px rgba(240,199,94,.35);
}
.lobby-players { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0 18px; margin-bottom: 12px; }
.lobby-player {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.07); border-radius: 14px; padding: 10px 14px;
  animation: rise .25s ease;
}
.lobby-player .lp-ava { font-size: 24px; }
.lobby-player .lp-name { flex: 1; font-weight: 700; font-size: 15px; }
.lobby-player .lp-tag { font-size: 11px; font-weight: 800; border-radius: 8px; padding: 2px 8px; background: rgba(240,199,94,.2); color: var(--gold); }
.lobby-player .lp-kick { background: none; color: #ff9b9b; font-size: 15px; padding: 4px 6px; }
.lobby-opts { padding: 0 18px; margin-bottom: 6px; }

/* כפתור יניב קבוע — אפור כשאי אפשר, זהב בוהק כשמותר */
.btn-yaniv:disabled {
  background: #3d4a44; color: #77897f;
  box-shadow: none; animation: none;
  filter: none; opacity: 1;
}
.hand.shake { animation: shake .35s; }
@keyframes shake {
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

/* מסכים צרים במיוחד */
@media (max-height: 640px) {
  :root { --card-w: clamp(46px, 13.5vw, 62px); }
  .oppo-ava { font-size: 21px; }
  .actions { min-height: 50px; }
}