/* CARD STRIKA — one committed look: a night match under floodlights, dressed in the cards' own yellow and royal blue.
   Layout: full-bleed 3D stadium; scoreboard on top, your hand of cards docked at the bottom. */
:root {
  --night: #07112a;
  --navy: #0e2150;
  --ink: #0a1838;
  --card: #ffd21f;
  --card-deep: #c99600;
  --blue: #1f5fb0;
  --you: #37a6ff;
  --bot: #ff8a2a;
  --royal: #b42fd6;
  --alien: #e3262b;
  --chalk: #f3f6ff;
  --muted: #a8b6d6;
  --glass: rgba(9, 22, 52, .78);
  --line: rgba(160, 190, 255, .18);
  --display: 'Karantina', 'Rubik', 'Arial Narrow', sans-serif;
  --body: 'Rubik', 'Segoe UI', Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--night); color: var(--chalk); font: 15px/1.45 var(--body); direction: rtl; -webkit-tap-highlight-color: transparent; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible { outline: 3px solid var(--card); outline-offset: 3px; }
img { max-width: 100%; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#tags { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 45%, rgba(3, 8, 20, 0) 55%, rgba(3, 8, 20, .55) 100%); }
#flash { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 40%, rgba(255, 240, 180, .55), rgba(255, 210, 31, 0) 60%); opacity: 0; transition: opacity .5s; }
#flash.on { opacity: 1; transition: none; }

/* ---------- player tags above each figure ---------- */
.tag { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 9px; background: var(--glass); border-bottom: 3px solid var(--tc, var(--you)); font-size: 11px; white-space: nowrap; color: var(--muted); backdrop-filter: blur(4px); transition: transform .15s, background .15s; pointer-events: auto; cursor: default; will-change: left, top; }
.tag b { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 6px; background: var(--card); color: var(--navy); font: 700 21px/1 var(--display); box-shadow: inset 0 -2px 0 var(--card-deep); }
.tag.t1 { --tc: var(--bot); }
.tag .role { font-weight: 500; }
.tag.star b { background: linear-gradient(135deg, #fff2a8, var(--card)); }
.tag.royal b { background: var(--royal); color: #fff; box-shadow: inset 0 -2px 0 #7a1797; }
.tag.alien b { background: var(--alien); color: #fff; box-shadow: inset 0 -2px 0 #941417; }
.tag.can { cursor: pointer; color: var(--chalk); }
.tag.can.t0 { background: rgba(22, 70, 130, .9); }
.tag.can.t1 { background: rgba(140, 62, 16, .92); animation: pulse 1.1s ease-in-out infinite; }
.tag.can.t1 .role::after { content: ' · יעד'; color: #ffd8b8; }
.mode-token .tag.can.t0 { background: var(--card); color: var(--navy); animation: pulse 1s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(255, 210, 31, .55), 0 0 22px rgba(255, 210, 31, .7); }
.mode-token .tag.can.t0 .role::after { content: ' · כאן'; font-weight: 700; }
.mode-token .tag.can.t0 b { background: var(--navy); color: var(--card); }
.tag.sel { background: var(--card); color: var(--navy); border-color: var(--navy); }
.tag.sel b { background: var(--navy); color: var(--card); box-shadow: none; }
.tag.hidden { display: none; }
.tag.compact { padding: 2px; gap: 0; border-radius: 7px; border-bottom-width: 3px; }
.tag.compact b { min-width: 20px; height: 20px; font-size: 17px; border-radius: 5px; }
.tag.compact .role { display: none; }
.tag.compact.keeper { padding-inline-start: 6px; gap: 3px; }
.tag.compact.keeper .role { display: inline; font-size: 9.5px; }
.tag.compact.can.t1 .role::after { content: none; }
@keyframes pulse { 50% { transform: translate(-50%, -100%) scale(1.1); } }

/* ---------- scoreboard ---------- */
#hud { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); pointer-events: none; }
#hud > * { pointer-events: auto; }
.hud-logo { width: clamp(84px, 11vw, 150px); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); justify-self: start; }
.board { display: flex; align-items: stretch; background: linear-gradient(var(--navy), var(--ink)); border: 2px solid rgba(255, 210, 31, .55); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); overflow: hidden; }
.side { display: grid; grid-template-areas: 'who num' 'pips pips'; align-items: center; column-gap: 10px; padding: 6px 14px 7px; }
.side.bot { grid-template-areas: 'num who' 'pips pips'; }
.side .who { grid-area: who; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.side.you .who { color: var(--you); } .side.bot .who { color: var(--bot); }
.side b { grid-area: num; font: 700 46px/.9 var(--display); color: var(--chalk); font-variant-numeric: tabular-nums; min-width: 22px; text-align: center; }
.side b.bump { animation: bump .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bump { 0% { transform: scale(1.9); color: var(--card); } 100% { transform: scale(1); } }
.pips { grid-area: pips; display: flex; gap: 4px; justify-content: center; padding-top: 3px; }
.pips i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); }
.you .pips i.on { background: var(--you); border-color: var(--you); box-shadow: 0 0 8px var(--you); }
.bot .pips i.on { background: var(--bot); border-color: var(--bot); box-shadow: 0 0 8px var(--bot); }
.mid { display: grid; place-content: center; text-align: center; padding: 4px 12px; background: rgba(255, 210, 31, .1); border-inline: 1px solid var(--line); }
.mid span { font: 700 22px/1 var(--display); color: var(--card); }
.mid small { font-size: 11px; color: var(--muted); }
.tools { display: flex; gap: 6px; justify-self: end; }
.tool { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--line); }
.tool svg { width: 22px; height: 22px; fill: none; stroke: var(--chalk); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool:hover { background: rgba(31, 95, 176, .8); }
#sndBtn[aria-pressed="false"] .wave { opacity: 0; }
#sndBtn[aria-pressed="false"] { opacity: .65; }

/* ---------- bot's face-down hand ---------- */
.bot-hand { position: fixed; top: calc(92px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 4; pointer-events: none; }
.bot-hand i { width: 38px; height: 53px; border-radius: 5px; background: url(assets/cards/back.webp) center/cover; border: 2px solid var(--bot); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.bot-hand.thinking i { animation: think .9s ease-in-out infinite; }
.bot-hand.thinking i:nth-child(2) { animation-delay: .15s; } .bot-hand.thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes think { 50% { transform: translateY(-8px) rotate(-4deg); } }

/* ---------- dock: your hand ---------- */
#dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 0 max(16px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: grid; justify-items: center; gap: 8px; pointer-events: none; background: linear-gradient(to top, rgba(5, 12, 30, .92) 30%, rgba(5, 12, 30, 0)); padding-top: 30px; }
#dock > * { pointer-events: auto; }
.prompt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; text-align: center; max-width: 760px; }
.prompt strong { font: 700 clamp(26px, 3.4vw, 36px)/1 var(--display); color: var(--card); text-shadow: 0 2px 0 var(--ink); }
.prompt span { color: var(--muted); font-size: 14px; }
.ghost { padding: 7px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: var(--chalk); font-size: 14px; }
.ghost:hover { background: rgba(255, 255, 255, .14); }
.hand { display: flex; justify-content: center; align-items: flex-end; gap: clamp(6px, 1.4vw, 16px); min-height: 40px; }
.card { position: relative; width: clamp(84px, 10vw, 128px); aspect-ratio: 5 / 7; border-radius: 10px; padding: 0; transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), filter .2s, box-shadow .2s; box-shadow: 0 10px 22px rgba(0, 0, 0, .55); transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); background: var(--navy); }
.card img { width: 100%; height: 100%; border-radius: 10px; display: block; object-fit: cover; }
.card .ab { position: absolute; inset: auto 6% 5% 6%; padding: 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 6px; background: rgba(7, 17, 42, .88); color: var(--card); font-size: 10.5px; line-height: 1.25; text-align: center; font-weight: 500; }
.hand .card:hover { transform: translateY(-14px) rotate(0) scale(1.04); }
.hand .card.sel { transform: translateY(-26px) scale(1.08); box-shadow: 0 0 0 3px var(--card), 0 0 30px rgba(255, 210, 31, .55), 0 16px 30px rgba(0, 0, 0, .6); }
.hand .card.dim { filter: brightness(.55) saturate(.6); transform: translateY(8px) scale(.94); }
.hand .card.enter { animation: deal .55s cubic-bezier(.2, 1.3, .4, 1) backwards; }
@keyframes deal { from { transform: translateY(160px) rotate(-12deg); opacity: 0; } }
.targets { position: relative; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tchip { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 5px; border-radius: 12px; background: rgba(140, 62, 16, .92); border: 1.5px solid var(--bot); color: var(--chalk); font-size: 14px; font-weight: 500; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.tchip img { width: 34px; border-radius: 4px; }
.tchip:hover { background: var(--bot); color: var(--navy); }
.tchip.open { background: var(--card); color: var(--navy); border-color: var(--card); font: 700 24px/1 var(--display); padding: 10px 20px; }
.dock-foot { display: flex; gap: 18px; justify-content: space-between; width: min(100%, 880px); color: var(--muted); font-size: 12px; }
.dock-foot b { color: var(--chalk); font-variant-numeric: tabular-nums; }
.dock-foot .last { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d6def2; }

/* ---------- duel overlay ---------- */
#duel { position: fixed; z-index: 6; top: calc(98px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: clamp(10px, 3vw, 34px); pointer-events: none; }
#duel .dc { position: relative; width: clamp(88px, 11vw, 140px); aspect-ratio: 5 / 7; border-radius: 10px; box-shadow: 0 14px 30px rgba(0, 0, 0, .6); }
#duel .dc img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; display: block; }
#duel .dc .lbl { position: absolute; bottom: -24px; inset-inline: 0; text-align: center; font-size: 12px; font-weight: 700; }
#duel .att { border: 3px solid var(--you); } #duel .def { border: 3px solid var(--bot); }
#duel.botAtt .att { border-color: var(--bot); } #duel.botAtt .def { border-color: var(--you); }
#duel .att .lbl { color: var(--you); } #duel .def .lbl { color: var(--bot); }
#duel.botAtt .att .lbl { color: var(--bot); } #duel.botAtt .def .lbl { color: var(--you); }
#duel .vs { font: 700 46px/1 var(--display); color: var(--card); text-shadow: 0 3px 0 var(--navy), 0 0 22px rgba(255, 210, 31, .6); }
#duel.in .att { animation: inR .5s cubic-bezier(.2, 1.3, .4, 1) both; }
#duel.in .def { animation: inL .5s .08s cubic-bezier(.2, 1.3, .4, 1) both; }
#duel.in .vs { animation: pop .4s .3s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes inR { from { transform: translateX(60vw) rotate(25deg); } }
@keyframes inL { from { transform: translateX(-60vw) rotate(-25deg); } }
@keyframes pop { from { transform: scale(0); } }
#duel .dc.lost { animation: lost .5s forwards; }
@keyframes lost { to { filter: grayscale(1) brightness(.5); transform: rotate(-8deg) translateY(10px) scale(.92); } }
#duel .dc.won { animation: won .5s forwards; }
@keyframes won { to { transform: translateY(-8px) scale(1.06); box-shadow: 0 0 0 3px var(--card), 0 0 34px rgba(255, 210, 31, .7); } }
#duel .stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-7deg) scale(0); padding: 6px 18px; border-radius: 10px; background: var(--card); color: var(--navy); font: 700 clamp(30px, 4.4vw, 46px)/1 var(--display); white-space: nowrap; box-shadow: 0 8px 0 var(--card-deep), 0 16px 30px rgba(0, 0, 0, .5); }
#duel .stamp.show { animation: stamp .45s cubic-bezier(.2, 1.8, .4, 1) forwards; }
#duel .stamp.bad { background: #e9eef8; box-shadow: 0 8px 0 #9aa6bd, 0 16px 30px rgba(0, 0, 0, .5); }
@keyframes stamp { to { transform: translate(-50%, 30%) rotate(-7deg) scale(1); } }
#duel.out { animation: duelOut .4s forwards; }
@keyframes duelOut { to { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(.8); } }

/* ---------- goal splash ---------- */
#goalSplash { position: fixed; inset: 0; z-index: 7; display: grid; place-content: center; text-align: center; pointer-events: none; }
.goal-word { font: 700 clamp(120px, 26vw, 300px)/.8 var(--display); color: var(--card); -webkit-text-stroke: 4px var(--navy); text-shadow: 0 10px 0 var(--navy), 0 0 60px rgba(255, 210, 31, .8); animation: goalIn .7s cubic-bezier(.2, 1.6, .35, 1) both; }
.goal-sub { font: 700 clamp(24px, 3.6vw, 40px)/1 var(--display); color: var(--chalk); text-shadow: 0 3px 0 var(--navy); animation: goalIn .6s .2s both; }
#goalSplash.theirs .goal-word { color: var(--bot); font-size: clamp(90px, 18vw, 200px); }
#goalSplash.out { animation: fadeOut .5s forwards; }
@keyframes goalIn { from { transform: scale(2.6) rotate(-6deg); opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; transform: scale(.9); } }

/* ---------- title screen ---------- */
.screen { position: fixed; inset: 0; z-index: 8; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; padding-block: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); background: linear-gradient(to left, rgba(7, 17, 42, .92) 0%, rgba(7, 17, 42, .72) 45%, rgba(7, 17, 42, .15) 100%); }
.screen[hidden] { display: none; }
.title-inner { display: grid; gap: 22px; justify-items: start; max-width: 560px; padding-inline-start: clamp(0px, 4vw, 60px); animation: rise .8s .1s both; }
.title-logo { width: min(100%, 520px); filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .6)); animation: logoIn 1s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes logoIn { from { transform: scale(.6) rotate(-4deg); opacity: 0; } }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
.tagline { margin: 0; font-size: clamp(16px, 1.7vw, 19px); color: #dbe4f8; max-width: 34ch; text-wrap: balance; }
.title-actions { display: grid; gap: 12px; justify-items: start; }
.big { padding: 12px 30px 10px; border-radius: 14px; background: var(--card); color: var(--navy); font: 700 clamp(28px, 3vw, 36px)/1 var(--display); box-shadow: 0 6px 0 var(--card-deep), 0 14px 26px rgba(0, 0, 0, .45); transition: transform .12s, box-shadow .12s; }
.big:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--card-deep), 0 18px 30px rgba(0, 0, 0, .5); }
.big:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--card-deep), 0 8px 16px rgba(0, 0, 0, .4); }
.big.alt { background: var(--chalk); box-shadow: 0 6px 0 #8f9cb8, 0 14px 26px rgba(0, 0, 0, .45); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.soon { font-size: 13px; color: var(--muted); padding: 6px 12px; border-radius: 999px; border: 1px dashed rgba(168, 182, 214, .45); }
.title-art { position: relative; height: min(88vh, 720px); align-self: end; }
.mascot { position: absolute; bottom: -24px; left: 6%; height: 92%; width: auto; max-width: none; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6)); animation: mascot 1s .2s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes mascot { from { transform: translateY(40%); } }
.fan { position: absolute; top: 4%; left: 42%; width: 52%; height: 60%; }
.fan img { position: absolute; width: 38%; border-radius: 8px; box-shadow: 0 16px 30px rgba(0, 0, 0, .55); transform-origin: 50% 120%; animation: float 5s ease-in-out infinite; }
.fan img:nth-child(1) { left: 0; transform: rotate(-22deg); animation-delay: -1s; }
.fan img:nth-child(2) { left: 15%; transform: rotate(-11deg); animation-delay: -2s; }
.fan img:nth-child(3) { left: 30%; transform: rotate(0); z-index: 2; animation-delay: -3s; }
.fan img:nth-child(4) { left: 45%; transform: rotate(11deg); animation-delay: -4s; }
.fan img:nth-child(5) { left: 60%; transform: rotate(22deg); animation-delay: -5s; }
@keyframes float { 50% { translate: 0 -10px; } }

