/* ===== Amalias Welt – Portugal-Theme (überschreibt style.css) ===== */
:root {
    --azul: #1d4e9e;
    --azul-dunkel: #123a7a;
    --azul-hell: #e8f0fb;
    --creme: #fbf7ef;
    --pt-gruen: #046a38;
    --pt-rot: #da291c;
    --pt-gold: #ffcc29;
    --terracotta: #d9723c;
    --rosa: #ff5fa8;
    --text: #1f2a44;
    --text-hell: #5b6480;
    --radius: 22px;
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
}

html { -webkit-text-size-adjust: 100%; }
body { color: var(--text); min-height: 100dvh; overscroll-behavior-y: none; }
h1, h2, h3, .dash-gruss-text, .pt-titel { font-family: 'Fredoka', 'Nunito', sans-serif; }

/* --- Azulejo-Hintergrund --- */
.azulejo-bg {
    background-color: var(--creme);
    background-image: none;
}
.azulejo-bg::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%231d4e9e' stroke-width='1.6' opacity='.13'%3E%3Crect x='.8' y='.8' width='78.4' height='78.4'/%3E%3Cpath d='M40 8 C48 24 56 32 72 40 C56 48 48 56 40 72 C32 56 24 48 8 40 C24 32 32 24 40 8Z'/%3E%3Ccircle cx='40' cy='40' r='7'/%3E%3Cpath d='M0 12 A12 12 0 0 0 12 0 M68 0 A12 12 0 0 0 80 12 M80 68 A12 12 0 0 0 68 80 M12 80 A12 12 0 0 0 0 68'/%3E%3C/g%3E%3Ccircle cx='40' cy='40' r='3' fill='%23ffcc29' opacity='.35'/%3E%3C/svg%3E");
    background-size: 80px 80px;
}

