/* =====================================================================
   МОНОПОЛИЯ · «БИРЖА 1929»
   Винтажный стиль фондовой биржи: кремовая бумага, изумруд, бордо,
   золотое тиснение, гравюрные рамки, бегущая биржевая строка.
   ===================================================================== */
:root{
  /* бумага и чернила */
  --paper:#f4ead0;
  --paper-2:#efe2c2;
  --paper-3:#e8d8b4;
  --ink:#241f16;
  --ink-2:#4a4232;
  --ink-soft:#726647;
  /* фирменные */
  --emerald:#15563d;
  --emerald-dk:#0d3a29;
  --emerald-lt:#2b7d5a;
  --oxblood:#7c2230;
  --oxblood-lt:#a3384a;
  --gold:#a9812f;
  --gold-lt:#d6b158;
  --navy:#274b7a;
  --teal:#2f6f6a;
  --line:rgba(36,31,22,.26);
  --line-soft:rgba(36,31,22,.14);
  /* группы собственности (приглушённые под винтаж) */
  --g-brown:#7a4a2b; --g-lblue:#6ba7c4; --g-pink:#b1467e; --g-orange:#cf7a2e;
  --g-red:#a5303a; --g-yellow:#d0a62c; --g-green:#2f7d4f; --g-dblue:#274b7a;
  /* шрифты */
  --f-display:'Playfair Display', Georgia, serif;
  --f-body:'EB Garamond', Georgia, serif;
  --f-caps:'Oswald', 'Arial Narrow', sans-serif;
  --shadow:0 18px 44px rgba(20,14,6,.32);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{min-height:100%;}
body{
  font-family:var(--f-body);
  font-size:15px;
  color:var(--ink);
  background:
    radial-gradient(1100px 700px at 15% -8%, rgba(21,86,61,.10), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(124,34,48,.08), transparent 60%),
    #cdbb92;
  overflow-x:auto;
}
/* бумажная текстура-подложка на весь экран */
.paper-fx{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;}
::-webkit-scrollbar{width:11px; height:11px;}
::-webkit-scrollbar-thumb{background:var(--emerald); border:2px solid var(--paper-3); border-radius:2px;}
::-webkit-scrollbar-track{background:var(--paper-3);}

/* общая гравюрная рамка-помощник */
.engraved{position:relative; background:var(--paper);
  border:1px solid var(--ink);
  box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--line), var(--shadow);}

/* ===================== БЕГУЩАЯ БИРЖЕВАЯ СТРОКА ===================== */
.ticker{position:relative; z-index:6; background:var(--emerald-dk); color:var(--paper);
  border-bottom:2px solid var(--gold); overflow:hidden; height:30px; display:flex; align-items:center;}
.ticker .rail{display:flex; gap:34px; white-space:nowrap; padding-left:100%;
  animation:tick 34s linear infinite; font-family:var(--f-caps); font-size:12.5px; letter-spacing:.06em;}
.ticker .sym{font-weight:600; color:var(--gold-lt);}
.ticker .up{color:#6fd39a;} .ticker .dn{color:#e88a97;}
@keyframes tick{to{transform:translateX(-100%);}}

/* ===================== ВЕРХНЯЯ ПАНЕЛЬ (МАСТХЕД) ===================== */
.topbar{position:relative; z-index:5; display:flex; align-items:center; gap:26px;
  padding:16px 30px; background:linear-gradient(180deg, var(--paper), var(--paper-2));
  border-bottom:3px double var(--ink);}
.brand{display:flex; align-items:center; gap:14px;}
.crest{width:44px; height:44px; flex:0 0 auto;}
.brand .txt{display:flex; flex-direction:column; line-height:1;}
.brand .word{font-family:var(--f-display); font-weight:900; font-size:24px; letter-spacing:.02em; color:var(--emerald);}
.brand .sub{font-family:var(--f-caps); font-size:10.5px; letter-spacing:.42em; color:var(--oxblood); margin-top:5px; font-weight:500;}
.tabs{display:flex; gap:0; margin:0 auto; border:1px solid var(--ink); border-radius:2px; overflow:hidden;
  box-shadow:inset 0 0 0 2px var(--paper);}
.tab-btn{font-family:var(--f-caps); font-weight:500; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2); background:transparent; border:none; border-right:1px solid var(--line-soft);
  padding:9px 20px; cursor:pointer; transition:.15s;}
.tab-btn:last-child{border-right:none;}
.tab-btn:hover{background:var(--paper-3); color:var(--ink);}
.tab-btn.active{background:var(--emerald); color:var(--paper);}
.room-chip{display:flex; align-items:center; gap:11px; padding:8px 15px;
  background:var(--paper); border:1px solid var(--ink); box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--line-soft);}
.room-chip .dot{width:8px; height:8px; border-radius:50%; background:var(--emerald-lt);
  box-shadow:0 0 0 2px rgba(43,125,90,.3); animation:pulse 2.2s infinite;}
.room-chip b{font-family:var(--f-caps); font-size:13px; letter-spacing:.1em;}
.room-chip span{color:var(--ink-soft); font-size:13px;}
@keyframes pulse{50%{opacity:.4;}}

main{position:relative; z-index:2;}
.tab-page{display:none; padding:28px 30px 54px;}
.tab-page.active{display:block;}

/* ===================================================================
   ИГРОВОЙ ЭКРАН
   =================================================================== */
.game-layout{display:flex; gap:26px; justify-content:center; align-items:flex-start;}

