/* ============================================================
   SCHEDULE
   ============================================================ */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.day{background:var(--ink);min-height:200px;display:flex;flex-direction:column}
.day.today{background:linear-gradient(180deg,rgba(255,61,119,.09),transparent 30%),var(--ink)}
.day-h{position:relative;z-index:5;padding:10px var(--s3);border-bottom:1px solid var(--line-soft);
  background:rgba(11,12,22,.95);backdrop-filter:blur(8px)}
.day-h .d{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-2)}
.day.today .day-h .d{color:var(--accent)}
.day-h .n{font-family:var(--f-ui);font-size:19px;font-weight:700;letter-spacing:.03em}
.day-h .jp{font-family:var(--f-body);font-size:11.5px;font-weight:500;color:var(--bone-2)}
.slots{display:flex;flex-direction:column;padding:var(--s2);gap:var(--s2)}
.ep{display:flex;gap:9px;padding:8px;border-radius:var(--r-s);border:1px solid transparent;
  background:var(--panel);text-align:left;transition:.18s var(--tap);align-items:flex-start}
.ep:hover{border-color:var(--accent);background:var(--panel-2);transform:translateX(2px)}
.ep .mini{flex:0 0 30px;height:45px;border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.ep .mini svg{width:100%;height:100%;display:block}
.ep .b{min-width:0;flex:1}
.ep .tm{display:block;font-family:var(--f-ui);font-size:11.5px;font-weight:700;color:var(--accent-2);letter-spacing:.09em}
.ep .tt{font-size:13px;font-weight:600;color:var(--bone);line-height:1.32;margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ep .en{display:block;font-family:var(--f-ui);font-size:11px;font-weight:500;color:var(--bone-2);letter-spacing:.05em;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep.airing{border-color:var(--crit)}
.day .empty{padding:var(--s5) var(--s3);color:var(--bone-3);font-family:var(--f-ui);font-size:11px;font-weight:500;letter-spacing:.1em;text-align:center}

.tba{margin-top:var(--s5);border:1px dashed var(--line);border-radius:var(--r);padding:var(--s4) var(--s5)}
.tba h4{font-family:var(--f-ui);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}
.tba .row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3)}
.tba .row button{font-family:var(--f-ui);font-size:12px;padding:6px 12px;border:1px solid var(--line);
  border-radius:20px;color:var(--bone-2);transition:.18s}
.tba .row button:hover{border-color:var(--accent);color:var(--bone)}

/* ============================================================
   FILTER BAR
   ============================================================ */
.filters{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-bottom:var(--s5);
  padding:var(--s3) var(--s4);border:1px solid var(--line-soft);border-radius:var(--r);background:rgba(16,18,39,.5)}
.filters input[type=search]{min-width:220px}
select{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;
  font-family:var(--f-ui);font-size:13px;font-weight:600;letter-spacing:.05em;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--bone-3) 50%),linear-gradient(135deg,var(--bone-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
select:focus{outline:none;border-color:var(--accent-2)}
.count{margin-left:auto;font-family:var(--f-ui);font-size:12px;font-weight:600;color:var(--bone-2);letter-spacing:.12em}

.chiprow{display:flex;gap:var(--s2);flex-wrap:wrap}
.chip{font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.07em;padding:6px 13px;border-radius:20px;
  border:1px solid var(--line);background:var(--panel);color:var(--bone-2);transition:.18s var(--tap)}
.chip:hover{border-color:var(--bone-3);color:var(--bone);background:var(--panel-2)}
.chip.on{background:var(--accent-fill);border-color:var(--accent-edge);color:#fff;font-weight:600;
  letter-spacing:.09em}

/* ============================================================
   DOSSIER (detail drawer)
   ============================================================ */
#scrim{position:fixed;inset:0;z-index:40;background:rgba(4,4,9,.72);backdrop-filter:blur(6px);opacity:0;
  pointer-events:none;transition:.3s}
#scrim.on{opacity:1;pointer-events:auto}
/* centred, not a side drawer */
#dossier{position:fixed;inset:0;z-index:41;display:grid;place-items:center;padding:var(--s5);
  opacity:0;pointer-events:none;transition:opacity .28s var(--tap)}
#dossier.on{opacity:1;pointer-events:auto}
.dos-inner{width:min(1000px,100%);max-height:92vh;overflow-y:auto;background:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  transform:translateY(22px) scale(.975);transition:transform .34s var(--tap)}
#dossier.on .dos-inner{transform:none}
.dos-inner::-webkit-scrollbar{width:8px}
.dos-inner::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.dos-hero{position:relative;padding:var(--s6);border-bottom:1px solid var(--line-soft);
  display:grid;grid-template-columns:180px 1fr;gap:var(--s6);border-radius:var(--r) var(--r) 0 0}
.dos-hero .key{border-radius:var(--r-s);overflow:hidden;border:1px solid var(--line);aspect-ratio:2/3}
.dos-hero .key svg{width:100%;height:100%;display:block}
.dos-close{position:absolute;top:var(--s4);right:var(--s4);width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;background:var(--panel)}
.dos-close:hover{border-color:var(--crit);color:var(--crit)}
.dos-hero > *{min-width:0}
.dos-title{font-family:var(--f-ui);font-size:clamp(20px,2.6vw,28px);line-height:1.15;padding-right:44px;overflow-wrap:anywhere}
.dos-jp{font-size:15px;font-weight:700;color:var(--bone);margin-top:6px;letter-spacing:.02em;overflow-wrap:anywhere}
.dos-meta{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.dos-meta .pill{font-size:10.5px;padding:5px 10px;color:var(--bone);border-color:var(--line)}
.dos-body{padding:var(--s5) var(--s6) var(--s8);display:flex;flex-direction:column;gap:var(--s6)}
.dos-syn{font-size:15px;font-weight:500;line-height:1.7;color:var(--bone-2);white-space:pre-line}
/* a long synopsis is folded to five lines and fades out under the button */
.dos-syn.folded{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
.dos-more{margin-top:var(--s2);font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-2);padding:4px 0}
.dos-more:hover{color:var(--bone)}
.sec-link{order:2;flex:none;font-family:var(--f-ui);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-3);padding:4px 10px;border:1px solid var(--line-soft);border-radius:20px;
  transition:color .16s,border-color .16s}
.sec-link:hover{color:var(--accent-2);border-color:var(--accent-2)}
.dos-genres .chip{cursor:pointer}
.dos-inner{overscroll-behavior:contain}
/* specification list: two clean columns, hairline rules, no boxes */
.spec{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:0 var(--s7);border:1px solid var(--line-soft);border-radius:var(--r);
  background:var(--panel);padding:var(--s2) var(--s5)}
.spec-row{display:flex;align-items:baseline;gap:var(--s4);padding:12px 0;
  border-bottom:1px solid var(--line-soft)}
.spec-row:last-child{border-bottom:0}
.spec dt{flex:0 0 136px;font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-2)}
.spec dd{margin:0;flex:1;min-width:0;font-family:var(--f-ui);font-size:15px;font-weight:600;color:var(--bone);
  letter-spacing:.01em}
.spec-row.hot dd{color:var(--accent-2)}

.sec-t{font-family:var(--f-ui);font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-2);
  margin-bottom:var(--s3);display:flex;align-items:center;gap:var(--s3)}
.sec-t::after{content:'';flex:1;height:1px;background:var(--line-soft)}

.where{display:flex;flex-direction:column;gap:var(--s2)}
.where a{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--panel);text-decoration:none;transition:.2s var(--tap)}
.where a:hover{border-color:var(--accent);transform:translateX(3px);background:var(--panel-2)}
.where .sq{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-family:var(--f-ui);
  font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#08080F;flex:0 0 auto}
.where .nm{display:block;font-family:var(--f-ui);font-size:14px;letter-spacing:.04em}
.where .rg{display:block;font-size:11.5px;color:var(--bone-3);margin-top:1px}
.where .go{margin-left:auto;font-family:var(--f-ui);font-size:10px;letter-spacing:.2em;color:var(--bone-3);text-transform:uppercase}
.where a:hover .go{color:var(--accent)}

.verify{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s2)}
.verify a{display:block;padding:var(--s3);border:1px solid var(--line-soft);border-radius:var(--r-s);
  text-decoration:none;transition:.2s}
.verify a:hover{border-color:var(--accent-2);background:var(--panel)}
.verify .l{display:block;font-family:var(--f-ui);font-size:12.5px;letter-spacing:.06em}
.verify .h{display:block;font-size:11px;color:var(--bone-3);margin-top:2px;line-height:1.4}

.tracker{border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s5);background:var(--panel)}
.tracker .top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4) var(--s5);flex-wrap:wrap}
.tracker .n{font-family:var(--f-ui);font-size:26px;letter-spacing:.02em}
.tracker .n small{font-size:13px;color:var(--bone-3)}
.stepper{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;justify-content:flex-end}
.stepper > button:not(.btn){flex:0 0 auto;width:36px;height:36px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;
  font-family:var(--f-ui);font-size:16px;color:var(--bone-2);transition:.18s}
.stepper > button:not(.btn):hover{border-color:var(--accent);color:var(--bone)}
.stepper .btn{flex:0 0 auto}
.bar{height:6px;border-radius:3px;background:var(--panel-3);overflow:hidden;margin-top:var(--s4)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .4s var(--tap)}

/* ============================================================
   PLATFORM HUB
   ============================================================ */
.plat-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.plat{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel);overflow:hidden;
  display:flex;flex-direction:column;transition:.25s var(--tap)}
.plat:hover{border-color:var(--line);transform:translateY(-3px)}
.plat .hd{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-bottom:1px solid var(--line-soft)}
.plat .sq{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-family:var(--f-ui);
  font-size:11px;font-weight:700;color:#08080F;flex:0 0 auto;letter-spacing:.02em}
.plat .nm{font-family:var(--f-ui);font-size:16px;letter-spacing:.03em}
.plat .rg{font-size:11.5px;color:var(--bone-3);line-height:1.35;margin-top:1px}
.plat .bd{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.plat .note{font-size:13px;color:var(--bone-2)}
.plat .facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4);font-family:var(--f-ui);font-size:12px}
.plat .facts .k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}
.plat .ft{padding:var(--s3) var(--s4);border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;
  align-items:center;gap:var(--s3)}
.plat .cov{font-family:var(--f-ui);font-size:11.5px;color:var(--bone-3);letter-spacing:.08em}
.plat .cov b{color:var(--accent-2);font-weight:600}

/* ============================================================
   CHARTS (single-series magnitude — recessive grid, direct labels)
   ============================================================ */
.panel{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel);padding:var(--s5)}
.stat-row{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.stat{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel);padding:var(--s4) var(--s5)}
.stat .k{font-family:var(--f-ui);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-3)}
.stat .v{font-family:var(--f-ui);font-size:34px;line-height:1.1;margin-top:6px;letter-spacing:.01em}
.stat .v small{font-size:13px;color:var(--bone-3);letter-spacing:.1em;margin-left:5px}
.stat .h{font-size:12px;color:var(--bone-3);margin-top:4px}

.barchart{display:flex;flex-direction:column;gap:10px;max-width:760px}
.brow{display:grid;grid-template-columns:120px 1fr 46px;gap:var(--s3);align-items:center}
.brow .lb{font-family:var(--f-ui);font-size:12px;color:var(--bone-2);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .tr{position:relative;height:14px;background:linear-gradient(90deg,var(--panel-3) 0 1px,transparent 1px) repeat-x;
  background-size:12.5% 100%;border-radius:3px}
.brow .bf{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;background:var(--accent-2);min-width:3px;
  transition:width .5s var(--tap)}
.brow .vl{font-family:var(--f-ui);font-size:12px;color:var(--bone-2);text-align:right}
.brow:hover .bf{filter:brightness(1.2)}

/* ============================================================
   COMMAND PALETTE
   ============================================================ */
#pal{position:fixed;inset:0;z-index:50;display:none;padding-top:12vh;justify-content:center;
  background:rgba(4,4,9,.7);backdrop-filter:blur(8px)}
#pal.on{display:flex}
.pal-box{width:min(620px,92vw);height:fit-content;max-height:70vh;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r);background:var(--ink);box-shadow:var(--shadow);overflow:hidden}
.pal-box input{border:0;border-radius:0;border-bottom:1px solid var(--line-soft);background:transparent;padding:16px 18px;font-size:16px}
.pal-box input:focus{box-shadow:none;border-color:var(--line-soft)}
.pal-list{overflow-y:auto;padding:var(--s2)}
.pal-item{display:flex;gap:var(--s3);align-items:center;width:100%;padding:10px 12px;border-radius:var(--r-s);text-align:left}
.pal-item.sel{background:var(--panel-2)}
.pal-item .k{font-family:var(--f-ui);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--line);padding:2px 6px;border-radius:4px}
.pal-item .t{font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-item .s{font-family:var(--f-ui);font-size:11px;color:var(--bone-3)}
.pal-foot{padding:8px 14px;border-top:1px solid var(--line-soft);font-family:var(--f-ui);font-size:10.5px;
  letter-spacing:.14em;color:var(--bone-3);display:flex;gap:var(--s4)}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:28px;z-index:80;transform:translate(-50%,160%);opacity:0;pointer-events:none;transition:.4s var(--tap);
  background:var(--panel-2);border:1px solid var(--line);border-radius:40px;padding:11px 22px;max-width:calc(100vw - 32px);
  font-family:var(--f-ui);font-size:12.5px;letter-spacing:.08em;box-shadow:var(--shadow)}
