.toss-page { padding: 34px 0 64px; background: radial-gradient(circle at 10% 0,#e6f5ff 0,transparent 34%),linear-gradient(180deg,#f7fbff,#edf3f7); }
.toss-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.toss-heading h1 { margin:2px 0 5px; font-size:clamp(32px,4vw,52px); }
.toss-heading p:last-child { margin:0; color:var(--muted); }
.game-shell { position:relative; width:100%; height:min(76vh,780px); min-height:620px; overflow:hidden; border:8px solid #18242d; border-radius:24px; background:#9ed8ed; touch-action:none; box-shadow:0 28px 70px rgba(25,45,60,.24),inset 0 0 0 1px #fff3; }
#gameCanvas { display:block; width:100%; height:100%; cursor:grab; }
#gameCanvas:active { cursor:grabbing; }
.toss-hud { position:absolute; z-index:3; top:0; left:0; right:0; padding:16px 18px 0; display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none; }
.toss-hud button { pointer-events:auto; border:2px solid #fff9; width:44px; height:44px; border-radius:50%; color:#fff; background:#173747bb; font-size:22px; font-weight:900; box-shadow:0 5px 14px #17374755,inset 0 1px #fff6; cursor:pointer; }
.toss-hud button:hover { background:#ff7549; transform:translateY(-2px); }.toss-hud button:active { transform:scale(.92); }
.score-wrap { min-width:118px; padding:7px 18px 8px; text-align:center; color:#fff; border:1px solid #ffffff55; border-radius:0 0 18px 18px; background:linear-gradient(180deg,#173747e8,#102b38dc); box-shadow:0 7px 18px #1737474d; text-shadow:0 2px 3px #0008; line-height:.95; }
.score-label { display:block; font-size:10px; font-weight:900; letter-spacing:3px; color:#91e2f2; }
#score { display:block; font:900 50px/.9 Impact,Arial Black,sans-serif; }.best { display:block; margin-top:7px; font-size:10px; letter-spacing:2px; color:#d8f6ff; }
.wind-card { position:absolute; z-index:3; top:104px; left:50%; transform:translateX(-50%); min-width:166px; height:54px; display:flex; align-items:center; justify-content:center; gap:12px; padding:7px 14px; color:#fff; border:1px solid #fff7; border-radius:13px; background:linear-gradient(135deg,#1f596ee8,#173b4ce8); box-shadow:0 8px 20px #163a4960,inset 0 1px #fff5; text-shadow:0 2px 2px #0005; }
.wind-card span { display:block; color:#91e2f2; font-size:9px; font-weight:800; letter-spacing:2px; }.wind-card strong { font-size:22px; }.wind-arrow { font-size:30px; transition:transform .35s; }
.fan { position:relative; width:36px; height:36px; border:3px solid #a6edfa; border-radius:50%; background:#173747; box-shadow:inset 0 0 0 3px #102832; animation:spin 1s linear infinite; }.fan i { position:absolute; top:14px; left:15px; width:14px; height:7px; border-radius:100% 0; background:#d4f9ff; transform-origin:3px 3px; }.fan i:nth-child(2){transform:rotate(120deg)}.fan i:nth-child(3){transform:rotate(240deg)}
@keyframes spin { to{transform:rotate(360deg)} }
.office-picker { position:absolute; z-index:5; left:18px; top:78px; display:grid; gap:7px; }.office-picker button { width:112px; padding:8px 9px; border:1px solid #ffffff55; border-radius:9px; color:#eafaff; background:#153747c9; text-align:left; font:800 10px/1 Arial; letter-spacing:.5px; cursor:pointer; box-shadow:0 4px 10px #17374733; transition:.18s; }.office-picker button span { display:inline-grid; place-items:center; width:21px; height:21px; margin-right:5px; border-radius:5px; background:#ffffff20; }.office-picker button:hover { transform:translateX(4px); background:#ff7549; }.office-picker button.active { color:#193340; background:#ffd05b; border-color:#fff3b5; }
.message { position:absolute; z-index:4; top:29%; width:100%; text-align:center; color:#fff; font:900 clamp(34px,7vw,62px)/1 Impact,Arial Black,sans-serif; letter-spacing:3px; text-shadow:0 4px 0 #ff6538,0 9px 20px #17374788; opacity:0; transform:scale(.7); pointer-events:none; }.message.show { animation:pop 1.05s ease-out; }@keyframes pop{0%{opacity:0;transform:scale(.5) rotate(-5deg)}18%,65%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-25px) scale(1.1)}}
.tutorial { position:absolute; z-index:3; left:0; right:0; bottom:18%; display:flex; flex-direction:column; align-items:center; color:#fff; text-shadow:0 2px 5px #102b38; pointer-events:none; transition:opacity .35s; animation:float 1.15s ease-in-out infinite alternate; }.tutorial.hide{opacity:0}.tutorial strong{margin-top:8px;font-size:13px;letter-spacing:2px}.tutorial small{margin-top:5px;opacity:.86}.mouse-gesture{position:relative;width:28px;height:40px;border:3px solid #fff;border-radius:16px;background:#17374799;box-shadow:0 3px 10px #17374777}.mouse-gesture i{position:absolute;top:5px;left:10px;width:3px;height:8px;border-radius:3px;background:#ffd05b}@keyframes float{to{transform:translateY(-22px)}}
.game-footer { position:absolute; z-index:3; bottom:12px; left:18px; right:18px; display:flex; justify-content:space-between; color:#fff; font-size:9px; font-weight:800; letter-spacing:2px; pointer-events:none; text-shadow:0 2px 3px #173747; }
.throws-chip { border-left:1px solid #ffffff44; padding-left:12px; }
.throws-chip span { display:block; color:#91e2f2; font-size:9px; font-weight:800; letter-spacing:2px; }
.throws-chip strong { font-size:18px; }
.streak-badge { position:absolute; z-index:4; top:170px; left:50%; transform:translateX(-50%) scale(.6); padding:6px 16px; border-radius:999px; color:#fff; background:linear-gradient(135deg,#ff7549,#ffb02e); font:900 14px/1 Arial; letter-spacing:1px; box-shadow:0 6px 18px #ff754977; opacity:0; transition:.25s; pointer-events:none; }
.streak-badge.on { opacity:1; transform:translateX(-50%) scale(1); }
.message.good { text-shadow:0 4px 0 #1d9e63,0 9px 20px #17374788; }
.message.bad { text-shadow:0 4px 0 #b8422e,0 9px 20px #17374788; }
.toss-overlay { position:absolute; inset:0; z-index:8; display:none; align-items:center; justify-content:center; background:#0f2530cc; backdrop-filter:blur(3px); }
.toss-overlay.show { display:flex; }
.ov-card { min-width:min(340px,84%); padding:26px 30px; border-radius:18px; background:linear-gradient(180deg,#1b3d4f,#122c3a); border:1px solid #ffffff2e; box-shadow:0 24px 60px #0009; color:#fff; text-align:center; }
.ov-card h2 { margin:0 0 16px; font:900 24px/1.15 Arial Black,Arial; letter-spacing:1px; color:#ffd05b; }
.ov-row { display:flex; justify-content:space-between; gap:18px; padding:7px 2px; border-bottom:1px dashed #ffffff22; font-size:14px; }
.ov-row span { color:#a8d8e8; } .ov-row strong { font-size:16px; }
.ov-btn { margin-top:18px; width:100%; padding:12px; border:0; border-radius:11px; background:#ff7549; color:#fff; font:900 14px Arial; letter-spacing:1px; cursor:pointer; box-shadow:0 6px 16px #ff754966; }
.ov-btn:hover { background:#ff8d63; transform:translateY(-1px); }
.duel-hud { position:absolute; z-index:5; left:18px; top:78px; display:grid; gap:8px; max-width:210px; }
.round-badge { display:inline-block; padding:7px 12px; border-radius:9px; background:#ffd05b; color:#193340; font:900 12px/1 Arial; letter-spacing:1px; box-shadow:0 4px 10px #17374744; justify-self:start; }

/* ── Дуэлийн талбарууд: тус бүр соло хэмжээгээ хадгална (НЯБО Цамхагтай ижил).
   2 тоглогч = зэрэгцээ, 3-4 тоглогч = дээрээ 2, дороо 2 (2 багана) ── */
.toss-versus { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.versus-panel { text-align:center; min-width:0; }
.versus-panel .game-shell { border-color:var(--accent,#18242d); }
.ghost-shell { background:#0f2530; }
.ghost-shell canvas { display:block; width:100%; height:100%; }
.versus-name { margin-top:10px; font:900 clamp(18px,2.2vw,28px)/1.2 Arial Black,Arial; letter-spacing:.06em; text-transform:uppercase; color:#1c2d38; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.versus-name .vs-dot { display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--accent,#316df4); margin-right:8px; }
.versus-score { font-size:13px; font-weight:800; color:#5c7482; margin-top:2px; }
@media(max-width:900px){ .toss-versus{grid-template-columns:1fr} }
@media(max-width:720px){.toss-page{padding-top:20px}.toss-heading{align-items:start}.toss-heading .btn{padding:9px}.game-shell{height:72vh;min-height:580px;border-width:4px;border-radius:16px}.office-picker{top:auto;bottom:38px;left:8px;right:8px;display:flex;justify-content:center}.office-picker button{width:auto;font-size:0;padding:5px}.office-picker button span{margin:0}.game-footer{display:none}.wind-card{top:100px}.tutorial{bottom:20%}.duel-hud{top:auto;bottom:38px;left:8px;right:8px;max-width:none}.streak-badge{top:160px}}