/* TRIAL (local only): the OST tier list. See ost_tier.js. Everything is in the site colour (--acc). */
.ost-saved-dialog{width:min(560px,92vw);max-height:80vh;overflow:auto;background:#0b0e16;color:#e5e8ef;border:1px solid var(--acc,#ffd84a);padding:20px;font-family:Rajdhani,sans-serif;}
.ost-saved-dialog::backdrop{background:rgba(0,0,0,.75);}
.ost-saved-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;}
.ost-saved-head h2{margin:0;font:400 1.1rem 'Black Han Sans',sans-serif;color:var(--acc,#ffd84a);}
.ost-saved-list{display:grid;gap:12px;}
.ost-saved-list button{text-align:left;white-space:normal;}

/* ---- trial strip (the options being decided) ---- */
.ost-trialbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:9px 18px;
  background:repeating-linear-gradient(-45deg,rgba(var(--acc-rgb),.07) 0 10px,transparent 10px 20px),#0b0d12;
  border-bottom:1px dashed rgba(var(--acc-rgb),.45);font-family:'Rajdhani',sans-serif;}
.ost-trialbar .otb-h{font-family:'Black Han Sans',sans-serif;font-weight:400;color:var(--acc);letter-spacing:1px;font-size:.92rem;}
.otb-g{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.otb-t{font:700 .72rem 'Rajdhani',sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#9aa1b2;margin-right:2px;}
.otb-g button,.ost-kinds button{position:relative;isolation:isolate;background:none;border:0;cursor:pointer;
  font:700 .74rem 'Rajdhani',sans-serif;letter-spacing:1px;text-transform:uppercase;color:#d7dbe4;padding:6px 12px;}
.otb-g button::before,.ost-kinds button::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);border-radius:4px;
  background:linear-gradient(180deg,#151821,#08090d);border:1px solid rgba(var(--acc-rgb),.3);}
.otb-g button[aria-pressed="true"],.ost-kinds button[aria-pressed="true"]{color:#fff;}
.otb-g button[aria-pressed="true"]::before,.ost-kinds button[aria-pressed="true"]::before{
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.34),rgba(var(--acc-rgb),.12)),#0d1017;border-color:var(--acc);
  box-shadow:0 0 10px rgba(var(--acc-rgb),.35);}
body:not(.ost-mode) .ost-trialbar .otb-g{display:none;}
body:not(.ost-mode) .ost-trialbar::after{content:'Switch to OSTs in the bar below to try it.';font:600 .8rem 'Rajdhani',sans-serif;color:#9aa1b2;}

/* ---- CHARACTERS | OSTS switch (angled two-position slider; the knob is an <i>) ---- */
.ost-mode-sw{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;isolation:isolate;margin-left:8px;}
.ost-mode-sw::before{content:'';position:absolute;inset:0;z-index:-2;transform:skewX(-12deg);border-radius:5px;
  background:#0a0c11;border:1px solid rgba(var(--acc-rgb),.4);}
.ost-mode-sw button{position:relative;z-index:1;background:none;border:0;cursor:pointer;padding:8px 18px;min-width:118px;
  font:700 .8rem 'Rajdhani',sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:#8b91a1;transition:color .2s;}
.ost-mode-sw button[aria-pressed="true"]{color:#fff;text-shadow:0 0 8px rgba(var(--acc-rgb),.7);}
.ost-mode-sw .knob{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);z-index:0;transform:skewX(-12deg);border-radius:4px;
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.42),rgba(var(--acc-rgb),.16)),#0d1017;border:1px solid var(--acc);
  box-shadow:0 0 12px rgba(var(--acc-rgb),.4);transition:left .28s cubic-bezier(.4,1.3,.5,1);}
body.ost-mode .ost-mode-sw .knob{left:50%;}

/* OST lists use their own named Save/Load storage. */

/* ---- the theme chips in the drawer ---- */
.ost-kinds{display:none;flex-wrap:wrap;gap:6px 8px;margin:0 0 10px;padding:0 4px;}
body.ost-mode .ost-kinds{display:flex;}

/* ---- a song tile ---- */
.pk-unit.ost-tile,.tl-cell.ost-tile{display:flex;flex-direction:column;align-items:center;}
.ost-lbl{width:100%;max-width:100px;margin-top:3px;text-align:center;font:600 .66rem/1.15 'Rajdhani',sans-serif;color:#e9ecf2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em;word-break:break-word;}
.tl-cell .ost-lbl{max-width:96px;}
.pk-unit .ost-lbl{max-width:88px;font-size:.62rem;}
.ost-lbl .l-kind{display:none;font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--acc);font-size:.92em;}
body[data-ost-label="kind"] .ost-lbl .l-name{display:none;}
body[data-ost-label="kind"] .ost-lbl .l-kind{display:inline;}
body[data-ost-label="none"] .ost-lbl{display:none;}
.ost-cur .ost-lbl .l-name{color:var(--acc);}

/* the play button: a dark disc with a site-colour ring, ON the art */
.ft-slot .ost-play{pointer-events:auto;position:absolute;z-index:8;width:32%;aspect-ratio:1;padding:0;border-radius:50%;cursor:pointer;
  left:54%;top:44%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,rgba(30,33,44,.92),rgba(6,7,10,.9));border:1.5px solid rgba(var(--acc-rgb),.85);
  box-shadow:0 0 10px rgba(var(--acc-rgb),.35),0 2px 6px rgba(0,0,0,.6);opacity:.88;transition:opacity .15s,transform .15s,box-shadow .15s;}
body[data-ost-play="corner"] .ft-slot .ost-play{left:24%;top:16%;width:30%;}
.ft-slot .ost-play:hover{opacity:1;transform:translate(-50%,-50%) scale(1.1);box-shadow:0 0 16px rgba(var(--acc-rgb),.6),0 2px 6px rgba(0,0,0,.6);}
.ost-play .pi{width:0;height:0;margin-left:12%;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;}
.ost-play .eq{display:none;align-items:flex-end;gap:2px;height:42%;}
.ost-play .eq i{width:3px;background:var(--acc);border-radius:1px;animation:ostEq .9s ease-in-out infinite;}
.ost-play .eq i:nth-child(2){animation-delay:-.3s;}.ost-play .eq i:nth-child(3){animation-delay:-.6s;}
@keyframes ostEq{0%,100%{height:30%}50%{height:100%}}
.ost-on .ost-play{opacity:1;border-color:var(--acc);box-shadow:0 0 16px rgba(var(--acc-rgb),.75);}
.ost-on .ost-play .pi{display:none;}
.ost-on .ost-play .eq{display:flex;}
.ost-cur .ft-slot{filter:drop-shadow(0 0 7px rgba(var(--acc-rgb),.55));}
.tl-frame.shot .ost-play{display:none !important;}
.tl-frame.shot .ost-cur .ft-slot{filter:none;}
@media (prefers-reduced-motion:reduce){.ost-play .eq i{animation:none;height:70%;}}

/* ---- the player bar ---- */
.ost-bar{position:fixed;left:0;right:0;bottom:0;z-index:260;display:flex;align-items:center;gap:16px;padding:10px 18px 12px;
  background:linear-gradient(180deg,#12151d,#08090d);border-top:2px solid var(--acc);box-shadow:0 -6px 22px rgba(0,0,0,.55),0 -1px 14px rgba(var(--acc-rgb),.25);}
.ost-bar[hidden]{display:none;}
body.ost-bar-on{padding-bottom:84px;}
body.ost-bar-on .drawer{height:calc(100vh - 78px);}
.ob-art{flex:0 0 52px;width:52px;height:52px;}
.ob-txt{flex:0 1 260px;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ob-name{font:400 1.05rem 'Black Han Sans',sans-serif;font-style:italic;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ob-sub{font:600 .78rem 'Rajdhani',sans-serif;color:#9aa1b2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ob-pp{flex:0 0 44px;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,rgba(var(--acc-rgb),.35),rgba(var(--acc-rgb),.08)),#0d1017;border:1.5px solid var(--acc);
  box-shadow:0 0 12px rgba(var(--acc-rgb),.45);}
.ob-pp .pi{width:0;height:0;margin-left:4px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #fff;}
.ost-bar.playing .ob-pp .pi{margin:0;width:14px;height:17px;border:0;border-left:5px solid #fff;border-right:5px solid #fff;}
.ob-seek{flex:1 1 auto;display:flex;align-items:center;gap:10px;min-width:120px;}
.ob-t,.ob-d{font:600 .8rem 'Oswald',sans-serif;color:#cfd3dc;font-variant-numeric:tabular-nums;min-width:34px;text-align:center;}
.ob-track{position:relative;flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.12);cursor:pointer;touch-action:none;}
.ob-track::before{content:'';position:absolute;inset:-9px 0;}
.ob-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:linear-gradient(90deg,var(--acc-deep,#F4A500),var(--acc));box-shadow:0 0 8px rgba(var(--acc-rgb),.6);}
.ob-knob{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 8px rgba(var(--acc-rgb),.8);left:0;}
.ob-vol{flex:0 0 auto;display:flex;align-items:center;gap:8px;}
.ob-spk{width:16px;height:16px;background:#cfd3dc;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3C/svg%3E") center/contain no-repeat;}
.ob-vol input{width:96px;accent-color:var(--acc);}
.ob-x{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:0;background:none;color:#9aa1b2;font-size:16px;cursor:pointer;}
.ob-x:hover{color:var(--acc);background:rgba(var(--acc-rgb),.1);}

@media (max-width:700px){
  .ost-bar{flex-wrap:wrap;gap:8px 12px;padding:8px 12px 10px;}
  .ob-txt{flex:1 1 calc(100% - 140px);}
  .ob-seek{order:5;flex:1 1 100%;}
  .ob-vol{display:none;}
  .ost-bar{padding-right:44px;}
  .ob-x{position:absolute;top:17px;right:8px;}
  body.ost-bar-on{padding-bottom:118px;}
  .ost-mode-sw{margin-left:0;}
  .ost-mode-sw button{min-width:96px;padding:7px 12px;}
  .ost-trialbar{gap:8px 14px;padding:8px 12px;}
}

/* ---- phone: the switch on its own row, two songs a row ---- */
@media (max-width:600px){
  .dia-header .ost-mode-sw{grid-row:3;grid-column:1 / -1;justify-self:center;width:250px;margin:2px 0 0;}
  .ost-mode-sw button{min-width:0;}
  body.ost-mode .dia-header #saveBtn{grid-column:2 / 4;}
  body.ost-mode .tl-cell .ft-slot{width:76px !important;height:76px !important;}
  body.ost-mode .tl-cell .ost-lbl{max-width:80px;font-size:.6rem;}
}

/* =========================================================================================
   TRIAL: the look of the theme text under a song ("Main Theme" / "Active Skill")
   Glyph icons (★ main, ✦ active, ♪ the rest) rather than masks: the Download picture is made by html2canvas, which
   draws text but not CSS masks. Plates sit on a ::before with z-index:-1 inside a z-index:0 box -- html2canvas
   understands that, not `isolation`.
   ========================================================================================= */
.ost-lbl[data-k="main"]{--kc:#FFD84A;--kcr:255,216,74;}
.ost-lbl[data-k="active"]{--kc:#5FD0FF;--kcr:95,208,255;}
.ost-lbl[data-k="transform"]{--kc:#C77DFF;--kcr:199,125,255;}
.ost-lbl[data-k="standby"]{--kc:#7CE38B;--kcr:124,227,139;}
.ost-lbl[data-k="finish"]{--kc:#FF8A3D;--kcr:255,138,61;}
.ost-lbl[data-k="revival"]{--kc:#FF8FD0;--kcr:255,143,208;}
.ost-lbl[data-k="super"]{--kc:#FF5A5A;--kcr:255,90,90;}
body[data-lc="site"] .ost-lbl{--kc:var(--acc);--kcr:var(--acc-rgb);}

body[data-ost-label="kind"] .ost-lbl{display:flex;justify-content:center;align-items:flex-start;overflow:visible;
  -webkit-line-clamp:unset;min-height:0;margin-top:6px;max-width:none;width:auto;}
.ost-lbl .l-kind b,.ost-lbl .l-kind em{font-style:normal;font-weight:inherit;}
.ost-lbl .l-kind em{margin-left:.3em;}
.ost-lbl .l-kind .ic{display:none;font-style:normal;}

/* A -- now */
body[data-ls="A"] .ost-lbl .l-kind{color:var(--acc);}

/* B -- the theme's own colour on an angled plate, white words */
body[data-ls="B"] .ost-lbl .l-kind{position:relative;z-index:0;display:inline-block;padding:3px 10px 2px;color:#fff;
  font:700 .62rem/1.2 'Oswald',sans-serif;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.6);}
body[data-ls="B"] .ost-lbl .l-kind::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-14deg);border-radius:3px;
  background:linear-gradient(180deg,rgba(var(--kcr),.55),rgba(var(--kcr),.22)),#0d1017;border:1px solid var(--kc);
  box-shadow:0 0 9px rgba(var(--kcr),.45);}

/* C -- an icon and glowing words, no box */
body[data-ls="C"] .ost-lbl .l-kind{display:inline-flex;align-items:center;gap:4px;color:#fff;
  font:700 .66rem/1 'Oswald',sans-serif;letter-spacing:1.3px;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 0 8px rgba(var(--kcr),.95),0 0 16px rgba(var(--kcr),.5);}
body[data-ls="C"] .ost-lbl .l-kind .ic{display:inline;color:var(--kc);font-size:1.15em;}

/* D -- the word big in its colour, the second word small under it */
body[data-ls="D"] .ost-lbl .l-kind{display:flex;flex-direction:column;align-items:center;line-height:1;}
body[data-ls="D"] .ost-lbl .l-kind b{font:400 .95rem/1 'Black Han Sans',sans-serif;font-style:italic;color:var(--kc);
  letter-spacing:.5px;text-shadow:0 0 10px rgba(var(--kcr),.45);}
body[data-ls="D"] .ost-lbl .l-kind em{margin:3px 0 0;font:700 .5rem/1 'Rajdhani',sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:#aab0bf;}

/* E -- a slanted ribbon across the bottom of the art */
body[data-ls="E"] .ost-lbl{margin-top:-21px;position:relative;z-index:9;pointer-events:none;}
body[data-ls="E"] .ost-lbl .l-kind{position:relative;z-index:0;display:inline-flex;align-items:center;gap:3px;padding:3px 12px 2px;
  color:#0b0d12;font:700 .6rem/1.2 'Oswald',sans-serif;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;}
body[data-ls="E"] .ost-lbl .l-kind::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-18deg);
  background:linear-gradient(90deg,rgba(var(--kcr),.0),var(--kc) 18%,var(--kc) 82%,rgba(var(--kcr),0));
  box-shadow:0 2px 6px rgba(0,0,0,.6);}
body[data-ls="E"] .ost-lbl .l-kind .ic{display:inline;font-size:1.05em;}

/* F -- a dark pill with a note, the words in the theme colour */
body[data-ls="F"] .ost-lbl .l-kind{display:inline-flex;align-items:center;gap:4px;padding:3px 10px 3px 8px;border-radius:999px;
  background:linear-gradient(180deg,#171a23,#0a0c11);border:1px solid rgba(var(--kcr),.7);box-shadow:0 0 8px rgba(var(--kcr),.3);
  color:var(--kc);font:700 .6rem/1.2 'Oswald',sans-serif;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;}
body[data-ls="F"] .ost-lbl .l-kind .ic{display:inline;font-size:1.1em;}

/* G -- white words over a glowing line in the theme colour */
body[data-ls="G"] .ost-lbl .l-kind{position:relative;display:inline-block;padding:0 4px 5px;color:#fff;
  font:700 .66rem/1.2 'Oswald',sans-serif;letter-spacing:1.6px;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 0 7px rgba(var(--kcr),.7);}
body[data-ls="G"] .ost-lbl .l-kind::after{content:'';position:absolute;left:8%;right:8%;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--kc),transparent);box-shadow:0 0 8px rgba(var(--kcr),.9);}

/* the playing song's label lights up in every look */
.ost-cur .ost-lbl .l-kind{filter:brightness(1.25);}
/* phone: two songs a row leaves ~80px per label, so every look shrinks there */
@media (max-width:600px){
  body.ost-mode .tl-cell .ost-lbl .l-kind{font-size:.5rem !important;letter-spacing:.5px !important;}
  body.ost-mode[data-ls="B"] .tl-cell .ost-lbl .l-kind,body.ost-mode[data-ls="F"] .tl-cell .ost-lbl .l-kind{padding:2px 6px !important;}
  body.ost-mode[data-ls="E"] .tl-cell .ost-lbl .l-kind{padding:2px 8px !important;}
  body.ost-mode[data-ls="C"] .tl-cell .ost-lbl .l-kind{gap:2px;}
  body.ost-mode[data-ls="D"] .tl-cell .ost-lbl .l-kind b{font-size:.8rem !important;}
  body.ost-mode[data-ls="D"] .tl-cell .ost-lbl .l-kind em{font-size:.42rem !important;}
}
/* CENTRED UNDER THE CHARACTER (owner, 5 Nov 2026): the card frame is drawn 5% right of its box (80% wide at left 15%),
   so the label moves 5% of the tile's width to sit under the frame's middle, not the box's. */
body.ost-mode .tl-cell .ost-lbl{position:relative;left:4.8px;}
body.ost-mode .pk-unit .ost-lbl{position:relative;left:4.3px;}
@media (max-width:600px){ body.ost-mode .tl-cell .ost-lbl{left:3.8px;} }

/* The icon toolbar keeps the mode switch on its own row on phones. */
@media(max-width:600px){
  html body .dia-header{flex-wrap:wrap !important;}
  html body .dia-header .ost-mode-sw{order:1;flex:0 0 100%;width:100%;margin:8px 0 0;}
}