#toast.on{transform:translate(-50%,0);opacity:1}
#toast b{color:var(--accent-2);font-weight:500}
/* a title in a toast is cut to one line, so the message stays a single line */
#toast b{display:inline-block;max-width:min(32ch,60vw);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:bottom}

/* ---------- empty ---------- */
.empty-state{text-align:center;padding:var(--s8) var(--s5);border:1px dashed var(--line);border-radius:var(--r)}
.empty-state .jp{font-size:44px;color:var(--panel-3);line-height:1}
.empty-state p{color:var(--bone-3);margin-top:var(--s3);font-family:var(--f-ui);font-size:13px;letter-spacing:.06em}

.footnote{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line-soft);
  font-size:12.5px;color:var(--bone-3);max-width:74ch;line-height:1.7}
.footnote a{color:var(--bone-2)}

/* ---------- settings ---------- */
.setrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding:var(--s3) 0;
  border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.setrow .l{font-family:var(--f-ui);font-size:14px}
.setrow .d{font-size:12.5px;color:var(--bone-3);max-width:52ch;margin-top:2px;line-height:1.5}
/* the rows sit close together inside a panel; the panels sit well apart, so
   the eye groups them before it reads them */
.set-group{margin-bottom:var(--s7)}
.set-group:last-child{margin-bottom:0}
.set-group .panel{padding:var(--s3) var(--s5)}
.swatches{display:flex;gap:var(--s2)}
.sw{width:28px;height:28px;border-radius:9px;border:2px solid transparent;transition:.18s}
.sw.on{border-color:var(--bone)}
.toggle{width:46px;height:26px;border-radius:14px;background:var(--panel-3);position:relative;transition:.22s;border:1px solid var(--line)}
.toggle i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--bone-3);transition:.22s var(--tap)}
.toggle.on{background:var(--accent);border-color:var(--accent)}
.toggle.on i{left:22px;background:#fff}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .week{grid-template-columns:repeat(2,1fr)}
  .day-h{position:static}
}
@media(max-width:860px){
  :root{--rail:0px}
  .layout{grid-template-columns:1fr}
  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;flex-direction:row;justify-content:flex-start;
    border-right:0;border-top:1px solid var(--line);background:rgba(9,10,20,.96);backdrop-filter:blur(14px);z-index:35;padding:0;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail .nav{padding:9px 0;flex:0 0 auto;width:auto;min-width:62px;gap:4px}
  .rail .nav em{font-size:8.5px;letter-spacing:.04em}
  .rail .nav svg{width:19px;height:19px}
  .rail .nav.on::before{left:16%;right:16%;top:0;bottom:auto;width:auto;height:2px}
  .rail .spacer{display:none}
  .rail .nav .badge{right:auto;left:50%;margin-left:6px;top:4px}
  main{padding:var(--s5) var(--s4) 96px}
  #dossier{padding:0}
  .dos-inner{max-height:100vh;height:100%;border-radius:0;border:0}
  .dos-hero{grid-template-columns:110px 1fr;padding:var(--s5) var(--s4) var(--s4);border-radius:0}
  .dos-body{padding:var(--s4) var(--s4) var(--s8)}
  .hud{padding:0 var(--s4);gap:var(--s3)}
  .ticker{display:none}
  .hud #palBtn{display:none}
  .hud .who span:not(.av){display:none}
  .hud .div{display:none}
  .mode{font-size:0;padding:6px;gap:0}
  .mode i{width:8px;height:8px}
  .brow{grid-template-columns:88px 1fr 42px}
}
@media(max-width:560px){
  .week{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--s4)}
  .rail-scroll .card{flex-basis:132px}
  .profiles{gap:var(--s3)}
  .profile{width:118px}
  .profile .av{width:76px;height:76px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ============================================================
   MANGA
   ============================================================ */
.reader-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s3)}
.reader{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--panel);text-decoration:none;transition:.2s var(--tap)}
.reader:hover{border-color:var(--accent);transform:translateY(-2px)}
.reader .sq{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--f-ui);font-size:10px;font-weight:700;color:#08080F}
.reader .nm{display:block;font-family:var(--f-ui);font-size:13px}
.reader .rg{display:block;font-size:11px;color:var(--bone-3);margin-top:1px}

/* ============================================================
   THE INDEX (resource directory)
   ============================================================ */
.dir-cat{margin-bottom:var(--s7);scroll-margin-top:calc(var(--hud) + var(--s5))}
.dir-head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.dir-head h3{font-family:var(--f-ui);font-size:17px;letter-spacing:.02em}
.dir-head .jp{font-size:12px;color:var(--bone-3)}
.dir-head .n{margin-left:auto;font-family:var(--f-ui);font-size:11px;color:var(--bone-3);letter-spacing:.16em}
.dir-head p{flex-basis:100%;font-size:12.5px;color:var(--bone-3);max-width:76ch;margin-top:2px}
.dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--s3)}
.site{display:block;padding:var(--s4);border:1px solid var(--line-soft);border-radius:var(--r);
  background:var(--panel);text-decoration:none;transition:.2s var(--tap);position:relative;overflow:hidden}
.site::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:.25s var(--tap)}
.site:hover{border-color:var(--line);transform:translateY(-3px);background:var(--panel-2)}
.site:hover::before{transform:scaleY(1)}
.site .nm{font-family:var(--f-ui);font-size:14.5px;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.site .nm .host{font-size:10.5px;color:var(--bone-3);letter-spacing:.06em}
.site .d{font-size:12.5px;color:var(--bone-2);margin-top:6px;line-height:1.5}
.site .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:var(--s3)}
.site .tag{font-family:var(--f-ui);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  padding:2px 6px;border-radius:4px;border:1px solid var(--line);color:var(--bone-3)}
.site .tag.free{border-color:var(--good);color:var(--good)}
.site .tag.official{border-color:var(--accent-2);color:var(--accent-2)}

/* skeleton grid while the catalogue loads */
.skel{aspect-ratio:2/3;border-radius:var(--r-s);border:1px solid var(--line-soft);background:var(--panel);
  position:relative;overflow:hidden}
.skel::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.045) 45%,transparent 70%);
  background-size:280% 100%;animation:sheen 1.5s linear infinite}

/* ============================================================
   WEEK: today marker + cover density
   ============================================================ */
.day.today{background:linear-gradient(180deg,rgba(255,61,119,.16),transparent 38%),var(--ink);
  box-shadow:inset 3px 0 0 var(--accent), inset 0 -1px 0 var(--accent)}
.day.today .day-h{background:linear-gradient(180deg,rgba(255,61,119,.14),rgba(11,12,22,.95))}
.day.today .day-h .n{color:#fff}
.now-tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-ui);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;padding:3px 9px;border-radius:4px;
  background:var(--accent-fill);color:#fff;font-weight:600;border:1px solid var(--accent-edge)}
.day-h .d{min-height:17px}

.week.covers .day{min-height:auto}
.covers-grid{display:grid;grid-template-columns:1fr;gap:var(--s3);padding:var(--s3)}
.wcard{display:flex;flex-direction:column;gap:8px;text-align:left;transition:.22s var(--tap)}
.wcard:hover{transform:translateY(-4px)}
.wcard .poster{position:relative;aspect-ratio:2/3;border-radius:var(--r-s);overflow:hidden;
  border:1px solid var(--line);background:var(--panel);box-shadow:0 14px 30px -18px rgba(0,0,0,.95)}
.wcard:hover .poster{border-color:var(--accent)}
.wcard.airing .poster{border-color:var(--crit);box-shadow:0 0 0 1px var(--crit)}
.wcard .wtime{position:absolute;left:8px;top:8px;font-family:var(--f-ui);font-size:12.5px;font-weight:700;
  letter-spacing:.06em;padding:3px 8px;border-radius:5px;background:rgba(6,6,11,.85);
  border:1px solid var(--line);color:var(--accent-2);backdrop-filter:blur(4px)}
.wcard .pill.live{position:absolute;right:8px;top:8px}
.wcard .wt{font-family:var(--f-ui);font-size:13.5px;font-weight:600;color:var(--bone);line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wcard .wm{font-family:var(--f-ui);font-size:11px;font-weight:500;color:var(--bone-2);letter-spacing:.05em}

/* ============================================================
   ROULETTE
   ============================================================ */
/* The wheel is the point of the section, so it gets the room; the controls
   are a column beside it rather than half the page. */
/* The wheel is the section; the controls are a column beside it. On a wide
   screen the wheel takes everything left over rather than half the page. */
.rl-panel{display:grid;grid-template-columns:minmax(280px,320px) minmax(0,1fr);gap:var(--s5);align-items:stretch}
.rl-controls{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.rl-row{display:flex;align-items:center;gap:var(--s3);justify-content:space-between}
.rl-row.wrap{flex-wrap:wrap;justify-content:flex-start}
.rl-row .k{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3)}
.rl-row .k em{font-style:normal;color:var(--accent-2);letter-spacing:.06em;text-transform:none;margin-left:8px}
.rl-chips{max-height:190px;overflow-y:auto;padding-right:4px}
.rl-chips::-webkit-scrollbar{width:5px}
.rl-chips::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.rl-go{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s2)}
.rl-go .btn{min-width:130px}

.rl-stage{height:clamp(460px,72vh,760px)}
.rl-slot{cursor:pointer}
.rl-blank{width:100%;height:100%;display:grid;place-items:center;background:var(--panel-2);
  border:1px dashed var(--line);color:var(--bone-3);font-family:var(--f-ui);font-size:34px}
.rl-marker{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:8;
  width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;
  border-top:16px solid var(--accent);filter:drop-shadow(0 3px 8px rgba(0,0,0,.7))}
#rlRing{transition:transform .7s var(--tap)}

.rl-card{display:grid;grid-template-columns:200px 1fr;gap:var(--s6);align-items:start;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:var(--s5);margin-top:var(--s6);
  animation:viewin .5s var(--tap)}
.rl-cover{position:relative;aspect-ratio:2/3;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--accent)}
.rl-cover svg,.rl-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rl-meta h3{font-family:var(--f-ui);font-size:clamp(20px,2.6vw,28px);margin-top:var(--s2)}
.rl-syn{color:var(--bone-2);font-size:14px;margin-top:var(--s4);max-width:66ch}
.rl-meta .row{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5)}

/* ============================================================
   RANKS
   ============================================================ */
.board{display:flex;flex-direction:column;gap:var(--s2)}
.rank{display:grid;grid-template-columns:44px minmax(180px,1.4fr) 3fr 92px;gap:var(--s4);align-items:center;
  border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel);padding:var(--s3) var(--s4);
  transition:.2s var(--tap)}
.rank:hover{border-color:var(--line)}
.rank.me{border-color:var(--accent-edge);background:linear-gradient(90deg,var(--accent-soft),transparent 45%),var(--panel)}
.rank .pos{font-family:var(--f-ui);font-size:19px;color:var(--bone-3);text-align:center;font-variant-numeric:tabular-nums}
.rank .pos.medal{color:var(--accent-ink);border-radius:10px;padding:3px 0;font-weight:700}
.rank .pos.m1{background:#FFC53D}.rank .pos.m2{background:#C7CCE0}.rank .pos.m3{background:#C8875A}
.rank .who{display:flex;align-items:center;gap:var(--s3);min-width:0}
.rank .who .av{width:40px;height:40px;border-radius:11px;overflow:hidden;border:1px solid var(--line);flex:0 0 auto;position:relative}
.rank .who .av svg,.rank .who .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rank .nm{display:block;font-family:var(--f-ui);font-size:14.5px}
.rank .nm .you{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent);border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:2px}
.rank .sub{display:block;font-size:11.5px;color:var(--bone-3);margin-top:1px}
.rank .bar{height:8px;border-radius:4px;background:var(--panel-3);overflow:hidden}
.rank .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .5s var(--tap)}
.rank .val{font-family:var(--f-ui);font-size:17px;text-align:right;font-variant-numeric:tabular-nums}

/* ============================================================
   DIALOG
   ============================================================ */
#dlg{position:fixed;inset:0;z-index:70;display:none;place-items:center;padding:var(--s5);
  background:rgba(4,4,9,.72);backdrop-filter:blur(7px)}
#dlg.on{display:grid}
.dlg-box{width:min(420px,100%);border:1px solid var(--line);border-radius:var(--r);background:var(--ink);
  box-shadow:var(--shadow);padding:var(--s5);animation:viewin .3s var(--tap)}
.dlg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}
.dlg-head h3{font-family:var(--f-ui);font-size:17px}
.dlg-head button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);color:var(--bone-3)}
.dlg-head button:hover{border-color:var(--crit);color:var(--crit)}
.dlg-body{display:flex;flex-direction:column;gap:var(--s4)}
.dlg-field span{display:block;font-family:var(--f-ui);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-3);margin-bottom:6px}
.dlg-field input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);
  padding:11px 13px;color:var(--bone);font-family:var(--f-ui)}
.dlg-foot{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s5)}

/* profile picker: add tile + uploaded pictures */
.profile .av img.pfp{width:100%;height:100%;object-fit:cover;display:block}
.profile .av.plus{display:grid;place-items:center;font-family:var(--f-ui);font-size:38px;color:var(--bone-3);
  background:var(--panel);border-style:dashed}
.profile.add:hover .av.plus{color:var(--accent);border-color:var(--accent)}

@media(max-width:1100px){
  .rl-panel{grid-template-columns:1fr}
  .rl-stage{height:clamp(340px,48vh,460px)}
}
@media(max-width:860px){
  .rank{grid-template-columns:34px 1fr 76px;gap:var(--s3)}
  .rank .bar{display:none}
  .rl-card{grid-template-columns:1fr}
  .rl-cover{max-width:190px}
  .hud-search{flex:1 1 auto}
}

