:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: en padelhall om kvelden. Dyp blå hall, lysere banedekke, glassflater som banens vegger, ballgult bare der noe teller. Bevisst ett tema. */
:root{
  --court:#0a2a55; --surface:#10366a; --deep:#071f42; --raise:#1a5fb0; --line:#ffffff; --faint:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.07); --ink:#f6f9ff; --muted:#a9c1e4; --ball:#e4f33c; --ball2:#cfe02a; --on-ball:#0c2a52; --loss:#ffb199;
  --display:"Archivo","Arial Narrow",Arial,sans-serif; --body:"Hanken Grotesk","Segoe UI",Roboto,sans-serif;
  --shadow:0 10px 30px rgba(3,14,34,.35);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--court);color:var(--ink);font:500 16px/1.45 var(--body);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(120% 60% at 50% -10%,#1b5aa6 0%,rgba(27,90,166,0) 65%),linear-gradient(180deg,#0b2d5b 0%,#071f42 100%)}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;transition:transform .12s ease,background-color .18s ease,border-color .18s ease,color .18s ease}
button:active:not(:disabled){transform:scale(.975)}
:focus-visible{outline:2px solid var(--ball);outline-offset:2px}
.wrap{max-width:640px;margin:0 auto;padding-block:24px 124px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:22px}
.wrap.enter{animation:rise .28s ease-out}
@keyframes rise{from{transform:translateY(8px);opacity:.3}to{transform:none;opacity:1}}
h1,h2,h3{font-family:var(--display);font-stretch:118%;margin:0;line-height:1.05;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(34px,9.6vw,50px);font-weight:650}
h2{font-size:23px;font-weight:650}
h3{font-size:17px;font-weight:650}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:14px}
.lab{font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.between{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.btn{display:block;width:100%;min-height:56px;padding:14px 18px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--faint);font-family:var(--display);font-stretch:112%;font-weight:650;font-size:17px;text-align:center}
.btn.go{background:linear-gradient(180deg,var(--ball) 0%,var(--ball2) 100%);color:var(--on-ball);box-shadow:0 8px 26px rgba(228,243,60,.24),inset 0 1px 0 rgba(255,255,255,.5)}
.btn:disabled{opacity:.42;cursor:default}
.btn.go:disabled{opacity:1;background:var(--glass);color:var(--muted);box-shadow:inset 0 0 0 1px var(--faint);font-weight:550}
.btn.danger{color:var(--loss);box-shadow:inset 0 0 0 1px rgba(255,177,153,.38)}
.btn.sm{min-height:48px;font-size:15px;padding:10px 14px;border-radius:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.link{text-decoration:underline;text-underline-offset:3px;color:var(--muted);font-size:15px;min-height:44px;padding:10px 0}
.chip{min-height:44px;padding:9px 16px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--faint);font-weight:600;font-size:15px}
.chip.on{background:var(--ball);color:var(--on-ball);box-shadow:none}
.banner{background:rgba(228,243,60,.07);box-shadow:inset 0 0 0 1px rgba(228,243,60,.35);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px}
.warn{background:rgba(255,177,153,.1);color:var(--loss);padding:10px 14px;font-size:14px;border-radius:12px}
input[type=text]{width:100%;min-height:50px;background:var(--deep);border:1px solid var(--faint);padding:8px 14px;border-radius:14px}
.inline-form{display:flex;gap:8px}.inline-form input{flex:1;min-width:0}.inline-form .btn{width:auto;flex:none}
.stepper{display:flex;align-items:center;background:var(--glass);box-shadow:inset 0 0 0 1px var(--faint);border-radius:14px;width:max-content}
.stepper button{width:50px;height:48px;font-size:24px;font-weight:500;color:var(--muted)}
.stepper span{min-width:44px;text-align:center;font-family:var(--display);font-stretch:112%;font-size:20px;font-weight:650;font-variant-numeric:tabular-nums}
.hero-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mode{background:var(--surface);box-shadow:inset 0 0 0 1px var(--faint);border-radius:18px;padding:16px;text-align:left;display:flex;flex-direction:column;gap:6px}
.mode b{font-family:var(--display);font-stretch:112%;font-size:19px;font-weight:650;line-height:1.1}
.mode span{font-size:14px;color:var(--muted);font-weight:500}
.mode.on{box-shadow:inset 0 0 0 1.5px var(--ball),0 8px 24px rgba(228,243,60,.1)}
.mode.on b{color:var(--ball)}

.hero{position:relative;overflow:hidden;border-radius:24px;padding:26px 22px 24px;background:linear-gradient(155deg,#1f68bd 0%,#124488 100%);box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.16);display:flex;flex-direction:column;gap:10px}
.hero::before{content:"";position:absolute;inset:12px;border:1.5px solid rgba(255,255,255,.16);border-radius:6px;pointer-events:none}
.hero::after{content:"";position:absolute;top:12px;bottom:12px;right:30%;border-left:1.5px solid rgba(255,255,255,.16);pointer-events:none}
.hero>*{position:relative}
.hero .muted{color:#d3e2f7;max-width:32ch}
.heroball{position:absolute!important;top:26px;right:26px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6ff9a,var(--ball) 55%,var(--ball2));box-shadow:0 0 34px rgba(228,243,60,.55)}

/* Banekort: lysere dekke, tynne hvite linjer, nett i midten */
.courtbox{display:flex;flex-direction:column;gap:7px}
.court{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:132px;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#1e66ba 0%,#15529f 100%);box-shadow:var(--shadow),inset 0 0 0 1.5px rgba(255,255,255,.75)}
.court::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:rgba(255,255,255,.85);box-shadow:0 0 10px rgba(3,14,34,.45);pointer-events:none}
.side{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:14px;text-align:left;min-width:0}
.side::before{content:"";position:absolute;top:0;bottom:0;width:0;border-left:1px solid rgba(255,255,255,.2);pointer-events:none}
.side:first-child::before{right:30%}.side:last-child::before{left:30%}
.side:last-child{text-align:right}
.side .names{position:relative;display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:15.5px;line-height:1.15}
.who{display:flex;align-items:center;gap:8px;min-width:0}
.who>span{min-width:0;overflow-wrap:anywhere}
.side:last-child .who{flex-direction:row-reverse}
.av{flex:none;display:inline-grid;place-items:center;width:27px;height:27px;border-radius:50%;background:rgba(255,255,255,.17);font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.side .pts{position:relative;font-family:var(--display);font-stretch:112%;font-weight:650;font-size:40px;line-height:.95;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.4)}
.side.has .pts{color:var(--ink)} .side.won .pts{color:var(--ball)}
@media (hover:hover){.side:hover{background:rgba(255,255,255,.05)}}
.roundhead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.roundhead .big{font-family:var(--display);font-stretch:118%;font-weight:650;font-size:clamp(44px,13.5vw,68px);line-height:1;letter-spacing:-.02em}
.hush{display:inline-flex;align-items:center;gap:6px;flex:none;padding:7px 12px;border-radius:999px;background:rgba(228,243,60,.12);color:var(--ball);font-size:13px;font-weight:600}
.hush svg{width:14px;height:14px}

/* Rangeringsrader: alt får plass i skjermbredden */
.ranks{display:flex;flex-direction:column;background:var(--surface);border-radius:18px;box-shadow:inset 0 0 0 1px var(--faint);padding:2px 14px}
.rank{display:flex;align-items:center;gap:10px;width:100%;padding:12px 0;border-bottom:1px solid var(--faint);text-align:left}
.rank:last-child{border-bottom:0}
.rk{flex:none;width:20px;color:var(--muted);font-weight:600;font-size:15px}
.rkmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rkmain b{font-weight:600;overflow-wrap:anywhere}
.rkval{flex:none;display:flex;flex-direction:column;align-items:flex-end}
.rkval b{font-family:var(--display);font-stretch:110%;font-weight:650;font-size:22px;line-height:1.1}
.rkval .lab{font-size:10.5px;letter-spacing:.08em}

.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tile{background:var(--surface);box-shadow:inset 0 0 0 1px var(--faint);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.tile:last-child:nth-child(odd){grid-column:1/-1}
.tile b{font-family:var(--display);font-stretch:110%;font-weight:650;font-size:23px;line-height:1.15;overflow-wrap:anywhere}
.tile .small{color:var(--muted)}
.list{display:flex;flex-direction:column;background:var(--surface);border-radius:18px;box-shadow:inset 0 0 0 1px var(--faint);padding:2px 16px}
.item{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--faint);width:100%;text-align:left;align-items:center}
.item:last-child{border-bottom:0}
.item>div{min-width:0}
.item b{font-weight:600;overflow-wrap:anywhere}
.chart{position:relative;background:var(--surface);border-radius:18px;box-shadow:inset 0 0 0 1px var(--faint);padding:10px 8px 4px}
.chart svg{display:block;width:100%;height:auto;touch-action:pan-y}
.tip{position:absolute;top:8px;background:var(--ink);color:var(--deep);font-size:13px;font-weight:600;padding:3px 8px;border-radius:7px;white-space:nowrap;transform:translateX(-50%);pointer-events:none}

/* Avsløring */
.rev{display:flex;flex-direction:column;gap:8px}
.revrow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:13px 14px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--faint);min-height:74px}
.revrow .p{font-family:var(--display);font-stretch:112%;font-weight:650;font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
.revrow .nm{display:flex;align-items:center;gap:9px;font-family:var(--display);font-stretch:108%;font-weight:620;font-size:18px;line-height:1.1;min-width:0;overflow-wrap:anywhere}
.revrow .nm>span{min-width:0}
.revstat{display:flex;flex-direction:column;align-items:flex-end;text-align:right;white-space:nowrap;line-height:1.25}
.revstat .small{font-size:12.5px}
.revstat .total{font-family:var(--display);font-stretch:112%;font-weight:650;font-size:25px;line-height:1.1}
.revrow.sealed{background:var(--glass);box-shadow:inset 0 0 0 1px var(--faint);min-height:64px}
.revrow.sealed .nm{color:rgba(255,255,255,.28);letter-spacing:.2em}
.revrow.podium{box-shadow:inset 0 0 0 1px rgba(228,243,60,.4)}
.revrow.first{background:linear-gradient(135deg,var(--ball) 0%,var(--ball2) 100%);color:var(--on-ball);box-shadow:0 12px 36px rgba(228,243,60,.3);min-height:92px}
.revrow.first .muted{color:var(--on-ball)}
.revrow.first .av{background:rgba(12,42,82,.16)}
.revrow.first .nm{font-size:22px}
.revrow.fresh{animation:drop .55s cubic-bezier(.2,1.25,.4,1)}
@keyframes drop{from{transform:translateY(-10px) scale(1.03);opacity:.15}to{transform:none;opacity:1}}

/* Bunnmeny og ark */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;pointer-events:none;padding-top:0;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
.nav>div{pointer-events:auto;max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:6px;border-radius:22px;background:rgba(7,31,66,.84);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow),inset 0 0 0 1px var(--faint)}
.nav button{min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:16px;font-size:12px;font-weight:600;color:var(--muted)}
.nav button svg{width:21px;height:21px}
.nav button.on{color:var(--ball);background:rgba(228,243,60,.11)}
.veil{position:fixed;inset:0;z-index:30;background:rgba(4,16,36,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:flex-end;justify-content:center}
.veil.enter{animation:fade .2s ease-out}
.veil.enter .sheet{animation:up .3s cubic-bezier(.2,.9,.3,1)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(40px)}to{transform:none}}
.sheet{background:var(--surface);border-radius:26px 26px 0 0;box-shadow:0 -14px 40px rgba(3,14,34,.45),inset 0 1px 0 rgba(255,255,255,.14);width:100%;max-width:640px;max-height:88%;overflow:auto;padding-block:10px calc(20px + env(safe-area-inset-bottom,0px));padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:14px}
.sheet::before{content:"";flex:none;align-self:center;width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.26)}
.numgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.numgrid button{min-height:54px;border-radius:13px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--faint);font-family:var(--display);font-stretch:110%;font-weight:620;font-size:21px;font-variant-numeric:tabular-nums}
.numgrid button.on{background:var(--ball);color:var(--on-ball);box-shadow:none}
.top{display:flex;align-items:center;gap:12px}
.back{min-height:44px;font-weight:600;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.wrap.enter,.veil.enter,.veil.enter .sheet,.revrow.fresh{animation:none}button{transition:none}}

/* Tillegg for egen server */
input[type=password]{width:100%;min-height:50px;background:var(--deep);border:1px solid var(--faint);padding:8px 14px;border-radius:14px}
.herolab{color:#d3e2f7}
.sub45{font-size:.45em}
.link.leave{align-self:flex-start;min-height:44px;padding:0}