.juggle-body { --juggle-machine:#183441; --juggle-edge:#06151c; --juggle-screen:#0d3850; }
.juggle-main { width:min(1320px,calc(100% - 32px)); padding-top:30px; }
.juggle-heading { display:flex; align-items:end; justify-content:space-between; gap:28px; margin-bottom:22px; }
.juggle-heading h1 { margin:0; font-size:clamp(46px,7vw,78px); line-height:.9; letter-spacing:-.065em; }
.juggle-heading>div>p:last-child { margin:16px 0 0; color:#657680; }
.juggle-heading__meta { display:flex; align-items:stretch; gap:8px; }
.juggle-heading__meta span,.juggle-heading__meta button { min-width:132px; padding:10px 12px; border:2px solid #9aabb2; background:#f8fbfc; color:#6b7980; font:800 9px/1.35 ui-monospace,monospace; text-transform:uppercase; }
.juggle-heading__meta strong { display:block; margin-top:3px; color:#102a36; font-size:11px; }.juggle-heading__meta button{min-width:auto;cursor:pointer;color:#173542}
.juggle-layout { display:grid; grid-template-columns:minmax(0,2.35fr) minmax(280px,.65fr); gap:20px; align-items:start; }
.juggle-machine { overflow:hidden; border:7px solid var(--juggle-edge); border-radius:6px; background:var(--juggle-machine); box-shadow:10px 12px 0 #b8c5ca,0 24px 55px rgba(16,35,43,.2); }
.juggle-screen-wrap { position:relative; margin:8px 8px 0; overflow:hidden; border:6px solid #071a22; background:var(--juggle-screen); }
#juggle-canvas { display:block; width:100%; aspect-ratio:16/9; background:#126c9b; cursor:ew-resize; image-rendering:pixelated; image-rendering:crisp-edges; touch-action:none; user-select:none; }
.juggle-screen-wrap .screen-message.countdown { min-width:112px; width:auto; padding:13px 24px 15px; background:#ffd438; }
.juggle-screen-wrap .screen-message.countdown span { font-size:clamp(38px,7vw,62px); line-height:.85; }
.juggle-screen-wrap .screen-message.countdown small { margin-top:10px; letter-spacing:.08em; }
.contact-meter { display:grid; grid-template-columns:auto 95px minmax(120px,1fr) 38px; align-items:center; gap:12px; margin:0 8px; padding:10px 12px; border:4px solid #071a22; border-top:0; background:#102630; color:#9eb4bc; font:900 9px/1 ui-monospace,monospace; }
.contact-meter strong { color:#ffd438; text-align:center; }.contact-meter>div{height:10px;background:#071a22;box-shadow:inset 0 0 0 2px #294956}.contact-meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,#35d1c5,#ffd438,#ed5a4f)}.contact-meter b{color:#fff6cc;font-size:12px;text-align:right}
.juggle-controls { display:grid; grid-template-columns:minmax(270px,.8fr) minmax(0,1.2fr); gap:18px; padding:18px; border-top:6px solid #071a22; background:#183d4d; }
.control-guide { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.control-guide div { min-width:0; padding:13px; border:2px solid #071a22; background:#e7eef0; box-shadow:4px 4px 0 #0b212a; }
.control-guide span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#e9534c; color:white; font:900 10px/1 monospace; }
.control-guide strong,.control-guide small { display:block; }.control-guide strong{margin-top:10px;color:#132b36;font-size:12px}.control-guide small{margin-top:5px;color:#6e7d83;font-size:9px;line-height:1.4}
.juggle-sidebar { display:grid; gap:14px; }
.contact-verdict strong { display:block; color:#132e3a; font-size:21px; }.contact-verdict span{display:block;margin-top:9px;color:#718087;font-size:11px;line-height:1.5}
.contact-stats { display:grid; gap:7px; margin-top:22px; }.contact-stats span{display:flex;justify-content:space-between;padding-bottom:7px;border-bottom:1px dashed #bec9cd;color:#6c7c83;font:800 9px/1.2 ui-monospace,monospace}.contact-stats b{color:#173744}
.juggle-rules { display:grid; grid-template-columns:.8fr 2.2fr; gap:30px; margin-top:38px; padding:30px; border:2px solid #173542; background:#fff; box-shadow:7px 7px 0 #bdc9cd; }
.juggle-rules h2{margin:0;font-size:32px;line-height:1.05}.juggle-rules ol{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0;padding:0;list-style:none}.juggle-rules li{padding-left:13px;border-left:4px solid #ffd438}.juggle-rules li>span{color:#17947c;font:900 11px/1 monospace}.juggle-rules li strong{display:block;margin:8px 0;font-size:14px}.juggle-rules li p{margin:0;color:#6b7a80;font-size:11px;line-height:1.5}
.juggle-body[data-input="touch"] .control-guide div:first-child small::after { content:" · dra med ett finger"; }
@media(max-width:1050px){.juggle-layout{grid-template-columns:1fr}.juggle-sidebar{grid-template-columns:repeat(3,1fr)}.juggle-rules{grid-template-columns:1fr}.juggle-rules ol{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.juggle-heading{align-items:flex-start;flex-direction:column}.juggle-heading__meta{width:100%;flex-wrap:wrap}.juggle-controls{grid-template-columns:1fr}.juggle-sidebar{grid-template-columns:1fr}.personal-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.juggle-main{width:min(100% - 16px,1320px)}.juggle-machine{border-width:4px}.juggle-screen-wrap{margin:6px 6px 0;border-width:4px}.machine-top{height:38px}.juggle-controls{padding:12px}.mode-select{grid-template-columns:1fr}.control-guide{grid-template-columns:repeat(3,1fr)}.control-guide div{padding:8px}.control-guide strong{font-size:10px}.control-guide small{font-size:8px}.contact-meter{grid-template-columns:1fr 1fr;margin:0 6px}.contact-meter>div{grid-column:1/-1;grid-row:2}.juggle-rules{padding:22px}.juggle-rules ol{grid-template-columns:1fr}.screen-message{min-width:88%}.juggle-heading__meta span{flex:1}.run-dialog__screen{padding:28px 18px}}