/* schedule placeholder while the week is still arriving */
.skel-row{height:62px;border-radius:var(--r-s);background:var(--panel);border:1px solid var(--line-soft);
  position:relative;overflow:hidden}
.skel-row::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.04) 45%,transparent 70%);
  background-size:280% 100%;animation:sheen 1.5s linear infinite}

/* ============================================================
   ROULETTE: the wheel takes the screen, the pick lands on top
   ============================================================ */
body.rl-locked{overflow:hidden}
#rlStage.blown{position:fixed;inset:0;z-index:48;height:auto;border-radius:0;border:0;
  background:radial-gradient(80% 100% at 50% 118%,rgba(255,61,119,.20),transparent 62%),rgba(6,6,11,.975);
  backdrop-filter:blur(8px);animation:blowin .45s var(--tap)}
@keyframes blowin{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
#rlStage.blown .ring{top:48%}
#rlStage.blown .rl-marker{top:min(9vh,90px);border-left-width:15px;border-right-width:15px;border-top-width:22px}
#rlStage.blown .rl-slot{box-shadow:0 40px 90px -30px rgba(0,0,0,.98)}
.rl-exit{position:absolute;top:var(--s5);right:var(--s5);z-index:9;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:rgba(10,11,22,.85);color:var(--bone-2);font-size:15px;display:none}
#rlStage.blown .rl-exit{display:grid;place-items:center}
.rl-exit:hover{border-color:var(--crit);color:var(--crit)}

#rlWin{position:fixed;inset:0;z-index:52;display:none;place-items:center;padding:var(--s5);
  background:rgba(4,4,9,.60);backdrop-filter:blur(3px)}
#rlWin.on{display:grid}
/* the card still scrolls when a synopsis is long, it just never shows a bar:
   the buttons lift on hover, which was enough to flash one on and off */
.rl-win-card{scrollbar-width:none;-ms-overflow-style:none}
.rl-win-card::-webkit-scrollbar{width:0;height:0;display:none}
.rl-win-row{padding-bottom:3px}
.rl-win-card{position:relative;width:min(880px,100%);max-height:92vh;overflow-y:auto;
  border:1px solid var(--accent);border-radius:var(--r);padding:var(--s6);
  background:linear-gradient(150deg,rgba(255,61,119,.14),transparent 45%),var(--ink);
  box-shadow:0 0 0 1px rgba(255,61,119,.25),0 50px 120px -40px #000;
  animation:winpop .55s cubic-bezier(.16,1.1,.3,1)}
@keyframes winpop{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}
.rl-win-glow{position:absolute;inset:-1px;border-radius:var(--r);pointer-events:none;
  background:radial-gradient(60% 40% at 50% 0%,rgba(255,61,119,.28),transparent 70%)}
.rl-win-x{position:absolute;top:var(--s4);right:var(--s4);width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);color:var(--bone-3);display:grid;place-items:center;z-index:2}
.rl-win-x:hover{border-color:var(--crit);color:var(--crit)}
.rl-win-body{display:grid;grid-template-columns:230px 1fr;gap:var(--s6);align-items:start;margin-top:var(--s4)}
.rl-win-cover{position:relative;aspect-ratio:2/3;border-radius:var(--r-s);overflow:hidden;
  border:1px solid var(--accent);box-shadow:0 24px 60px -22px var(--accent)}
.rl-win-cover svg,.rl-win-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rl-win-card h2{font-family:var(--f-ui);font-size:clamp(22px,3.2vw,34px);line-height:1.12}
.rl-win-jp{font-size:14px;font-weight:700;color:var(--bone-2);margin-top:5px;letter-spacing:.01em}
.rl-win-syn{color:var(--bone-2);font-size:14.5px;margin-top:var(--s4);max-width:60ch}
.rl-win-row{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5)}
@media(max-width:720px){
  .rl-win-body{grid-template-columns:1fr}
  .rl-win-cover{max-width:190px}
}

/* ============================================================
   PLAY
   ============================================================ */
/* the stage: a tilted console slab that carries the one thing to do next */
.play-stage{margin-bottom:var(--s6)}
.play-core{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s6);
  align-items:center;padding:var(--s6) var(--s7);border-radius:var(--r);
  border:1px solid var(--accent-edge);
  background:
    radial-gradient(120% 160% at 12% -30%,rgba(255,77,141,.20),transparent 58%),
    radial-gradient(90% 130% at 100% 130%,rgba(53,228,232,.12),transparent 60%),
    linear-gradient(160deg,var(--panel-2),var(--ink) 70%);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.95),0 0 0 1px rgba(255,77,141,.18) inset;
  transition:transform .5s var(--tap)}
.play-core:hover{transform:rotateX(0deg) translateY(-2px)}
/* a hairline that reads as the front edge of the slab */
.play-core::after{content:'';position:absolute;left:6%;right:6%;bottom:-9px;height:9px;border-radius:0 0 40px 40px;
  background:linear-gradient(180deg,rgba(255,77,141,.30),transparent);filter:blur(5px);pointer-events:none}

/* No 3D here. Lifting the ring on its own layer made the browser rasterise it
   against the panel's gradient, and the seam of that layer showed as a pale
   square behind the circle. */
.core-ring{position:relative;width:150px;height:150px;flex:0 0 150px}
/* An svg clips to its own viewport, so the glow on the arc was being cut off
   at the edge of the 150px box and the seam read as a pale square behind the
   circle. Letting it paint outside is the whole fix; the arc keeps its glow. */
.core-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.core-ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.ring-bg{stroke:var(--panel-3)}
.ring-fg{stroke:var(--accent);transition:stroke-dashoffset .8s var(--tap);
  filter:drop-shadow(0 0 10px var(--accent))}
.ring-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.ring-mid .rl-lv{display:block;font-family:var(--f-ui);font-size:46px;font-weight:700;color:#fff}
.ring-mid .rl-k{display:block;font-family:var(--f-ui);font-size:10px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--bone-3);margin-top:4px}

.core-main{min-width:0}
.core-pts{font-family:var(--f-ui);line-height:1;display:flex;align-items:baseline;gap:var(--s3)}
.core-pts span{font-size:clamp(38px,5vw,58px);font-weight:700;color:#fff}
.core-pts small{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--bone-3)}
.core-next{font-family:var(--f-ui);font-size:12.5px;font-weight:500;color:var(--bone-2);
  letter-spacing:.06em;margin-top:var(--s3)}
.btn.lg{padding:15px 30px;font-size:14px;margin-top:var(--s5)}
.btn.lg.waiting{background:var(--panel-2);border-color:var(--line);color:var(--bone-3)}
.core-note{font-family:var(--f-ui);font-size:11.5px;font-weight:500;color:var(--bone-3);
  letter-spacing:.08em;margin-top:var(--s3)}
.core-note b{color:var(--accent-2);font-weight:700}

.core-facts{display:grid;grid-template-columns:repeat(2,minmax(96px,1fr));gap:var(--s3);
}
.fact{padding:var(--s3) var(--s4);border-radius:var(--r-s);border:1px solid var(--line-soft);
  background:rgba(6,6,11,.42);text-align:center}
.fact b{display:block;font-family:var(--f-ui);font-size:24px;font-weight:700;line-height:1;color:#fff}
.fact em{display:block;font-style:normal;font-family:var(--f-ui);font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);margin-top:5px}

/* the two things you can actually do, side by side and numbered */
.play-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--s5)}
.play-card{position:relative;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(165deg,var(--panel),var(--ink));padding:var(--s5) var(--s5) var(--s5);
  display:flex;flex-direction:column;gap:var(--s4);transition:.25s var(--tap)}
.play-card:hover{border-color:var(--accent-edge);transform:translateY(-3px);
  box-shadow:0 26px 60px -32px rgba(0,0,0,.9)}
.pc-h{display:flex;align-items:center;gap:var(--s3)}
.pc-n{font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--accent);
  border:1px solid var(--accent-edge);border-radius:5px;padding:3px 7px}
.pc-h h3{font-family:var(--f-ui);font-size:17px;font-weight:700;letter-spacing:.01em}
.pc-s{margin-left:auto;font-family:var(--f-ui);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;padding:4px 10px;border-radius:99px;border:1px solid var(--line);color:var(--bone-3)}
.pc-s.ready{border-color:var(--good);color:var(--good)}
.pc-s.done{border-color:var(--line);color:var(--bone-3)}
.play-card .btn{align-self:flex-start;margin-top:auto}

.rules{display:flex;flex-direction:column;gap:var(--s2)}
.rule{display:flex;align-items:baseline;gap:var(--s3);font-family:var(--f-ui);font-size:12.5px;
  font-weight:500;color:var(--bone-2);letter-spacing:.03em}
.rule b{font-size:17px;font-weight:700;color:#fff;min-width:46px}

.strip{display:flex;gap:var(--s2)}
.strip-day{flex:1;min-width:34px;text-align:center;padding:9px 4px;border-radius:var(--r-s);
  border:1px solid var(--line-soft);background:var(--panel);transition:.2s var(--tap)}
.strip-day .dn{display:block;font-family:var(--f-ui);font-size:9.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-3)}
.strip-day .dd{display:block;font-family:var(--f-ui);font-size:16px;font-weight:700;margin-top:3px}
.strip-day.on{border-color:var(--accent-edge);background:linear-gradient(180deg,var(--accent-soft),var(--panel))}
.strip-day.on .dd{color:#fff}
.strip-day.now{box-shadow:0 0 0 1px var(--accent-2)}
#playClaim:disabled,#playStart:disabled,#playDo:disabled{opacity:.5;cursor:default;transform:none}

@media(max-width:1000px){
  .play-core{gap:var(--s5);padding:var(--s5)}
  .core-facts{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}
}
@media(max-width:620px){
  .play-core{grid-template-columns:1fr;justify-items:center;text-align:center}
  .core-facts{grid-template-columns:repeat(2,1fr);width:100%}
}

.quiz{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:var(--s5)}
.q-head{display:flex;align-items:center;gap:var(--s4);font-family:var(--f-ui);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3)}
.q-head .q-pts{margin-left:auto;color:var(--accent-2);font-size:14px;letter-spacing:.06em}
.q-head .q-score{color:var(--bone-2);font-size:13px;letter-spacing:.06em}
.q-clock{height:4px;border-radius:2px;background:var(--panel-3);overflow:hidden;margin:var(--s3) 0 var(--s5)}
.q-clock i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.q-body{display:grid;grid-template-columns:260px 1fr;gap:var(--s6);align-items:start}
.q-cover{position:relative;aspect-ratio:2/3;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--line);
  transition:filter .12s linear}
.q-cover svg,.q-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.q-options{display:flex;flex-direction:column;gap:var(--s3)}
.q-opt{text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--panel-2);font-size:14.5px;transition:.16s var(--tap)}
.q-opt:hover:not(:disabled){border-color:var(--accent-2);transform:translateX(3px)}
.q-opt:disabled{cursor:default;opacity:.62}
.q-opt.right{border-color:var(--good);background:rgba(61,220,151,.16);color:#fff;opacity:1;font-weight:600}
.q-opt.wrong{border-color:var(--crit);background:rgba(255,84,112,.16);color:#fff;opacity:1}
#qReveal{margin-top:var(--s5);border-top:1px solid var(--line-soft);padding-top:var(--s4)}
.q-verdict{font-family:var(--f-ui);font-size:16px;letter-spacing:.06em}
.q-verdict.ok{color:var(--good)}
.q-verdict.no{color:var(--crit)}
.q-answer{margin-top:6px;font-size:14px}
.q-answer span{display:block;font-size:12px;color:var(--bone-3);margin-top:2px}
.q-row{display:flex;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap}

.q-summary{display:flex;gap:var(--s6);align-items:center;flex-wrap:wrap;
  border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel);padding:var(--s5)}
.q-total{font-family:var(--f-ui);text-align:center}
.q-total span{font-size:44px;line-height:1}
.q-total small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}
.q-total em{display:block;font-style:normal;color:var(--accent-2);font-size:14px;margin-top:6px}
.q-tiles{display:flex;gap:var(--s3);flex-wrap:wrap;flex:1}
.q-tile{width:88px;text-align:left}
.q-tile .mini{position:relative;display:block;aspect-ratio:2/3;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.q-tile .mini svg,.q-tile .mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.q-tile.ok .mini{border-color:var(--good)}
.q-tile.no .mini{border-color:var(--crit);opacity:.6}
.q-tile .qt{display:block;font-size:10.5px;color:var(--bone-3);margin-top:5px;line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s3)}
.badge-card{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel);
  padding:var(--s4);opacity:.42;transition:.2s var(--tap)}
.badge-card.on{opacity:1;border-color:var(--accent-edge);
  background:linear-gradient(150deg,var(--accent-soft),var(--panel))}
.badge-card .bn{font-family:var(--f-ui);font-size:14px}
.badge-card .bd{font-size:11.5px;color:var(--bone-3);margin-top:4px;line-height:1.4}

.unlock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s3)}
.unlock{display:flex;align-items:center;gap:var(--s3);border:1px solid var(--line-soft);border-radius:var(--r);
  background:var(--panel);padding:var(--s3) var(--s4);opacity:.45}
.unlock.on{opacity:1;border-color:var(--line)}
.unlock .sw2{width:22px;height:22px;border-radius:7px;flex:0 0 auto}
.unlock b{display:block;font-family:var(--f-ui);font-size:13px;font-weight:500}
.unlock em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3)}

@media(max-width:860px){
  .q-body{grid-template-columns:1fr}
  .q-cover{max-width:230px;margin:0 auto}
}

