/* Козёл — оформление. Тёмная «стеклянная» тема на зелёном сукне. */
:root {
  --bg0: #04201a; --bg1: #0a3a2a; --felt0: #1c8a58; --felt1: #12643f; --felt2: #0a4430;
  --text: #f3faf5; --muted: #a6c9b5;
  --glass: rgba(255, 255, 255, .08); --glass2: rgba(255, 255, 255, .14); --line: rgba(255, 255, 255, .16);
  --accent: #ffd54a; --accent2: #ffa51e; --red: #d4303b; --ink: #1b2130; --danger: #ef4444; --ok: #34d399; --blue: #60a5fa;
  --font: Inter, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--text); overflow: hidden; overscroll-behavior: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(60, 190, 120, .35), transparent 70%),
    radial-gradient(700px 500px at 100% 100%, rgba(255, 213, 74, .08), transparent 70%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  background-attachment: fixed;
}

/* ---------- кнопки и поля ---------- */
button {
  font: inherit; font-weight: 700; letter-spacing: .01em; border: 0; border-radius: 999px; padding: 11px 20px; cursor: pointer;
  color: #2b1d00; background: linear-gradient(180deg, #ffe58a, var(--accent2)); box-shadow: 0 6px 16px rgba(255, 165, 30, .32), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
}
button:hover:not(:disabled) { filter: brightness(1.06); }
button:active:not(:disabled) { transform: scale(.96); }
button:disabled { opacity: .38; cursor: default; box-shadow: none; }
button.sec { color: var(--text); background: var(--glass2); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(8px); }
button.danger { color: #fff; background: linear-gradient(180deg, #f87171, #dc2626); box-shadow: 0 6px 16px rgba(220, 38, 38, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
.iconbtn { width: 38px; height: 38px; padding: 0; font-size: 17px; line-height: 1; display: grid; place-items: center; }
input[type=text], input:not([type]) {
  font: inherit; width: 100%; padding: 12px 16px; border-radius: 14px; color: var(--text); background: rgba(0, 0, 0, .28);
  border: 1px solid var(--line); outline: none; transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--muted); }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 213, 74, .2); }