/* --- Buttons --- */
.btn { min-height: 52px; border-radius: 16px; font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 600; letter-spacing: .2px; }
.btn-rosa { background: linear-gradient(135deg, var(--rosa), #ff8cc3); box-shadow: 0 5px 0 #d23c84; }
.btn-rosa:active { box-shadow: 0 2px 0 #d23c84; transform: translateY(3px); }
.btn-gruen { background: linear-gradient(135deg, var(--pt-gruen), #0b8a4b); box-shadow: 0 5px 0 #034d28; }
.btn-rot { background: linear-gradient(135deg, var(--pt-rot), #f0513f); box-shadow: 0 5px 0 #9e1c12; }
.btn-gelb { background: linear-gradient(135deg, var(--pt-gold), #ffe07a); box-shadow: 0 5px 0 #c99a00; }

/* --- Gemeinsamer Flaggenstreifen --- */
.pt-flaggenband { display: flex; height: 6px; }
.pt-flaggenband span:first-child { flex: 2; background: var(--pt-gruen); }
.pt-flaggenband span:last-child { flex: 3; background: var(--pt-rot); }

/* ===== Login ===== */
.login-container {
    min-height: 100dvh;
    padding: calc(16px + var(--sat)) 16px calc(16px + var(--sab));
}
.login-box {
    position: relative;
    max-width: 380px;
    padding: 30px 22px 22px;
    border: none;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 0 0 6px #fff, 0 0 0 9px var(--azul), 0 18px 50px rgba(18, 58, 122, .25);
    overflow: hidden;
}
.login-box::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
    background: linear-gradient(90deg, var(--pt-gruen) 0 40%, var(--pt-rot) 40% 100%);
}
.login-box .portugal-wappen { font-size: 3.4rem; margin-bottom: 4px; }
.login-box h1 { color: var(--azul); font-size: 2rem; font-weight: 700; }
.login-box .untertitel { margin-bottom: 18px; font-weight: 700; }
.login-box .portugal-streifen { display: none; }
.pin-label { color: var(--azul); font-size: 1.05rem; }
.pin-punkte span { border-color: var(--azul); }
.pin-punkte span.voll { background: var(--azul); }
.pin-tasten { grid-template-columns: repeat(3, minmax(64px, 78px)); gap: 12px 18px; }
.pin-taste {
    width: 100%; height: auto; aspect-ratio: 1;
    font-family: 'Fredoka', 'Nunito', sans-serif; font-size: 1.9rem; font-weight: 600;
    color: var(--azul-dunkel); background: var(--azul-hell);
    box-shadow: 0 4px 0 #b9cbea; touch-action: manipulation;
}
.pin-taste:active { background: #cddcf5; box-shadow: 0 1px 0 #b9cbea; }
.pin-loeschen { background: transparent; box-shadow: none; color: var(--pt-rot); }
.fehler-meldung { background: #fff1ef; color: var(--pt-rot); border-color: #ffd1cc; border-radius: 14px; }

/* ===== Dashboard ===== */
.dash-header {
    background: linear-gradient(160deg, var(--azul) 0%, var(--azul-dunkel) 100%);
    padding-top: var(--sat);
}
.dash-header-bg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.3' opacity='.14'%3E%3Cpath d='M28 4 C34 16 40 22 52 28 C40 34 34 40 28 52 C22 40 16 34 4 28 C16 22 22 16 28 4Z'/%3E%3Ccircle cx='28' cy='28' r='5'/%3E%3Cpath d='M0 9 A9 9 0 0 0 9 0 M47 0 A9 9 0 0 0 56 9 M56 47 A9 9 0 0 0 47 56 M9 56 A9 9 0 0 0 0 47'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 56px 56px;
}
.dash-nav { padding: 10px 14px 0; }
.dash-flagge { font-size: 1.6rem; }
.dash-nav-link { width: 44px; height: 44px; font-size: 1.15rem; background: rgba(255,255,255,.16); }
.dash-gruss { padding: 8px 20px 44px; }
.dash-gruss-text { font-size: clamp(1.7rem, 7vw, 2.4rem); font-weight: 700; }
.dash-name { color: var(--pt-gold); }
.dash-gruss-sub { font-size: 1rem; opacity: .9; margin-top: 2px; }
.dash-gruss-de { display: block; font-size: .8rem; opacity: .7; font-weight: 600; }
.dash-deko { font-size: 1.5rem; letter-spacing: 8px; margin-top: 10px; }
.dash-deko span { display: inline-block; animation: schaukeln 3s ease-in-out infinite; }
.dash-deko span:nth-child(2) { animation-delay: .4s; } .dash-deko span:nth-child(3) { animation-delay: .8s; }
.dash-deko span:nth-child(4) { animation-delay: 1.2s; } .dash-deko span:nth-child(5) { animation-delay: 1.6s; }
@keyframes schaukeln { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-4px) rotate(6deg); } }
/* Wellen wie die Calçada am Rossio */
.dash-header-welle {
    height: 30px; border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='30' viewBox='0 0 120 30'%3E%3Cpath d='M0 14 Q30 0 60 14 T120 14 V30 H0Z' fill='%23fbf7ef'/%3E%3Cpath d='M0 20 Q30 6 60 20 T120 20' fill='none' stroke='%231d4e9e' stroke-width='3' opacity='.25'/%3E%3C/svg%3E") repeat-x bottom / 120px 30px;
}

.dash-main { padding: 12px 14px calc(20px + var(--sab)); max-width: 820px; }
.dash-titel { font-family: 'Fredoka', 'Nunito', sans-serif; font-size: 1.25rem; font-weight: 600; color: var(--azul); }
.dash-titel-sub { font-family: 'Nunito', sans-serif; font-size: .8rem; font-weight: 700; color: var(--text-hell); }

/* Palavra do dia */
.dash-palavra {
    display: flex; align-items: center; gap: 14px;
    margin: -4px 0 22px; padding: 14px 16px;
    background: #fff; border-radius: var(--radius);
    border: 2px solid var(--azul-hell);
    box-shadow: 0 6px 18px rgba(29, 78, 158, .08);
}
.dash-palavra-emoji { font-size: 2.4rem; flex-shrink: 0; }
.dash-palavra-label { font-size: .72rem; font-weight: 800; color: var(--terracotta); text-transform: uppercase; letter-spacing: .6px; }
.dash-palavra-wort { font-family: 'Fredoka', 'Nunito', sans-serif; font-size: 1.5rem; font-weight: 600; color: var(--azul); line-height: 1.1; }
.dash-palavra-de { font-size: .9rem; color: var(--text-hell); font-weight: 700; }

/* App-Kacheln als Fliesen */
.dash-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-karte {
    background: #fff;
    border: none; border-radius: var(--radius);
    padding: 18px 10px 14px; gap: 8px;
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--azul-hell), 0 6px 18px rgba(29, 78, 158, .1);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    touch-action: manipulation;
}
.dash-karte:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #c9d9f3, 0 12px 26px rgba(29, 78, 158, .16); }
.dash-karte:active { transform: scale(.96); }
.dash-karte-icon { width: 64px; height: 64px; border-radius: 20px; font-size: 2.1rem; }
.dash-karte-text h3 { font-size: 1.1rem; font-weight: 600; color: var(--azul-dunkel); }
.dash-karte-text p { font-size: .82rem; }

/* Steckbrief: eine Karte wie ein Postkarten-Steckbrief, bewusst keine Kacheln */
.dash-steckbrief {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px;
    padding: 6px 18px; background: #fffdf8;
    border-radius: 16px; border: 2px dashed #e3c9a8;
    box-shadow: 0 3px 10px rgba(0,0,0,.04);
}
.dash-steck-item {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 10px 0; text-align: left;
    background: none; border: none; border-bottom: 1px dotted #e8dcc8; border-radius: 0;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    cursor: default;
}
.dash-steck-item:hover { transform: none; }
.dash-steck-emoji { font-size: 1.2rem; margin: 0; filter: none; }
.dash-steck-label { order: 0; font-size: .7rem; color: var(--terracotta); }
.dash-steck-label::after { content: ":"; }
.dash-steck-wert { order: 1; font-size: .98rem; margin: 0; }
.dash-steck-item:nth-last-child(-n+2) { border-bottom: none; }

.dash-footer-streifen { max-width: 160px; height: 6px; border-radius: 3px; }
.dash-footer-gruen { background: var(--pt-gruen); } .dash-footer-rot { background: var(--pt-rot); }
.dash-footer p { font-size: .85rem; opacity: .8; }

@media (min-width: 600px) {
    .dash-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1024px) { .dash-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 350px) {
    .dash-karte-icon { width: 54px; height: 54px; font-size: 1.8rem; }
    .dash-karte-text h3 { font-size: 1rem; }
    .dash-steckbrief { grid-template-columns: 1fr; }
    .dash-steck-item:nth-last-child(2) { border-bottom: 1px dotted #e8dcc8; }
}

/* ===== App-Seiten ===== */
.app-header {
    background: linear-gradient(135deg, var(--azul), var(--azul-dunkel));
    padding: calc(10px + var(--sat)) 14px 12px;
    box-shadow: 0 4px 0 var(--pt-gold), 0 8px 20px rgba(18, 58, 122, .25);
}
.app-header .zurueck {
    width: 44px; height: 44px; justify-content: center; border-radius: 50%;
    background: rgba(255,255,255,.16); font-size: 1.3rem; flex-shrink: 0;
}
.app-header h1 { font-size: 1.3rem; font-weight: 600; }
.app-header .punkte { background: var(--pt-gold); color: var(--azul-dunkel); font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== Symbole statt Text (Amalia kann noch nicht lesen) ===== */
.dash-karte-icon { width: 84px; height: 84px; border-radius: 26px; font-size: 3rem; }
.dash-karte-bild { font-size: 1.3rem !important; color: var(--text) !important; letter-spacing: 2px; margin-top: 2px; }
.dash-karte-text h3 { font-size: .95rem; }
.dash-karte.gewaehlt { transform: scale(1.06); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--pt-gold), 0 12px 26px rgba(29,78,158,.2); }
.dash-karte.gewaehlt .dash-karte-icon { animation: huepfen .45s ease-in-out 2; }
@keyframes huepfen { 50% { transform: translateY(-8px) scale(1.1); } }
/* Kachelfarben kräftiger, damit Apps an der Farbe erkennbar sind */
.dash-mathe { background: #fff8d6; } .dash-arena { background: #ffe9d1; } .dash-pt { background: #e2f6e6; }
.dash-acentos { background: #f1e6fb; } .dash-buch { background: #f8ecdb; } .dash-abenteuer { background: #ffe4f1; }

.dash-vorlesen, .dash-palavra-ton {
    width: 52px; height: 52px; border-radius: 50%; border: none; font-size: 1.5rem;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: var(--pt-gold); box-shadow: 0 4px 0 #c99a00; cursor: pointer; touch-action: manipulation;
}
.dash-vorlesen { margin-bottom: 8px; animation: huepfen 2s ease-in-out infinite; }
.dash-vorlesen:active { transform: translateY(3px); box-shadow: 0 1px 0 #c99a00; }
.dash-palavra { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.dash-palavra > div { flex: 1; }
.dash-palavra-emoji { font-size: 3.4rem; }
.dash-palavra:active .dash-palavra-ton { transform: translateY(3px); box-shadow: 0 1px 0 #c99a00; }
@media (max-width: 350px) { .dash-karte-icon { width: 70px; height: 70px; font-size: 2.5rem; } }