/* daily cooldown + EverythingMoe credit */
.cooldown{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel-2);
  padding:11px 16px;width:fit-content}
.cooldown .k{font-family:var(--f-ui);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}
.cooldown .tnum{font-family:var(--f-ui);font-size:17px;font-weight:700;color:var(--accent-2)}
#playStart:disabled{opacity:.4;cursor:default;transform:none}

.credit{display:flex;align-items:center;gap:var(--s4);text-decoration:none;margin-bottom:var(--s5);
  border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel);
  padding:var(--s4) var(--s5);transition:.2s var(--tap)}
.credit:hover{border-color:var(--accent-edge);transform:translateY(-2px);background:var(--panel-2)}
.credit-mark{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(150deg,var(--accent-fill),var(--accent-soft));color:#fff;
  font-family:var(--f-body);font-size:20px;font-weight:700}
.credit b{display:block;font-family:var(--f-ui);font-size:15px;font-weight:500}
.credit em{display:block;font-style:normal;font-size:12.5px;color:var(--bone-3);margin-top:2px}
.credit-go{margin-left:auto;font-family:var(--f-ui);font-size:11px;letter-spacing:.14em;color:var(--bone-3)}
.credit:hover .credit-go{color:var(--accent-2)}
@media(max-width:640px){ .credit-go{display:none} }

/* ============================================================
   ADMIN
   ============================================================ */
.gate-note{margin-top:var(--s4);font-family:var(--f-ui);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);text-align:center}

.stat.hot{border-color:var(--accent-edge);
  background:linear-gradient(180deg,var(--accent-soft),var(--panel))}

.adm-empty{border:1px dashed var(--line);border-radius:var(--r);padding:var(--s5);
  color:var(--bone-3);font-family:var(--f-ui);font-size:12.5px;letter-spacing:.08em}

.adm-queue{display:flex;flex-direction:column;gap:var(--s3)}
.adm-req{display:grid;grid-template-columns:44px 1fr auto;gap:var(--s4);align-items:center;
  padding:var(--s3) var(--s4);border-radius:var(--r);
  border:1px solid var(--accent-edge);background:linear-gradient(110deg,var(--accent-soft),var(--panel) 60%)}
.adm-req .av,.adm-row .av{width:44px;height:44px;border-radius:50%;overflow:hidden;
  border:1px solid var(--line);display:block;flex:0 0 44px}
.adm-req .av svg,.adm-row .av svg,.adm-req .av img,.adm-row .av img{width:100%;height:100%;display:block;object-fit:cover}
.adm-req .who,.adm-row .who{display:flex;align-items:center;gap:var(--s3);min-width:0}
.adm-req .who b,.adm-row .who b{display:block;font-family:var(--f-ui);font-size:15px;font-weight:700}
.adm-req .who em,.adm-row .who em{display:block;font-style:normal;font-family:var(--f-ui);
  font-size:11px;letter-spacing:.06em;color:var(--bone-3);margin-top:2px}
.adm-req .acts,.adm-row .acts{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}

.adm-table{border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.adm-head,.adm-row{display:grid;grid-template-columns:minmax(200px,2fr) 110px 110px minmax(150px,1fr) minmax(280px,auto);
  gap:var(--s4);align-items:center;padding:var(--s3) var(--s4)}
.adm-head{font-family:var(--f-ui);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone-3);background:var(--panel);border-bottom:1px solid var(--line-soft)}
.adm-row{border-bottom:1px solid var(--line-soft);background:var(--ink)}
.adm-row:last-child{border-bottom:0}
.adm-row:hover{background:var(--panel)}
.adm-row.me{box-shadow:inset 3px 0 0 var(--accent)}
.adm-row .tnum{font-family:var(--f-ui);font-size:12px;color:var(--bone-2)}

.adm-row .tag,.adm-req .tag{display:inline-block;font-family:var(--f-ui);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:4px 9px;border-radius:99px;border:1px solid var(--line);color:var(--bone-2)}
.adm-row .tag.active{border-color:var(--good);color:var(--good)}
.adm-row .tag.pending{border-color:var(--warn);color:var(--warn)}
.adm-row .tag.suspended{border-color:var(--crit);color:var(--crit)}
.adm-row .tag.admin{border-color:var(--accent);color:#fff;background:var(--accent-fill)}
.adm-row .tag.plain{color:var(--bone-3)}

.btn.danger:hover{border-color:var(--crit);color:var(--crit)}
.btn[disabled]{opacity:.38;cursor:not-allowed}
.btn[disabled]:hover{border-color:var(--line);color:inherit;transform:none}

@media(max-width:1100px){
  .adm-head{display:none}
  .adm-row{grid-template-columns:1fr;gap:var(--s3);padding:var(--s4)}
  .adm-row .acts{justify-content:flex-start}
  .adm-req{grid-template-columns:44px 1fr;row-gap:var(--s3)}
  .adm-req .acts{grid-column:1/-1;justify-content:flex-start}
}

/* one account opened up: everything the console knows about them */
.adm-row{cursor:pointer}
.adm-row.open{background:var(--panel-2);box-shadow:inset 3px 0 0 var(--accent-2)}
.adm-detail{display:none;border-bottom:1px solid var(--line-soft);background:rgba(6,6,11,.5)}
.adm-detail.on{display:block}
.adm-detail-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s5) var(--s7);padding:var(--s5) var(--s4) var(--s5) calc(var(--s4) + 56px)}
.adm-kvs{display:flex;flex-direction:column;gap:0}
.adm-kv{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:8px 0;border-bottom:1px solid var(--line-soft)}
.adm-kv:last-child{border-bottom:0}
.adm-kv span{font-family:var(--f-ui);font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-3);white-space:nowrap}
.adm-kv b{font-family:var(--f-ui);font-size:13.5px;font-weight:600;color:var(--bone);text-align:right}
.adm-recent-line{font-family:var(--f-ui);font-size:12.5px;font-weight:500;color:var(--bone-2);
  letter-spacing:.04em;margin-bottom:var(--s3)}
.adm-chips{display:flex;gap:var(--s2);flex-wrap:wrap}
.adm-chip{display:inline-flex;flex-direction:column;gap:2px;padding:6px 11px;border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--panel);font-family:var(--f-ui);font-size:12px;font-weight:600}
.adm-chip em{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-3)}
#admFind{min-width:200px}

/* ============================================================
   ARENA
   ============================================================ */
/* the crest. One shield path, tinted by tier, with the glyph on top. */
.emb{position:relative;display:inline-grid;place-items:center;flex:0 0 auto}
/* same as the level ring: the crest's glow must not be clipped square by the
   svg viewport it is painted in */
.emb svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.emb svg path{fill:color-mix(in srgb,var(--tone) 20%,#0B0C16);stroke:var(--tone);stroke-width:1.6;
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--tone) 55%,transparent))}
.emb b{position:relative;font-family:var(--f-ui);font-size:.42em;font-weight:700;color:var(--tone);
  text-shadow:0 0 14px var(--tone);line-height:1}

.rank-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-ui);font-size:10.5px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:99px;
  border:1px solid var(--tone);color:var(--tone);background:color-mix(in srgb,var(--tone) 12%,transparent)}
.rank-chip em{font-style:normal;color:var(--bone);letter-spacing:.04em}

/* the standings slab */
.ar-rank{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s7);align-items:center;
  padding:var(--s6) var(--s7);border-radius:var(--r);border:1px solid var(--line);
  background:radial-gradient(120% 160% at 10% -30%,rgba(255,77,141,.14),transparent 58%),
    linear-gradient(160deg,var(--panel-2),var(--ink) 72%);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95);transform:perspective(1200px) rotateX(2deg)}
.ar-tier{font-family:var(--f-ui);font-size:clamp(22px,3vw,32px);font-weight:700;letter-spacing:.02em}
.ar-mmr{font-family:var(--f-ui);display:flex;align-items:baseline;gap:var(--s2);margin-top:2px}
.ar-mmr span{font-size:30px;font-weight:700;color:#fff}
.ar-mmr small{font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-3)}
.ar-bar{height:7px;border-radius:4px;background:var(--panel-3);overflow:hidden;margin-top:var(--s3);max-width:420px}
.ar-bar i{display:block;height:100%;transition:width .7s var(--tap)}
.ar-to{font-family:var(--f-ui);font-size:11.5px;font-weight:500;color:var(--bone-2);letter-spacing:.08em;margin-top:7px}
.ar-record{display:grid;grid-template-columns:repeat(2,minmax(92px,1fr));gap:var(--s3)}

/* the ladder track */
.ladder{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s2);margin-top:var(--s5)}
.lad{position:relative;text-align:center;padding:var(--s3) 4px;border-radius:var(--r-s);
  border:1px solid var(--line-soft);background:var(--panel);opacity:.5;transition:.25s var(--tap)}
.lad.past{opacity:.85;border-color:color-mix(in srgb,var(--tone) 45%,var(--line-soft))}
.lad.on{opacity:1;border-color:var(--tone);transform:translateY(-4px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 22%,transparent),var(--panel));
  box-shadow:0 14px 32px -14px var(--tone)}
.lad-g{display:block;font-size:17px;color:var(--tone);line-height:1}
.lad-n{display:block;font-family:var(--f-ui);font-size:10.5px;font-weight:700;letter-spacing:.1em;margin-top:5px}
.lad-m{display:block;font-family:var(--f-ui);font-size:10px;font-weight:500;color:var(--bone-3);margin-top:2px}

/* opponents */
.opp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:var(--s4)}
.opp{display:grid;grid-template-columns:64px 1fr;gap:var(--s4);align-items:center;text-align:left;
  padding:var(--s4);border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(150deg,var(--panel),var(--ink));transition:.25s var(--tap)}
.opp:hover{border-color:var(--tone);transform:translateY(-3px);
  box-shadow:0 22px 50px -26px var(--tone)}
.opp-face{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--tone);background:radial-gradient(120% 120% at 30% 0%,color-mix(in srgb,var(--tone) 30%,transparent),var(--ink))}
.opp-face.av svg,.opp-face.av img{width:100%;height:100%;object-fit:cover;display:block}
.opp-jp{font-family:var(--f-body);font-size:22px;font-weight:700;color:var(--tone);text-shadow:0 0 16px var(--tone)}
.opp-b{min-width:0}
.opp-n{display:block;font-family:var(--f-ui);font-size:16px;font-weight:700;letter-spacing:.05em}
.opp-n .beaten{font-style:normal;color:var(--good);margin-left:7px;font-size:13px}
.opp-l{display:block;font-family:var(--f-ui);font-size:11.5px;font-weight:500;color:var(--bone-3);
  margin-top:3px;letter-spacing:.03em}
.opp-r{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3);flex-wrap:wrap}
.opp-r em{font-style:normal;font-family:var(--f-ui);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--bone-3)}

/* record */
.hist-list{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden;background:var(--line-soft)}
.hist{display:grid;grid-template-columns:34px 1fr 90px 62px 62px;gap:var(--s3);align-items:center;
  padding:11px var(--s4);background:var(--ink);font-family:var(--f-ui);font-size:12.5px;font-weight:500}
.hist .h-r{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-weight:700;font-size:11px}
.hist.win  .h-r{background:rgba(61,220,151,.18);color:var(--good);border:1px solid var(--good)}
.hist.loss .h-r{background:rgba(255,84,112,.16);color:var(--crit);border:1px solid var(--crit)}
.hist.draw .h-r{background:var(--panel-2);color:var(--bone-3);border:1px solid var(--line)}
.hist .h-v{font-weight:700}
.hist .h-s,.hist .h-m{color:var(--bone-3);text-align:right}
.hist .h-d{text-align:right;font-weight:700}
.hist .h-d.up{color:var(--good)}
.hist .h-d.down{color:var(--crit)}

/* the duel stage */
.ar-stage{border:1px solid var(--accent-edge);border-radius:var(--r);padding:var(--s5) var(--s6) var(--s6);
  background:radial-gradient(110% 130% at 50% -20%,rgba(255,77,141,.14),transparent 60%),
    linear-gradient(170deg,var(--panel),var(--ink) 70%);
  box-shadow:0 34px 80px -36px rgba(0,0,0,.95)}
.ar-score{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s5);align-items:center}
.ar-score .side{display:flex;flex-direction:column;gap:2px}
.ar-score .side.them{text-align:right;align-items:flex-end}
.ar-score .s-n{font-family:var(--f-ui);font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-3)}
.ar-score .them .s-n{color:var(--tone)}
.ar-score .s-v{font-family:var(--f-ui);font-size:clamp(30px,4.6vw,46px);font-weight:700;line-height:1;color:#fff}
.ar-score .s-vs{font-family:var(--f-mark);font-size:15px;letter-spacing:.2em;color:var(--accent)}
.ar-opp-state{font-family:var(--f-ui);font-size:10.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone-3);text-align:right;margin-top:6px}
.ar-opp-state.in{color:var(--accent-2)}
.ar-meta{display:flex;align-items:baseline;gap:var(--s4);margin-top:var(--s5);
  font-family:var(--f-ui);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-3)}
