/* Meat Empire - responsive dashboard, desktop (Steam) + touch (mobiel) * * Twee thema's. Licht is de standaard; schakelt om. * ALLE kleuren lopen via tokens - nooit een hex rechtstreeks in een regel, * anders breekt een van de twee thema's. */ /* ----------------------------------------------------------- LICHT (standaard) */ /* DE HUISKLEUREN VAN MEAT EMPIRE * * Bewust niet die van Petrol Empire. Dat spel is koel blauwgrijs met oranje - * een tankstation in de avond - en een kopie die alleen andere woorden gebruikt * voelt als hetzelfde spel met een ander etiket. * * Hier is alles warm: bot en papier als ondergrond, en oxbloed als accent. De * temperatuur is het verschil dat je meteen ziet, nog voor je een woord leest. * * Een ding om in de gaten te houden bij het bijstellen: --accent is rood-achtig * en --red betekent "fout". Die twee mogen nooit dezelfde kleur worden, anders * lijkt elke knop een waarschuwing. Daarom staat --red hier op een warm * oranjerood en niet op karmijn: ver genoeg van het oxbloed om uit elkaar te * houden. */ :root{ --bg:#f4efe8; --bg2:#e9e0d4; --panel:#fffcf8; --panel2:#f7f0e6; --hover:#efe5d8; --line:#dccdb9; --line2:#bfa891; --txt:#241a1c; --dim:#5e4a4c; --dim2:#86706f; --accent:#9b2033; --accent2:#6e1523; --teal:#2e7d55; --red:#d1492b; --blue:#2f6f9e; --yellow:#a8760a; --orange:#c76a12; --link:#9b2033; --input:#fffcf8; --owned:#f3e3e5; --glow:rgba(155,32,51,.30); --shadow:0 1px 3px rgba(36,26,28,.10), 0 6px 18px rgba(36,26,28,.06); --shadow-lg:0 18px 50px rgba(36,26,28,.22); /* De vier producten. Rund diep rood, varken roze, kalf zandkleurig, plantaardig groen - de kleuren die je in een toonbank ziet. */ --pill-rund-bg:#f6dcdc; --pill-rund-fg:#8b2b2b; --pill-varken-bg:#fbe0e7; --pill-varken-fg:#9a3358; --pill-kalf-bg:#f4e8d6; --pill-kalf-fg:#8a5a23; --pill-plantaardig-bg:#ddefdc; --pill-plantaardig-fg:#2e6b32; --pill-kip-bg:#f7eed2; --pill-kip-fg:#846314; --pill-schaap-bg:#e8e2f3; --pill-schaap-fg:#5a4487; --pill-paard-bg:#e3ded7; --pill-paard-fg:#5c5046; --pill-geit-bg:#dfeceb; --pill-geit-fg:#2d6460; --radius:12px; --tap:44px; /* De achtergrond van het spel. Licht thema: een bleke dag, want er moet donkere tekst overheen. */ --ag-lucht1:#f7f2eb; --ag-lucht2:#efe5d8; --ag-lucht3:#e5d7c6; --ag-grond:#d8c6b1; --ag-mid:#cdb9a2; --ag-donker:#b79f87; --ag-glas:#a89078; --ag-ver:#dfd0bd; --ag-lijn:#b39c85; --ag-gloed:rgba(155,32,51,.10); } /* -------------------------------------------------------------------- DONKER */ /* Donker: de koelcel bij nacht. Diep aubergine in plaats van marineblauw, en het accent wordt rozer in plaats van lichter oranje - een donkere achtergrond vraagt een lichtere tint van dezelfde kleur, niet een andere kleur. */ :root[data-theme="dark"]{ --bg:#1c1416; --bg2:#25191d; --panel:#2f2126; --panel2:#3b2a30; --hover:#4a343b; --line:#4a343b; --line2:#6b4c54; --txt:#f7f0ec; --dim:#d3bdb8; --dim2:#a8908c; --accent:#e8697e; --accent2:#ffb3bd; --teal:#4fd39a; --red:#ff8a6b; --blue:#7bb8e8; --yellow:#f2c65c; --orange:#f59e42; /* Wit en niet het lichtblauw hierboven: een link staat meestal tussen gedempte tekst, en moet daar juist uit springen. */ --link:#ffffff; /* Donker thema: de avond uit de winkelpagina. Diep genoeg om tekst erover leesbaar te houden. */ --ag-lucht1:#140e10; --ag-lucht2:#1b1216; --ag-lucht3:#22171c; --ag-grond:#1a1215; --ag-mid:#2c1f24; --ag-donker:#241920; --ag-glas:#36252c; --ag-ver:#261a1f; --ag-lijn:#46313a; --ag-gloed:rgba(232,105,126,.16); --input:#1f1518; --owned:#3a2630; --glow:rgba(255,148,64,.5); --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 24px 60px rgba(0,0,0,.6); --pill-rund-bg:#4a1e22; --pill-rund-fg:#ff9d9d; --pill-varken-bg:#4a2430; --pill-varken-fg:#ffb0c6; --pill-kalf-bg:#432f1c; --pill-kalf-fg:#f0c48a; --pill-plantaardig-bg:#1e3a24; --pill-plantaardig-fg:#8fe0a0; --pill-kip-bg:#453a1c; --pill-kip-fg:#f0d78a; --pill-schaap-bg:#342a4a; --pill-schaap-fg:#c4b0ee; --pill-paard-bg:#3a332c; --pill-paard-fg:#d9c9b8; --pill-geit-bg:#1f3a38; --pill-geit-fg:#8fd8d2; } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent} /* overflow-x ook op html, en niet alleen op body. body stond al op overflow:hidden, maar bij de meting schoof de HTML-laag: scrollWidth 1084 tegen clientWidth 768. Een van de twee dichtzetten is niet genoeg. */ html,body{margin:0;height:100%;overflow-x:hidden} body{ background:var(--bg); color:var(--txt); font:15px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif; display:flex; flex-direction:column; overflow:hidden; } button{font:inherit;color:inherit;cursor:pointer;border:0;background:none} h2,h3,h4{margin:0 0 .5rem} h2{font-size:1.15rem;letter-spacing:.2px} h3{font-size:.9rem;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;font-weight:700} small{color:var(--dim)} /* Er stond hier niets, dus nam de browser zijn eigen donkerblauw - op het donkere thema vrijwel onleesbaar. Onderstreept blijft hij: kleur alleen is geen aanwijzing voor wie kleuren niet goed onderscheidt. */ a{color:var(--link);text-decoration:underline;text-underline-offset:2px} a:hover{opacity:.8} /* ---------- topbar ---------- */ /* Achter het aanmeldscherm draait een demozaak. Zijn kas, vermogen en diamanten zijn van niemand, dus die balk hoort er dan niet te staan: je kijkt naar een station, niet naar andermans cijfers. */ /* ------------------------------------------------- het aanmeldscherm (poort) * * Grijs met wat er in het spel te koop is. De kopbalk gaat weg - er is nog * niets van jou om te tonen - en het doek dekt het spel erachter volledig af. * * Dat afdekken is geen opsmuk. Er draait een demozaak achter de poort om de * klok te laten lopen, en die hoort onzichtbaar te zijn: hij is van niemand, * wordt nooit bewaard, en een speler die hem ziet bewegen denkt dat hij speelt. * * z-index 79: net onder #modal-root (80), dus het aanmeldvenster blijft erboven. */ /* Hetzelfde doek als achter het aanmeldscherm, ook tijdens het kiezen van je markt. Zie toonStartkeuze in ui.js: daar staat het spel stil, en dan hoort er geen station doorheen te schemeren dat je nog niet gekozen hebt. */ body.poort #topbar, body.kiezen #topbar{display:none} #poortdoek{display:none} body.kiezen #poortdoek, body.poort #poortdoek{ display:block; position:fixed; inset:0; z-index:79; background:linear-gradient(180deg,#f0e7da 0%,#ddcdb8 62%,#cdb9a2 100%); } /* Een BAND onderaan en niet het hele vlak. Met een gevuld vlak (slice) werd de tekening opgeschaald tot ze de hoogte haalde, en dan stonden de boortoren en de bovenkant van de pomp buiten beeld terwijl de tankwagen half wegviel. Zo staat de hele keten er, en het grijs erboven doet de rest. */ #poortdoek svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto; max-height:58vh} #poortdoek .pd-grond{fill:#c0ab93} #poortdoek .pd-mid{fill:#b09a80} #poortdoek .pd-donker{fill:#8a7259} #poortdoek .pd-licht{fill:#efe4d4} #poortdoek .pd-glas{fill:#7a6350} #poortdoek .pd-rood{fill:#9b2033} #poortdoek .pd-ver{stroke:#c3ae96;stroke-width:7;fill:none;stroke-linecap:round} #poortdoek .pd-ver-vul{fill:#c3ae96} #poortdoek .pd-lijn{stroke:#977f66;stroke-width:3;fill:none;opacity:.55} #poortdoek .pd-slang{stroke:#8a7259;stroke-width:11;fill:none;stroke-linecap:round} :root[data-theme="dark"] body.poort #poortdoek, [data-theme="dark"] #poortdoek{ background:linear-gradient(180deg,#2a1c20 0%,#1f1417 62%,#170f12 100%); } [data-theme="dark"] #poortdoek .pd-grond{fill:#2b1d22} [data-theme="dark"] #poortdoek .pd-mid{fill:#4a3239} [data-theme="dark"] #poortdoek .pd-donker{fill:#38252b} [data-theme="dark"] #poortdoek .pd-licht{fill:#8a6d72} [data-theme="dark"] #poortdoek .pd-glas{fill:#2e1f24} [data-theme="dark"] #poortdoek .pd-rood{fill:#a8404f} [data-theme="dark"] #poortdoek .pd-ver{stroke:#4a3239} [data-theme="dark"] #poortdoek .pd-ver-vul{fill:#4a3239} [data-theme="dark"] #poortdoek .pd-lijn{stroke:#6b4c54} [data-theme="dark"] #poortdoek .pd-slang{stroke:#38252b} #topbar{ display:flex;align-items:center;gap:1rem;padding:.55rem .9rem; background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow); flex:0 0 auto; padding-top:max(.55rem, env(safe-area-inset-top)); z-index:10; } .brand{display:flex;align-items:center;gap:.6rem;min-width:0} .logo{font-size:1.5rem;filter:drop-shadow(0 0 8px var(--glow))} .brand-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0} .brand-txt strong{font-size:.95rem;white-space:nowrap} .brand-txt small{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px} .stats{display:flex;gap:1.4rem;margin-inline-start:auto;align-items:center} .stat{display:flex;flex-direction:column;line-height:1.2;text-align:end} .stat label{font-size:.64rem;text-transform:uppercase;letter-spacing:.7px;color:var(--dim2);font-weight:600} .stat span{font-variant-numeric:tabular-nums;font-weight:700;font-size:.9rem} .stat .big{font-size:1.05rem;color:var(--accent2)} .icon-btn{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);font-size:1.05rem;background:var(--panel2)} .icon-btn:hover{background:var(--hover)} /* ---------- tabs ---------- */ /* Het hidden-attribuut wint van niets: het is maar `display:none` uit de browserstijl, en elke eigen regel met display erin verslaat het. Precies dat ging mis - `#tabs button{display:flex}` liet het moderatietabblad zichtbaar terwijl de code hem netjes op hidden zette, en `#tabs .tabbadge` deed hetzelfde met het rode cijfer. Eén regel bovenaan lost het overal op, ook voor elk element dat we later verbergen. */ [hidden]{display:none!important} /* De tabstrook SCHUIFT, op elke breedte. * * Hij kreeg overflow-x:auto alleen onder 620 pixels, met de telefoon in * gedachten. Daartussen - een tablet van 768, een smal venster op een pc - pasten * de negen tabs ook al niet, maar dan puilden ze gewoon uit de strook en werd het * hele DOCUMENT breder: 1084 tegen een scherm van 768. Gemeten op een tablet: je * kon 316 pixels naar rechts schuiven, naar een lege grijze zone, en alles wat * vastgezet is - de rondleidingsbalk, de meldingen - stond gecentreerd op dat te * brede document in plaats van op het spel. * * min-width:0 hoort erbij en is niet optioneel: een flexitem krijgt standaard * min-width:auto en weigert dan kleiner te worden dan zijn inhoud. Zonder die * regel doet overflow-x:auto niets, want er valt niets te overlopen. */ #tabs{ display:flex;gap:.25rem;padding:.45rem .7rem 0;background:var(--bg2); border-bottom:1px solid var(--line);flex:0 0 auto; flex-wrap:nowrap;min-width:0;overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-webkit-overflow-scrolling:touch; /* Uit de tekst tillen, zodat de balk boven de achtergrondtekening ligt. Deze twee moeten HIER staan en niet verderop in het bestand: onder de 621 pixels zet een media-regel de balk vast aan de onderrand, en `position` daarna nog eens opschrijven weegt even zwaar maar staat later - dus wint het. Dat is precies hoe de balk ooit van de onderrand naar vlak onder de kop verhuisde. Basisregels eerst, media-regels erna. */ position:relative;z-index:1 } #tabs::-webkit-scrollbar{display:none} #tabs button{flex:0 0 auto} #tabs button{ display:flex;align-items:center;gap:.45rem;padding:.55rem .95rem;border-radius:10px 10px 0 0; color:var(--dim);font-weight:700;font-size:.88rem;border-bottom:2px solid transparent;min-height:var(--tap) } #tabs button i{font-style:normal;font-size:1rem} #tabs button:hover{color:var(--txt);background:var(--hover)} #tabs button.active{color:var(--accent2);background:var(--panel);border-bottom-color:var(--accent)} /* ---------- layout ---------- */ /* position en z-index om dezelfde reden als bij #tabs hierboven: erboven liggen, en vóór de media-regels staan. */ #main{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:1rem;padding-bottom:2rem; -webkit-overflow-scrolling:touch;position:relative;z-index:1} .panel{max-width:1180px;margin:0 auto} .grid{display:grid;gap:.9rem} .grid.cols2{grid-template-columns:repeat(2,1fr)} .grid.cols3{grid-template-columns:repeat(3,1fr)} .grid.auto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem;box-shadow:var(--shadow)} .card-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem} .card-head h2,.card-head h3{margin:0} /* Het cijfertje bij een gesprek of op een sub-tab. Dezelfde vorm als de badge op een tabblad, maar dan meelopend in een regel tekst. */ .bel{display:inline-block;min-width:1.1rem;padding:0 .3rem;border-radius:999px; background:var(--neg,#c0392b);color:#fff;font-size:.65rem;line-height:1.1rem; text-align:center;font-weight:700} .gesprek.nieuw{background:rgba(192,57,43,.07)} /* Een lopend incident krijgt dezelfde rode streep als een gemelde chatregel: het is iets wat aandacht vraagt en niet zomaar een blokje tekst. */ .incident{border-inline-start:3px solid var(--neg,#c0392b);padding-inline-start:.6rem;margin-bottom:.8rem} .incident:last-child{margin-bottom:0} .row{display:flex;align-items:center;gap:.6rem} .row.between{justify-content:space-between} .row.wrap{flex-wrap:wrap} .spacer{flex:1} .muted{color:var(--dim)} .tiny{font-size:.76rem} .num{font-variant-numeric:tabular-nums} .pos{color:var(--teal)} .neg{color:var(--red)} .warn{color:var(--yellow)} .mt{margin-top:.9rem} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.4rem; padding:.5rem .9rem;border-radius:9px;background:var(--panel2);border:1px solid var(--line2); font-weight:700;font-size:.85rem;min-height:38px;color:var(--txt); /* Met opzet NIET 'transition:.12s' voor alles. Dekking hoort daar niet bij: een knop die onbetaalbaar wordt moet meteen lichter staan, niet pas na een tiende seconde vervagen. Je leest die kleur in een oogopslag af terwijl je kas oploopt, en een knop die nog even helder blijft leest dan als 'dit kan'. */ transition:background .12s,border-color .12s,transform .12s } .btn:hover:not(:disabled){background:var(--hover)} .btn:active:not(:disabled){transform:translateY(1px)} .btn:disabled{opacity:.42;cursor:not-allowed} .btn.primary{background:linear-gradient(180deg,#b8263c,#8c1c2c);border-color:#701524;color:#fff4f2} .btn.primary:hover:not(:disabled){background:linear-gradient(180deg,#cc2e46,#a02133)} .btn.good{background:linear-gradient(180deg,#2fd6a8,#0f9a76);border-color:#0d8a69;color:#04241b} .btn.danger{background:#fbe4e4;border-color:#e3a5a5;color:#a01f1f} :root[data-theme="dark"] .btn.danger{background:#3a1d1d;border-color:#6b3232;color:#ffb0b0} .btn.sm{padding:.3rem .6rem;min-height:32px;font-size:.78rem} .btn.block{width:100%} .btn-group{display:flex;gap:.35rem;flex-wrap:wrap} /* ---------- sub-tabs binnen een tabblad ---------- Onder de hoofdnavigatie en boven de kaart: dat is de plek waar je ze zoekt, en zo blijft duidelijk dat ze de INHOUD van dit tabblad wisselen en niet het tabblad zelf. */ .subtabs{margin-bottom:.7rem} /* De bladerknoppen onder een ranglijst. De pijlen aan de randen en het bereik ertussen: zo zie je waar je staat zonder te tellen. */ .blader{margin-top:.6rem;gap:.6rem;align-items:center} /* Een kaart die in een venster staat. Het venster heeft zijn eigen rand en schaduw; die van de kaart erbij geeft een doos in een doos. */ .card.kaal{border:0;box-shadow:none;background:transparent;padding:0;margin:0} /* Zeven tabs passen niet naast elkaar op 375 pixels. Laten schuiven in plaats van laten omvallen: een tweede rij eronder kost verticale ruimte die op een telefoon juist schaars is, en afkappen zou de laatste twee onbereikbaar maken. Dezelfde oplossing als de hoofdnavigatie onderaan. */ .subtabs.schuif{ flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; -webkit-overflow-scrolling:touch;padding-bottom:.2rem } .subtabs.schuif::-webkit-scrollbar{display:none} .subtabs.schuif .btn{flex:0 0 auto} /* Een cijfer in de kopbalk waar je op kunt drukken. Genoeg aanwijzing dat het een knop is, zonder dat het er als een knop tussen staat. */ .stat.klikbaar{cursor:pointer;border-radius:8px;padding:.1rem .35rem;margin:-.1rem -.35rem;transition:background .12s} .stat.klikbaar:hover{background:var(--hover)} /* ---------- rondleiding ---------- Een balk onderaan en geen venster in het midden. Een venster staat precies voor het ding waar het over gaat; deze balk houdt de bovenkant vrij, en daar wijst elke stap naartoe. Hij vangt geen kliks af: je mag tijdens de rondleiding gewoon rondkijken. Dat is ook de bedoeling - je leert het spel door het aan te raken, niet door een overlay weg te klikken. */ .tutbalk{ /* Boven #modal-root (80): op de instellingenstap opent de rondleiding zelf een venster, en dan moet je nog altijd bij Volgende kunnen. */ position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:90; width:min(560px,calc(100vw - 2rem)); background:var(--panel);border:1px solid var(--line2);border-radius:12px; padding:.8rem .9rem;box-shadow:var(--shadow-lg);animation:slidein .25s ease-out } .tutbalk .tutkop{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:.3rem} .tutbalk .tutkop strong{font-size:1rem} .tutbalk .tuttel{font-size:.72rem;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap} .tutbalk .tuttekst{margin:0 0 .7rem;font-size:.85rem;color:var(--txt);line-height:1.45} .tutbalk .tutknoppen{display:flex;gap:.35rem;align-items:center} .tutbalk .tutknoppen .spacer{flex:1} /* Het opgelichte stuk scherm. Een ring eromheen en geen sluier eroverheen: een sluier maakt de rest onleesbaar terwijl je juist wilt zien waar dit staat. */ .tut-doel{ position:relative;z-index:69;border-radius:10px; outline:2px solid var(--accent);outline-offset:3px; animation:tutklop 1.6s ease-in-out infinite } @keyframes tutklop{ 0%,100%{outline-color:var(--accent)} 50%{outline-color:transparent} } @media (max-width:640px){ /* Boven de tabbalk blijven: die staat op een telefoon onderaan. */ .tutbalk{bottom:calc(78px + env(safe-area-inset-bottom))} } /* ---------- het weektoernooi ---------- Twee kanten naast elkaar met de stand ertussen. Wie voor staat krijgt de kleur: een score zonder duiding laat de lezer zelf zitten rekenen. */ .duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem;margin-top:.4rem} .duelkant{border:1px solid var(--line);border-radius:10px;padding:.7rem;background:var(--bg2);text-align:center;min-width:0} .duelkant strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .duelkant.wint{border-color:var(--teal);background:var(--owned)} .duelscore{font-size:1.7rem;font-weight:800;line-height:1.1;margin:.2rem 0;font-variant-numeric:tabular-nums} .duelkant.wint .duelscore{color:var(--teal)} .duelvs{font-size:.75rem;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.04em} .uitslag{margin-top:.7rem;padding:.6rem .7rem;border-radius:9px;background:var(--bg2);border-inline-start:3px solid var(--line2)} .uitslag.gewonnen{border-inline-start-color:var(--teal)} /* ---------- fuel rows ---------- */ .fuel{border:1px solid var(--line);border-radius:10px;padding:.75rem;background:var(--bg2);margin-bottom:.65rem} .fuel-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.55rem;flex-wrap:wrap} .pill{padding:.12rem .5rem;border-radius:99px;font-size:.7rem;font-weight:800;letter-spacing:.4px} .pill.rund{background:var(--pill-rund-bg);color:var(--pill-rund-fg)} .pill.varken{background:var(--pill-varken-bg);color:var(--pill-varken-fg)} .pill.kalf{background:var(--pill-kalf-bg);color:var(--pill-kalf-fg)} .pill.kip{background:var(--pill-kip-bg);color:var(--pill-kip-fg)} .pill.schaap{background:var(--pill-schaap-bg);color:var(--pill-schaap-fg)} .pill.paard{background:var(--pill-paard-bg);color:var(--pill-paard-fg)} .pill.geit{background:var(--pill-geit-bg);color:var(--pill-geit-fg)} .pill.plantaardig{background:var(--pill-plantaardig-bg);color:var(--pill-plantaardig-fg)} .bar{display:flex;height:9px;border-radius:99px;background:var(--input);overflow:hidden;border:1px solid var(--line)} .bar > i{display:block;height:100%;flex:0 0 auto;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s} .bar.teal > i{background:linear-gradient(90deg,#12b78a,var(--teal))} .bar.red > i{background:linear-gradient(90deg,#e05a5a,var(--red))} .bar.blue > i{background:linear-gradient(90deg,#2f8fdd,var(--blue))} .price-ctl{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap} input[type=number],input[type=text],textarea{ background:var(--input);border:1px solid var(--line2);color:var(--txt);border-radius:8px; padding:.4rem .5rem;font:700 .95rem/1 "Segoe UI",sans-serif;width:96px; font-variant-numeric:tabular-nums;min-height:38px } textarea{width:100%;font:400 .72rem/1.4 monospace;min-height:130px;padding:.5rem} input[type=number]:focus,input[type=text]:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px} table{width:100%;border-collapse:collapse;font-size:.86rem} th{text-align:start;color:var(--dim2);font-size:.68rem;text-transform:uppercase;letter-spacing:.6px;padding:.35rem .4rem;border-bottom:1px solid var(--line)} td{padding:.42rem .4rem;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums} tr:last-child td{border-bottom:0} .table-wrap{overflow-x:auto} /* ---------- map ---------- */ /* De verhouding volgt de viewBox van de tekening (zie KAART in ui.js): 112 bij 74, dus de stad plus haar marge. Klopt dit niet met de viewBox, dan rekt de kaart uit - de SVG staat op preserveAspectRatio="none" en vult het vak hoe dan ook. De ondergrens in pixels is er voor het brede scherm: daar staat de kaart in de linkerkolom van een tweekolommenraster, en zonder dit werd ze daar een postzegel. */ #mapbox{position:relative;width:100%;aspect-ratio:112/74;background:var(--bg2); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} /* De ondergrens in pixels alleen op een BREED scherm. Daar staat de kaart in de linkerkolom van een tweekolommenraster en werd ze anders een postzegel. Op een telefoon hoort hij er juist niet: daar is de kaart al zo breed als het scherm, en een minimumhoogte duwt de breedte dan mee omhoog - gemeten 454 px op een scherm van 375, dus een kaart die half buiten beeld hangt. */ @media (min-width:768px){ #mapbox{min-height:420px} } #mapbox svg.roads{position:absolute;inset:0;width:100%;height:100%} .pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center; gap:2px;cursor:pointer;padding:4px} .pin .dotm{width:15px;height:15px;border-radius:50%;border:2px solid var(--panel);background:var(--red);box-shadow:0 0 0 1px var(--red)} /* De schaal van de kaart: geel is helemaal van jou, oranje is een deel, rood is van een ander. Volledig bezit stond op de accentkleur, en dat is juist de kleur die overal op het scherm al iets anders betekent. */ .pin.mine .dotm{background:var(--yellow);box-shadow:0 0 10px var(--yellow)} .pin.part .dotm{background:var(--orange);box-shadow:0 0 0 1px var(--orange)} .pin.you .dotm{width:20px;height:20px;background:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 30%,transparent)} .pin .lbl{font-size:.66rem;font-weight:600;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:1px 5px;white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:var(--shadow)} .pin.sel .lbl{border-color:var(--accent);color:var(--accent2)} .legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.75rem;color:var(--dim);margin-top:.6rem} .legend span{display:flex;align-items:center;gap:.35rem} .legend i{width:10px;height:10px;border-radius:50%;display:inline-block} /* ---------- upgrade cards ---------- */ .up{border:1px solid var(--line);border-radius:10px;padding:.75rem;background:var(--bg2);display:flex;flex-direction:column;gap:.5rem} .up.max{opacity:.7} /* Te duur om nu te kopen. Lichter dan .locked, want dit is een tijdelijke toestand - morgen heb je het geld wel - en geen slot waar je iets voor moet halen. De knop blijft wel leesbaar: het bedrag is juist wat je wil weten. */ .up.duur{opacity:.6} .up.duur .btn{opacity:.85} .up.locked{opacity:.55} .up .up-top{display:flex;gap:.6rem;align-items:flex-start} .up .ico{font-size:1.5rem;line-height:1} .up .lvl{margin-inline-start:auto;font-size:.72rem;font-weight:700;color:var(--dim);background:var(--panel);border:1px solid var(--line);padding:.1rem .45rem;border-radius:99px;white-space:nowrap} .up .eff{font-size:.78rem;color:var(--dim)} .up .eff b{color:var(--teal);font-weight:700} /* ---------- asset rows ---------- */ .asset{border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;background:var(--bg2);margin-bottom:.55rem} .asset.owned{border-color:var(--teal);background:var(--owned)} .asset.locked{opacity:.55} /* De upgradelijst binnen een imperiumbedrijf. Ingesprongen en op een eigen ondergrond, zodat je ziet dat het bij dat bedrijf hoort en niet bij het volgende. */ .assetup{border-top:1px solid var(--line);padding-top:.6rem;margin-top:.6rem} /* Een brandstof in de voorraadtank: de cijfers, de twee knoppen en de regel die het vanzelf doet, als een blokje bij elkaar. */ .resfuel{border-top:1px solid var(--line);padding-top:.7rem;margin-top:.7rem} .resfuel input[type=range]{width:100%;margin:.3rem 0 .1rem} /* De twee wegen van je terminal naar je pomp. Een blokje apart, want het gaat niet over EEN brandstof maar over alles wat eronder staat. */ .resweg{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:.55rem .65rem;margin:.6rem 0} .resweg .row{margin-top:.2rem} .tier-h{display:flex;align-items:center;gap:.6rem;margin:1.1rem 0 .6rem;flex-wrap:wrap} .tier-h .line{flex:1;height:1px;background:var(--line);min-width:20px} /* ---------- toasts ---------- */ /* Boven een venster (80), want het instellingenscherm en het koopscherm ZIJN vensters en hun meldingen kwamen er anders achter te liggen. Veilig omdat toasts geen klikken opvangen (pointer-events:none): ze kunnen niets afdekken waar je op moet drukken. */ #toasts{position:fixed;inset-inline-end:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.45rem;z-index:85;max-width:min(360px,86vw);pointer-events:none} .toast{background:var(--panel);border:1px solid var(--line);border-inline-start:3px solid var(--accent);border-radius:9px;padding:.55rem .75rem;font-size:.84rem;font-weight:500;animation:slidein .25s ease-out;box-shadow:var(--shadow-lg)} .toast.good{border-inline-start-color:var(--teal)} .toast.bad{border-inline-start-color:var(--red)} .toast.info{border-inline-start-color:var(--blue)} /* Geel, niet rood: er is niets misgegaan, er staat alleen iets in de rij dat er zo niet uit komt. */ .toast.warn{border-inline-start-color:var(--yellow)} @keyframes slidein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}} /* ---------- de meldbalk bovenaan ---------- Voor de twee dingen die je niet mag missen terwijl je op een ander tabblad zit: een incident dat begint, en het nieuws dat de markt beweegt. Boven de kopbalk en over de volle breedte - op een telefoon is dat de enige plek waar iets gegarandeerd in beeld staat. */ .meldbalk{ position:fixed;top:0;left:0;right:0;z-index:75; display:flex;align-items:center;gap:.5rem;cursor:pointer; padding:.5rem .8rem calc(.5rem);font-size:.85rem;font-weight:600; background:var(--panel);border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg) /* Geen inschuif-animatie. Deze balk blijft staan zolang er iets speelt, en alles wat hem onderweg aanraakt laat de animatie opnieuw beginnen - dan hangt hij half boven de rand, zoals de uitrolklok eerder deed. Een balk die je moet kunnen lezen, hoort stil te staan. */ } .meldbalk .mb-ic{flex:0 0 auto;font-size:1rem} .meldbalk .mb-txt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .meldbalk .mb-x{ flex:0 0 auto;background:none;border:0;color:var(--muted); font-size:1.2rem;line-height:1;padding:0 .2rem;min-height:auto;cursor:pointer } /* De kleur zegt waar het over gaat. Een incident is geel en geen rood: er is niets stuk, er speelt iets - en rood bewaren we voor wat echt misging. */ .meldbalk.bad{border-bottom-color:var(--red);box-shadow:inset 0 -3px 0 var(--red),var(--shadow-lg)} .meldbalk.good{box-shadow:inset 0 -3px 0 var(--teal),var(--shadow-lg)} .meldbalk.info{box-shadow:inset 0 -3px 0 var(--blue),var(--shadow-lg)} .meldbalk.incidentbalk{box-shadow:inset 0 -3px 0 var(--yellow),var(--shadow-lg)} /* De pagina een stukje omlaag, anders ligt de balk over de kopbalk heen. */ body.heeft-meldbalk #topbar{margin-top:2.4rem} /* Hier stond de daglijn: een verticale strook langs de linkerrand met de stand van de zon erop. Die kwam er toen de klok uit de kopbalk moest omdat er geen breedte voor was. Nu staan datum en uur er weer in - zonder opschrift, dus ze passen - en dan vertelt die lijn hetzelfde nog een keer. Weg dus. Voor losse vakjes die alleen op een telefoon horen te staan: */ .toon-sm{display:none} /* Het steentje blijft staan als het woord wegvalt; dan hoort de ruimte ernaast ook weg te vallen. */ .dia-ic + [data-woord]{margin-inline-start:.25rem} .daglicht{ position:relative;width:46px;height:6px;border-radius:99px;flex:0 0 auto; background:linear-gradient(90deg,var(--line2) 0%,var(--yellow) 26%,var(--yellow) 74%,var(--line2) 100%); border:1px solid var(--line) } .daglicht i{ position:absolute;top:-8px;font-size:.6rem;font-style:normal;line-height:1; transform:translateX(-50%);pointer-events:none } /* ---------- de uitrolklok ---------- Rechtsonder, waar niets van het spel staat, en boven de toasts (85) zodat een voorbijkomend meldinkje hem niet afdekt. Geen venster: er valt niets te beantwoorden, en wat je wegklikt weet je vijf minuten later niet meer. */ .uitrolbalk{ position:fixed;inset-inline-end:1rem;bottom:1rem;z-index:86; display:flex;flex-direction:column;gap:.15rem; background:var(--panel);border:1px solid var(--line);border-inline-start:3px solid var(--yellow); border-radius:9px;padding:.55rem .8rem;box-shadow:var(--shadow-lg); max-width:min(320px,86vw) /* Bewust GEEN animatie. Deze balk wordt elke seconde bijgewerkt omdat de klok doorloopt, en dan begint een opkomst-animatie telkens opnieuw: hij bleef eeuwig half doorschijnend door het spel heen schijnen. Een toast komt een keer voorbij en mag glijden; dit ding staat er een half uur. */ } .uitrolbalk strong{font-size:.9rem} .uitrolbalk span{font-size:.74rem;color:var(--muted)} /* De eigen boodschap van de beheerder. Iets nadrukkelijker dan de vaste uitlegregel eronder, want dit is het enige stuk dat per uitrol verschilt - en het staat er alleen als er echt iets getypt is. */ .uitrolbalk span.note{color:var(--txt);font-style:italic;margin-top:.2rem; border-top:1px solid var(--line);padding-top:.25rem} /* Als de klok op nul staat is het geen waarschuwing meer maar een mededeling. */ .uitrolbalk.klaar{border-inline-start-color:var(--teal)} /* De toasts een stukje omhoog zolang de klok er staat, anders liggen ze erop. */ body.heeft-uitrol #toasts{bottom:5.2rem} /* ---------- modal ---------- */ #modal-root{position:fixed;inset:0;background:rgba(11,18,26,.55);display:flex;align-items:center;justify-content:center;z-index:80;padding:1rem} /* LET OP: zonder deze regel wint display:flex van het hidden-attribuut en ligt de overlay permanent over het spel - alles oogt donker en niets is klikbaar. */ #modal-root[hidden]{display:none} .modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.4rem;max-width:580px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-lg)} .modal h2{font-size:1.35rem;margin-bottom:.3rem} .modal .modal-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.2rem;flex-wrap:wrap} /* Knoppen onder elkaar in plaats van naast elkaar. Voor vensters die een MENU zijn en geen vraag: daar is elke knop een eigen bestemming en niet "ja of nee". Naast elkaar leest dat als een rij gelijke keuzes waar je doorheen moet zoeken; onder elkaar als een lijst. */ .modal .modal-actions.stapel{flex-direction:column;align-items:stretch;justify-content:flex-start} .modal .modal-actions.stapel .btn{width:100%} /* En dan ook SMAL. Vijfhonderdtachtig pixels is de maat voor een formulier; zes knoppen met een woord erop uitgerekt over diezelfde breedte leest als een dialoogvenster dat niet weet wat het wil zijn. */ .modal.smal{max-width:340px} /* ---------- responsive: telefoon ---------- */ @media (max-width:900px){ .grid.cols3{grid-template-columns:repeat(2,1fr)} .hide-sm{display:none} /* Op een telefoon telt elke millimeter in de kopbalk. Het vermogen hoort er wel te staan - dat is waar het spel over gaat - dus wordt de rest korter: kleinere labels, de kas afgekapt (zie smal() in js/ui.js) en bij de diamanten blijft alleen het steentje over. */ /* EEN rij op een telefoon, met minder erin. * * Hier stonden even twee rijen. Dat paste, maar het maakte de balk hoger - en * hoogte is op een telefoon precies wat je niet over hebt. De oplossing was * niet beter schikken maar weglaten: datum en uur zijn informatie, geen * stuurknop. Ze staan er nog wel, maar zonder opschrift: het woord DATUM * boven een datum vertelt je niets wat je niet ziet. * * Wat blijft: kas, winst per dag, vermogen, diamanten. En de balk is lager * dan hij ooit was, want de padding mag mee omlaag als er minder in staat. */ .stat label{font-size:.52rem;letter-spacing:.3px} .stat .big{font-size:.86rem} .stat{font-size:.78rem;line-height:1.15} /* De opschuifruimte voor de daglijn is hier ook weg: er is geen lijn meer om iets voor vrij te houden, en die centimeter is op een telefoon geen kleinigheid. */ .stats{gap:.9rem} } @media (max-width:620px){ body{font-size:14px} /* Zo laag mogelijk. Datum en uur staan hier niet meer (zie index.html), dus er hoeft ook geen ruimte voor gemaakt te worden. De hoogte werd verder bepaald door de menuknop; die mag mee krimpen. */ #topbar{padding:.28rem .5rem;gap:.45rem;flex-wrap:nowrap; padding-top:max(.28rem, env(safe-area-inset-top))} .icon-btn{padding:.15rem .5rem;font-size:1rem} .logo{font-size:1.15rem} .brand-txt small{display:none} .brand-txt strong{font-size:.85rem} /* De kop heeft er cijfers bij gekregen (diamanten) en liep daardoor over de merknaam heen. Nu mag hij krimpen en schuiven in plaats van te overlappen. */ /* Alleen de pomp, geen naam: op deze breedte is elke pixel die naar de merknaam gaat een pixel minder voor je kas. */ .brand{flex:0 0 auto;min-width:0} .brand-txt{display:none} /* Van links af, niet van rechts: kas is het getal waar je naar kijkt, dus dat hoort altijd in beeld te staan. De rest mag naar rechts wegschuiven. */ /* DRIE KOLOMMEN, TWEE RIJEN. * * KAS WINST / DAG VERMOGEN * DIAMANTEN DATUM UUR * * Boven het geld, met opschrift, want daar stuur je op. Eronder wat je wilt * weten, zonder opschrift - dat scheelt precies de regel hoogte die het * geheel anders te hoog maakte. * * Een raster en geen flex met omslag: zo staat de onderste rij netjes onder * de bovenste in plaats van te schuiven met de breedte van zijn eigen inhoud. * De rijafstand is nul; dicht bij elkaar was de hele vraag. */ .stats{ display:grid;grid-template-columns:repeat(3,1fr); gap:0 .5rem;margin-inline-start:.35rem;flex:1 1 auto;min-width:0;overflow:visible } .stat{flex:0 0 auto;line-height:1.1;text-align:center;min-width:0} .stat label{font-size:.5rem;letter-spacing:.3px} .stat .big{font-size:.9rem} .stat span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* De diamanten op EEN regel: het steentje voor het getal in plaats van erboven. Een label "diamanten" boven een diamant herhaalt het plaatje, en die regel hoogte hebben we liever. */ /* justify-content erbij: dit vakje is een flexRIJ (steentje naast getal), en text-align centreert daar niets. Zonder dit stond de diamant een paar pixels links van de kolom erboven - net genoeg om scheef te ogen. */ #hdr-dia-knop{flex-direction:row;align-items:center;justify-content:center;gap:.25rem} #hdr-dia-knop label{font-size:.95rem;letter-spacing:0} /* De onderste rij zonder opschrift, en iets kleiner dan het geld erboven: het is iets om te weten, niet om op te sturen. */ #hdr-datum-vak,#hdr-uur-vak{justify-content:center;font-size:.78rem} #hdr-dia-knop{font-size:.78rem} .toon-sm{display:flex} #main{padding:.7rem;padding-bottom:calc(72px + env(safe-area-inset-bottom))} /* Boven de tabbalk, anders staat de klok eronder en zie je hem niet. */ .uitrolbalk{bottom:calc(72px + .6rem + env(safe-area-inset-bottom));right:.6rem;left:.6rem;max-width:none} body.heeft-uitrol #toasts{bottom:calc(72px + 4.6rem + env(safe-area-inset-bottom))} .grid.cols2,.grid.cols3{grid-template-columns:1fr} /* Op de kaart staat de prijstabel LINKS en de kaart rechts. Zodra die twee kolommen onder elkaar vallen, zou de kaart achter een tabel van vijfendertig rijen belanden - en de kaart is waar je naartoe komt. Hier dus omgedraaid: kaart en stationspaneel eerst, de tabel eronder. */ [data-panel="map"] .grid.cols2 > div:nth-child(2){order:1} [data-panel="map"] .grid.cols2 > div:nth-child(1){order:2} #tabs{ position:fixed;bottom:0;left:0;right:0;z-index:50;padding:.3rem .2rem calc(.3rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line);border-bottom:0;background:var(--panel); /* Negen tabs passen niet meer naast elkaar op 375px. Liever laten schuiven dan de laatste twee half afsnijden: zo blijft elke tab bereikbaar en leesbaar. */ justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch } #tabs::-webkit-scrollbar{display:none} #tabs button{flex-direction:column;gap:2px;padding:.35rem .45rem;border-radius:10px;font-size:.62rem; flex:0 0 auto;min-width:3.6rem;border-bottom:0} #tabs button i{font-size:1.15rem} #tabs button.active{background:transparent;border-bottom:0} #toasts{right:.5rem;left:.5rem;bottom:calc(78px + env(safe-area-inset-bottom));max-width:none} } /* kaartwegen */ .roads .road{stroke:var(--line2);fill:none} .roads .road2{stroke:var(--line);fill:none} /* ---------- prijsstrategie ---------- */ .pctwrap{position:relative;display:inline-flex;align-items:center} .pctwrap input{width:86px;padding-inline-end:1.5rem;text-align:end} .pctwrap b{position:absolute;inset-inline-end:.55rem;font-size:.85rem;color:var(--dim);pointer-events:none} .pricebig{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent2)} /* ---------- stationsbrede prijsschuif ---------- */ .master{border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;background:var(--bg2)} .master label{cursor:pointer} input[type=range]{ -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px; background:linear-gradient(90deg,var(--teal),var(--line2) 50%,var(--accent)); border:1px solid var(--line);outline:none;padding:0;min-height:auto;margin:.7rem 0 .4rem } input[type=range]:focus{outline:2px solid var(--accent);outline-offset:3px} input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:24px;height:24px;border-radius:50%; background:var(--panel);border:3px solid var(--accent);box-shadow:var(--shadow);cursor:grab } input[type=range]::-webkit-slider-thumb:active{cursor:grabbing} input[type=range]::-moz-range-thumb{ width:22px;height:22px;border-radius:50%; background:var(--panel);border:3px solid var(--accent);box-shadow:var(--shadow);cursor:grab } /* ---------- vuldialoog ---------- */ .fillbar{display:flex;height:26px;border-radius:9px;overflow:hidden;background:var(--input);border:1px solid var(--line)} .fillbar i{display:block;height:100%;transition:width .18s} .fillbar i[data-fill="have"]{background:linear-gradient(90deg,#12b78a,var(--teal))} .fillbar i[data-fill="add"]{background:linear-gradient(90deg,var(--accent),var(--accent2))} /* ---------- maandnavigatie ---------- */ .monthnav{display:flex;align-items:center;gap:.4rem} .monthnav span{font-weight:700;font-size:.86rem;min-width:9.5rem;text-align:center} .monthnav .btn{min-height:30px;padding:.2rem .55rem} /* brandstof die onderweg is: gestreept segment achter de voorraad */ .bar > i.pending{ background-image:repeating-linear-gradient(45deg, var(--line2) 0 5px, transparent 5px 10px); background-color:transparent; opacity:.9 } /* prijzenlijst met 25 stations: eigen scrollgebied i.p.v. een eindeloze kaart */ .table-wrap.scrolly{max-height:22rem;overflow-y:auto} .table-wrap.scrolly thead th{position:sticky;top:0;background:var(--panel);z-index:1} /* ---------- stadskaart ---------- */ #mapbox svg.roads .water{fill:var(--map-water)} #mapbox svg.roads .land{fill:var(--map-land);stroke:var(--map-coast);stroke-width:.3} #mapbox svg.roads .park{fill:var(--map-park);stroke:none} #mapbox svg.roads .bridge{stroke:var(--map-bridge);stroke-width:.9;stroke-linecap:round} #mapbox svg.roads .road2{stroke:var(--map-road);stroke-width:.6;fill:none;stroke-linecap:round} #mapbox svg.roads .road3{stroke:var(--map-street);stroke-width:.35;stroke-linecap:round} :root{ --map-water:#c3ddf0; --map-land:#e8edf2; --map-coast:#a9bccf; --map-park:#cbe6c4; --map-bridge:#8ea4b8; --map-street:#cbd7e4; --map-road:#aebfd1; } :root[data-theme="dark"]{ --map-water:#15293a; --map-land:#233343; --map-coast:#3b5068; --map-park:#1e3a2a; --map-bridge:#5a7590; --map-street:#31465e; --map-road:#46617f; } /* ---------- klikbare ketenrijen ---------- */ tr.pick{cursor:pointer} tr.pick .link{font-weight:600;border-bottom:1px dotted var(--line2)} tr.pick:hover{background:var(--hover)} tr.pick:hover .link{color:var(--accent2);border-bottom-color:var(--accent)} tr.pick.sel{background:var(--panel2)} tr.pick.sel .link{color:var(--accent2);border-bottom-color:var(--accent)} /* ---------- keuzelijst (instellingen) ---------- */ select{ background:var(--input);border:1px solid var(--line2);color:var(--txt);border-radius:8px; padding:.45rem .5rem;font:600 .9rem/1 "Segoe UI",sans-serif;min-height:38px } select:focus{outline:2px solid var(--accent);outline-offset:-1px} /* Kolom met kaarten van uiteenlopende hoogte. Als grid-kinderen zouden ze per rij uitlijnen en gaten laten vallen; als eigen kolom stapelen ze strak. */ .kolom{display:flex;flex-direction:column;gap:.9rem;min-width:0} /* ------------------------------------------------------------------- wereld */ .wereld{width:100%;height:auto;display:block;border:1px solid var(--line); border-radius:var(--radius)} /* Eigen kaartkleuren, geen thematokens: een kaart hoort er in licht en donker als een kaart uit te zien, niet als de rest van het scherm. */ .wereld .woceaan{fill:#cfe0ef} .wereld .wland{fill:#e8e2d2;stroke:#b9ae93;stroke-width:.35} .wereld .wzee{fill:#cfe0ef} .wereld .wgrid{stroke:#8fa8bd;stroke-width:.25;stroke-opacity:.45;stroke-dasharray:2 3} .wereld .wgrid.evenaar{stroke-opacity:.7;stroke-dasharray:none} .wereld .wpin circle{stroke:#fff;stroke-width:1.1;cursor:default} .wereld .wpin.op-slot circle{opacity:.5} .wereld .wpin.hier circle{stroke:#1f2937;stroke-width:1.5} .wereld .wpuls{fill:none;stroke:#1f2937;stroke-width:1;opacity:.45} [data-theme="dark"] .wereld .woceaan,[data-theme="dark"] .wereld .wzee{fill:#16293b} [data-theme="dark"] .wereld .wland{fill:#3a4353;stroke:#59637a} [data-theme="dark"] .wereld .wgrid{stroke:#7c8ba0} [data-theme="dark"] .wereld .wpin circle{stroke:#0f172a} [data-theme="dark"] .wereld .wpin.hier circle{stroke:#e5e7eb} [data-theme="dark"] .wereld .wpuls{stroke:#e5e7eb} .regio{border:1px solid var(--line);border-radius:10px;padding:.5rem .6rem;background:var(--bg)} .regio.op-slot{opacity:.55} .regio.hier{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset} /* -------------------------------------------------------------------- nieuws */ .nieuws{padding:.45rem .55rem;border-radius:9px;background:var(--bg);margin-bottom:.35rem} .nieuws.loopt{border-inline-start:3px solid var(--accent)} /* ---------------------------------------------------------------- ranglijst */ .tag{display:inline-block;padding:0 .3rem;border-radius:5px;background:var(--line); font-size:.7rem;font-weight:700;letter-spacing:.03em;vertical-align:middle} tr.ikzelf{background:var(--bg)} tr.ikzelf td{font-weight:700} /* ---------------------------------------------------------------------- chat */ /* De chat groeit mee met het scherm. Een vaste 260 pixels is op een telefoon bijna het halve venster en op een brede monitor een kier waar zes regels in passen terwijl er ruimte zat is. Met een hoogte in vh krijgt iedereen ongeveer evenveel gesprek te zien, met een bodem zodat het op een klein scherm bruikbaar blijft en een plafond zodat het invoerveld op een grote monitor niet uit beeld zakt. */ .chatlijst{height:clamp(220px, 42vh, 620px);overflow-y:auto;background:var(--bg); border-radius:9px;padding:.45rem .55rem} @media (max-width:640px){ /* Op een telefoon staat het toetsenbord straks over het onderste deel heen; dan is een kortere lijst met een zichtbaar invoerveld beter dan andersom. */ .chatlijst{height:clamp(180px, 34vh, 340px)} } .chatregel{padding:.15rem 0;line-height:1.45;position:relative;padding-inline-end:1.4rem} .chatregel.mij strong{color:var(--accent)} .chatregel .vlag{position:absolute;inset-inline-end:0;top:.1rem;background:none;border:0;cursor:pointer; color:var(--muted);opacity:0;font-size:.8rem;padding:0 .2rem} .chatregel:hover .vlag{opacity:1} .chatregel .vlag:hover{color:var(--neg,#c0392b)} /* De gemelde regel in het beoordelingsvenster van een hoofdmoderator. */ .chatregel.gemeld{background:rgba(192,57,43,.12);border-inline-start:3px solid var(--neg,#c0392b); padding-inline-start:.4rem;border-radius:3px} /* Het rode cijfer op het moderatietabblad. */ #tabs .tabbadge{display:inline-block;min-width:1.1rem;margin-inline-start:.3rem;padding:0 .25rem; border-radius:999px;background:var(--neg,#c0392b);color:#fff;font-size:.65rem; font-weight:700;line-height:1.1rem;text-align:center;vertical-align:middle} /* Een openstaande zaak in de moderatielijst. */ .modzaak{padding:.5rem .6rem;border-radius:9px;background:var(--bg);margin-bottom:.4rem} .modzaak .btn{margin-top:.35rem} /* Een spelersnaam is overal een knop naar hetzelfde venster: in de chat, in de ranglijst en bij je clan. Onderstreept bij aanwijzen, want anders raadt niemand dat er iets achter zit. */ .naam{cursor:pointer} .naam:hover{text-decoration:underline} /* Het teken achter iemand die de laatste dertig dagen van naam wijzigde. Gedempt en klein: het staat naast een naam in een tabel en mag die niet wegduwen. Wie wil weten hoe hij eerder heette, klikt de naam aan. */ .naamteken{opacity:.55;font-size:.85em;cursor:help} /* De gesprekkenlijst van het prive-kanaal. */ .gesprek{padding:.35rem .45rem;border-radius:7px;cursor:pointer} .gesprek:hover{background:var(--line)} .gesprek + .gesprek{margin-top:.15rem} /* Ranglijst: prestige is de hoofdkolom, vermogen staat er gedempt naast. */ table.rang th{text-align:start;font-size:.7rem;color:var(--muted);font-weight:600; padding-bottom:.25rem;border-bottom:1px solid var(--line)} table.rang th.num,table.rang td.num{text-align:end} /* De twee markttabellen op de kaart - veebedrijven en slachthuisketens. Dezelfde regel als hierboven, en om dezelfde reden: een kop die links staat boven cijfers die rechts staan, lijnt nergens op uit. */ table.markt th.num,table.markt td.num{text-align:end} /* Het rangnummer gecentreerd: een kolom van 1 tot 3 cijfers leest scheef als hij tegen de ene of de andere rand geplakt staat. */ table.rang th.rangnr,table.rang td.rangnr{text-align:center;width:2.8rem;color:var(--muted)} table.rang td{padding:.25rem 0} table.rang td:not(:first-child):not(:nth-child(2)){padding-inline-start:.7rem} /* --------------------------------------------- ingeplande uitbreidingen */ /* Alleen de wachtrijlijst. Zonder ol ervoor raakte dit ook de Plan-knop, die dezelfde klasse draagt, en die kreeg dan de padding van een lijst. */ ol.plan{list-style:none;margin:.4rem 0 0;padding:0} ol.plan li{display:flex;align-items:center;gap:.5rem;padding:.35rem .5rem;border-radius:6px} ol.plan li+li{margin-top:.25rem} ol.plan li:nth-child(odd){background:rgba(127,127,127,.07)} /* De bovenste is waar de manager nu voor spaart; dat mag je zien. */ ol.plan li.nu{background:rgba(34,197,94,.13);outline:1px solid rgba(34,197,94,.35)} ol.plan .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} ol.plan .num{font-variant-numeric:tabular-nums;opacity:.75} ol.plan .mini{border:0;background:transparent;cursor:pointer;font-size:.95rem; line-height:1;padding:.2rem .3rem;border-radius:4px;opacity:.55} ol.plan .mini:hover{opacity:1;background:rgba(127,127,127,.18)} ol.plan .mini.weg:hover{background:rgba(239,68,68,.22)} .knoprij{display:flex;gap:.35rem} .knoprij .btn.block{flex:1} .btn.plan{white-space:nowrap;padding-inline:.6rem} /* ---------- knoppen op dezelfde hoogte ---------- Een kaart met een maandkost of een openstaande vereiste heeft een regel tekst meer dan zijn buurman, en de knoprij zakte daarmee mee. In een raster is elke kaart even hoog, dus onderaan vastzetten is meteen ook naast elkaar. */ .up > .knoprij, .up > .btn.block{margin-top:auto} /* Op een regel houden, zodat een bedrag met meer cijfers zijn knop niet hoger maakt dan die op de kaart ernaast. */ .up .knoprij .btn{white-space:nowrap} /* Op de kaart staan prijs en Plan naast elkaar in een lijst onder elkaar. De prijs is nu eens 5.000 en dan weer 15.000.000, dus zonder vaste breedte danst de Plan-knop van regel tot regel heen en weer. */ .ketenacties{display:grid;grid-template-columns:1fr;justify-items:stretch;gap:.3rem;white-space:nowrap} .ketenacties > .tiny{grid-column:1 / -1;text-align:end} .ketenacties .btn.sm{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:2rem;line-height:1.1} @media (min-width:520px){ .ketenacties{grid-template-columns:8.5rem 4.6rem;align-items:center} } .btn.dia{white-space:nowrap;padding-inline:.55rem} .row.fil{border-bottom:1px solid rgba(127,127,127,.25);padding-bottom:.55rem} /* ------------------------------------------------- managers per gebied */ .mgr-wereld{margin-top:.6rem} .mgr-deel{margin-bottom:.7rem} .mgr-deelnaam{text-transform:uppercase;letter-spacing:.06em;margin-bottom:.25rem} .mgr-regio{border-radius:6px;background:rgba(127,127,127,.07);margin-bottom:.25rem} .mgr-regio>summary{display:flex;justify-content:space-between;align-items:center;gap:.6rem; padding:.4rem .55rem;cursor:pointer;list-style:none;font-size:.85rem} .mgr-regio>summary::-webkit-details-marker{display:none} .mgr-regio>summary .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mgr-regio[open]>summary{border-bottom:1px solid rgba(127,127,127,.2)} .mgr-regio.op-slot>summary{opacity:.5} .mgr-regio>*:not(summary){padding:.45rem .55rem} .mgr-lijst{max-height:11rem;overflow:auto} .mgr-rij{gap:.6rem;margin-bottom:.2rem} /* ------------------------------------------------------ dagelijkse bonus */ .dagrij{display:flex;gap:.3rem;margin:.5rem 0} .dagvak{flex:1;aspect-ratio:1;display:flex;align-items:center;justify-content:center; border-radius:5px;background:rgba(127,127,127,.12);opacity:.55} .dagvak.gehad{background:rgba(34,197,94,.22);opacity:1} .dagvak.nu{background:rgba(245,158,11,.28);opacity:1;outline:1px solid rgba(245,158,11,.6)} .pp-lijst{max-height:52vh;overflow:auto;margin:.6rem 0} /* ===================================================================== SCHUIFBALK Alleen waar er een MUIS is. --------------------------------------------------------------------------- Op een telefoon zijn schuifbalken overlays: ze verschijnen als je sleept en verdwijnen weer. Die zijn goed zoals ze zijn, en er iets aan doen maakt het erger - een gestylede ::-webkit-scrollbar kan op iOS juist een balk maken die altijd blijft staan en ruimte inneemt. Vandaar de voorwaarde op hover en een fijne aanwijzer: dat is een muis, en dus een pc. Op Windows staat er standaard een brede grijze balk met knopjes eraan, in kleuren die van het besturingssysteem komen en niet van dit scherm. In een donker thema is dat een lichte streep langs de rand. */ @media (hover: hover) and (pointer: fine) { /* Firefox kent de twee eigenschappen hieronder en verder niets; de ::-webkit-regels daaronder zijn voor Chrome, Edge en Safari. Allebei opschrijven, want ze negeren elkaars versie zonder te klagen. */ * { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } /* Geen eigen achtergrond: de balk zweeft boven wat eronder ligt, zodat een paneel niet ineens een grijze strook aan zijn rand krijgt. */ ::-webkit-scrollbar-track { background: transparent; } /* De duim met een rand van de achtergrondkleur eromheen. Dat is de truc die hem smaller laat lijken dan de baan waarin hij loopt - zonder die rand plakt hij tegen de inhoud aan. background-clip zorgt dat de rand echt doorzichtig blijft in plaats van meegekleurd te worden. */ ::-webkit-scrollbar-thumb { background: var(--line2); border: 2px solid transparent; background-clip: padding-box; border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--dim2); background-clip: padding-box; } ::-webkit-scrollbar-thumb:active { background: var(--dim); background-clip: padding-box; } /* De hoek waar een horizontale en een verticale balk elkaar raken. Zonder dit staat daar een lichtgrijs vierkantje dat in het donkere thema oplicht. */ ::-webkit-scrollbar-corner { background: transparent; } /* De hoofdinhoud houdt zijn ruimte vast. Zonder dit springt het hele scherm een tiental pixels opzij zodra een tabblad lang genoeg wordt om te schuiven - en dat gebeurt hier bij elke verversing waarin er een regel bijkomt. */ #main { scrollbar-gutter: stable; } } /* ---------------------------------------------------- achtergrond van het spel Vast in beeld, achter alles, en hij schaalt mee met de breedte. Waarom geen achtergrondafbeelding: dit is dezelfde SVG die het spel al gebruikt, dus hij is scherp op elk scherm, weegt niets en kent het thema. Een PNG zou op een telefoon met dubbele pixeldichtheid onscherp zijn of drie keer zo zwaar. Op een TELEFOON wordt de tekening vanzelf een smalle band onderaan - de viewBox is 1200 bij 420, dus bij 375 pixels breed is hij 131 hoog. Dat is precies goed: op een klein scherm is er geen ruimte voor een tafereel, wel voor een horizon. max-height houdt hem op een groot scherm in toom. */ #achtergrond{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:linear-gradient(180deg,var(--ag-lucht1) 0%,var(--ag-lucht2) 58%,var(--ag-lucht3) 100%); } #achtergrond svg{ position:absolute; left:0; right:0; bottom:0; width:100%; height:auto; max-height:68vh; } /* De gloed op de horizon. Een los vlak en geen verloop in de SVG, zodat hij over de volle breedte doorloopt ook als de tekening smaller is. */ #achtergrond::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:46vh; background:radial-gradient(60% 100% at 50% 100%,var(--ag-gloed) 0%,transparent 70%); } #achtergrond .ag-grond{fill:var(--ag-grond)} #achtergrond .ag-mid{fill:var(--ag-mid)} #achtergrond .ag-donker{fill:var(--ag-donker)} #achtergrond .ag-glas{fill:var(--ag-glas)} #achtergrond .ag-ver{stroke:var(--ag-ver);stroke-width:7;fill:none;stroke-linecap:round} #achtergrond .ag-ver-vul{fill:var(--ag-ver)} #achtergrond .ag-lijn{stroke:var(--ag-lijn);stroke-width:3;fill:none;opacity:.5} /* GEEN achtergrond op telefoon en tablet. ------------------------------------------------------------------------- Hier stonden twee media-regels die de tekening op een klein scherm juist BREDER maakten, zodat er nog een leesbare horizon overbleef. Dat werkte, maar het loste het verkeerde probleem op: op een scherm waar de inhoud de volle breedte nodig heeft, is een tafereel achter die inhoud geen sfeer maar ruis. Tekst staat er bovenop, de contrastverhouding hangt af van waar je toevallig scrollt, en op een telefoon leest niemand het spel om de achtergrond. Daarom nu weg onder de 901 pixels - dezelfde grens waar de tablet ophoudt. Wat overblijft is var(--bg), en dat is precies wat de kaarten nodig hebben. */ @media (max-width:900px){ #achtergrond{display:none} } /* De tekening staat NAAST de inhoud, niet erachter. ------------------------------------------------------------------------- Ze liep onder de hele bladzijde door, dus ook onder de kaarten. Tussen twee kaarten zag je er dan een stuk van, en wat je zag hing af van hoe ver je gescrold had. Een achtergrond die door je tabellen heen schemert is geen achtergrond maar afleiding. De inhoud is een gecentreerde kolom: .panel is hoogstens 1180 breed en #main legt daar 1rem opvulling omheen. Die 1212 pixels krijgen hier een DEKKENDE baan; links en rechts blijft de tekening staan. Is het venster smaller dan de kolom, dan loopt de baan vanzelf over de volle breedte en zie je niets - en dat klopt, want dan is er ook geen plek naast. Een verloop en geen extra element: een pseudo-element van #achtergrond zou ONDER de tekening vallen (::before) of boven de gloed (::after), en dan moet er z-index bij op iets wat al fixed is. Dit is een regel. */ #main{ --kolom:1212px; background:linear-gradient(90deg, transparent calc(50% - var(--kolom) / 2), var(--bg) calc(50% - var(--kolom) / 2), var(--bg) calc(50% + var(--kolom) / 2), transparent calc(50% + var(--kolom) / 2)); }