/* ---------- стартовый экран и лобби ---------- */
.entry, .lobby { height: 100vh; height: var(--tg-viewport-stable-height, 100dvh); max-width: 400px; margin: 0 auto; padding: 18px 16px; display: flex; flex-direction: column; justify-content: center; gap: 14px; position: relative; }
.entry .snd, .lobby .snd { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 14px; }
.hero { text-align: center; }
.fan { height: 112px; position: relative; margin-bottom: 6px; --cw: 62px; }
.fan .card { position: absolute; left: 50%; top: 8px; margin: 0 0 0 -31px; transform-origin: 50% 130%; }
.fan .card:nth-child(1) { transform: rotate(-16deg) translateX(-6px); }
.fan .card:nth-child(2) { transform: rotate(0deg) translateY(-6px); }
.fan .card:nth-child(3) { transform: rotate(16deg) translateX(6px); }
.hero h1 { margin: 0; font-size: 46px; letter-spacing: -.02em; line-height: 1; background: linear-gradient(180deg, #fff3b0, var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 4px 24px rgba(255, 190, 40, .25); }
.hero p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: 22px; padding: 16px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 40px rgba(0, 0, 0, .3); display: grid; gap: 10px; }
.sep { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.sep::before, .sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.joinrow { display: flex; gap: 8px; }
.joinrow input { text-align: center; font-weight: 700; }
.roomcode { text-align: center; }
.roomcode small { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.roomcode b { font-size: 38px; letter-spacing: .18em; background: linear-gradient(180deg, #fff3b0, var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; cursor: pointer; }
.members { display: grid; gap: 8px; }
.member { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(0, 0, 0, .22); border-radius: 14px; }
.member .tag { margin-left: auto; font-size: 11px; color: var(--muted); }
.err { color: #ffb4a2; text-align: center; font-size: 13px; }
.err:empty { display: none; }

.av { --h: 140; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 70% 52%), hsl(calc(var(--h) + 40) 70% 36%)); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .35); }

/* ---------- игра: каркас ---------- */
.game { position: relative; height: 100vh; height: var(--tg-viewport-stable-height, 100dvh); max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 7px;
  padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom)); }
.game > * { flex: none; margin: 0; }
.game > .table { flex: 1 1 0; min-height: 0; }

.info { display: flex; gap: 6px; justify-content: center; align-items: center; padding: 0 40px; font-size: 12px; white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.pill b { font-weight: 800; }
.pill.trump { font-size: 13px; }
.pill.trump .tsuit { font-size: 18px; line-height: 1; }
.pill.egg { background: rgba(255, 213, 74, .2); border-color: var(--accent); color: var(--accent); }
.menubtn { position: absolute; top: max(6px, env(safe-area-inset-top)); right: 10px; z-index: 20; }

.opps { display: flex; gap: 6px; justify-content: center; }
.opp { position: relative; flex: 1 1 0; max-width: 200px; min-width: 0; padding: 4px 8px 4px 5px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 5px; transition: box-shadow .25s, border-color .25s; }
.opp .av { width: 20px; height: 20px; font-size: 10px; }
.opp b { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.opp .pen { position: absolute; top: -6px; right: -2px; font-size: 9px; font-weight: 800; color: #fecaca; background: #b91c1c; border-radius: 999px; padding: 1px 5px; }
.opp.turn, .me.turn { border-color: var(--accent); animation: ring 1.6s ease-in-out infinite; }
.opp.out { opacity: .4; filter: grayscale(.6); }
@keyframes ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 213, 74, .0), 0 0 10px rgba(255, 213, 74, .25); } 50% { box-shadow: 0 0 0 3px rgba(255, 213, 74, .22), 0 0 18px rgba(255, 213, 74, .45); } }
.minis { display: flex; justify-content: flex-end; margin-left: auto; padding-right: 7px; flex: none; }
.minis .card { --cw: 12px; margin: 0 -7px 0 0; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 0 0 1px #f4efe3; }

.status { height: 34px; line-height: 32px; padding: 0 14px; text-align: center; font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.status.mine { background: linear-gradient(180deg, rgba(255, 213, 74, .3), rgba(255, 165, 30, .22)); border-color: var(--accent); color: #fff6c9; animation: ring 1.6s ease-in-out infinite; }
.bar { display: flex; gap: 8px; justify-content: center; align-items: center; height: 42px; }
.bar button { padding: 9px 18px; }
.me { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: 13px; }
.me .av { width: 24px; height: 24px; font-size: 12px; }
.me span { color: var(--muted); }
.me b { color: var(--text); }
.log { display: none; font-size: 12px; color: var(--muted); max-height: 90px; overflow: auto; background: rgba(0, 0, 0, .2); padding: 8px 10px; border-radius: 12px; }
@media (min-height: 860px) { .log { display: block; } }

/* ---------- карты ---------- */
.card { --c: var(--cw, 52px); position: relative; display: block; width: var(--c); height: calc(var(--c) * 1.42); margin: 3px; border-radius: calc(var(--c) * .14);
  background: linear-gradient(160deg, #ffffff 0%, #f5f0e3 100%); color: var(--ink); flex: none; user-select: none;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(0, 0, 0, .14), 0 4px 10px rgba(0, 0, 0, .35); }
.card.red { color: var(--red); }
.card i { position: absolute; font-style: normal; line-height: 1; }
.card .r { top: calc(var(--c) * .08); left: calc(var(--c) * .11); font-size: calc(var(--c) * .31); font-weight: 800; letter-spacing: -.04em; }
.card .p { top: calc(var(--c) * .4); left: calc(var(--c) * .11); font-size: calc(var(--c) * .24); }
.card .s { right: calc(var(--c) * .07); bottom: calc(var(--c) * .05); font-size: calc(var(--c) * .62); opacity: .9; }
.card.back { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .24) 0 13%, transparent 14%), repeating-linear-gradient(45deg, #2e50bd 0 4px, #233b98 4px 8px);
  box-shadow: inset 0 0 0 calc(var(--c) * .06) #f4efe3, 0 0 0 1px rgba(0, 0, 0, .25), 0 4px 10px rgba(0, 0, 0, .35); }
.card.back i { display: none; }
.card.sel { transform: translateY(-14px); box-shadow: inset 0 1px 0 #fff, 0 0 0 3px var(--accent), 0 10px 22px rgba(255, 190, 40, .45); }

.hand { --cw: min(54px, calc((100vw - 28px) / 6 - 6px), 11.5dvh); display: flex; flex-wrap: nowrap; justify-content: center; padding-top: 16px; }
.hand .card { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
@media (hover: hover) { .hand .card:not(.sel):hover { transform: translateY(-6px); } }

/* ---------- стол ---------- */
.table { position: relative; overflow: hidden; display: flex; gap: 12px; align-items: stretch; padding: 10px; border-radius: 26px; text-align: left;
  background: radial-gradient(ellipse at 50% 35%, var(--felt0) 0%, var(--felt1) 55%, var(--felt2) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 60px rgba(0, 0, 0, .35), 0 12px 36px rgba(0, 0, 0, .35); }
.table::before { content: ''; position: absolute; inset: 7px; border-radius: 20px; border: 1px dashed rgba(255, 255, 255, .12); pointer-events: none; }
.deckzone { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 110px; position: relative; }
.deckwrap { --cw: 46px; position: relative; width: 120px; height: 80px; }
.deckwrap .trumpcard { position: absolute; left: 58px; top: 8px; transform: rotate(90deg); margin: 0; z-index: 1; }
.deckwrap .stack { position: absolute; left: 0; top: 0; z-index: 2; width: var(--cw); height: calc(var(--cw) * 1.42); }
.stack .card { position: absolute; margin: 0; }
.stack .badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(4, 20, 14, .78); color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 13px; font-weight: 800; z-index: 3; border: 1px solid var(--line); }
.deckcap { font-size: 11px; color: rgba(255, 255, 255, .75); margin-top: 8px; text-align: center; }

.slots { --cw: 40px; flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0 6px; }
.slot { position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; text-align: center; }
.slot.row1 { padding-top: 46px; }
.slot.row2 { padding-bottom: 46px; }
.slot .nm, .slot .act { position: absolute; left: 50%; transform: translateX(-50%); }
.slot.row1 .nm { top: 0; } .slot.row1 .act { top: 26px; }
.slot.row2 .nm { bottom: 0; } .slot.row2 .act { bottom: 26px; }
.slot .nm { display: inline-flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; padding: 2px 10px 2px 3px; border-radius: 999px; font-size: 11px; white-space: nowrap; background: rgba(0, 0, 0, .3); border: 1px solid transparent; }
.slot .nm .av { width: 16px; height: 16px; font-size: 8px; box-shadow: none; }
.slot .nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot.turn .nm { border-color: var(--accent); animation: ring 1.6s ease-in-out infinite; }
.slot .act { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 1px 7px; border-radius: 999px; line-height: 12px; white-space: nowrap; }
.slot .act:empty { visibility: hidden; }
.slot .act.lead { background: rgba(96, 165, 250, .35); color: #dbeafe; }
.slot .act.beat { background: rgba(52, 211, 153, .35); color: #d1fae5; }
.slot .act.discard { background: rgba(255, 255, 255, .2); color: #f3f4f6; }
.slot.stale .cards { opacity: .35; }
.cards { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start; }
.cards .card { margin: 2px; }
.cards.xs { --cw: 28px; }
.cards.ov > .card + .card, .cards.ov > .pair + .pair { margin-left: calc(var(--cw) * -.52); }
.pair { position: relative; flex: none; width: calc(var(--cw) * 1.3); height: calc(var(--cw) * 1.42 * 1.12); margin: 2px 4px; }
.pair .card { position: absolute; margin: 0; }
.pair .under { left: 0; top: 0; transform: rotate(-10deg); filter: brightness(.74); }
.pair .over { left: calc(var(--cw) * .25); top: calc(var(--cw) * .15); }

.pile { position: absolute; width: 24px; height: 40px; z-index: 2; }
.pile.tl { top: 10px; left: 10px; } .pile.tr { top: 10px; right: 10px; }
.pile.bl { bottom: 10px; left: 10px; } .pile.br { bottom: 10px; right: 10px; }
.pile .pc { position: absolute; left: 2px; width: 20px; height: 28px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .6), inset 0 0 0 2px #f4efe3;
  background: repeating-linear-gradient(45deg, #2e50bd 0 3px, #233b98 3px 6px); }
.pile.empty { border: 1.5px dashed rgba(255, 255, 255, .4); border-radius: 5px; }

.slot.winner .nm { border-color: var(--accent); background: rgba(255, 213, 74, .3); color: #fff6c9; }
.slot.winner .act { visibility: visible; background: var(--accent); color: #2b1d00; }

.bubble { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); z-index: 6; opacity: 0; width: max-content; max-width: 150px; text-align: center; line-height: 1.15; pointer-events: none;
  background: linear-gradient(180deg, #ffe58a, var(--accent2)); color: #2b1d00; font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--accent2); }

/* ---------- результат ---------- */
.result { width: 100%; overflow: auto; max-height: 100%; padding: 4px 2px; }
.result h2 { margin: 0 0 8px; font-size: 18px; text-align: center; }
.result table { border-collapse: separate; border-spacing: 0 5px; width: 100%; }
.result td { padding: 7px 8px; font-size: 13px; white-space: nowrap; background: rgba(0, 0, 0, .22); }
.result td:first-child { border-radius: 12px 0 0 12px; font-weight: 700; }
.result td:last-child { border-radius: 0 12px 12px 0; text-align: right; }
.result tr.win td { background: rgba(255, 213, 74, .22); color: var(--accent); }
.result .pen { color: #fca5a5; }
.result button { display: block; margin: 8px auto 0; }
.trophy { display: inline-block; animation: bounce .8s ease-in-out infinite; }
.confetti { position: fixed; top: -30px; font-size: 24px; animation: fall linear forwards; pointer-events: none; z-index: 60; }

/* ---------- меню ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(2, 14, 10, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fadein .2s ease both; }
.panel { width: 100%; max-width: 330px; display: grid; gap: 10px; padding: 20px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06)); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, .55); animation: popin .22s cubic-bezier(.2, .9, .3, 1.2) both; }
.panel h2 { margin: 0 0 2px; font-size: 20px; text-align: center; }
.panel p { margin: 0; font-size: 14px; text-align: center; color: var(--muted); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 16px; background: rgba(0, 0, 0, .22); font-weight: 600; }
.setrow input[type=range] { width: 130px; accent-color: var(--accent); }
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, .2); transition: background .2s; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform .2s; }
.switch input:checked + i { background: linear-gradient(180deg, #34d399, #059669); }
.switch input:checked + i::after { transform: translateX(20px); }

/* ---------- анимации ---------- */
.card.canbeat::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid #34d399; pointer-events: none; animation: cbpulse 1.4s ease-in-out infinite; animation-delay: var(--cbd, 0s); }
@keyframes cbpulse { 0%, 100% { opacity: .35; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } 50% { opacity: 1; box-shadow: 0 0 16px 3px rgba(52, 211, 153, .75); } }
.card.fly { animation: fly .9s ease-out both; }
.card.draw { animation: drawin 1s cubic-bezier(.2, .8, .3, 1) both; }
.card.pulse { animation: pulse 1s ease-in-out 2; }
.slot.sweep .cards { animation: sweep 1.5s ease-in .5s both; }
.slot.winpulse { animation: win 1.8s ease-in-out both; }
.pile.bump { animation: bump .9s ease-out both; }
.bubble.bpop { animation: bpop 2.6s ease both; }
@keyframes fly { from { transform: translateY(var(--dy, 120px)) scale(.7) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drawin { from { transform: translate(var(--fx, -60px), var(--fy, -120px)) scale(.5) rotate(-25deg); opacity: 0; } 70% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 213, 74, 0), 0 4px 10px rgba(0, 0, 0, .35); } 50% { box-shadow: 0 0 22px 8px var(--accent); } }
@keyframes sweep { to { transform: translate(var(--sx, 0px), var(--sy, -260px)) scale(.35); opacity: 0; } }
@keyframes win { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.04); filter: brightness(1.25); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.7); filter: brightness(1.5); } 100% { transform: scale(1); } }
@keyframes bpop { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 14% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 24% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.95); opacity: 0; } }
@keyframes bounce { 50% { transform: translateY(-6px) rotate(8deg); } }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes popin { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .opp.turn, .slot.turn, .me.turn, .status.mine { animation: none; } }

/* ---------- телефон ---------- */
@media (max-width: 600px) {
  .deckzone { min-width: 100px; }
  .deckwrap { --cw: 38px; width: 100px; height: 66px; }
  .deckwrap .trumpcard { left: 48px; top: 6px; }
  .slots { --cw: 34px; }
  .cards.xs { --cw: 24px; }
  .hide-m { display: none; }
  .game { gap: 6px; }
  .table { border-radius: 22px; }
  .info { gap: 3px; padding: 0 44px 0 0; font-size: 11px; }
  .pill { padding: 3px 7px; gap: 3px; }
}
@media (max-height: 640px) { .info, .minis { display: none; } .table { padding: 6px; } .pile.tl, .pile.tr { top: 6px; } .pile.bl, .pile.br { bottom: 6px; } .slot.row1 { padding-top: 40px; } .slot.row2 { padding-bottom: 40px; } }

/* ---------- эмоции ---------- */
.me { position: relative; }
.me .emobtn { margin-left: auto; width: 30px; height: 30px; font-size: 16px; }
.emotetray { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 15; display: flex; gap: 6px; padding: 6px 8px; border-radius: 999px; background: rgba(8, 40, 28, .92); border: 1px solid var(--line); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); animation: popin .18s ease both; }
.emotetray button { width: 38px; height: 38px; padding: 0; font-size: 22px; line-height: 1; background: var(--glass2); box-shadow: none; display: grid; place-items: center; }
.emote { position: fixed; z-index: 40; pointer-events: none; transform: translate(-50%, -50%); text-align: center; animation: emoteup 2.6s ease-out both; }
.emote span { display: block; font-size: 44px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.emote small { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: rgba(0, 0, 0, .55); font-size: 11px; font-weight: 700; }
@keyframes emoteup { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 12% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; } 22% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, calc(-50% - 80px)) scale(1); opacity: 0; } }

.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 150px); transform: translateX(-50%); z-index: 45; max-width: 90vw; padding: 8px 16px; border-radius: 999px; background: #991b1b; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); pointer-events: none; opacity: 0; }
.toast.show { animation: toast 3.6s ease both; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 8px); } 8% { opacity: 1; transform: translate(-50%, 0); } 85% { opacity: 1; } 100% { opacity: 0; } }

.invcode { color: var(--accent); letter-spacing: .12em; font-size: 1.15em; }
.hint { text-align: center; color: var(--muted); font-size: 13px; }
.joinrow input { letter-spacing: .3em; }
.linkbox { font-size: 14px !important; text-align: center; }
.linkbox[hidden] { display: none; }

/* ---------- таймер хода ---------- */
.status { position: relative; overflow: hidden; }
.status .stxt { position: relative; z-index: 1; }
.status .tbar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 213, 74, .28); z-index: 0; transition: width .25s linear, background .3s; }
.status .tnum { position: absolute; right: 12px; top: 0; z-index: 1; font-style: normal; font-weight: 800; font-size: 13px; color: var(--accent); }
.status.urgent .tbar { background: rgba(239, 68, 68, .45); }
.status.urgent .tnum { color: #fecaca; animation: bounce .5s ease-in-out infinite; }

/* ---------- отметки и рейтинг ---------- */
.bdg { font-size: .95em; letter-spacing: -.05em; white-space: nowrap; flex: none; }
.opp .bdg { font-size: 11px; }
.slot .nm .bdg { font-size: 10px; }
.entry .tl { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 14px; }
.mystats { margin-top: 8px; display: inline-flex; gap: 8px; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: 13px; }
.lb { max-width: 380px; }
.lb .lbrows { display: grid; gap: 5px; max-height: 52vh; overflow: auto; padding-right: 2px; }
.lbrow { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 14px; background: rgba(0, 0, 0, .22); font-size: 14px; }
.lbrow.me { background: rgba(255, 213, 74, .2); box-shadow: inset 0 0 0 1px var(--accent); }
.lbrow .pl { text-align: center; font-weight: 800; color: var(--muted); }
.lbrow .nmx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lbrow .nmx small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.lbrow .sc { font-weight: 800; font-size: 16px; }
.lbrow .sc.pos { color: #6ee7b7; } .lbrow .sc.neg { color: #fca5a5; }
.legend { display: grid; gap: 4px; font-size: 12px; color: var(--muted); max-height: 22vh; overflow: auto; }
.empty { text-align: center; color: var(--muted); padding: 14px 0; }
.ratingbox { margin: 6px auto 0; padding: 6px 12px; border-radius: 14px; background: rgba(0, 0, 0, .25); text-align: center; font-size: 13px; }
.ratingbox b.pos { color: #6ee7b7; } .ratingbox b.neg { color: #fca5a5; }
.toast.notice { background: rgba(8, 40, 28, .95); border: 1px solid var(--line); }

.resume { display: grid; gap: 8px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 213, 74, .14); border: 1px solid rgba(255, 213, 74, .45); font-size: 14px; text-align: center; }
.resume b { color: var(--accent); letter-spacing: .08em; }
.resume .rbtns { display: flex; gap: 8px; }
.resume .rbtns button { flex: 1; padding: 9px 10px; font-size: 14px; }
.lnk { color: var(--accent); cursor: pointer; text-decoration: underline; }

/* ---------- подбор игры ---------- */
.mm { text-align: center; font-weight: 700; font-size: 16px; padding: 8px 0 4px; min-height: 36px; }
.mm b { color: var(--accent); font-size: 1.2em; }
.dots::after { content: ''; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.srch { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: initial !important; display: inline-block; font-size: 52px !important; letter-spacing: 0 !important; -webkit-text-fill-color: initial; animation: spin 2.4s linear infinite; cursor: default !important; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-height: 720px) { .fan { height: 84px; --cw: 46px; margin-bottom: 2px; } .fan .card { margin-left: -23px; } .hero h1 { font-size: 40px; } .hero p { margin-top: 4px; } }

/* ---------- нет связи ---------- */
.offl { font-size: 10px; font-weight: 800; color: #fecaca; background: rgba(185, 28, 28, .55); padding: 1px 6px; border-radius: 999px; white-space: nowrap; flex: none; }
.opp.offline, .slot .nm.offline { opacity: .7; filter: saturate(.5); }
.opp.offline .offl { margin-left: auto; }
.opp.offline .minis { display: none; }
.result h2 small { font-size: 12px; font-weight: 500; color: var(--muted); }

.seg { display: flex; gap: 6px; }
.seg button { flex: 1; padding: 10px 2px; font-size: 13px; color: var(--text); background: var(--glass2); box-shadow: inset 0 0 0 1px var(--line); }
.seg button.on { background: var(--accent); color: var(--ink); box-shadow: none; }