/* Petrol 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) */ :root{ --bg:#eaeff5; --bg2:#dee6ef; --panel:#ffffff; --panel2:#f2f6fa; --hover:#e4ebf3; --line:#cbd7e4; --line2:#a9bccf; --txt:#132030; --dim:#4f6377; --dim2:#71879c; --accent:#e2730c; --accent2:#a85200; --teal:#0a8f68; --red:#cf3535; --blue:#1a72c4; --yellow:#a97a06; --input:#ffffff; --owned:#e6f6ee; --glow:rgba(226,115,12,.35); --shadow:0 1px 3px rgba(19,32,48,.10), 0 6px 18px rgba(19,32,48,.06); --shadow-lg:0 18px 50px rgba(19,32,48,.22); --pill-e95-bg:#d6f2e2; --pill-e95-fg:#0d6b41; --pill-die-bg:#fbecce; --pill-die-fg:#7a5410; --pill-e98-bg:#eddcf7; --pill-e98-fg:#68288f; --pill-ev-bg:#d4e9fb; --pill-ev-fg:#10568c; --radius:12px; --tap:44px; } /* -------------------------------------------------------------------- DONKER */ :root[data-theme="dark"]{ --bg:#16202c; --bg2:#1d2a3a; --panel:#243447; --panel2:#2e4056; --hover:#3b5170; --line:#3b5068; --line2:#5a7590; --txt:#f2f7fb; --dim:#b3c6d8; --dim2:#8ea4b8; --accent:#ff9440; --accent2:#ffbe7d; --teal:#3ee0b4; --red:#ff7676; --blue:#5cb4ff; --yellow:#ffd968; --input:#16212e; --owned:#1e3529; --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-e95-bg:#1f3d2a; --pill-e95-fg:#7ee6a4; --pill-die-bg:#3b2f18; --pill-die-fg:#ffd48a; --pill-e98-bg:#3a2340; --pill-e98-fg:#dda6ff; --pill-ev-bg:#153348; --pill-ev-fg:#7cc9ff; } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent} html,body{margin:0;height:100%} 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)} /* ---------- 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. */ body.poort #topbar{display:none} #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-left:auto;align-items:center} .stat{display:flex;flex-direction:column;line-height:1.2;text-align:right} .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} #tabs{display:flex;gap:.25rem;padding:.45rem .7rem 0;background:var(--bg2);border-bottom:1px solid var(--line);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 ---------- */ #main{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:1rem;padding-bottom:2rem;-webkit-overflow-scrolling:touch} .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} .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;transition:.12s;color:var(--txt) } .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,#ff9c3f,#e8730c);border-color:#d4680a;color:#231000} .btn.primary:hover:not(:disabled){background:linear-gradient(180deg,#ffab58,#f27d13)} .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{ position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:70; 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-left:3px solid var(--line2)} .uitslag.gewonnen{border-left-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.e95{background:var(--pill-e95-bg);color:var(--pill-e95-fg)} .pill.diesel{background:var(--pill-die-bg);color:var(--pill-die-fg)} .pill.e98{background:var(--pill-e98-bg);color:var(--pill-e98-fg)} .pill.ev{background:var(--pill-ev-bg);color:var(--pill-ev-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:left;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 ---------- */ #mapbox{position:relative;width:100%;aspect-ratio:16/10;background:var(--bg2); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} #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)} .pin.mine .dotm{background:var(--accent);box-shadow:0 0 10px var(--glow)} .pin.part .dotm{background:var(--yellow);box-shadow:0 0 0 1px var(--yellow)} .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} .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-left: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} .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 ---------- */ #toasts{position:fixed;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.45rem;z-index:60;max-width:min(360px,86vw);pointer-events:none} .toast{background:var(--panel);border:1px solid var(--line);border-left: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-left-color:var(--teal)} .toast.bad{border-left-color:var(--red)} .toast.info{border-left-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-left-color:var(--yellow)} @keyframes slidein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}} /* ---------- 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} /* ---------- responsive: telefoon ---------- */ @media (max-width:900px){ .grid.cols3{grid-template-columns:repeat(2,1fr)} .hide-sm{display:none} .stats{gap:.9rem} } @media (max-width:620px){ body{font-size:14px} #topbar{padding:.5rem .6rem;gap:.5rem;flex-wrap:nowrap} .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. */ .stats{gap:.9rem;margin-left:.4rem;flex:1 1 auto;min-width:0;overflow-x:auto; scrollbar-width:none;justify-content:flex-start} .stats::-webkit-scrollbar{display:none} .stat{flex:0 0 auto} .stat .big{font-size:.95rem} #main{padding:.7rem;padding-bottom:calc(72px + env(safe-area-inset-bottom))} .grid.cols2,.grid.cols3{grid-template-columns:1fr} #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-right:1.5rem;text-align:right} .pctwrap b{position:absolute;right:.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 .road3{stroke:var(--map-street);stroke-width:.35} :root{ --map-water:#c3ddf0; --map-land:#e8edf2; --map-coast:#a9bccf; --map-park:#cbe6c4; --map-bridge:#8ea4b8; --map-street:#cbd7e4; } :root[data-theme="dark"]{ --map-water:#15293a; --map-land:#233343; --map-coast:#3b5068; --map-park:#1e3a2a; --map-bridge:#5a7590; --map-street:#31465e; } /* ---------- 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-left: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-right:1.4rem} .chatregel.mij strong{color:var(--accent)} .chatregel .vlag{position:absolute;right: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-left:3px solid var(--neg,#c0392b); padding-left:.4rem;border-radius:3px} /* Het rode cijfer op het moderatietabblad. */ #tabs .tabbadge{display:inline-block;min-width:1.1rem;margin-left:.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} /* 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:left;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:right} /* 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-left:.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-left:.6rem;padding-right:.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:right} .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-left:.55rem;padding-right:.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}