/* ---------- sheets ---------- */
.sheet { position: fixed; z-index: 7; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(calc(100vw - 32px), 760px); max-height: calc(100% - 40px); overflow: auto; padding: 22px 24px; border-radius: 18px; background: linear-gradient(160deg, rgba(16, 38, 88, .97), rgba(7, 17, 42, .97)); border: 2px solid rgba(255, 210, 31, .5); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); animation: sheetIn .45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes sheetIn { from { transform: translate(-50%, -40%) scale(.92); opacity: 0; } }
.sheet h2 { margin: 0 0 6px; font: 700 clamp(34px, 4vw, 46px)/1 var(--display); color: var(--card); text-wrap: balance; }
.sheet p { margin: 0 0 16px; color: #d4ddf2; text-wrap: pretty; }
.sheet.center { text-align: center; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.sheet.center .row { justify-content: center; }
#picker { background: linear-gradient(160deg, #10265a, #07112a); top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(calc(100vw - 32px), 820px); text-align: center; animation-name: pickIn; }
@keyframes pickIn { from { transform: translateX(-50%) translateY(40px); opacity: 0; } }
.pick-row { display: flex; gap: clamp(8px, 2vw, 18px); justify-content: center; }
.pick-row .card { width: clamp(70px, 16vw, 150px); }
.pick-row .card:hover { transform: translateY(-10px) scale(1.04); box-shadow: 0 0 0 3px var(--card), 0 16px 30px rgba(0, 0, 0, .6); }
.pick-row .card::after { content: 'לשער'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) scale(0); padding: 3px 10px; border-radius: 999px; background: var(--card); color: var(--navy); font-weight: 700; font-size: 12px; transition: transform .15s; }
.pick-row .card:hover::after { transform: translateX(-50%) scale(1); }
#capture { display: flex; gap: 22px; align-items: center; }
.sheet-card { width: clamp(100px, 22vw, 170px); border-radius: 10px; box-shadow: 0 16px 30px rgba(0, 0, 0, .5); transform: rotate(-4deg); flex-shrink: 0; }
.eyebrow { font-size: 13px; letter-spacing: .14em; color: var(--muted); font-weight: 700; }
.ht-score { display: flex; align-items: center; gap: 16px; margin: 10px 0 14px; font-weight: 700; }
.ht-score b { font: 700 92px/.85 var(--display); font-variant-numeric: tabular-nums; }
.ht-score i { font: 700 60px/1 var(--display); color: var(--muted); font-style: normal; }
.ht-score span:first-child { color: var(--you); } .ht-score span:last-child { color: var(--bot); }
.end-logo { width: 200px; }
.end h2 { font-size: clamp(52px, 8vw, 84px); }

/* ---------- rules dialog ---------- */
dialog#rules { width: min(calc(100vw - 32px), 860px); max-height: calc(100% - 40px); padding: 0; border-radius: 18px; border: 2px solid rgba(255, 210, 31, .5); background: linear-gradient(160deg, #10265a, #07112a); color: var(--chalk); overflow: hidden; }
dialog#rules[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: rgba(3, 8, 20, .7); backdrop-filter: blur(3px); }
.rules-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px 6px; }
.rules-head h2 { margin: 0; font: 700 44px/1 var(--display); color: var(--card); }
.rules-body { overflow: auto; padding: 0 22px 22px; user-select: text; }
.steps { margin: 6px 0 18px; padding-inline-start: 22px; display: grid; gap: 8px; max-width: 70ch; }
.steps b { color: var(--card); }
.rules-body h3 { font: 700 28px/1 var(--display); margin: 8px 0 12px; color: var(--chalk); }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.ro { display: grid; gap: 6px; align-content: start; }
.ro img { border-radius: 8px; box-shadow: 0 8px 16px rgba(0, 0, 0, .4); }
.ro strong { font-size: 14px; } .ro small { color: var(--muted); font-size: 12px; } .ro em { font-style: normal; color: var(--card); font-size: 12.5px; }