/* ---------- доска ---------- */
.board-wrap{flex:0 0 auto;}
.board{
  --corner:104px;
  width:760px; height:760px;
  display:grid;
  grid-template-columns:var(--corner) repeat(9, 1fr) var(--corner);
  grid-template-rows:var(--corner) repeat(9, 1fr) var(--corner);
  gap:0;
  padding:12px;
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(21,86,61,.05) 8px 9px),
    var(--paper);
  border:2px solid var(--ink);
  box-shadow:inset 0 0 0 4px var(--paper), inset 0 0 0 6px var(--gold),
             inset 0 0 0 7px var(--ink), var(--shadow);
}
.cell{position:relative; background:var(--paper);
  border:1px solid var(--line); margin:-0.5px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  overflow:hidden; transition:.12s;}
.cell:hover{background:#fbf4e0; z-index:4; box-shadow:inset 0 0 0 2px var(--gold);}
.cell .band{flex:0 0 auto; width:100%; height:20px; background:var(--gc, transparent);
  border-bottom:1px solid var(--line); position:relative;}
.cell .band::after{content:''; position:absolute; inset:0; box-shadow:inset 0 -2px 4px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);}
.cell.side-left .band, .cell.side-right .band{position:absolute; top:0; bottom:0; width:20px; height:100%; border-bottom:none;}
.cell.side-left .band{right:0; border-left:1px solid var(--line);}
.cell.side-right .band{left:0; border-right:1px solid var(--line);}
.cell.side-left{padding-right:20px;}
.cell.side-right{padding-left:20px;}
.cell.row-top .band{order:2; margin-top:auto; border-bottom:none; border-top:1px solid var(--line);}
.cell .logo{width:34px; height:34px; margin-top:7px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.2));}
.cell.side-left .logo, .cell.side-right .logo{width:30px; height:30px;}
.cell .name{font-family:var(--f-body); font-weight:600; font-size:10.5px; line-height:1.12;
  text-align:center; padding:3px 4px 0; color:var(--ink); letter-spacing:.01em;}
.cell .price{font-family:var(--f-caps); font-size:11px; color:var(--emerald); font-weight:600; margin-top:auto; padding:2px 0 4px;
  letter-spacing:.05em;}
.cell.row-top .price{order:1; margin-top:2px;}
.cell.row-top .name{order:0;}
.cell.row-top{justify-content:flex-start;}
.cell .tax-ico{font-size:20px; margin-top:9px;}
.cell.t-chance .marker, .cell.t-chest .marker{margin:auto; text-align:center;}
.cell .marker .glyph{font-family:var(--f-display); font-weight:900; font-size:30px; line-height:1;}
.cell.t-chance .glyph{color:var(--oxblood);}
.cell.t-chest .glyph{color:var(--emerald);}
.cell .marker .cap{font-family:var(--f-caps); font-size:8px; letter-spacing:.12em; color:var(--ink-soft);
  text-transform:uppercase; margin-top:5px; display:block; padding:0 3px;}

/* углы */
.cell.corner{background:
    repeating-linear-gradient(-45deg, transparent 0 9px, rgba(21,86,61,.06) 9px 10px),
    var(--paper);
  justify-content:center; gap:5px; padding:8px;}
.cell.corner .c-ico{font-size:30px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));}
.cell.corner .c-name{font-family:var(--f-display); font-size:11px; font-weight:700; letter-spacing:.05em;
  text-align:center; color:var(--ink); line-height:1.05;}
.cell.corner .c-sub{font-family:var(--f-caps); font-size:8.5px; letter-spacing:.1em; color:var(--ink-soft); text-transform:uppercase;}
.cell.corner.go .c-name{color:var(--emerald);}
.cell.corner.gotojail .c-name{color:var(--oxblood);}

/* активная клетка */
.cell.here{box-shadow:inset 0 0 0 3px var(--gold), inset 0 0 22px rgba(169,129,47,.28); z-index:3;}

/* печать владельца */
.seal{position:absolute; bottom:4px; right:4px; width:17px; height:17px; border-radius:50%;
  background:var(--sc); color:#fff; font-family:var(--f-caps); font-size:10px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(255,255,255,.55); box-shadow:0 1px 3px rgba(0,0,0,.4);}
.row-top .seal{bottom:auto; top:4px;}

/* дома и отель (винтажные жетоны) */
.houses{position:absolute; top:1px; left:0; right:0; display:flex; gap:2px; justify-content:center;}
.row-top .houses{top:auto; bottom:1px;}
.side-left .houses{top:0; bottom:0; left:auto; right:1px; width:18px; flex-direction:column; align-items:center;}
.side-right .houses{top:0; bottom:0; right:auto; left:1px; width:18px; flex-direction:column; align-items:center;}
.house{width:9px; height:9px; background:var(--emerald); border:1px solid var(--emerald-dk);
  box-shadow:0 1px 1px rgba(0,0,0,.3); margin:1px;}
.hotel{width:18px; height:10px; background:var(--oxblood); border:1px solid #52141d;
  box-shadow:0 1px 1px rgba(0,0,0,.3); margin:1px;}

/* фишки игроков */
.tokens{position:absolute; bottom:20px; left:0; right:0; display:flex; flex-wrap:wrap; gap:2px; justify-content:center;}
.corner .tokens{bottom:5px;}
.side-left .tokens, .side-right .tokens{bottom:4px;}
.token{width:22px; height:22px; border-radius:50%; font-size:12px; display:flex; align-items:center; justify-content:center;
  background:var(--paper); border:2px solid var(--tc); box-shadow:0 2px 4px rgba(0,0,0,.35);}

/* ---------- центр доски ---------- */
.board-center{grid-column:2 / -2; grid-row:2 / -2; position:relative; margin:2px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(21,86,61,.045) 14px 15px),
    radial-gradient(420px 320px at 50% 40%, rgba(255,255,255,.5), transparent 70%),
    var(--paper);
  border:1px solid var(--line);
  box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--gold), inset 0 0 0 4px var(--line);}