.ar-meta .ar-worth{margin-left:auto;font-size:15px;letter-spacing:.05em;color:var(--accent-2);text-transform:none}
.ar-verdict{font-family:var(--f-ui);font-size:17px;font-weight:700;letter-spacing:.05em}
.ar-verdict.ok{color:var(--good)}
.ar-verdict.no{color:var(--crit)}
.ar-vs-line{font-family:var(--f-ui);font-size:12.5px;font-weight:500;color:var(--bone-2);margin-top:var(--s3)}
.ar-vs-line b{color:#fff;font-weight:700}
#arReveal{margin-top:var(--s5);border-top:1px solid var(--line-soft);padding-top:var(--s4)}

/* hand-over between two people on one console */
.hand-card{max-width:560px;margin:var(--s8) auto;text-align:center;padding:var(--s7) var(--s6);
  border:1px solid var(--accent-edge);border-radius:var(--r);
  background:linear-gradient(160deg,var(--panel-2),var(--ink));box-shadow:var(--shadow)}
.hand-av{width:96px;height:96px;margin:0 auto var(--s5);border-radius:24px;overflow:hidden;
  border:1px solid var(--accent)}
.hand-av svg,.hand-av img{width:100%;height:100%;display:block;object-fit:cover}
.hand-card h3{font-family:var(--f-ui);font-size:23px;font-weight:700}
.hand-card p{color:var(--bone-2);font-size:14px;margin-top:var(--s3)}
.hand-card .btn{margin-top:var(--s6)}

/* the result */
.res-card{max-width:900px;margin:var(--s6) auto;padding:var(--s7) var(--s6);text-align:center;
  border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(170deg,var(--panel),var(--ink));
  box-shadow:var(--shadow);animation:winpop .5s cubic-bezier(.16,1.1,.3,1)}
.ar-result.win  .res-card{border-color:var(--good);
  background:radial-gradient(100% 80% at 50% 0%,rgba(61,220,151,.16),transparent 60%),linear-gradient(170deg,var(--panel),var(--ink))}
.ar-result.loss .res-card{border-color:var(--crit)}
.res-word{font-family:var(--f-mark);font-size:clamp(30px,6vw,58px);letter-spacing:.1em}
.ar-result.win  .res-word{color:var(--good);text-shadow:0 0 40px rgba(61,220,151,.5)}
.ar-result.loss .res-word{color:var(--crit)}
.ar-result.draw .res-word{color:var(--bone-2)}
.res-jp{font-size:13px;letter-spacing:.6em;color:var(--bone-3);margin-top:var(--s3)}
.res-scores{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s5);align-items:center;margin-top:var(--s6)}
.res-side{padding:var(--s4);border-radius:var(--r);border:1px solid var(--line-soft);background:var(--panel)}
.res-side.win{border-color:var(--good)}
.rs-n{display:block;font-family:var(--f-ui);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-3)}
.rs-v{display:block;font-family:var(--f-ui);font-size:42px;font-weight:700;line-height:1.1;color:#fff}
.rs-r{display:block;font-family:var(--f-ui);font-size:11px;font-weight:500;color:var(--bone-3);letter-spacing:.05em}
.res-mid{min-width:120px}
.res-delta{font-family:var(--f-ui);font-size:30px;font-weight:700;line-height:1}
.res-delta.up{color:var(--good)}
.res-delta.down{color:var(--crit)}
.res-mmr{font-family:var(--f-ui);font-size:15px;font-weight:600;color:var(--bone-2);margin-top:2px}
.res-rank{font-family:var(--f-ui);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin-top:4px}
.res-promo{margin-top:var(--s5);font-family:var(--f-ui);font-size:14px;font-weight:600;letter-spacing:.1em;
  padding:10px var(--s5);border-radius:99px;display:inline-block}
.res-promo.up{color:var(--good);border:1px solid var(--good);background:rgba(61,220,151,.12)}
.res-promo.down{color:var(--crit);border:1px solid var(--crit);background:rgba(255,84,112,.1)}
.res-pts{margin-top:var(--s5);font-family:var(--f-ui);font-size:14px;font-weight:600;color:var(--accent-2)}
.res-tape{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;margin-top:var(--s6)}
.tape{width:72px;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--line);
  background:var(--panel);transition:.2s var(--tap)}
.tape:hover{transform:translateY(-3px);border-color:var(--accent)}
.tape.won{border-color:var(--good)}
.tape.lost{border-color:var(--crit);opacity:.72}
.tape .mini{display:block;position:relative;aspect-ratio:2/3}
.tape .mini svg,.tape .mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tape-s{display:block;font-family:var(--f-ui);font-size:10px;font-weight:700;padding:4px 0;color:var(--bone-2)}
.res-card .q-row{justify-content:center;margin-top:var(--s6)}

@media(max-width:1000px){
  .ar-rank{grid-template-columns:auto 1fr;gap:var(--s5);padding:var(--s5)}
  .ar-record{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}
  .ladder{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:720px){
  .res-scores{grid-template-columns:1fr}
  .hist{grid-template-columns:30px 1fr 60px 52px}
  .hist .h-m{display:none}
}

/* ============================================================
   QUESTS, TITLES, PLATES
   ============================================================ */
.quest-grid{display:flex;flex-direction:column;gap:var(--s3)}
.quest{display:grid;grid-template-columns:46px 1fr auto;gap:var(--s4);align-items:center;
  padding:var(--s3) var(--s4);border-radius:var(--r);border:1px solid var(--line-soft);
  background:linear-gradient(120deg,var(--panel),var(--ink));transition:.25s var(--tap)}
.quest.done{border-color:var(--good);
  background:linear-gradient(120deg,rgba(61,220,151,.12),var(--ink) 60%)}
.quest.set-done{border-color:var(--gold);background:linear-gradient(120deg,rgba(255,197,61,.14),var(--ink) 60%)}
.qs-tick{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-family:var(--f-ui);font-size:15px;font-weight:700;border:1px solid var(--line);
  background:var(--panel-2);color:var(--bone-3)}
.quest.done .qs-tick{border-color:var(--good);color:var(--good);background:rgba(61,220,151,.14)}
.quest.set-done .qs-tick{border-color:var(--gold);color:var(--gold);background:rgba(255,197,61,.14)}
.qs-n{font-family:var(--f-ui);font-size:15px;font-weight:700}
.qs-d{font-family:var(--f-ui);font-size:12px;font-weight:500;color:var(--bone-2);margin-top:2px}
.qs-bar{height:4px;border-radius:2px;background:var(--panel-3);overflow:hidden;margin-top:8px;max-width:320px}
.qs-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .5s var(--tap)}
.qs-r{text-align:right}
.qs-p{display:block;font-family:var(--f-ui);font-size:16px;font-weight:700;color:var(--accent-2)}
.qs-c{display:block;font-family:var(--f-ui);font-size:11px;font-weight:600;color:var(--bone-3);margin-top:2px}
.streak-note{font-family:var(--f-ui);font-size:12.5px;font-weight:500;color:var(--bone-2)}
.streak-note b{color:#fff;font-weight:700}

.core-rank{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-radius:var(--r-s);border:1px solid var(--line-soft);background:rgba(6,6,11,.42)}
.prb-t{display:block;font-family:var(--f-ui);font-size:13px;font-weight:700;letter-spacing:.08em}
.prb-m{display:block;font-family:var(--f-ui);font-size:19px;font-weight:700;color:#fff;line-height:1.1}
.prb-m small{font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-3);margin-left:6px}

.title-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s3)}
.title-card{text-align:left;padding:var(--s3) var(--s4);border-radius:var(--r-s);
  border:1px solid var(--line-soft);background:var(--panel);opacity:.45;transition:.2s var(--tap)}
.title-card.got{opacity:1;border-color:color-mix(in srgb,var(--tone) 40%,var(--line))}
.title-card.got:hover{transform:translateY(-3px);border-color:var(--tone)}
.title-card.on{background:linear-gradient(120deg,color-mix(in srgb,var(--tone) 22%,transparent),var(--panel));
  border-color:var(--tone);box-shadow:0 0 0 1px var(--tone) inset}
.tc-n{display:block;font-family:var(--f-ui);font-size:13.5px;font-weight:700;color:var(--tone)}
.title-card:not(.got) .tc-n{color:var(--bone-3)}
.tc-h{display:block;font-family:var(--f-ui);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-3);margin-top:4px}

.plate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s3)}
.plate-card{text-align:left;padding:var(--s4);border-radius:var(--r-s);border:1px solid var(--line);
  opacity:.45;transition:.2s var(--tap)}
.plate-card.got{opacity:1}
.plate-card.got:hover{transform:translateY(-3px);border-color:var(--accent)}
.plate-card.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.pl-n{display:block;font-family:var(--f-ui);font-size:13.5px;font-weight:700}
.pl-h{display:block;font-family:var(--f-ui);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-3);margin-top:4px}
.badge-card .bt{font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-top:7px}

/* the worn title, in the top bar and on the ranks board */
.who .trigger{border-radius:var(--r-s)}
.who-b{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0}
.who-n{font-family:var(--f-ui);font-size:13px;font-weight:600}
.who-t{font-family:var(--f-ui);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.who-r{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:12px;
  color:var(--tone);border:1px solid var(--tone);
  background:color-mix(in srgb,var(--tone) 14%,transparent);margin-left:4px}
.rank .worn{font-family:var(--f-ui);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-left:6px}
.bd-rank{display:flex;align-items:center;gap:7px;font-family:var(--f-ui);color:var(--tone);
  font-size:15px;font-weight:700}
.bd-rank em{font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase}

/* the ladder view of the board carries a rank column, so the grid widens */
.rank:has(.bd-rank){grid-template-columns:44px minmax(180px,1.4fr) 150px 3fr 92px}
@media(max-width:860px){ .rank:has(.bd-rank){grid-template-columns:34px 1fr 92px} .rank .bd-rank em{display:none} }

/* promotion, the moment the ladder moves */
.promo-card{display:inline-flex;align-items:center;gap:var(--s4);margin-top:var(--s5);
  padding:var(--s4) var(--s6);border-radius:var(--r);border:1px solid var(--tone);
  background:linear-gradient(120deg,color-mix(in srgb,var(--tone) 20%,transparent),var(--ink));
  box-shadow:0 0 40px -12px var(--tone);animation:winpop .6s cubic-bezier(.16,1.1,.3,1) .2s both}
.promo-card b{display:block;font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone-3)}
.promo-card em{display:block;font-style:normal;font-family:var(--f-ui);font-size:22px;font-weight:700;
  color:var(--tone);line-height:1.2}
.promo-card.down em{color:var(--bone-2)}
.promo-t{font-family:var(--f-ui);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);border-left:1px solid var(--line);padding-left:var(--s4)}

/* ============================================================
   ARENA: the live board
   ============================================================ */
.find-row{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s6);
  padding:var(--s5) var(--s6);border-radius:var(--r);border:1px solid var(--accent-edge);
  background:radial-gradient(120% 200% at 0% 0%,rgba(255,77,141,.16),transparent 60%),var(--panel)}
.find-note{font-family:var(--f-ui);font-size:12.5px;font-weight:500;color:var(--bone-2);
  letter-spacing:.03em;max-width:60ch}

/* looking for someone */
.search-card{max-width:640px;margin:var(--s8) auto;text-align:center;padding:var(--s7) var(--s6);
  border:1px solid var(--accent-edge);border-radius:var(--r);
  background:radial-gradient(110% 90% at 50% 0%,rgba(255,77,141,.16),transparent 62%),
    linear-gradient(170deg,var(--panel-2),var(--ink));box-shadow:var(--shadow)}
.radar{position:relative;width:120px;height:120px;margin:0 auto var(--s6)}
.radar i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent);
  opacity:0;animation:ping 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.radar i:nth-child(2){animation-delay:.8s}
.radar i:nth-child(3){animation-delay:1.6s}
@keyframes ping{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1);opacity:0}}
.search-card h3{font-family:var(--f-ui);font-size:23px;font-weight:700}
.search-meta{display:flex;justify-content:center;gap:var(--s4);margin-top:var(--s3);
  font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-3)}
.search-meta .tnum{color:var(--accent-2)}
.search-where{font-family:var(--f-ui);font-size:12.5px;font-weight:500;color:var(--bone-2);
  margin-top:var(--s4);max-width:52ch;margin-left:auto;margin-right:auto}
.search-where code{background:var(--panel-3);padding:2px 6px;border-radius:4px;font-size:11.5px}
.seeker-list{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s5)}
.seeker{display:flex;align-items:center;gap:var(--s3);padding:9px var(--s4);border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--panel);text-align:left}
.seeker b{display:block;font-family:var(--f-ui);font-size:14px;font-weight:700}
.seeker em{display:block;font-style:normal;font-family:var(--f-ui);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3)}
.search-card .q-row{justify-content:center;margin-top:var(--s6)}

/* both sides of the board, side by side */
.duel-body{display:grid;grid-template-columns:230px 1fr;gap:var(--s6);align-items:start;margin-top:var(--s5)}
.duel-sides{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);min-width:0}
.duel-side{min-width:0}
.ds-h{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s3);
  padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.ds-n{font-family:var(--f-ui);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-state{margin-left:auto;font-family:var(--f-ui);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);white-space:nowrap}
.side-state.in{color:var(--accent-2)}
.side-state.ok{color:var(--good)}
.side-state.no{color:var(--crit)}

/* the opponent's four, unreadable until both are locked in */
.ghost-options{display:flex;flex-direction:column;gap:var(--s3)}
.g-opt{position:relative;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--panel-2);font-family:var(--f-body);font-size:14.5px;font-weight:500;
  transition:.2s var(--tap);overflow:hidden}
