@font-face{font-family:'Pixelify Sans';font-weight:400;src:url(fonts/PixelifySans-400.ttf) format('truetype');font-display:block}
@font-face{font-family:'Pixelify Sans';font-weight:600;src:url(fonts/PixelifySans-600.ttf) format('truetype');font-display:block}
@font-face{font-family:'Jacquarda Bastarda 9';src:url(fonts/JacquardaBastarda9.ttf) format('truetype');font-display:block}
.lcd{width:240px;height:240px;background:#1e1418;color:#f2e2c4;font:11px/1.15 'Pixelify Sans',monospace;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.lcd.mono{filter:grayscale(1) contrast(1.1)}
.bar{height:19px;flex:none;display:flex;align-items:center;gap:8px;padding:0 6px;border-bottom:1px solid #5a3a28;line-height:1;white-space:nowrap}
.bar:empty{display:none}
.fl{flex:1}
.ttl{font-family:var(--title-font,'Jacquarda Bastarda 9'),serif;font-weight:400;font-size:calc(16px*var(--title-scale,1));color:#f0c860;line-height:1}
.bpm{display:flex;align-items:baseline;gap:3px}.bpm b{font-size:12.8px;font-weight:400}
.posb{display:flex;align-items:center;gap:4px}
.pips{display:flex;gap:1px}.pips u{width:3px;height:3px;display:block}
.tri{width:0;height:0;display:inline-block;border-left:4.5px solid #f2e2c4;border-top:3px solid transparent;border-bottom:3px solid transparent}
.tri.sm{border-left-width:3.5px;border-top-width:2.5px;border-bottom-width:2.5px}
.sq{width:5.5px;height:5.5px;display:inline-block}
.scenew{position:relative;flex:none;border-bottom:1px solid #5a3a28}
.scenew:empty,.scenew.none{display:none}
.sc,.eqc{display:block;image-rendering:pixelated}
.ov{position:absolute;inset:0;pointer-events:none}
.hud{flex:1;min-height:0;position:relative;overflow:hidden}
.hh{height:100%;padding:4px 6px;display:flex;flex-direction:column;gap:3px}
.panel{background:#3a2620;border:1px solid #c8963c;border-radius:1px;box-shadow:inset 0 0 0 1px #1e1418,inset 0 0 0 2px #6a4030,0 0 0 1px #1e1418;line-height:1}
canvas{image-rendering:pixelated}
.knobs{display:grid;gap:4px;margin-top:auto;padding-top:2px}
.kn{display:flex;flex-direction:column;align-items:center;gap:1.5px;line-height:1}
.kn canvas{width:20px;height:20px;display:block}
.kn span{white-space:nowrap}
/* party */
.rows{display:flex;flex-direction:column;gap:1.5px;padding-top:1px}
.trow{display:grid;grid-template-columns:17px minmax(0,1fr) 36px;gap:5px;align-items:center;height:17px}
.por{width:17px;height:17px;display:block;border:1px solid;border-radius:0}
.tm{display:flex;flex-direction:column;gap:2.5px;min-width:0}
.tn{display:flex;gap:4px;white-space:nowrap}
.pips16{display:flex;gap:1px}.pip{width:3.5px;height:3.5px;flex:none}
.hp{display:flex;flex-direction:column;gap:2px;align-items:flex-end}.hpb{width:36px;height:3px;background:#2e2226}.hpb div{height:3px}
.trow.sel .tm .tn span:nth-child(2){text-shadow:0 0 0 #f2e2c4}
/* equip */
.eqwrap{height:100%;padding:5px 6px;display:flex;flex-direction:column;gap:4px}
.eqtop{display:flex;gap:5px;min-height:0}
.eqp{display:flex;gap:2px}.eqp .por{width:17px;height:17px}
.eqslot{width:72px;height:96px}.eqlv{display:flex;gap:4px;line-height:1}
.eqr{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.slot{height:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid #3a4a78;line-height:1}
.slot canvas{width:12px;height:12px;display:block}.slot span{white-space:nowrap}
/* boss / scene overlays */
.bossn{position:absolute;left:5px;right:5px;top:3px;display:flex;align-items:center;gap:5px;line-height:1}
.bossn .ttl{color:#f2e2c4;text-shadow:1px 0 #1e1418,-1px 0 #1e1418,0 1px #1e1418,0 -1px #1e1418;white-space:nowrap}
.bossb{flex:1;height:6px;background:#1e1418;border:1px solid #f2e2c4}.bossb div{height:100%}
.bhud{height:100%;padding:4px 6px;display:flex;flex-direction:column;gap:4px}
.bcol{display:flex;gap:6px}.bhp{display:flex;flex-direction:column;gap:2px;justify-content:center;flex:1;min-width:0}
.bhr{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:4px;align-items:center;height:11px}.bhr span{white-space:nowrap;overflow:hidden}
.hpb2{height:4px;background:#2e2226}.hpb2 div{height:4px}
.cmd{display:flex;align-items:center;gap:4px;height:11px;padding:0 3px}
.combo{position:absolute;left:6px;top:5px;display:flex;flex-direction:column;line-height:1;color:#f2e2c4;text-shadow:1px 0 #1e1418,-1px 0 #1e1418,0 1px #1e1418,0 -1px #1e1418}
.combo b{font-weight:600;font-size:19px}
.dhud{height:100%;padding:4px 6px;display:flex;flex-direction:column;gap:3px}
.dhead{display:flex;align-items:center;gap:4px}
.dsteps{display:grid;grid-template-columns:repeat(16,1fr);gap:1.5px}.dcell{height:11px}
.bign{position:absolute;left:0;top:0;width:145px;height:84px;display:flex;align-items:center;justify-content:center}
.bign span{font-weight:600;font-size:36px;line-height:1;color:#f2e2c4;text-shadow:2px 0 #1e1418,-2px 0 #1e1418,0 2px #1e1418,0 -2px #1e1418,4px 4px #1e1418}
.vict{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Jacquarda Bastarda 9',serif;font-size:32px;color:#f0c860;text-shadow:2px 0 #1e1418,-2px 0 #1e1418,0 2px #1e1418,0 -2px #1e1418}
.tl{display:flex;flex-direction:column;gap:.5px}
.tlr{display:flex;align-items:center;gap:4px;height:11px;padding:0 2px;border:1px solid transparent}
/* grids */
.grid{display:flex;flex-direction:column;gap:1.5px}.grow{display:flex;gap:1.5px;padding-left:2px;border-left:2px solid transparent;height:7px}.grow.gs{border-left-color:#e0503c}
.gc{flex:1;height:7px}
.gl{display:flex;gap:8px;line-height:1}
.pads2,.hh .pads{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.pad{display:flex;align-items:center;justify-content:center;border:1px solid #3a4a78;line-height:1;text-align:center;overflow:hidden}
.pad span{white-space:nowrap}
.legend{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;line-height:1}.legend div{padding:2px 1px;text-align:center}
.fxg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:4px 0;height:calc(100% - 17px)}
.fxc{display:flex;flex-direction:column;align-items:center;gap:2px;border-right:1px solid #5a3a28;line-height:1}.fxc:last-child{border-right:0}
.fxc canvas{width:20px;height:20px}.seg{display:flex;flex-direction:column;gap:1px;margin-top:1px}.seg div{width:10px;height:2px}
.fxf{height:17px;display:flex;align-items:center;gap:5px;padding:0 6px;border-top:1px solid #5a3a28}
.mrow{display:grid;grid-template-columns:7px 100px 1fr;gap:4px;align-items:center;height:10.5px;cursor:pointer}
.mrow span{white-space:nowrap}
.hint2{display:flex;flex-direction:column;gap:2px}
.hud .hint{display:flex;flex-direction:column;gap:2px;font-size:8px;max-width:none;text-align:left;line-height:1.15}
.hud .hint div{display:flex;gap:12px}
/* title */
.tbg{position:absolute;inset:0;background-size:100% 100%;image-rendering:pixelated}
.tgrad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,12,16,.55) 0%,rgba(20,12,16,0) 38%,rgba(20,12,16,0) 62%,rgba(20,12,16,.75) 100%)}
.tlogo{position:absolute;left:35px;top:7px;width:170px;height:auto;filter:drop-shadow(0 1.5px 0 #1e1418) drop-shadow(0 0 1px #1e1418)}
.tbot{position:absolute;left:0;right:0;bottom:13px;display:flex;flex-direction:column;align-items:center;gap:7px}
.outl{color:#f2e2c4;text-shadow:1px 0 #1e1418,-1px 0 #1e1418,0 1px #1e1418,0 -1px #1e1418}
.lcd.blink .tbot .panel{animation:bl 1s steps(2) infinite}@keyframes bl{50%{opacity:.55}}
#scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 1px,transparent 1px,transparent 3px);display:none}

/* bigger text pass: rows and pips grow with the font */
.lcd .bar{height:21px}
.lcd .trow{height:22px;grid-template-columns:21px minmax(0,1fr) 44px}
.lcd .por{width:20px;height:20px}
.lcd .rows{gap:2px;padding-top:2px}
.lcd .pips16 .pip,.lcd .pip{width:4px;height:4px}
.lcd .tn{gap:5px}
.lcd .hpb{width:44px;height:4px}.lcd .hpb div{height:4px}
.lcd .knobs{padding-top:0}
.lcd .kn canvas{width:22px;height:22px}
.lcd .mrow{height:13px;grid-template-columns:8px 110px 1fr}
.lcd .cmd{height:14px}
.lcd .bhr{height:13px}
.lcd .slot{height:30px}
.lcd .dsteps .dcell{height:14px}
.lcd .tlr{height:13px}
.lcd .pad{font-size:10px}
.lcd .bpm b{font-size:15px}

.lcd .trow{grid-template-columns:20px minmax(0,1fr) 54px}
.lcd .hpb{width:54px}.lcd .hpb div{height:4px}
.lcd .tn{font-size:11px;gap:6px}
.lcd .hp span{font-size:11px}
.lcd .kn{font-size:11px}

.lcd .kn span{max-width:58px;overflow:hidden;text-overflow:ellipsis}

.lcd .chips{display:flex;gap:3px}.lcd .chip{flex:1;text-align:center;padding:3px 0;border:1px solid #c8963c;background:#3a2620;box-shadow:inset 0 0 0 1px #1e1418}.lcd .chip.on{background:#f0c860;color:#1e1418}