.bc-crest{width:66px; height:66px;}
.bc-logo{font-family:var(--f-display); font-weight:900; font-size:40px; letter-spacing:.03em; color:var(--emerald);
  text-align:center; line-height:.95; text-shadow:0 1px 0 rgba(255,255,255,.6);}
.bc-sub{font-family:var(--f-caps); font-size:11px; letter-spacing:.5em; color:var(--oxblood); margin-top:-8px; font-weight:500;}
.bc-rule{width:200px; height:0; border-top:1px solid var(--line); position:relative; margin:2px 0;}
.bc-rule::before{content:'❖'; position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--paper); padding:0 8px; color:var(--gold); font-size:12px;}
.dice-zone{display:flex; align-items:center; gap:16px;}
.die{width:52px; height:52px; background:var(--paper); border:2px solid var(--ink); border-radius:8px;
  box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--line-soft), 0 4px 8px rgba(0,0,0,.28);
  display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); padding:9px; gap:2px;
  animation:float 3.6s ease-in-out infinite;}
.die:nth-child(2){animation-delay:.7s;}
@keyframes float{50%{transform:translateY(-4px) rotate(-2deg);}}
.die .pip{border-radius:50%; background:var(--oxblood); opacity:0; margin:auto; width:8px; height:8px;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.3);}
.die .pip.on{opacity:1;}
.decks{display:flex; gap:26px; margin-top:2px;}
.deck{width:118px; height:70px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:1px solid var(--ink); background:var(--paper); box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--line-soft), 0 3px 7px rgba(0,0,0,.2);}
.deck .dt{font-family:var(--f-display); font-weight:700; font-size:13px; letter-spacing:.02em;}
.deck .ds{font-family:var(--f-caps); font-size:8px; letter-spacing:.14em; color:var(--ink-soft); text-transform:uppercase;}
.deck.chance{transform:rotate(-2.5deg);} .deck.chance .dt{color:var(--oxblood);}
.deck.chest{transform:rotate(2.5deg);} .deck.chest .dt{color:var(--emerald);}
.deck .corner-flor{position:absolute; font-size:9px; color:var(--gold);}
.deck .corner-flor.tl{top:3px; left:5px;} .deck .corner-flor.br{bottom:3px; right:5px;}
.log{width:80%; max-width:440px; background:rgba(255,253,245,.7); border:1px solid var(--line);
  box-shadow:inset 0 0 0 2px var(--paper); padding:9px 15px; margin-top:2px;}
.log li{list-style:none; font-size:13.5px; color:var(--ink-2); padding:3px 0; border-bottom:1px dotted var(--line-soft);}
.log li:last-child{border-bottom:none;}
.log b{color:var(--ink); font-weight:700;}
.log .sum{font-family:var(--f-caps); color:var(--oxblood); font-weight:600; letter-spacing:.03em;}

/* ---------- сайдбар ---------- */
.sidebar{flex:0 0 356px; display:flex; flex-direction:column; gap:18px;}
.panel{background:linear-gradient(180deg, var(--paper), var(--paper-2));
  border:1px solid var(--ink); box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--line-soft), var(--shadow);
  padding:18px;}
.panel h3{font-family:var(--f-caps); font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--oxblood); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:8px;}
.panel h3::before{content:'§'; color:var(--gold); font-family:var(--f-display); font-size:15px;}
.turn-timer{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.turn-timer h3{margin:0; padding:0; border:none;}
.turn-timer h3::before{content:none;}
.turn-timer .t{font-family:var(--f-caps); font-size:22px; color:var(--oxblood); font-weight:600; letter-spacing:.04em;}
.tbar{height:7px; background:var(--paper-3); border:1px solid var(--line); overflow:hidden;}
.tbar i{display:block; height:100%; width:68%;
  background:repeating-linear-gradient(45deg, var(--emerald) 0 6px, var(--emerald-lt) 6px 12px);}

/* строка игрока-акционера */
.player{display:flex; align-items:center; gap:13px; padding:11px; border:1px solid transparent;}
.player + .player{margin-top:4px; border-top:1px dotted var(--line-soft);}
.player.active{background:rgba(21,86,61,.08); border:1px solid var(--emerald); box-shadow:inset 0 0 0 2px var(--paper);}
.ava{width:42px; height:42px; border-radius:50%; flex:0 0 auto; font-size:19px;
  display:flex; align-items:center; justify-content:center; background:var(--paper);
  border:2px solid var(--pc); box-shadow:inset 0 0 0 2px var(--paper), 0 2px 4px rgba(0,0,0,.25);}
.player .info{flex:1; min-width:0;}
.player .nm{font-family:var(--f-display); font-weight:700; font-size:16px; display:flex; align-items:center; gap:9px;}
.badge{font-family:var(--f-caps); font-size:9px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 8px; border:1px solid currentColor;}
.badge.now{color:var(--emerald);}
.badge.jail{color:var(--oxblood);}
.assets{display:flex; gap:3px; margin-top:5px;}
.asset{width:16px; height:9px; background:var(--ac); border:1px solid rgba(0,0,0,.25);}
.money{font-family:var(--f-caps); font-size:17px; font-weight:600; color:var(--emerald); letter-spacing:.02em; white-space:nowrap;}
.money::before{content:'$'; color:var(--gold); margin-right:1px;}

/* кнопки-леттерпресс */
.btn{font-family:var(--f-caps); font-weight:500; font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  padding:13px 18px; cursor:pointer; transition:.14s; border:1px solid var(--ink); color:var(--ink);
  background:var(--paper); box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--line-soft);}