/* ---------- loading ---------- */
#loading { position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 16px; background: radial-gradient(circle at 50% 40%, #12306b, var(--night) 70%); transition: opacity .6s; }
#loading img { width: min(70vw, 380px); }
#loading .bar { width: 220px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
#loading .bar i { display: block; height: 100%; width: 0; background: var(--card); transition: width .2s; }
#loading span { color: var(--muted); font-size: 14px; }
#loading.done { opacity: 0; pointer-events: none; }

/* ---------- phones ---------- */
@media (max-width: 700px) {
  #hud { grid-template-columns: auto 1fr auto; }
  .hud-logo { width: 70px; }
  .board { justify-self: center; }
  .side { padding: 4px 9px 5px; column-gap: 6px; }
  .side b { font-size: 36px; }
  .side .who { font-size: 11px; }
  .pips i { width: 7px; height: 7px; }
  .mid { padding: 2px 7px; } .mid span { font-size: 17px; } .mid small { font-size: 10px; }
  .tools { flex-direction: column; gap: 5px; }
  .tool { width: 36px; height: 36px; }
  .bot-hand { top: calc(80px + env(safe-area-inset-top, 0px)); }
  .bot-hand i { width: 28px; height: 39px; }
  .card .ab { font-size: 9px; padding: 2px 3px; }
  .dock-foot { font-size: 10.5px; gap: 8px; }
  .dock-foot .last { display: none; }
  .prompt strong { font-size: 24px; }
  .hand .card.sel { transform: translateY(-10px) scale(1.04); }
  .hand .card:hover { transform: none; }
  .prompt span { font-size: 12.5px; }
  #dock { gap: 6px; padding-top: 18px; }
  .tchip { font-size: 12.5px; padding: 3px 9px 3px 4px; } .tchip img { width: 26px; }
  #duel { top: calc(84px + env(safe-area-inset-top, 0px)); }
  .screen { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; background: linear-gradient(to bottom, rgba(7, 17, 42, .92) 0%, rgba(7, 17, 42, .65) 55%, rgba(7, 17, 42, .2) 100%); }
  .title-inner { justify-items: center; text-align: center; gap: 14px; padding: 0; margin-inline: auto; }
  .title-actions { justify-items: center; }
  .title-art { height: 100%; min-height: 0; }
  .mascot { left: 50%; transform: translateX(-50%); height: 100%; animation: none; }
  .fan { display: none; }
  #capture { flex-direction: column; text-align: center; }
  #capture .row { justify-content: center; }
  .ht-score b { font-size: 70px; }
}
@media (max-height: 560px) and (min-width: 701px) { .card { width: clamp(70px, 9vw, 110px); } .title-art { height: 92vh; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---------- v3: actions, tracker, toast, secret tags, duel extras ---------- */
.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.act { padding: 6px 14px; border-radius: 999px; background: rgba(14, 33, 80, .9); border: 1.5px solid rgba(255, 255, 255, .25); color: var(--chalk); font-size: 13.5px; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.act b { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: var(--chalk); color: var(--navy); font-size: 12px; }
.act.tok { border-color: var(--card); color: var(--card); }
.act[aria-pressed="true"] { background: var(--card); color: var(--navy); border-color: var(--card); }
.act[aria-pressed="true"] b { background: var(--navy); color: var(--card); }
.act:hover { filter: brightness(1.15); }
.hand .card.combo-ok { box-shadow: 0 0 0 2px var(--you), 0 0 18px rgba(55, 166, 255, .6), 0 10px 22px rgba(0, 0, 0, .55); }
.hand .card.combo-ok::before { content: '+ מסירה'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 2px 8px; border-radius: 999px; background: var(--you); color: var(--navy); font-size: 11px; font-weight: 700; white-space: nowrap; }
.hand .card.subbing { animation: subGlow 1s ease-in-out infinite; }
.hand .card.subbing::after { content: 'להחליף'; position: absolute; inset: auto 10% 40% 10%; padding: 3px; border-radius: 6px; background: var(--chalk); color: var(--navy); font-size: 12px; font-weight: 700; text-align: center; }
@keyframes subGlow { 50% { box-shadow: 0 0 0 3px var(--chalk), 0 0 22px rgba(255, 255, 255, .5), 0 10px 22px rgba(0, 0, 0, .55); } }
.tag.secret b { background: var(--navy); color: var(--card); box-shadow: inset 0 0 0 1.5px var(--bot); }
.tag.tok::after { content: '2+'; margin-inline-start: 4px; padding: 1px 5px; border-radius: 5px; background: var(--card); color: var(--navy); font-weight: 800; font-size: 10px; }
#toast { position: fixed; z-index: 9; left: 50%; top: calc(150px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); max-width: min(92vw, 520px); padding: 10px 18px; border-radius: 12px; background: var(--chalk); color: var(--navy); font-weight: 500; text-align: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); pointer-events: none; }
#toast.show { animation: toastIn .35s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes toastIn { from { transform: translateX(-50%) translateY(-14px); opacity: 0; } }
#duel .dc .pow { position: absolute; bottom: -42px; inset-inline: -20px; text-align: center; font-size: 11.5px; color: var(--chalk); white-space: nowrap; }
#duel .dc .img2 { display: none; }
#duel .dc.combo .img2 { display: block; position: absolute; inset: 0; transform: translate(-28%, 10%) rotate(-8deg); z-index: -1; border-radius: 10px; box-shadow: 0 10px 20px rgba(0, 0, 0, .5); }
#duel .dc.flipin { animation: flipIn .5s ease both; }
@keyframes flipIn { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }

@media (max-width: 700px) { .tools { display: grid; grid-template-columns: 1fr; } .act { font-size: 12px; padding: 5px 11px; } #toast { top: calc(110px + env(safe-area-inset-top, 0px)); font-size: 13px; } }

/* ---------- tracker v2: a grid of cards ---------- */
.tracker { position: fixed; z-index: 4; left: max(16px, env(safe-area-inset-left, 0px)); top: calc(78px + env(safe-area-inset-top, 0px)); width: 330px; max-height: calc(100% - 96px); overflow: auto; padding: 12px 14px 14px; border-radius: 14px; background: rgba(8, 20, 48, .92); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.trk-head { display: flex; justify-content: space-between; align-items: center; }
.trk-head strong { font: 700 28px/1 var(--display); color: var(--card); }
.trk-head .tool { width: 32px; height: 32px; } .trk-head .tool svg { width: 16px; height: 16px; }
.trk-legend { margin: 6px 0 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.lg { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: 8px; font-weight: 700; }
.lg::before { content: ''; width: 10px; height: 10px; border-radius: 3px; }
.lg.you { color: var(--you); } .lg.you::before { background: var(--you); }
.lg.bot { color: var(--bot); } .lg.bot::before { background: var(--bot); }
.trk-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 6px; }
.tile { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; justify-items: center; }
.tile img { grid-column: 1 / -1; width: 100%; border-radius: 5px; box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.tile .nm { grid-column: 1 / -1; font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cnt { width: 100%; text-align: center; border-radius: 6px; padding: 1px 0; font-weight: 800; font-size: 15px; line-height: 1.2; font-variant-numeric: tabular-nums; color: #fff; }
.cnt small { font-weight: 500; font-size: 9px; opacity: .8; }
.cnt.you { background: var(--blue); box-shadow: inset 0 0 0 1px var(--you); }
.cnt.bot { background: #9a4510; box-shadow: inset 0 0 0 1px var(--bot); }
.cnt.zero { background: transparent; color: rgba(168, 182, 214, .5); box-shadow: inset 0 0 0 1px rgba(168, 182, 214, .25); }
.tile.gone img { filter: grayscale(1) brightness(.55); }
.trk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.trk-chips span { font-size: 12px; color: var(--muted); padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); }
.trk-chips b { color: var(--chalk); margin-inline-start: 3px; }
@media (max-width: 1099px) { .tracker { z-index: 8; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(calc(100vw - 24px), 420px); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); border-color: rgba(255, 210, 31, .5); } }

/* ---------- your remaining pile next to the hand ---------- */
.hand-row { display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 22px); }
.pile { display: grid; justify-items: center; gap: 1px; padding-bottom: 4px; }
.pile .stack { position: relative; width: 46px; height: 62px; }
.pile .stack i { position: absolute; inset: 0; border-radius: 5px; background: url(assets/cards/back.webp) center/cover; border: 2px solid var(--you); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.pile .stack i:nth-child(1) { transform: translate(5px, 5px) rotate(4deg); } .pile .stack i:nth-child(2) { transform: translate(2px, 2px) rotate(-2deg); }
.pile b { font: 700 34px/.9 var(--display); color: var(--chalk); margin-top: 4px; font-variant-numeric: tabular-nums; }
.pile small { font-size: 11px; color: var(--muted); }
.pile.low b { color: var(--bot); }
.side .left { grid-column: 1 / -1; text-align: center; font-size: 10.5px; color: var(--muted); }
.side { grid-template-areas: 'who num' 'pips pips' 'left left'; }
.side.bot { grid-template-areas: 'num who' 'pips pips' 'left left'; }
.side .left { grid-area: left; }
.dock-foot { justify-content: center; }
@media (max-width: 700px) { .pile .stack { width: 34px; height: 46px; } .pile b { font-size: 26px; } .pile small { font-size: 9.5px; } .side .left { font-size: 9px; } .dock-foot { display: none; } .tile .nm { display: none; } .cnt { font-size: 14px; } }

/* ---------- v4: online, lobby, ring, timer ---------- */
.pips i.on { background: var(--kc, var(--you)) !important; border-color: var(--kc, var(--you)) !important; box-shadow: 0 0 8px var(--kc, var(--you)) !important; }
.timer { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 6px; border-radius: 50%; background: var(--navy); border: 2px solid var(--card); color: var(--card); font: 700 24px/1 var(--display); align-self: center; }
.timer.hot { border-color: var(--alien); color: #fff; background: var(--alien); animation: pulseT 1s ease-in-out infinite; }
@keyframes pulseT { 50% { transform: scale(1.12); } }
.ring { position: fixed; z-index: 4; right: max(16px, env(safe-area-inset-right, 0px)); top: calc(110px + env(safe-area-inset-top, 0px)); width: 220px; padding: 10px 12px; border-radius: 14px; background: rgba(8, 20, 48, .9); border: 1px solid var(--line); backdrop-filter: blur(6px); display: grid; gap: 4px; }
.ring > strong { font: 700 22px/1 var(--display); color: var(--card); margin-bottom: 2px; }
.ring .seat { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 2px 6px; padding: 4px 6px; border-radius: 8px; font-size: 13px; }
.ring .seat i { width: 12px; height: 12px; border-radius: 3px; background: var(--kc); }
.ring .seat b { font: 700 22px/1 var(--display); color: var(--chalk); } .ring .seat small { color: var(--muted); font-size: 10px; }
.ring .seat em { grid-column: 2 / -1; font-style: normal; font-size: 10.5px; color: var(--muted); margin-inline-end: 6px; }
.ring .seat em.now { color: var(--card); font-weight: 700; } .ring .seat em.off { color: var(--alien); }
.ring .seat.me { background: rgba(55, 166, 255, .12); } .ring .seat.turn { box-shadow: inset 0 0 0 1.5px var(--card); }
.ring .seat .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ring p { margin: 4px 0 0; font-size: 10.5px; color: var(--muted); }
.field { display: grid; gap: 6px; width: min(100%, 320px); text-align: start; margin: 4px 0 14px; }
.field span { font-size: 13px; color: var(--muted); }
.field input, .join-row input { font: 500 18px var(--body); padding: 10px 14px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: var(--chalk); }
.field input:focus, .join-row input:focus { outline: 2px solid var(--card); border-color: transparent; }
.online-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: center; width: min(100%, 380px); }
.online-actions .big { width: 100%; }
.hint { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); text-align: center; text-wrap: pretty; }
.join-row { display: flex; gap: 8px; width: 100%; margin-top: 6px; }
.join-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .2em; text-align: center; direction: ltr; }
.err { color: #ffb3b3; font-weight: 500; margin: 10px 0 0 !important; }
.code-box { display: grid; gap: 2px; justify-items: center; margin: 8px 0 10px; }
.code-box span { font-size: 12px; color: var(--muted); }
.code-box b { font: 700 64px/1 var(--display); letter-spacing: .14em; color: var(--card); direction: ltr; }
.seats { list-style: none; padding: 0; margin: 4px 0 14px; display: grid; gap: 6px; width: min(100%, 420px); }
.seats li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.seats li i { width: 14px; height: 14px; border-radius: 4px; background: var(--kc, transparent); border: 1px solid rgba(255, 255, 255, .3); }
.seats li span { flex: 1; text-align: start; }
.seats li em { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--card); color: var(--navy); font-weight: 700; }
.seats li em.bot { background: rgba(255, 255, 255, .15); color: var(--chalk); }
.seats li.empty { opacity: .45; border-style: dashed; }
.seats .kick { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.end-list li b { font: 700 28px/1 var(--display); }
#lobby .row, #onlineSheet .row { justify-content: center; }
@media (max-width: 1099px) { .ring { top: auto; bottom: calc(260px + env(safe-area-inset-bottom, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); width: 168px; padding: 6px 8px; } .ring p, .ring > strong { display: none; } .ring .seat { font-size: 11.5px; padding: 2px 4px; } .ring .seat b { font-size: 18px; } }
@media (max-width: 700px) { .ring { bottom: auto; top: calc(92px + env(safe-area-inset-top, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); left: auto; width: 128px; } .ring .seat em { display: none; } .ring .seat em.now { display: inline; } .code-box b { font-size: 52px; } }

/* ---------- guided game coach ---------- */
#coach { position: fixed; z-index: 40; left: 50%; top: calc(var(--coach-top, 32%)); transform: translate(-50%, 0); width: min(92vw, 440px); padding: 12px 14px 12px; border-radius: 16px;
  background: rgba(255, 252, 240, .97); color: var(--navy); box-shadow: 0 0 0 3px var(--card), 0 18px 40px rgba(0, 0, 0, .55); animation: coachIn .35s cubic-bezier(.2, 1.4, .4, 1) both; }
#coach[hidden] { display: none !important; }
#coach.at-top { --coach-top: calc(96px + env(safe-area-inset-top, 0px)); }
#coach.at-mid { --coach-top: 34%; }
#coach.at-low { --coach-top: 50%; }
@keyframes coachIn { from { opacity: 0; transform: translate(-50%, 14px) scale(.94); } }
.coach-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font: 700 13px/1 var(--display, sans-serif); color: #8a5a00; letter-spacing: .3px; }
.coach-head img { width: 34px; height: 34px; object-fit: cover; object-position: top; border-radius: 50%; background: var(--card); }
.coach-text { font-size: 16px; line-height: 1.45; }
.coach-text b { color: #b04a00; }
.coach-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.coach-ok { padding: 8px 22px; border-radius: 10px; background: var(--navy); color: var(--card); font-weight: 700; font-size: 15px; }
.coach-skip { background: none; color: #6b7280; font-size: 13px; text-decoration: underline; padding: 6px 2px; }
.rules-guide { display: block; margin: 0 auto 14px; font-size: 24px; }
#guideAsk { z-index: 30; }
@media (max-width: 700px) {
  #onlineSheet, #lobby { padding: 18px 16px; }
  #onlineSheet h2 { font-size: 34px; }
  .online-actions .big { font-size: 26px; padding: 11px 16px 9px; }
  .online-actions .hint { font-size: 12.5px; margin: 2px 0 8px; }
}
.field input { width: 100%; min-width: 0; }
#onlineBack { margin-top: 10px; }