/* The Telegram mini app: app.css (the solo player) plus rooms, lobby, bars and turns. Phone first. */
body{overscroll-behavior:none;-webkit-user-select:none;user-select:none}
input,textarea{-webkit-user-select:text;user-select:text}
.page{max-width:560px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom))}
.logo{margin:.1em 0 0;letter-spacing:.35em;font-weight:300;font-size:1.5rem}
.sub{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:22px 0 10px;font-weight:600}
.wide{width:100%;display:block}
.note{color:var(--mute);font-size:.88rem;margin:.6em 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
.center{text-align:center}
.lbl{display:block;font-size:.78rem;color:var(--mute);margin:12px 0 6px;letter-spacing:.06em}
.card .lbl:first-child{margin-top:0}
.card textarea{width:100%;resize:vertical;background:#0f131b;border:1px solid var(--line);border-radius:12px;padding:10px;min-height:78px}
.card textarea:focus,.joinby input:focus{outline:2px solid var(--accent);outline-offset:1px}
.card .row select{flex:1;min-width:0}
.card .primary{margin-top:14px}
.danger{color:var(--danger)}
.stack{display:grid;gap:10px;margin-top:16px}

/* segmented choices */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg button{background:#0f131b;border:1px solid var(--line);border-radius:12px;padding:.55rem .6rem;text-align:left;display:flex;flex-direction:column;gap:2px}
.seg button small{color:var(--mute);font-size:.75rem;line-height:1.25}
.seg button.on{border-color:var(--accent);background:rgba(94,234,212,.1)}
.seg.small button{text-align:center;align-items:center;padding:.45rem}
#voiceSeg{margin-top:12px}

/* rooms list */
.joinby{display:flex;gap:8px;margin-top:14px}
.joinby input{flex:1;min-width:0;background:#0f131b;border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;text-transform:uppercase;letter-spacing:.12em}
.rooms{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.room{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;text-align:left;width:100%}
.room.turn{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.room .ico{font-size:1.4rem}
.room .txt{flex:1;min-width:0}
.room b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room small{color:var(--mute);font-size:.8rem}
.room .state{font-size:.75rem;border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap;color:var(--mute)}
.room.turn .state{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);font-weight:650}

/* lobby */
.code{font-size:2.1rem;letter-spacing:.3em;font-weight:300;color:var(--accent);margin-left:.3em}
.mode{margin:.3em 0 0;font-weight:600}
.premise{color:var(--mute);font-style:italic;margin:.5em 0 0;font-size:.92rem}
.seats{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.seats li{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem}
.seats li.open{border-style:dashed;color:var(--mute)}
.seats .tagx{margin-left:auto;font-size:.72rem;color:var(--mute)}
.seats .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#1b2233;font-weight:650;color:var(--accent)}

/* the game */
.chip{background:rgba(11,13,18,.75);border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:.8rem;white-space:nowrap}
.chip.mine{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:650;animation:pulse 2s ease-in-out infinite}
.hud{position:absolute;left:12px;right:12px;bottom:10px;z-index:3;display:grid;gap:6px;pointer-events:none}
.meter{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:.74rem;text-shadow:0 1px 3px #000}
.meter .track{height:7px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.meter .track b{display:block;height:100%;border-radius:4px;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.meter.foe .track b{background:linear-gradient(90deg,#f87171,#fb923c)}
.meter.team .track b{background:linear-gradient(90deg,#34d399,#5eead4)}
.meter .num{font-variant-numeric:tabular-nums;color:var(--mute)}
.tug{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:.76rem;text-shadow:0 1px 3px #000}
.tug .track{height:8px;border-radius:4px;background:#f472b6;overflow:hidden}
.tug .track b{display:block;height:100%;background:#60a5fa;transition:width .9s cubic-bezier(.2,.8,.2,1);box-shadow:2px 0 0 #fff}
.tug .a{color:#93c5fd}.tug .b{color:#f9a8d4}
.round{font-size:.7rem;color:var(--mute);text-align:right;text-shadow:0 1px 3px #000}
.you b{color:var(--text);font-style:normal;font-weight:600}
.waiting{color:var(--mute);text-align:center;padding:.5rem 0;display:flex;gap:10px;align-items:center;justify-content:center}
.waiting .unfold{padding:0}
.result{text-align:center;padding:6px 0 2px}
.result h3{margin:.1em 0;font-size:1.5rem;font-weight:300;letter-spacing:.12em;color:var(--accent)}
.result.lost h3{color:var(--danger)}
.result ul{list-style:none;padding:0;margin:.6em 0;display:grid;gap:4px;font-size:.88rem;text-align:left}
.result li b{color:var(--accent)}
.result .primary{margin-top:8px}
@media (max-width:600px){.bar .chip{font-size:.74rem}}