:root { --navy:#17263c; --blue:#087ca7; --orange:#f26624; --red:#b93e52; --line:#d6e1e6; --muted:#536879; --paper:#fff; --bg:#eef3f6; font-family:Arial,Helvetica,sans-serif; color:var(--navy); background:var(--bg); }
* { box-sizing:border-box; }
body { margin:0; }
[hidden] { display:none !important; }
h1,h2,h3,p { margin:0 0 .8rem; }
h1 { font-size:1.5rem; } h2 { font-size:1.2rem; } h3 { font-size:1rem; }
p,li { line-height:1.5; } p { white-space:pre-line; }
button,.button { display:inline-flex; align-items:center; justify-content:center; gap:.3rem; border:1px solid transparent; border-radius:7px; padding:.65rem .85rem; background:var(--blue); color:white; text-decoration:none; font:inherit; font-weight:700; cursor:pointer; text-align:center; }
button:hover,.button:hover { filter:brightness(.94); }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.primary { background:var(--orange); } .danger { background:var(--red); } .secondary { background:#e6eef3; color:var(--navy); border-color:var(--line); }
input,textarea,select { display:block; width:100%; padding:.65rem; margin-top:.3rem; border:1px solid #a9b9c5; border-radius:6px; color:var(--navy); background:#fff; font:inherit; }
textarea { min-height:90px; resize:vertical; }
label { display:block; font-size:.9rem; font-weight:600; margin-bottom:.8rem; }
input[type=checkbox],input[type=radio] { width:auto; display:inline-block; margin:0 .45rem 0 0; }
.check { display:flex; align-items:center; gap:.35rem; }
#app { max-width:1280px; margin:auto; padding:20px; }
.card { padding:22px; background:var(--paper); border:1px solid var(--line); border-radius:13px; margin-bottom:18px; box-shadow:0 5px 18px #17263c08; }
.topbar,.section-head,.timer-row,.team-row,.round-row,.actions,.utility { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.topbar { margin-bottom:16px; } .topbar>div { flex:1; text-align:center; min-width:180px; }
.topbar h1 { margin-bottom:.25rem; } .utility { margin-bottom:18px; font-size:.8rem; color:var(--muted); }
.utility button { font-size:.8rem; padding:.45rem .65rem; }
.section-head { justify-content:space-between; margin-bottom:14px; } .section-head h2 { margin:0; }
.eyebrow { color:var(--orange); text-transform:uppercase; font-size:.72rem; font-weight:800; letter-spacing:.16em; }
.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:16px 0; }
.info-grid article { background:#f7fafc; padding:12px; border:1px solid #e5edf1; border-radius:8px; }
.info-grid h3 { color:var(--blue); } .info-grid p { font-size:.85rem; margin-bottom:0; }
.current { border-color:var(--blue); } .finish { border-top:4px solid var(--orange); }
.team-row,.round-row { border-top:1px solid var(--line); padding:12px 0; }
.team-row>strong,.round-row>strong { flex:1; min-width:100px; } .team-row button,.round-row button { font-size:.82rem; }
.round-row label { display:flex; align-items:center; gap:8px; margin:0; } .round-row input { width:80px; margin:0; }
.timer-row { background:#eef7fa; border-radius:9px; padding:12px; } #clock { font-size:2rem; min-width:100px; }
.save-state,.muted,.local-note { color:var(--muted); font-size:.85rem; } .save-state { margin:12px 0; }
.tie { border:1px solid var(--blue); background:#f3fafc; border-radius:10px; padding:18px; margin:16px 0; }
.award-preview { margin-top:20px; padding:20px; background:#fff6ed; border-radius:10px; }
summary { cursor:pointer; font-weight:700; color:var(--blue); padding:4px; }
.notice { position:sticky; top:0; z-index:5; padding:10px 20px; background:#e4f4e9; white-space:pre-wrap; }
.notice:empty { display:none; } .error { background:#fff0f1; color:#8c2031; } #dialogError:empty { display:none; }
dialog { color:var(--navy); border:0; border-radius:14px; padding:25px; width:min(1000px,94vw); max-height:90vh; overflow:auto; box-shadow:0 20px 80px #0005; }
dialog::backdrop { background:#14283cb3; }
.builder-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; } .compact { padding:12px; }
.member-tags { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; } .member-tags>span { background:#edf4f7; padding:4px 7px; border-radius:6px; } .member-tags button { padding:2px 6px; }
.schedule-row { padding:15px; margin-bottom:14px; background:#f2f6f8; border-radius:8px; display:grid; grid-template-columns:2fr 1fr; gap:10px; }
.schedule-row label:nth-child(3),.schedule-row .actions { grid-column:1/-1; }
.start-screen { max-width:680px; margin:40px auto; } .start-screen form { margin:24px 0; }
.player-page #app { max-width:650px; } .player-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px; background:var(--navy); color:#fff; border-radius:12px; margin-bottom:18px; }
.player-header span { flex:1; text-align:center; } .player-header small { white-space:nowrap; }
.team-photo { width:100%; max-height:350px; object-fit:contain; } .photo-placeholder { text-align:center; border:2px dashed var(--line); padding:35px; }
#photoFile { max-width:220px; font-size:.8rem; color:inherit; background:transparent; border:0; }
.wide { width:100%; background:var(--navy); } .local-note { margin:12px; text-align:center; }
.stop-card { text-align:center; border-color:var(--orange); } .stop-button { min-width:180px; padding:30px; font-size:1.5rem; }
.quiz-row { display:grid; grid-template-columns:65px 1fr; align-items:center; gap:8px; }
.projector-page { background:linear-gradient(135deg,#17263c,#254d70); color:#fff; min-height:100vh; }
.projector-page #app { max-width:none; text-align:center; padding:4vw; }
.stage { max-width:1400px; margin:5vh auto 25px; } .stage h1 { font-size:clamp(38px,6vw,110px); line-height:1.1; overflow-wrap:anywhere; } .stage h2 { font-size:clamp(22px,3vw,48px); font-weight:500; line-height:1.35; white-space:pre-line; }
.projector-page .eyebrow { font-size:1.2rem; color:#ffb278; } .projector-heading h1 { font-size:3rem; color:#ffb278; }
.projector-grid { display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:20px; text-align:left; }
.projector-grid section { background:#ffffff0c; border:1px solid #ffffff30; border-radius:18px; padding:25px; } .projector-grid h2 { font-size:clamp(24px,2.5vw,40px); } .projector-grid p,.projector-grid li { font-size:clamp(18px,1.7vw,27px); }
.projector-clock { display:block; font-size:clamp(50px,7vw,110px); margin-top:30px; }
.ranking { padding-left:25px; } .ranking li { padding:12px 0; } .ranking li b { float:right; } .ranking small { background:var(--red); margin-left:10px; }
.team-tags { display:flex; justify-content:center; gap:15px; } .team-tags span { padding:12px 20px; border-radius:30px; background:#ffffff20; font-size:1.5rem; }
.result-list { list-style:none; padding:0; max-width:1000px; margin:30px auto; } .result-list li { display:flex; justify-content:space-between; gap:20px; padding:18px; margin:10px 0; background:#ffffff12; border-radius:10px; font-size:1.5rem; }
.medal { font-size:5rem; } .podium-photo { max-width:60vw; max-height:35vh; border-radius:14px; }
.countdown { position:fixed; inset:0; display:grid; place-items:center; background:#17263cec; color:#ffb278; font-weight:bold; font-size:clamp(50px,15vw,220px); pointer-events:none; }
.applause { font-size:clamp(30px,8vw,120px); animation:bounce .8s infinite alternate; }
@keyframes bounce { to { transform:translateY(-15px); } }
@media (prefers-reduced-motion:reduce) { .applause { animation:none; } }
@media (max-width:700px) { #app { padding:10px; } .card { padding:15px; } .topbar>div { order:-1; flex-basis:100%; } .builder-grid,.projector-grid { grid-template-columns:1fr; } .round-row>strong,.team-row>strong { flex-basis:100%; } .info-grid { grid-template-columns:1fr 1fr; } .player-header { flex-wrap:wrap; } .result-list li { font-size:1rem; } }

/* V6:s separata händer, med obruten animation under hela applåden. */
.applause-hands{position:fixed;left:5%;right:5%;bottom:2vh;height:34vh;pointer-events:none}
.applause-hands span{position:absolute;bottom:-4vh;font-size:clamp(40px,7vw,100px);animation:celebrate-hands 1.5s infinite alternate ease-in-out}
.applause-hands span:nth-child(1){left:5%;animation-delay:-.1s}
.applause-hands span:nth-child(2){left:22%;animation-delay:-.5s}
.applause-hands span:nth-child(3){left:39%;animation-delay:-.9s}
.applause-hands span:nth-child(4){left:56%;animation-delay:-.3s}
.applause-hands span:nth-child(5){left:73%;animation-delay:-.7s}
.applause-hands span:nth-child(6){left:88%;animation-delay:-1.1s}
@keyframes celebrate-hands{from{transform:translateY(3vh) rotate(-10deg) scale(.9)}to{transform:translateY(-15vh) rotate(12deg) scale(1.2)}}
.start-countdown{font-size:clamp(5rem,20vw,18rem);font-weight:900;color:var(--orange,#ff7a31);line-height:1.2;text-align:center}
.schedule-insert{display:block;margin:12px auto}
.schedule-note{min-width:0}.schedule-note label{margin-top:10px}
.member-tags span{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border-radius:10px}
.member-tags input{flex:1;min-width:100px;width:140px}
@media(prefers-reduced-motion:reduce){.applause-hands span{animation:none;bottom:5vh}}
/* Varje start räknar ned med en puls och en ljusväxling per sekund. */
.start-countdown{animation:start-pulse 1s ease-out infinite;text-shadow:0 0 35px #ff963488}
.projector-page[data-counting=true]{overflow:hidden}
.projector-page[data-counting=true] #app{height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3vh 4vw;overflow:hidden}
.projector-page[data-counting=true] .stage{margin:0 auto 3vh}
.projector-page[data-counting=true] .stage h1{font-size:clamp(28px,6vw,80px)}
.start-countdown{display:inline-block;font-size:clamp(4rem,min(18vw,34vh),16rem)}
.start-countdown.start-word{font-size:clamp(3rem,min(12vw,28vh),12rem)}
@keyframes start-pulse{0%{transform:scale(.65);opacity:.25;color:#fff}20%{transform:scale(1.12);opacity:1;color:#ff8b39}60%{transform:scale(1);opacity:1}85%{opacity:.4}100%{transform:scale(.92);opacity:1;color:#fff}}
@media(prefers-reduced-motion:reduce){.start-countdown{animation:start-glow 1s ease-in-out infinite}}
@keyframes start-glow{0%,100%{color:#fff}50%{color:#ff8b39}}