.ghost-options.masked .g-opt span{filter:blur(7px);opacity:.75;user-select:none}
.ghost-options.masked .g-opt{color:var(--bone-3)}
.g-opt.locked{border-color:var(--accent-2);box-shadow:0 0 0 1px var(--accent-2) inset}
.g-opt.locked::after{content:'LOCKED';position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-family:var(--f-ui);font-size:9px;font-weight:700;letter-spacing:.2em;color:var(--accent-2)}
.ghost-options:not(.masked) .g-opt.right{border-color:var(--good);background:rgba(61,220,151,.16);color:#fff}
.ghost-options:not(.masked) .g-opt.wrong{border-color:var(--crit);background:rgba(255,84,112,.16);color:#fff}
.ghost-options:not(.masked) .g-opt.locked::after{content:''}
.q-opt.locked{border-color:var(--accent-2);box-shadow:0 0 0 1px var(--accent-2) inset;opacity:1}

/* the five seconds between rounds */
.ar-next{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.ar-next-k{font-family:var(--f-ui);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-3)}
.ar-next-bar{flex:1;max-width:220px;height:4px;border-radius:2px;background:var(--panel-3);overflow:hidden}
.ar-next-bar i{display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.ar-next .tnum{font-family:var(--f-ui);font-size:17px;font-weight:700;color:var(--accent-2);min-width:20px}
.ar-next .btn{margin-left:auto}
.opp.mirror{border-color:var(--tone);box-shadow:0 0 0 1px color-mix(in srgb,var(--tone) 45%,transparent) inset}

@media(max-width:1100px){
  .duel-body{grid-template-columns:1fr}
  .q-cover{max-width:220px;margin:0 auto}
}
@media(max-width:760px){
  .duel-sides{grid-template-columns:1fr}
}

/* ============================================================
   HOME: the way in to everything else
   ============================================================ */
.doors{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--s3)}
.door{display:grid;grid-template-columns:48px 1fr;gap:var(--s4);align-items:start;text-align:left;
  padding:var(--s4);border-radius:var(--r);border:1px solid var(--line-soft);
  background:linear-gradient(150deg,var(--panel),var(--ink));transition:.22s var(--tap)}
.door:hover{border-color:var(--accent);transform:translateY(-3px);
  box-shadow:0 22px 48px -26px rgba(0,0,0,.9)}
.door-jp{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
  font-family:var(--f-body);font-size:22px;font-weight:700;color:var(--accent);
  border:1px solid var(--line);background:rgba(6,6,11,.5)}
.door:hover .door-jp{border-color:var(--accent);box-shadow:0 0 24px -8px var(--accent)}
.door-b{min-width:0}
.door-h{display:flex;align-items:center;gap:var(--s3);justify-content:space-between}
.door-n{font-family:var(--f-ui);font-size:15px;font-weight:700;letter-spacing:.02em}
.door-d{display:block;font-family:var(--f-ui);font-size:11.5px;font-weight:500;color:var(--bone-3);
  margin-top:3px;letter-spacing:.02em;line-height:1.4}
.door-v{flex:0 0 auto;font-family:var(--f-ui);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-2);border:1px solid var(--line);border-radius:99px;
  padding:4px 9px;white-space:nowrap}

/* ============================================================
   RANKS: two boards
   ============================================================ */
.board-switch{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:stretch}
.bs{display:grid;grid-template-columns:44px 1fr;gap:var(--s3);align-items:center;text-align:left;
  flex:1 1 260px;padding:var(--s4);border-radius:var(--r);border:1px solid var(--line);
  background:var(--panel);transition:.22s var(--tap)}
.bs:hover{border-color:var(--bone-3)}
.bs.on{border-color:var(--accent);background:linear-gradient(140deg,var(--accent-soft),var(--panel));
  box-shadow:0 0 0 1px var(--accent) inset}
.bs-g{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:19px;
  color:var(--bone-3);border:1px solid var(--line);background:rgba(6,6,11,.45)}
.bs.on .bs-g{color:var(--accent);border-color:var(--accent)}
.bs-b b{display:block;font-family:var(--f-ui);font-size:15px;font-weight:700}
.bs-b em{display:block;font-style:normal;font-family:var(--f-ui);font-size:11px;font-weight:500;
  color:var(--bone-3);margin-top:2px;letter-spacing:.03em}
.board-switch .btn{align-self:center;flex:0 0 auto}
.seg-label{font-family:var(--f-ui);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-3)}

/* ============================================================
   PROFILE
   ============================================================ */
.pf-plate{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s5);align-items:center;
  padding:var(--s6);border-radius:var(--r);border:1px solid var(--line);
  box-shadow:0 28px 64px -32px rgba(0,0,0,.95)}
.pf-av{width:92px;height:92px;border-radius:24px;overflow:hidden;border:1px solid var(--line)}
.pf-av svg,.pf-av img{width:100%;height:100%;display:block;object-fit:cover}
.pf-name{font-family:var(--f-ui);font-size:clamp(24px,3.4vw,34px);font-weight:700;line-height:1.1}
.pf-title{font-family:var(--f-ui);font-size:13px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;margin-top:5px}
.pf-title.none{color:var(--bone-3);letter-spacing:.14em}
.pf-line{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s4);
  font-family:var(--f-ui);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-2)}
.pf-rank{color:var(--tone)}
.pf-group{margin-bottom:var(--s5)}
.pf-group-h{font-family:var(--f-ui);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-3);margin-bottom:var(--s3)}

.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s3)}
.acc-card{display:flex;align-items:center;gap:var(--s3);text-align:left;padding:var(--s3) var(--s4);
  border-radius:var(--r-s);border:1px solid var(--line-soft);background:var(--panel);
  opacity:.45;transition:.2s var(--tap)}
.acc-card.got{opacity:1}
.acc-card.got:hover{transform:translateY(-3px);border-color:var(--accent)}
.acc-card.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.acc-sw{width:26px;height:26px;border-radius:8px;flex:0 0 auto}
.acc-b b{display:block;font-family:var(--f-ui);font-size:13px;font-weight:700}
.acc-b em{display:block;font-style:normal;font-family:var(--f-ui);font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3);margin-top:2px}

/* a hairline between the groups in the rail */
.nav-sep{display:block;height:1px;margin:var(--s3) 22%;background:var(--line-soft)}

/* ============================================================
   ARENA: modes, bans, forfeit
   ============================================================ */
.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s3)}
.mode-card,.mode-pick{display:grid;grid-template-columns:46px 1fr;gap:var(--s4);align-items:start;
  text-align:left;padding:var(--s4);border-radius:var(--r);border:1px solid var(--line-soft);
  background:linear-gradient(150deg,var(--panel),var(--ink));position:relative;transition:.22s var(--tap)}
.mode-pick{cursor:pointer}
.mode-pick:hover:not([disabled]){border-color:var(--accent);transform:translateY(-3px)}
.mode-pick[disabled]{cursor:default}
.mode-jp{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  font-family:var(--f-body);font-size:21px;font-weight:700;color:var(--accent);
  border:1px solid var(--line);background:rgba(6,6,11,.5)}
.mode-b b{display:block;font-family:var(--f-ui);font-size:15px;font-weight:700}
.mode-b em{display:block;font-style:normal;font-family:var(--f-ui);font-size:11.5px;font-weight:500;
  color:var(--bone-3);margin-top:3px;line-height:1.45}
.mode-n{display:block;font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-2);margin-top:7px}
.mode-pick.banned{opacity:.42;border-color:var(--crit)}
.mode-pick.banned .mode-jp{color:var(--crit);border-color:var(--crit)}
.ban-x{position:absolute;top:var(--s3);right:var(--s3);font-family:var(--f-ui);font-size:9px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--crit)}
.mode-pick.by-me .ban-x{color:var(--accent)}

.ban-card{max-width:1000px;margin:var(--s6) auto;padding:var(--s6);border-radius:var(--r);
  border:1px solid var(--accent-edge);
  background:radial-gradient(110% 90% at 50% 0%,rgba(255,77,141,.14),transparent 62%),
    linear-gradient(170deg,var(--panel-2),var(--ink));box-shadow:var(--shadow)}
.ban-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  margin-bottom:var(--s5);flex-wrap:wrap}
.ban-h h3{font-family:var(--f-ui);font-size:clamp(18px,2.4vw,24px);font-weight:700;margin-top:4px}
.ban-clock{text-align:center}
.ban-clock .tnum{display:block;font-family:var(--f-ui);font-size:38px;font-weight:700;
  color:var(--accent-2);line-height:1}
.ban-clock em{font-style:normal;font-family:var(--f-ui);font-size:9.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}
.ban-state{margin-top:var(--s5);font-family:var(--f-ui);font-size:14px;font-weight:600;
  color:var(--bone-2);text-align:center;letter-spacing:.03em}

/* friendly picker */
.fr-card{margin-top:var(--s5);padding:var(--s5);border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel)}
.fr-card h3{font-family:var(--f-ui);font-size:19px;font-weight:700}
.fr-card p{color:var(--bone-2);font-size:13.5px;margin:4px 0 var(--s4)}
.fr-card .btn{margin-top:var(--s4)}
.fr-warn{color:var(--bone-2);font-size:14px;line-height:1.6}

/* the two ways to start a duel with a person */
.opp.person{grid-template-columns:64px 1fr auto}
.opp.person:hover{transform:none}

/* the prompt above the buttons, per mode */
.ar-prompt.credits,.ar-prompt.synopsis,.ar-prompt.versus{display:grid;align-items:start}
.credits-card,.syn-card,.versus-card{border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(160deg,var(--panel-2),var(--ink));padding:var(--s5)}
.cc-k{font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone-3);margin-bottom:var(--s3)}
.cc-l{font-family:var(--f-ui);font-size:15px;font-weight:600;color:var(--bone-2);
  padding:7px 0;border-bottom:1px solid var(--line-soft)}
.cc-l:last-child{border-bottom:0}
.cc-l.big{font-size:clamp(19px,2.6vw,26px);font-weight:700;color:#fff;letter-spacing:.01em}
.syn-card p{font-size:14px;line-height:1.75;color:var(--bone-2);max-height:340px;overflow-y:auto}
.versus-card{text-align:center}
.vs-mark{font-family:var(--f-body);font-size:64px;font-weight:700;color:var(--accent);
  text-shadow:0 0 40px var(--accent);line-height:1.2}

/* the two-cover mode puts art on the buttons */
.q-opt.with-art,.g-opt.with-art{display:flex;align-items:center;gap:var(--s3);padding:10px 12px}
.opt-art{position:relative;width:44px;height:64px;flex:0 0 44px;border-radius:6px;overflow:hidden;
  border:1px solid var(--line)}
.opt-art svg,.opt-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ghost-options.masked .g-opt.with-art .opt-art{filter:blur(6px)}
.opt-t{min-width:0;overflow:hidden;text-overflow:ellipsis}

.ar-meta .btn.danger{margin-left:var(--s4)}
.ar-meta{flex-wrap:wrap}
.unrated{font-style:normal;color:var(--good);font-weight:700}
.res-mode{font-family:var(--f-ui);font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-3);margin-top:var(--s3)}
.hist .h-v em{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-3);margin-left:6px}

/* the manga radar under the broadcast week */
.radar-week .day{min-height:150px}
.ep.mg .tm{color:var(--gold)}
.ep.mg .mini{border-color:var(--gold)}
.radar-note{font-family:var(--f-ui);font-size:11.5px;font-weight:500;color:var(--bone-3);
  line-height:1.6;margin-top:var(--s4);max-width:80ch}

/* ---------- phone: the sections that need their own handling ---------- */
@media(max-width:820px){
  /* the broadcast week reads as a list of days rather than seven columns */
  .week{grid-template-columns:1fr;border-radius:var(--r)}
  .day{min-height:0}
  /* not sticky on a phone: the column is the page, so a floating header just
     sits on top of the first row */
  .day-h{position:static;background:var(--panel)}
  .week.covers .covers-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}

  /* arena */
  .ar-rank{grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--s4);
    padding:var(--s5);transform:none}
  .ar-bar{margin-left:auto;margin-right:auto}
  .ar-record{grid-template-columns:repeat(2,1fr);width:100%}
  .ladder{grid-template-columns:repeat(4,1fr)}
  .opp-hit .opp-face{width:46px;height:46px}
  .duel-body{grid-template-columns:1fr}
  .duel-sides{grid-template-columns:1fr;gap:var(--s4)}
  .ar-prompt .q-cover{max-width:190px;margin:0 auto}
  .ar-score .s-v{font-size:30px}
  .ar-meta{font-size:10.5px;gap:var(--s3)}
  .ar-meta .btn.danger{margin-left:0}
  .ban-card{padding:var(--s5)}
  .mode-grid{grid-template-columns:1fr}
  .res-scores{grid-template-columns:1fr}
  .search-card{margin:var(--s5) auto;padding:var(--s6) var(--s4)}

  /* play */
  .play-core{grid-template-columns:1fr;justify-items:center;text-align:center;transform:none}
  .core-facts{grid-template-columns:repeat(2,1fr);width:100%}
  .core-rank{width:100%;justify-content:center}
  .play-grid{grid-template-columns:1fr}
  .quest{grid-template-columns:38px 1fr;row-gap:var(--s2)}
  .qs-r{grid-column:2;text-align:left;display:flex;gap:var(--s3);align-items:baseline}

  /* ranks, profile, admin */
  .board-switch{flex-direction:column}
  .board-switch .btn{width:100%}
  .rank{grid-template-columns:34px 1fr auto;gap:var(--s3)}
  .rank .bar{display:none}
  .rank:has(.bd-rank){grid-template-columns:34px 1fr auto}
  .rank .bd-rank{display:none}
  .pf-plate{grid-template-columns:1fr;justify-items:center;text-align:center}
  .pf-line{justify-content:center}
  .title-grid,.plate-grid,.acc-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .doors{grid-template-columns:1fr}
  .adm-req{grid-template-columns:44px 1fr}
  .adm-req .acts{grid-column:1/-1}
  .adm-detail-in{padding:var(--s4)}

  /* roulette */
  .rl-panel{grid-template-columns:1fr}
  .rl-controls{min-width:0}
  .rl-row{flex-wrap:wrap;gap:var(--s2)}
  .rl-row .seg{width:auto;flex:1 1 100%}
  .rl-row.wrap select{flex:1 1 calc(50% - var(--s2));min-width:0}
  .rl-chips{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px}
  .rl-stage{height:clamp(300px,42vh,380px)}
  #rlStage.blown{height:100vh}
  .rl-card{grid-template-columns:1fr}
  .rl-win-card{padding:var(--s5)}
  .rl-win-body{grid-template-columns:1fr}
  .rl-win-cover{max-width:150px}

  /* streams and index */
  .plat-grid,.site-grid{grid-template-columns:1fr}
}

