:root{
    --bg:#FFF8EC; --bg-alt:#FFF3E0; --card:#FFFFFF; --card-2:#FFF3E4;
    --text:#2D2A26; --text-dim:#6b665d; --text-faint:#a39c8f;
    --accent:#FF9A3C; --accent-dark:#7A4310;
    --violet:#8B6FE0; --violet-dark:#EFE7FB;
    --mint:#3BA26A; --mint-dark:#DFF6EA;
    --red:#E24B4A; --red-dark:#FCE2E1;
    --border:rgba(45,42,38,0.10);
    --radius:20px;
    --serif:'Comfortaa',sans-serif; --sans:'Inter',sans-serif; --mono:'IBM Plex Mono',monospace;
  }
  html[lang="el"]{
    --sans:'Inter',sans-serif; --serif:'Comfortaa',sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg); color:var(--text); font-family:var(--sans);
    min-height:100vh; line-height:1.5;
  }
  a{color:inherit;}
  button{font-family:var(--sans); cursor:pointer;}
  input,select{font-family:var(--sans);}
  ::selection{background:var(--accent); color:#241804;}

  #app{max-width:1080px; margin:0 auto; padding:0 24px 80px;}

  /* ---- top bar ---- */
  header.topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 0; border-bottom:1px solid var(--border); margin-bottom:8px;
    flex-wrap:wrap; gap:12px;
    position:sticky; top:0; z-index:60; background:var(--bg);
  }
  .brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:22px; font-weight:600; letter-spacing:.2px; text-decoration:none; cursor:pointer;}
  .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent); box-shadow:0 0 12px var(--accent);}
  nav.mainnav{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
  nav.mainnav a, nav.mainnav button.navbtn{
    background:none; border:none; color:var(--text-dim); font-size:14.5px; padding:8px 12px;
    border-radius:8px; text-decoration:none;
  }
  nav.mainnav a:hover, nav.mainnav button.navbtn:hover{background:var(--card); color:var(--text);}
  nav.mainnav a.active{color:var(--text); background:var(--card);}
  select#langSwitch{
    background:var(--card); color:var(--text); border:1px solid var(--border);
    border-radius:8px; padding:7px 10px; font-size:13px;
  }
  .head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap;}
  .head h2{margin:0;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:13px 24px; border-radius:100px; border:none;
    background:var(--card); color:var(--text); font-family:var(--serif); font-size:15px; font-weight:700;
    transition:transform .12s ease, box-shadow .12s ease;
    box-shadow:0 8px 20px rgba(45,42,38,.08);
  }
  .btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(45,42,38,.12);}
  .btn:active{transform:translateY(0); box-shadow:0 4px 10px rgba(45,42,38,.1);}
  .btn.primary{background:var(--accent); color:#fff; box-shadow:0 10px 24px rgba(255,154,60,.35);}
  .btn.primary:hover{background:#FF8A1F; box-shadow:0 12px 28px rgba(255,154,60,.4);}
  .btn.ghost{background:var(--card-2); border:2px solid var(--accent); color:var(--accent-dark); box-shadow:none;}
  .btn.ghost:hover{background:var(--accent); color:#fff;}
  .btn.ghost:hover{background:var(--bg-alt);}
  .btn.small{padding:7px 14px; font-size:13px;}
  .btn.full{width:100%;}
  .btn.danger{background:transparent;border-color:var(--red); color:var(--red);}

  /* ---- hero ---- */
  .hero{position:relative; padding:64px 0 40px; overflow:hidden; border-radius:var(--radius); display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  .hero-mascot{position:relative; z-index:2; flex-shrink:0; margin:0 20px 10px 0; display:flex; flex-direction:column; align-items:center;}
  .mascot-bubble{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:8px 14px; font-size:12.5px; color:var(--text-dim); margin-top:-6px; max-width:150px; text-align:center; box-shadow:0 6px 18px rgba(0,0,0,.2);}
  @media(max-width:900px){ .hero-mascot{display:none;} }
  .hero canvas{position:absolute; inset:0; width:100%; height:100%; opacity:.55;}
  .hero-inner{position:relative; z-index:2; max-width:640px;}
  .eyebrow{font-family:var(--mono); font-size:12.5px; color:var(--accent); letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px;}
  h1.hero-title{font-family:var(--serif); font-size:46px; line-height:1.08; font-weight:600; margin:0 0 18px; letter-spacing:-.01em;}
  h1.hero-title em{color:var(--accent); font-style:normal;}
  .hero-sub{color:var(--text-dim); font-size:16.5px; max-width:520px; margin:0 0 30px;}
  .hero-cta{display:flex; gap:12px; flex-wrap:wrap;}
  .hero-stats{display:flex; gap:32px; margin-top:44px; flex-wrap:wrap;}
  .hero-stat b{display:block; font-family:var(--mono); font-size:26px; color:var(--accent);}
  .hero-stat span{font-size:12.5px; color:var(--text-faint);}

  /* ---- generic sections ---- */
  section{margin:56px 0;}
  h2.section-title{font-family:var(--serif); font-size:28px; font-weight:600; margin:0 0 8px;}
  .section-sub{color:var(--text); font-size:19px; font-weight:700; line-height:1.4; margin:0 0 28px; max-width:620px;}

  .card{background:var(--card); border:none; border-radius:var(--radius); padding:22px; box-shadow:0 8px 24px rgba(45,42,38,.06);}
  .grid{display:grid; gap:18px;}
  .grid.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
  .grid.g4{grid-template-columns:repeat(auto-fit,minmax(210px,300px)); justify-content:center;}

  .area-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:32px;}
  .area-card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:26px 22px; text-align:center; cursor:pointer; transition:transform .15s, box-shadow .15s;}
  .area-card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.08);}
  .area-icon{width:64px; height:64px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; background:var(--area-a);}
  .area-card h3{margin:0 0 8px; font-family:var(--serif); font-size:19px;}
  .area-card p{margin:0 0 14px; color:var(--text-dim); font-size:13.5px; line-height:1.5;}
  .area-tags{display:flex; gap:6px; justify-content:center; flex-wrap:wrap;}
  .game-card{position:relative; display:flex; flex-direction:column; gap:0; overflow:hidden; padding:0;}
  .game-card .thumb{height:118px; display:flex; align-items:center; justify-content:center; font-size:44px; position:relative; overflow:hidden;}
  .game-card .thumb svg{width:100%; height:100%; position:absolute; inset:0;}
  .game-card .thumb span{position:relative; z-index:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,.12));}
  .game-card .body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1;}
  .game-card .body .text{display:flex; flex-direction:column; gap:8px; flex:1;}
  .game-card h3{font-family:var(--serif); font-size:18px; margin:0; font-weight:600;}
  .game-card p{color:var(--text-dim); font-size:13.4px; margin:0; flex:1; line-height:1.45;}
  .game-card .tags{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 4px;}
  .badge{display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:20px; background:var(--mint-dark); color:var(--mint); position:absolute; top:12px; right:12px; z-index:2;}
  .cat-tabs{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 18px;}
  .cat-tab{background:var(--card-2); border:1px solid var(--border); color:var(--text-dim); font-size:13.5px; padding:8px 16px; border-radius:20px; transition:all .15s;}
  .cat-tab:hover{color:var(--text);}
  .cat-tab.active{background:var(--violet); border-color:var(--violet); color:#fff;}
  .cat-pill{display:inline-block; align-self:flex-start; font-size:11px; padding:2px 9px; border-radius:12px; font-family:var(--mono);}
  .diff-pill{display:inline-block; font-size:11px; padding:2px 9px; border-radius:12px; font-family:var(--mono); background:var(--card-2); color:var(--text-dim); border:1px solid var(--border);}
  .pill{display:inline-block; font-size:13px; font-weight:700; padding:8px 16px; border-radius:100px; background:var(--card-2); color:var(--text-dim);}
  .dur-pill{display:inline-block; font-size:11px; padding:2px 9px; border-radius:12px; font-family:var(--mono); background:var(--card-2); color:var(--text-dim); border:1px solid var(--border);}

  /* ---- games toolbar ---- */
  .games-toolbar{display:flex; flex-wrap:wrap; gap:16px; align-items:end; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 22px; margin:14px 0 18px;}
  .toolbar-field{display:flex; flex-direction:column; gap:6px;}
  .toolbar-field label{font-size:12px; font-weight:600; color:var(--text-dim);}
  .toolbar-field input[type=text], .toolbar-field select{border:1px solid var(--border); border-radius:9px; padding:9px 12px; font-size:13.8px; background:var(--bg); color:var(--text); min-width:180px;}
  .toolbar-field.grow{flex:1; min-width:220px;}
  .toolbar-field.grow input{width:100%;}
  .view-toggle{display:flex; border:1px solid var(--border); border-radius:9px; overflow:hidden;}
  .view-toggle button{background:var(--bg); border:none; padding:9px 14px; font-size:13px; color:var(--text-dim);}
  .view-toggle button.active{background:var(--violet); color:#fff;}
  .results-count{font-size:13px; color:var(--text-faint); margin:0 0 14px;}

  .grid.glist{grid-template-columns:1fr; gap:12px;}
  .glist .game-card{flex-direction:row; align-items:stretch;}
  .glist .game-card .thumb{width:96px; height:auto; flex:0 0 96px; font-size:30px;}
  .glist .game-card .body{flex-direction:row; align-items:center; gap:18px; padding:14px 18px;}
  .glist .game-card .body .text{flex:1; display:flex; flex-direction:column; gap:6px;}
  .glist .game-card p{display:none;}
  .glist .game-card .tags{margin:0;}

  .science-box{display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap;}
  .science-box .num{font-family:var(--mono); font-size:13px; color:var(--violet); min-width:30px;}
  .science-item{display:flex; gap:14px; align-items:flex-start;}
  .science-item p{color:var(--text-dim); font-size:14px; margin:4px 0 0;}
  .science-item h4{margin:0; font-size:15.5px; font-family:var(--sans); font-weight:600;}
  .note{font-size:12.5px; color:var(--text-faint); border-top:1px solid var(--border); margin-top:24px; padding-top:16px; line-height:1.6;}

  .ad-slot{
    border:1px dashed var(--border); border-radius:10px; padding:18px; text-align:center;
    color:var(--text-faint); font-size:12.5px; font-family:var(--mono); background:rgba(54,47,74,0.035);
    max-width:100%; overflow:hidden; box-sizing:border-box;
  }
  .ad-slot iframe, .ad-slot img, .ad-slot ins, .ad-slot > div{ max-width:100%; }
  .ad-side{
    position:fixed; top:50%; transform:translateY(-50%); width:160px; height:600px;
    overflow:hidden; z-index:40; padding:8px;
  }
  .ad-side-left{left:12px;}
  .ad-side-right{right:12px;}
  @media (max-width: 1400px){ .ad-side{display:none;} }
  .ad-headertop{margin:14px 0 0;}
  .ad-footer{margin:40px 0 0;}

  footer{border-top:1px solid var(--border); margin-top:70px; padding-top:24px; color:var(--text-faint); font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
  .footer-legal a{color:var(--text-faint); text-decoration:underline;}
  .footer-legal a:hover{color:var(--text-dim);}
  .legal-page{max-width:720px; margin:0 auto;}
  .legal-body{padding:28px 30px; line-height:1.7;}
  .legal-body h3{margin:26px 0 8px; font-size:16px;}
  .legal-body p{color:var(--text-dim); margin:0 0 4px;}
  #cookieBanner{position:fixed; left:0; right:0; bottom:0; z-index:200; background:var(--card); border-top:1px solid var(--border); padding:16px 24px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:space-between; box-shadow:0 -8px 24px rgba(0,0,0,.15);}
  #cookieBanner p{margin:0; font-size:13px; color:var(--text-dim); max-width:560px;}
  #cookieBanner .actions{display:flex; gap:10px; flex-shrink:0;}

  /* ---- auth ---- */
  .authwrap{max-width:400px; margin:40px auto;}
  .authwrap h2{font-family:var(--serif); font-size:26px; margin:0 0 6px;}
  .authwrap p.sub{color:var(--text-dim); font-size:14px; margin:0 0 26px;}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:13px; color:var(--text-dim); margin-bottom:6px;}
  .field input{
    width:100%; background:var(--bg-alt); border:1px solid var(--border); color:var(--text);
    padding:11px 13px; border-radius:9px; font-size:14.5px;
  }
  .field input:focus{outline:2px solid var(--accent); outline-offset:1px;}
  .error{color:var(--red); font-size:13px; margin:-6px 0 14px;}
  .switch-line{text-align:center; margin-top:18px; font-size:13.5px; color:var(--text-dim);}
  .switch-line button{background:none;border:none;color:var(--accent); font-size:13.5px; text-decoration:underline; padding:0;}

  /* ---- dashboard ---- */
  .dash-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom:30px;}
  .dash-head h2{font-family:var(--serif); font-size:30px; margin:0;}
  .stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:34px;}
  .stat-card{background:var(--bg-alt); border:1px solid var(--border); border-radius:12px; padding:16px 18px;}
  .stat-card b{display:block; font-family:var(--mono); font-size:24px; color:var(--accent);}
  .stat-card span{font-size:12.5px; color:var(--text-faint);}

  .lb-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  table.lb{width:100%; border-collapse:collapse; font-size:14px;}
  table.lb th{text-align:left; color:var(--text-faint); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.05em; padding:8px 10px; border-bottom:1px solid var(--border);}
  table.lb td{padding:11px 10px; border-bottom:1px solid var(--border);}
  table.lb tr.me{background:rgba(255,180,84,0.18);}
  .rank-1{color:var(--accent); font-family:var(--mono);}

  /* ---- game frame ---- */
  .gameframe{max-width:640px; margin:0 auto;}
  .gameframe .head{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px;}
  .gameframe h2{font-family:var(--serif); font-size:26px; margin:0;}
  .hud{display:flex; gap:22px; font-family:var(--mono); font-size:15.5px; color:var(--text-dim); margin-bottom:20px; flex-wrap:wrap; font-weight:600;}
  .hud b{color:var(--text);}
  .board{display:grid; gap:14px; justify-content:center;}
  .cell{
    aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    background:var(--card); border:none; border-radius:18px; font-size:30px;
    user-select:none; transition:transform .12s, box-shadow .12s;
    box-shadow:0 6px 16px rgba(45,42,38,.08);
  }
  .cell.clickable:hover{transform:translateY(-3px); box-shadow:0 10px 22px rgba(45,42,38,.12);}
  .cell.clickable:active{transform:translateY(0); box-shadow:0 3px 8px rgba(45,42,38,.1);}
  .cell.flipped, .cell.matched{background:var(--violet);}
  .cell.matched{background:var(--mint); opacity:.85;}
  .cell.active{background:var(--accent); color:#fff;}
  .cell.correct{background:var(--mint);}
  .cell.wrong{background:var(--red);}
  .cell.vs-target{background:var(--accent);}
  .ai-analysis-box{background:var(--card-2); border-radius:10px; padding:12px 14px; line-height:1.5;}
  .ai-tag{color:var(--accent); font-weight:600;}
  .digit-display{font-family:var(--mono); font-size:52px; text-align:center; letter-spacing:.15em; margin:40px 0; color:var(--accent);}
  .gng-circle{width:160px; height:160px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; color:#fff; cursor:pointer; user-select:none; transition:transform .08s;}
  .gng-circle:active{transform:scale(.94);}
  .gng-idle{background:#3a3a55;}
  .gng-go{background:#2fae5c;}
  .gng-nogo{background:#c0392b;}
  .word-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px;}
  .word-chip{padding:12px; text-align:center; border-radius:9px; border:1px solid var(--border); background:var(--card); font-size:14px;}
  .word-chip.sel{background:var(--violet-dark); border-color:var(--violet);}
  .word-chip.correct{background:var(--mint-dark); border-color:var(--mint);}
  .word-chip.miss{background:var(--red-dark); border-color:var(--red);}

  /* ---- word list game: plain card with a colored frame ---- */
  .wchip{
    padding:16px 8px; text-align:center; border-radius:14px; cursor:default;
    background:var(--card); color:var(--text); font-weight:700; font-size:15px; font-family:var(--serif);
    display:flex; align-items:center; justify-content:center; min-height:52px;
    word-break:break-word; overflow-wrap:break-word; hyphens:auto; line-height:1.2;
    border:3px solid var(--accent);
    box-shadow:0 6px 14px rgba(45,42,38,.1);
    animation:popScale .35s ease; transition:transform .12s ease, box-shadow .12s ease;
  }
  .wchip.clickable{cursor:pointer;}
  .wchip.clickable:hover{transform:translateY(-3px);}
  .wchip.sel{background:var(--violet-dark);}
  .wchip.correct{background:var(--mint-dark); animation:popScale .3s ease;}
  .wchip.miss{background:var(--red-dark); animation:shakeX .35s ease;}

  /* ---- category sort: multi-category (animal / plant / food / vehicle) ---- */
  .cs-card{
    background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
    border-radius:22px; padding:44px 20px; margin:10px 0 28px; text-align:center;
    box-shadow:0 10px 26px rgba(45,42,38,.1);
  }
  .cs-word{font-family:var(--serif); font-weight:700; font-size:42px; color:var(--text); animation:popScale .3s ease;}
  .cs-choices{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; max-width:560px; margin:0 auto;}
  .cs-btn{
    padding:30px 18px; border:none; border-radius:20px; cursor:pointer;
    color:#fff; font-family:var(--serif); font-weight:700; font-size:21px;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.25);
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .cs-btn .cs-icon{font-size:40px;}
  .cs-btn:hover:not(:disabled){transform:translateY(-3px);}
  .cs-btn:disabled{cursor:default;}
  .cs-btn.correct{outline:5px solid var(--mint); outline-offset:3px; animation:popScale .3s ease;}
  .cs-btn.wrong{outline:5px solid var(--red); outline-offset:3px; animation:shakeX .35s ease;}
  @media (max-width:480px){
    .cs-choices{grid-template-columns:1fr;}
    .cs-word{font-size:34px;}
  }

  /* ---- pattern complete: 3D embossed tiles, shapes/emoji/words ---- */
  .pc-board{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
    max-width:290px; width:100%; margin:4px auto 24px;
  }
  .pc-tile{
    aspect-ratio:1; border-radius:16px;
    background:linear-gradient(160deg, var(--card) 0%, var(--card-2) 100%);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    box-shadow:0 6px 14px rgba(45,42,38,.14), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.07);
    animation:popScale .25s ease;
  }
  .pc-tile.pc-blank{
    background:var(--bg-alt); border:2px dashed var(--border); box-shadow:none;
    color:var(--text-faint); font-size:24px; font-weight:700;
  }
  .pc-shape{font-size:32px; filter:drop-shadow(0 3px 2px rgba(0,0,0,.25));}
  .pc-emoji{font-size:34px; filter:drop-shadow(0 3px 3px rgba(0,0,0,.2));}
  .pc-word{
    font-family:var(--serif); font-weight:700; font-size:13px; color:var(--text);
    text-align:center; padding:0 6px; line-height:1.2;
  }
  .pc-choices{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
  .pc-choice{
    width:70px; height:70px; border:none; border-radius:16px; cursor:pointer;
    background:linear-gradient(160deg, var(--card) 0%, var(--card-2) 100%);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 16px rgba(45,42,38,.16), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.07);
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .pc-choice .pc-word{font-size:11px;}
  .pc-choice:hover:not(:disabled){transform:translateY(-3px);}
  .pc-choice:disabled{cursor:default;}
  .pc-choice.correct{outline:4px solid var(--mint); outline-offset:3px; animation:popScale .3s ease;}
  .pc-choice.wrong{outline:4px solid var(--red); outline-offset:3px; animation:shakeX .35s ease;}

  /* ---- quick math: styled equation card + 3D answer buttons ---- */
  .qm-card{
    background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
    border-radius:22px; padding:36px 20px; margin:10px 0 28px; text-align:center;
    box-shadow:0 10px 26px rgba(45,42,38,.1);
  }
  .qm-equation{
    font-family:var(--mono); font-weight:700; font-size:44px; color:var(--text);
    letter-spacing:.04em; animation:popScale .3s ease;
  }
  .qm-op{color:var(--accent); margin:0 4px;}
  .qm-eq{color:var(--text-faint); margin:0 4px;}
  .qm-choices{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; max-width:320px; margin:0 auto;}
  .qm-choice{
    padding:24px 10px; border:none; border-radius:18px; cursor:pointer;
    background:linear-gradient(160deg, var(--card) 0%, var(--card-2) 100%);
    font-family:var(--mono); font-weight:700; font-size:26px; color:var(--text);
    box-shadow:0 8px 18px rgba(45,42,38,.15), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.07);
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .qm-choice:hover:not(:disabled){transform:translateY(-3px);}
  .qm-choice:disabled{cursor:default;}
  .qm-choice.correct{outline:4px solid var(--mint); outline-offset:3px; animation:popScale .3s ease;}
  .qm-choice.wrong{outline:4px solid var(--red); outline-offset:3px; animation:shakeX .35s ease;}
  @media (max-width:480px){
    .qm-equation{font-size:36px;}
  }

  /* ---- letter scan: colorful mosaic grid ---- */
  .ls-board{
    display:grid; gap:5px; width:100%; margin:6px auto 20px;
    background:linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
    padding:10px; border-radius:16px; box-shadow:0 8px 20px rgba(45,42,38,.1);
  }
  .ls-cell{
    aspect-ratio:1; border-radius:8px; display:flex; align-items:center; justify-content:center;
    font-family:var(--serif); font-weight:700; font-size:15px; color:#4a3f33;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 3px rgba(0,0,0,.06);
    transition:transform .12s ease;
    position:relative;
  }
  .ls-cell.clickable{cursor:pointer;}
  .ls-cell.clickable:hover{transform:scale(1.08);}
  .ls-cell.matched{
    background:var(--mint) !important; color:#fff; animation:popScale .3s ease;
    box-shadow:0 4px 10px rgba(47,174,92,.35);
  }
  .ls-cell.ls-miss{animation:shakeX .3s ease;}

  /* ---- shared study-phase countdown ---- */
  .countdown-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:56px; height:56px; border-radius:50%; flex-shrink:0;
    background:var(--accent); color:#fff; font-family:var(--mono); font-weight:700; font-size:24px;
    box-shadow:0 8px 18px rgba(255,154,60,.4), inset 0 2px 0 rgba(255,255,255,.3);
  }
  .countdown-badge.low{background:var(--red); box-shadow:0 8px 18px rgba(226,75,74,.45), inset 0 2px 0 rgba(255,255,255,.3); animation:pulseGlow 1s ease-in-out infinite;}
  .result-box{text-align:center; padding:40px 20px;}
  .result-box .big{font-family:var(--mono); font-size:48px; color:var(--accent); margin:10px 0;}
  .result-illustration{width:120px; height:120px; margin:0 auto 6px;}

  /* ---- game animations ---- */
  @keyframes flipIn{0%{transform:scale(.4) rotateY(90deg); opacity:.3;}60%{transform:scale(1.08) rotateY(0deg); opacity:1;}100%{transform:scale(1) rotateY(0deg);}}
  @keyframes matchPop{0%{transform:scale(1);}40%{transform:scale(1.18); box-shadow:0 0 0 6px rgba(33,158,119,.25);}100%{transform:scale(1);}}
  @keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,180,84,.55); transform:scale(1);}50%{box-shadow:0 0 0 12px rgba(255,180,84,0); transform:scale(1.04);}}
  @keyframes popScale{0%{transform:scale(.55); opacity:0;}65%{transform:scale(1.14); opacity:1;}100%{transform:scale(1);}}
  @keyframes shakeX{0%,100%{transform:translateX(0);}20%{transform:translateX(-7px);}40%{transform:translateX(7px);}60%{transform:translateX(-5px);}80%{transform:translateX(5px);}}
  @keyframes floatIn{0%{transform:translateY(10px); opacity:0;}100%{transform:translateY(0); opacity:1;}}
  @keyframes moleUp{0%{transform:translateY(60%) scale(.7); opacity:0;}100%{transform:translateY(0) scale(1); opacity:1;}}
  @keyframes bonk{0%{transform:scale(1) rotate(0);}30%{transform:scale(1.3) rotate(-8deg);}60%{transform:scale(.85) rotate(6deg);}100%{transform:translateY(60%) scale(.6); opacity:0;}}
  @keyframes confettiFall{0%{transform:translateY(-8px) rotate(0deg); opacity:1;}100%{transform:translateY(90px) rotate(220deg); opacity:0;}}
  @keyframes trophyBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

  .cell.flipped{animation:flipIn .32s ease;}
  .cell.matched{animation:matchPop .4s ease;}
  .cell.active{animation:pulseGlow 1s ease-in-out infinite;}
  .cell.correct{animation:popScale .3s ease;}
  .cell.wrong{animation:shakeX .35s ease;}
  .digit-display{animation:popScale .35s ease;}
  .board{animation:floatIn .3s ease;}
  .gng-circle.gng-active,.gng-circle.gng-go{animation:pulseGlow 1s ease-in-out infinite;}

  .mole-field{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; justify-content:center; max-width:330px; margin:0 auto;}
  .simon-pad{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; justify-content:center; margin:20px auto; max-width:230px;}
  .simon-btn{width:100%; aspect-ratio:1; border-radius:16px; cursor:pointer; transition:background .1s, box-shadow .1s;}
  .mole-hole{position:relative; aspect-ratio:1; border-radius:50%; background:radial-gradient(ellipse at 50% 40%, #6b4a2c 0%, #3f2c1a 70%); overflow:hidden; cursor:pointer; box-shadow:inset 0 6px 14px rgba(0,0,0,.45);}
  .mole-hole .mole{position:absolute; left:50%; bottom:0; transform:translateX(-50%); font-size:44px; animation:moleUp .18s ease-out;}
  .mole-hole .mole.bonk{animation:bonk .25s ease-in forwards;}
  .mole-hole:hover{filter:brightness(1.08);}
  .digit-input{
    width:100%; text-align:center; font-family:var(--mono); font-size:22px; letter-spacing:.2em;
    background:var(--bg-alt); border:1px solid var(--border); color:var(--text); padding:14px; border-radius:10px;
  }

  /* ---- digit-symbol: fantasy stone/night theme ---- */
  .ds-theme{
    position:relative; overflow:hidden; border-radius:24px; padding:30px 18px 34px; margin-bottom:10px;
    background:radial-gradient(ellipse at 50% -15%, #2c3a68 0%, #151c37 55%, #0a0e20 100%);
    box-shadow:0 20px 44px rgba(0,0,0,.35);
  }
  .ds-theme::before{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.7;
    background-image:
      radial-gradient(1.5px 1.5px at 12% 18%, #fff 100%, transparent 100%),
      radial-gradient(1.5px 1.5px at 78% 12%, #fff 100%, transparent 100%),
      radial-gradient(1px 1px at 45% 8%, #fff 100%, transparent 100%),
      radial-gradient(1px 1px at 90% 30%, #fff 100%, transparent 100%),
      radial-gradient(1.5px 1.5px at 6% 45%, #fff 100%, transparent 100%),
      radial-gradient(1px 1px at 60% 22%, #fff 100%, transparent 100%),
      radial-gradient(1.5px 1.5px at 93% 60%, #fff 100%, transparent 100%),
      radial-gradient(1px 1px at 25% 60%, #fff 100%, transparent 100%);
  }
  .ds-theme > *{position:relative; z-index:1;}
  .ds-theme .section-sub{color:#c3cbee;}
  .ds-theme .hud{color:#e7eaf9;}
  .ds-theme .hud b{color:#fff;}
  .ds-theme p{color:#aab2df;}
  .ds-theme a{color:#c3cbee;}
  .ds-banner{
    display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
    background:linear-gradient(180deg, #8a6a45 0%, #6b4e2e 100%);
    border:3px solid #4a341c; border-radius:14px; padding:12px 16px; margin:0 auto 26px; max-width:620px;
    box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
  }
  .ds-banner-slot{display:flex; flex-direction:column; align-items:center; gap:4px; background:rgba(255,255,255,.12); border-radius:10px; padding:6px 9px; min-width:38px;}
  .ds-banner-slot .num{font-family:var(--mono); font-size:11px; color:#f5e6c8; font-weight:700;}
  .ds-icon-badge{border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;}
  .ds-card-row{display:flex; align-items:center; justify-content:center; gap:18px; margin:8px auto 30px;}
  .ds-stone-card{
    width:124px; height:124px; flex-shrink:0; border-radius:20px; display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:54px; font-weight:700; color:#fff;
    background:linear-gradient(160deg, #4d5b8c 0%, #2c355c 100%);
    border:3px solid #6c7cb8;
    box-shadow:0 14px 30px rgba(0,0,0,.4), inset 0 2px 6px rgba(255,255,255,.15);
    animation:popScale .35s ease;
  }
  .ds-pedestals{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
  .ds-pedestal{
    width:82px; height:82px; padding:0; border-radius:16px; cursor:pointer;
    background:linear-gradient(160deg, #e9d9b8 0%, #cbb488 100%);
    border:3px solid #7a5c33;
    box-shadow:0 8px 18px rgba(0,0,0,.3);
    display:flex; align-items:center; justify-content:center;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .ds-pedestal:hover:not(:disabled){transform:translateY(-3px);}
  .ds-pedestal:disabled{cursor:default;}
  .ds-pedestal.correct{background:linear-gradient(160deg, #7fd99a 0%, #3f9f5f 100%); animation:popScale .3s ease;}
  .ds-pedestal.wrong{background:linear-gradient(160deg, #e98b89 0%, #b23a39 100%); animation:shakeX .35s ease;}
  .ds-torch{
    flex-shrink:0; width:62px; height:90px;
    background-size:contain; background-repeat:no-repeat; background-position:center;
    mask-image:radial-gradient(ellipse 62% 68% at 50% 45%, black 60%, transparent 96%);
    -webkit-mask-image:radial-gradient(ellipse 62% 68% at 50% 45%, black 60%, transparent 96%);
    filter:drop-shadow(0 0 12px rgba(255,150,50,.55));
    animation:flicker 1.8s ease-in-out infinite;
  }
  .ds-torch.left{background-image:url('images/theme/torch-left.png');}
  .ds-torch.right{background-image:url('images/theme/torch-right.png');}
  @keyframes flicker{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.75; transform:scale(.93);}}

  /* ---- trails: number/shape chain ---- */
  .trails-theme{
    position:relative; border-radius:28px; padding:34px 18px 30px; margin-bottom:10px; text-align:center;
    background-image:url('images/theme/trails-bg.jpg'); background-size:cover; background-position:center;
    box-shadow:0 20px 44px rgba(0,0,0,.18);
  }
  .trails-theme .section-sub{
    display:inline-block; background:rgba(255,255,255,.9); color:var(--text); font-weight:600;
    padding:6px 16px; border-radius:100px; margin:0 auto 18px; box-shadow:0 4px 12px rgba(0,0,0,.1);
  }
  .trails-theme .hud{
    display:inline-flex; background:rgba(255,255,255,.9); color:var(--text); padding:5px 14px;
    border-radius:100px; margin-bottom:10px; box-shadow:0 4px 12px rgba(0,0,0,.1);
  }
  .trails-target{
    display:inline-flex; align-items:center; gap:10px; padding:12px 22px 12px 20px; border-radius:100px;
    background:rgba(255,255,255,.96); box-shadow:0 8px 20px rgba(45,42,38,.16); font-size:16px; color:var(--text); font-weight:700;
    margin-bottom:22px;
  }
  .trails-target b{font-family:var(--serif); font-size:22px; color:#fff; background:var(--accent); border-radius:100px; padding:4px 16px; box-shadow:0 4px 10px rgba(255,154,60,.4);}
  .trails-cell{font-family:var(--mono); font-weight:700; color:var(--accent-dark); font-size:26px; transition:transform .12s ease, box-shadow .12s ease; box-shadow:0 8px 18px rgba(0,0,0,.14);}
  .trails-cell:hover{transform:translateY(-2px);}

  /* ---- number sequence ---- */
  .nseq-card{
    background-image:url('images/theme/nseq-bg.jpg'); background-size:cover; background-position:center;
    border-radius:20px; padding:34px 16px 30px; margin:10px 0 26px;
    box-shadow:0 10px 26px rgba(45,42,38,.16);
  }
  .nseq-row{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;}
  .nseq-chip{
    min-width:58px; height:58px; padding:0 8px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:23px; font-weight:700; color:#fff;
    box-shadow:0 8px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25);
    animation:popScale .3s ease;
  }
  .nseq-arrow{color:#fff; font-size:20px; font-weight:700; text-shadow:0 2px 6px rgba(0,0,0,.35);}
  .nseq-mystery{
    min-width:58px; height:58px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:24px; font-weight:700; color:var(--accent-dark);
    background:repeating-linear-gradient(135deg, var(--card-2) 0 8px, var(--card) 8px 16px);
    border:3px dashed var(--accent);
    animation:pulseGlow 1.4s ease-in-out infinite;
  }
  .nseq-choices{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px;}
  .nseq-choice{
    min-width:74px; padding:14px 10px; border:none; border-radius:14px; cursor:pointer;
    font-family:var(--mono); font-size:19px; font-weight:700; color:#fff;
    box-shadow:0 8px 16px rgba(0,0,0,.18);
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .nseq-choice:hover:not(:disabled){transform:translateY(-3px);}
  .nseq-choice:disabled{cursor:default;}
  .nseq-choice.correct{outline:3px solid var(--mint); outline-offset:2px; animation:popScale .3s ease;}
  .nseq-choice.wrong{outline:3px solid var(--red); outline-offset:2px; animation:shakeX .35s ease;}

  /* ---- slide puzzle: wood design ---- */
  .sp-frame{
    background:
      repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 7px),
      linear-gradient(160deg, #c48a4a 0%, #9c6530 45%, #7a4a20 100%);
    border-radius:22px; padding:16px; margin:0 auto 10px;
    box-shadow:0 16px 34px rgba(45,28,10,.35), inset 0 2px 4px rgba(255,255,255,.25), inset 0 -3px 6px rgba(0,0,0,.35);
  }
  .sp-frame .board{
    background:linear-gradient(160deg, #6b4423 0%, #4a2e16 100%);
    border-radius:12px; padding:8px;
    box-shadow:inset 0 3px 10px rgba(0,0,0,.5);
  }
  .sp-tile{
    color:#5b3a1e; font-weight:700; border-radius:8px;
    background:
      repeating-linear-gradient(95deg, rgba(120,80,40,.07) 0 3px, transparent 3px 9px),
      linear-gradient(160deg, #ecc98a 0%, #d9a860 55%, #c8933f 100%);
    box-shadow:0 4px 0 rgba(90,55,20,.4), 0 7px 14px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(90,55,20,.25);
    text-shadow:0 1px 0 rgba(255,255,255,.35), 0 -1px 1px rgba(90,55,20,.5);
    transition:transform .1s ease, box-shadow .1s ease;
  }
  .sp-tile.clickable:hover{transform:translateY(-2px); box-shadow:0 6px 0 rgba(90,55,20,.4), 0 10px 18px rgba(0,0,0,.32), inset 0 2px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(90,55,20,.25);}
  .sp-tile.clickable:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(90,55,20,.4), 0 3px 8px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(90,55,20,.25);}
  .sp-empty{
    background:radial-gradient(ellipse at 50% 35%, #3a2410 0%, #1f1408 100%) !important;
    box-shadow:inset 0 4px 10px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.05) !important;
  }

  /* ---- admin ---- */
  .admin-lock{max-width:360px; margin:60px auto; text-align:center;}
  .admin-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .admin-table{width:100%; border-collapse:collapse; font-size:13.5px;}
  .admin-table th{text-align:left; color:var(--text-faint); font-size:11.5px; text-transform:uppercase; padding:8px; border-bottom:1px solid var(--border);}
  .admin-table td{padding:9px 8px; border-bottom:1px solid var(--border); font-family:var(--mono); font-size:13px;}

  @media(max-width:640px){
    h1.hero-title{font-size:32px;}
    .hero{padding:44px 0 28px;}
    .grid.g4{grid-template-columns:repeat(2, 1fr); gap:10px;}
    .game-card .thumb{height:90px; font-size:30px;}
    .board{gap:8px;}
    .mole-field, .simon-pad{gap:8px;}
    .hud{gap:12px; font-size:13.5px;}
    .gng-circle{width:120px; height:120px; font-size:15px;}
    .digit-display{font-size:40px;}
    .ds-stone-card{width:96px; height:96px; font-size:40px;}
    .ds-pedestal{width:70px; height:70px;}
    .ds-card-row{gap:10px;}
    .ds-torch{width:42px; height:62px;}
    .nseq-chip, .nseq-mystery{min-width:46px; height:46px; font-size:18px; border-radius:12px;}
    .nseq-choice{min-width:60px; padding:11px 8px; font-size:16px;}
    .result-box .big{font-size:38px;}
  }
  @media(max-width:420px){
    #app{padding:0 14px 60px;}
    .board{gap:6px;}
  }

/* =====================================================================
   SENIORENFREUNDLICHES DESIGN (Διάνοια)
   Größere Schrift, kräftigere Kontraste, große Knöpfe, ruhige Bewegung,
   gut sichtbarer Fokus. Steht bewusst am ENDE, damit es alles Vorherige überschreibt.
   Zum Abschalten: diesen Block komplett löschen.
   ===================================================================== */
:root{
  --bg:#FFFFFF; --bg-alt:#F2F6FB; --card:#FFFFFF; --card-2:#EAF1FA;
  --text:#14213D; --text-dim:#34425F; --text-faint:#52607C;
  --accent:#1D5FD1; --accent-dark:#0F3F94;
  --violet:#137A4B; --violet-dark:#E1F4EA;
  --mint:#137A4B; --mint-dark:#E1F4EA;
  --border:rgba(20,33,61,.20);
  --senior-orange:#1D5FD1; --senior-orange-dark:#0F3F94;
}
body{ background:#FFFFFF !important; }
header.topbar{ background:#FFFFFF !important; }
::selection{ background:#BBD3FA; color:#0B1F4D; }
html{ -webkit-text-size-adjust:100%; }
body{ font-size:18px; line-height:1.7; }
#app{ padding-left:20px; padding-right:20px; }

/* Lesbare Schriftgrößen */
nav.mainnav a, nav.mainnav button.navbtn{ font-size:17.5px !important; padding:12px 14px !important; color:var(--text) !important; }
.brand{ font-size:26px !important; }
h1.hero-title{ font-size:52px !important; line-height:1.12 !important; }
.hero-sub{ font-size:20px !important; color:var(--text-dim) !important; max-width:600px !important; }
.hero-noreg{ font-size:20px !important; color:var(--senior-orange-dark) !important; }
.hero-stat span{ font-size:15px !important; color:var(--text-dim) !important; }
.eyebrow{ font-size:14px !important; color:var(--senior-orange-dark) !important; }
.hero-stat b, .stat-card b, .rank-1, .switch-line button, .ai-tag{ color:var(--senior-orange-dark) !important; }
h2.section-title{ font-size:32px !important; }
.section-sub{ font-size:18px !important; color:var(--text-dim) !important; max-width:720px !important; }
.game-card h3{ font-size:21px !important; }
.game-card p{ font-size:16.5px !important; line-height:1.6 !important; color:var(--text-dim) !important; }
.area-card h3{ font-size:21px !important; }
.area-card p{ font-size:16px !important; color:var(--text-dim) !important; }
.science-item h4{ font-size:18px !important; }
.science-item p{ font-size:16.5px !important; color:var(--text-dim) !important; }
.note{ font-size:15px !important; color:var(--text-dim) !important; }
.legal-body{ font-size:18px !important; line-height:1.8 !important; }
.legal-body p{ color:var(--text-dim) !important; }
.legal-body h3{ font-size:20px !important; }
footer{ font-size:15.5px !important; color:var(--text-dim) !important; }
.footer-legal a{ color:var(--text-dim) !important; text-decoration:underline !important; }
.results-count{ font-size:15px !important; color:var(--text-dim) !important; }
.toolbar-field label{ font-size:15px !important; color:var(--text-dim) !important; }
.toolbar-field input[type=text], .toolbar-field select{ font-size:17px !important; padding:12px 14px !important; border:2px solid rgba(20,33,61,.45) !important; }
.field label{ font-size:16px !important; color:var(--text-dim) !important; }
.field input{ font-size:18px !important; padding:14px 15px !important; border:2px solid rgba(20,33,61,.45) !important; }
.error{ font-size:15.5px !important; }
table.lb{ font-size:17px !important; }
table.lb th{ font-size:14px !important; color:var(--text-dim) !important; }
.hud{ font-size:18px !important; }
.gameframe h2{ font-size:30px !important; }
.digit-input{ font-size:26px !important; padding:16px !important; border:2px solid rgba(20,33,61,.5) !important; }
.badge{ font-size:12px !important; color:#14502F !important; background:#CDEFDC !important; }
.diff-pill, .dur-pill, .cat-pill{ font-size:13px !important; color:var(--text) !important; }

/* Große, gut erkennbare Knöpfe mit starkem Kontrast */
.btn{ font-size:17px !important; min-height:52px; padding:14px 26px !important; border:2px solid transparent; }
.btn.small{ font-size:15.5px !important; min-height:46px; padding:10px 18px !important; }
.btn.primary{ background:var(--senior-orange) !important; color:#fff !important; box-shadow:0 8px 20px rgba(29,95,209,.32) !important; }
.btn.primary:hover{ background:var(--senior-orange-dark) !important; }
.btn.ghost{ background:#fff !important; border:2px solid var(--senior-orange) !important; color:var(--senior-orange-dark) !important; }
.btn.ghost:hover{ background:var(--senior-orange) !important; color:#fff !important; }
.cat-tab{ font-size:16px !important; padding:11px 18px !important; color:var(--text) !important; border:2px solid rgba(20,33,61,.32) !important; }
.cat-tab.active, .view-toggle button.active{ background:#137A4B !important; border-color:#137A4B !important; color:#fff !important; }
.view-toggle button{ font-size:15.5px !important; padding:12px 16px !important; color:var(--text) !important; }
#cookieBanner p{ font-size:16.5px !important; color:var(--text) !important; max-width:700px !important; }
#cookieBanner a{ color:var(--senior-orange-dark) !important; text-decoration:underline !important; }

/* Karten klar abgegrenzt */
.card, .game-card, .area-card{ border:1px solid rgba(20,33,61,.16) !important; box-shadow:0 6px 18px rgba(20,33,61,.07) !important; }
.mascot-bubble{ font-size:14.5px !important; color:var(--text) !important; }

/* Links im Fließtext unterstrichen */
.legal-body a, .post-content a, p a, .note a, .share-ok a{ text-decoration:underline !important; text-underline-offset:3px; }

/* Blog-Beiträge: größere Schrift */
.post-content{ font-size:19.5px !important; line-height:1.9 !important; color:#2B2722 !important; }
.post-content h2{ font-size:29px !important; }
.post-content h3{ font-size:23px !important; }
.post .meta, .crumbs{ font-size:15.5px !important; color:var(--text-dim) !important; }
.bc-title{ font-size:20px !important; }
.bc-text{ font-size:16.5px !important; color:var(--text-dim) !important; }
.bc-btn{ font-size:16px !important; padding:11px 18px !important; border-width:2px !important; }

/* Nachbesserungen: Hervorhebungen und kleine Inline-Texte */
h1.hero-title em{ color:#137A4B !important; }
.card[style*="font-size:14px"], .card[style*="font-size:13.5px"]{ font-size:17px !important; line-height:1.8 !important; }
a[style*="var(--accent)"]{ color:var(--senior-orange-dark) !important; text-decoration:underline !important; }
.legal-body, .legal-body p{ font-size:18px !important; }

/* Bereichs-Karten: Bild füllt die Karte immer ganz aus (keine farbigen Ränder), egal wie breit der Browser ist */
.area-card.has-cover-img{ aspect-ratio:3 / 2; min-height:0 !important; padding:0 !important; background:none !important; }
.area-card.has-cover-img .area-cover-img{ object-fit:cover !important; object-position:center !important; width:100% !important; height:100% !important; }

/* Spiel-Vorschaubilder: ganzes Foto zeigen (3:2) */
.game-card .thumb{height:auto !important; aspect-ratio:3 / 2; }
.glist .game-card .thumb{height:auto !important; align-self:flex-start; width:140px !important; flex:0 0 140px !important;}
.game-card .thumb img[data-thumb-for]{object-fit:cover !important; object-position:center !important;}
/* Sichtbarer Fokus für Tastaturbedienung */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:4px solid #1D4ED8 !important; outline-offset:3px !important; border-radius:8px;
}

/* Teilen-Leiste */
.share-btn{ font-size:15.5px !important; padding:11px 17px !important; }
.share-bar h4{ font-size:18px !important; }
.share-ok{ font-size:15px !important; color:#14502F !important; }

/* Schrift-Größen-Knöpfe in der Kopfzeile */
.tsz{ display:inline-flex; gap:6px; margin-right:8px; align-items:center; }
.tsz button{ border:2px solid var(--senior-orange-dark); background:#fff; color:var(--senior-orange-dark); border-radius:12px; padding:6px 12px; min-width:50px; min-height:46px; font-weight:800; font-size:17px; line-height:1; cursor:pointer; }
.tsz button:hover{ background:var(--senior-orange-dark); color:#fff; }
html[data-tsz="1"] #app{ zoom:1.12; }
html[data-tsz="2"] #app{ zoom:1.26; }
html[data-tsz="1"] #cookieBanner{ zoom:1.1; }
html[data-tsz="2"] #cookieBanner{ zoom:1.2; }

/* Ruhigere Bewegung: weniger Ablenkung, respektiert die Systemeinstellung */
.hero canvas{ opacity:.3 !important; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .hero canvas{ display:none !important; }
}

@media (max-width:640px){
  h1.hero-title{ font-size:36px !important; }
  h2.section-title{ font-size:27px !important; }
  .hero-sub{ font-size:18px !important; }
  nav.mainnav{ gap:4px !important; }
  .tsz{ width:100%; margin:0 0 4px; }
}