/* Jons BK: handritad, kärleksfull. Färger från loggan (röd + rosa) plus krämvitt, plommonsvart, solgult och gräsgrönt för läsbarhet. */
:root{
  --red:#CA454F; --red-dk:#A93340; --pink:#F38A99; --tint:#FBD5DB; --tint-2:#FFEDE6;
  --cream:#FFF5EC; --ink:#2E1A1F; --ink-soft:#5E4147;
  --green:#2E7D5B;
  color-scheme:light;
  --paper:var(--cream); --paper-2:var(--tint-2);
  --display:"Gochi Hand","Patrick Hand","Comic Sans MS","Marker Felt",cursive;
  --body:"Nunito","Trebuchet MS",Verdana,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0}
body{
  color:var(--ink);font:400 16px/1.55 var(--body);min-height:100%;background-color:var(--red);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%23D9626C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 44c-8-6-12-11-12-16 0-5 4-8 8-8 3 0 5 2 6 4 1-2 3-4 6-4 4 0 8 3 8 8 0 5-4 10-16 16z'/%3E%3Cpath d='M112 112c-6-5-9-8-9-12 0-4 3-6 6-6 2 0 4 1 5 3 1-2 3-3 5-3 3 0 6 2 6 6 0 4-3 7-13 12z'/%3E%3Cpath d='M118 30l3 8 8 3-8 3-3 8-3-8-8-3 8-3z'/%3E%3Cpath d='M40 120c4-5 8 5 12 0s8 5 12 0'/%3E%3Ccircle cx='80' cy='70' r='3'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--cream)}
.wrap{max-width:640px;margin:0 auto;padding:18px 14px 44px}
a{color:inherit}

/* ---- gemensamt handritat: vickliga linjer ---- */
.panel,.card,.nav a,.tiles a,.btn,.kraft,.chip,.mast p{position:relative;isolation:isolate}
.panel::before,.card::before,.nav a::before,.tiles a::before,.btn::before,.chip::before{
  content:"";position:absolute;inset:0;z-index:-1;border:3px solid var(--ink);border-radius:20px 26px 18px 24px/24px 18px 26px 20px;
  background:var(--paper);filter:url(#wob);pointer-events:none}

/* ---- logotyp + huvud ---- */
.mast{display:flex;align-items:center;gap:12px;padding:4px 0 14px}
.mast a.logo{flex:none;display:block}
.mast .logo img{width:118px;height:auto;filter:drop-shadow(0 3px 0 rgba(46,26,31,.25))}
.mast h1{margin:0;font:400 clamp(40px,13vw,64px)/.9 var(--display);color:var(--cream);text-shadow:3px 3px 0 var(--red-dk)}
.mast h1 a{text-decoration:none}
.mast p{margin:10px 0 0;display:inline-block;font-size:13px;line-height:1.35;font-weight:700;color:var(--ink);background:var(--cream);
  padding:5px 11px;border:2px solid var(--ink);border-radius:14px 18px 12px 16px;transform:rotate(-1.5deg)}

.ticker{overflow:hidden;background:var(--cream);color:var(--red-dk);border-top:3px dashed var(--ink);border-bottom:3px dashed var(--ink);
  font:400 21px/1 var(--display);padding:10px 0;margin:0 -14px 20px;white-space:nowrap}
.ticker span{display:inline-block;padding-left:100%;animation:tick 26s linear infinite}
.ticker b{color:var(--pink);font-weight:400;padding:0 .5em;-webkit-text-stroke:1px var(--red-dk)}
@keyframes tick{to{transform:translateX(-100%)}}

/* ---- meny ---- */
.nav{display:flex;flex-wrap:wrap;gap:10px 8px;margin:0 0 26px;padding:0;list-style:none}
.nav li{flex:1 1 28%}
.nav a{display:block;text-align:center;text-decoration:none;color:var(--ink);padding:11px 8px;min-height:46px;font:400 20px/1.15 var(--display)}
.nav a::before{background:var(--paper)}
.nav a:active{transform:translateY(2px)}
.nav a[aria-current="page"]::before{background:var(--pink)}
.nav a[aria-current="page"]{font-weight:700}

/* ---- rubriker och paneler ---- */
.sec{margin:38px 0 0}
.sec > h2{display:inline-block;margin:0 0 12px 4px;font:400 clamp(30px,9vw,40px)/1 var(--display);color:var(--cream);text-shadow:2px 3px 0 var(--red-dk);
  padding-bottom:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='8'%3E%3Cpath d='M2 5 Q9 1 16 5 T30 5 T44 5 T58 5' fill='none' stroke='%23F38A99' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom}
.panel{padding:20px 16px 16px;box-shadow:none}
.panel::before{box-shadow:4px 5px 0 rgba(46,26,31,.35)}
.note{background:var(--tint);color:var(--ink);border:2px dashed var(--ink);border-radius:14px;padding:10px 14px;font-size:14px;font-weight:700;margin:0 0 20px}
.prose p{margin:0 0 12px;max-width:62ch}
.prose p:last-child{margin-bottom:0}
.prose a,.fine a{color:var(--red-dk);font-weight:800}
.fine{font-size:13px;color:var(--ink-soft);margin:12px 4px 0}

/* ---- nästa match ---- */
.card{padding:20px 16px 18px;transform:rotate(-.6deg)}
.card::before{box-shadow:5px 6px 0 rgba(46,26,31,.4)}
.nameplate{margin:-34px 0 0 -4px;display:inline-block;font:400 26px/1 var(--display);color:var(--ink);background:var(--pink);
  border:2.5px solid var(--ink);border-radius:14px 18px 12px 16px;padding:8px 16px;transform:rotate(-2.5deg);box-shadow:3px 3px 0 var(--ink)}
.nameplate .yr{font-size:15px;margin-right:8px;opacity:.85}
.scene{position:relative;margin-top:18px;min-height:230px;display:grid;place-items:center;border-radius:22px 28px 20px 26px;background:var(--tint);
  border:2.5px dashed var(--red)}
.versus{text-align:center;padding:34px 10px 24px;font-family:var(--display)}
.versus .us{display:block;font-size:clamp(40px,13vw,58px);line-height:1;color:var(--red-dk)}
.versus .vs{display:inline-grid;place-items:center;margin:8px 0;font-size:19px;background:var(--pink);color:var(--ink);border:2.5px solid var(--ink);border-radius:50%;width:50px;height:50px}
.versus .them{display:block;font-size:clamp(30px,10vw,44px);line-height:1.05;color:var(--ink);overflow-wrap:anywhere}
.sticker{position:absolute;right:8px;top:-16px;z-index:3;background:var(--green);color:#fff;font:400 22px/1 var(--display);
  padding:13px 14px;border:2.5px solid var(--ink);border-radius:50%;transform:rotate(9deg);box-shadow:2px 3px 0 var(--ink);text-align:center;min-width:84px}
.flame{margin-top:16px;padding:6px 6px 0}
.stats{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0;font:400 22px/1.15 var(--display)}
.stats dt{color:var(--ink-soft)}
.stats dd{margin:0;text-align:right;overflow-wrap:anywhere;color:var(--ink)}
.stats dt:last-of-type,.stats dd:last-of-type{color:var(--red-dk)}
.empty{font:400 26px/1.2 var(--display);text-align:center;padding:40px 16px;color:var(--ink);margin:0}

/* ---- matcher ---- */
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 12px;padding:12px 4px;border-bottom:2.5px dotted var(--pink)}
.rows li:last-child{border-bottom:0}
.rows .when{grid-column:1/-1;font-size:13px;font-weight:700;color:var(--ink-soft)}
.rows .opp{font-weight:800;overflow-wrap:anywhere;min-width:0}
.rows .score{font:400 30px/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.res{width:36px;height:36px;display:grid;place-items:center;font:400 21px/1 var(--display);color:var(--ink);border:2.5px solid var(--ink);border-radius:50% 46% 52% 48%}
.res.W{background:var(--green);color:#fff}.res.D{background:#D9CFCB}.res.L{background:var(--pink)}
.res.up{background:var(--tint);color:var(--red-dk);font-size:20px}
.form{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 6px;padding:0 4px 12px;border-bottom:3px dashed var(--pink);font-size:14px;font-weight:700;color:var(--ink-soft)}
.form .res{width:28px;height:28px;font-size:16px}

.scroll{overflow-x:auto}
table.lg{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;font-variant-numeric:tabular-nums;border:2.5px solid var(--ink);border-radius:14px;overflow:hidden}
.lg th,.lg td{padding:9px 4px;text-align:center;border-bottom:1.5px solid var(--tint)}
.lg th{background:var(--red-dk);color:#fff;font:400 18px/1 var(--display)}
.lg .t{text-align:left;font-weight:800;min-width:92px;padding-left:8px}
.lg tbody tr:nth-child(even) td{background:var(--paper-2)}
.lg tbody tr.us td{background:var(--pink);color:#2E1A1F;font-weight:800}
.lg td.pts{font:400 21px/1 var(--display)}
.lg tr.us .t::after{content:" \2665";color:var(--red-dk)}

/* ---- utforska ---- */
.tiles{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.tiles a{display:flex;justify-content:space-between;align-items:center;gap:10px;text-decoration:none;color:var(--ink);padding:16px 16px;min-height:62px}
.tiles a::before{box-shadow:3px 4px 0 rgba(46,26,31,.3)}
.tiles a:active{transform:translate(2px,2px)}
.tiles b,.tiles span{display:block}
.tiles b{font:400 25px/1.05 var(--display);margin-bottom:2px}
.tiles span{font-size:14px;color:var(--ink-soft)}
.tiles i{font-style:normal;font:400 30px/1 var(--display);color:var(--red-dk)}
/* ---- spelarrutnät ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:22px 14px;margin:0;padding:6px 2px 4px;list-style:none}
.tile{width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:center;color:var(--ink)}
.tile img{width:100%;height:auto;aspect-ratio:250/390;object-fit:contain;border-radius:6px;box-shadow:4px 5px 0 rgba(46,26,31,.35);background:var(--tint);transition:transform .15s}
.grid li:nth-child(odd) .tile img{transform:rotate(-1.5deg)}.grid li:nth-child(even) .tile img{transform:rotate(1.2deg)}
.tile:hover img,.tile:focus-visible img{transform:translateY(-5px) rotate(0)}
.tile b{display:block;margin-top:10px;font:400 23px/1.05 var(--display)}
.tile small{display:block;font-size:13px;color:var(--ink-soft)}
.tile .pt{display:inline-block;margin-top:3px;font-size:14px;font-weight:800;color:var(--red-dk)}

dialog.spelare{width:min(460px,94vw);max-height:92vh;padding:0;border:3px solid var(--ink);border-radius:22px 26px 20px 24px;background:var(--paper);color:var(--ink);
  box-shadow:6px 8px 0 rgba(46,26,31,.5);overflow:auto}
dialog.spelare::backdrop{background:rgba(46,26,31,.7)}
.ph{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--red-dk);color:#fff;padding:10px 12px}
.ph h3{margin:0;font:400 30px/1.05 var(--display)}
.ph small{display:block;font:700 13px/1.3 var(--body);color:#FFE3E7}
.ph .btn{color:var(--ink)}
.pb{padding:14px}
.pimg{display:grid;place-items:center;height:min(50vh,400px);padding:12px;background:var(--tint);border:2.5px dashed var(--red);border-radius:18px}
.pimg img{max-height:calc(min(50vh,400px) - 24px);max-width:100%;width:auto;height:auto;border-radius:6px;box-shadow:4px 5px 0 rgba(46,26,31,.4)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.chip{cursor:pointer;color:var(--ink);padding:9px 16px;min-height:44px;border:0;background:none;font:400 20px/1 var(--display)}
.chip::before{background:var(--paper)}
.chip[aria-pressed="true"]::before{background:var(--pink)}
.pb h4{margin:20px 0 8px;font:400 26px/1 var(--display);color:var(--red-dk)}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bars li{display:grid;grid-template-columns:132px 1fr 32px;align-items:center;gap:8px;font-size:14px;font-weight:700}
.bars .bar{height:16px;background:var(--tint);border:2px solid var(--ink);border-radius:10px;overflow:hidden}
.bars .bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--red),var(--pink));transition:width .7s cubic-bezier(.2,.8,.2,1)}
.bars em{font:800 13px/1 var(--body);font-style:normal;color:var(--green);margin-left:6px}
.bars b{font:400 21px/1 var(--display);text-align:right;font-variant-numeric:tabular-nums}
.kraft{background:var(--tint);color:#2E1A1F;border:2.5px solid var(--ink);border-radius:16px 20px 14px 18px;padding:12px 14px;box-shadow:3px 4px 0 rgba(46,26,31,.4)}
.kraft b{display:block;font:400 26px/1.1 var(--display)}
.awards{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.awards li{background:var(--paper-2);border:2.5px dashed var(--pink);border-radius:14px;padding:9px 12px;font-size:14px;font-weight:700}
.awards li::before{content:"\2665  ";color:var(--red-dk)}
.lovemeter{margin-top:20px;text-align:center;font:400 24px/1.1 var(--display);color:var(--red-dk)}
.lovemeter .bar{height:20px;margin-top:8px;border:2.5px solid var(--ink);border-radius:12px;
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16'%3E%3Cpath d='M11 13C5 9 3 6.500 3 4.500 3 3 4 2 5.500 2 8 2 9.500 3.500 11 5 12.500 3.500 14 2 16.500 2 18 2 19 3 19 4.500 19 6.500 17 9 11 13z' fill='%23F38A99'/%3E%3C/svg%3E") repeat-x center}

/* ---- fot + knappar ---- */
.foot{margin-top:46px;text-align:center}
.foot img{width:120px;margin:0 auto 6px;filter:drop-shadow(0 3px 0 rgba(46,26,31,.25))}
.foot .love{font:400 38px/1.05 var(--display);color:var(--cream);text-shadow:3px 3px 0 var(--red-dk);margin:0 0 14px}
.foot small{display:inline-block;background:var(--cream);color:#2E1A1F;padding:6px 14px;border:2px solid var(--ink);border-radius:14px 18px 12px 16px;font-size:13px;font-weight:700}
.btn{cursor:pointer;color:var(--ink);padding:10px 18px;min-height:44px;border:0;background:none;font:400 20px/1 var(--display)}
.btn::before{background:var(--paper)}
.btn:active{transform:translateY(2px)}
.btn.sm{padding:8px 14px;min-height:40px}

@media (prefers-reduced-motion:reduce){
  .ticker span{animation:none;padding-left:14px}
  .bars .bar i,.tile img{transition:none}
}