.btn:hover{transform:translateY(-1px); box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--line-soft), 0 4px 8px rgba(0,0,0,.22);}
.btn-primary{background:var(--emerald); color:var(--paper); border-color:var(--emerald-dk);
  box-shadow:inset 0 0 0 2px var(--emerald), inset 0 0 0 3px rgba(169,129,47,.5);}
.btn-primary:hover{background:var(--emerald-lt);}
.btn-buy{background:var(--oxblood); color:var(--paper); border-color:#52141d;
  box-shadow:inset 0 0 0 2px var(--oxblood), inset 0 0 0 3px rgba(169,129,47,.5);}
.btn-buy:hover{background:var(--oxblood-lt);}
.btn-gold{background:var(--gold); color:#2a1e05; border-color:#6f5417;
  box-shadow:inset 0 0 0 2px var(--gold), inset 0 0 0 3px rgba(255,255,255,.3);}
.btn[disabled]{opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--line-soft) !important;}
.actions{display:flex; flex-direction:column; gap:9px;}
.actions .row{display:flex; gap:9px;}
.actions .row .btn{flex:1;}

/* чат */
.chat{display:flex; flex-direction:column; gap:9px; max-height:210px;}
.msgs{overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:4px;}
.msg{font-size:14px; line-height:1.4;}
.msg b{font-family:var(--f-display); font-weight:700;}
.msg .c-1{color:var(--emerald);} .msg .c-2{color:var(--oxblood);} .msg .c-3{color:var(--teal);} .msg .c-4{color:var(--navy);}
.chat input{background:#fffdf5; border:1px solid var(--ink); color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--paper); padding:11px 14px; font-family:var(--f-body); font-size:15px; outline:none;}
.chat input:focus{box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--gold);}
.chat input::placeholder{color:var(--ink-soft);}

/* ===================================================================
   ЛОББИ
   =================================================================== */
.lobby{max-width:1080px; margin:0 auto;}
.hero{text-align:center; padding:20px 0 30px;}
.hero .hero-crest{width:84px; height:84px; margin-bottom:6px;}
.hero h1{font-family:var(--f-display); font-weight:900; font-size:56px; letter-spacing:.02em; color:var(--emerald);
  text-shadow:0 2px 0 rgba(255,255,255,.5); line-height:1;}
.hero .tag{font-family:var(--f-caps); color:var(--oxblood); letter-spacing:.42em; font-size:13px; margin-top:12px; text-transform:uppercase;}
.hero .est{font-style:italic; color:var(--ink-soft); margin-top:6px; font-size:15px;}
.lobby-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:22px;}
.field{margin-bottom:16px;}
.field label{display:block; font-family:var(--f-caps); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--oxblood); margin-bottom:8px;}
/* единый стиль ВСЕХ текстовых инпутов: text / email / password */
.field input[type=text], .field input[type=email], .field input[type=password],
.join-code input{width:100%; background:#fffdf5; border:1px solid var(--ink); color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--paper); padding:12px 15px; font-family:var(--f-body); font-size:16px; outline:none;}
.field input[type=text]:focus, .field input[type=email]:focus, .field input[type=password]:focus,
.join-code input:focus{box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--gold);}
.field input::placeholder, .join-code input::placeholder{color:var(--ink-soft); opacity:.85;}
.seg{display:flex; gap:0; border:1px solid var(--ink); box-shadow:inset 0 0 0 2px var(--paper);}
.seg button{flex:1; padding:11px 0; border:none; border-right:1px solid var(--line-soft); background:transparent;
  color:var(--ink-2); font-family:var(--f-caps); font-size:13px; letter-spacing:.06em; cursor:pointer; transition:.13s;}
.seg button:last-child{border-right:none;}
.seg button:hover{background:var(--paper-3);}
.seg button.on{background:var(--emerald); color:var(--paper);}
.switch-row{display:flex; align-items:center; justify-content:space-between; padding:2px 0 16px;}
.switch-row span{font-size:16px;}
.switch{width:52px; height:26px; background:var(--emerald); border:1px solid var(--emerald-dk); position:relative; cursor:pointer;
  box-shadow:inset 0 0 0 2px var(--emerald);}
.switch i{position:absolute; top:2px; right:2px; width:20px; height:20px; background:var(--paper); border:1px solid var(--emerald-dk);}
.rooms .room{display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--line);
  background:rgba(255,253,245,.6); box-shadow:inset 0 0 0 2px var(--paper); transition:.13s;}
.rooms .room + .room{margin-top:10px;}
.rooms .room:hover{box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--gold);}
.room .rn{font-family:var(--f-display); font-weight:700; font-size:16px;}
.room .rh{font-size:13px; color:var(--ink-soft); font-style:italic;}
.room .cnt{margin-left:auto; font-family:var(--f-caps); font-size:14px; color:var(--ink-soft); letter-spacing:.05em;}
.room .cnt b{color:var(--emerald); font-size:16px;}
.room .btn{padding:9px 20px; font-size:12px;}
.tokens-pick{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; padding-top:4px;}
.tk{width:60px; height:60px; border-radius:50%; font-size:26px; display:flex; align-items:center; justify-content:center;
  background:var(--paper); border:2px solid var(--line); box-shadow:inset 0 0 0 2px var(--paper); cursor:pointer; transition:.16s;}
.tk:hover{transform:translateY(-3px); border-color:var(--gold);}
.tk.sel{border-color:var(--emerald); box-shadow:inset 0 0 0 2px var(--paper), 0 0 0 3px rgba(21,86,61,.2); transform:scale(1.06);}

/* ===================================================================
   КАРТОЧКА СОБСТВЕННОСТИ (сертификат акции)
   =================================================================== */
