/* Everything outside the table: sign-in, home, open tables, a table by password, a new table,
   the waiting room, the profile and the bottom bar. One layout; a look changes colour, type and the shape of each block. */

/* ---------- frame: a fixed shell, every screen scrolls inside itself ---------- */
.phone{height:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden}
.screen{--pad:20px;flex:1 1 0;min-height:0;min-width:0;box-sizing:border-box;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.netbar{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 12px;padding:6px 12px;background:var(--foe);color:var(--on-foe);font-size:13px;font-weight:700;line-height:1.35;text-align:center}
.netbar .lnk{min-height:32px;color:inherit;font-weight:700}

/* ---------- small parts ---------- */
.muted{color:var(--muted)}
.note{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.err{margin:0;min-height:1.3em;font-size:13px;font-weight:600;line-height:1.3;color:var(--bad)}
.err:empty{display:none}
.flabel{margin:0;font-family:var(--f-body);font-size:12px;font-weight:600;line-height:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px}
.lnk{display:inline;padding:0;border:0;background:none;color:var(--hi);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.foot{margin:0;font-size:12px;line-height:1.5;text-align:center;color:var(--muted)}
.foot a{color:inherit}
svg.li{stroke-width:var(--ico)}
[data-theme="adras"] svg.li.sq{stroke-width:2.4;stroke-linecap:square;stroke-linejoin:miter}
[data-theme="topchan"] svg.li.sq{stroke-width:2.4}
.txt{flex:1;min-width:0;min-height:54px;box-sizing:border-box;padding:0 14px;border:var(--bw) solid var(--line-strong);border-radius:var(--r-ctl);background:var(--surface);color:var(--text);font:inherit;font-size:16px;font-variant-numeric:tabular-nums}
.txt::placeholder{color:var(--muted);opacity:1}

/* avatar: a photo or the first letter of the name */
.ava{flex:none;position:relative;overflow:hidden;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;background:var(--mine);color:var(--on-mine);
  font-family:var(--f-display);font-weight:var(--w-display);font-feature-settings:"lnum" 1;line-height:1}
.ava img{width:100%;height:100%;object-fit:cover;display:block}
.ava.t1{background:var(--foe);color:var(--on-foe)}
[data-theme="ganch"] .ava{background:var(--surface);color:var(--accent);border:1px solid var(--accent)}
[data-theme="ganch"] .ava.t0{background:var(--mine);color:var(--on-mine)}
[data-theme="ganch"] .ava.t1{background:var(--surface);color:var(--text);border-color:var(--text)}
[data-theme="topchan"] .ava{background:#FFFBF2;color:#27211C}
[data-theme="topchan"] .ava.t0{background:var(--mine);color:var(--on-mine)}
[data-theme="topchan"] .ava.t1{background:var(--foe);color:var(--on-foe)}

/* a coin: the mark in front of every sum */
.coin{display:inline-block;flex:none;width:.66em;height:.66em;margin:0 .14em;background:var(--accent);transform:rotate(45deg)}
[data-theme="ganch"] .coin{width:1.15em;height:1.15em;margin:0;transform:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.2' fill='none' stroke='%23C9A55C' stroke-width='1.4'/%3E%3Cpath d='M10 6 12.8 10 10 14 7.2 10Z' fill='%23C9A55C'/%3E%3C/svg%3E") center/contain no-repeat}
[data-theme="topchan"] .coin{width:1.15em;height:1.15em;margin:0;transform:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='%23FFFBF2' stroke='%2327211C' stroke-width='2'/%3E%3Ccircle cx='10' cy='10' r='2.4' fill='%2327211C'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- the top of a screen that has a way back ---------- */
.shead{flex:none;display:flex;align-items:center;gap:6px;margin-left:-12px;padding:16px 0 8px}
.goback{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-ctl);background:none;color:var(--text)}
.goback svg{width:24px;height:24px}
.shead h1{flex:1;min-width:0;line-height:1.2}
.sh-n{flex:none;font-family:var(--f-display);font-weight:var(--w-head);font-size:var(--head-size);line-height:1.2;color:var(--accent);font-feature-settings:"lnum" 1;font-variant-numeric:tabular-nums}
.sh-n:empty{display:none}
/* a section of the bottom bar: a larger title and no way back */
.screen .shead.sec{margin-left:0;min-height:44px;padding:20px 0 12px}
.shead.sec h1{font-size:calc(var(--head-size) + 8px)}

/* ---------- list rows: home, profile ---------- */
.mrows{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:10px}
.mrow{flex:none;display:flex;align-items:center;gap:14px;min-height:58px;box-sizing:border-box;padding:6px 0;border:0;border-bottom:var(--div);background:none;color:var(--text);text-align:left}
.mrow:last-child{border-bottom:0}
.mr-i{flex:none;width:24px;height:24px;color:var(--accent)}
.mr-t{flex:1;min-width:0;font-size:16px;font-weight:600;line-height:1.25}
.mr-v{flex:none;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mr-go{flex:none;width:20px;height:20px;color:var(--muted)}
.mr-i svg,.mr-go svg,.hub-i svg{width:100%;height:100%}
.mr-v:not(:empty) + .mr-go{display:none}

/* ---------- the bottom bar ---------- */
.tabs{flex:none;display:flex;height:70px;background:var(--bg-deep);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;border:0;background:none;color:var(--muted);font-size:12px;font-weight:600;line-height:16px}
.tb-i{position:relative;display:grid;place-items:center;height:24px;box-sizing:border-box}
.tab svg{width:24px;height:24px}
.tab[aria-current="page"]{color:var(--accent);font-weight:700}
.tb-n{position:absolute;left:calc(50% + 6px);top:-5px;min-width:18px;height:18px;box-sizing:border-box;padding:0 4px;display:grid;place-items:center;border-radius:9px;background:var(--foe);color:var(--on-foe);font-size:11px;font-weight:700;line-height:1}

/* ---------- home ---------- */
.hprof{flex:none;display:flex;align-items:center;gap:12px;padding:24px 0 18px}
.hp-id{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:0;border:0;background:none;color:inherit;text-align:left}
.hp-id .ava{width:56px;height:56px;font-size:24px}
.hp-tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.pname{font-family:var(--f-display);font-weight:var(--w-head);font-feature-settings:"lnum" 1;font-size:20px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pid{font-size:13px;line-height:18px;color:var(--muted)}
.wallet{border:0;padding:0;background:none;color:inherit;flex:none;display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

.quick{flex:none;position:relative;z-index:0;box-sizing:border-box;border:0;padding:0;background:none;color:inherit;text-align:left}
.q-k{display:block;font-size:13px;font-weight:700;line-height:18px;letter-spacing:.12em;text-transform:uppercase}
.q-t{display:block;font-family:var(--f-display);font-weight:var(--w-display);text-transform:var(--caps);font-feature-settings:"lnum" 1}
.q-go > *{display:none}
/* the hero and the two tiles are as tall as the look wants, and give way before the screen has to scroll */
.duo{flex:0 1 clamp(124px,18.7vh,158px);min-height:112px;display:flex}
.hub{flex:1 1 0;min-width:0;position:relative;z-index:0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:18px 20px;border:0;text-align:left}
.hub-t{font-size:16px;font-weight:700;line-height:20px}
.hub-n{font-family:var(--f-display);font-weight:var(--w-display);font-size:54px;line-height:50px;font-feature-settings:"lnum" 1;font-variant-numeric:tabular-nums}
.hub-i{width:44px;height:44px}
.quick:focus-visible,.hub:focus-visible,.cta:focus-visible,.trow:focus-visible{outline:3px solid currentColor;outline-offset:-6px}
.quick:active,.hub:active,.cta:active{filter:brightness(.93)}
.mrow:active,.trow:active,.tab:active,.fchip:active,.seg button:active,.opt:active,.goback:active,.hp-id:active{opacity:.7}
@media (max-height:700px){
  .hprof{padding-block:12px 10px}
  .hub{padding:12px 16px}
  .hub-n{font-size:44px;line-height:42px}
  .duo{min-height:106px}
  .mrows{padding-block:4px}
  .mrow{min-height:48px}
  .wseats li{min-height:54px}
  .wnote{padding-block:10px}
  .wacts{gap:8px;padding-bottom:14px}
  .wpair{gap:8px}
  .wbox{padding:10px 14px}
  .wbox b{font-size:28px;line-height:32px}
}

/* ---------- open tables ---------- */
.fchips{flex:none;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--pad)*-1);padding:4px var(--pad) 14px}
.fchips::-webkit-scrollbar{display:none}
.fchip{flex:none;height:44px;box-sizing:border-box;padding:0 14px;border:2px solid var(--line-strong);border-radius:var(--r-ctl);background:none;color:var(--text);font-size:14px;font-weight:700;white-space:nowrap}
.fchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tables{flex:none;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.trow{width:100%;display:flex;align-items:center;gap:10px;box-sizing:border-box;padding:14px var(--pad);border:0;background:none;color:var(--text);text-align:left}
.t-st{flex:none;width:76px;display:flex;flex-direction:column;gap:2px}
.t-st b{font-family:var(--f-display);font-weight:var(--w-head);font-size:20px;line-height:26px;color:var(--accent);white-space:nowrap;font-feature-settings:"lnum" 1}
.t-st b.long{font-size:17px}
.t-st small{font-size:12px;line-height:14px;color:var(--muted)}
.t-in{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.t-in b{font-size:15px;font-weight:700;line-height:20px}
.t-in small{font-size:13px;line-height:18px;color:var(--muted)}
.t-who{display:flex;min-width:0;font-size:13px;line-height:18px}
.t-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-fr{flex:none;white-space:nowrap}
.t-nm:not(:empty) + .t-fr::before{content:" · ";white-space:pre}
.t-go{flex:none;width:66px;height:44px;box-sizing:border-box;display:grid;place-items:center;border-radius:var(--r-ctl);background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:700}
.trow.cant .t-go{opacity:.4}
.empty{margin:0;padding:28px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--muted);line-height:1.45}
.empty b{font-family:var(--f-display);font-weight:var(--w-head);font-feature-settings:"lnum" 1;font-size:18px;color:var(--text)}
.empty .secondary{margin-top:10px;align-self:stretch}
/* lessons: the same rows, a number where a table has its stake; a passed lesson carries a tick */
.lrow .t-go svg{width:22px;height:22px}
.lrow.done .t-go{background:none;border:var(--bw) solid var(--line-strong);color:var(--good)}

/* the action that stays at the bottom of a screen */
.cta-bar{flex:none;position:sticky;bottom:0;z-index:4;display:flex;flex-direction:column;margin-top:auto;margin-inline:calc(var(--pad)*-1)}
.cta-bar .err{order:-1;padding:8px var(--pad);background:var(--bg);text-align:center}
.cta{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;text-align:left}
.cta svg{flex:none;width:32px;height:32px}
.cta:disabled{cursor:default}

/* ---------- a new table ---------- */
.form{flex:none;display:flex;flex-direction:column;gap:14px;padding-block:8px 18px}
.seg{display:flex}
.seg button{flex:1 1 0;min-width:0;height:50px;box-sizing:border-box;padding:0 6px;border:2px solid var(--line-strong);background:none;color:var(--text);font-size:15px;font-weight:700;line-height:1.15}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.mode-n{margin:2px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.togs{display:flex;flex-direction:column}
.opt{display:flex;align-items:center;gap:12px;min-height:60px;box-sizing:border-box;padding:8px 0;border:0;border-top:var(--div);background:none;color:var(--text);text-align:left}
.o-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.o-tx b{font-size:16px;font-weight:700;line-height:1.25}
.o-tx small{font-size:13px;line-height:18px;color:var(--muted)}
.o-mk{flex:none;position:relative;width:44px;height:44px;box-sizing:border-box;display:grid;place-items:center;border:2px solid var(--line-strong)}
.o-mk svg{width:24px;height:24px;fill:none;stroke:transparent;stroke-width:3;stroke-linecap:square}
.opt[aria-checked="true"] .o-mk{background:var(--accent);border-color:var(--accent)}
.opt[aria-checked="true"] .o-mk svg{stroke:var(--on-accent)}
.pwrow{display:flex;padding-bottom:10px}
.st-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.st-big{display:flex;align-items:center;gap:12px}
.st-step{flex:none;width:54px;height:54px;box-sizing:border-box;display:grid;place-items:center;padding:0;border:2px solid var(--line-strong);border-radius:var(--r-ctl);background:none;color:var(--text)}
.st-step svg{width:24px;height:24px}
.st-step:disabled{opacity:.3;cursor:default}
.st-val{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.st-val b{font-family:var(--f-display);font-weight:var(--w-display);font-size:38px;line-height:42px;color:var(--accent);font-feature-settings:"lnum" 1;font-variant-numeric:tabular-nums}
.st-val small{font-size:13px;color:var(--muted)}
.stakes{display:none}
.stakes button{padding:0;border:0;background:none;color:inherit;font-variant-numeric:tabular-nums;white-space:nowrap}
.stakes button:disabled{opacity:.35;cursor:default}

/* ---------- a table by password ---------- */
.pjoin{flex:none;display:flex;flex-direction:column;gap:12px;padding-block:8px 20px}
.pw{display:flex;align-items:stretch;gap:10px}
.pw .primary{flex:none;min-width:104px}
.pjoin .secondary{align-self:stretch}

/* ---------- waiting for players ---------- */
.wline{flex:none;margin:0;padding-bottom:14px;font-size:14px;line-height:1.45;color:var(--muted)}
.wline b{color:var(--text);font-weight:700}
.wbox{flex:none;display:flex;flex-direction:column;gap:2px;margin-bottom:12px;padding:14px 16px;background:var(--surface);border:var(--bw) solid var(--line-strong);border-radius:var(--r-panel)}
.wbox span{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.wbox b{font-family:var(--f-display);font-weight:var(--w-display);font-size:34px;line-height:40px;letter-spacing:.14em;color:var(--hi);font-feature-settings:"lnum" 1}
.wbox small{font-size:13px;line-height:1.45;color:var(--muted)}
.wseats{flex:none;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.wseats li{display:flex;align-items:center;gap:12px;min-height:66px;border-bottom:var(--div)}
.wseats .ava{width:44px;height:44px;font-size:19px}
.ws-n{flex:1;min-width:0;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-r{flex:none;font-size:13px;color:var(--muted)}
.wseats li.free .ava{background:none;border:var(--slot);clip-path:none;border-radius:var(--r-ctl)}
.wseats li.free .ws-n{font-weight:400;color:var(--muted)}
.wnote{flex:none;margin:0;padding-block:14px;font-size:14px;line-height:1.45;color:var(--muted)}
.wacts{flex:none;display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-bottom:20px}
.wpair{display:flex;gap:10px}
.wpair .secondary{flex:1 1 0;min-width:0;padding-inline:8px}

/* ---------- friends ---------- */
.idcard{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px 16px;background:var(--surface);border:var(--bw) solid var(--line-strong);border-radius:var(--r-panel)}
.idcard span{font-size:12px;font-weight:600;line-height:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.id-tx{flex:1 1 auto;display:flex;flex-direction:column}
.idcard b{font-family:var(--f-display);font-weight:var(--w-display);font-size:30px;line-height:36px;letter-spacing:.06em;color:var(--hi);font-feature-settings:"lnum" 1;white-space:nowrap}
.idcard .secondary{flex:1 1 auto;min-height:48px;padding:6px 14px}
.search{flex:none;display:flex;gap:10px;margin-top:12px}
.search .primary{flex:none;min-width:96px}
.flists,.rbody{flex:none;display:flex;flex-direction:column;padding-bottom:20px}
.flists .flabel,.rbody .flabel{margin:22px 0 4px}
.frows,.sheet .frows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.frow{display:flex;align-items:center;gap:8px;min-height:66px;border-bottom:var(--div)}
.fr-id{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:8px 0;border:0;background:none;color:inherit;text-align:left}
.fr-id .ava{width:44px;height:44px;font-size:19px}
.fr-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.fr-tx b{font-size:16px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-tx small{font-size:13px;line-height:18px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-tx .on{color:var(--good);font-weight:600}
.act{flex:none;min-width:66px;height:44px;box-sizing:border-box;display:grid;place-items:center;padding:0 12px;border:0;border-radius:var(--r-ctl);background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:700;white-space:nowrap}
.act.alt{background:none;border:var(--bw) solid var(--line-strong);color:var(--text)}
.act.ico{min-width:44px;width:44px;padding:0}
.act.warn{background:var(--foe);color:var(--on-foe);border-color:var(--foe);white-space:normal;line-height:1.15;max-width:132px;font-size:13px}   /* «Сдаться −100 и сесть»: this press costs the stake */
.act svg{width:20px;height:20px}
.fr-id:active,.act:active{opacity:.7}

/* ---------- rewards ---------- */
.medals{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.medals li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 2px 10px;text-align:center;border:var(--bw) solid var(--line);border-radius:var(--r-ctl);color:var(--muted)}
.medals .mdl{width:32px;height:32px;margin:0}
.medals li:not(.done) .mdl{fill:var(--line-strong)}
.medals b{font-family:var(--f-display);font-weight:var(--w-head);font-size:15px;line-height:18px;font-feature-settings:"lnum" 1;white-space:nowrap}
.medals li.done{color:var(--text);border-color:var(--accent)}
.rbody .note{margin-top:10px}
.rws{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rws li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:12px 0;border-bottom:var(--div)}
.rw-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.rw-tx b{font-size:16px;font-weight:600;line-height:1.25}
.rw-tx small{font-size:13px;line-height:18px;color:var(--muted)}
.rw-c{display:flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:var(--w-head);font-size:17px;line-height:22px;color:var(--hi);white-space:nowrap;font-feature-settings:"lnum" 1;font-variant-numeric:tabular-nums}
.rw-c svg{width:18px;height:18px}
.rws li.done .rw-c{font-family:var(--f-body);font-size:13px;font-weight:600;color:var(--good)}
.rws .bar{grid-column:1/-1;height:4px;background:var(--line);overflow:hidden}
.rws .bar i{display:block;height:100%;background:var(--accent)}

/* ---------- profile ---------- */
.pcard{flex:none;display:flex;align-items:center;gap:14px;padding:24px 0 18px}
.pcard .ava{width:72px;height:72px;font-size:30px}
.pc-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pcard .ghost{flex:none;min-height:44px}
.pstats{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.pstats div{display:flex;flex-direction:column-reverse;gap:2px;padding:12px 4px;text-align:center;border-left:var(--div)}
.pstats div:first-child{border-left:0}
.pstats dd{margin:0;font-family:var(--f-display);font-weight:var(--w-display);font-size:24px;line-height:28px;font-feature-settings:"lnum" 1;font-variant-numeric:tabular-nums}
.pstats dt{font-size:12px;line-height:15px;color:var(--muted)}
#scr-profile .mrows{justify-content:flex-start}
#scr-profile .foot{padding-block:8px 16px}

/* ---------- sign-in ---------- */
.login{justify-content:space-between;align-items:center;gap:20px;padding-block:max(28px,7vh) 20px;text-align:center}
.lg-top{display:flex;flex-direction:column;align-items:center;gap:18px}
/* the language: in the corner of the sign-in screen, by its own name */
.login{position:relative}
.lg-lang{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:max(12px,env(safe-area-inset-right,0px));display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;background:none;color:var(--muted);font:600 13px/1 var(--f-body);letter-spacing:0;text-transform:none;cursor:pointer}
.lg-lang .li{width:18px;height:18px}
.lg-cards{display:flex;justify-content:center;--cw:min(22vw,11vh,92px);height:calc(var(--cw)*1.42 + 16px);align-items:flex-end}
.lg-cards .card{margin:0 calc(var(--cw)*-.16);transform-origin:50% 100%}
.lg-cards .card:nth-child(1){transform:rotate(-12deg)}
.lg-cards .card:nth-child(2){transform:translateY(-10px);z-index:1}
.lg-cards .card:nth-child(3){transform:rotate(12deg)}
.lg-name{display:flex;flex-direction:column;align-items:center;font-family:var(--f-display);font-weight:var(--w-display);font-size:min(64px,17vw);line-height:1;text-transform:var(--caps);letter-spacing:var(--track);color:var(--accent)}
.lg-name span{margin-top:6px;font-family:var(--f-body);font-size:13px;font-weight:600;line-height:18px;letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:var(--text)}
.lg-text{margin:0;max-width:32ch;font-size:15px;line-height:1.5}
.lg-act{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:stretch;gap:12px}
#gsiBtn{min-height:44px;display:flex;justify-content:center;color-scheme:light}
/* the app from a store: the phone's own accounts, one button each */
#gsiBtn.idps{flex-direction:column;gap:10px;color-scheme:normal}
.idp{min-height:50px;border-radius:var(--r-ctl);border:1px solid #747775;background:#fff;color:#1f1f1f;font-weight:600;font-size:17px;padding:6px 16px}
[data-theme="topchan"] .idp{border-color:#1f1f1f}
[data-theme="topchan"] .idp-apple{background:#000;color:#fff;border-color:#000}
.idp:disabled{opacity:.6}
.lg-gift{margin:0;font-size:13px;line-height:1.45;color:var(--hi)}
/* what needs no account: the lessons and a game against bots */
.lg-solo{width:100%;max-width:320px;display:flex;flex-direction:column;gap:8px}
.lg-solo > span{font-size:12px;font-weight:600;line-height:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lg-solo-b{display:flex;gap:10px}
.lg-solo-b .secondary{flex:1 1 0;min-width:0;min-height:48px;padding:6px 8px}

/* ================= Адрас: fields of colour ================= */
[data-theme="adras"] .sub{--pad:16px}
[data-theme="adras"] .shead{margin-left:-8px}
[data-theme="adras"] .quick{display:grid;grid-template:"k k" auto "t go" 1fr/minmax(0,1fr) auto;align-items:end;flex:0 1 clamp(176px,27.5vh,232px);min-height:168px;margin:0 calc(var(--pad)*-1) 10px;padding:22px 20px 20px;background:#F7B92C;color:#15174A}
[data-theme="adras"] .quick::before{content:"";position:absolute;z-index:-1;right:16px;top:16px;height:calc(100% - 100px);aspect-ratio:60/86;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 86'%3E%3Cpath fill='%23E5A313' d='M30 9 L36 17 H42 V25 H48 V35 L52 43 L48 51 V61 H42 V69 H36 L30 77 L24 69 H18 V61 H12 V51 L8 43 L12 35 V25 H18 V17 H24 Z'/%3E%3Cpath fill='%23F7B92C' d='M30 21 L34 27 H38 V35 L42 43 L38 51 V59 H34 L30 65 L26 59 H22 V51 L18 43 L22 35 V27 H26 Z'/%3E%3Cpath fill='%2315174A' d='M30 33 L36 43 L30 53 L24 43 Z'/%3E%3C/svg%3E") center/contain no-repeat}
[data-theme="adras"] .quick::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px;background:linear-gradient(135deg,#F7B92C 50%,transparent 50%) 0 0/10px 10px,linear-gradient(225deg,#F7B92C 50%,transparent 50%) 0 0/10px 10px}
[data-theme="adras"] .q-k{grid-area:k;align-self:start}
[data-theme="adras"] .q-t{grid-area:t;font-size:min(48px,12.3vw);line-height:1}
[data-theme="adras"] .q-go{grid-area:go}
[data-theme="adras"] .q-go .g-arrow{display:block;width:44px;height:44px}
[data-theme="adras"] .duo{margin:12px calc(var(--pad)*-1) 0}
[data-theme="adras"] .hub.open{background:#C4283F;color:#FFF4E0}
[data-theme="adras"] .hub.make{background:#FFF4E0;color:#15174A}
[data-theme="adras"] .tables{margin-inline:calc(var(--pad)*-1)}
[data-theme="adras"] .tables li:nth-child(odd) .trow{background:#1B1E5A}
[data-theme="adras"] .t-who{color:#E4E5F8}
[data-theme="adras"] .empty{padding-inline:var(--pad)}
[data-theme="adras"] .cta-bar{--cta:#F7B92C}
[data-theme="adras"] .cta-bar.alt{--cta:#FFF4E0}
[data-theme="adras"] .cta-bar::before{content:"";display:block;height:10px;background:linear-gradient(315deg,var(--cta) 50%,transparent 50%) 0 0/10px 10px,linear-gradient(45deg,var(--cta) 50%,transparent 50%) 0 0/10px 10px}
[data-theme="adras"] .cta{height:68px;padding:0 20px;background:var(--cta);color:#15174A;font-family:var(--f-display);font-weight:900;font-size:18px;text-transform:uppercase}
[data-theme="adras"] .cta-bar.alt .cta{height:64px;font-weight:700;font-size:16px}
[data-theme="adras"] .cta-bar.alt .cta svg{width:28px;height:28px}
[data-theme="adras"] .cta:disabled{color:rgba(21,23,74,.55)}
[data-theme="adras"] .wbox,[data-theme="adras"] .idcard{border:0;background:#FFF4E0;color:#15174A}
[data-theme="adras"] .wbox span,[data-theme="adras"] .wbox small,[data-theme="adras"] .idcard span{color:#3A3C6E}
[data-theme="adras"] .wbox b,[data-theme="adras"] .idcard b{color:#15174A}
[data-theme="adras"] .idcard .secondary{background:#15174A;border-color:#15174A;color:#FFF4E0}
[data-theme="adras"] .medals li.done{border-color:#1B1E5A;background:#1B1E5A}
[data-theme="adras"] .pstats{margin-inline:calc(var(--pad)*-1);background:#1B1E5A}
[data-theme="adras"] .pstats div{border-left:0}
[data-theme="adras"] .pstats dd{color:#F7B92C}

/* ================= Ганч: arches and a thin line ================= */
[data-theme="ganch"] .hprof{padding:22px 0 14px}
[data-theme="ganch"] .hp-id .ava{width:52px;height:52px;font-size:28px}
[data-theme="ganch"] .pname{font-size:26px}
[data-theme="ganch"] .wallet{font-weight:600}
[data-theme="ganch"] .quick{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:0 1 clamp(252px,35vh,296px);min-height:236px;padding:0 24px 22px;text-align:center}
[data-theme="ganch"] .quick::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350 296' preserveAspectRatio='none'%3E%3Cpath d='M.5 295.5V118C.5 64 96 40 175 .5 254 40 349.5 64 349.5 118V295.5Z' fill='%2316263D' stroke='%23C9A55C' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M8.5 287.5V120C8.5 73 100 50 175 11 250 50 341.5 73 341.5 120V287.5Z' fill='none' stroke='%232B3F5C' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
[data-theme="ganch"] .quick::after{content:"";order:-1;width:72px;height:72px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23C9A55C' stroke-width='.5' stroke-linejoin='round'%3E%3Cpath d='M4.2 4.2H19.8V19.8H4.2Z M12 1 23 12 12 23 1 12Z'/%3E%3Ccircle cx='12' cy='12' r='4.4'/%3E%3C/g%3E%3Cpath d='M12 9.8 13.6 12 12 14.2 10.4 12Z' fill='%23C9A55C'/%3E%3C/svg%3E") center/contain no-repeat}
[data-theme="ganch"] .q-k{margin-top:10px;font-size:12px;font-weight:600;line-height:16px;letter-spacing:.14em;color:var(--muted)}
[data-theme="ganch"] .q-t{margin-top:4px;font-size:min(40px,10.4vw);line-height:1.1}
[data-theme="ganch"] .q-t br{display:none}
[data-theme="ganch"] .q-go{align-self:stretch;margin-top:14px}
[data-theme="ganch"] .q-go .g-word{display:grid;place-items:center;height:54px;border-radius:6px;background:#C9A55C;color:#0F1B2D;font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:.12em;text-transform:uppercase}
[data-theme="ganch"] .duo{gap:12px;margin-top:14px;flex-basis:clamp(118px,17.5vh,148px)}
[data-theme="ganch"] .hub{flex-direction:column-reverse;justify-content:flex-start;align-items:center;gap:4px;padding:0 10px 16px;background:none;color:var(--text);text-align:center}
[data-theme="ganch"] .hub::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 169 148' preserveAspectRatio='none'%3E%3Cpath d='M.5 147.5V62C.5 34 46 22 84.5 .5 123 22 168.5 34 168.5 62V147.5Z' fill='none' stroke='%23C9A55C' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
[data-theme="ganch"] .hub-t{font-size:15px;font-weight:600}
[data-theme="ganch"] .hub-t br{display:none}
[data-theme="ganch"] .hub-n{font-size:36px;line-height:38px;color:var(--accent)}
[data-theme="ganch"] .hub-i{width:34px;height:38px;color:var(--accent)}
[data-theme="ganch"] .hub-i svg{stroke-width:1.2}
[data-theme="ganch"] .mrow{min-height:52px}
[data-theme="ganch"] .mr-i{display:none}
[data-theme="ganch"] .mr-t{font-weight:500}
[data-theme="ganch"] .mr-v{font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--accent);font-feature-settings:"lnum" 1}
[data-theme="ganch"] .tabs{height:68px;background:var(--bg);border-top:1px solid var(--line)}
[data-theme="ganch"] .tab{font-weight:500}
[data-theme="ganch"] .tab[aria-current="page"]{font-weight:600}
[data-theme="ganch"] .shead{padding-bottom:4px}
[data-theme="ganch"] .fchips{gap:10px;margin-bottom:0;padding:0 var(--pad);border-bottom:1px solid var(--line)}
[data-theme="ganch"] .fchip{min-width:44px;padding:0 2px;border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--muted);font-weight:600}
[data-theme="ganch"] .fchip[aria-pressed="true"]{background:none;border-color:var(--accent);color:var(--text)}
[data-theme="ganch"] .trow{gap:14px;padding:11px 0;border-bottom:1px solid #1E3350}
[data-theme="ganch"] .t-st{position:relative;z-index:0;width:66px;height:76px;box-sizing:border-box;align-items:center;justify-content:flex-end;gap:0;padding-bottom:9px}
[data-theme="ganch"] .t-st::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 76'%3E%3Cpath d='M.5 75.5V30C.5 17 18 11 33 .5 48 11 65.5 17 65.5 30V75.5Z' fill='%2316263D' stroke='%23C9A55C'/%3E%3C/svg%3E") center/100% 100% no-repeat}
[data-theme="ganch"] .t-st b{font-size:21px;line-height:24px}
[data-theme="ganch"] .t-st b.long{font-size:17px}
[data-theme="ganch"] .t-in{gap:2px}
[data-theme="ganch"] .t-in b{font-size:16px;font-weight:600}
[data-theme="ganch"] .empty b{font-size:22px}
[data-theme="ganch"] .t-go{width:64px;border:1px solid var(--accent);background:none;color:var(--accent);font-weight:600}
[data-theme="ganch"] .lrow.done .t-go{border-color:var(--line-strong);color:var(--good)}
[data-theme="ganch"] .cta-bar{padding:14px var(--pad) 20px;background:var(--bg)}
[data-theme="ganch"] .cta{height:56px;justify-content:center;border-radius:6px;background:#C9A55C;color:#0F1B2D;font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:.1em;text-transform:uppercase}
[data-theme="ganch"] .cta svg{display:none}
[data-theme="ganch"] .cta:disabled{background:var(--surface);color:var(--muted)}
[data-theme="ganch"] .flabel{letter-spacing:.14em}
[data-theme="ganch"] .seg{gap:3px;padding:3px;border:1px solid var(--line);border-radius:9px}
[data-theme="ganch"] .seg button{height:44px;border:0;border-radius:6px;font-weight:600}
[data-theme="ganch"] .opt{min-height:58px;padding:6px 0}
[data-theme="ganch"] .o-tx b{font-weight:600}
[data-theme="ganch"] .o-mk{width:52px;height:30px;border:1px solid #3A5275;border-radius:15px}
[data-theme="ganch"] .o-mk svg{display:none}
[data-theme="ganch"] .o-mk::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--muted);transition:transform .15s}
[data-theme="ganch"] .opt[aria-checked="true"] .o-mk::after{background:#0F1B2D;transform:translateX(22px)}
[data-theme="ganch"] .st-step,[data-theme="ganch"] .st-val small{display:none}
[data-theme="ganch"] .st-val b{font-size:46px;line-height:50px}
[data-theme="ganch"] .stakes{display:flex;position:relative;z-index:0}
[data-theme="ganch"] .stakes::before{content:"";position:absolute;z-index:-1;left:7.1%;right:7.1%;top:21px;height:1px;background:var(--line)}
[data-theme="ganch"] .stakes button{flex:1 1 0;min-width:0;height:62px;display:flex;flex-direction:column;align-items:center;font-size:12px;font-weight:600;line-height:16px;color:var(--muted)}
[data-theme="ganch"] .stakes i{flex:none;display:grid;place-items:center;height:44px}
[data-theme="ganch"] .stakes i::before{content:"";width:10px;height:10px;box-sizing:border-box;border:1.5px solid #3A5275;border-radius:50%;background:var(--bg)}
[data-theme="ganch"] .stakes [aria-checked="true"]{color:var(--text)}
[data-theme="ganch"] .stakes [aria-checked="true"] i::before{width:16px;height:16px;border-color:var(--accent);background:var(--accent)}
[data-theme="ganch"] .act{border:1px solid var(--accent);background:none;color:var(--accent);font-weight:600}
[data-theme="ganch"] .act.alt{border-color:var(--line-strong);color:var(--text)}
[data-theme="ganch"] .act.warn{border-color:#E0796C;color:#E0796C}
[data-theme="ganch"] .rws .bar{height:2px}
[data-theme="ganch"] .pcard .ava{width:68px;height:68px;font-size:34px}
[data-theme="ganch"] .pstats{border-block:1px solid var(--line)}
[data-theme="ganch"] .pstats dd{color:var(--accent);font-size:28px}
[data-theme="ganch"] .lg-name{font-size:min(84px,22vw);color:var(--text)}
[data-theme="ganch"] .lg-name span{margin-top:16px;color:var(--accent)}

/* ================= Топчан: paper, ink and a ticket ================= */
[data-theme="topchan"] .sect::before,[data-theme="topchan"] .login::before{content:"";flex:none;align-self:stretch;height:12px;margin-inline:calc(var(--pad)*-1);border-bottom:2px solid #27211C;
  background:repeating-linear-gradient(90deg,#AE3F1A 0 14px,#F5ECDC 14px 17px,#E3A72F 17px 25px,#F5ECDC 25px 28px,#1C6B63 28px 42px,#27211C 42px 44px,#F5ECDC 44px 47px)}
[data-theme="topchan"] .login{padding-top:0}
[data-theme="topchan"] .login::before{margin-bottom:max(16px,5vh)}
[data-theme="topchan"] .hprof{padding:18px 0 16px}
[data-theme="topchan"] .hp-id .ava{width:54px;height:54px;font-size:26px}
[data-theme="topchan"] .pname{font-size:24px}
[data-theme="topchan"] .wallet{height:36px;box-sizing:border-box;gap:6px;padding:0 12px 0 9px;border:2px solid #27211C;border-radius:18px;background:#E3A72F;font-size:15px}
[data-theme="topchan"] .quick{display:grid;grid-template:"k go" auto "t go" 1fr/minmax(0,1fr) 96px;flex:0 1 clamp(144px,20.4vh,172px);min-height:144px;margin-right:5px;overflow:hidden;border:2px solid #27211C;border-radius:14px;background:#AE3F1A;color:#F5ECDC;box-shadow:5px 5px 0 #27211C}
[data-theme="topchan"] .q-k{grid-area:k;padding:16px 16px 0 18px;font-size:12px;line-height:16px;letter-spacing:.1em}
[data-theme="topchan"] .q-t{grid-area:t;align-self:end;padding:0 16px 16px 18px;font-size:min(40px,10.4vw);line-height:1}
[data-theme="topchan"] .q-go{grid-area:go;display:grid;place-items:center;border-left:2px dashed #27211C;background:#E3A72F}
[data-theme="topchan"] .q-go .g-play{display:grid;place-items:center;width:60px;height:60px;box-sizing:border-box;border:2px solid #27211C;border-radius:50%;background:#FFFBF2;color:#27211C}
[data-theme="topchan"] .g-play svg{width:26px;height:26px}
[data-theme="topchan"] .duo{gap:14px;margin:24px 4px 0 0;flex-basis:clamp(118px,17.3vh,146px)}
[data-theme="topchan"] .hub{padding:14px 16px;border:2px solid #27211C;border-radius:14px;box-shadow:4px 4px 0 #27211C}
[data-theme="topchan"] .hub.open{background:#1C6B63;color:#F5ECDC}
[data-theme="topchan"] .hub.make{background:#FFFBF2;color:#27211C}
[data-theme="topchan"] .hub-t{font-size:15px}
[data-theme="topchan"] .hub-n{font-size:46px;line-height:44px}
[data-theme="topchan"] .hub-i{width:42px;height:42px}
[data-theme="topchan"] .hub-i svg{stroke-width:2.6}
[data-theme="topchan"] .mrow{min-height:56px}
[data-theme="topchan"] .mr-i{display:none}
[data-theme="topchan"] .mr-v{font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--accent)}
[data-theme="topchan"] .tabs{height:72px;border-top:2px solid #27211C}
[data-theme="topchan"] .tab{gap:4px}
[data-theme="topchan"] .tb-i{height:30px}
[data-theme="topchan"] .tab[aria-current="page"]{color:#27211C}
[data-theme="topchan"] .tab[aria-current="page"] .tb-i{width:52px;border:2px solid #27211C;border-radius:15px;background:#E3A72F}
[data-theme="topchan"] .tab[aria-current="page"] svg{width:22px;height:22px}
[data-theme="topchan"] .shead{gap:10px;margin-left:-6px}
[data-theme="topchan"] .goback{border:2px solid #27211C;border-radius:50%;background:#FFFBF2}
[data-theme="topchan"] .goback svg{width:22px;height:22px}
[data-theme="topchan"] #scr-lobby .sh-n{width:52px;height:52px;box-sizing:border-box;display:grid;place-items:center;border:2px solid #AE3F1A;border-radius:50%;box-shadow:inset 0 0 0 2px #F5ECDC,inset 0 0 0 3px #AE3F1A;font-size:19px;transform:rotate(-9deg)}
[data-theme="topchan"] .fchips{padding:2px var(--pad) 12px}
[data-theme="topchan"] .fchip{border-color:#27211C;border-radius:22px;background:#FFFBF2;color:#27211C}
[data-theme="topchan"] .fchip[aria-pressed="true"]{background:#27211C;border-color:#27211C;color:#F5ECDC}
[data-theme="topchan"] .tables{gap:10px;padding:2px 4px 12px 0}
[data-theme="topchan"] .trow{align-items:stretch;gap:0;padding:0;overflow:hidden;border:2px solid #27211C;border-radius:12px;background:#FFFBF2;box-shadow:3px 3px 0 #27211C}
[data-theme="topchan"] .t-st{width:74px;align-items:center;justify-content:center;gap:0;padding:8px 0;border-right:2px dashed #27211C;background:#E3A72F;color:#27211C}
[data-theme="topchan"] .trow.two .t-st{background:#1C6B63;color:#F5ECDC}
[data-theme="topchan"] .t-st b{font-size:22px;color:inherit}
[data-theme="topchan"] .t-st b.long{font-size:18px}
[data-theme="topchan"] .t-st small{font-size:12px;font-weight:600;line-height:16px;color:inherit}
[data-theme="topchan"] .t-in{gap:1px;padding:9px 8px 9px 12px}
[data-theme="topchan"] .t-in small,[data-theme="topchan"] .t-who{line-height:17px}
[data-theme="topchan"] .t-go{align-self:center;width:58px;margin-right:8px;border-radius:22px;background:#27211C;color:#F5ECDC}
[data-theme="topchan"] .lrow.done .t-st{background:#1C6B63;color:#F5ECDC}
[data-theme="topchan"] .lrow.done .t-go{border:2px solid #27211C;background:#FFFBF2;color:#1C6B63}
[data-theme="topchan"] .cta-bar{padding:10px calc(var(--pad) + 4px) 24px var(--pad);border-top:2px solid #27211C;background:#EADFC9}
[data-theme="topchan"] .cta{height:56px;justify-content:center;border:2px solid #27211C;border-radius:14px;background:#AE3F1A;color:#F5ECDC;box-shadow:4px 4px 0 #27211C;font-family:var(--f-display);font-weight:800;font-size:19px}
[data-theme="topchan"] .cta svg{display:none}
[data-theme="topchan"] .cta:disabled{background:#FFFBF2;color:#6B5F53;box-shadow:none}
[data-theme="topchan"] .flabel{font-weight:700;letter-spacing:.1em}
[data-theme="topchan"] .form{gap:12px}
[data-theme="topchan"] .seg{overflow:hidden;border:2px solid #27211C;border-radius:12px;background:#FFFBF2}
[data-theme="topchan"] .seg button{height:46px;border:0;font-weight:500;color:#27211C}
[data-theme="topchan"] .seg button + button{border-left:2px solid #27211C}
[data-theme="topchan"] .seg button[aria-pressed="true"]{background:#E3A72F;color:#27211C;font-weight:700}
[data-theme="topchan"] .opt{flex-direction:row-reverse;min-height:56px;padding:6px 0}
[data-theme="topchan"] .o-tx{gap:1px}
[data-theme="topchan"] .o-mk{width:30px;height:30px;border-radius:7px;background:#FFFBF2}
[data-theme="topchan"] .o-mk svg{width:20px;height:20px;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
[data-theme="topchan"] .opt[aria-checked="true"] .o-mk{background:#1C6B63;border-color:#27211C}
[data-theme="topchan"] .opt[aria-checked="true"] .o-mk svg{stroke:#F5ECDC}
[data-theme="topchan"] .st-big{display:none}
[data-theme="topchan"] .stakes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:2px}
[data-theme="topchan"] .stakes button{height:44px;box-sizing:border-box;border:2px solid #27211C;border-radius:22px;background:#FFFBF2;color:#27211C;font-family:var(--f-display);font-weight:700;font-size:17px}
[data-theme="topchan"] .stakes i{display:none}
[data-theme="topchan"] .stakes [aria-checked="true"]{background:#AE3F1A;color:#F5ECDC}
[data-theme="topchan"] .txt{background:#FFFBF2}
[data-theme="topchan"] .wbox,[data-theme="topchan"] .idcard{box-shadow:3px 3px 0 #27211C}
[data-theme="topchan"] .wbox b,[data-theme="topchan"] .idcard b{color:#AE3F1A}
[data-theme="topchan"] .idcard{margin-right:3px}
[data-theme="topchan"] .act{border-radius:22px;background:#27211C;color:#F5ECDC}
[data-theme="topchan"] .act.warn{background:#AE3F1A;color:#F5ECDC}
[data-theme="topchan"] .act.alt{border:2px solid #27211C;background:#FFFBF2;color:#27211C}
[data-theme="topchan"] .medals li{background:#FFFBF2}
[data-theme="topchan"] .medals li:not(.done) .mdl{fill:#D3C7AF;stroke:#A99C85}
[data-theme="topchan"] .medals li.done{border-color:#27211C;box-shadow:2px 2px 0 #27211C}
[data-theme="topchan"] .rws .bar{height:8px;box-sizing:border-box;border:2px solid #27211C;border-radius:4px;background:#FFFBF2}
[data-theme="topchan"] .rws .bar i{background:#1C6B63}
[data-theme="topchan"] .pstats{margin-right:4px;border:2px solid #27211C;border-radius:14px;background:#FFFBF2;box-shadow:4px 4px 0 #27211C}
[data-theme="topchan"] .pstats div{border-left:2px dotted #A99C85}
[data-theme="topchan"] .pstats div:first-child{border-left:0}
[data-theme="topchan"] .lg-name span{color:var(--muted)}

/* ================= short screens: the hero keeps its words and gives up some air ================= */
@media (max-height:700px){
  [data-theme="adras"] .quick{min-height:150px;padding-block:16px 14px}
  [data-theme="ganch"] .quick{min-height:196px;padding-bottom:16px}
  [data-theme="ganch"] .quick::after{width:44px;height:44px}
  [data-theme="ganch"] .q-go .g-word{height:48px}
  [data-theme="ganch"] .mrow,[data-theme="topchan"] .mrow{min-height:48px}
  [data-theme="topchan"] .duo{margin-top:16px}
}

/* the shortest phones: a table for four with all its buttons fits the waiting room without a scroll */
@media (max-height:600px){
  .wseats li{min-height:48px}
  .wseats .ava{width:38px;height:38px;font-size:17px}
}

/* ================= narrow phones ================= */
@media (max-width:370px){
  .screen{--pad:16px}
  .t-st{width:66px}
  .t-go{width:58px}
  [data-theme="topchan"] .t-st{width:62px}
  [data-theme="topchan"] .t-st b{font-size:19px}
  [data-theme="topchan"] .t-st b.long{font-size:16px}
  [data-theme="topchan"] .t-in{padding:9px 6px 9px 10px}
  [data-theme="topchan"] .t-go{width:54px;margin-right:6px}
  [data-theme="ganch"] .t-st{width:60px}
  [data-theme="ganch"] .t-st b{font-size:19px}
  [data-theme="ganch"] .t-st b.long{font-size:15px}
  [data-theme="ganch"] .trow{gap:10px}
  .seg button{font-size:14px}
  .hub{padding-inline:14px}
}