:root{--navy: #14223b;--paper: #f4eee2;--ink: #1d2433;--muted: #596173;--yellow: #f5c518;--green: #1e8239;--red: #d83a30;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:#0d1522;color:#fff;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}button{font:inherit;cursor:pointer}svg{display:inline-block;vertical-align:middle}[hidden]{display:none!important}#cv{position:fixed;inset:0;width:100%;height:100%}#ui{position:fixed;inset:0;display:grid;gap:10px;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));grid-template-columns:minmax(200px,24%) 1fr minmax(150px,19%);grid-template-rows:auto 1fr auto;grid-template-areas:"hud stage board" "info stage board" "tray tray act"}#hud{grid-area:hud}#info{grid-area:info}#stage{grid-area:stage}#board{grid-area:board}#tray{grid-area:tray}#act{grid-area:act}.panel{background:#f4eee2f5;color:var(--ink);border-radius:12px;box-shadow:0 4px 18px #0007}#hud{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 12px;background:#0c1628e6;border-radius:12px;font-size:14px}#hud #hDate{color:var(--yellow);font-weight:700}#hErr b{color:#ff6b5f}.combo{font-style:normal;background:var(--yellow);color:var(--ink);border-radius:6px;padding:0 6px;font-weight:800}#hIns{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:10px;background:var(--yellow);color:var(--ink);font-weight:800}#hIns svg{width:18px;height:18px}body:not([data-s=inspect]):not([data-s=enter]) #hIns{visibility:hidden}#info{overflow:auto;padding:12px;min-height:0;align-self:start;max-height:100%}#info h3,.ins-info h3{font-size:15px;margin-bottom:8px}.rules{list-style:none;display:grid;gap:10px}.rules li{display:flex;gap:10px;align-items:flex-start}.rules i{flex:none;color:var(--navy)}.rules i svg{width:22px;height:22px}.r-restrict svg{color:var(--red)}.rules b{display:block;font-size:14px}.rules small{display:block;font-size:12px;color:var(--muted);margin-top:2px}.rules em{font-style:normal;font-size:10px;background:var(--yellow);color:var(--ink);padding:1px 5px;border-radius:4px;vertical-align:middle}.mini{display:none;font-size:12px;line-height:1.5}.mini svg{width:14px;height:14px;color:var(--navy);vertical-align:-2px}.mini .r-restrict svg{color:var(--red)}.mini .fl{margin-top:3px;color:var(--muted)}#board{align-self:start;background:#080e1aeb;border-radius:10px;padding:0 10px 8px;overflow:auto;max-height:100%}.board{width:100%;border-collapse:collapse;font-size:13px}.board caption{width:max-content;background:var(--yellow);color:var(--ink);font-weight:800;font-size:13px;padding:3px 10px;border-radius:0 0 8px 8px;margin-bottom:4px}.board th{text-align:left;color:#9fb0cc;font-weight:600;font-size:11px;padding:2px 4px}.board .f{display:inline-block}.board td{padding:3px 4px;border-top:1px solid #ffffff14;white-space:nowrap}.st-b{color:#5fd685;font-weight:700}.st-d{color:#ff7b70;font-weight:700}#board th:nth-child(3),#board td:nth-child(3),#board th:nth-child(4),#board td:nth-child(4){display:none}.ins-info .board{margin-top:12px;background:#0e1830;color:#fff;border-radius:8px}#stage{position:relative;min-height:0}#bubble{position:absolute;left:58%;top:28%;max-width:40%;background:var(--paper);color:var(--ink);padding:8px 12px;border-radius:12px;font-size:clamp(13px,1.5vw,18px);box-shadow:0 4px 14px #0006;opacity:0;transform:translateY(6px);transition:.2s;pointer-events:none}#bubble:before{content:"";position:absolute;left:-9px;top:14px;border:6px solid transparent;border-right:10px solid var(--paper);border-left:0}#bubble.show{opacity:1;transform:none}#banner{position:absolute;left:50%;bottom:10px;transform:translate(-50%,8px);display:flex;flex-direction:column;align-items:center;gap:4px;max-width:94%;opacity:0;transition:.2s;pointer-events:none;text-align:center}#banner.show{opacity:1;transform:translate(-50%)}#banner b{padding:6px 14px;border-radius:8px;color:#fff;font-size:clamp(14px,1.8vw,20px);letter-spacing:.03em;box-shadow:0 4px 14px #0007}#banner span{padding:5px 12px;border-radius:8px;background:var(--paper);color:var(--ink);font-weight:700;font-size:clamp(13px,1.5vw,17px);box-shadow:0 4px 14px #0007}#banner em{font-style:normal;font-weight:800;color:#fff;text-shadow:0 1px 3px #000}#banner.ok b{background:var(--green)}#banner.bad b{background:var(--red)}#banner.bad span{color:#a01f17}#tray,#act{background:linear-gradient(#3a3a3d,#2a2a2d);border-radius:14px;box-shadow:inset 0 3px 10px #000b,inset 0 -1px #ffffff14,0 1px #ffffff26}#tray{display:flex;gap:12px;padding:10px 12px;height:clamp(130px,34vh,300px);overflow-x:auto;overflow-y:hidden;justify-content:safe center;align-items:center;scroll-snap-type:x mandatory;scrollbar-width:none}#tray .doc{height:auto;flex:1 1 0;min-width:0;max-width:calc(clamp(130px,34vh,300px)*1.55)}#act{display:flex;flex-direction:row-reverse;flex-wrap:wrap-reverse;align-content:center;align-items:center;gap:16px;padding:14px 14px 20px;container-type:inline-size}#act button,.ins-act button{flex:1;min-width:0;padding:0 4px;overflow:hidden;max-height:130px;min-height:48px;border:0;border-radius:10px;color:#fff;font-weight:900;font-size:clamp(13px,1.3vw,20px);letter-spacing:.03em;text-transform:uppercase;text-shadow:0 2px 0 #0006;background:linear-gradient(#ffffff38,#fff0 45%),var(--face);box-shadow:inset 0 2px #ffffff70,inset 0 -3px #0003,0 7px 0 var(--side),0 7px 0 5px #141416,0 12px 14px 5px #000a;transition:transform .08s,box-shadow .08s,opacity .2s}#act button:active,.ins-act button:active{transform:translateY(5px);box-shadow:inset 0 2px #ffffff70,inset 0 -3px #0003,0 2px 0 var(--side),0 2px 0 5px #141416,0 5px 8px 5px #000a}.yes{--face: #3fb53b;--side: #1f6e1c}.no{--face: #e3442f;--side: #8f2318}#act button{height:min(130px,62%);font-size:clamp(10px,7.5cqw,22px)}@container (max-width: 250px){#act button{flex-basis:100%;height:min(90px,38%);font-size:clamp(12px,10cqw,20px)}}body:not([data-s=inspect]) #act button,body:not([data-s=inspect]) .ins-act button{opacity:.45;pointer-events:none}@media(max-height:500px)and (min-aspect-ratio:1/1){#hud{font-size:12px;padding:6px 10px}#hIns{min-height:36px}#info .full{display:none}#info .mini{display:block}#info{padding:8px 10px}.board{font-size:12px}.card{padding:14px}.card .brief small{display:none}.card .tip{font-size:13px}}@media(max-aspect-ratio:1/1){#ui{grid-template-columns:1fr;grid-template-rows:auto minmax(110px,1fr) auto auto auto;grid-template-areas:"hud" "stage" "info" "tray" "act";gap:8px}#board,#info .full{display:none}#info .mini{display:block}#info{padding:8px 10px;max-height:22vh}#tray{height:clamp(140px,27vh,240px);justify-content:flex-start}#tray .doc{height:100%;flex:none;max-width:none}#act{height:84px;padding:10px 14px 16px}#act button{height:auto;align-self:stretch}#bubble{left:56%;top:30%;max-width:42%}}.doc{position:relative;flex:none;height:100%;aspect-ratio:1.55;container-type:inline-size;background:linear-gradient(160deg,#fbf8f2,#ece6db);color:var(--ink);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px #fff inset,0 3px #b9b1a3,0 8px 18px #000a;scroll-snap-align:center;cursor:pointer}#tray .doc{animation:slide-in .35s ease-out}#tray.out .doc{transform:translateY(40%);opacity:0;transition:.35s ease-in}@keyframes slide-in{0%{transform:translateY(30%);opacity:0}}.doc>div{font-size:4cqw}.doc .hd{display:flex;justify-content:space-between;gap:.5em;padding:.55em .8em;background:linear-gradient(#ffffff1f,#0000001a),var(--c, #6d1f2a);color:#f3d9a0;font-weight:800;letter-spacing:.04em;font-size:3.2cqw;white-space:nowrap}.doc.bp .hd{background:linear-gradient(#ffffff1f,#0000001a),#213a73;color:#fff}.doc.bp{background:linear-gradient(160deg,#fff,#eef0f2)}.doc.vi{background:linear-gradient(160deg,#fdfdfb,#ebeae4)}.doc.vi .hd{background:none;color:var(--ink);flex-direction:column;align-items:center;gap:0;padding:.5em .8em 0;letter-spacing:.02em}.doc.vi .hd i svg{width:2.2em;height:2.2em;stroke-width:1.4}.doc.vi .hd small{font-size:.8em;font-weight:600;color:var(--muted)}.qr{width:18%;flex:none;align-self:center}.doc.bp .grid{grid-template-columns:1.35fr 1fr 1fr}.qr svg{display:block;width:100%}.doc .bd{flex:1;display:flex;gap:.6em;padding:.5em .8em;min-height:0;position:relative}.ph{width:25%;flex:none;align-self:flex-start;border-radius:.3em;overflow:hidden;outline:2px solid transparent}.ph img{width:100%;display:block}.grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:.25em .5em;align-content:start;min-width:0}.grid.g3{grid-template-columns:1fr 1fr 1fr}.f{position:relative;border-radius:.3em;padding:.1em .25em;outline:2px solid transparent;min-width:0}.f label{display:block;font-size:.64em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.f b{display:block;font-size:.92em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.f.w{grid-column:1 / -1}.mrz{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:2.7cqw!important;font-weight:600;padding:.2em .8em .5em;letter-spacing:.06em;color:#2b2d33;white-space:pre;overflow:hidden}.seal{position:absolute;right:.5em;bottom:.3em;color:#5a5f6a55;pointer-events:none}.seal svg{width:5em;height:5em;stroke-width:1.2}#insBody .f{cursor:pointer}.f.sel{outline-color:var(--yellow);background:#f5c51840}.f.ok{outline-color:var(--green);background:#1e82392a}.f.bad{outline-color:var(--red);background:#d83a302a}.f.info{outline-color:#3d7bd9;background:#3d7bd92a}[data-f].viol{outline:3px solid var(--red);background:#d83a3033;animation:pulse .45s 3}.f.viol:after{content:"✕";position:absolute;top:-.45em;right:-.3em;width:1.3em;height:1.3em;display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;font-size:.7em;font-weight:900}@keyframes pulse{50%{outline-color:transparent}}.stamp{position:absolute;left:15%;top:52%;font-size:4.6cqw;font-weight:900;padding:.05em .35em;border:.14em solid;border-radius:.2em;transform:translate(-50%,-50%) rotate(-12deg);animation:stamp .22s ease-out;letter-spacing:.05em;background:#fffa;pointer-events:none}.stamp.ok{color:#1a7a34}.stamp.no{color:#b8261e}@keyframes stamp{0%{transform:translate(-50%,-50%) rotate(-12deg) scale(2.2);opacity:0}}#inspect{position:fixed;inset:0;z-index:20;background:#080d16f0;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.ins-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;gap:10px}#insClose{min-height:44px;padding:0 16px;border:0;border-radius:10px;background:#ffffff1f;color:#fff;font-weight:700}#insBody{flex:1;overflow:auto;padding:4px 14px 14px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-content:flex-start;align-items:flex-start}#insBody .doc{width:min(94vw,520px,calc((100dvh - 170px)*1.55));height:auto;cursor:default}.ins-info{width:min(94vw,520px);padding:12px}.ins-info>.f{display:inline-block;margin-bottom:10px;outline-width:2px;background:#f5c51826}.ins-info>.f b{font-size:18px}.ins-info>.f label{font-size:11px}#insBody .f{min-height:2.6em}.ins-act{display:flex;gap:22px;padding:10px 20px 20px;height:92px}#modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#060a128c;padding:16px}.card{background:var(--paper);color:var(--ink);border-radius:16px;padding:22px;width:min(460px,100%);max-height:100%;overflow:auto;text-align:center;box-shadow:0 10px 40px #000a;animation:pop .25s ease-out}@keyframes pop{0%{transform:scale(.94);opacity:0}}.card h1{font-size:30px}.card h2{font-size:24px}.card p{margin-top:8px;color:#444b5c}.card .logo{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:16px;background:var(--yellow);color:var(--navy);font-size:36px;margin-bottom:10px}.card .date{color:var(--muted);font-weight:700;margin-top:2px}.card .tip{background:#fff7d6;border-radius:10px;padding:10px;text-align:left;font-size:14px}.card .brief{text-align:left;margin-top:14px}.card .stats{display:flex;justify-content:center;gap:22px;margin-top:14px}.card .stats small{display:block;color:var(--muted);font-size:12px}.card .stats b{font-size:26px}.card .perfect{color:var(--green);font-weight:800}.card .mistakes{margin-top:12px;text-align:left;background:#fbe3df;border-radius:10px;padding:8px 12px}.card .mistakes small{color:#8f1f18;font-weight:800}.card .mistakes ul{margin:4px 0 0 18px;font-size:14px}.card em{color:#8a6100;font-style:normal;font-weight:800}.btn{display:block;width:100%;min-height:50px;margin-top:12px;border:0;border-radius:12px;font-size:18px;font-weight:800;background:var(--navy);color:#fff}.btn.sticky{position:sticky;bottom:0;box-shadow:0 -10px 14px var(--paper)}.btn.alt{background:transparent;color:var(--navy);min-height:44px;margin-top:4px}#toast{position:fixed;z-index:40;left:50%;top:14vh;transform:translate(-50%,-10px);max-width:min(92vw,560px);padding:10px 16px;border-radius:12px;background:#0e1830f0;color:#fff;font-weight:700;font-size:15px;text-align:center;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 6px 20px #0008}#inspect:not([hidden])~#toast{top:auto;bottom:96px}#toast.show{opacity:1;transform:translate(-50%)}#toast.ok{background:#1a7a34f2}#toast.bad{background:#b02a22f2}#toast.info{background:#2a5aa8f2}