.card-stage{display:flex; gap:32px; justify-content:center; align-items:flex-start; padding-top:16px; flex-wrap:wrap;}
.cert{width:342px; background:var(--paper); border:2px solid var(--ink);
  box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--line), var(--shadow); position:relative;}
.cert .band-top{height:8px; background:var(--cg);}
.cert .cert-in{border:1px solid var(--line); margin:8px; padding:0;}
.cert .cert-head{text-align:center; padding:18px 16px 14px; border-bottom:1px solid var(--line); position:relative;}
.cert .pos{position:absolute; top:8px; right:12px; font-family:var(--f-caps); font-size:10px; color:var(--ink-soft); letter-spacing:.1em;}
.cert .certlbl{font-family:var(--f-caps); font-size:9px; letter-spacing:.34em; color:var(--oxblood); text-transform:uppercase;}
.cert .logo-lg{width:72px; height:72px; margin:10px auto 8px;}
.cert .ttl{font-family:var(--f-display); font-weight:900; font-size:26px; letter-spacing:.01em; color:var(--ink);}
.cert .grp{font-family:var(--f-caps); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px;}
.cert table{width:100%; border-collapse:collapse; font-size:14px;}
.cert td{padding:8px 18px; border-bottom:1px dotted var(--line-soft);}
.cert td:last-child{text-align:right; font-family:var(--f-caps); font-weight:600; letter-spacing:.03em;}
.cert tr.hl td{background:rgba(169,129,47,.14); color:var(--oxblood);}
.cert .foot{display:flex; gap:10px; padding:16px;}
.cert .foot .btn{flex:1; padding:12px 6px; font-size:12px;}
.cert-note{max-width:320px; color:var(--ink-2); font-size:15px; line-height:1.6; padding-top:8px;}
.cert-note h4{font-family:var(--f-display); font-size:18px; margin-bottom:8px; color:var(--emerald);}
.cert-note b{color:var(--ink);}

/* ===================================================================
   БРЕНД-КИТ
   =================================================================== */
.brands{max-width:1120px; margin:0 auto;}
.brands-intro{background:linear-gradient(180deg, var(--paper), var(--paper-2)); border:1px solid var(--ink);
  box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--line-soft); padding:22px 26px; margin-bottom:22px;}
.brands-intro h2{font-family:var(--f-display); font-weight:900; font-size:26px; color:var(--emerald); margin-bottom:8px;}
.brands-intro p{font-size:15.5px; line-height:1.65; color:var(--ink-2); max-width:70ch;}
.brands-intro code{font-family:var(--f-caps); background:var(--paper-3); padding:1px 7px; border:1px solid var(--line-soft); letter-spacing:.03em;}
.brand-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(196px,1fr)); gap:16px;}
.brand-card{background:var(--paper); border:1px solid var(--ink); box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--line-soft);
  padding:16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;}
.brand-card .band-mini{height:5px; width:100%; background:var(--cg); margin-bottom:8px;}
.brand-card .bl{width:72px; height:72px; margin-bottom:6px;}
.brand-card .bn{font-family:var(--f-display); font-weight:700; font-size:18px;}
.brand-card .bhint{font-size:13px; color:var(--ink-soft); font-style:italic;}
.brand-card .bmeta{font-family:var(--f-caps); font-size:10px; letter-spacing:.1em; color:var(--emerald); text-transform:uppercase; margin-top:3px;}

/* ===================================================================
   ДИЗАЙН-СИСТЕМА
   =================================================================== */
.ds{max-width:1080px; margin:0 auto; display:flex; flex-direction:column; gap:22px;}
.ds .panel h2{font-family:var(--f-display); font-weight:900; font-size:20px; color:var(--emerald); margin-bottom:14px;
  padding-bottom:8px; border-bottom:1px solid var(--line);}
.swatches{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:12px;}
.sw{border:1px solid var(--ink); box-shadow:inset 0 0 0 2px var(--paper); background:var(--paper);}
.sw .c{height:56px; border-bottom:1px solid var(--line);}
.sw .m{padding:8px 10px;}
.sw .m b{display:block; font-size:13px; font-family:var(--f-display); font-weight:700;}
.sw .m span{font-family:var(--f-caps); font-size:11px; color:var(--ink-soft); letter-spacing:.04em;}
.type-demo .t1{font-family:var(--f-display); font-weight:900; font-size:34px; color:var(--emerald);}
.type-demo .t1 i{color:var(--oxblood);}
.type-demo .t2{font-family:var(--f-display); font-weight:700; font-size:20px; margin-top:10px;}
.type-demo .t3{font-family:var(--f-body); font-size:16px; margin-top:10px;}
.type-demo .t4{font-family:var(--f-caps); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--oxblood); margin-top:10px;}
.comp-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}

/* ===================================================================
   КНОПКИ АВТОРИЗАЦИИ В МАСТХЕДЕ
   =================================================================== */
.topbar{flex-wrap:wrap; row-gap:10px;}
.auth-actions{display:flex; gap:8px;}
.auth-actions .btn{padding:9px 15px; font-size:12px;}
.lang-switch{display:flex; border:1px solid var(--ink); box-shadow:inset 0 0 0 2px var(--paper); align-self:center;}
.lang-switch button{font-family:var(--f-caps); font-size:12px; font-weight:500; letter-spacing:.08em;
  padding:8px 12px; border:none; border-right:1px solid var(--line-soft); background:transparent;
  color:var(--ink-2); cursor:pointer; transition:.13s;}
.lang-switch button:last-child{border-right:none;}
.lang-switch button:hover{background:var(--paper-3);}
.lang-switch button.on{background:var(--emerald); color:var(--paper);}

/* ===================================================================
   ГЛАВНАЯ — «БИРЖЕВОЙ ВЕСТНИК» (газетная вёрстка)
   =================================================================== */
