/* MTWAFIQ Coping Skills (6 Oct 2026) — the board, the city card and the result, on the navy ground the games share.
   Colours: the logo's turquoise #1FB5B2, green #4CAE3F and orange #EC6C25 (and white) for the skills;
   DISClock gold #F5B301 only inside the four working-style colours. */
.cs-intro{display:grid;gap:14px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cs-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:var(--chip,#EDF3F6);border:1px solid var(--border);width:fit-content;max-width:100%;margin:0 0 16px}
.cs-tabs button{border:1px solid transparent;border-radius:999px;padding:9px 16px;background:transparent;color:var(--muted);font:700 14px var(--f-head);cursor:pointer;min-height:44px}
.cs-tabs button[aria-selected="true"]{background:var(--surface);color:var(--heading);border-color:var(--border-2,#CDD7DF);box-shadow:0 2px 8px rgba(10,15,20,.08)}
.cs-tabs button:focus-visible,.cs-sk:focus-visible,.cs-leadch button:focus-visible,.cs-style input:focus-visible+span,.cs-len input:focus-visible+span{outline:3px solid #1FB5B2;outline-offset:2px}
.cs-setup h2{margin:0 0 6px}
.cs-setup>.cx-muted{margin:0 0 14px}
.cs-chal{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,#1FB5B2 12%,var(--surface));border:1px solid color-mix(in srgb,#1FB5B2 40%,transparent);font-weight:600;color:var(--heading)}
.cs-players{display:grid;gap:10px;margin-bottom:10px}
.cs-prow{display:grid;grid-template-columns:34px minmax(150px,220px) 1fr auto;gap:10px 14px;align-items:center;padding:12px;border-radius:16px;border:1px solid var(--border);background:var(--surface-2,var(--surface))}
.cs-pn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 14px var(--f-head);background:var(--chip,#EDF3F6);color:var(--heading)}
.cs-name{display:grid;gap:4px;font-weight:600;font-size:.82rem;color:var(--muted)}
.cs-name input,.cs-live input{min-height:44px;border-radius:12px;border:1.5px solid var(--border-2,#CDD7DF);background:var(--surface);color:var(--heading);padding:8px 12px;font:inherit;width:100%;box-sizing:border-box}
.cs-styles{display:flex;flex-wrap:wrap;gap:6px;border:0;margin:0;padding:0;min-width:0}
.cs-style{position:relative;cursor:pointer}
.cs-style input,.cs-len input{position:absolute;opacity:0;width:1px;height:1px}
.cs-style span{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--border-2,#CDD7DF);background:var(--surface);color:var(--heading);font:700 13px var(--f-body)}
.cs-style span i{width:12px;height:12px;border-radius:50%;background:var(--sc);flex:none}
.cs-style input:checked+span{border-color:var(--sc);background:color-mix(in srgb,var(--sc) 16%,var(--surface));box-shadow:inset 0 0 0 1px var(--sc)}
.cs-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--heading);font-size:20px;cursor:pointer}
.cs-opts{margin:16px 0 8px;display:grid;gap:12px}
.cs-len{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;border:0;padding:0;margin:0}
.cs-len legend{font-weight:700;color:var(--heading);margin-bottom:8px}
.cs-len label{position:relative;cursor:pointer}
.cs-len span{display:grid;gap:3px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--border-2,#CDD7DF);background:var(--surface);min-height:44px}
.cs-len span b{color:var(--heading)}.cs-len span small{color:var(--muted)}
.cs-len input:checked+span{border-color:#1FB5B2;background:color-mix(in srgb,#1FB5B2 10%,var(--surface))}
.cs-chk{display:flex;gap:10px;align-items:center;font-weight:600;color:var(--heading)}
.cs-chk input{width:20px;height:20px;accent-color:#1FB5B2}
.cs-keys{margin-top:10px}
.cs-live{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}
.cs-live form{display:grid;gap:12px;align-content:start}
.cs-live form h2{margin:4px 0}
.cs-live label{display:grid;gap:6px;font-weight:600;font-size:.9rem;color:var(--heading)}
.cs-made,.cs-mine{margin-top:18px}
.cs-made .code-show{display:flex;flex-wrap:wrap;gap:24px;margin:12px 0}
.cs-made .code-show small{display:block;color:var(--muted)}
.cs-made .code-pin{font:800 1.4em var(--f-head);letter-spacing:.1em;color:var(--heading)}
.cs-mine ul{margin:8px 0 0;padding-inline-start:18px}
.cs-how3{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.cs-how3 li{display:grid;gap:4px;padding:14px;border-radius:14px;border:1px solid var(--border);background:var(--surface)}
.cs-how3 b{color:var(--heading)}.cs-how3 span{color:var(--muted);font-size:.92rem}
.cs-link{border:0;background:none;padding:0;color:var(--a1,#0F7471);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.cs-joinone{max-width:560px;display:grid;gap:12px}
.cs-joinone label{display:grid;gap:6px;font-weight:600;color:var(--heading)}
.cs-joinone input{min-height:44px;border-radius:12px;border:1.5px solid var(--border-2,#CDD7DF);background:var(--surface);color:var(--heading);padding:8px 12px;font:inherit}

/* ── the stage (navy, in both themes) ── */
.cs-stage{--ink:#E8F6F4;--soft:#A9C6CB;--line:rgba(93,248,208,.16);position:relative;isolation:isolate;border-radius:26px;padding:16px clamp(12px,2vw,22px) 22px;color:var(--ink);
  background:radial-gradient(60% 50% at 0% 0%,rgba(31,181,178,.20),transparent 70%),radial-gradient(50% 45% at 100% 100%,rgba(76,174,63,.16),transparent 70%),radial-gradient(40% 40% at 100% 0%,rgba(236,108,37,.12),transparent 70%),#061723;
  box-shadow:0 34px 90px -34px rgba(3,10,14,.75),inset 0 0 0 1px var(--line);overflow:hidden}
.cs-stage h2,.cs-stage h3,.cs-stage b{color:#fff}
.cs-stage .cx-muted{color:var(--soft)}
.cs-top{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin-bottom:14px}
.cs-brand{font:800 15px var(--f-head);letter-spacing:.02em;color:#5DF8D0}
.cs-prog{font:700 13px var(--f-body);padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line)}
.cs-score{font:600 14px var(--f-body);color:var(--soft)}.cs-score b{font:800 20px var(--f-head);color:#fff;margin-inline-start:4px}.cs-score small{color:var(--soft)}
.cs-code b{font:800 22px var(--f-head);letter-spacing:.12em;color:#5DF8D0}
.cs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(14px,2vw,26px);align-items:start}
.cs-bwrap{position:sticky;top:96px}

/* the board: 4 x 4 like the owner's board — score corners, two cities a side, the skills in the centre */
.cs-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:6px;aspect-ratio:1;width:100%;max-width:620px;margin:0 auto;padding:8px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--line);box-sizing:border-box}
.cs-corner{display:grid;place-items:center;align-content:center;gap:2px;border-radius:14px;padding:6px;text-align:center;background:color-mix(in srgb,var(--sc,#334) 22%,#0B2230);border:1px solid color-mix(in srgb,var(--sc,#3A5560) 70%,transparent);min-width:0}
.cs-corner[data-corner="1"]{grid-area:4/1}.cs-corner[data-corner="2"]{grid-area:4/4}.cs-corner[data-corner="3"]{grid-area:1/4}.cs-corner[data-corner="4"]{grid-area:1/1}
.cs-corner b{font:700 12px var(--f-body);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-corner{grid-template-columns:minmax(0,1fr);overflow:hidden}.cs-corner>*{max-width:100%}   /* 7 Oct 2026: a long name ends in an ellipsis inside its corner (full name in the title) */
.cs-corner small{font-size:10.5px;color:var(--soft)}
.cs-free{opacity:.55;letter-spacing:.08em;text-transform:uppercase}
.cs-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--sc);color:#061723;font:800 13px var(--f-head)}
.cs-city{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:2px;border-radius:14px;padding:7px;min-width:0;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid var(--line);transition:transform .25s,box-shadow .25s,border-color .25s}
.cs-city[data-seat="b1"]{grid-area:4/2}.cs-city[data-seat="b2"]{grid-area:4/3}.cs-city[data-seat="r1"]{grid-area:3/4}.cs-city[data-seat="r2"]{grid-area:2/4}
.cs-city[data-seat="t1"]{grid-area:1/3}.cs-city[data-seat="t2"]{grid-area:1/2}.cs-city[data-seat="l1"]{grid-area:2/1}.cs-city[data-seat="l2"]{grid-area:3/1}
.cs-city.on{border-color:#5DF8D0;box-shadow:0 0 0 2px rgba(93,248,208,.5),0 0 28px -4px rgba(93,248,208,.55);transform:scale(1.03);z-index:2}
.cs-ci{font-size:17px;line-height:1}
.cs-city b{font:800 12.5px/1.15 var(--f-head);overflow-wrap:anywhere}
.cs-city small{font-size:10px;line-height:1.2;color:var(--soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cs-lv{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.cs-lv i{font:700 9.5px/1 var(--f-body);font-style:normal;text-align:center;padding:4px 0;border-radius:5px;background:rgba(255,255,255,.07);color:var(--soft)}
.cs-lv i.now{background:#5DF8D0;color:#061723;animation:cs-pulse 1.4s ease-in-out infinite}
.cs-lv i[data-r="0"]{background:#4CAE3F;color:#fff}.cs-lv i[data-r="1"]{background:#1FB5B2;color:#061723}.cs-lv i[data-r="2"]{background:#EC6C25;color:#fff}.cs-lv i[data-r="3"],.cs-lv i[data-r="-1"]{background:rgba(255,255,255,.22);color:#fff}
@keyframes cs-pulse{50%{box-shadow:0 0 0 3px rgba(93,248,208,.35)}}
.cs-hub{grid-area:2/2/4/4;position:relative;border-radius:50%;margin:4px}
.cs-hub svg{position:absolute;inset:0;width:100%;height:100%}
.cs-hub line{stroke:rgba(255,255,255,.35);stroke-width:1.2;vector-effect:non-scaling-stroke}
.cs-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;font:800 clamp(11px,1.5vw,16px)/1.15 var(--f-head);color:#fff;background:#0B2633;border:3px solid transparent;
  background-image:linear-gradient(#0B2633,#0B2633),linear-gradient(135deg,#1FB5B2,#4CAE3F,#EC6C25);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 0 30px -6px rgba(93,248,208,.45)}
.cs-orb{position:absolute;width:31%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;text-align:center;font:700 clamp(9px,1.05vw,12px)/1.1 var(--f-body);color:#fff;background:rgba(6,23,35,.9);border:3px solid var(--kc);transform:translate(-50%,-50%);transition:transform .3s,box-shadow .3s,background .3s}
.cs-orb em{font-style:normal;font-size:clamp(13px,1.7vw,20px);line-height:1.1}
.cs-orb[data-pos="0"]{left:22%;top:22%}.cs-orb[data-pos="1"]{left:78%;top:22%}.cs-orb[data-pos="2"]{left:22%;top:78%}.cs-orb[data-pos="3"]{left:78%;top:78%}
.cs-orb.pick{background:color-mix(in srgb,var(--kc) 35%,#061723)}
.cs-orb.best{box-shadow:0 0 0 4px rgba(255,255,255,.18),0 0 30px 2px var(--kc);transform:translate(-50%,-50%) scale(1.1)}

/* the city card */
.cs-card{border-radius:20px;padding:clamp(14px,2vw,22px);background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--line);min-width:0}
.cs-ch{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cs-ch>div:nth-child(2){flex:1 1 160px;min-width:0}
.cs-ch h2{margin:0;font:800 clamp(1.3rem,2.4vw,1.75rem)/1.15 var(--f-head);outline:none}
.cs-ch p{margin:2px 0 0;color:var(--soft);font-weight:600}
.cs-cicon{font-size:30px;width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.08)}
.cs-die{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
[dir="rtl"] .cs-die{padding:6px 6px 6px 12px}
.cs-face{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font:800 20px var(--f-head);color:#061723;background:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.cs-die.roll .cs-face{animation:cs-roll .56s linear}
@keyframes cs-roll{to{transform:rotate(360deg)}}
.cs-die small{display:block;font-size:11px;color:var(--soft);text-transform:uppercase;letter-spacing:.08em}
.cs-die b{font:800 15px var(--f-head)}
.cs-bars{display:flex;gap:3px;align-items:flex-end}
.cs-bars i{width:6px;border-radius:3px;background:rgba(255,255,255,.18)}.cs-bars i:nth-child(1){height:8px}.cs-bars i:nth-child(2){height:13px}.cs-bars i:nth-child(3){height:18px}.cs-bars i:nth-child(4){height:23px}
.cs-bars i.on{background:linear-gradient(#EC6C25,#1FB5B2)}
.cs-sit{font:600 clamp(1.05rem,1.6vw,1.22rem)/1.5 var(--f-body);color:#fff;margin:16px 0 12px}
.cs-lead{display:grid;gap:6px;margin:0 0 10px}
.cs-lbl{font:700 12px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.cs-leadch{display:flex;flex-wrap:wrap;gap:6px}
.cs-leadch button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:6px 12px;border-radius:999px;border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:#fff;font:700 13px var(--f-body);cursor:pointer}
.cs-leadch button i{width:11px;height:11px;border-radius:50%;background:var(--sc)}
.cs-leadch button[aria-checked="true"]{border-color:var(--sc);background:color-mix(in srgb,var(--sc) 24%,transparent)}
.cs-leadch button:disabled{cursor:default;opacity:.75}
.cs-tip,.cs-sline{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--sc) 12%,transparent);border-inline-start:4px solid var(--sc);color:var(--ink);font-size:.95rem;line-height:1.5}
.cs-tag{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:#fff}
.cs-tag i{width:10px;height:10px;border-radius:50%;background:var(--sc)}
.cs-q{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 8px}
.cs-clock{position:relative;width:38px;height:38px;display:grid;place-items:center;color:#fff}
.cs-clock svg{position:absolute;inset:0}.cs-clock b{font:800 12px var(--f-head);position:relative}
.cs-skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cs-sk{position:relative;display:grid;gap:3px;justify-items:start;text-align:start;padding:12px 14px;min-height:76px;border-radius:16px;border:2px solid color-mix(in srgb,var(--kc) 70%,transparent);background:rgba(6,23,35,.65);color:#fff;cursor:pointer;font:inherit;transition:transform .15s,background .2s,box-shadow .2s}
.cs-sk:hover:not(:disabled){transform:translateY(-2px);background:color-mix(in srgb,var(--kc) 18%,#061723)}
.cs-ski{font-size:22px;line-height:1}
.cs-sk b{font:800 16px var(--f-head)}.cs-sk small{color:var(--soft);font-size:12.5px;line-height:1.35}
.cs-sk kbd{position:absolute;inset-inline-end:10px;top:9px;font:700 11px var(--f-body);padding:1px 6px;border-radius:6px;border:1px solid rgba(255,255,255,.25);color:var(--soft)}
.cs-sk:disabled{cursor:default;opacity:.55}
.cs-sk.pick{opacity:1;background:color-mix(in srgb,var(--kc) 26%,#061723)}
.cs-sk.best{opacity:1;box-shadow:0 0 0 3px #fff,0 0 26px -2px var(--kc)}
.cs-fb:empty{display:none}
.cs-res{margin-top:14px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--line);animation:cs-in .35s ease}
@keyframes cs-in{from{opacity:0;transform:translateY(6px)}}
.cs-res h3{margin:0 0 8px;font:800 1.2rem var(--f-head);display:flex;flex-wrap:wrap;gap:8px;align-items:center;outline:none}
.cs-res[data-r="0"] h3{color:#7CDB6E}.cs-res[data-r="1"] h3{color:#5DF8D0}.cs-res[data-r="2"] h3{color:#FFA36B}.cs-res[data-r="3"] h3,.cs-res[data-r="-1"] h3{color:#D6E2E6}
.cs-pts{font:800 14px var(--f-head);padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff}
.cs-res p{margin:0 0 10px;line-height:1.55}
.cs-why b{color:#fff}
.cs-habit{display:flex;gap:12px;align-items:flex-start;margin:4px 0 12px;padding:12px 14px;border-radius:14px;background:linear-gradient(120deg,rgba(31,181,178,.18),rgba(76,174,63,.14));border:1px solid rgba(93,248,208,.3)}
.cs-habit span{font-size:22px}.cs-habit p{margin:2px 0 0}.cs-habit b{color:#5DF8D0}
.cs-stage .btn-ghost{color:#fff;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.06)}
.cs-stage .btn-ghost:hover{background:rgba(255,255,255,.14)}

/* the result */
.cs-result{padding:6px 0 10px}
.cs-result h2{outline:none;margin:6px 0}
.cs-result .big{direction:ltr;unicode-bidi:isolate}
.cs-bonus{display:inline-block;margin:8px auto 0;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.cs-bonus.on{background:rgba(76,174,63,.2);border-color:#4CAE3F;color:#fff;font-weight:700}
.cs-two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;margin-top:14px}
.cs-panel{padding:16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line);min-width:0}
.cs-panel h3{margin:0 0 10px;font:800 1.05rem var(--f-head)}
.cs-panel h3:not(:first-child){margin-top:18px}
.cs-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cs-tbl table{width:100%;border-collapse:collapse;font-size:.88rem}
.cs-tbl th{font:700 11px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);text-align:start;padding:6px 8px;border-bottom:1px solid var(--line)}
.cs-tbl td{padding:8px;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap}
.cs-tbl td.cs-who{white-space:normal;overflow-wrap:anywhere;min-width:6.5em}   /* 7 Oct 2026: long names wrap in the result table */
@media (max-width:600px){   /* 7 Oct 2026: on the phone each city is one block (city and points, then the other columns with their names), so nothing is cut */
  .cs-tbl{overflow:visible}
  .cs-tbl table,.cs-tbl tbody{display:block;width:100%}
  .cs-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cs-tbl tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:10px 2px;border-bottom:1px solid rgba(255,255,255,.08)}
  .cs-tbl tr::before{content:"";order:2;flex-basis:100%;height:0}
  .cs-tbl td{display:block;padding:0;border:0;white-space:normal;min-width:0}
  .cs-tbl td:first-child{order:0;flex:1 1 auto;font-weight:700}
  .cs-tbl td.cs-num{order:1;font-weight:700}
  .cs-tbl td:not(:first-child):not(.cs-num){order:3;font-size:.84rem}
  .cs-tbl td.cs-who{min-width:0}
  .cs-tbl td:not(:first-child):not(.cs-num)::before{content:attr(data-l);display:block;font:700 10px var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
  html[lang=ar] .cs-tbl td:not(:first-child):not(.cs-num)::before{letter-spacing:0;font-family:var(--f-ar);font-size:11px}
}
.cs-tbl tr[data-r="0"] td:last-child{color:#7CDB6E;font-weight:800}
.cs-num{text-align:end;font-variant-numeric:tabular-nums;direction:ltr}
.cs-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--sc);margin-inline-end:6px}
.cs-mix{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cs-mix li{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);border-inline-start:4px solid var(--kc);font-size:.9rem}
.cs-habits{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cs-habits li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.45}
.cs-habits li.miss{padding:8px 10px;border-radius:12px;background:rgba(236,108,37,.12);border:1px solid rgba(236,108,37,.35)}
.cs-habits p{margin:0}
.cs-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 6px}
.cs-chn{text-align:center;color:var(--soft)!important}
.cs-stage .room-sent{text-align:center;color:var(--ink)}
.cs-stage .room-sent a,.cs-stage .ws-post a{color:#5DF8D0}

/* the live leaderboard (big screen) */
.cs-lbv{min-height:420px}
.cs-lbt{margin:6px 0 2px;font:800 clamp(1.4rem,3vw,2.2rem) var(--f-head)}
.cs-lb li{background:rgba(255,255,255,.06);border-color:var(--line);color:#fff}
.cs-lb li .cx-muted{color:var(--soft)}
.cs-lb .sc{color:#fff}
.cs-lb li.first{background:rgba(245,179,1,.14)}
.cs-lba{margin-top:16px}
.cs-lbv .host-tools{margin-top:14px;color:var(--ink)}
.cs-lbv .host-tools input{min-height:40px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;padding:6px 10px}
.cs-lbv.big{position:fixed;inset:0;z-index:200;border-radius:0;padding:4vh 5vw;overflow:auto}
.cs-lbv.big .cs-lb li{padding:18px 24px;font-size:1.4rem}
.cs-lbv.big .cs-lb .sc{font-size:2rem}
.cs-lbv.big .cs-lbt{font-size:clamp(2rem,4vw,3.4rem)}
.cs-lbv.big .host-tools,.cs-lbv.big .cs-lba a,.cs-lbv.big [data-cj]{display:none}

/* the page around the game */
.cs-skill-cards .coe-svc{--c:var(--kc)}
.cs-note{margin-top:16px;padding:12px 16px;border-radius:14px;border:1px dashed var(--border-2,#CDD7DF);color:var(--muted);font-size:.9rem;line-height:1.55}

@media (max-width:980px){.cs-grid{grid-template-columns:1fr}.cs-bwrap{position:static}.cs-board{max-width:520px}.cs-two{grid-template-columns:1fr}}
@media (max-width:640px){
  .cs-prow{grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:"n name x" "s s s"}
  .cs-pn{grid-area:n}.cs-name{grid-area:name}.cs-styles{grid-area:s}.cs-x{grid-area:x}
  .cs-prow:not(:has(.cs-x)){grid-template-areas:"n name name" "s s s"}
  .cs-board{gap:4px;padding:5px;border-radius:16px}
  .cs-city{padding:5px;border-radius:10px}
  .cs-city small,.cs-ci{display:none}
  .cs-city b{font-size:10.5px}
  .cs-lv{gap:2px}.cs-lv i{font-size:8px;padding:3px 0;border-radius:4px}
  .cs-corner{border-radius:10px;padding:3px}.cs-corner b{font-size:10px}.cs-corner small{font-size:9px}.cs-av{width:22px;height:22px;font-size:11px}
  .cs-orb{border-width:2px;font-size:8.5px}
  .cs-skills{grid-template-columns:1fr 1fr;gap:8px}
  .cs-sk{padding:10px;min-height:70px}.cs-sk small{font-size:11.5px}.cs-sk kbd{display:none}
  .cs-stage{border-radius:20px;padding:12px 10px 18px}
  .cs-keys{display:none}
}
@media (prefers-reduced-motion:reduce){.cs-lv i.now,.cs-die.roll .cs-face,.cs-res{animation:none}.cs-city,.cs-orb,.cs-sk{transition:none}}
.cs-stylelist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.cs-stylelist li{display:grid;gap:6px;align-content:start;padding:16px;border-radius:16px;border:1px solid var(--border);border-top:4px solid var(--sc);background:var(--surface)}
.cs-stylelist b{display:flex;align-items:center;gap:8px;color:var(--heading);font:800 1.05rem var(--f-head)}
.cs-stylelist b i{width:12px;height:12px;border-radius:50%;background:var(--sc)}
.cs-stylelist span{color:var(--text);line-height:1.5}
.cs-stylelist .cs-try{font-weight:600;color:var(--heading)}
/* the leaderboard and room banner keep the logo colours (DISClock gold stays for the styles) */
.cs-rb{background:color-mix(in srgb,#1FB5B2 12%,var(--surface));border-color:color-mix(in srgb,#1FB5B2 45%,transparent)}
.cs-lb li.first{border-color:#4CAE3F;background:rgba(76,174,63,.18)}
#play{scroll-margin-top:84px}