/* Cyber Kids Games - gemeinsame Level-Optik ab Kapitel 14 */

  .hud { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 12px; margin-bottom: 12px; }
  .stat { background: #1d2740; color: #fff; border-radius: 18px; padding: 12px 14px; text-align: center; }
  .stat .lbl { font-size: 13px; color: #a9bbdc; font-weight: 700; }
  .stat .val { font: 900 28px Menlo, Monaco, monospace; margin-top: 4px; }
  .red { color: #ff6b6b !important; } .yel { color: #ffd84d !important; } .grn { color: #7dffb0 !important; }
  .health { background: #1d2740; border-radius: 18px; padding: 12px 14px; color: #fff; display: flex; align-items: center; gap: 14px; }
  .srv { font-size: 48px; width: 58px; text-align: center; flex: none; }
  .srv.shake, .dev.c-bell .di, .dev.c-talk .di { animation: shake .3s linear infinite; }
  @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px) rotate(-6deg); } 75% { transform: translateX(3px) rotate(6deg); } }
  .bar { flex: 1; height: 30px; background: #33415f; border-radius: 15px; overflow: hidden; position: relative; }
  .bar .fill { height: 100%; border-radius: 15px; transition: width .25s, background .4s; }
  .bar .pct { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
  .two2 { display: grid; grid-template-columns: 1.45fr 1fr; gap: 14px; margin-top: 12px; }
  .tasks2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
  .box2 { background: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 4px 12px rgba(0,40,100,.1); }
  .box2 h3 { margin: 0 0 8px; color: var(--c1); font-size: 17px; }
  .todo2 { list-style: none; padding: 0; margin: 0; line-height: 1.9; font-size: 15px; }
  .bk { display: block; width: 100%; text-align: left; margin: 6px 0; border: 3px solid #cfe0f2; background: #f4f9ff; border-radius: 14px; padding: 9px 12px; font: inherit; cursor: pointer; }
  .bk:hover { border-color: var(--c2); } .bk b { color: var(--c1); }
  .bk.ok { border-color: #2bb673; background: #e3fbef; } .bk.red { border-color: #e8392b; background: #ffeeea; }
  .mini { border: 0; border-radius: 9px; padding: 6px 9px; font: 800 12.5px -apple-system, Arial, sans-serif; cursor: pointer; margin: 2px; color: #fff; background: #5a6b85; }
  .mini.red { background: #e8392b; } .mini.blue { background: #3f8cf0; } .mini.grn { background: #2bb673; }
  .lupe { margin-top: 10px; background: #fff7d6; color: #5a4300; border-radius: 12px; padding: 10px 12px; line-height: 1.45; min-height: 46px; font-size: 15px; }
  .learn { margin-top: 14px; background: #eef3ff; border-left: 6px solid var(--c2); border-radius: 12px; padding: 12px 14px; line-height: 1.5; }
  .law { background: #fff4e3; color: #6b4300; border-radius: 16px; padding: 12px 16px; margin-top: 16px; line-height: 1.5; }
  #ov { position: fixed; inset: 0; background: rgba(15,25,50,.6); display: none; place-items: center; z-index: 20; padding: 16px; }
  #ov.show { display: grid; }
  .ovbox { background: #fff; border-radius: 26px; padding: 24px 28px; max-width: 600px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
  .ovbox .big { font-size: 64px; } .ovbox h2 { color: var(--c1); margin: 6px 0; } .ovbox p { font-size: 17px; line-height: 1.5; }
  .stars { font-size: 46px; letter-spacing: 6px; }
  .finale { font-size: 84px; animation: hop .6s ease-in-out infinite alternate; }
  @keyframes hop { to { transform: translateY(-10px) scale(1.06); } }

  .pwin { font: 20px Menlo, Monaco, monospace; width: 100%; padding: 8px 10px; border-radius: 10px; border: 3px solid #cfe0f2; background: #f4f9ff; color: #0d3f6c; box-sizing: border-box; }
  .pwrules { list-style: none; padding: 0; margin: 8px 0; font-size: 14px; line-height: 1.7; }
  .meter { height: 12px; background: #dfe8f2; border-radius: 6px; overflow: hidden; margin-top: 8px; } .meter div { height: 100%; width: 0; transition: width .2s; }
  .brief { background: #fffdf3; border: 3px solid #e8d9a8; border-radius: 14px; padding: 12px; font-family: Georgia, serif; color: #4a3a10; line-height: 1.5; }

  .ok-line { color: #1d8a54; font-weight: 800; margin: 4px 2px; font-size: 14.5px; }
  .warn-line { color: #a06200; font-weight: 800; margin: 4px 2px; font-size: 14.5px; }
  .chips2 { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
  .tc { border: 3px solid #d7e2ee; background: #fff; border-radius: 999px; padding: 6px 11px; font: 700 13.5px -apple-system, Arial, sans-serif; cursor: pointer; }
  .tc:hover { border-color: var(--c2); } .tc.an { border-color: #2bb673; background: #e3fbef; } .tc.rot { border-color: #e8392b; background: #ffe9e6; }
  .hint { margin: 0 0 6px; font-size: 14px; color: #5a6b85; }
  .card2 { background: #fff; border: 3px solid #d7e2ee; border-radius: 16px; padding: 10px; text-align: center; }
  .card2.ok { border-color: #2bb673; background: #e3fbef; } .card2.rot { border-color: #e8392b; background: #fff1ef; } .card2.sel { outline: 4px solid #ffc93c; }
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .mono { font-family: Menlo, Monaco, monospace; }
  @media (max-width: 900px) { .hud, .two2, .tasks2 { grid-template-columns: 1fr; } .grid4 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .grid3 { grid-template-columns: 1fr 1fr; } }
  .mini.red, .mini.grn, .mini.blue { color: #fff !important; }