.home{max-width:1140px; margin:0 auto;}
.gazette{background:linear-gradient(180deg, var(--paper), var(--paper-2)); border:2px solid var(--ink);
  box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--gold), inset 0 0 0 5px var(--ink), var(--shadow);
  padding:26px 32px 30px;}
.gz-masthead{text-align:center; border-bottom:3px double var(--ink); padding-bottom:14px; margin-bottom:20px;}
.gz-topline{display:flex; justify-content:space-between; font-family:var(--f-caps); font-size:11px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft);}
.gz-title{font-family:var(--f-display); font-weight:900; font-size:56px; color:var(--emerald); line-height:1;
  margin:8px 0 5px; letter-spacing:.02em;}
.gz-sub{font-style:italic; color:var(--ink-soft); font-size:15px;}
.gz-hero{display:grid; grid-template-columns:1.7fr 1fr; gap:26px; padding:4px 0 22px; border-bottom:1px solid var(--line);}
.gz-hero-main .kicker{font-family:var(--f-caps); color:var(--oxblood); letter-spacing:.2em; text-transform:uppercase; font-size:12px;}
.gz-hero-main h1{font-family:var(--f-display); font-weight:900; font-size:42px; line-height:1.05; margin:8px 0 14px;}
.gz-hero-main .lede{font-size:17px; line-height:1.6; color:var(--ink-2); max-width:54ch;
  border-left:3px solid var(--gold); padding-left:15px;}
.gz-cta{display:flex; gap:12px; margin:20px 0 6px; flex-wrap:wrap;}
.gz-cta .btn{padding:14px 24px; font-size:14px;}
.gz-stats{display:flex; gap:30px; margin-top:14px; border-top:1px solid var(--line); padding-top:16px;}
.gz-stats div{display:flex; flex-direction:column;}
.gz-stats b{font-family:var(--f-display); font-weight:900; font-size:27px; color:var(--emerald); line-height:1;}
.gz-stats span{font-family:var(--f-caps); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px;}
.gz-hero-side{border-left:1px solid var(--line); padding-left:26px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; text-align:center;}
.gz-hero-side .gz-crest{width:124px; height:124px;}
.gz-quote{font-family:var(--f-display); font-style:italic; font-size:20px; color:var(--ink-2); line-height:1.4;}
.gz-quote small{display:block; font-style:normal; font-family:var(--f-caps); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:8px;}
.gz-columns{display:grid; grid-template-columns:repeat(3,1fr); padding-top:20px;}
.gz-col{padding:0 22px; border-right:1px solid var(--line);}
.gz-col:first-child{padding-left:0;}
.gz-col:last-child{border-right:none; padding-right:0;}
.gz-col h3{font-family:var(--f-display); font-weight:900; font-size:19px; color:var(--emerald); margin-bottom:13px;
  padding-bottom:8px; border-bottom:2px solid var(--ink);}
.gz-col ol, .gz-col ul{list-style:none; display:flex; flex-direction:column; gap:11px;}
.gz-col ol{counter-reset:s;}
.gz-col ol li{counter-increment:s; display:flex; gap:11px; font-size:15px; line-height:1.4;}
.gz-col ol li::before{content:counter(s); font-family:var(--f-display); font-weight:900; color:var(--oxblood); font-size:19px; line-height:1.1;}
.gz-col .feat li{font-size:15px; line-height:1.45; padding:8px 0; border-bottom:1px dotted var(--line-soft);}
.gz-col .feat li:last-child{border-bottom:none;}
.gz-board-list .q{display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px dotted var(--line-soft); font-size:14px;}
.gz-board-list .q:last-child{border-bottom:none;}
.gz-board-list .ql{width:24px; height:24px; flex:0 0 auto;}
.gz-board-list .ql svg{width:100%; height:100%; display:block;}
.gz-board-list .qn{flex:1; font-weight:600;}
.gz-board-list .qp{font-family:var(--f-caps); color:var(--ink-2); letter-spacing:.03em;}
.gz-board-list .qd{font-family:var(--f-caps); font-size:12.5px; min-width:58px; text-align:right; letter-spacing:.02em;}
.gz-board-list .qd.up{color:var(--emerald-lt);}
.gz-board-list .qd.dn{color:var(--oxblood);}
.gz-footer{text-align:center; font-family:var(--f-caps); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:20px; padding-top:14px; border-top:3px double var(--ink);}

/* ===================================================================
   ВХОД / РЕГИСТРАЦИЯ
   =================================================================== */
.auth{max-width:470px; margin:16px auto 0;}
.auth-card{background:linear-gradient(180deg, var(--paper), var(--paper-2)); border:2px solid var(--ink);
  box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--gold), inset 0 0 0 5px var(--ink), var(--shadow);
  padding:30px 32px 26px; text-align:center;}
