/* polish layer: settings, records, series, replay, transitions, juice. Loaded after style.css. */

/* ---------- 720p layout fixes */
@media (max-height:820px){
  .title span{font-size:clamp(40px,6.2vh,80px)}
  .title b{font-size:clamp(50px,9vh,110px);text-shadow:5px 5px 0 var(--rust)}
  .subtitle{margin:8px 0 12px}
  #lvlPill{margin:2px 0 8px}
  .menu-buttons{gap:5px}
  .menu-buttons button{padding:8px 16px;font-size:18px}
  .menu-buttons .chaos-btn small,.menu-buttons .diff-btn small{display:none}
}
#menu{overflow-y:auto}
#results{justify-content:flex-start;padding:3vh 0 0;overflow-y:auto}
#results h2{font-size:clamp(36px,7vh,54px)}
#resBody{max-height:calc(100vh - 3vh - 150px);overflow-y:auto}
#results .menu-buttons.row{position:sticky;bottom:0;padding:12px 0 18px;margin-top:8px}
#resBody table{font-size:14px}
#resBody td{padding:3px 6px}

/* ---------- toggles from settings */
body.no-hints #ctlHint{display:none}
body.no-minimap #minimap{display:none}
body.no-minimap #combo{top:24px}

/* ---------- settings */
#settings{z-index:30}
.set-box{width:min(560px,94vw);max-height:92vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--hazard)}
.set-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line)}
.set-head h2{color:var(--hazard)}
.set-close,.pill-btn{background:var(--hazard);color:#111;border:none;padding:9px 20px;font-family:"DIN Condensed",Impact,"Arial Black",sans-serif;font-size:18px;letter-spacing:.05em;text-transform:uppercase}
.set-body{overflow-y:auto;padding:8px 20px 20px}
.set-body section{margin-top:12px}
.set-body h3{font-family:"DIN Condensed",Impact,"Arial Black",sans-serif;font-weight:400;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 0 6px}
.srow{display:grid;grid-template-columns:140px 1fr 44px;align-items:center;gap:12px;margin:6px 0}
div.srow{grid-template-columns:140px 1fr}
.srow b{text-align:right;font-variant-numeric:tabular-nums;color:var(--hazard)}
.srow input[type=range]{width:100%;accent-color:var(--hazard)}
.seg{display:inline-flex;justify-self:start;border:1px solid var(--line)}
.seg button{background:none;border:none;padding:7px 14px;color:var(--dim);font-size:14px}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--hazard);color:#111;font-weight:700}
.seg button:hover:not(.on){color:var(--ink)}
.sdesc{margin:6px 0 0;color:var(--dim);font-size:13px}

/* ---------- juice */
#dmgVig{position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(200,20,10,.55) 85%,rgba(160,0,0,.85) 100%)}
#center-flash.hot{display:inline-block;left:50%;right:auto;transform:translateX(-50%) skewX(-12deg);padding:6px 28px;color:#111;font-size:40px;letter-spacing:.04em;text-shadow:none;
  background:repeating-linear-gradient(-45deg,var(--hazard) 0 22px,#f0b000 22px 44px);border-top:3px solid #111;border-bottom:3px solid #111;box-shadow:0 6px 0 rgba(0,0,0,.45)}
#center-flash.hot:empty{display:none}
#center-flash.hot.pop{animation:bannerIn .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes bannerIn{0%{transform:translateX(-160%) skewX(-12deg)}100%{transform:translateX(-50%) skewX(-12deg)}}

/* ---------- records & trophies */
.rec-grid{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:30px;max-width:1100px}
.rec-grid h3{font-family:"DIN Condensed",Impact,"Arial Black",sans-serif;font-weight:400;font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:var(--hazard);margin:0 0 8px}
.rec-grid table{width:100%;border-collapse:collapse;margin-bottom:20px;background:var(--panel)}
.rec-grid td{padding:7px 10px;border-bottom:1px solid var(--line)}
.rec-grid td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.rec-grid td i{color:var(--dim);font-weight:400}
.trophies{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.trophy{background:var(--panel);border:1px solid var(--line);border-left:4px solid #3a3630;padding:10px 12px;opacity:.55}
.trophy b{display:block;font-family:"DIN Condensed",Impact,"Arial Black",sans-serif;font-weight:400;font-size:20px;letter-spacing:.03em;text-transform:uppercase}
.trophy small{color:var(--dim);font-size:12px}
.trophy em{display:block;font-style:normal;font-size:11px;color:var(--dim);margin-top:4px}
.trophy.got{opacity:1;border-left-color:var(--hazard)}
.trophy.got b{color:var(--hazard)}
#resBody .newrec{margin-top:6px;color:#3aa0ff;font-weight:700}
#resBody .newrec.trophy-line{color:#111;background:var(--hazard);padding:6px 10px;animation:crateIn .6s ease-out}
@media (max-width:760px){.rec-grid{grid-template-columns:1fr}}
@media (max-height:820px){.menu-buttons button{padding:7px 16px;font-size:17px}}