/* ============================================================
   PHONE
   The rail becomes a bar along the bottom, the top bar sheds
   what does not fit, and everything that was a wide grid falls
   into one column. Touch targets are never under 44px.
   ============================================================ */
@media(max-width:820px){
  :root{ --hud:52px; --rail:0px; }

  .hud{gap:var(--s3);padding:0 var(--s4)}
  .hud .ticker,.hud .clock{display:none}
  .hud-search{flex:1 1 auto;min-width:0}
  .hud .brand{font-size:13px;letter-spacing:.16em}
  .who .trigger{padding:4px 6px}
  .who-b{display:none}

  /* the rail moves to the bottom, where a thumb can reach it */
  .layout{grid-template-columns:1fr}
  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:35;
    flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:0;padding:0;
    border-right:0;border-top:1px solid var(--line);
    background:linear-gradient(0deg,rgba(9,10,20,.98),rgba(9,10,20,.92));
    backdrop-filter:blur(14px);scrollbar-width:none;
    padding-bottom:env(safe-area-inset-bottom,0)}
  .rail::-webkit-scrollbar{display:none}
  .rail .nav{flex:0 0 auto;width:auto;min-width:64px;padding:9px 12px;gap:4px}
  .rail .nav em{font-size:8.5px;letter-spacing:.1em}
  .rail .nav.on::before{left:12%;right:12%;top:0;bottom:auto;width:auto;height:2px}
  .nav-sep{flex:0 0 1px;width:1px;height:26px;margin:auto var(--s2);background:var(--line)}
  .rail .badge{top:4px;right:10px}

  main{padding:var(--s5) var(--s4) calc(var(--s8) + 76px)}
  h1{font-size:clamp(24px,7vw,34px)}
  .h-sec{font-size:clamp(19px,5.5vw,26px)}

  /* filter bars stack and scroll rather than wrapping into a wall */
  .filters{gap:var(--s2);padding:var(--s3)}
  .filters select,.filters input[type=search]{min-width:0;width:100%;flex:1 1 140px}
  .count{margin-left:0;width:100%;order:99}
  .seg{width:100%;overflow-x:auto;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:0 0 auto}
  .chiprow{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;width:100%}
  .chiprow::-webkit-scrollbar{display:none}
  .chiprow > *{flex:none;white-space:nowrap}

  /* touch targets */
  .btn{padding:12px 18px}
  .btn.sm{padding:10px 14px;font-size:12px}
  .q-opt{padding:16px}
  select,input[type=search],input[type=text],input[type=password]{min-height:44px}

  /* the wide grids fall to one column */
  .grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--s3)}
  .rail-scroll .card{flex:0 0 138px}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .hero{padding:var(--s6) var(--s5)}
  .nowbar{grid-template-columns:repeat(2,1fr)}
  .cta{flex-wrap:wrap}
  .cta .btn{flex:1 1 auto}

  /* the dossier becomes a sheet */
  #dossier{padding:0;align-items:end}
  .dos-inner{max-height:94vh;border-radius:var(--r) var(--r) 0 0;width:100%}
  .dos-hero{grid-template-columns:1fr;padding:var(--s5);gap:var(--s4)}
  .dos-hero .key{max-width:150px}
  .dos-body{padding:var(--s5) var(--s5) var(--s8)}
  .spec{grid-template-columns:1fr;padding:var(--s2) var(--s4)}
  .spec dt{flex:0 0 104px;font-size:10px;letter-spacing:.14em}

  .dlg-box{width:100%}
  #dlg{padding:var(--s4);align-items:end}
}

@media(max-width:520px){
  .stat-row{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
  .profiles{gap:var(--s4)}
  .profile{width:118px}
  .profile .av{width:76px;height:76px}
}

/* a device that cannot hover should not depend on it */
@media(hover:none){
  .card:hover,.door:hover,.opp:hover,.mode-pick:hover,.title-card.got:hover,
  .plate-card.got:hover,.acc-card.got:hover,.play-card:hover,.tape:hover{transform:none}
}

@media(max-width:820px){
  /* the toast has to clear the bar the rail became */
  #toast{bottom:calc(84px + env(safe-area-inset-bottom,0px));left:var(--s4);right:var(--s4);
    transform:translate(0,220%);width:auto;max-width:none;text-align:center}
  #toast.on{transform:translate(0,0)}
  /* and so does anything pinned to the bottom of the screen */
  #dlg,#rlWin,#dossier{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}

/* ---------- the opponent's side: one card, never a hint ---------- */
.ghost-panel{border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(160deg,var(--panel-2),var(--ink));min-height:180px;
  display:grid;place-items:center;padding:var(--s5);transition:.25s var(--tap)}
.gh-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s3);max-width:100%}
.gh-k{font-family:var(--f-ui);font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone-3)}
.gh-h{font-family:var(--f-ui);font-size:11px;font-weight:500;color:var(--bone-3);max-width:30ch;line-height:1.5}
.gh-a{font-family:var(--f-ui);font-size:16px;font-weight:700;color:#fff;line-height:1.3}
.gh-a .opt-alt{display:block;font-size:11.5px;font-weight:600;color:var(--bone-2);margin-top:3px}
.gh-p{font-family:var(--f-ui);font-size:19px;font-weight:700;color:var(--accent-2)}
.ghost-panel.locked{border-color:var(--accent-2);
  background:linear-gradient(160deg,rgba(53,228,232,.10),var(--ink))}
.ghost-panel.locked .gh-k{color:var(--accent-2)}
.gh-seal{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:22px;
  color:var(--accent-2);border:2px solid var(--accent-2);
  box-shadow:0 0 26px -6px var(--accent-2);animation:sealin .35s var(--tap)}
@keyframes sealin{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.gh-dots{display:flex;gap:7px}
.gh-dots i{width:9px;height:9px;border-radius:50%;background:var(--bone-3);animation:think 1.1s infinite}
.gh-dots i:nth-child(2){animation-delay:.18s}
.gh-dots i:nth-child(3){animation-delay:.36s}
@keyframes think{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}
.ghost-panel.shown.ok{border-color:var(--good);background:linear-gradient(160deg,rgba(61,220,151,.12),var(--ink))}
.ghost-panel.shown.ok .gh-k{color:var(--good)}
.ghost-panel.shown.no{border-color:var(--crit);background:linear-gradient(160deg,rgba(255,84,112,.10),var(--ink))}
.ghost-panel.shown.no .gh-k{color:var(--crit)}
.ghost-panel .opt-art{width:64px;height:94px;flex:none}

/* both title forms on an option */
.q-opt{text-align:left}
.opt-t{display:block;min-width:0}
.opt-alt{display:block;font-family:var(--f-ui);font-size:11.5px;font-weight:600;
  color:var(--bone-3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-opt.right .opt-alt,.q-opt.wrong .opt-alt{color:rgba(255,255,255,.72)}

/* a redaction is drawn, so it never depends on a font owning a block glyph */
.rd{display:inline-block;height:.95em;vertical-align:-.14em;border-radius:3px;
  background:linear-gradient(100deg,var(--panel-3),var(--line) 60%,var(--panel-3));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);margin:0 1px}

.mag-list{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.mag-list span{font-family:var(--f-ui);font-size:11px;font-weight:600;color:var(--bone-3);
  border:1px solid var(--line);border-radius:99px;padding:4px 10px}

/* ---------- a challenge, going out or coming in ---------- */
.invite-card{display:grid;grid-template-columns:1fr auto auto;gap:var(--s5);align-items:center;
  margin-top:var(--s5);padding:var(--s5) var(--s6);border-radius:var(--r);
  border:1px solid var(--accent-edge);
  background:radial-gradient(120% 200% at 0% 0%,rgba(255,77,141,.18),transparent 60%),var(--panel);
  animation:winpop .35s var(--tap)}
.invite-card.in{border-color:var(--accent-2);
  background:radial-gradient(120% 200% at 0% 0%,rgba(53,228,232,.16),transparent 60%),var(--panel)}
.iv-k{font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone-3)}
.iv-n{font-family:var(--f-ui);font-size:19px;font-weight:700;margin-top:4px}
.iv-h{font-family:var(--f-ui);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-2);margin-top:4px}
.iv-clock{text-align:center}
.iv-clock .tnum{display:block;font-family:var(--f-ui);font-size:30px;font-weight:700;
  color:var(--accent-2);line-height:1}
.iv-clock em{font-style:normal;font-family:var(--f-ui);font-size:9px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}
.iv-go{display:flex;gap:var(--s2)}

/* whether a name in the account list is a person who could answer */
.pres{font-style:normal;font-family:var(--f-ui);font-size:9px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;padding:3px 8px;border-radius:99px;margin-left:8px;
  border:1px solid var(--line);color:var(--bone-3)}
.pres.on{border-color:var(--good);color:var(--good);background:rgba(61,220,151,.12)}
.opp.person.here{border-color:color-mix(in srgb,var(--good) 40%,var(--line))}

@media(max-width:820px){
  .invite-card{grid-template-columns:1fr auto;row-gap:var(--s3);padding:var(--s4)}
  .iv-go{grid-column:1/-1}
  .iv-go .btn{flex:1}
}

/* ============================================================
   THE FILTER BANK
   ============================================================ */
.fbank{margin:0 0 var(--s5)}
.fbank:empty{display:none}
.fb-head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) var(--s4);border:1px solid var(--line-soft);border-radius:var(--r);
  background:rgba(16,18,39,.5)}

/* When the head sits in the control bar it is just another control there:
   no panel of its own, no border, nothing to suggest it belongs elsewhere. */
.fb-slot{display:contents}
.fb-slot .fb-head{padding:0;border:0;background:none;gap:var(--s2)}
.fb-slot .fb-chosen{flex:0 1 auto}
.fb-slot .fchip.mini{margin:0}
.fbank.open{margin-top:calc(var(--s2) * -1)}
.fb-chosen{display:flex;gap:var(--s2);flex-wrap:wrap;flex:1;min-width:0}
.fb-body{margin-top:var(--s3);padding:var(--s4);border:1px solid var(--line-soft);
  border-radius:var(--r);background:var(--panel);max-height:460px;overflow-y:auto}
.fb-search{width:100%;margin-bottom:var(--s4)}
.fb-group{margin-bottom:var(--s4)}
.fb-cat{font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone-3);margin-bottom:var(--s2)}
.fb-chips{display:flex;gap:var(--s2);flex-wrap:wrap}
.fb-chips em{font-style:normal;color:var(--bone-3);font-size:12px}

.fchip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-ui);font-size:11.5px;
  font-weight:600;letter-spacing:.04em;padding:6px 11px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel);color:var(--bone-2);transition:.16s var(--tap)}
.fchip:hover{border-color:var(--bone-3);color:var(--bone)}
.fchip i{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none;transition:.16s}
.fchip.in{border-color:var(--good);color:#fff;background:rgba(61,220,151,.16)}
.fchip.in i{background:var(--good);box-shadow:0 0 8px var(--good)}
.fchip.out{border-color:var(--crit);color:var(--bone-2);background:rgba(255,84,112,.12);
  text-decoration:line-through;text-decoration-color:var(--crit)}
.fchip.out i{background:var(--crit);box-shadow:0 0 8px var(--crit)}
.fchip.mini{font-size:10.5px;padding:4px 9px;cursor:default}

@media(max-width:820px){
  .fbank{margin-top:0}
  .fb-body{max-height:360px}
}

/* ============================================================
   UPCOMING
   ============================================================ */
.up-group{margin-top:var(--s7)}
.up-group:first-child{margin-top:var(--s4)}
.up-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);
  padding-bottom:var(--s3);border-bottom:1px solid var(--line-soft)}
.up-head .jp{font-family:var(--f-body);font-size:18px;color:var(--accent);opacity:.8}
.up-head h3{font-family:var(--f-ui);font-size:14px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.up-head .n{margin-left:auto;font-family:var(--f-ui);font-size:11.5px;letter-spacing:.16em;color:var(--bone-3)}
@media (max-width:640px){
  .filters .seg{width:100%}
  .filters .seg button{flex:1}
}

/* ---- deck: rating filter and sort ---- */
/* inside a panel that already has its own border, the bar drops its own */
.filters.bare{border:0;background:none;padding:0;margin-bottom:var(--s4)}
@media (max-width:640px){
}
.loose-note{font-family:var(--f-ui);font-size:12.5px;color:var(--bone-3);margin:var(--s2) 0 var(--s3);max-width:62ch;line-height:1.6}

/* ============================================================
   ARENA lobby, rebuilt
   One strip for who you are, one button for the thing you came
   to do, and one panel that answers a question at a time.
   ============================================================ */
.ar-top{display:flex;align-items:stretch;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s4)}
.ar-top .ar-rank{flex:1;min-width:320px;margin:0}
.ar-go{align-self:stretch;min-width:210px;gap:10px;font-size:14px;letter-spacing:.14em}
.ar-go svg{opacity:.9}
#arPick .ladder{margin:0 0 var(--s5)}