.auth-crest{width:74px; height:74px; margin:0 auto 8px;}
.auth-title{font-family:var(--f-display); font-weight:900; font-size:28px; color:var(--emerald); line-height:1;}
.auth-sub{font-style:italic; color:var(--ink-soft); margin-top:6px; margin-bottom:22px;}
.auth-form{text-align:left; display:flex; flex-direction:column; gap:15px;}
.auth-form .field{margin:0;}
/* пароль: рамка на обёртке, инпут внутри «голый», кнопка «показать» по центру */
.pw{display:flex; align-items:stretch; border:1px solid var(--ink); box-shadow:inset 0 0 0 2px var(--paper); background:#fffdf5;}
.pw:focus-within{box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--gold);}
.pw input{border:none !important; box-shadow:none !important; flex:1; min-width:0; background:transparent !important;}
.pw-toggle{border:none; background:transparent; border-left:1px solid var(--line-soft); padding:0 13px; cursor:pointer;
  display:flex; align-items:center; font-family:var(--f-caps); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.pw-toggle:hover{color:var(--emerald);}
.err{color:var(--oxblood); font-size:13px; margin-top:4px; min-height:1px;}
.pw-strength{display:flex; align-items:center; gap:11px; margin-top:9px;}
.pw-strength .bar{flex:1; height:8px; background:var(--paper-3); border:1px solid var(--line); overflow:hidden;}
.pw-strength .bar i{display:block; height:100%; width:0; background:var(--oxblood); transition:width .2s, background .2s;}
.pw-strength span{font-family:var(--f-caps); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); min-width:60px; text-align:right;}
.auth-row{display:flex; align-items:center; justify-content:space-between; font-size:14px; gap:10px;}
.chk{display:flex; align-items:center; gap:9px; cursor:pointer; line-height:1.3;}
.chk input{width:16px; height:16px; accent-color:var(--emerald); flex:0 0 auto;}
.link{color:var(--emerald); text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
.link:hover{color:var(--oxblood);}
.auth-or{display:flex; align-items:center; gap:13px; color:var(--ink-soft); margin:20px 0;
  font-family:var(--f-caps); font-size:12px; letter-spacing:.2em; text-transform:uppercase;}
.auth-or::before, .auth-or::after{content:''; flex:1; height:1px; background:var(--line);}
.auth-social{display:flex; flex-direction:column; gap:9px;}
.auth-social .btn{width:100%; display:flex; align-items:center; justify-content:center; gap:11px;}
.mini-logo{width:20px; height:20px; display:inline-block; flex:0 0 auto;}
.mini-logo svg{width:100%; height:100%; display:block;}
.auth-alt{margin-top:20px; font-size:15px; color:var(--ink-2);}
.auth-terms{font-size:12.5px; color:var(--ink-soft); line-height:1.4;}

/* ===================================================================
   ОБОЛОЧКА v4: шапка после входа, верификация, демо-почта,
   Goggle-модалка, тосты, реальное лобби
   =================================================================== */
.hidden{display:none !important;}

/* --- чип пользователя и почта в мастхеде --- */
.user-chip{display:flex; align-items:center; gap:8px; padding:8px 14px; background:var(--paper);
  border:1px solid var(--ink); box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--line-soft);
  font-family:var(--f-display); font-weight:700; font-size:15px; white-space:nowrap;}
.mail-btn{position:relative; font-size:16px; padding:8px 13px !important; line-height:1;}
.mail-badge{position:absolute; top:-8px; right:-8px; min-width:19px; height:19px; border-radius:50%;
  background:var(--oxblood); color:var(--paper); font-family:var(--f-caps); font-size:11px; font-weight:600;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
  border:1.5px solid var(--paper); box-shadow:0 1px 3px rgba(0,0,0,.35);}

/* --- клетки кода верификации --- */
.code-cells{display:flex; gap:10px; justify-content:center; margin:20px 0 10px;}
.code-cell{width:50px; height:62px; text-align:center; font-family:var(--f-display); font-weight:900;
  font-size:30px; color:var(--emerald); background:#fffdf5; border:1px solid var(--ink);
  box-shadow:inset 0 0 0 2px var(--paper); outline:none; padding:0; caret-color:var(--gold);}
.code-cell:focus{box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--gold);}
.auth-hint{font-size:13.5px; color:var(--ink-soft); font-style:italic; margin-bottom:10px;}
.verify-aux{display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:18px; font-size:14.5px; color:var(--ink-2);}
.link.disabled{opacity:.45; pointer-events:none; text-decoration:none;}

/* --- модальные окна --- */
.modal-ovl{position:fixed; inset:0; z-index:60; background:rgba(24,18,8,.58); display:flex;
  align-items:center; justify-content:center; padding:20px; overflow-y:auto;}

/* --- почтовое отделение: винтажные телеграммы --- */
.mail-box{width:440px; max-width:100%; max-height:84vh; overflow-y:auto; background:var(--paper);
  border:2px solid var(--ink); box-shadow:inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--gold),
  inset 0 0 0 5px var(--ink), var(--shadow); padding:24px 26px;}
.mail-head{font-family:var(--f-display); font-weight:900; font-size:23px; color:var(--emerald);
  display:flex; align-items:center; gap:9px; justify-content:center; text-align:center;}
.mail-demo{font-family:var(--f-caps); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--oxblood); border:1px solid currentColor; padding:2px 7px; align-self:center;}
.mail-note{text-align:center; font-style:italic; font-size:13px; color:var(--ink-soft);
  margin:7px 0 4px; padding-bottom:10px; border-bottom:3px double var(--ink);}
.tg{border:1px dashed var(--ink); background:#fffdf5; padding:14px 16px 11px; margin-top:14px;
  box-shadow:inset 0 0 0 3px var(--paper);}
.tg-row{display:flex; gap:8px; align-items:baseline; font-family:var(--f-caps); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); padding:2px 0;}
.tg-row b{color:var(--ink); font-family:var(--f-body); font-size:14px; letter-spacing:.02em;
  text-transform:none; overflow-wrap:anywhere;}
.tg-code{font-family:var(--f-display); font-weight:900; font-size:36px; letter-spacing:.35em;
  padding-left:.35em; color:var(--oxblood); text-align:center; margin:10px 0 2px;
  text-shadow:0 1px 0 rgba(255,255,255,.6);}
.tg-cap{text-align:center; font-family:var(--f-caps); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px;}
.mail-empty{font-style:italic; color:var(--ink-soft); text-align:center; padding:18px 0 6px;}

