.jb-top{grid-template-columns:44px minmax(0,1fr) auto 44px;column-gap:6px;padding-right:3%}
.jb-top h1{font-size:clamp(18px,5.5cqw,30px);padding-left:5%;letter-spacing:.035em}
.jb-top .jb-position{font-size:10px;padding-left:7px}
.records-open{min-width:44px;min-height:44px;padding:0;background:transparent;color:#f9e6bd;font-size:11px;font-weight:750;border-left:1px solid #dbb99870}
.jb-brand{grid-template-columns:22px minmax(0,1fr) 72px}
#preview-toggle{min-height:36px;border:1px solid #d9b98b66;border-radius:18px;background:#21131244;color:#ffebc8;font-size:10px;padding:0 8px;white-space:nowrap}
#preview-toggle[aria-pressed=false]{color:#cfbba8}
.jb-row{position:relative}.jb-row-title{padding-right:2px}.jb-row-clear{grid-area:title;justify-self:end;align-self:end;margin-bottom:-2px;font-size:7px;line-height:8px;letter-spacing:.015em;font-weight:800}
.jb-row:has(.jb-row-clear:not(:empty)) .jb-row-title{padding-bottom:7px}
.mode-cleared{display:inline-block;margin-left:7px;font:750 8px/1 Manrope,sans-serif;letter-spacing:.03em;border-bottom:1px solid currentColor;vertical-align:middle}
.ticket-record{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;border-top:1px solid #302b2540;padding-top:7px;margin-top:7px}
.ticket-record div{display:flex;flex-direction:column;gap:3px}.ticket-record small{font-size:8px}.ticket-record b{font-size:13px;font-variant-numeric:tabular-nums}
#result-counts{grid-template-columns:repeat(5,1fr)}#result-counts small{font-size:8px}
.scores-screen{display:flex;flex-direction:column;background:linear-gradient(155deg,#351e23,#111923 45%,#0d131d);padding-top:var(--safe-t);padding-bottom:var(--safe-b)}
.scores-header{display:flex;align-items:center;gap:12px;padding:10px 5% 6px;border-bottom:1px solid #d2b58c40}
.scores-header h1{font-size:23px;margin:0;flex:1;color:#ffebc6}.scores-header>b{font-size:11px;white-space:nowrap;color:#a7e9ce}
.scores-header .nav-icon{flex:none}.score-controls{padding:12px 5% 7px}
#score-style{display:flex;gap:7px;margin-bottom:10px}#score-style button{min-height:38px;min-width:75px;padding:7px 14px;border-radius:18px;font-size:11px;background:#ffffff09;border:1px solid #c6b28f44}
#score-modes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}#score-modes button{min-height:40px;background:#ffffff08;border:1px solid #ffffff21;border-radius:5px;font-size:10px;font-weight:750;padding:4px}
#score-style [aria-pressed=true],#score-modes [aria-pressed=true]{background:#e7c694;color:#2e211b;border-color:#ffe3b8}
.score-list{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;padding:4px 5% 18px;display:grid;grid-auto-rows:min-content;gap:8px;align-content:start}
.score-row{width:100%;min-height:76px;display:grid;grid-template-columns:42px minmax(0,1fr) 86px;gap:10px;align-items:center;text-align:left;padding:10px;background:linear-gradient(115deg,#ffffff0b,#ffffff03);border:1px solid #b7c5ce26;border-radius:8px}
.score-row img{width:42px;height:42px;border-radius:5px;object-fit:cover}.score-row>div{min-width:0;display:flex;flex-direction:column;gap:5px}
.score-row strong{font-size:13px;line-height:1.3;color:#f9e5c2;overflow-wrap:anywhere}.score-row small{font-size:9px;color:#a4adb9;white-space:nowrap}.score-row .score-cleared{color:#97edce;font-weight:750}
.score-values{text-align:right;font-variant-numeric:tabular-nums}.score-values b{font-size:18px;color:#fff2d8;letter-spacing:.015em}.score-values small{font-size:8px}
.tutorial-sheet{max-height:calc(var(--app-h) - 24px);overflow-y:auto}.tutorial-sheet .sheet-kicker h2{font-size:23px;line-height:1.3;margin:0}
.tutorial-layout{display:grid;gap:17px;margin:12px 0 18px}.tutorial-field{height:96px;max-width:300px;width:100%;margin:auto;position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;background:linear-gradient(transparent,#213d4544)}
.tutorial-field i{position:relative;border-left:1px solid #ffffff1c}.tutorial-field i:after{content:'';position:absolute;left:5%;right:5%;bottom:0;height:20px;border:1px solid #ffffff99;border-radius:5px;background:#ff698d;box-shadow:0 0 8px #ffffff22}
.tutorial-field i:nth-child(2):after{background:#ffad55}.tutorial-field i:nth-child(3):after{background:#62e9ac}.tutorial-field i:nth-child(4):after{background:#57ebe4}.tutorial-field i:nth-child(5):after{background:#80acff}.tutorial-field i:nth-child(6):after{background:#c99aff}
.tutorial-line{position:absolute;left:0;right:0;bottom:25px;height:2px;background:#c1ffe9;box-shadow:0 0 7px #9cffe4}
.tutorial-note{position:absolute;width:14%;height:12px;left:35%;top:24px;border:1px solid #ebfff6;background:#62e9ac;border-radius:3px;box-shadow:0 2px 0 #245e43}
.tutorial-field span{position:absolute;left:54%;top:21px;font:750 12px/1 Manrope,sans-serif;color:#b6f9df}
.tutorial-tips{padding:0;margin:0;list-style:none;counter-reset:tip}.tutorial-tips li{position:relative;padding-left:29px;margin-bottom:13px;counter-increment:tip}
.tutorial-tips li:before{content:counter(tip,decimal-leading-zero);position:absolute;left:0;top:2px;color:#d3b88e;font-size:10px;font-weight:750}.tutorial-tips strong{font-size:14px;color:#ffe4b3}
.tutorial-tips p{font-size:12px;color:#c7d0d7;line-height:1.6;margin:3px 0 0}.tutorial-tips li:last-child{margin-bottom:0}
.tutorial-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:10px}.tutorial-actions button{min-height:44px;margin:0;font-size:14px}.tutorial-actions .text-action{border:1px solid #c6b28f77;border-radius:5px}
#help-tutorial{width:100%;min-height:40px;border:1px solid #c6b28f44;border-radius:6px;margin:4px 0 10px}
#help-sheet{max-height:calc(var(--app-h) - 24px);overflow-y:auto}
.landscape .jb-brand{min-height:36px}.landscape .jb-top h1{font-size:24px}.landscape .jb-top .jb-position{font-size:12px}
.landscape .score-controls{display:flex;gap:18px;padding-top:6px}.landscape #score-style{margin:0}.landscape #score-modes{flex:1}.landscape .scores-header{padding-top:3px;padding-bottom:3px}
.landscape .score-list{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:12px}.landscape .scores-header h1{font-size:20px}
.landscape .tutorial-layout{grid-template-columns:minmax(140px,.8fr) minmax(0,1.2fr);align-items:center;gap:24px;margin:7px 0 12px}
.landscape .tutorial-tips li{margin-bottom:8px}.landscape .tutorial-sheet .sheet-kicker h2{font-size:21px}.landscape .tutorial-tips p{font-size:11px}.landscape .tutorial-tips strong{font-size:13px}
@container(max-width:350px){.jb-top h1{font-size:18px}.score-row{grid-template-columns:34px minmax(0,1fr) 76px;gap:8px;padding:8px}.score-row img{width:34px;height:34px}.score-values b{font-size:16px}}
