/* Computer Skills Practice Suite (QQI Level 2, M2T11): shared look. Easy to navigate, read and understand: big buttons, plain words, one way back. */
:root{--bg1:#0c2233;--bg2:#143c4f;--panel:#10303f;--ink:#fff;--soft:#bfe3ea;--accent:#ffb703;--good:#2ec4b6;--red:#e63946;--line:#fff}
body.hc{--bg1:#000;--bg2:#000;--panel:#000;--ink:#fff;--soft:#fff;--accent:#ffe600;--good:#00ff7f;--red:#ff4d4d}
*{box-sizing:border-box}
html{font-size:22px}
html,body{margin:0;height:100%;background:linear-gradient(160deg,var(--bg1),var(--bg2));color:var(--ink);font-family:"Segoe UI",Verdana,Arial,sans-serif}
body{display:flex;flex-direction:column;overflow:hidden}
button{font:inherit;color:var(--ink);cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:4px solid var(--accent);outline-offset:3px}
a{color:inherit}
#top{display:flex;align-items:center;gap:14px;padding:10px 16px;background:rgba(0,0,0,.35);flex:0 0 auto}
#top h1{margin:0;font-size:1.2em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb{display:inline-flex;align-items:center;min-height:60px;padding:8px 20px;border-radius:14px;border:3px solid var(--line);background:var(--panel);font-weight:700;text-decoration:none;color:var(--ink)}
.tb[hidden]{display:none}
.scorebox{color:var(--accent);font-weight:900;cursor:default}
#stage{position:relative;flex:1 1 auto;overflow:hidden;user-select:none;-webkit-user-select:none}
#stage.free{user-select:text;-webkit-user-select:text}
.menu{position:absolute;inset:0;overflow:auto;padding:22px 26px}
.menu p.lead{margin:0 0 16px;color:var(--soft)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.card{display:flex;flex-direction:column;gap:6px;text-align:left;min-height:190px;padding:16px 18px;border-radius:20px;border:4px solid var(--line);background:var(--panel);text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--accent)}
.card{position:relative}.card .ic{font-size:2.4em;line-height:1;width:1.55em;height:1.55em;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14);border-radius:18px;border:3px solid rgba(255,255,255,.35)}
.card.simc .ic{background:#1d5aa8;border-color:#fff}.card.arcade .ic{background:#7a3fb0;border-color:#fff}
.card[href]:after,button.card:after{content:"▶ Open";position:absolute;right:14px;top:14px;font-size:.8em;font-weight:800;color:#1b1200;background:var(--accent);border-radius:12px;padding:3px 12px}.card.soon:after{content:none!important}.card b{font-size:1.1em}.card span.sk{color:var(--soft);font-size:.9em}
 .card .ds{font-size:.82em;line-height:1.3;opacity:.92}
.card .st{margin-top:auto;font-size:1.05em;color:var(--accent);font-weight:800}
.card.simc{border-style:dashed}
.card.soon{opacity:.55}
.tag{display:inline-block;font-size:.72em;font-weight:900;letter-spacing:.06em;padding:2px 10px;border-radius:10px;background:var(--accent);color:#1b1200;width:max-content}
.tag.g{background:var(--good);color:#06231f}
.hud{position:absolute;left:0;right:0;top:0;height:74px;display:flex;align-items:center;gap:16px;padding:8px 16px;background:rgba(0,0,0,.35);z-index:5}
.hud .hudtxt{font-weight:700;min-width:170px}
.hud .clock{font-weight:800;min-width:104px;font-variant-numeric:tabular-nums;color:var(--accent)}
body.noclock .hud .clock{display:none}
.hud .bar{flex:1;height:22px;border:3px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.12)}
.hud .bar i{display:block;height:100%;width:0;background:var(--good);transition:width .3s}
.hud .msg{flex:2;color:var(--soft);font-size:.95em;line-height:1.15}
.hud button{min-height:52px;padding:6px 18px;border-radius:12px;border:3px solid var(--line);background:var(--panel);font-weight:700}
.area{position:absolute;left:0;right:0;top:74px;bottom:0;overflow:auto;padding:18px 22px;display:flex;flex-direction:column;align-items:center;gap:16px}
.prompt{font-size:1.5em;font-weight:800;color:var(--accent);text-align:center}
#overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:50;padding:18px}
#overlay[hidden]{display:none}
.dlg{background:var(--panel);border:5px solid var(--line);border-radius:26px;padding:26px 30px;max-width:940px;width:100%;max-height:96vh;overflow:auto}
.dlg h2{margin:0 0 10px;font-size:1.5em}.dlg p{margin:8px 0;line-height:1.35}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.big{min-height:70px;padding:10px 26px;border-radius:16px;border:4px solid var(--line);background:var(--good);color:#06231f;font-weight:900;font-size:1.05em}
.big.alt{background:var(--panel);color:var(--ink)}
.set{margin:14px 0}.set h3{margin:0 0 6px;font-size:1em;color:var(--soft)}
.seg{display:flex;gap:10px;flex-wrap:wrap}
.seg button{min-height:58px;padding:6px 18px;border-radius:14px;border:3px solid var(--line);background:var(--panel);font-weight:700}
.seg button[aria-pressed=true]{background:var(--accent);color:#1b1200;border-color:#fff}
.note{color:var(--soft);font-size:.85em}
.stars{font-size:2.6em;letter-spacing:8px;color:var(--accent);text-align:center;margin:6px 0}
.time{text-align:center;font-size:1.3em;margin:6px 0}.time b{color:var(--accent)}
.skillbox{background:var(--accent);color:#1b1200;border-radius:16px;padding:10px 16px;margin:6px 0 8px}
.skillbox small{display:block;font-weight:800}.skillbox b{font-size:1.45em;font-weight:900}
.levels{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.lv{min-width:104px;min-height:84px;padding:6px 12px;border-radius:16px;border:4px solid var(--line);background:var(--panel);font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.lv small{font-size:.8em;color:var(--accent);letter-spacing:2px}
.lv[aria-pressed=true]{background:var(--accent);color:#1b1200;border-color:#fff}.lv[aria-pressed=true] small{color:#1b1200}
.lv:disabled{opacity:.45;cursor:not-allowed}
.ready{background:var(--good);color:#06231f;border-radius:18px;padding:12px 18px;font-weight:900;text-align:center;font-size:1.1em;margin:8px 0}
.fx{position:absolute;pointer-events:none;font-size:2.2em;animation:rise .7s ease-out forwards;z-index:8}
@keyframes rise{from{opacity:1;transform:translateY(0) scale(.8)}to{opacity:0;transform:translateY(-70px) scale(1.4)}}
.wig{animation:wig .4s}@keyframes wig{20%{transform:translateX(-8px)}50%{transform:translateX(8px)}80%{transform:translateX(-4px)}}
/* quiz answers */
.opts{display:flex;flex-direction:column;gap:12px;width:min(760px,100%)}
.opt{min-height:68px;padding:10px 20px;border-radius:16px;border:4px solid var(--line);background:var(--panel);font-weight:700;text-align:left}
.opt:hover{border-color:var(--accent)}
.opt.right{background:var(--good);color:#06231f}.opt.wrong{background:var(--red);color:#fff}
.why{width:min(760px,100%);background:rgba(255,255,255,.1);border-left:8px solid var(--good);padding:10px 16px;border-radius:10px}
.why.no{border-color:var(--red)}
/* keyboard picture */
.kb{display:flex;flex-direction:column;gap:6px;background:#1c2a33;padding:12px;border-radius:16px;border:3px solid #455a66}
.kb .kr{display:flex;gap:6px;justify-content:center}
.kb .k{min-width:44px;height:44px;padding:0 6px;border-radius:8px;background:#e8eef5;color:#1b2a33;font-weight:800;font-size:.7em;display:flex;align-items:center;justify-content:center;border-bottom:4px solid #8b9aa5}
.kb .k.on{background:var(--accent);transform:translateY(2px);box-shadow:0 0 0 4px #fff}
.kb .k.ok{background:var(--good)}
@media (max-width:900px){.kb .k{min-width:30px;height:34px}}
@media (prefers-reduced-motion:reduce){.fx{animation:none;opacity:0}.wig{animation:none}}