/* ============================================================ Helix-Lager — Gestaltung ------------------------------------------------------------ Die Oberflaeche soll wie ein Geraet wirken, nicht wie ein Formular mit Farbe: dunkles Metall, Messingkante, Innentiefe, oben ein Lichtsaum, unten ein Sockelschatten. Alles rein in CSS — keine Bilddatei, keine Netzschrift, kein Bauwerkzeug. Farbwelt aus Project.md ("UI-Sprache der ersten Mockups"): warme Terrakotta-, Honig- und Rosttoene gegen Blattgruen, Wasser-Tuerkis und Solarblau. Kein Neon, kein Hochglanz. ============================================================ */ :root{ color-scheme:dark; /* --- Grundtoene: dunkles Petrol statt Neutralgrau --------- */ --tief:#070c0d; /* Nischenboden, Balkenbett */ --grund:#0f1819; /* tiefster Seitengrund */ --grund-hoch:#1a2523; /* oberer Seitengrund (Verlauf) */ /* --- Metall der Bauteile ---------------------------------- */ --flaeche:#23302b; /* Fuellung mittig */ --flaeche-hoch:#31423a; /* Fuellung oben (Lichtseite) */ --flaeche-tief:#17221f; /* Fuellung unten (Schattenseite) */ --rand:#48584c; /* alte Kantenfarbe, bleibt erhalten */ --kante:#0a1110; /* dunkle Aussenfase */ --kante-licht:rgba(255,231,183,.17); /* --- Messing, Rost, Wasser -------------------------------- */ --messing:#c8a24e; --messing-hell:#f2d79c; --messing-tief:#6d5527; --rost:#b96b3c; --tuerkis:#6fa8a0; /* --- Schrift ---------------------------------------------- */ --schrift:#f0e8d6; --gedimmt:#93a394; --warn:#d98b8b; /* Keine Netzschrift: die Rangfolge kommt aus Groesse, Gewicht, Sperrung, Versalien und Farbe. Der Serifenstapel ist reine Systemware und faellt ueberall auf etwas Warmes zurueck. */ --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif; --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --sicher-unten:env(safe-area-inset-bottom,0px); /* --- Angeschraegte Ecken ---------------------------------- */ --fase:9px; --ecken:polygon( var(--fase) 0, calc(100% - var(--fase)) 0, 100% var(--fase), 100% calc(100% - var(--fase)), calc(100% - var(--fase)) 100%, var(--fase) 100%, 0 calc(100% - var(--fase)), 0 var(--fase)); /* --- Das Material: einmal beschrieben, ueberall benutzt ---- Statt "1px border + border-radius" liegen hier mehrere Schattenlagen uebereinander: Lichtsaum oben innen, dunkle Innenfase, Tiefe nach unten, Messingkante aussen, Sockel und ein weicher Wurf darunter. */ --bauteil-fuellung:linear-gradient(180deg, var(--flaeche-hoch) 0, var(--flaeche) 46%, var(--flaeche-tief) 100%); --bauteil-schatten: inset 0 1px 0 var(--kante-licht), inset 0 0 0 1px rgba(0,0,0,.45), inset 0 -12px 16px -12px rgba(0,0,0,.75), 0 0 0 1px var(--messing-tief), 0 2px 0 rgba(0,0,0,.5), 0 6px 12px -6px rgba(0,0,0,.6); --bauteil-gedrueckt: inset 0 3px 6px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.55), 0 0 0 1px var(--messing-tief); /* Nische: eigener Grund fuer alles, was ausgestellt wird (Kreatursprite, Ei). Tief eingelassen, Messingfalz. */ --nische-grund: radial-gradient(78% 66% at 50% 30%,rgba(214,158,74,.17),transparent 72%), linear-gradient(180deg,#121c1a 0,#0a1211 62%,#0e1817 100%); --nische-schatten: inset 0 3px 7px rgba(0,0,0,.8), inset 0 0 0 1px rgba(0,0,0,.75), inset 0 0 0 2px rgba(200,162,78,.26), inset 0 -14px 18px -14px rgba(0,0,0,.6), 0 1px 0 rgba(255,231,183,.10); /* Feine Koernung als Data-URI-SVG. Nimmt den grossen Flaechen das Digitale, ohne eine einzige Bilddatei zu kosten. Die Deckkraft steckt im Bild selbst, weil eine Hintergrundlage keine eigene bekommen kann — und sie muss klein bleiben: feTurbulence liefert mittelgraues Rauschen, das eine dunkle Flaeche sonst anhebt, statt sie nur aufzurauhen. */ --koernung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='.055'/%3E%3C/svg%3E"); } *{box-sizing:border-box;margin:0;padding:0;} /* Das hidden-Attribut muss staerker sein als jede eigene display-Regel. Der Browser gibt [hidden] nur ein display:none aus seinem eigenen Stylesheet — und jede Regel dieser Datei schlaegt das, unabhaengig von der Spezifitaet. Ohne diese Zeile blieb das zugeklappte Labor (#brut-labor, display:grid) vollstaendig stehen, waehrend der Knopf daneben "Labor oeffnen" anbot. Einmal hier statt je Element. */ [hidden]{display:none !important;} /* --- Atmosphaere statt flachem Grund ------------------------- Vier Lagen: Koernung, ein warmer Schein oben (das Honiglicht der Welt), ein kuehler Wasserschein unten und darunter der Petrolverlauf. Der Grund ist damit nirgends zweimal derselbe. */ body{ background: var(--koernung), radial-gradient(120% 62% at 50% -8%,rgba(198,138,64,.20) 0,transparent 62%), radial-gradient(90% 55% at 50% 108%,rgba(24,74,74,.28) 0,transparent 70%), linear-gradient(180deg,var(--grund-hoch) 0,var(--grund) 46%,#0a1213 100%); background-attachment:fixed; color:var(--schrift); font:16px/1.45 var(--sans); min-height:100dvh;display:flex;flex-direction:column; -webkit-tap-highlight-color:transparent; } /* Vignette zu den Raendern: die Ecken sinken weg, die Mitte bleibt der Ort. Liegt ueber dem Grund, unter allem Inhalt. */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(118% 88% at 50% 34%,transparent 42%,rgba(0,0,0,.55) 100%); } /* main liegt ausdruecklich ueber Kopf und Reiterleiste. Grund: die Ueberblendung des Reiterwechsels macht `.ansicht` zu einem eigenen Stapelkontext, und die Kreaturenkarte darin (z-index 10) reicht deshalb nicht mehr von sich aus ueber die Leisten hinaus. Sie ueberlagern einander im Fluss ohnehin nie — die Reihenfolge wirkt nur fuer die Vollbildblaetter. */ #kopf,#reiter{position:relative;z-index:1;} main{position:relative;z-index:2;} canvas,img{image-rendering:pixelated;} /* --- Typografie: Rangfolge in vier Stufen -------------------- */ h2{font:700 1.35rem/1.2 var(--serif);letter-spacing:.01em; text-shadow:0 1px 0 rgba(0,0,0,.65);} h3{font:700 1rem/1.25 var(--serif);} /* Geraetebeschriftung: klein, gesperrt, in Versalien. Wird nur dort gesetzt, wo wirklich eine Beschriftung steht — nie auf Namen, Meldungen oder Fliesstext (der Bericht und die Titel der Kreaturenkarte bleiben deshalb ausdruecklich aussen vor). */ #kopf-rest,#reiter button span,.route h3,.ei-rest,#dex-zaehler, #karte button,#dex-blatt button,#einstellungen button,#einstellungen-import-knopf, #reise-frage button,#bericht button,#aufstieg button, .ansicht > button,.route button,#kopf-reise{ text-transform:uppercase;letter-spacing:.09em;font-weight:700; } /* Zahlen laufen mit fester Breite, damit die Restzeiten beim Herunterzaehlen nicht zappeln. */ #kopf-rest,.ei-rest,#dex-zaehler,#brut-vorrat,#brut-wunsch-plan, .ergebnis,.route,#bericht li{font-variant-numeric:tabular-nums;} /* ============================================================ Kopfzeile — ein Blechband ueber der Welt ============================================================ */ #kopf{ display:flex;align-items:center;gap:.45rem; padding:.55rem .7rem; background:linear-gradient(180deg,#2c3a35 0,#1d2825 55%,#131c1a 100%); border:0; box-shadow: inset 0 1px 0 rgba(255,231,183,.13), 0 1px 0 var(--messing-tief), 0 2px 0 rgba(0,0,0,.6), 0 8px 18px -8px rgba(0,0,0,.7); } /* Der Halteplatzname darf schrumpfen und notfalls kuerzen — die Kopfzeile ist schmal, und "Schwarzwasserbecken" neben zwei Knoepfen sprengte sie sonst. Die Knoepfe schrumpfen nicht: sie sind Beruehrungsflaechen. */ /* Lange Namen wie "Schwarzwasserbecken" schrumpfen, statt abgeschnitten zu werden: der Halteplatz ist die wichtigste Angabe der Kopfzeile, und ein "Schwarzwa..." sagt weniger als dieselbe Zeile zwei Punkt kleiner. */ #kopf-region[data-lang="ja"]{font-size:.92rem;letter-spacing:0;} #kopf-region{ font:700 1.02rem/1.15 var(--serif); color:var(--schrift);letter-spacing:.005em; text-shadow:0 1px 0 rgba(0,0,0,.7),0 0 14px rgba(200,162,78,.22); flex:0 1 auto;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* Die Restzeit bekommt eine feste Spalte und bricht darin auf zwei Zeilen um — nur so bleibt daneben Platz fuer den Halteplatznamen. Die beiden Knoepfe schrumpfen nie: sie sind Beruehrungsflaechen. */ /* Name und Restzeit stehen uebereinander statt nebeneinander. Nebeneinander blieben fuer "Schwarzwasserbecken" neben Zaehler und zwei Knoepfen keine zwanzig Zeichen uebrig — gestapelt hat der Name die volle Breite, und die Kopfzeile wird davon nicht hoeher, weil sie ohnehin zwei Zeilen hoch ist. */ #kopf-ort{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.1rem;} #kopf-rest{width:auto;} #kopf-einstellungen,#kopf-reise{flex:0 0 auto;} /* Restzeit rechtsbuendig und klein: sie steht zwischen Halteplatz und den beiden Knoepfen und darf die schmale Kopfzeile nicht sprengen. */ #kopf-rest{ color:var(--gedimmt); font-size:.6rem;line-height:1.2;text-align:left; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } main{ flex:1;overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:var(--messing-tief) transparent; } /* Reiterwechsel blendet ueber. Bewusst nur `opacity`: eine Transformation machte die Ansicht zum Bezugsrahmen fuer die fest positionierte Kreaturenkarte darin — und sie ist billig genug fuer die 950 Helixdex-Felder. */ .ansicht{padding:.8rem;position:relative;animation:ansicht-ein .24s ease-out both;} @keyframes ansicht-ein{from{opacity:0;}to{opacity:1;}} /* Der warme Schein, der frueher hinter dem schmalen Biom-Band lag, ist an das Panorama selbst gewandert (dessen box-shadow weiter unten): die Szene fuellt jetzt gut zwei Fuenftel des Bildschirms und traegt ihr Licht selbst nach unten in die Seite. */ .ansicht > *{position:relative;z-index:1;} /* ============================================================ Reiterleiste — der offene Reiter leuchtet ============================================================ */ #reiter{ display:grid;grid-template-columns:repeat(4,1fr); background:linear-gradient(180deg,#1c2724 0,#121b19 60%,#0c1413 100%); padding-bottom:var(--sicher-unten); box-shadow: 0 -1px 0 var(--messing-tief), 0 -2px 0 rgba(0,0,0,.6), 0 -10px 20px -10px rgba(0,0,0,.8); } #reiter button,#kopf-reise{ min-height:44px;border:0;background:transparent;color:var(--gedimmt); font-family:inherit;cursor:pointer; } /* Symbol ueber der Beschriftung. Die Hoehe von 44 Pixeln bleibt die Beruehrungsflaeche, das Symbol waechst nicht ueber sie hinaus. */ #reiter button{ position:relative;isolation:isolate; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.15rem;padding:.35rem 0 .3rem;font-size:.58rem; } /* Die Schriftfarbe wechselt hart, nicht weich: sie ist der Zustand ("dieser Reiter ist offen"), und ein Uebergang machte ihn fuer ein Fuenftel einer Sekunde mehrdeutig — waehrend der Blende trugen zwei Reiter fast dieselbe Farbe. Die Bewegung leistet stattdessen der Schein darunter und der Lichtstab darueber. */ #reiter svg{ width:21px;height:21px;fill:none;stroke:currentColor; stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round; transition:transform .12s ease; } /* Der Schein liegt hinter dem Symbol (z-index -1 im eigenen Stapel), nie darueber — sonst schluckte er die Beschriftung. */ #reiter button::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; opacity:0;transition:opacity .25s ease; background: radial-gradient(62% 118% at 50% 118%,rgba(200,162,78,.34) 0,transparent 72%), linear-gradient(180deg,rgba(200,162,78,.10) 0,transparent 60%); } #reiter button[aria-current="true"]::before{opacity:1;} /* Messing-Lichtstab an der Oberkante des offenen Reiters. */ #reiter button[aria-current="true"]::after{ content:"";position:absolute;left:20%;right:20%;top:0;height:2px; pointer-events:none;border-radius:1px; background:linear-gradient(90deg,transparent,var(--messing-hell),transparent); box-shadow:0 0 8px rgba(200,162,78,.85); } #reiter button[aria-current="true"]{color:var(--messing-hell);} #reiter button[aria-current="true"] svg{ filter:drop-shadow(0 0 5px rgba(242,215,156,.55)); } #reiter button:active svg{transform:translateY(1px);} /* ============================================================ Bauteile — Knoepfe, Felder, Kacheln ------------------------------------------------------------ Eine gemeinsame Materialbeschreibung fuer alles, was gedrueckt oder gelesen wird. Die Selektorenliste ist lang, weil die Ansichten ihre Elemente ohne eigene Klassen bauen; keiner der vorhandenen Namen wird dabei angetastet. ============================================================ */ #kopf-einstellungen,#kopf-reise, #karte button,#karte input,#dex-blatt button, .ansicht select,.ansicht > button, .route select,.route button, #einstellungen button,#einstellungen input,#einstellungen-import-knopf, #reise-frage button,#bericht button,#aufstieg button, .ergebnis,#brut-wunsch-plan,#bericht li{ background:var(--bauteil-fuellung); border:1px solid var(--kante); border-top-color:#44584e; border-radius:.35rem; box-shadow:var(--bauteil-schatten); color:var(--schrift); font-family:inherit;font-size:.9rem; transition:transform .09s ease,box-shadow .09s ease, background-color .15s ease,color .15s ease; } /* Druckfeedback: zwei Pixel Versatz, Wurf weg, Kante dunkler. Ohne das fuehlt sich jede Beruehrung wie ein Klick ins Leere an. */ #kopf-einstellungen:active,#kopf-reise:active, #karte button:active,#dex-blatt button:active, .ansicht > button:active,.route button:active, #einstellungen button:active,#reise-frage button:active, #bericht button:active,#aufstieg button:active{ transform:translateY(2px); box-shadow:var(--bauteil-gedrueckt); background:linear-gradient(180deg,var(--flaeche-tief) 0,#131d1a 100%); } button:disabled{ color:var(--gedimmt);opacity:.6;cursor:default; box-shadow:var(--bauteil-gedrueckt);transform:none; } :focus-visible{outline:2px solid var(--messing-hell);outline-offset:2px;} /* Auswahlfelder tragen einen eigenen Messingpfeil statt des Systemdreiecks — sonst faellt genau dort die Materialsprache auseinander. */ .ansicht select,.route select{ appearance:none;-webkit-appearance:none; padding:.55rem 2.1rem .55rem .7rem;text-align:left; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 L6 6.4 L11 1.6' fill='none' stroke='%23c8a24e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), var(--bauteil-fuellung); background-repeat:no-repeat,no-repeat; background-position:right .75rem center,0 0; background-size:11px auto,auto; } option{background:#18231f;color:var(--schrift);} /* ============================================================ Lager — die Szene ist der Bildschirm ============================================================ */ /* Die Biom-Hintergruende sind gemalte Illustrationen, keine Pixelgrafik. Deshalb hier ausdruecklich KEIN image-rendering:pixelated — hart skaliert wuerden die weichen Pinselflaechen krisselig. Die Pixelgrafik davor (Lagerbild und Kreaturen) liegt auf der Zeichenflaeche und behaelt es. Die Szene ist die Hauptflaeche des Bildschirms, kein Briefmarken- band: gut zwei Fuenftel der sichtbaren Hoehe, oben ohne Absatz an der Kopfzeile und ueber die volle Breite. Die negativen Raender heben genau die Polsterung der Ansicht auf — die Zeile wird damit so breit wie `main` und erzeugt keinen Querlauf. */ .ansicht[data-view="lager"]{padding-top:0;} #lager-panorama{ position:relative; height:clamp(200px,42dvh,420px); margin:0 -.8rem .85rem;border:0; /* Oben bricht die Szene glatt an der Kopfzeile ab, unten rundet sie sich — deshalb hier keine Fase (clip-path), sondern ein Radius. Ein clip-path schnitte ausserdem den Lichtwurf nach unten weg. */ clip-path:none;border-radius:0 0 1.05rem 1.05rem; background-size:cover;background-position:center; image-rendering:auto;overflow:hidden; /* Das Licht der Kulisse blutet nach unten in die Seite aus, statt an der Kante abzubrechen. */ box-shadow: 0 16px 34px -16px rgba(226,163,79,.30), 0 2px 0 rgba(8,14,13,.85); } /* Ein Vordergrundband als Lagerboden. Die zehn Biome sind gemalte Landschaften mit voellig verschiedenem unterem Rand — beim Schwarzwasserbecken steht dort Wasser, beim Voralpenbogen Geroell. Ohne eigenen Boden stuenden Lager und Kreaturen mal am Ufer, mal darin. Die 16 % stehen als `BAND` auch in view-lager.js: die Oberkante dieses Bandes IST die Grundlinie, auf der das Lagerbild sitzt. Wer die eine Zahl aendert, aendert die andere mit. */ #lager-panorama::before{ content:"";position:absolute;left:0;right:0;bottom:0;height:16%;z-index:1; background:linear-gradient(180deg, rgba(56,66,46,0) 0,rgba(48,58,40,.78) 34%,rgba(23,30,22,.97) 100%); /* Nur ein Hauch Kante: eine kraeftige Linie quer durch eine gemalte Landschaft liest sich als Fehler, nicht als Boden. */ box-shadow:inset 0 1px 0 rgba(200,162,78,.09); pointer-events:none; } /* Lagerbild und Kreaturen liegen als eine Flaeche vor der gemalten Kulisse. Hier gilt wieder image-rendering:pixelated (geerbt), denn das ist echte Pixelgrafik - anders als der Hintergrund darunter. */ #lager-kreaturen{ /* Ueber dem Lagerboden: Zelt und Tiere stehen darauf, nicht dahinter. */ position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2; } /* Erste Atmosphaerelage: das Feuer im Lagerbild flackert. Ein weicher warmer Lichtfleck, dessen Deckkraft und Groesse langsam schwanken. view-lager.js setzt nur den Mittelpunkt (und nur, wenn er sich wirklich verschoben hat) — die Bewegung leistet die CSS-Animation und kostet den Bildlauf deshalb nichts. */ .lager-feuer{ position:absolute;z-index:3;pointer-events:none; width:118px;height:118px;margin:-59px 0 0 -59px;border-radius:50%; background:radial-gradient(50% 50% at 50% 50%, rgba(255,205,120,.62) 0,rgba(233,143,55,.34) 34%, rgba(184,86,28,.13) 60%,transparent 78%); mix-blend-mode:screen;opacity:.5; animation:lager-feuer 3.9s ease-in-out infinite; } @keyframes lager-feuer{ 0% {opacity:.50;transform:scale(1);} 16% {opacity:.74;transform:scale(1.06);} 31% {opacity:.44;transform:scale(.96);} 49% {opacity:.82;transform:scale(1.09);} 66% {opacity:.54;transform:scale(1.01);} 83% {opacity:.68;transform:scale(1.05);} 100%{opacity:.50;transform:scale(1);} } @media (prefers-reduced-motion:reduce){ .lager-feuer{animation:none;opacity:.6;} } /* Zweite Atmosphaerelage: ein Dunstschleier, der die gemalte Kulisse mit den Pixelfiguren davor verbindet — Licht von oben, ein kuehler Schleier auf halber Hoehe, Dunkel im Vordergrund. Mehr nicht: zwei gute Lagen schlagen fuenf mittelmaessige. */ .lager-dunst{ position:absolute;inset:0;z-index:4;pointer-events:none; background: radial-gradient(115% 55% at 50% 2%,rgba(255,228,176,.17) 0,transparent 62%), linear-gradient(180deg,rgba(198,216,208,.10) 0,rgba(140,168,158,.05) 38%,transparent 58%), linear-gradient(0deg,rgba(9,15,13,.50) 0,rgba(9,15,13,.14) 18%,transparent 38%); } /* Fassung und Vignette liegen ueber allem, damit die Szene einen Rand hat und nicht ausfranst. */ #lager-panorama::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:5; border-radius:inherit; box-shadow: inset 0 0 0 1px rgba(200,162,78,.22), inset 0 0 0 2px rgba(8,14,13,.6), inset 0 14px 26px -20px rgba(0,0,0,.55), inset 0 -26px 34px -26px rgba(0,0,0,.5); } #lager-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;} /* Der Slot ist ein eingefasstes Bauteil: aussen die Messing- fassung (der Verlauf des Elements selbst), innen die Fuellung als ::before mit z-index -1 — es liegt damit ueber dem Rahmen, aber unter Sprite, Namen und Balken. `filter` traegt den Sockelschatten, der bei clip-path sonst verloren ginge, und macht das Element zugleich zum eigenen Stapelkontext. Flach und quer statt hoch und gestapelt: die Szene oben nimmt gut zwei Fuenftel des Bildschirms, der Rest muss zusammenruecken. Bild links, Name und die zwei Balken rechts daneben — mehr braucht ein Slot nicht. Die Beruehrungsflaeche bleibt mit rund 80 Punkten weit ueber den geforderten 44. */ .slot{ position:relative;isolation:isolate; min-height:76px;display:flex;flex-direction:row; align-items:center;justify-content:flex-start;gap:.6rem; clip-path:var(--ecken); background:linear-gradient(180deg,#8a6d38 0,#4a3d26 38%,#1b2521 100%); color:var(--schrift);font-family:inherit;padding:.5rem .6rem;cursor:pointer; filter:drop-shadow(0 3px 5px rgba(0,0,0,.55)); transition:transform .1s ease,filter .1s ease; } /* Name und die beiden Balken als eigene Spalte neben der Nische. Sie duerfen schrumpfen (min-width:0), sonst sprengte ein langer Name die Kachel, statt darin zu kuerzen. */ .slot-text{ flex:1 1 auto;min-width:0; display:flex;flex-direction:column;justify-content:center;gap:.34rem; } .slot::before{ content:"";position:absolute;inset:2px;z-index:-1;pointer-events:none; clip-path:var(--ecken); background:var(--bauteil-fuellung); box-shadow: inset 0 1px 0 var(--kante-licht), inset 0 -16px 20px -14px rgba(0,0,0,.8); } .slot:active{transform:translateY(2px);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));} .slot.leer{ justify-content:center;color:var(--gedimmt); font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; } /* Ein leeres Fach ist eine leere Bucht: die Messingfassung tritt zurueck, der Grund liegt tiefer. */ .slot.leer{ background:linear-gradient(180deg,#4b4028 0,#2a2c22 38%,#161e1c 100%); filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); } .slot.leer::before{ background:linear-gradient(180deg,#151f1c 0,#0f1816 100%); box-shadow:inset 0 3px 9px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.55); } .slot.beschaeftigt{opacity:.62;} .slot-name{ font-size:.82rem;font-weight:600;color:var(--schrift); max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; text-shadow:0 1px 0 rgba(0,0,0,.7); } /* Die Kreatur ist der Star: eigene Nische mit Rand und eigenem Grund, statt im Nichts zu schweben. */ .slot-nische,.portrait,.ergebnis-nische,.route-nische,.dex-nische{ position:relative;display:flex;align-items:center;justify-content:center; background:var(--nische-grund); box-shadow:var(--nische-schatten); border-radius:.28rem; } .slot-nische{width:64px;height:64px;flex:0 0 auto;} .portrait{width:112px;height:112px;flex:0 0 auto;border-radius:.4rem;} /* Dieselbe Nische, nur kleiner: in der Brut-Vorschau stehen vier davon untereinander, auf der Routenkarte eine neben dem Aufklappfeld. */ .ergebnis-nische{width:58px;height:58px;flex:0 0 auto;} .route-nische{width:64px;height:64px;flex:0 0 auto;} /* Ein Schattenteller unter der Kreatur — er setzt sie auf den Boden der Nische, statt sie darin schweben zu lassen. */ .slot-nische::after,.portrait::after, .ergebnis-nische::after,.route-nische::after,.dex-nische::after{ content:"";position:absolute;left:20%;right:20%;bottom:7%;height:9%; border-radius:50%;pointer-events:none; background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6) 0,transparent 72%); } .slot-nische canvas,.portrait canvas, .ergebnis-nische canvas,.route-nische canvas, .dex-nische canvas{position:relative;z-index:1;} /* Balken fuellen sich, sie springen nicht. Die Ansicht setzt die Breite erst im naechsten Bild, damit der Uebergang wirklich laeuft (view-lager.js). */ .balken{ width:100%;height:7px;border-radius:3px;overflow:hidden; background:linear-gradient(180deg,#050908 0,#0d1412 100%); box-shadow:inset 0 1px 3px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,231,183,.07); } .balken i{ display:block;height:100%;border-radius:3px; transition:width .55s cubic-bezier(.22,.61,.36,1); } .balken.satt i{ background:linear-gradient(180deg,var(--messing-hell) 0,var(--messing) 55%,#8a6a2a 100%); box-shadow:0 0 7px rgba(200,162,78,.5); } .balken.laune i{ background:linear-gradient(180deg,#9fd6cd 0,var(--tuerkis) 55%,#3d6f69 100%); box-shadow:0 0 7px rgba(111,168,160,.45); } .gedimmt{color:var(--gedimmt);font-size:.82rem;margin-top:.7rem;} /* Die Anhaengerzeile unter dem Slotgitter und die Ueberschrift der Wunschliste sind Beschriftungen, kein Fliesstext — sie bekommen deshalb die Geraetesprache. Hinweissaetze in denselben Ansichten behalten ihre Kleinschreibung, sie sind zum Lesen da. */ [data-view="lager"] > .gedimmt,#brut-labor > .gedimmt{ font-size:.6rem;letter-spacing:.14em;text-transform:uppercase; font-weight:700;color:#8c9a8d; font-variant-numeric:tabular-nums; padding-top:.6rem;border-top:1px solid rgba(200,162,78,.14); } /* Kurzes Aufleuchten des Slots nach Fuettern oder Spielen — sparsam und unter 600 ms, die App ist fuer kurze Besuche gebaut, nicht fuer eine Lightshow. */ .slot.aufleuchten::before{animation:slot-glut .52s ease-out;} @keyframes slot-glut{ 0% {box-shadow:inset 0 1px 0 var(--kante-licht), inset 0 0 0 2px rgba(242,215,156,.85), inset 0 0 22px rgba(226,163,79,.55);} 100%{box-shadow:inset 0 1px 0 var(--kante-licht), inset 0 -16px 20px -14px rgba(0,0,0,.8);} } /* Das aufsteigende Zeichen haengt am Koerper, nicht an der Karte: die Ansicht baut sich gleich darauf neu auf und raeumte es sonst mit weg. */ .wirkung{ position:fixed;z-index:40;pointer-events:none; font:700 1.4rem/1 var(--serif); color:var(--messing-hell); text-shadow:0 0 10px rgba(226,163,79,.8),0 1px 0 rgba(0,0,0,.7); animation:wirkung-auf .58s ease-out both; } @keyframes wirkung-auf{ 0% {opacity:0;transform:translate(-50%,-30%) scale(.7);} 25% {opacity:1;transform:translate(-50%,-55%) scale(1.05);} 100%{opacity:0;transform:translate(-50%,-160%) scale(1);} } /* ============================================================ Kreaturenkarte — ein Blatt, das einfaehrt ============================================================ */ /* Die Karte ist ein Blatt, das von unten ueber das Lager faehrt und die Kulisse mit dem Halteplatz stehen laesst — genau das verlangt Project.md fuer die ganze Oberflaeche ("UI bleibt eine Ebene ueber der Welt und verdeckt sie nicht unnoetig"). Der Schleier darunter (::before) nimmt der Welt das Gewicht und faengt zugleich jeden Tipp ab, der sonst hinter der Karte einen Slot getroffen haette. */ /* Die vier Handlungen stehen zu zweit nebeneinander statt untereinander. Als Stapel schob sich der letzte Knopf unter die Reiterleiste, und man musste scrollen, um „Zurueck" zu erreichen — auf dem Hauptweg der Bedienung ist das ein Fehler, kein Feinschliff. */ #karte-aktionen{ display:grid;grid-template-columns:1fr 1fr;gap:.5rem; width:100%;max-width:20rem;margin-top:.2rem; } #karte{ position:fixed;z-index:10; inset:11.5rem .6rem calc(3.4rem + var(--sicher-unten)); clip-path:var(--ecken); background: var(--koernung), radial-gradient(96% 34% at 50% 0,rgba(226,163,79,.16) 0,transparent 64%), linear-gradient(180deg,#7a6132 0,#3b3122 3px,#26332e 3px, #1b2724 12%,#141e1c 62%,#0d1616 100%); padding:.8rem .8rem .9rem; display:flex;flex-direction:column;align-items:center;gap:.34rem; overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:var(--messing-tief) transparent; } #karte::before{ content:"";position:fixed;inset:0;z-index:-1; background: radial-gradient(120% 80% at 50% 14%,rgba(8,13,14,.26) 0,rgba(4,7,8,.66) 100%); } /* Nur beim Oeffnen einfahren — nach Fuettern, Spielen oder Umsetzen wird die Karte neu aufgebaut, und ein Blatt, das bei jedem Klick von unten hereinfaehrt, waere Zappeln. */ #karte.einfahrt{animation:blatt-ein .26s cubic-bezier(.2,.85,.3,1) both;} @keyframes blatt-ein{ from{opacity:0;transform:translateY(2.2rem);} to {opacity:1;transform:translateY(0);} } #karte h2,#dex-blatt h2{ margin-top:.1rem;color:var(--schrift); font-size:1.3rem;text-align:center; } #karte h2::after,#dex-blatt h2::after{ content:"";display:block;width:4.5rem;height:2px;margin:.45rem auto 0; background:linear-gradient(90deg,transparent,var(--messing),transparent); box-shadow:0 0 6px rgba(200,162,78,.6); } #karte .gedimmt,#dex-blatt .gedimmt{margin-top:0;font-size:.78rem;letter-spacing:.03em;} #karte button,#dex-blatt button{min-height:44px;width:100%;max-width:20rem;font-size:.76rem;flex:0 0 auto;} #karte button:last-of-type{margin-top:.15rem;color:var(--gedimmt);} /* Steckbrief und Namensfeld: eine Spalte in Kartenbreite, damit die Zeilen linksbuendig untereinander stehen statt mittig zu flattern. Beschriftung gedimmt und gesperrt, Wert hell — so ist der Steckbrief in einem Blick zu ueberfliegen. */ .karte-zeile{ width:100%;max-width:20rem;color:var(--gedimmt); font-size:.7rem;letter-spacing:.07em; padding:.26rem .1rem; border-bottom:1px solid rgba(200,162,78,.13); } .karte-zeile b{ color:var(--messing-hell);font-weight:700; font-size:.86rem;letter-spacing:.01em; } #karte label.karte-zeile{border-bottom:0;padding-bottom:0;} #karte input{ display:block;min-height:44px;width:100%;margin-top:.35rem; padding:.5rem .7rem;font-size:.95rem; box-shadow:var(--bauteil-gedrueckt); background:linear-gradient(180deg,#131d1b 0,#18231f 100%); } #karte input::placeholder{color:#6f7d70;} /* ============================================================ Brut — Ei-Faecher, Vorschau, Labor ============================================================ */ #brut-eier{display:flex;gap:.65rem;margin-bottom:.85rem;} .ei-slot{ position:relative;isolation:isolate; flex:1;min-height:134px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:.4rem; clip-path:var(--ecken); background:linear-gradient(180deg,#8a6d38 0,#4a3d26 38%,#1b2521 100%); color:var(--gedimmt);padding:.5rem; font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; filter:drop-shadow(0 3px 5px rgba(0,0,0,.55)); } .ei-slot::before{ content:"";position:absolute;inset:2px;z-index:-1;pointer-events:none; clip-path:var(--ecken); background:var(--nische-grund); box-shadow:inset 0 3px 8px rgba(0,0,0,.75), inset 0 -14px 18px -14px rgba(0,0,0,.7); } .ei-slot canvas{position:relative;z-index:1;} .ei-rest{font-size:.6rem;color:var(--messing);letter-spacing:.11em;} #brut-vorrat{font-size:.76rem;margin:.2rem 0 .8rem;} /* Elternwahl: Aufklappfeld links, Portrait rechts. Das