/* --- пародийный аккаунт-чузер Goggle (нарочно «чужой» стиль) --- */
.goggle-card{width:384px; max-width:100%; background:#fff; border-radius:10px;
  box-shadow:0 24px 64px rgba(0,0,0,.45); padding:30px 34px 24px; text-align:center;
  font-family:Arial, 'Segoe UI', sans-serif; color:#3c4043;}
.goggle-word{font-size:36px; font-weight:700; letter-spacing:-1px; user-select:none;}
.goggle-word span:nth-child(1){color:#4285f4;} .goggle-word span:nth-child(2){color:#ea4335;}
.goggle-word span:nth-child(3){color:#fbbc05;} .goggle-word span:nth-child(4){color:#4285f4;}
.goggle-word span:nth-child(5){color:#34a853;} .goggle-word span:nth-child(6){color:#ea4335;}
.goggle-sub{font-size:15px; margin:6px 0 18px;}
.goggle-accs{border:1px solid #dadce0; border-radius:8px; overflow:hidden; text-align:left;}
.goggle-acc{display:flex; width:100%; align-items:center; gap:13px; padding:11px 16px; border:none;
  background:#fff; cursor:pointer; font:inherit; font-size:14px; color:#3c4043; text-align:left; transition:.12s;}
.goggle-acc + .goggle-acc{border-top:1px solid #e8eaed;}
.goggle-acc:hover{background:#f8f9fa;}
.goggle-ava{width:36px; height:36px; border-radius:50%; flex:0 0 auto; font-size:17px;
  display:flex; align-items:center; justify-content:center; color:#fff;}
.ga-txt{display:flex; flex-direction:column; line-height:1.25; min-width:0;}
.ga-txt b{font-weight:600;}
.ga-txt small{color:#80868b; font-size:12px;}
.goggle-or{display:flex; align-items:center; gap:12px; color:#80868b; font-size:12.5px; margin:16px 0 12px;}
.goggle-or::before, .goggle-or::after{content:''; flex:1; height:1px; background:#e8eaed;}
.goggle-input{width:100%; padding:12px 14px; border:1px solid #dadce0; border-radius:6px;
  font:inherit; font-size:15px; color:#202124; outline:none; transition:.12s;}
.goggle-input:focus{border-color:#1a73e8; box-shadow:0 0 0 1px #1a73e8;}
.goggle-err{color:#d93025; font-size:12.5px; text-align:left; margin-top:5px; min-height:16px;}
.goggle-go{width:100%; margin-top:8px; background:#1a73e8; color:#fff; border:none; border-radius:6px;
  padding:12px; font:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:.12s;}
.goggle-go:hover{background:#1765cc; box-shadow:0 2px 6px rgba(26,115,232,.35);}
.goggle-note{margin-top:14px; font-size:11.5px; color:#80868b; line-height:1.4;}

/* --- тосты (винтажная плашка) --- */
#toasts{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:90;
  display:flex; flex-direction:column-reverse; gap:10px; align-items:center; pointer-events:none;}
.toast{background:var(--ink); color:var(--paper); font-family:var(--f-caps); font-size:13px;
  letter-spacing:.08em; padding:12px 24px; border:1px solid var(--gold);
  box-shadow:inset 0 0 0 2px var(--ink), inset 0 0 0 3px rgba(169,129,47,.5), 0 8px 24px rgba(0,0,0,.4);
  opacity:0; transform:translateY(10px); transition:.3s; max-width:min(560px, 86vw); text-align:center;}
.toast.show{opacity:1; transform:none;}

/* --- лобби: реальный список комнат и вход по коду --- */
.rooms-empty{font-style:italic; color:var(--ink-soft); padding:12px 4px;}
.join-code{display:flex; gap:9px;}
.join-code input{flex:1; min-width:0;}
.join-code .btn{padding:10px 18px; font-size:12px; flex:0 0 auto;}

/* переключатель «приватная»: по умолчанию выключен, .on — включён */
.switch{background:var(--paper-3); border-color:var(--line); box-shadow:inset 0 0 0 2px var(--paper-3);}
.switch i{right:auto; left:2px; border-color:var(--ink-soft);}
.switch.on{background:var(--emerald); border-color:var(--emerald-dk); box-shadow:inset 0 0 0 2px var(--emerald);}
.switch.on i{left:auto; right:2px; border-color:var(--emerald-dk);}

/* ===================================================================
   АДАПТИВНОСТЬ (мобильные и узкие мониторы)
   =================================================================== */
@media (max-width: 1000px){
  .topbar{ padding:10px 12px; gap:10px; }
  .tabs{ order:5; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tab-btn{ padding:8px 12px; font-size:12px; white-space:nowrap; }
  .tab-page{ padding:16px 10px 44px; }
  .gz-hero{ grid-template-columns:1fr; }
  .gz-hero-side{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:18px; }
  .gz-columns{ grid-template-columns:1fr; }
  .gz-col{ border-right:none; padding:0 0 18px; }
  .gz-title{ font-size:34px; }
  .gz-topline{ flex-wrap:wrap; gap:4px 14px; justify-content:center; }
  .gz-hero-main h1{ font-size:30px; }
  .gz-stats{ flex-wrap:wrap; gap:16px 22px; }
  .gazette{ padding:18px 14px 22px; }
  .hero h1{ font-size:38px; }
  .lobby-grid{ grid-template-columns:1fr; }
  .auth{ max-width:96vw; }
  .auth-card{ padding:22px 16px; }
  .card-stage{ gap:18px; }
}
@media (max-width: 480px){
  .gz-title{ font-size:26px; }
  .gz-hero-main h1{ font-size:24px; }
  .hero h1{ font-size:30px; }
  .brand .word{ font-size:19px; }
  .room-chip{ display:none; }
}