@import url('/css/fonts.css');
:root { --azul:#0691C0; --teal:#4AADBE; --preto:#0D0D0D; --cinza:#E7E6E6; --tenant:#0691C0; --card:#141a1f; --line:#2a333a; --txt:#d8dde0; --warn:#e08a55; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--preto); color:#fff; font-family:'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif; }
/* telas da plataforma (login, briefing, debrief) com a fonte da marca, mesmo depois que o CSS do game carrega */
.screen, .screen p, .screen li, .screen td, .screen button, .screen input { font-family:'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif; }
h1, .kicker, .screen h1, .screen h3, .screen .kicker { font-family:Technor, 'Century Gothic', sans-serif; }
.logo { display:block; height:52px; width:auto; margin:0 0 20px; }
h1, h2, h3 { margin:0 0 12px; letter-spacing:.04em; }
p { line-height:1.55; color:var(--txt); }
a { color:var(--teal); }
button { font:inherit; background:var(--azul); color:#fff; border:0; padding:10px 18px; margin:6px 6px 0 0; cursor:pointer; border-radius:3px; }
button.sec { background:#2a333a; }
button:focus-visible, .spot:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
input, select, textarea { font:inherit; width:100%; padding:9px 10px; background:#0d1114; color:#fff; border:1px solid #3a4650; border-radius:3px; }
table { width:100%; border-collapse:collapse; font-size:14px; } td, th { padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; text-align:left; }
code { font-family:ui-monospace, monospace; letter-spacing:.12em; }
.hidden { display:none !important; }
.muted { color:#8a979f; font-size:14px; }
.kicker { color:var(--teal); text-transform:uppercase; letter-spacing:.12em; font-size:12px; margin:0 0 6px; }
.ok { color:var(--teal); } .no { color:var(--warn); }
td.ok, td.no { white-space:nowrap; }
.lesson { border-left:3px solid var(--teal); padding:8px 12px; background:rgba(74,173,190,.08); font-size:14px; }
.lesson.warn, .card.warn { border-color:#e05555; }
.screen { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; background:radial-gradient(circle at 30% 20%, #10232c, var(--preto) 60%); }
.card { width:min(680px, 100%); max-height:calc(100vh - 32px); overflow:auto; background:var(--card); border-top:4px solid var(--tenant); padding:24px; }
.frag { display:inline-block; font-family:ui-monospace, monospace; font-size:20px; background:var(--tenant); padding:2px 10px; border-radius:3px; letter-spacing:.1em; }

/* jogo */
.hud { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:8px 16px; background:#0a0d10; border-bottom:2px solid var(--tenant); font-size:14px; min-height:44px; }
.hud .brand { font-weight:700; letter-spacing:.1em; }
.stage-wrap { display:flex; justify-content:center; align-items:center; height:calc(100vh - 44px); position:relative; }
.stage { position:relative; width:min(100vw, calc((100vh - 44px) * var(--r))); aspect-ratio:var(--r); }
.stage .bg { position:absolute; inset:0; width:100%; height:100%; display:block; user-select:none; }
.spot { position:absolute; background:transparent; border:0; padding:0; margin:0; cursor:pointer; border-radius:4px; }
.spot:hover { box-shadow:0 0 0 2px rgba(255,255,255,.35) inset; }
.sprite { position:absolute; pointer-events:none; } .sprite svg { width:100%; height:100%; display:block; }
.scene-escuro .sprite { filter:brightness(.55); }
.toast { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); max-width:calc(100% - 32px); background:rgba(10,13,16,.9); border-left:3px solid var(--teal); padding:10px 16px; font-size:14px; opacity:0; transition:opacity .4s; pointer-events:none; }
.toast.on { opacity:1; }
.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(5,7,9,.8); }
.view { position:relative; width:min(100%, calc(58vh * var(--r))); margin:0 auto 8px; } .view > img { width:100%; height:100%; display:block; }
.ov { position:absolute; overflow:hidden; container-type:size; }
.sprite-btn { background:transparent; padding:0; margin:0; width:100%; height:100%; } .sprite-btn img { width:100%; height:100%; object-fit:contain; }
.chatbot { width:100%; height:100%; background:#f7f7f8; color:#222; font:4.2cqw/1.3 system-ui, sans-serif; padding:4%; overflow:hidden; }
.cb-top { color:#888; border-bottom:1px solid #ddd; padding-bottom:3%; margin-bottom:3%; }
.cb-u { background:#dfe9ef; padding:2% 3%; border-radius:6px; margin:0 0 3% 20%; }
.cb-a { background:#fff; padding:2% 3%; border-radius:6px; margin-right:10%; } .hl { background:#ffe14d; padding:0 3px; }
.cb-usb { font-size:inherit; padding:2% 3%; margin-top:4%; background:#2b2b2b; }
.lockscreen { background:linear-gradient(160deg,#16323f,#0a1418); border-radius:22px; padding:24px 16px; max-width:280px; margin:0 auto 12px; border:6px solid #111; }
.ls-time { font-size:44px; text-align:center; margin-bottom:16px; } .ls-n { background:rgba(255,255,255,.12); border-radius:10px; padding:10px; margin:8px 0; font-size:13px; }
.dialog .d-you { background:#22303a; padding:10px; border-radius:6px; margin-left:30px; } .dialog .d-them { background:#1b2328; padding:10px; border-radius:6px; margin-right:30px; }
.paper { background:#f1ead8; color:#333; padding:16px 20px; font-family:Georgia, serif; } .paper p { color:#333; margin:6px 0; }
.postit { background:#ffe14d; display:inline-block; padding:8px 10px; transform:rotate(-3deg); font-family:"Comic Sans MS", cursive; }
.doc { color:#333; font:7cqw/1.4 Georgia, serif; } .doc p { color:#333; margin:4px 0; }
.stamp { display:inline-block; border:3px solid #c22; color:#c22; padding:2px 8px; transform:rotate(-8deg); font-weight:700; letter-spacing:.1em; margin-bottom:8px; }
.slide { background:#0f1e26; padding:16px; border:1px solid #234; } .sl-bar { font-size:12px; color:#ffb4b4; margin-bottom:10px; }

/* admin */
.admin .wrap { max-width:1100px; margin:0 auto; padding:16px; }
.admin header.top { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:3px solid; border-image:linear-gradient(90deg,var(--azul),var(--teal)) 1; background:#0a0d10; flex-wrap:wrap; gap:8px; }
.panel { background:var(--card); padding:16px; margin:16px 0; border-left:3px solid var(--azul); }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
label { display:block; font-size:13px; color:#9fb0b9; } label > input, label > select, label > textarea { margin-top:4px; }
.stat { font-size:28px; font-weight:700; color:var(--teal); }
.bar { height:8px; background:#22303a; } .bar > i { display:block; height:100%; background:var(--azul); }
.tabs button { background:transparent; border-bottom:2px solid transparent; border-radius:0; } .tabs button.on { border-color:var(--teal); }
.table-wrap { overflow-x:auto; }

/* ===== login / briefing ===== */
.screen.login .card { max-width:460px; }
.screen.wide .card { width:min(820px, 100%); }
#lf { display:flex; gap:8px; flex-wrap:wrap; } #lf input { flex:1 1 220px; } #lf button { margin:0; }
.brief ul { color:var(--txt); line-height:1.7; padding-left:20px; }

/* ===== jogo ===== */
.g-wrap { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:12px; background:radial-gradient(ellipse at 50% 30%, #13232c 0%, #07090b 70%); }
.g-frame { width:min(100%, calc((100vh - 24px - 52px) * 16 / 9 + 112px)); height:min(100%, calc((100vw - 24px - 112px) * 9 / 16 + 52px)); display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:#0b0f12; box-shadow:0 0 0 1px #24313a, 0 0 0 4px #0b0f12, 0 0 0 5px rgba(74,173,190,.35), 0 30px 80px rgba(0,0,0,.6); }
.g-top { height:52px; flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; background:linear-gradient(180deg,#121a20,#0d1317); border-bottom:1px solid #22303a; }
.g-brand { font-weight:800; letter-spacing:.14em; font-size:14px; white-space:nowrap; }
.g-brand span { display:block; font-weight:500; letter-spacing:.08em; font-size:11px; color:var(--teal); text-transform:uppercase; }
.g-combo { display:flex; gap:6px; }
.g-combo .slot { width:40px; height:30px; display:grid; place-items:center; font:700 15px ui-monospace, monospace; letter-spacing:.08em; color:#5d6b75; background:#0a0e11; border:1px solid #26343d; border-radius:5px; }
.g-combo .slot.on { color:#fff; border-color:var(--azul); background:linear-gradient(180deg,#0a3a4d,#08222d); box-shadow:inset 0 0 12px rgba(6,145,192,.35); }
.g-combo .slot.new { animation:pop .7s ease; }
@keyframes pop { 0% { transform:scale(1); } 40% { transform:scale(1.25); box-shadow:0 0 18px var(--teal); } 100% { transform:scale(1); } }
.g-tools { display:flex; align-items:center; gap:6px; }
.g-timer { font:600 15px ui-monospace, monospace; color:#9fb3bd; margin-right:6px; }
.g-icon { width:38px; height:38px; padding:8px; margin:0; background:#16212a; border:1px solid #26343d; color:#cfe6ee; border-radius:8px; }
.g-icon:hover { border-color:var(--teal); color:#fff; } .g-icon svg { width:100%; height:100%; display:block; }
.g-body { flex:1; display:flex; min-height:0; }
.g-view { position:relative; flex:1; min-width:0; overflow:hidden; background:#000; }
.g-view canvas { display:block; width:100%; height:100%; }
.g-inv { width:112px; flex:none; background:linear-gradient(90deg,#0d1317,#111a20); border-left:1px solid #22303a; padding:10px 12px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.g-inv h4 { margin:2px 0 4px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#7f929c; }
#gSlots { display:flex; flex-direction:column; gap:8px; }
.g-inv .slot { width:80px; height:80px; display:block; border-radius:10px; background:#0a0e11; border:1px solid #26343d; padding:12px; margin:0; }
.g-inv .slot.item { cursor:pointer; background:radial-gradient(circle at 50% 35%, #1a2a33, #0c1216); }
.g-inv .slot.item:hover { border-color:var(--teal); }
.g-inv .slot.sel { border:2px solid var(--teal); box-shadow:0 0 16px rgba(74,173,190,.55); }
.g-inv .slot svg { width:100%; height:100%; }
.g-sel { font-size:11px; color:#9fb3bd; text-align:center; line-height:1.35; margin:0; }
.g-arrow { position:absolute; top:50%; transform:translateY(-50%); width:54px; height:96px; padding:10px; margin:0; border-radius:12px; background:rgba(8,12,15,.45); border:1px solid rgba(255,255,255,.12); color:#e6f4f8; z-index:3; backdrop-filter:blur(4px); }
.g-arrow:hover { background:rgba(6,145,192,.55); } .g-arrow svg { width:100%; height:100%; }
.g-arrow.left { left:14px; } .g-arrow.right { right:14px; }
.g-back { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:flex; align-items:center; gap:6px; padding:8px 18px 8px 12px; margin:0; border-radius:22px; background:rgba(8,12,15,.7); border:1px solid rgba(255,255,255,.18); z-index:3; }
.g-back svg { width:20px; height:20px; } .g-back:hover { background:var(--azul); }
.g-tip { position:absolute; z-index:4; pointer-events:none; background:rgba(8,12,15,.88); border:1px solid #2c3d47; padding:5px 10px; border-radius:6px; font-size:13px; white-space:nowrap; }
.g-toast { position:absolute; top:14px; left:50%; transform:translate(-50%,-8px); max-width:70%; text-align:center; background:rgba(8,12,15,.9); border:1px solid #2c3d47; border-left:3px solid var(--teal); padding:9px 16px; border-radius:8px; font-size:14px; opacity:0; transition:all .3s; pointer-events:none; z-index:5; }
.g-toast.on { opacity:1; transform:translate(-50%,0); } .g-toast.warn { border-left-color:#e05555; }
.g-say { position:absolute; left:14px; bottom:16px; z-index:5; display:flex; gap:10px; align-items:flex-start; max-width:min(460px, 60%); background:rgba(8,12,15,.92); border:1px solid #2c3d47; border-radius:12px; padding:10px 14px 10px 10px; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.g-say .g-ava { width:42px; height:42px; flex:none; } .g-say b { color:var(--teal); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.g-say p { margin:2px 0 0; font-size:14px; color:#e3eef2; line-height:1.45; min-height:1.4em; }
.g-panel { position:absolute; top:12px; right:12px; bottom:12px; width:min(400px, 44%); z-index:6; overflow:auto; background:rgba(12,18,22,.94); border:1px solid #2c3d47; border-top:3px solid var(--tenant); border-radius:12px; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.5); animation:slide .3s ease; }
.g-panel.warn { border-top-color:#e05555; }
@keyframes slide { from { transform:translateX(30px); opacity:0; } to { transform:none; opacity:1; } }
.g-panel h3 { margin:0 0 10px; } .g-pbody p { font-size:14px; }
.g-got { margin:12px 0 4px; padding:10px 12px; border-radius:8px; background:rgba(6,145,192,.12); border:1px solid rgba(6,145,192,.4); font-size:14px; display:flex; align-items:center; justify-content:space-between; }
.g-pbtns { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } .g-pbtns button { margin:0; }
.g-fade { position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; transition:opacity .3s; z-index:7; } .g-fade.on { opacity:1; }
.g-loading { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; background:#07090b; z-index:8; color:#9fb3bd; }
.spinner { width:38px; height:38px; border:3px solid #22303a; border-top-color:var(--teal); border-radius:50%; animation:spin 1s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.g-menu { position:fixed; inset:0; display:grid; place-items:center; background:rgba(4,6,8,.75); z-index:20; } .g-menu .card { width:min(420px, calc(100% - 32px)); display:flex; flex-direction:column; } .g-menu button { margin:6px 0 0; }
.g-code { display:flex; gap:6px; margin:12px 0; } .g-code input { width:46px; text-align:center; font:700 20px ui-monospace, monospace; padding:10px 0; letter-spacing:.05em; border-color:#3a4650; }
.g-code input:focus { border-color:var(--teal); outline:none; }
.shake { animation:shake .4s; } @keyframes shake { 20%,60% { transform:translateX(-6px); } 40%,80% { transform:translateX(6px); } }
.tip { font-size:13px; color:var(--teal); }
.explorer { background:#f2f4f6; color:#222; border-radius:6px; padding:10px 12px; font:13px/1.8 system-ui, sans-serif; }
.g-panel .lockscreen { margin:0 auto 10px; } .ls-n span { display:block; }
.g-panel .chatbot { border-radius:8px; font:13px/1.45 system-ui, sans-serif; padding:12px; }
.g-panel .doc { background:#f3efe6; border-radius:4px; padding:14px; font:14px/1.5 Georgia, serif; }
@media (max-width: 760px) {
  .g-wrap { padding:0; } .g-frame { width:100%; height:100%; border-radius:0; }
  .g-body { flex-direction:column; } .g-inv { width:auto; flex-direction:row; border-left:0; border-top:1px solid #22303a; padding:6px 8px; } .g-inv h4, .g-sel { display:none; }
  #gSlots { flex-direction:row; } .g-inv .slot { width:52px; height:52px; padding:8px; }
  .g-combo .slot { width:30px; font-size:12px; } .g-brand { display:none; } .g-arrow { width:40px; height:70px; }
  .g-panel { left:8px; right:8px; width:auto; top:auto; max-height:60%; }
}

/* ===== interações v3 ===== */
.g-panel.wide { width:min(780px, 72%); }
.video { width:100%; border-radius:8px; display:block; background:#000; box-shadow:inset 0 0 0 1px #2c3d47; }
.photo { width:100%; border:10px solid #1c1712; border-radius:3px; } .caption { font-style:italic; text-align:center; }
.kp { width:220px; margin:6px auto; padding:14px; background:#15191c; border-radius:12px; border:1px solid #2c3d47; }
.kp-d { font:700 20px ui-monospace, monospace; text-align:center; letter-spacing:.15em; padding:10px; margin-bottom:10px; background:#0b1a10; color:#9ff7b4; border-radius:6px; min-height:24px; }
.kp-g { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .kp-g button { margin:0; padding:12px 0; font:700 18px ui-monospace, monospace; background:#2a3238; border-radius:8px; } .kp-g button:hover { background:#36424a; }
.lcd { font:600 13px/1.6 ui-monospace, monospace; background:#0b1a10; color:#9ff7b4; padding:10px 12px; border-radius:6px; margin-bottom:10px; }
.sub { font-size:13px; color:#cfe6ee; background:rgba(255,255,255,.05); border-left:3px solid var(--teal); padding:6px 10px; min-height:0; } .sub:empty { display:none; }
.ls-b { display:flex; gap:6px; margin-top:8px; } .ls-b button { margin:0; padding:6px 12px; font-size:13px; }
.strips { display:flex; gap:4px; justify-content:center; margin:12px 0; padding:10px; background:#2b2622; border-radius:8px; }
.strip { margin:0; width:24%; height:170px; padding:8px 6px; background:#f3efe6; color:#333; border-radius:2px; clip-path:polygon(0 2%, 100% 0, 97% 100%, 3% 98%); font:13px/1.35 Georgia, serif; display:flex; align-items:center; justify-content:center; text-align:center; transform:rotate(-1deg); }
.strip:nth-child(even) { transform:rotate(1.2deg); } .strip.sel { outline:3px solid var(--teal); } .strips.done .strip { transform:none; clip-path:none; border-radius:0; }
.strips.done { gap:0; } .strips.done .strip:last-child span { background:#ffe14d; padding:2px 4px; font-weight:700; }
.dialog { max-height:260px; overflow:auto; } .dialog p { font-size:14px; } .d-sys { color:#9fb3bd; font-style:italic; text-align:center; }
.dopts { display:flex; flex-direction:column; gap:6px; } .dopts button { margin:0; text-align:left; white-space:normal; line-height:1.35; }
.hint-btn { display:flex; justify-content:space-between; width:100%; margin:6px 0 0; } .hint-btn span { opacity:.8; } .hint-btn:disabled { opacity:.35; cursor:not-allowed; }
.hint-open { border-left:3px solid var(--teal); padding:6px 10px; margin:8px 0; background:rgba(74,173,190,.08); } .hint-open p { margin:4px 0 0; font-size:14px; }
.postit.big { font:700 26px "Comic Sans MS", cursive; padding:16px 22px; color:#333; margin:12px auto; display:block; width:max-content; }
.os { background:#1b2a35; border-radius:10px; overflow:hidden; min-height:360px; border:6px solid #0c0f11; }
.os-lock { min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px; background:radial-gradient(circle at 50% 20%, #2a4a5c, #101a20); }
.os-clock { font:300 48px system-ui, sans-serif; } .os-user { display:flex; align-items:center; gap:8px; } .os-ava { width:36px; height:36px; border-radius:50%; background:var(--azul); display:grid; place-items:center; font-weight:700; }
#osf { display:flex; gap:6px; } #osf input { width:200px; } #osf button { margin:0; } .os-flip { margin:4px 0 0; font-size:13px; }
.os-desk { min-height:360px; display:flex; flex-direction:column; background:#e9edf0; color:#222; }
.os-bar { display:flex; gap:4px; padding:6px; background:#22313b; align-items:center; } .os-bar button { margin:0; padding:6px 12px; font-size:13px; background:#34495a; } .os-bar button.on { background:var(--azul); } .os-bar span { margin-left:auto; color:#9ff7b4; font-size:12px; }
.os-win { padding:12px; flex:1; color:#222; } .os-win p { color:#333; } .os-win .muted { color:#667; }
.mail { display:grid; grid-template-columns:200px 1fr; gap:10px; min-height:300px; }
.mail-list { display:flex; flex-direction:column; gap:4px; } .mail-list button { margin:0; text-align:left; background:#fff; color:#222; border:1px solid #d5dbe0; padding:8px; font-size:12px; } .mail-list button.on { border-color:var(--azul); background:#e6f4fa; } .mail-list b, .mail-list span { display:block; }
.mail-read { background:#fff; border:1px solid #d5dbe0; border-radius:6px; padding:12px; font-size:14px; } .mail-read h4 { margin:0 0 4px; } .mail-from { color:#667 !important; font-size:12px; }
.phish { background:#d93025; } .files { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .files > div { background:#fff; border:1px solid #d5dbe0; border-radius:6px; padding:10px; }
.link { background:none; color:#0b64a0; padding:0; margin:0; text-decoration:underline; } .zipf { display:flex; gap:8px; align-items:end; margin-top:10px; } .zipf label { color:#445; } .zipf button { margin:0; }
.xls { margin-top:10px; background:#fff; } .xls th { background:#1d6f42; color:#fff; } .xls td { color:#222; border-bottom:1px solid #ddd; }
.score { display:flex; gap:20px; align-items:center; padding:14px 18px; margin:10px 0; background:rgba(6,145,192,.1); border:1px solid rgba(6,145,192,.4); border-radius:10px; }
.score-n { font:800 44px Technor, system-ui, sans-serif; color:#fff; line-height:1; } .score-n span { display:block; font-size:12px; letter-spacing:.14em; color:var(--teal); text-transform:uppercase; }
.score ul { margin:0; padding-left:18px; color:var(--txt); font-size:14px; line-height:1.6; }