:root{
  --paper:#efe6d2; --card:#fffaf0; --ink:#17302a; --ink2:#4b6159; --red:#c8372d; --yellow:#f2b705; --green:#2e7d4f;
  --line:2px solid var(--ink);
  --serif:Georgia,"Times New Roman",serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;background:var(--paper);color:var(--ink);font-family:var(--sans);overscroll-behavior:none;touch-action:manipulation;-webkit-text-size-adjust:100%}
body{overflow:hidden;position:fixed;inset:0;width:100%;-webkit-user-select:none;user-select:none}
input,button{font-family:inherit;font-size:16px}
input{-webkit-user-select:text;user-select:text}
button{cursor:pointer;border:0;background:none;color:inherit}
#app{height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom))}
#bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:10px;border-bottom:var(--line);flex:none}
.logo{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:.3px}
.logo i{color:var(--red);font-style:normal}
.me{display:flex;align-items:center;gap:8px;min-width:0}
.me b{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.score{background:var(--ink);color:var(--paper);padding:3px 10px;border-radius:5px;font-weight:700;font-size:14px;white-space:nowrap}
.off{color:var(--red);font-size:12px;font-weight:700}
#main{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding-top:14px;overflow:auto;-webkit-overflow-scrolling:touch}
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px}
h1,h2{font-family:var(--serif)}
h1{font-size:34px;line-height:1.1}
h2{font-size:24px}
.muted{color:var(--ink2);font-size:15px;line-height:1.4}
.tag{font-size:12px;text-transform:uppercase;letter-spacing:1.6px;color:var(--red);font-weight:700}
.ticket{background:var(--card);border:var(--line);border-radius:6px;padding:16px}
.field{width:100%;padding:14px;border:var(--line);border-radius:6px;background:var(--card);color:var(--ink)}
.field:disabled{opacity:.55}
.btn{width:100%;padding:15px;border:var(--line);border-radius:6px;background:var(--red);color:#fff;font-weight:800;box-shadow:3px 3px 0 var(--ink);letter-spacing:.3px}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn:disabled{opacity:.5}
.err{color:var(--red);font-weight:700;font-size:14px;min-height:18px}
/* poängnivåer */
.levels{display:flex;gap:6px;flex:none}
.levels span{flex:1;text-align:center;padding:7px 0;border:var(--line);border-radius:6px;font-weight:700;font-size:15px;transition:all .25s}
.levels span.past{opacity:.28;text-decoration:line-through;border-style:dashed}
.levels span.on{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px)}
.levels span.off{background:#bdb7a8;border-color:#8f8a7d;color:#6a665c;transform:none}
/* ledtrådar */
.clues{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;overflow:auto}
.clue{background:var(--card);border:var(--line);border-radius:6px;padding:14px 16px;font-size:17px;line-height:1.5;font-family:var(--serif)}
.clue.old{font-size:13px;opacity:.5;border-style:dashed;padding:9px 12px;line-height:1.4}
.clue small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:4px}
/* timer */
.timer{display:flex;align-items:center;gap:10px;flex:none}
.tbar{flex:1;height:10px;border:var(--line);border-radius:6px;overflow:hidden;background:var(--card)}
.tbar i{display:block;height:100%;background:var(--ink);width:100%}
.tbar.low i{background:var(--red)}
.timer b{font-family:var(--serif);font-size:26px;min-width:42px;text-align:right}
.status{min-height:22px;text-align:center;font-weight:700;flex:none}
/* nödstopp */
.pull{flex:none;width:100%;padding:0;touch-action:manipulation}
.pull svg{width:100%;height:auto;display:block;max-height:200px}
.pull .handle{transition:transform .12s}
.pull:not(:disabled):active .handle,.pull.down .handle{transform:translateY(9px)}
.pull:disabled{cursor:not-allowed}
.pull.dead{filter:grayscale(1) opacity(.45)}
.ans{flex:none;display:flex;flex-direction:column;gap:8px}
.ans label{font-weight:700;display:flex;justify-content:space-between}
.ans label b{color:var(--red);font-family:var(--serif);font-size:20px}
/* mellanakt */
.inter-item{background:var(--card);border:var(--line);border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.inter-item.now{border-color:var(--red);box-shadow:3px 3px 0 var(--red)}
.inter-item h3{font-family:var(--serif);font-size:17px;display:flex;justify-content:space-between;align-items:center}
.pill{background:var(--red);color:#fff;font-size:11px;padding:2px 8px;border-radius:99px;letter-spacing:1px;text-transform:uppercase;font-family:var(--sans)}
.inter-item label{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink2);font-weight:700}
.res{font-size:14px;font-weight:700}
.res.ok{color:var(--green)} .res.no{color:var(--red)} .res.near{color:#a86b00}
.banner{background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:6px;text-align:center;font-weight:700;flex:none}
/* scoreboard */
#overlay{position:fixed;inset:0;background:var(--paper);display:none;z-index:50;padding:max(18px,env(safe-area-inset-top)) 18px 18px;overflow:auto}
#overlay.show{display:block}
.board{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.board .row{display:flex;align-items:center;gap:12px;background:var(--card);border:var(--line);border-radius:6px;padding:12px 14px;font-size:20px;font-family:var(--serif)}
.board .row.me{background:var(--ink);color:var(--paper)}
.board .row .n{width:26px;font-weight:700}
.board .row .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .row b{font-size:24px}
.center-title{text-align:center;margin-bottom:6px}