.ar-panel{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.ar-tabs{border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--panel-2);width:100%}
.ar-tabs button{flex:1}
.ar-pane{padding:var(--s5)}

/* opponents: the card is the match, the heart beside it is the friendly one */
.opp-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.opp.person{display:flex;align-items:stretch;gap:0;padding:0;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--panel-2);overflow:hidden;transition:.18s var(--tap)}
.opp.person:hover{border-color:var(--tone,var(--accent));transform:translateY(-2px)}
.opp-hit{flex:1;display:flex;align-items:center;gap:var(--s3);padding:12px 14px;text-align:left;min-width:0}
.opp-hit .opp-face{position:relative;width:42px;height:42px;border-radius:12px;overflow:hidden;flex:none;
  border:1px solid var(--line)}
.opp-hit .opp-face svg{width:100%;height:100%;display:block}
.pres-dot{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;
  border:2px solid var(--panel-2)}
.pres-dot.on{background:var(--good);box-shadow:0 0 8px var(--good)}
.pres-dot.off{background:var(--line)}
.opp-b{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.opp-n{font-family:var(--f-ui);font-size:13.5px;font-weight:600;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opp-l{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.opp-l em{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);font-style:normal}
.opp-swing{font-family:var(--f-ui);font-size:12.5px;color:var(--good);flex:none;opacity:.75}
.opp-alt{width:46px;flex:none;display:grid;place-items:center;border-left:1px solid var(--line);
  color:var(--bone-3);transition:.18s var(--tap)}
.opp-alt:hover{color:var(--accent);background:rgba(255,255,255,.04)}

/* modes: five at a glance, no wasted rows */
#arPaneModes .mode-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

@media (max-width:720px){
  .ar-top{flex-direction:column}
  .ar-go{width:100%}
  .opp-grid{grid-template-columns:1fr}
}

/* ============================================================
   WEEKLY, rebuilt
   The strip says where you are and what to do; the panel holds
   one answer at a time instead of a page you have to scroll to
   understand.
   ============================================================ */
.play-core{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:center}
.core-main{min-width:0}
.core-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);margin-top:var(--s4)}

.play-panel{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  overflow:hidden;margin-top:var(--s5)}
.play-tabs{border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--panel-2);width:100%}
.play-tabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.tab-n{font-family:var(--f-ui);font-size:10px;letter-spacing:.1em;padding:2px 7px;border-radius:99px;
  background:rgba(255,255,255,.07);color:var(--bone-3);text-transform:none}
.tab-n.ready{background:rgba(74,222,128,.18);color:#9df3bb}
.tab-n.warn{background:rgba(250,204,21,.18);color:#fbe08a}
.tab-n.done{background:rgba(255,255,255,.07);color:var(--bone-3)}
.play-pane{padding:var(--s5)}

/* the two things you can actually start, side by side */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4)}
.duo-card{border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel-2);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.duo-h{display:flex;align-items:center;gap:var(--s3);width:100%}
.duo-h h3{font-family:var(--f-ui);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.duo-jp{font-family:var(--f-body);font-size:17px;color:var(--accent);opacity:.85}
.duo-h .pc-s{margin-left:auto}
.chiprow.tight{margin:0;gap:6px}
.chiprow.tight .chip{font-size:10.5px;padding:5px 9px;pointer-events:none}

@media (max-width:820px){
  .play-core{grid-template-columns:auto 1fr;gap:var(--s4)}
}
@media (max-width:560px){
  .play-core{grid-template-columns:1fr;justify-items:center;text-align:center}
  .core-facts{grid-template-columns:repeat(2,1fr)}
  .play-tabs{flex-wrap:wrap}
  .play-tabs button{flex:1 1 46%}
}

/* ---- roulette controls, as a form ---- */
.rl-controls{display:flex;flex-direction:column;gap:var(--s4)}
.rl-field{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-width:0}
.rl-field.top{align-items:baseline}
.rl-field>.k{font-family:var(--f-ui);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-3);white-space:nowrap}
.rl-field>.k em{font-style:normal;color:var(--accent-2);letter-spacing:.05em;text-transform:none;margin-left:7px}
.rl-field select{flex:1;min-width:0}
.rl-field .seg{flex:1}
.rl-field .seg button{flex:1}
.rl-pairs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4)}
.rl-pairs .rl-field{flex-direction:column;align-items:stretch;gap:5px}
.rl-pairs .rl-field.wide{grid-column:1/-1}
.rl-switch{display:flex;align-items:center;gap:var(--s3);cursor:pointer}
.rl-switch>span{font-family:var(--f-ui);font-size:11.5px;font-weight:500;color:var(--bone-2);letter-spacing:.04em}
/* the filter bank opens inside the column, so it gets its own scroll */
#rlFilters .fb-body{max-height:300px}
.rl-field.top .fb-slot .fb-head{justify-content:flex-end}
.rl-go{display:flex;align-items:center;gap:var(--s3);margin-top:auto;padding-top:var(--s3);
  border-top:1px solid var(--line-soft)}
.rl-go .btn{flex:1;justify-content:center}
@media (max-width:900px){
  .rl-panel{grid-template-columns:1fr}
  .rl-pairs{grid-template-columns:1fr 1fr}
}

/* the primary action sits on the same plane as the rank panel beside it */
.ar-top .ar-go{margin-top:0;border-radius:var(--r);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95);
  transform:perspective(1200px) rotateX(2deg)}
.ar-top .ar-go:hover{transform:perspective(1200px) rotateX(2deg) translateY(-1px)}

/* One bar everywhere: search, then the toggles, then the filter button, then
   the count on the right. Anything that needs chips puts them on their own
   row directly under it, so the bar itself is always one line deep. */
.filter-chips{margin:0 0 var(--s5)}
.filter-chips:empty{display:none}

/* the second line of a control bar: the refinements that do not fit the
   first, laid out the same way wherever they appear */
/* The refinements sit under the bar with as much air above them as below,
   and each control carries its own translucent panel rather than a caption:
   "Any format" already says what it changes. */
.refine{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin:var(--s5) 0 var(--s5)}
.refine:empty{display:none}
/* A refinement is the same control the week uses, so it is left alone to be
   one: the wrapper adds nothing but a place to sit. Styling the select's own
   box was what made its option list come out in the wrong colours. */
.refine-field{display:contents}
.picker-btn{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);
  color:var(--bone);font-family:var(--f-ui);font-size:13px;font-weight:600;letter-spacing:.05em;
  padding:10px 34px 10px 12px;cursor:pointer;transition:.16s var(--tap)}
.picker-btn:hover{border-color:var(--bone-3)}
.picker::after{content:'';position:absolute;right:13px;top:50%;width:6px;height:6px;
  border-right:1.6px solid var(--bone-3);border-bottom:1.6px solid var(--bone-3);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
/* an option list is drawn by the operating system and inherits almost nothing
   from the page, so it is told what to be explicitly */
select option{background:#12142b;color:#e8eaf6}

/* a menu for the questions a dropdown cannot answer, where more than one
   choice at a time makes sense */
.picker{position:relative;display:inline-flex}
.picker-btn.on{border-color:var(--accent);color:var(--bone)}
.picker-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:230px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:10px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.95)}
.picker-menu button{display:flex;align-items:center;justify-content:center;gap:5px;
  font-family:var(--f-ui);font-size:12px;font-weight:600;padding:8px 6px;border-radius:6px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.03);color:var(--bone-2);transition:.14s}
.picker-menu button:hover{border-color:var(--bone-3);color:var(--bone)}
.picker-menu button.on{border-color:var(--accent);background:rgba(255,77,141,.16);color:#fff}
.picker-menu button i{display:none}
.picker-menu button.wide{grid-column:1/4}
.picker-menu .picker-clear{grid-column:4/-1;color:var(--bone-3)}

.filter-chips{margin:0 0 var(--s5)}
.filter-chips:empty{display:none}

/* the second line of a control bar: the refinements that do not fit the
   first, laid out the same way wherever they appear */
/* The refinements sit under the bar with the same air above them as below,
   and each control is left as the plain one the week uses. */
.refine:empty{display:none}
/* a setting an administrator has taken away */
.setrow.withheld{opacity:.45}
.setrow.withheld .toggle{cursor:not-allowed}

/* the weekly strip: where you stand, and beside it the one thing to do */
.play-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,300px);gap:var(--s4);align-items:stretch}
.play-act{display:flex;flex-direction:column;justify-content:center;gap:var(--s3);
  padding:var(--s5);border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(160deg,var(--panel-2),var(--ink) 78%);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95)}
.play-act .btn{width:100%;margin-top:0}
.play-core{height:100%}
@media (max-width:980px){
  .play-stage{grid-template-columns:1fr}
}
/* an account shut by too many wrong passwords */
.tag.locked{background:rgba(255,84,112,.16);border-color:rgba(255,84,112,.55);color:#ffb4c0;margin-left:6px}

/* ============================================================
   PHONE, second pass
   Everything added since the first one: the sign-in gate, the
   refinement row, the rating menu, the arena and weekly panels,
   the related row and the save button on a cover.
   ============================================================ */
@media(max-width:820px){
  /* nothing may push the page sideways: one stray wide child turns every
     vertical scroll into a fight */
  html,body{overflow-x:hidden}
  .view,main,.panel,.block{min-width:0;max-width:100%}

  /* iOS zooms the page in when a focused field is under 16px, which leaves
     the layout scaled up and the person hunting for the way back */
  input,select,textarea{font-size:16px}
  .filters input[type=search]{font-size:16px}

  /* the sign-in card */
  .gate-wrap{padding:var(--s5)}
  .keypad{width:100%}
  .keypad .who .av{width:72px;height:72px}
  .gate-actions{flex-direction:column}
  .gate-actions .btn{width:100%}

  /* the refinement row: full-width controls rather than four stubs */
  .refine{gap:var(--s2)}
  .refine-field select{width:100%}
  .refine>select,.refine .picker{flex:1 1 46%;min-width:0}
  .picker-btn{width:100%}
  /* the rating menu is anchored to the right so it cannot run off the screen */
  .picker-menu{left:auto;right:0;min-width:min(280px,86vw)}

  /* the weekly strip and its action box */
  .play-stage{grid-template-columns:1fr}
  .play-act{padding:var(--s4)}
  .play-tabs{flex-wrap:wrap}
  .play-tabs button{flex:1 1 46%;padding:11px 8px}
  .duo{grid-template-columns:1fr}

  /* the arena lobby */
  .ar-top{flex-direction:column}
  .ar-go{width:100%;min-width:0}
  .ar-tabs button{flex:1 1 33%;padding:11px 6px;font-size:11px}
  .ar-pane{padding:var(--s4)}
  .opp-grid{grid-template-columns:1fr}
  .opp-alt{width:54px}
  .invite-card{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .invite-card .iv-go{display:flex;gap:var(--s2)}
  .invite-card .iv-go .btn{flex:1}

  /* the roulette reads as a form above the wheel */
  .rl-panel{grid-template-columns:1fr;gap:var(--s4)}
  .rl-pairs{grid-template-columns:1fr}
  .rl-stage{height:clamp(320px,52vh,460px)}
  .rl-field{flex-wrap:wrap}
  .rl-field .seg{width:100%}

  /* the rest of a story, and the save button that is always visible here */
  .rel-row{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:var(--s3)}
  .card-save{width:36px;height:36px;right:6px;bottom:6px}

  /* settings rows stack instead of squeezing the control off the edge */
  .setrow{flex-direction:column;align-items:stretch;gap:var(--s2)}
  .setrow .d{max-width:none}
  .setrow>div:first-child{min-width:0}
  .setrow select,.setrow input[type=text],.setrow .btn{width:100%}
  .setrow .toggle{align-self:flex-start}
  .set-group{margin-bottom:var(--s6)}

  /* wide tables scroll on their own rather than stretching the page */
  /* A leaderboard that has to be dragged sideways is worse than one that is
     two lines tall, so the row reflows: position and person on the first
     line, the score beside them, and the bar underneath spanning the width. */
  .rank{grid-template-columns:34px minmax(0,1fr) auto;gap:var(--s3);padding:var(--s3)}
  .rank .bd-rank{grid-column:2/-1;justify-self:start}
  .rank .bar{grid-column:1/-1;order:9}
  .rank .val{font-size:14px}
  .rank .who .sub{white-space:normal}

  /* the admin table is genuinely wide, so that one scrolls in place */
  .adm-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .adm-row,.adm-head{min-width:600px}

  /* the drawer is the screen on a phone */
  .dos-inner{border-radius:var(--r) var(--r) 0 0}
  .mal-fields{grid-template-columns:1fr}
}

@media(max-width:420px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
  .core-facts{grid-template-columns:repeat(2,1fr)}
  .play-tabs button{flex:1 1 46%}
  .rel-row{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .nowbar{grid-template-columns:1fr 1fr}
  .rail .nav{min-width:58px;padding:8px 9px}
}

/* On a narrow screen the drawer is a sheet that stops short of the top, so
   there is always a strip beside it to tap, which closes it like the cross. */
@media(max-width:860px){
  .dos-inner{height:auto;max-height:calc(100% - 48px)}
}

/* A mid-sized window: the next-up line keeps enough room to say something,
   and the local clock (the one your computer already shows) gives way first. */
.hud .ticker{min-width:min(240px,20vw)}
@media(max-width:1240px){
  .hud .clock > span:first-child{display:none}
}
@media(max-width:560px){
  .sec-link-long{display:none}
}