/* Spiele: gemeinsamer Rahmen plus Phishing, Rack-Tetris. */
.akt-sp-panel-eyebrow { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; color: var(--orange-text); font-weight: 600; margin: 0; } .akt-sp-note { font-size: 12px; color: var(--muted); }
.akt-game [hidden] { display: none !important; }
.akt-game-stage { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; min-height: 320px; }
.akt-game-overlay { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; text-align: center; padding: 24px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(3px); } .akt-game-overlay[hidden] { display: none; } .akt-game-overlay p { margin: 0 0 12px; max-width: 46ch; color: var(--text-soft); }
.akt-game-big { font-size: var(--step-2); font-weight: 800; line-height: 1.15; color: var(--text) !important; } .akt-game-best { font-size: var(--step--1); color: var(--muted) !important; }
.akt-game-hud { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 6px; font-size: var(--step--1); color: var(--muted); } .akt-game-hud b { color: var(--text); font-weight: 700; }
.akt-game-touch { display: flex; gap: 8px; justify-content: center; margin: 10px 0; } .akt-game-touch button { width: 52px; height: 44px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 18px; border-radius: 10px; cursor: pointer; } .akt-game-touch button:active { background: var(--orange); color: var(--orange-ink); }
/* Phishing */
.akt-ph-stage { padding: 18px; } .akt-ph-counter { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; }
.ph-head { display: grid; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px; } .ph-from b { display: block; } .ph-from small { color: var(--muted); font-size: 12px; } .ph-subject { font-weight: 700; font-size: var(--step-0); }
.ph-body { font-size: var(--step--1); line-height: 1.55; color: var(--text-soft); } .ph-body p { margin: 0 0 10px; } .ph-att { display: inline-block; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: 12px; } .ph-att::before { content: "📎 "; }
.ph-spot { display: inline; text-align: left; font: inherit; color: inherit; background: transparent; border: 0; padding: 0 2px; border-radius: 3px; text-decoration: underline dotted; text-underline-offset: 3px; cursor: default; } .ph-spot.is-marked { cursor: pointer; background: rgba(255,102,0,.18); outline: 1px dashed var(--orange); } .ph-spot.is-found { background: rgba(194,65,59,.25); outline-style: solid; }
.akt-ph-decide { display: flex; gap: 8px; margin-top: 12px; } .akt-ph-decide .btn { padding: 9px 18px; }
.akt-ph-feedback { margin-top: 12px; border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: 10px; padding: 14px 16px; } .akt-ph-feedback b { display: block; margin-bottom: 4px; } .akt-ph-feedback p { margin: 0 0 8px; color: var(--text-soft); font-size: var(--step--1); } .akt-ph-hint { color: var(--orange-text) !important; } .akt-ph-feedback .btn { padding: 8px 14px; font-size: var(--step--1); }
.akt-ph-result { padding: 24px; text-align: center; } .akt-ph-result ul { list-style: none; margin: 10px auto 14px; padding: 0; max-width: 46ch; text-align: left; font-size: var(--step--1); display: grid; gap: 4px; } .akt-ph-result li.is-ok { color: #3cb371; } .akt-ph-result li.is-bad { color: var(--danger); }
/* Rack-Tetris */
.akt-rt-wrap { display: grid; grid-template-columns: auto minmax(160px, 1fr); gap: 16px; align-items: start; justify-content: center; } @media (max-width: 520px) { .akt-rt-wrap { grid-template-columns: 1fr; justify-items: center; } }
.akt-rt-stage { display: inline-block; min-height: 0; } .akt-rt-stage canvas { display: block; outline: none; } .akt-rt-stage canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--orange); }
.akt-rt-side { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; max-width: 260px; } .akt-rt-next { display: block; margin: 8px 0 12px; }
.akt-rt-facts { margin: 0 0 10px; display: grid; gap: 6px; } .akt-rt-facts div { display: flex; justify-content: space-between; font-size: var(--step--1); } .akt-rt-facts dt { color: var(--muted); } .akt-rt-facts dd { margin: 0; font-weight: 700; } .akt-rt-legend { font-size: 11px; color: var(--muted); margin: 0; }