/* Ludo. Fargane er dei Roger valde 30.09: rutene eggeskalkvite, resten som før. TO SETT MED TOKEN, og skiljet har ein grunn: --brett-* BRETTET. Rutene, husa, strekane. Desse er Rogers val, og dei staar fast same kva drakt sida rundt har. Eit ludobrett ligg paa eit bord og skifter ikkje farge naar lyset blir skrudd av. --papir/--kort/--strek/--tekst/... RAMMA. Sida, korta, knappane, reglaskjermen. Desse er det eit tema kan byte. Fyrst var det eitt sett, og da ville lys/moerk-knappen paa sporlaus.no ha drege brettet med seg. */ :root{ --brett-papir:#EFE7D6; --brett-kort:#FBF5E6; --brett-strek:#C6BBA6; /* Omrisset rundt brikkene (Roger 1a, 09.10). Ein FAST moerk farge, ikkje brikka sin eigen moerke tone: brikka si side og startruta hennar er same hex, og ein tone av same kuloer ville vere svakast akkurat der. Ligg hjaa brett-fargane fordi brettet ikkje foelgjer lys/moerk. */ --brikke-omriss:#231C14; /* Fokusringen paa terningen. Han laante `--cyan-djup` fraa SIDA sin palett, og i moerk modus er den #1C5B66 - 1,75:1 mot den moerke ringen utanfor, so dei to delane av merket smelta saman. Terningen staar paa BRETTET, og brettet foelgjer ikkje lys/moerk. */ --brett-fokus:#80DEEA; --papir:#EFE7D6; --kort:#FBF5E6; --strek:#C6BBA6; --tekst:#000000; --daempa:#4A4640; --kant:#CBD5E1; --cyan:#B2EBF2; --cyan-djup:#80DEEA; /* Desse stod skrivne rett inn i reglane. Dei kunne difor ikkje skifte med eit tema, og dei er dei mest synlege av alle. Verdiane er dei same. */ --sidebakgrunn:#E3DAC5; /* bakgrunnen bak heile sida */ --felt:#FFFFFF; /* namnefeltet */ --felttekst:#000000; --felt-av:#8C867A; /* namnefeltet paa eit tomt sete */ --knapptekst:#000000; /* tekst oppaa ein cyan knapp */ --raud:#D64545; --raud-lys:#E98B86; --raud-moerk:#9E2B2B; --groen:#3F9E5A; --groen-lys:#7FCA95; --groen-moerk:#26663A; --gul:#E0A21A; --gul-lys:#F3CC6A; --gul-moerk:#9A6A05; --blaa:#3B74C4; --blaa-lys:#83ADE6; --blaa-moerk:#23508F; /* Turlinja og aatvaringane staar paa RAMMA, ikkje paa brettet, so dei maa skifte med drakta. Dei moerke variantane er valde for lyst papir og gav 2,39:1 paa svart (runde 11, krav 3:1 for 24 px tekst). */ --tur-raud:var(--raud-moerk); --tur-groen:var(--groen-moerk); --tur-gul:var(--gul-moerk); --tur-blaa:var(--blaa-moerk); /* Avkryssingsboksen for «Yngst». Flata og ramma stod skrivne rett inn i reglane som #FFFFFF og --strek, og gav 1,54:1 i moerk drakt. */ --boks-flate:#FFFFFF; --boks-kant:var(--strek); } /* MOERK DRAKT - BERRE RAMMA (Roger 16a, 01.10). Brettet held fargane sine: `--brett-*` staar ikkje her, og det er heile poenget. Eit ludobrett ligg paa eit bord og skifter ikkje farge naar lyset blir skrudd av. `data-theme` blir sett av appen sjoelv fraa `skald-hub-theme` bak muren, og av `demo.js` fraa `sporlaus-tema` paa sporlaus.no. Same attributtet og same verdiane som baade huben og sporlaus.no brukar - berre noekkelen skil. */ :root[data-theme="dark"]{ --papir:#26231E; --kort:#312D27; --strek:#4F4940; --tekst:#F4EFE4; --daempa:#BCB4A4; --kant:#3E4752; --cyan:#2B7E8C; --cyan-djup:#1C5B66; --sidebakgrunn:#1A1815; --felt:#3A352D; --felttekst:#F4EFE4; --felt-av:#8E8676; --knapptekst:#FFFFFF; /* Maalt mot --sidebakgrunn #1A1815: 7,18 · 7,9 · 9,6 · 7,66:1. */ --tur-raud:var(--raud-lys); --tur-groen:var(--groen-lys); --tur-gul:var(--gul-lys); --tur-blaa:var(--blaa-lys); --boks-flate:var(--felt); --boks-kant:var(--daempa); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--sidebakgrunn);color:var(--tekst); font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; } .side{max-width:1100px;margin:0 auto;padding:6px 16px 60px} .knapp{ appearance:none;border:1px solid var(--kant);background:var(--cyan);color:var(--knapptekst); font-family:inherit;font-weight:600;font-size:16px;line-height:1.1; border-radius:12px;padding:14px 20px;min-height:48px; box-shadow:0 4px 0 var(--cyan-djup);cursor:pointer; } .knapp:active{transform:translateY(2px);box-shadow:0 2px 0 var(--cyan-djup)} .knapp.stor{font-size:19px;padding:18px 34px;min-height:60px} .knapp.liten{font-size:13px;padding:10px 12px;min-height:44px;background:transparent; box-shadow:none;border-color:transparent;color:var(--daempa);font-weight:500; text-decoration:underline} /* ---------- Einigheit om reglar ---------- */ .skjerm{ background:var(--papir);border:1px solid var(--strek);border-radius:18px; padding:26px 24px 24px;box-shadow:0 6px 18px rgba(0,0,0,.12); } .skjerm h1{margin:0 0 2px;font-size:26px;letter-spacing:.2px} .skjerm .ingress{margin:0 0 22px;font-size:15px;color:var(--daempa)} .bolk{margin:0 0 22px} .bolk > h2{margin:0 0 10px;font-size:15px;text-transform:uppercase;letter-spacing:.8px;color:var(--daempa)} .setet{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} /* Fire setekort i breidda pressar «Tom»-knappen under 44 px paa ein iPad i staaande. Maalt 30.09: 40 x 44 px. To i breidda gjev 110 px per knapp. */ @media (max-width:900px){.setet{grid-template-columns:repeat(2,1fr)}} /* ÉI KOLONNE PAA TELEFON. Grensa var 380 px, og det var for lite: eit setekort har ei minstebreidd paa 169,6 px (namnefelt, Tom-knapp, trio), so TO kort treng 351 px medan rutenettet er 311 px paa ein 393 px telefon. Korta stakk 40,2 px utanfor rutenettet sitt, og Tom-knappen var 36,1 px brei mot fingerkravet paa 44 (design-0925, runde 1, maalt paa 390-428 px). 480 px er maalt: over henne held to kolonnar, under treng dei éi. */ @media (max-width:480px){.setet{grid-template-columns:1fr}} .sete{background:var(--kort);border:1px solid var(--strek);border-radius:14px;padding:12px;text-align:center} .setenamn{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;margin-bottom:8px} .flekk{width:22px;height:22px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22)} .namnefelt{ width:100%;min-height:44px;margin-bottom:8px;padding:10px; border:1px solid var(--strek);border-radius:11px;background:var(--felt); font-family:inherit;font-size:16px;font-weight:600;text-align:center;color:var(--felttekst); } .namnefelt:disabled{background:var(--papir);color:var(--felt-av)} .yngst{ display:flex;align-items:center;justify-content:center;gap:9px; min-height:44px;margin-bottom:8px;cursor:pointer; font-weight:600;font-size:15px;color:var(--tekst);user-select:none; } .yngst input{position:absolute;opacity:0;width:0;height:0} .yngst .boks{ width:26px;height:26px;flex:0 0 auto;border:2px solid var(--boks-kant); border-radius:7px;background:var(--boks-flate);display:grid;place-items:center; } .yngst .boks svg{width:18px;height:18px;opacity:0} .yngst input:checked + .boks{background:var(--cyan);border-color:var(--cyan-djup)} .yngst input:checked + .boks svg{opacity:1} .yngst input:focus-visible + .boks{outline:3px solid var(--cyan-djup);outline-offset:2px} .yngst.sperra{opacity:.42;cursor:default} .trio{display:flex;border:1px solid var(--strek);border-radius:11px;overflow:hidden} .trio button{ flex:1;appearance:none;border:0;background:var(--kort);color:var(--daempa); font-family:inherit;font-weight:600;font-size:14px;line-height:1.2; padding:12px 4px;min-height:44px;cursor:pointer; } .trio button + button{border-left:1px solid var(--strek)} .trio button[aria-pressed="true"]{background:var(--cyan);color:var(--knapptekst)} .regel{ display:flex;gap:16px;align-items:center;justify-content:space-between; background:var(--kort);border:1px solid var(--strek);border-radius:14px; padding:12px 14px;margin-bottom:10px; } .regel .ord{flex:1 1 auto;min-width:0} .regel .ord b{display:block;font-size:16px} .regel .ord > span{display:block;font-size:13.5px;color:var(--daempa);margin-top:2px} .regel .trio{flex:0 0 auto;width:280px} @media (max-width:640px){ .regel{flex-direction:column;align-items:stretch} .regel .trio{width:100%} } .botn{display:flex;justify-content:flex-end;align-items:center;gap:14px;padding-top:6px;flex-wrap:wrap} .aatvaring{margin:0;color:var(--tur-raud);font-weight:600} /* ---------- spelet ---------- */ .topp{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 12px;min-height:34px} .turlinje{margin:0;font-size:24px;font-weight:700} .turlinje[data-farge="raud"]{color:var(--tur-raud)} .turlinje[data-farge="groen"]{color:var(--tur-groen)} .turlinje[data-farge="gul"]{color:var(--tur-gul)} .turlinje[data-farge="blaa"]{color:var(--tur-blaa)} .melding{margin:0;font-size:15px;color:var(--daempa)} /* Brettet held alltid 660 px i sitt eige koordinatsystem, og HEILE brettet - rutene, brikkene og terningen - blir skalert i lag. Foer dette skalerte berre SVG-en, medan brikkene og terningen stod i raa 660-piksler: paa ei telefonflate hamna dei utanfor brettet. Maalt 30.09 paa iPhone 15-profilen. */ .brettramme{position:relative;width:100%;max-width:100%;margin-inline:auto} .brettvert{position:relative;width:660px;height:660px;transform-origin:top left} .brettvert > svg.brett{display:block;width:660px;height:660px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.14)} .brikkelag{position:absolute;inset:0;pointer-events:none} .brikkelag svg{position:absolute;overflow:visible;pointer-events:auto;cursor:pointer} /* Brikkene i maal staar mindre: fire i full storleik kan ikkje staa inne i ein trekant som er 66 px djup (rekninga staar i teikning.js). Origo er ankeret i SVG-en, so dei blir staaande same staden. */ .brikkelag svg.brikke.imaal{transform:scale(.62);transform-origin:24px 23px} .terningplass{position:absolute;display:grid;place-items:center} .terning{display:block;cursor:pointer;background:none;border:0;padding:0; transition:transform .5s cubic-bezier(.3,.7,.4,1),opacity .3s ease} /* Terningen dempar seg naar det ikkje er hans tur, so han ikkje ber om eit trykk han ikkje tek imot (dommaren, runde 1). */ /* Terningen skal vere HEILT ugjennomsiktig. Fyrste freistnaden la paa fargedemping men lét `opacity:.82` staa, og eg melde likevel at maaltrekantane ikkje synte gjennom lenger. Det var FEIL: testaren i runde 5 maalte at 91,4 % av terningflata skifta farge naar trekantane under vart gøymde, verst 34 av 255, og saag baade grønt, blaatt, raudt og gult gjennom han. Terningen er det fyrste familien ser. No er dempinga berre i FARGEN. */ .terning.ventar{opacity:1;filter:saturate(.25) brightness(1.08) contrast(.94); cursor:default;pointer-events:none} /* FOKUSRINGEN PAA TERNINGEN. Den cyane ringen aaleine var 1,45:1 mot gult i lys modus og 1,64 mot blaatt i moerk - terningen staar midt i ein kross med fire sterke fargar, og ein ring med éin farge kan ikkje halde 3:1 mot alle fire. Same grepet som brikkene fekk: ein moerk ring utanfor. `box-shadow` blir klipt bort inne i elementet, so han fyller glipa OG legg ein kant utanfor cyan. Ringen sluttar paa 7 px (4 offset + 3 brei); spreiinga er 9. */ .terning:focus-visible{ outline:3px solid var(--brett-fokus);outline-offset:4px;border-radius:12px; box-shadow:0 0 0 9px var(--brikke-omriss); } /* Brikkene i huset er ivrige etter aa kome i gang (Roger 30.09). Hoppet ligg paa TEIKNINGA; trykkflata staar i ro. */ .brikkelag svg.ivrig > g.kropp{ animation:ivrig 760ms ease-in-out infinite; transform-box:fill-box;transform-origin:50% 100%; } @keyframes ivrig{ 0%{transform:translateY(0) scale(1,1)} 12%{transform:translateY(0) scale(1.07,0.86)} 34%{transform:translateY(-17px) scale(0.97,1.06)} 56%{transform:translateY(-19px) scale(1,1)} 78%{transform:translateY(0) scale(1.06,0.9)} 100%{transform:translateY(0) scale(1,1)} } .lysrute{animation:pust 1.4s ease-in-out infinite} @keyframes pust{0%,100%{opacity:.45}50%{opacity:.95}} /* «Start spelet» ligg fast nede paa skjermen (koordinatoren 2a, 01.10). Regelskjermen er 1716 px hoeg og maatte rullast 600 px i portrett foer knappen var synleg. Ein familie som ikkje finn startknappen, startar ikkje. */ .startrad{ position:sticky;bottom:0;z-index:5; margin:18px -16px -16px;padding:14px 16px calc(14px + env(safe-area-inset-bottom)); background:var(--papir); border-top:1px solid var(--strek); display:flex;justify-content:center; } .startrad{flex-direction:column;gap:10px} .startrad .knapp{width:min(420px,100%)} /* Naar eit spel er i gang, staar «Attende til spelet» OEVERST og er den store. Den farlege knappen var stor og cyan medan den trygge var liten graa tekst, rett over han (testaren, runde 9). */ .startrad:has(#attendetilspel:not([hidden])){flex-direction:column-reverse} @media (prefers-reduced-motion:reduce){ /* Hoppet ER signalet «trykk meg». Staar beina i ro, er signalet borte for dei som har slaatt av roersle (testaren, runde 7). Difor ein stille ring i staden - ingen roersle, same beskjed. */ .brikkelag svg.ivrig > g.kropp{animation:none} .brikkelag svg.ivrig{ outline:3px solid var(--cyan-djup); outline-offset:-2px; /* INGEN `border-radius`. Han laag her fraa foer, og han har same risikoen som den eg tok vekk av fokusringen 09.10: ein radius klipper brikka. Her hoppar ho rett nok ikkje - rada gjeld dei som har slaatt av roersle - men ein radius som ikkje gjev noko, og som KAN klippe, skal ikkje staa. */ } .lysrute{animation:none;opacity:.9} .terning{transition-duration:.2s} } .botnrad{margin-top:10px;display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap; justify-content:flex-end;opacity:.55} /* `display:flex` slaar [hidden], akkurat som for `.slutt` lenger nede: rada stod synleg i hub-bygget sjoelv om HTML-en sa `hidden`, og porten maalte 112x44 px. Attributtet aaleine held ikkje mot ein display-regel. */ .botnrad[hidden]{display:none} /* FOKUSRINGEN PAA BRIKKENE. Ein brikke som kan veljast er ein knapp (Roger 3a, 08.10), og da maa ein sjaa kvar ein er. `outline` ligg UTANFOR forma, so han dekkjer ikkje brikka og endrar ikkje trefflata. */ /* VELJARANE TEK KVAR BRIKKE SOM HAR FOKUS, ikkje berre dei som er knappar. Under vandringa har brikka `tabindex="-1"` (ho held fokus, men er ikkje eit tabstopp), og da fall ho utanfor regelen: ringen vart nettlesaren sin eigen - 5px auto i Chromium, 3px auto i WebKit. Ringen skifta altsaa utsjaanad midt i trekket. Dommaren over runde 2 maalte det. */ /* TO RINGAR, EIN LYS OG EIN MOERK. Testaren i runde 3 maalte kontrasten til den svarte ringen mot alt han kan liggje paa: 19,3:1 mot den lyse ruta, men 2,83:1 mot den moerkraude - under kravet paa 3:1 for eit fokusmerke. Ein ring i ÉIN farge kan ikkje vere trygg paa eit brett med fire sterke fargar. No ligg ein kvit ring inn mot brikka og ein svart utanfor han: er underlaget moerkt, ser du den kvite; er det lyst, ser du den svarte. */ /* INGEN `border-radius`. Han gjorde ringen rund - og KLIPTE brikka: kroppen loeftar seg ut av sirkelen naar ho hoppar, og 14 px av toppen vart borte. Berre ei VALD brikke i roersle vart klipt, so det synte seg ikkje foer nokon saag paa eit bilete midt i hoppet (dommaren i slepp W, 09.10). `overflow:visible` paa `.brikkelag svg` heldt ikkje mot radiusen. Ein firkanta ring rundt ei rund brikke er mindre pen enn ein rund. Ei brikke med toppen kutta av er verre. */ svg.brikke:focus-visible{ outline:3px solid #FFFFFF;outline-offset:2px; box-shadow:0 0 0 6px #000000; } svg.brikke:focus{ outline:3px solid #FFFFFF;outline-offset:2px; box-shadow:0 0 0 6px #000000; } /* BRETTET SKAL ALDRI SYNE EIN RING. `fokusTilbake` brukar `#brett` som mellomstasjon mellom to trekk, og da teikna WebKit sin eigen fokusring ein svart firkant rundt HEILE brettet i 0,5-2,7 sekund per trekk. Brettet er ikkje eit tabstopp og ingen vel det - ringen fortel ingen noko, han berre blinkar. */ #brett:focus,#brett:focus-visible{outline:none} .botnrad:hover,.botnrad:focus-within{opacity:1} .tilstandtekst{ flex:1 1 300px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px; border:1px solid var(--strek);border-radius:10px;padding:8px;background:var(--kort); } /* ---------- slutt ---------- */ /* Sluttskjermen laag UNDER skjermkanten: av knappen paa 60 px saag ein 14 px (testaren, runde 3). No ligg han som eit lag midt paa skjermen. */ .slutt{ position:fixed;inset:0;z-index:10; display:grid;place-content:center;justify-items:stretch; background:rgba(227,218,197,.92); padding:24px; } /* display:grid slaar [hidden], so laget laag over heile skjermen og aat kvart trykk - ogsaa naar spelet gjekk. Funne av roeykproeva med ein gong. */ .slutt[hidden]{display:none} .slutt > *{max-width:420px;width:100%;margin-inline:auto} .sluttkort{ background:var(--papir);border:1px solid var(--strek);border-radius:18px; padding:22px 24px;box-shadow:0 10px 30px rgba(0,0,0,.22); } .slutt h2{margin:0 0 12px;font-size:22px} .plassar{margin:0 0 18px;padding-left:0;list-style:none} .plassar li{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;padding:6px 0} .plassar li .merknad{font-weight:500;font-size:14px;color:var(--daempa)} .plassar li[data-ekte="nei"]{opacity:.75} /* ---------- oppsummering av reglane (Roger 01.10) ---------- */ .bolk.tidlegare{background:var(--kort);border:1px solid var(--strek);border-radius:14px;padding:14px 16px} .bolk.tidlegare > h2{margin-top:0} .hjelp{margin:0 0 12px;font-size:13.5px;color:var(--daempa)} .hjelp.sperra{background:#FFF8E6;border:1px solid #E2CE93;border-radius:10px;padding:10px 12px} .oppsummering{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px} .regelkort{display:flex;align-items:center;gap:12px;background:var(--papir); border:1px solid var(--strek);border-radius:12px;padding:8px 10px} .regelkort .ikon{flex:0 0 auto} .regelkort .ord{min-width:0} .regelkort .ord b{display:block;font-size:14px;line-height:1.25} .regelkort .ord span{display:block;font-size:13px;color:var(--daempa);margin-top:1px} #innstillingar{margin-left:auto} .topp{align-items:center} /* VEGEN HEIM. Ho staar sist i `main.side`, i flyten, utan `position` og utan `z-index` - da KAN ho ikkje leggje seg oppaa noko. Eit fast overlegg dekte `#turlinje` heilt paa telefon og 88,9 % paa iPad staaande (design-0925, 02.10). Lenkja er stor nok for ein finger: 44 px hoegd er kravet. */ /* VEGEN HEIM. Eiga rad oeverst, `sticky` so ho er synleg utan rulling paa kvar skjerm, og i flyten so ho ligg oppaa ingenting. 48 px hoeg, lenkja minst 44x44 - fingerkravet. Moenster: dei ti spraakappane, KOMPONENT.md 02.10. FARGE: `--tekst`, ikkje ein aksentfarge. KOMPONENT.md ber om appen sin eigen aksent-TEKSTfarge, men Ludo har ingen som gjeld baae draktene - `--tur-blaa` byter verdi mellom lys og moerk nett fordi han laag feil. Ein aksent som ikkje held kontrastkravet er verre enn ingen aksent, og `prove-kontrast` maaler denne rada i baae draktene. */ .hub-heim{ /* 60, ikkje 40: demoen sitt overlegg ligg paa 50, og med 40 vart rada teikna UNDER muren. Ho saag dimma ut, og eit ekte musetrykk landa paa overlegget - lenkja var daud for alle som ikkje brukar tastatur (testaren, runde 2, 08.10). Muren skal stengje spelet, ikkje doera. */ position:sticky;top:0;z-index:60; display:flex;align-items:center;min-height:48px; margin:0;padding:0 16px;background:var(--sidebakgrunn); } .hub-heim-lenkje{ display:inline-flex;align-items:center;gap:.3em; min-height:44px;min-width:44px;padding:4px 8px;margin-left:-8px; font-size:.9375rem;font-weight:600;color:var(--tekst); text-decoration:none;border-radius:10px; } .hub-heim-lenkje:hover{text-decoration:underline} .hub-heim-lenkje:focus-visible{outline:3px solid var(--tekst);outline-offset:2px} /* BRETTET SKAL STAA STILLE. Paa smale skjermar bryt `.topp` over fleire liner, og da flyttar brettet seg kvar gong meldinga skiftar lengd: maalt 183 -> 160 -> 110 px paa 390x844 (testaren, runde 3). Ein familie trykkjer paa brikkene medan det skjer. Difor blir plassen RESERVERT i staden for at teksten blir korta ned - orda er Rogers, og eit layout-hopp er ingen grunn til aa endre dei. Turlina er tom foer fyrste trykket, og den lengste meldinga tek to liner paa 390 px. */ @media (max-width:640px){ /* EIT FAST RUTENETT, ikkje flyt. Fyrste forsoeket reserverte hoegd paa dei to tekstane og hjelpte ikkje: det er LINJEBRYTINGA som skiftar. Naar turlina er tom bryt meldinga ned paa eiga line; naar ho faar «Kari» faar meldinga plass ved sida. Difor eit rutenett med faste plassar: rad 1: turlina | Innstillingar rad 2: meldinga, over heile breidda Da er hoegda den same uansett kva som staar der. */ .topp{ display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:14px; row-gap:4px; } .turlinje{grid-column:1;grid-row:1;min-height:36px} .topp > #innstillingar{grid-column:2;grid-row:1} /* 46 px, ikkje 40: den lengste meldinga («Trykk på ei av brikkene dine. Den som trykkjer fyrst, byrjar.») tek 45 px paa 390 px breidd. Med 40 flytta brettet seg framleis 5 px ved fyrste skiftet. */ .melding{grid-column:1 / -1;grid-row:2;min-height:46px} } /* Stilen som berre demoen på sporlaus.no treng. Han blir lagd TIL app-stilen når demoen blir bygd, og står ikkje i den eine fila til nettbrettet. Grunnen er den same som for `demo.js`: kvar gong demoen endrar seg, ville appfila òg bli ei anna fil, og da måtte to heile spel på tjue minutt kvar køyrast om att for at målingane skulle gjelde ho. `demo.js` set berre klassenamn - CSP-en på sporlaus.no tek ikkje innlagd stil, so alt må stå i ei fil. */ /* Veggen dekkjer ALT. Fyrste utgåva bytte berre knappane på appen sin eigen sluttskjerm, og testaren i runde 6 fann to vegar rundt: ein reload, og Tab til «Innstillingar» bak overlegget. No er resten av sida `inert`, og dette ligg over. */ .demovegg{ position:fixed;inset:0;z-index:50; display:grid;place-items:center;padding:24px; background:rgba(36,32,26,.55); } .demokort{ width:min(440px,100%);max-height:100%;overflow:auto; background:var(--kort);border:1px solid var(--strek);border-radius:20px; padding:26px 24px;box-shadow:0 18px 44px rgba(0,0,0,.26); } .demokort h2{margin:0 0 14px;font-size:22px;color:var(--tekst)} .demokort .plassar{margin:0 0 18px;padding-left:0;list-style:none; display:flex;flex-direction:column;gap:10px} .demokort .plassar li{display:flex;align-items:center;gap:10px;font-size:16px} .demotekst{margin:0 0 18px;font-size:15px;line-height:1.45;color:var(--daempa)} .demovegg .knapp{display:block;width:100%;text-align:center;text-decoration:none} /* Står berre når nettlesaren ikkje lagrar: då held veggen berre denne økta, og det skal stå på skjermen i staden for å late som ingenting. */ .demoaatvaring{margin:14px 0 0;font-size:13px;line-height:1.4;color:var(--daempa)} /* «Kopier tilstand» er eit utviklarverktoey og hoeyrer ikkje heime paa ei offentleg side. Han blir SKJULT, ikkje fjerna - appen knyter lyttaren sin til han etter at demo.js har koeyrt. */ .demoskjul{display:none !important} /* FAIL CLOSED. `#demostart` staar i HTML-en og er synleg so lenge staar. `demo.js` tek klassa bort naar eit spel er lov. Blir demo.js blokkert, staar veggen og brettet er gøymt - i staden for at veggen manglar og spelet er gratis (testaren, runde 7). */ #demostart{display:none} .demolaas #demostart{display:grid} .demolaas main.side{display:none} /* Fokusringen. «Sjaa abonnement» HADDE fokus, men viste det ikkje - app-arket tek ringen bort, og det er den einaste vegen vidare fraa veggen. Testaren fann det ved eit uhell: i koeyringa med stil.css blokkert KOM ringen fram (runde 7). */ .demovegg a:focus-visible, .demovegg a:focus{ outline:3px solid var(--cyan-djup); outline-offset:4px; } /* Lina som seier kva avtalen er, FOER ho er brukt opp. */ .demolina{ margin:0 0 14px;padding:10px 14px; background:var(--papir);border:1px solid var(--strek);border-radius:12px; font-size:14px;line-height:1.4;color:var(--daempa); }