*{box-sizing:border-box;margin:0;padding:0}
html, body {height: 100%; width: 100%;}
body{font-family:var(--fh);background:#f8f8f6;color:#1a1a18;font-size:15px;line-height:1.6;display:flex;flex-direction:column;min-height:100vh;}
.wrap{width:100%;max-width:560px;padding:20px 14px 40px;margin:auto;position:relative;}
h1{font-size:20px;font-weight:500;margin:4px 0 2px}
h2{font-size:16px;font-weight:500;margin:2px 0 0}
p{margin:0}
button{font-family:inherit;cursor:pointer;touch-action:manipulation}
.ctx-card{touch-action:manipulation}
/* animations */
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
.shake { animation: shake 0.4s ease-in-out; }
@keyframes pulse-glow {
0% { box-shadow: 0 0 0 0 rgba(29, 158, 117, 0.4); }
70% { box-shadow: 0 0 0 15px rgba(29, 158, 117, 0); }
100% { box-shadow: 0 0 0 0 rgba(29, 158, 117, 0); }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* cards */
.card{background:#fff;border:0.5px solid #ddd;border-radius:var(--cm-r-card);padding:12px 14px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-bottom:16px}
/* context card */
.ctx-card{background:#fff;border:0.5px solid #ddd;border-radius:var(--cm-r-card);padding:10px 12px;cursor:pointer;transition:border 0.18s var(--cm-ease),background 0.18s var(--cm-ease),transform 0.18s var(--cm-ease),box-shadow 0.18s var(--cm-ease);position:relative}
.ctx-card:active{transform:scale(0.98)}
.ctx-card.selected{border:1.5px solid #378ADD;background:var(--cm-hud-soft)}
.ctx-card.disabled{opacity:0.45;cursor:not-allowed}
.ctx-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.ctx-card-title{display:flex;gap:8px;align-items:center;flex:1}
.ctx-card-label{font-size:13px;font-weight:500;line-height:1.3}
.tip-btn{background:none;border:0.5px solid #ccc;border-radius:50%;width:18px;height:18px;font-size:10px;cursor:pointer;color:#888;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;transition:all 0.2s}
.tip-btn:hover{background:#eee;color:#333}
.tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.tag{font-size:11px;border-radius:var(--cm-r-chip);padding:2px 6px}
.tag-tokens{background:#f0f0ec;color:#666}
.tag-mod{background:var(--cm-hud-soft);color:var(--cm-hud-line);font-weight:bold}
.tag-low{background:#EAF3DE;color:#3B6D11}
.tag-med{background:#FAEEDA;color:#854F0B}
.tag-high{background:#FCEBEB;color:#A32D2D}
.tip-box{margin-top:8px;font-size:12px;color:#555;background:#f8f8f6;border-radius:6px;padding:8px 10px;line-height:1.5}
.tip-box strong{color:#1a1a18;font-weight:500;display:block;margin-bottom:3px}
/* tool inventory */
.tool-inventory { background:#fff; border:0.5px solid #ddd; border-radius:var(--cm-r-card); padding:12px 14px; margin-bottom:16px; box-shadow:0 2px 4px rgba(0,0,0,0.02); }
.tool-inv-title { font-size:13px; font-weight:600; margin-bottom:12px; color:#111; display:flex; align-items:center; gap:6px; }
.tools-row { display:flex; gap:8px; flex-wrap:wrap; }
.tool-badge { background:#f8f8f6; border:0.5px solid #ccc; border-radius:var(--cm-r-btn); padding:8px 10px; font-size:13px; font-weight:500; color:#333; flex:1; min-width:115px; text-align:center; position:relative; cursor:help; transition:background 0.2s var(--cm-ease); }
.tool-badge:hover { background:#eee; }
.tool-badge.empty { opacity:0.5; cursor:not-allowed; }
.tool-badge .count { background:var(--cm-hud-line); color:#fff; border-radius:var(--cm-r-pill); padding:2px 7px; font-size:11px; margin-left:4px; font-weight:bold; }
.tool-badge.empty .count { background:#888; }
/* tooltips */
.tooltip-text { visibility:hidden; width:220px; background-color:#222; color:#fff; text-align:left; border-radius:8px; padding:10px 12px; position:absolute; z-index:10; bottom:130%; left:50%; transform:translateX(-50%); opacity:0; transition:opacity 0.2s; font-size:12px; font-weight:normal; line-height:1.4; pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.tooltip-text::after { content:""; position:absolute; top:100%; left:50%; margin-left:-5px; border-width:5px; border-style:solid; border-color:#222 transparent transparent transparent; }
.tooltip-text strong { display:block; margin-bottom:4px; font-size:13px; color:#60A5FA; }
.tool-badge:hover .tooltip-text { visibility:visible; opacity:1; }
/* card tool actions */
.card-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; border-top:1px dashed #ddd; padding-top:10px; }
.btn-tool { padding:6px; border-radius:var(--cm-r-btn); border:0.5px solid #ccc; background:#f8f8f6; font-size:11px; cursor:pointer; color:#333; font-weight:500; transition:all 0.18s var(--cm-ease); }
.btn-tool:disabled { opacity:0.4; cursor:not-allowed; }
.btn-tool:hover:not(:disabled) { background:#e2e2e2; border-color:#bbb; }
.btn-tool.applied { background:var(--cm-hud-soft); border-color:#378ADD; color:var(--cm-hud-line); cursor:default; pointer-events:none; }
/* points pill */
.points-display { background: #FFF9E6; border: 1px solid #F6E095; color: #B28200; font-weight: 600; padding: 6px 12px; border-radius: var(--cm-r-pill); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
/* ── Agent persona screen ── */
.agent-screen-wrap{max-width:1040px;margin:auto;padding-top:6px;}
/* Deployment brief panel */
.agent-brief{
position:relative;
margin:6px 0 20px;padding:20px 22px 16px;
background:linear-gradient(180deg,#fafaf8 0%,#f3f2ec 100%);
border:0.5px solid #e0ddd0;border-radius:var(--cm-r-card);
box-shadow:0 2px 12px rgba(0,0,0,0.03), inset 0 0 0 1px rgba(255,255,255,0.5);
overflow:hidden;
}
.agent-brief::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(0deg,rgba(0,0,0,0.02) 0 1px,transparent 1px 3px);
}
.ab-corner{
position:absolute;width:12px;height:12px;border-color:#c8c4b6;border-style:solid;border-width:0;pointer-events:none;
}
.ab-corner-tl{top:8px;left:8px;border-top-width:1.5px;border-left-width:1.5px}
.ab-corner-tr{top:8px;right:8px;border-top-width:1.5px;border-right-width:1.5px}
.ab-corner-bl{bottom:8px;left:8px;border-bottom-width:1.5px;border-left-width:1.5px}
.ab-corner-br{bottom:8px;right:8px;border-bottom-width:1.5px;border-right-width:1.5px}
.ab-eyebrow{
position:relative;z-index:1;
display:inline-flex;align-items:center;gap:8px;
font-family:var(--cm-mono);
font-size:11px;letter-spacing:0.04em;color:var(--cm-hud-line);font-weight:600;
margin-bottom:8px;text-transform:none;
}
.ab-eyebrow-sep{color:#bbb}
.ab-title{position:relative;z-index:1;font-size:26px;font-weight:800;letter-spacing:-0.01em;margin:0 0 6px;color:#111}
.ab-brief{position:relative;z-index:1;font-size:14px;line-height:1.55;color:#444;margin:0 0 14px;max-width:780px}
.ab-actions{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
padding-top:10px;border-top:1px dashed #d6d2c4;
}
/* Roster header */
.agent-roster-head{
display:flex;align-items:baseline;justify-content:space-between;gap:10px;
margin:6px 2px 12px;
}
.ar-title{
font-family:inherit;
font-size:13px;letter-spacing:0;color:#444;font-weight:600;text-transform:none;
}
.ar-sub{font-size:12.5px;color:#888;}
/* Agent grid */
.agent-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
gap:14px;margin-bottom:24px;
}
/* Agent card (operative profile) */
.agent-card{
position:relative;background:#fff;
border:0.5px solid #ddd;border-radius:var(--cm-r-card);
padding:14px 14px 12px;cursor:pointer;
transition:transform 0.22s var(--cm-ease),box-shadow 0.22s var(--cm-ease),border-color 0.22s var(--cm-ease);
overflow:hidden;display:flex;flex-direction:column;gap:10px;
}
.agent-card::before{
content:"";position:absolute;inset:0;pointer-events:none;opacity:0.4;
background-image:
linear-gradient(transparent 95%,rgba(0,0,0,0.025) 95%),
linear-gradient(90deg,transparent 95%,rgba(0,0,0,0.025) 95%);
background-size:22px 22px;
}
.agent-card:hover:not(.locked){
border-color:var(--cm-hud-line);transform:translateY(-3px);
box-shadow:0 10px 22px rgba(24,95,165,0.10);
}
.agent-card:hover:not(.locked) .ac-cta{background:var(--cm-hud-line);color:#fff;}
.agent-card.locked{
cursor:default;
background:repeating-linear-gradient(-45deg,#f4f4f0 0 12px,#ececea 12px 24px);
border-color:#cdcdcd;
}
.agent-card.locked::before{opacity:0}
/* corner brackets reuse mc style */
.ac-corner{
position:absolute;width:10px;height:10px;border-color:#c8c4b6;border-style:solid;border-width:0;pointer-events:none;
}
.ac-corner-tl{top:6px;left:6px;border-top-width:1.5px;border-left-width:1.5px}
.ac-corner-tr{top:6px;right:6px;border-top-width:1.5px;border-right-width:1.5px}
.ac-corner-bl{bottom:6px;left:6px;border-bottom-width:1.5px;border-left-width:1.5px}
.ac-corner-br{bottom:6px;right:6px;border-bottom-width:1.5px;border-right-width:1.5px}
.agent-card.locked .ac-corner{border-color:#999}
/* head row */
.ac-head{display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:1;}
.ac-code{
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:11px;letter-spacing:0.14em;color:#888;font-weight:700;
}
.agent-card:not(.locked) .ac-code{color:var(--cm-hud-line)}
.ac-status{
font-family:inherit;
font-size:11px;letter-spacing:0;font-weight:600;
padding:3px 8px;border-radius:var(--cm-r-chip);
display:inline-flex;align-items:center;gap:5px;
text-transform:none;white-space:nowrap;
}
.ac-status.unlocked{background:#E1F5EE;color:#0f6e51;border:0.5px solid #b5e0cc}
.ac-status.classified{background:#1a1a18;color:#d4cfbe;letter-spacing:0}
.ac-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;box-shadow:0 0 0 3px rgba(15,110,81,0.18);}
/* identity */
.ac-body{display:flex;align-items:center;gap:12px;position:relative;z-index:1;}
.ac-icon{
font-size:30px;background:#f4f4f0;width:54px;height:54px;border-radius:50%;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
border:1px solid #e9e6db;
}
.agent-card.locked .ac-icon{background:#e7e5dc;filter:grayscale(0.6);}
.ac-meta{min-width:0;flex:1}
.ac-name{font-weight:700;font-size:15px;color:#111;line-height:1.25;margin-bottom:3px}
.ac-desc{font-size:12.5px;color:#666;line-height:1.45}
/* stats */
.ac-stats{
display:grid;grid-template-columns:repeat(2,1fr);gap:6px;
position:relative;z-index:1;
padding:8px;border-radius:8px;background:#faf9f4;border:0.5px dashed #ddd9c8;
}
.ac-stat{
display:flex;align-items:center;gap:6px;
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:10.5px;
}
.ac-stat-label{letter-spacing:0.1em;color:#888;font-weight:700;flex-shrink:0;width:36px;}
.ac-stat-val{font-weight:700;color:#222;margin-left:auto;}
.ac-stat-val.up{color:#0f6e51}
.ac-stat-val.down{color:#a55a17}
.ac-stat-val.flat{color:#555}
.ac-stat-val.bad{color:#8b2222}
.ac-stat-val.good{color:#0f6e51}
/* msg quote */
.ac-msg{
position:relative;z-index:1;
font-size:12px;color:#555;font-style:italic;line-height:1.5;
border-left:2px solid #d6d2c4;padding:0 0 0 10px;
}
.agent-card.locked .ac-msg{display:none}
/* CTA / unlock button */
.ac-cta{
margin-top:auto;position:relative;z-index:1;
font-family:inherit;
font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;
background:#fff;border:0.5px solid var(--cm-hud-line);color:var(--cm-hud-line);
border-radius:var(--cm-r-btn);padding:9px 14px;text-align:center;
transition:background 0.18s var(--cm-ease),color 0.18s var(--cm-ease);
}
.btn-unlock{
position:relative;z-index:1;margin-top:auto;
font-family:inherit;
font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;
background:var(--cm-hud-line);color:#fff;border:none;
border-radius:var(--cm-r-btn);padding:10px 14px;cursor:pointer;
transition:background 0.18s var(--cm-ease),transform 0.18s var(--cm-ease);
}
.btn-unlock:hover{background:var(--cm-hud-deep);transform:translateY(-1px)}
.btn-unlock:disabled{background:#bbb;cursor:not-allowed;transform:none;opacity:0.7}
.btn-unlock .bu-cost{opacity:0.85;font-weight:600;margin-left:6px}
@media(max-width:640px){
.agent-grid{grid-template-columns:1fr}
.ab-title{font-size:22px}
}
/* ── Agent reel: one agent at a time (lower cognitive load) ── */
.agent-grid:has(.agent-reel){display:block;} /* override grid display at every breakpoint (incl. desktop media queries) */
.agent-reel{display:flex;flex-direction:column;gap:16px;margin-bottom:24px;}
.agent-reel-stage{display:flex;align-items:center;justify-content:center;gap:12px;}
.reel-arrow{
flex-shrink:0;width:42px;height:42px;border-radius:50%;
background:#fff;border:0.5px solid #ddd;color:var(--cm-hud-line);
display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;
transition:background 0.18s var(--cm-ease),border-color 0.18s var(--cm-ease),transform 0.18s var(--cm-ease);
}
.reel-arrow:hover{background:var(--cm-hud-line);color:#fff;border-color:var(--cm-hud-line);transform:translateY(-2px);}
.reel-arrow:active{transform:translateY(0);}
.agent-spotlight{
flex:1;max-width:520px;cursor:default;
animation:cmReelIn 0.28s var(--cm-ease);
}
.agent-spotlight:hover{transform:none;box-shadow:none;border-color:#ddd;}
@keyframes cmReelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.agent-spotlight .ac-icon{font-size:34px;width:60px;height:60px;}
.agent-spotlight .ac-name{font-size:17px;}
.agent-spotlight .ac-desc{font-size:13px;}
/* best-fit ribbon */
.as-bestfit{
position:absolute;top:0;right:0;z-index:2;
background:#1D9E75;color:#fff;font-size:11px;font-weight:700;
display:inline-flex;align-items:center;gap:5px;
padding:4px 10px;border-bottom-left-radius:10px;
}
/* When the Best fit ribbon is present, drop the header so the Active pill clears it */
.agent-card:has(.as-bestfit) .ac-head{margin-top:22px;}
/* "what its prompt contains" preview */
.as-prompt{
position:relative;z-index:1;
background:#f7f9fc;border:0.5px solid #e2e8f1;border-radius:10px;
padding:12px 12px 11px;
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
.as-prompt-head{
font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;
color:var(--cm-hud-line);font-weight:700;
display:flex;align-items:center;gap:6px;margin-bottom:8px;
}
.as-prompt-system{
font-size:12.5px;color:#222;line-height:1.5;font-style:italic;
border-left:2px solid var(--cm-hud-line);padding-left:10px;margin-bottom:10px;
}
.as-prompt-block{display:flex;gap:8px;align-items:flex-start;margin-top:6px;}
.as-prompt-tag{
flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
padding:3px 0;border-radius:6px;margin-top:1px;width:58px;text-align:center;
}
.as-prompt-reads .as-prompt-tag{background:#E1F5EE;color:#0f6e51;}
.as-prompt-ignores .as-prompt-tag{background:#f1eee9;color:#9a8f7d;}
.as-prompt-block ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;flex:1;}
.as-prompt-block li{font-size:12px;line-height:1.4;position:relative;padding-left:14px;}
.as-prompt-block li::before{content:"▸";position:absolute;left:0;}
.as-prompt-reads li{color:#1e6e52;}
.as-prompt-reads li::before{color:#1D9E75;}
.as-prompt-ignores li{color:#9a8f7d;text-decoration:line-through;}
.as-prompt-ignores li::before{color:#bdb4a4;text-decoration:none;}
/* select button (full width, picked state) */
.as-select-btn{width:100%;cursor:pointer;}
.as-select-btn.picked,
.agent-spotlight.picked .as-select-btn{background:var(--cm-hud-line);color:#fff;}
.agent-spotlight.picked{border-color:var(--cm-hud-line);box-shadow:0 0 0 1px var(--cm-hud-line) inset;}
/* dots + counter */
.agent-reel-foot{display:flex;flex-direction:column;align-items:center;gap:8px;}
.agent-dots{display:flex;align-items:center;justify-content:center;gap:9px;}
.agent-dot{
width:11px;height:11px;border-radius:50%;padding:0;
border:1px solid #c8c4b6;background:#fff;cursor:pointer;
transition:transform 0.18s var(--cm-ease),background 0.18s var(--cm-ease),border-color 0.18s var(--cm-ease);
}
.agent-dot:hover{border-color:var(--cm-hud-line);}
.agent-dot.active{background:var(--cm-hud-line);border-color:var(--cm-hud-line);transform:scale(1.3);}
.agent-dot.locked{background:#e7e5dc;border-color:#cdcdcd;}
.agent-dot.locked.active{background:#8a8676;border-color:#8a8676;}
.agent-reel-counter{
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:11px;letter-spacing:0.08em;color:#888;font-weight:600;
}
@media(max-width:520px){
.reel-arrow{width:36px;height:36px;font-size:16px;}
.agent-reel-stage{gap:6px;}
}
/* budget bar */
.budget-row{display:flex;justify-content:space-between;margin-bottom:6px;align-items:center;}
.budget-label{font-size:13px;color:#666; display:flex; align-items:center; gap:6px;}
.budget-val{font-size:13px;font-weight:500;transition:color 0.3s;}
.budget-val.ok{color:#1D9E75}
.budget-val.warn{color:#BA7517}
.budget-val.over{color:#E24B4A}
.bar-track{height:8px;background:#eee;border-radius:4px;overflow:hidden;margin-bottom:14px}
.bar-fill{height:100%;border-radius:4px;transition:width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.3s}
/* sprint event overlay */
.event-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:100; display:none; justify-content:center; align-items:center; backdrop-filter: blur(2px); }
.event-modal { background:#fff; width:90%; max-width:400px; border-radius:var(--cm-r-modal); padding:20px; box-shadow:0 10px 25px rgba(0,0,0,0.2); text-align:center; transform: scale(0.9); transition: transform 0.28s var(--cm-ease-spring); }
.event-overlay.active { display:flex; }
.event-overlay.active .event-modal { transform: scale(1); }
.event-title { font-size:18px; font-weight:600; color:#E24B4A; margin-bottom:8px; display:flex; justify-content:center; align-items:center; gap:8px; }
.event-text { font-size:14px; color:#555; margin-bottom:20px; line-height:1.5; }
.btn-event { background:#111; color:#fff; padding:10px 20px; border:none; border-radius:var(--cm-r-btn); font-weight:500; cursor:pointer; width:100%; font-size:14px; }
.btn-event:hover { background:#333; }
/* toasts */
#toast-container { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:50; pointer-events:none; }
.toast { background:#222; color:#fff; padding:10px 16px; border-radius:var(--cm-r-btn); font-size:13px; font-weight:500; box-shadow:0 4px 12px rgba(0,0,0,0.15); animation: toastIn 0.32s var(--cm-ease), toastOut 0.3s 2.7s forwards; display:flex; align-items:center; gap:8px; }
.toast.pos { border-left:4px solid #1D9E75; }
.toast.neg { border-left:4px solid #E24B4A; }
@keyframes toastIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; } }
/* screens */
.screen{display:none}
.screen.active{display:block}
/* loading screen (Agent Processing) */
.loading-container { text-align: center; padding: 40px 20px; }
.loading-agent { font-size: 64px; animation: bounce 1s infinite; margin-bottom: 20px; display: inline-block; }
.loading-text { font-size: 16px; font-weight: 600; color: var(--cm-hud-line); margin-bottom: 10px; }
.loading-bar-track { height: 6px; background: #eee; border-radius: 4px; overflow: hidden; width: 100%; max-width: 520px; margin: 0 auto; }
.loading-bar-fill { height: 100%; background: var(--cm-hud-line); width: 0%; transition: width 0.4s ease-out; }
/* live thought-stream (terminal-style) */
.thought-stream {
margin: 18px auto 0;
max-width: 560px;
background: #0d1117;
border: 1px solid #1f2730;
border-radius: 10px;
padding: 14px 16px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 12.5px;
line-height: 1.55;
color: #c9d1d9;
text-align: left;
min-height: 140px;
max-height: 280px;
overflow-y: auto;
box-shadow: 0 6px 24px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.02);
}
.thought-stream::-webkit-scrollbar { width: 6px; }
.thought-stream::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
@keyframes ts-fadein {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: translateY(0); }
}
.thought-line {
white-space: pre-wrap;
word-break: break-word;
animation: ts-fadein 0.18s ease-out;
padding: 1px 0;
}
.thought-info { color: #8b949e; }
.thought-good { color: #56d364; }
.thought-warn { color: #d29922; }
.thought-bad { color: #f85149; }
/* mission bar */
.mission-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.mission-meta small{font-size:11px;color:#aaa;text-transform:none;letter-spacing:0}
.glossary-btn{font-size:12px;padding:6px 10px;border:0.5px solid #ccc;border-radius:var(--cm-r-btn);background:#fff;cursor:pointer;color:#666;transition:opacity 0.2s var(--cm-ease), background 0.2s var(--cm-ease);}
.glossary-btn:disabled{opacity:0.5;cursor:not-allowed;}
/* highlighted hint button (CTA in mission bar) */
#hint-btn{
background: linear-gradient(135deg,#FFE89A 0%, #F5A623 100%);
border:1px solid #E89417;
color:#5b3a00;
font-weight:700;
padding:7px 14px;
box-shadow: 0 2px 6px rgba(245,166,35,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
position:relative;
animation: hint-pulse 2.4s ease-in-out infinite;
transition: transform .12s ease, box-shadow .15s ease, opacity .2s;
}
#hint-btn:hover:not(:disabled){
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(245,166,35,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
}
#hint-btn:active:not(:disabled){ transform: translateY(0) scale(0.98); }
#hint-btn:disabled{
background:#f4f4f0;
border-color:#ddd;
color:#999;
font-weight:500;
box-shadow:none;
animation:none;
opacity:0.7;
}
@keyframes hint-pulse{
0%, 100% { box-shadow: 0 2px 6px rgba(245,166,35,0.35), 0 0 0 0 rgba(245,166,35,0.45), inset 0 1px 0 rgba(255,255,255,0.5); }
50% { box-shadow: 0 2px 6px rgba(245,166,35,0.35), 0 0 0 8px rgba(245,166,35,0), inset 0 1px 0 rgba(255,255,255,0.5); }
}
.mission-brief{background:#f4f4f0;border-radius:8px;padding:10px 12px;margin-bottom:14px;font-size:13px;color:#666;line-height:1.5}
/* result */
.result-hero{text-align:center;padding:16px 0 12px; position:relative;}
.result-emoji{font-size:32px;margin-bottom:6px}
.result-grade{font-size:20px;font-weight:500}
.result-score{font-size:48px;font-weight:600;margin-top:4px; transition: color 0.3s;}
.result-score span{font-size:16px;color:#888;font-weight:normal;}
.flawless-badge { display:none; background: linear-gradient(135deg, #F5C51B, #F59E0B); color: #fff; padding: 4px 12px; border-radius: var(--cm-r-pill); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 8px auto 0; width: fit-content; box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4); animation: pulse-glow 1.5s infinite; }
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.stat-cell{background:#f4f4f0;border-radius:8px;padding:10px;text-align:center}
.stat-num{font-size:20px;font-weight:500}
.stat-label{font-size:11px;color:#888;margin-top:2px}
.rot-alert{background:#FCEBEB;border:0.5px solid #F09595;border-radius:8px;padding:10px 12px;margin-bottom:12px;font-size:13px;color:#A32D2D}
.debrief{background:#f4f4f0;border-radius:12px;padding:12px 14px;margin-bottom:14px}
.debrief p{font-size:12px;color:#555;line-height:1.5;margin-bottom:6px}
.debrief p:last-child{margin-bottom:0}
.debrief .rule{border-top:0.5px solid #ddd;padding-top:8px;margin-top:6px;font-size:12px;color:#555;line-height:1.5}
/* score breakdown & improvements */
.score-breakdown { background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; padding: 12px; margin-bottom: 14px; font-size: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.score-row { display: flex; justify-content: space-between; margin-bottom: 6px; color: #555; }
.score-row.total { font-weight: 600; color: #111; border-top: 1px dashed #ccc; padding-top: 8px; margin-top: 6px; font-size: 13px; }
.score-val.pos { color: #1D9E75; font-weight:500; }
.score-val.neg { color: #E24B4A; font-weight:500; }
.improvement-box { background: #FFF9E6; border: 1px solid #F6E095; border-radius: 8px; padding: 12px; margin-top: 14px; font-size: 12px; }
.improvement-title { font-weight: 600; color: #B28200; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; font-size: 13px; }
/* buttons */
.btn-run{width:100%;padding:13px;border-radius:var(--cm-r-btn);border:none;font-size:14px;font-weight:500;transition:background 0.2s var(--cm-ease), transform 0.18s var(--cm-ease)}
.btn-run:active{transform:scale(0.98)}
.btn-run.active{background:var(--cm-hud-line);color:#fff}
.btn-run.inactive{background:#eee;color:#aaa;cursor:not-allowed}
.btn-run.danger{background:#993C1D;color:#fff}
.btn-row{display:flex;gap:10px;margin-top:4px}
.btn-sec{flex:1;padding:10px;border-radius:var(--cm-r-btn);border:0.5px solid #ddd;background:#fff;font-size:13px;color:#333}
.btn-pri{flex:1;padding:10px;border-radius:var(--cm-r-btn);border:0.5px solid var(--cm-hud-line);background:var(--cm-hud-soft);font-size:13px;color:var(--cm-hud-line);font-weight:500}
.btn-win{flex:1;padding:10px;border-radius:var(--cm-r-btn);border:0.5px solid #0F6E56;background:#E1F5EE;font-size:13px;color:#0F6E56;font-weight:500}
.btn-start{width:100%;margin-top:8px;padding:12px;border-radius:var(--cm-r-btn);border:none;background:var(--cm-hud-line);color:#fff;font-size:14px;font-weight:500;cursor:pointer}
/* glossary */
#glossary-overlay .event-modal{
width:92%;
max-width:560px !important;
max-height:84vh !important;
padding:0 !important;
border-radius:var(--cm-r-modal);
overflow:hidden !important;
display:flex; flex-direction:column;
text-align:left;
}
.glossary-modal-head{
padding:16px 20px 12px;
border-bottom:1px solid #ececea;
background: linear-gradient(180deg,#ffffff 0%, #f8f8f6 100%);
display:flex; justify-content:space-between; align-items:center;
flex-shrink:0;
}
.glossary-modal-title{font-weight:700;font-size:16px;color:#111;display:flex;align-items:center;gap:8px}
.glossary-modal-sub{font-size:12px;color:#888;font-weight:400;margin-top:2px}
.glossary-close-btn{background:#f4f4f0;border:1px solid #e2e2e2;border-radius:50%;width:28px;height:28px;cursor:pointer;color:#666;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .15s}
.glossary-close-btn:hover{background:#e8e8e3;color:#111}
#glossary-content{padding:8px 18px 18px;overflow-y:auto;flex:1;}
.glossary-cat{margin-top:14px}
.glossary-cat:first-child{margin-top:6px}
.glossary-cat-head{
font-size:12px; font-weight:600; letter-spacing:0;
text-transform:none; color:#444;
display:flex; align-items:center; gap:6px;
padding:8px 4px; margin-bottom:6px;
border-bottom:1px dashed #e2e2e2;
}
.glossary-cat-icon{font-size:13px;letter-spacing:0}
.glossary-cat-body{display:flex;flex-direction:column;gap:6px;padding-top:4px}
.glossary-item{
display:flex; gap:12px; align-items:flex-start;
padding:10px 12px;
background:#fff;
border:1px solid #eee;
border-radius:10px;
transition: border-color .15s, transform .15s, box-shadow .15s;
border-bottom:1px solid #eee;
margin-bottom:0;
}
.glossary-item:hover{
border-color:#cfdcec;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(20,20,20,0.04);
}
.glossary-item:last-child{border-bottom:1px solid #eee}
.glossary-icon{
font-size:18px; line-height:1;
width:32px; height:32px; flex-shrink:0;
background:#f8f8f6; border:1px solid #ececea; border-radius:8px;
display:flex; align-items:center; justify-content:center;
}
.glossary-body{flex:1; min-width:0}
.glossary-term{
font-weight:600; font-size:13.5px; color:#111;
margin-bottom:3px;
}
.glossary-def{font-size:12.5px;color:#555;line-height:1.55}
.glossary-link{
display:inline-block; margin-top:6px;
font-size:11.5px; font-weight:600; color:var(--cm-hud-line);
text-decoration:none;
padding:3px 8px; border-radius:6px;
background:var(--cm-hud-soft); border:1px solid #cfdcec;
transition:background .15s, border-color .15s;
}
.glossary-link:hover{background:#d8e8f7;border-color:#9fc1e2;text-decoration:none}
.glossary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
/* category accent stripes */
.glossary-cat[data-cat="fail"] .glossary-icon{background:#FCEBEB;border-color:#F2C8C8}
.glossary-cat[data-cat="tool"] .glossary-icon{background:#E1F5EE;border-color:#B5E0CC}
.glossary-cat[data-cat="core"] .glossary-icon{background:var(--cm-hud-soft);border-color:#cfdcec}
.hint-label{font-size:12px;color:#aaa;margin-bottom:10px}
.select-count{font-size:12px;color:#aaa;margin-bottom:10px}
@media(max-width:400px){
.card-grid{grid-template-columns:1fr}
.card-actions{grid-template-columns:1fr}
}
/* ── Stars ── */
.star-row{display:flex;gap:3px;justify-content:center;margin:8px 0 4px}
.star-filled{font-size:22px;filter:drop-shadow(0 0 3px rgba(255,200,0,0.5))}
.star-empty{font-size:22px;opacity:0.25}
.star-thresholds{font-size:11px;color:#aaa;text-align:center;margin-bottom:4px}
/* ── Rank badge ── */
.rank-badge{background:var(--cm-brand-grad);color:#fff;font-weight:600;padding:6px 14px;border-radius:var(--cm-r-pill);display:inline-flex;align-items:center;gap:6px;font-size:13px;box-shadow:0 2px 8px rgba(24,95,165,0.25)}
/* ── Streak badge ── */
.streak-badge{background:linear-gradient(135deg,#F5C51B,#F59E0B);color:#fff;font-weight:700;padding:5px 12px;border-radius:var(--cm-r-pill);display:inline-flex;align-items:center;gap:4px;font-size:13px;box-shadow:0 2px 8px rgba(245,158,11,0.35);animation:pulse-glow 1.5s infinite}
/* ── Mission select head (ops console) ── */
.mission-select-head{
position:relative;display:grid;
grid-template-columns:1fr auto;grid-template-rows:auto auto;
gap:8px 14px;align-items:end;flex-wrap:wrap;
margin:6px 0 22px;padding:18px 20px 16px;
background:linear-gradient(180deg,#fafaf8 0%,#f3f2ec 100%);
border:0.5px solid #e0ddd0;border-radius:var(--cm-r-card);
box-shadow:0 2px 12px rgba(0,0,0,0.03), inset 0 0 0 1px rgba(255,255,255,0.5);
overflow:hidden;
}
.mission-select-head::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(0deg,rgba(0,0,0,0.02) 0 1px,transparent 1px 3px);
}
.mission-select-head::after{
content:"// CONTEXT-MATTERS / OPS";
position:absolute;right:14px;top:8px;
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:9.5px;letter-spacing:0.16em;color:#b9b3a3;
}
.msh-left{min-width:0;position:relative;z-index:1;grid-column:1}
.msh-eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--cm-mono);
font-size:11px;letter-spacing:0.04em;color:#1D9E75;font-weight:600;
margin-bottom:6px;text-transform:none;
}
.msh-pulse{
width:7px;height:7px;border-radius:50%;background:#1D9E75;
box-shadow:0 0 0 0 rgba(29,158,117,0.6);animation:msh-pulse 1.6s infinite;
}
@keyframes msh-pulse{
0%{box-shadow:0 0 0 0 rgba(29,158,117,0.55)}
70%{box-shadow:0 0 0 7px rgba(29,158,117,0)}
100%{box-shadow:0 0 0 0 rgba(29,158,117,0)}
}
.msh-title{font-size:30px;font-weight:800;letter-spacing:-0.01em;margin:0 0 4px;color:#111}
.msh-sub{font-size:13.5px;color:#6b6b6b;margin:0}
.msh-right{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
position:relative;z-index:1;grid-column:2;
}
.msh-progress{
grid-column:1 / -1;display:flex;align-items:center;gap:10px;
position:relative;z-index:1;margin-top:12px;
padding-top:12px;border-top:1px dashed #d6d2c4;
}
.msh-progress-label{
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:10.5px;letter-spacing:0.14em;color:#888;font-weight:700;
}
.msh-progress-bar{
flex:1;height:6px;background:#e6e2d5;border-radius:3px;overflow:hidden;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.06);
}
.msh-progress-fill{
display:block;height:100%;width:0;
background:var(--cm-brand-grad);
transition:width 0.6s cubic-bezier(.2,.8,.2,1);
box-shadow:0 0 8px rgba(24,95,165,0.4);
}
.msh-progress-val{
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:11px;letter-spacing:0.08em;color:#444;font-weight:700;min-width:46px;text-align:right;
}
@media(max-width:640px){
.mission-select-head{grid-template-columns:1fr}
.msh-right{grid-column:1;justify-content:flex-start}
}
/* ── Mission grid ── */
.mission-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
gap:14px;margin-bottom:14px;
}
/* Compact locked tile grid — shown below the open grid */
.mission-locked-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:10px;margin-bottom:24px;
}
.mission-locked-grid:empty{display:none}
.mission-card-mini{
position:relative;
display:flex;flex-direction:column;gap:8px;
padding:14px;
min-height:92px;
border:0.5px dashed #cdcdcd;border-radius:10px;
background:repeating-linear-gradient(-45deg,#f4f4f0 0 8px,#ececea 8px 16px);
color:#7a766b;
cursor:not-allowed;
}
.mcm-head{
display:flex;align-items:center;justify-content:space-between;gap:8px;
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:11px;letter-spacing:0.12em;font-weight:700;
}
.mcm-code{color:#5b5648}
.mcm-lock{font-size:13px;opacity:0.75}
.mcm-title{
font-size:13px;line-height:1.35;color:#5b5648;font-weight:600;
}
/* Footer when no left-side status text remains */
.mc-foot.mc-foot-end{justify-content:flex-end}
/* Make rank badge feel clickable (it's an easter-egg hotspot) */
.rank-badge{cursor:pointer;user-select:none}
/* ── Mission filter tabs (surface) ── */
.mission-filter-tabs{
display:flex;flex-wrap:wrap;gap:8px;
margin:6px 0 16px;
padding:8px;border:0.5px dashed #cdcdcd;border-radius:10px;
background:linear-gradient(180deg,#fbfaf6,#f6f4ee);
}
.mft-tab{
display:inline-flex;align-items:center;gap:8px;
padding:7px 12px;
background:#fff;border:0.5px solid #d6d2c4;border-radius:var(--cm-r-pill);
font-family:inherit;
font-size:12.5px;letter-spacing:0;color:#555;font-weight:600;
cursor:pointer;transition:all 0.2s var(--cm-ease);
}
.mft-tab:hover{ border-color:var(--cm-hud-line);color:var(--cm-hud-line);transform:translateY(-1px); }
.mft-tab.on{
background:var(--cm-hud-line);color:#fff;border-color:var(--cm-hud-line);
box-shadow:0 4px 12px rgba(24,95,165,0.25);
}
.mft-icon{ font-size:13px; }
.mft-count{
display:inline-flex;align-items:center;justify-content:center;
min-width:18px;height:18px;padding:0 5px;border-radius:9px;
background:rgba(0,0,0,0.06);color:inherit;font-size:10px;
}
.mft-tab.on .mft-count{ background:rgba(255,255,255,0.22); }
.mft-tab.empty{
color:#9a9382;border-style:dashed;background:repeating-linear-gradient(135deg,#fff,#fff 6px,#f5f1e6 6px,#f5f1e6 12px);
}
.mft-tab.empty:hover{ color:var(--cm-hud-line);border-color:var(--cm-hud-line); }
.mft-tab.empty .mft-count{
background:#fff3d4;color:#a07a13;font-weight:600;letter-spacing:0;text-transform:none;
}
.mft-tab.empty.on{
background:#a07a13;color:#fff;border-color:#a07a13;
box-shadow:0 4px 12px rgba(160,122,19,0.25);
}
.mft-tab.empty.on .mft-count{ background:rgba(255,255,255,0.22); color:#fff; }
/* Empty-state tile when a surface has no built-in missions yet */
.mission-empty-tile{
position:relative;grid-column:1 / -1;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
padding:34px 22px;border:0.5px dashed #cdcdcd;border-radius:10px;
background:repeating-linear-gradient(135deg,#fcfaf3,#fcfaf3 8px,#f6f1e2 8px,#f6f1e2 16px);
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#6b6450;text-align:center;
}
.met-icon{ font-size:28px;filter:grayscale(0.2); }
.met-title{ font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:#3b3424; }
.met-sub{ font-size:12px;color:#8a8470;max-width:380px;line-height:1.5; }
/* ── Mission card: surface tag in meta row ── */
.mc-surface-tag{
display:inline-flex;align-items:center;gap:4px;
padding:2px 7px;border-radius:4px;
background:var(--cm-hud-soft);color:var(--cm-hud-line);border:0.5px solid #c9def3;
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:9.5px;letter-spacing:0.08em;font-weight:700;
white-space:nowrap;
}
/* ── Mission card: sprint toggle pill + foot actions ── */
.mc-foot-actions{
display:inline-flex;align-items:center;gap:8px;
}
.mc-sprint-pill{
display:inline-flex;align-items:center;gap:5px;
padding:6px 10px;border-radius:999px;
background:#fff;border:0.5px solid #d6d2c4;color:#777;
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:10.5px;letter-spacing:0.06em;font-weight:700;
cursor:pointer;transition:all 0.15s ease;
}
.mc-sprint-pill:hover{ border-color:var(--cm-accent);color:var(--cm-accent); }
.mc-sprint-pill.on{
background:linear-gradient(135deg,#7B61FF,#DC80A6);
color:#fff;border-color:#7B61FF;
box-shadow:0 0 12px rgba(124,58,237,0.35);
}
.mc-sprint-pill.on .mcsp-state{ color:#fff; }
.mcsp-state{ color:#999; }
/* ── Briefing read-only badges ── */
.brief-badges{ display:flex;flex-direction:column;gap:8px;margin-top:4px; }
.brief-badge{
display:inline-flex;align-items:center;gap:8px;
padding:9px 12px;border-radius:8px;
background:#fff;border:0.5px solid #d6d2c4;
font-size:13px;font-weight:600;color:#222;
}
.bbg-surface{
background:var(--cm-hud-soft);border-color:#c9def3;color:var(--cm-hud-line);
}
.bbg-sprint{ color:#666; }
.bbg-sprint.on{
background:linear-gradient(135deg,#7B61FF,#DC80A6);
color:#fff;border-color:#7B61FF;
box-shadow:0 4px 12px rgba(124,58,237,0.25);
}
.bbg-icon{ font-size:16px; }
.bbg-label{ letter-spacing:0.02em; }
/* ── Mission card (dossier briefing) ── */
.mission-card{
position:relative;background:#fff;
border:0.5px solid #ddd;border-radius:var(--cm-r-card);
padding:14px 14px 12px;cursor:pointer;
transition:transform 0.22s var(--cm-ease),box-shadow 0.22s var(--cm-ease),border-color 0.22s var(--cm-ease);
overflow:hidden;display:flex;flex-direction:column;gap:8px;
}
.mission-card::before{
content:"";position:absolute;inset:0;pointer-events:none;opacity:0.45;
background-image:
linear-gradient(transparent 95%,rgba(0,0,0,0.025) 95%),
linear-gradient(90deg,transparent 95%,rgba(0,0,0,0.025) 95%);
background-size:22px 22px;
}
.mission-card:hover:not(.locked){
border-color:var(--cm-hud-line);transform:translateY(-3px);
box-shadow:0 10px 22px rgba(24,95,165,0.10);
}
.mission-card.locked{
cursor:not-allowed;opacity:1;filter:none;
background:
repeating-linear-gradient(-45deg,#f4f4f0 0 12px,#ececea 12px 24px);
border-color:#cdcdcd;
}
.mission-card.locked::before{opacity:0}
.mission-card.completed{border-color:#1D9E75}
.mission-card.perfect{
border-color:#FFD700;
box-shadow:0 0 0 1px #FFD700,0 6px 16px rgba(255,200,0,0.18);
}
.mission-card.ready{
border-color:var(--cm-hud-line);
box-shadow:0 0 0 1px var(--cm-hud-line),0 6px 18px rgba(24,95,165,0.18);
animation:mc-ready-glow 2.4s ease-in-out infinite;
}
@keyframes mc-ready-glow{
0%,100%{box-shadow:0 0 0 1px var(--cm-hud-line),0 6px 18px rgba(24,95,165,0.18)}
50%{box-shadow:0 0 0 2px var(--cm-hud-line),0 12px 26px rgba(24,95,165,0.30)}
}
/* corner brackets */
.mc-corner{
position:absolute;width:10px;height:10px;
border-color:#c8c4b6;border-style:solid;border-width:0;pointer-events:none;
}
.mc-corner-tl{top:6px;left:6px;border-top-width:1.5px;border-left-width:1.5px}
.mc-corner-tr{top:6px;right:6px;border-top-width:1.5px;border-right-width:1.5px}
.mc-corner-bl{bottom:6px;left:6px;border-bottom-width:1.5px;border-left-width:1.5px}
.mc-corner-br{bottom:6px;right:6px;border-bottom-width:1.5px;border-right-width:1.5px}
.mission-card.ready .mc-corner{border-color:var(--cm-hud-line)}
.mission-card.perfect .mc-corner{border-color:#d4a800}
.mission-card.completed:not(.perfect) .mc-corner{border-color:#1D9E75}
.mission-card.locked .mc-corner{border-color:#999}
/* head */
.mc-head{
display:flex;align-items:center;justify-content:space-between;gap:8px;
position:relative;z-index:1;
}
.mc-code{
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:11px;letter-spacing:0.14em;color:#888;font-weight:700;
}
.mission-card.ready .mc-code,
.mission-card.completed .mc-code{color:var(--cm-hud-line)}
.mission-card.perfect .mc-code{color:#a87a00}
.mc-status-badge{
font-family:inherit;
font-size:11px;letter-spacing:0;font-weight:600;
padding:3px 8px;border-radius:var(--cm-r-chip);
display:inline-flex;align-items:center;gap:5px;
text-transform:none;white-space:nowrap;
}
.sb-new{background:#fff;border:0.5px solid #ccc;color:#777}
.sb-ready{background:var(--cm-hud-line);color:#fff;box-shadow:0 0 10px rgba(24,95,165,0.45)}
.sb-done{background:#E1F5EE;color:#0f6e51;border:0.5px solid #b5e0cc}
.sb-perfect{background:linear-gradient(135deg,#FFD700,#FFA500);color:#5a3500}
.sb-locked{background:#1a1a18;color:#d4cfbe;letter-spacing:0.14em}
.sb-custom{background:#fff3df;color:#a86a1c;border:0.5px solid #e6c697}
.sb-pulse{
width:6px;height:6px;border-radius:50%;background:#fff;
animation:sb-pulse 1s infinite;
}
@keyframes sb-pulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:0.35;transform:scale(0.6)}
}
/* meta row */
.mc-meta-row{
display:flex;align-items:center;justify-content:space-between;gap:8px;
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:10.5px;letter-spacing:0.06em;color:#888;
position:relative;z-index:1;
}
.mc-severity{display:inline-flex;align-items:center;gap:5px;font-weight:700}
.mc-sev-dots{letter-spacing:0;font-size:11px}
.sev-low{color:#14724f}
.sev-low .mc-sev-dots{color:#1D9E75}
.sev-med{color:#8a4f02}
.sev-med .mc-sev-dots{color:#D97706}
.sev-high{color:#8b2222}
.sev-high .mc-sev-dots{color:#C53030}
.sev-custom{color:#8a5a1c}
.sev-custom .mc-sev-dots{color:#b87a30}
.mc-target{
color:#555;font-weight:700;
text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:60%;
}
.mission-card.locked .mc-meta-row{color:#7a766b}
.mission-card.locked .mc-target,
.mission-card.locked .mc-severity{color:#7a766b}
.mission-card.locked .mc-sev-dots{color:#7a766b}
/* title and subtitle */
.mc-title{
font-weight:700;font-size:16px;color:#111;line-height:1.25;
margin:4px 0 0;position:relative;z-index:1;
}
.mc-sub{
font-size:12.5px;color:#666;line-height:1.5;
position:relative;z-index:1;
}
/* keep legacy class names working too */
.mission-card-title{font-weight:700;font-size:16px;color:#111;line-height:1.25;margin:0;position:relative;z-index:1}
.mission-card-sub{font-size:12.5px;color:#666;line-height:1.5;position:relative;z-index:1}
/* redacted (locked) */
.redacted-title{display:flex;flex-direction:column;gap:5px;margin:4px 0 0;position:relative;z-index:1}
.redacted-title span{height:13px;background:#2a2a26;border-radius:2px;width:70%}
.redacted-title span:last-child{width:48%}
.redacted-sub{display:flex;flex-direction:column;gap:5px;position:relative;z-index:1}
.redacted-sub span{height:8px;background:#444;opacity:0.55;border-radius:2px}
.redacted-sub span:nth-child(1){width:95%}
.redacted-sub span:nth-child(2){width:80%}
.redacted-sub span:nth-child(3){width:55%}
/* divider */
.mc-divider{
height:1px;
background:repeating-linear-gradient(90deg,#ccc 0 4px,transparent 4px 8px);
margin:4px 0 2px;position:relative;z-index:1;
}
.mission-card.locked .mc-divider{
background:repeating-linear-gradient(90deg,#999 0 4px,transparent 4px 8px);
}
/* foot */
.mc-foot{
display:flex;align-items:center;justify-content:space-between;gap:10px;
position:relative;z-index:1;
}
.mc-foot-locked{
display:flex;align-items:center;gap:6px;
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:10.5px;letter-spacing:0.06em;color:#5b5648;font-weight:700;
}
.mc-lock-icon{color:#C53030;font-size:11px}
.mc-foot-status{
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:10.5px;letter-spacing:0.08em;color:#888;font-weight:700;
}
.mc-foot-result{display:flex;align-items:center;gap:8px}
.mc-foot-result .star-row{margin:0;gap:1px}
.mc-foot-result .star-filled,
.mc-foot-result .star-empty{font-size:14px}
.mc-best{
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:10.5px;letter-spacing:0.06em;color:#444;font-weight:700;
}
/* deploy button */
.btn-deploy{
background:var(--cm-hud-line);color:#fff;border:none;border-radius:var(--cm-r-btn);
padding:8px 16px;font-size:13px;font-weight:600;letter-spacing:0;
cursor:pointer;text-transform:none;
font-family:inherit;
transition:background 0.2s var(--cm-ease),transform 0.18s var(--cm-ease),box-shadow 0.2s var(--cm-ease);
}
.btn-deploy:hover:not(:disabled){background:var(--cm-hud-deep);transform:translateY(-1px)}
.btn-deploy:active:not(:disabled){transform:translateY(0)}
.btn-deploy:disabled{background:#9a9382;color:#f4f4f0;cursor:not-allowed;opacity:0.75}
.btn-deploy.ready{
box-shadow:0 0 0 0 rgba(24,95,165,0.55);
animation:deploy-pulse 1.6s infinite;
}
@keyframes deploy-pulse{
0%{box-shadow:0 0 0 0 rgba(24,95,165,0.55)}
70%{box-shadow:0 0 0 9px rgba(24,95,165,0)}
100%{box-shadow:0 0 0 0 rgba(24,95,165,0)}
}
/* legacy aliases (kept for any other call sites) */
.btn-play{background:var(--cm-hud-line);color:#fff;border:none;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;transition:background 0.15s}
.btn-play:hover{background:var(--cm-hud-deep)}
.btn-play:disabled{background:#ccc;cursor:not-allowed}
.mission-card-num{font-size:11px;color:#aaa;text-transform:none;letter-spacing:0;margin-bottom:4px}
.mission-card-meta{display:flex;justify-content:space-between;align-items:center}
.mission-card-stars{font-size:14px}
.mission-card-best{font-size:11px;color:#666;font-weight:500}
/* ── Achievements ── */
.achievement-section{margin-top:24px}
.achievement-section-head{
display:flex;align-items:baseline;justify-content:space-between;
margin-bottom:12px;padding-top:14px;
border-top:1px dashed #d6d2c4;
}
.achievement-section-title{
font-family:inherit;
font-size:13px;letter-spacing:0;color:#222;font-weight:600;text-transform:none;
}
.achievement-section-count{
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-size:10.5px;letter-spacing:0.1em;color:#888;font-weight:700;
}
.achievement-wall{display:flex;flex-wrap:wrap;gap:8px}
.achievement-badge{display:inline-flex;align-items:center;gap:6px;background:#f4f4f0;border:0.5px solid #ddd;border-radius:20px;padding:5px 10px;font-size:12px;color:#666;transition:all 0.2s;cursor:help;position:relative}
.achievement-badge.unlocked{background:#FFF9E6;border-color:#F6E095;color:#8A6200}
.achievement-badge .ach-tooltip{visibility:hidden;position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:#222;color:#fff;font-size:11px;padding:6px 8px;border-radius:6px;white-space:nowrap;z-index:20;opacity:0;transition:opacity 0.2s}
.achievement-badge:hover .ach-tooltip{visibility:visible;opacity:1}
/* ── Agent speech bubble ── */
.agent-speech{background:#f4f4f0;border-radius:12px;padding:12px 14px;margin-bottom:12px;display:flex;gap:12px;align-items:flex-start}
.agent-speech-icon{font-size:28px;flex-shrink:0}
.agent-speech-text{font-size:13px;color:#444;line-height:1.6;font-style:italic}
.agent-speech-name{font-weight:600;font-style:normal;font-size:12px;color:#111;margin-bottom:4px}
/* ── Near-miss ── */
.near-miss-text{font-size:12px;font-style:italic;margin-top:6px;font-weight:500}
/* ── Result Panel ── */
.result-header { text-align: center; padding: 20px 0; border-bottom: 1px solid #eee; margin-bottom: 20px; }
.result-score { margin-bottom: 10px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.score-number { font-size: 56px; font-weight: 700; color: #111; line-height:1; }
.score-number span { font-size: 20px; color: #888; font-weight: 400; }
.score-grade { font-size: 18px; font-weight: 600; }
/* score ring (SVG progress) */
.score-ring{
width:180px;height:180px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
position:relative; background:#fff;
}
.score-ring::before{
content:""; position:absolute; inset:-16px; border-radius:50%;
background: radial-gradient(circle, var(--ring-glow, transparent) 0%, transparent 65%);
z-index:0; pointer-events:none;
}
.score-ring .ring-svg{
position:absolute; inset:0; width:100%; height:100%;
transform: rotate(-90deg);
}
.score-ring .ring-track{
fill:none; stroke:#eef0f2; stroke-width:8;
}
.score-ring .ring-fill{
fill:none; stroke: var(--ring-color, var(--cm-hud-line)); stroke-width:8;
stroke-linecap: round;
stroke-dasharray: 326.7;
stroke-dashoffset: 326.7;
transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1);
filter: drop-shadow(0 0 6px var(--ring-glow, transparent));
}
.score-ring.animate .ring-fill{
stroke-dashoffset: calc(326.7 - 326.7 * var(--ring-pct, 0) / 100);
}
.score-ring .score-number{ position:relative; z-index:2; }
.score-ring.flawless{ --ring-color:#FFD700; --ring-glow: rgba(255,215,0,0.55); }
.score-ring.flawless::after{
content:""; position:absolute; inset:-8px; border-radius:50%;
border:1px dashed rgba(255,215,0,0.6); animation: cm-spin 8s linear infinite;
pointer-events:none;
}
@keyframes cm-spin{ to{ transform: rotate(360deg); } }
.score-ring.great{ --ring-color:#1D9E75; --ring-glow: rgba(29,158,117,0.30); }
.score-ring.good{ --ring-color:#F5A623; --ring-glow: rgba(245,166,35,0.30); }
.score-ring.poor{ --ring-color:#E24B4A; --ring-glow: rgba(226,75,74,0.22); }
.score-number.settled{ animation: cm-score-pop 0.35s ease-out; }
@keyframes cm-score-pop{ 0%{transform:scale(1)} 50%{transform:scale(1.14)} 100%{transform:scale(1)} }
/* stage reveal */
.cm-stage{ opacity:0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.cm-stage.on{ opacity:1; transform: translateY(0); }
.cm-stage:empty{ display:none; }
/* star pop */
#cm-stars-wrap .star-filled, #cm-stars-wrap .star-empty{
display:inline-block; transform: scale(0); transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
#cm-stars-wrap .star-filled.pop, #cm-stars-wrap .star-empty.pop{ transform: scale(1); }
/* bug list reveal */
.cm-bug-item{ opacity:0; transform: translateX(-8px); transition: opacity .3s ease, transform .3s ease; }
.cm-bug-item.on{ opacity:1; transform: translateX(0); }
/* sticky actions bar */
.cm-actions-bar{
position: sticky; bottom: 0; background: linear-gradient(to top, #f8f8f6 70%, rgba(248,248,246,0));
padding: 14px 0 8px; margin-top: 16px; z-index: 5;
}
/* flawless shake */
@keyframes cm-flawless-shake{
0%,100%{ transform: translateX(0); }
10%,30%,50%,70%,90%{ transform: translateX(-6px); }
20%,40%,60%,80%{ transform: translateX(6px); }
}
.cm-flawless-shake{ animation: cm-flawless-shake .8s ease-in-out; }
/* confetti */
.cm-confetti{
position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1000;
}
.cm-confetti-piece{
position: absolute; top: -20px; width: 9px; height: 14px; opacity: 0.95;
animation: cm-confetti-fall linear forwards;
border-radius: 1px;
}
.cm-confetti-piece.circle{ width: 10px; height: 10px; border-radius: 50%; }
@keyframes cm-confetti-fall{
0%{ transform: translateY(-30px) rotate(0deg); opacity: 1; }
100%{ transform: translateY(105vh) rotate(720deg); opacity: 0.6; }
}
/* ── Agent speech bubble v2 ── */
.agent-speech-v2{
display:flex; gap:14px; padding:14px 16px;
background: linear-gradient(135deg, #ffffff 0%, #f8f8f6 100%);
border:1px solid #e2e2e2; border-radius:14px;
margin-bottom:14px;
align-items:flex-start;
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.agent-speech-v2 .agent-avatar{
font-size:42px; flex-shrink:0; line-height:1;
width:60px; height:60px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background: var(--bubble-bg, var(--cm-hud-soft));
border: 2px solid var(--bubble-border, var(--cm-hud-line));
animation: cm-bob 2.6s ease-in-out infinite;
}
.agent-speech-v2 .agent-bubble{
flex:1; background: var(--bubble-bg, var(--cm-hud-line)); color: var(--bubble-fg, #fff);
border-radius:12px; padding:10px 14px;
position:relative; line-height:1.55;
border:1px solid var(--bubble-border, transparent);
}
.agent-speech-v2 .agent-bubble::before{
content:""; position:absolute; left:-8px; top:18px;
width:0; height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid var(--bubble-bg, var(--cm-hud-line));
}
.agent-speech-v2 .agent-bubble-name{
font-size:12px; opacity:0.9; margin-bottom:3px;
font-weight:600; text-transform:none; letter-spacing:0;
}
.agent-speech-v2 .agent-bubble-text{ font-size:13px; }
/* per-agent voice */
.agent-speech-v2.voice-balanced { --bubble-bg:var(--cm-hud-line); --bubble-border:var(--cm-hud-deep); --bubble-fg:#fff; }
.agent-speech-v2.voice-strict { --bubble-bg:#1f2937; --bubble-border:#0b1220; --bubble-fg:#fff; font-family:var(--fm, "Courier New", monospace); }
.agent-speech-v2.voice-strict .agent-bubble-text{ font-family: var(--fm, "Courier New", monospace); letter-spacing: 0.02em; }
.agent-speech-v2.voice-creative { --bubble-bg:#9B59B6; --bubble-border:#6e3c87; --bubble-fg:#fff; }
.agent-speech-v2.voice-toolsmith { --bubble-bg:#0F6E56; --bubble-border:#0a4d3c; --bubble-fg:#fff; }
.agent-speech-v2.voice-deepthinker{ --bubble-bg:#1a1a2e; --bubble-border:#0a0a1f; --bubble-fg:#e0e0ff; }
.agent-speech-v2.voice-strict .agent-avatar{ background:#1f2937; color:#fff; }
.agent-speech-v2.voice-creative .agent-avatar{ background:#fbeefb; }
.agent-speech-v2.voice-toolsmith .agent-avatar{ background:#E1F5EE; }
.agent-speech-v2.voice-deepthinker .agent-avatar{ background:#1a1a2e; color:#fff; }
@keyframes cm-bob{
0%,100%{ transform: translateY(0) rotate(-2deg); }
50%{ transform: translateY(-4px) rotate(2deg); }
}
/* ── Graduation panel ── */
.cm-graduation{
position:relative; overflow:hidden; text-align:center;
background: linear-gradient(135deg, #fffbe6 0%, #fff5d4 50%, #ffeab0 100%);
border: 2px solid #F5A623;
border-radius:18px; padding:28px 22px 22px;
margin-bottom:22px;
box-shadow: 0 12px 36px rgba(245,166,35,0.25), inset 0 1px 0 rgba(255,255,255,0.6);
}
.cm-graduation .grad-rays{
position:absolute; inset:-50% -10%; pointer-events:none; opacity:0.18;
background: conic-gradient(from 0deg,
transparent 0deg, #FFD700 18deg, transparent 36deg,
transparent 54deg, #FFD700 72deg, transparent 90deg,
transparent 108deg, #FFD700 126deg, transparent 144deg,
transparent 162deg, #FFD700 180deg, transparent 198deg,
transparent 216deg, #FFD700 234deg, transparent 252deg,
transparent 270deg, #FFD700 288deg, transparent 306deg,
transparent 324deg, #FFD700 342deg, transparent 360deg);
animation: cm-spin 24s linear infinite;
z-index:0;
}
.cm-graduation > *:not(.grad-rays){ position:relative; z-index:1; }
.cm-graduation .grad-trophy{
font-size:56px; line-height:1; margin-bottom:8px;
animation: cm-trophy-bounce 1.6s ease-in-out infinite;
filter: drop-shadow(0 6px 12px rgba(245,166,35,0.45));
}
@keyframes cm-trophy-bounce{
0%,100%{ transform: translateY(0) rotate(-3deg); }
50%{ transform: translateY(-6px) rotate(3deg); }
}
.cm-graduation .grad-eyebrow{
font-size:12px; font-weight:600; letter-spacing:0.02em; color:#B28200;
text-transform:none; margin-bottom:4px;
}
.cm-graduation .grad-title{
font-size:24px; font-weight:700; color:#5b3a00; margin-bottom:4px;
}
.cm-graduation .grad-sub{
font-size:13px; color:#7a5400; margin-bottom:18px;
}
.cm-graduation .grad-stats{
display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
max-width:420px; margin:0 auto 18px;
}
@media(min-width:560px){
.cm-graduation .grad-stats{ grid-template-columns:repeat(4,1fr); }
}
.cm-graduation .grad-stat{
background:rgba(255,255,255,0.7); border:1px solid rgba(245,166,35,0.3);
border-radius:10px; padding:10px 8px;
backdrop-filter: blur(2px);
}
.cm-graduation .grad-stat-num{
font-size:20px; font-weight:700; color:#5b3a00; line-height:1;
}
.cm-graduation .grad-stat-num span{ font-size:11px; color:#a07a30; font-weight:500; }
.cm-graduation .grad-stat-label{
font-size:11px; color:#7a5400; margin-top:4px; font-weight:600;
}
.cm-graduation .grad-cta{
font-size:15px; padding:14px 24px; min-width:240px;
}
/* certificate button */
.btn-cert{
flex:1; padding:12px; border-radius:8px; border:none;
background: linear-gradient(135deg,#FFD700,#F5A623); color:#5b3a00;
font-size:14px; font-weight:700; cursor:pointer;
box-shadow: 0 4px 14px rgba(245,166,35,0.35);
transition: transform .15s, box-shadow .15s;
}
.btn-cert:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(245,166,35,0.45); }
/* Handout download — shares cert button shape, distinct teal so it reads as a separate reward */
.btn-handout{
align-items:center; justify-content:center; gap:6px;
text-decoration:none; box-sizing:border-box;
background: linear-gradient(135deg,#34D1BF,#1593A5); color:#fff;
box-shadow: 0 4px 14px rgba(21,147,165,0.35);
}
.btn-handout:hover{ box-shadow: 0 6px 18px rgba(21,147,165,0.45); }
/* Notes download easter egg — sits next to the rank badge, distinct teal */
.cm-notes-egg{
text-decoration:none;
background: linear-gradient(135deg,#34D1BF,#1593A5);
box-shadow: 0 2px 8px rgba(21,147,165,0.30);
}
.cm-notes-egg:hover{ box-shadow: 0 4px 14px rgba(21,147,165,0.45); }
/* Easter-egg reveal animation for honorary cert button */
@keyframes cmCertEggPop {
0% { transform: scale(0.6); opacity: 0; }
60% { transform: scale(1.08); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
.btn-cert.cm-cert-egg-pop {
animation: cmCertEggPop .45s ease-out;
box-shadow: 0 0 0 3px rgba(255,215,0,0.35), 0 6px 18px rgba(245,166,35,0.45);
}
/* ── Results polish: depth, gradients, motion ── */
.result-header{
position:relative;
padding: 28px 0 22px;
border-bottom: 1px solid #ececea;
background:
radial-gradient(ellipse 60% 80% at 50% 0%, rgba(24,95,165,0.05), transparent 60%),
radial-gradient(ellipse 40% 60% at 50% 100%, rgba(245,166,35,0.06), transparent 60%);
border-radius: 16px;
overflow:hidden;
margin-bottom: 18px;
}
.result-header::before{
content:""; position:absolute; inset:0; pointer-events:none;
background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent 40%);
}
.score-ring{
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.06));
}
.score-grade{
font-weight:600; letter-spacing:0.01em;
margin-top:6px;
}
.cm-result-trio .bugs-found,
.cm-result-trio .score-breakdown,
.cm-result-trio .improvement-box{
border-radius:14px;
border:1px solid #ececea;
box-shadow: 0 6px 18px rgba(20,20,20,0.04);
transition: transform .2s ease, box-shadow .2s ease;
}
.cm-result-trio .bugs-found:hover,
.cm-result-trio .score-breakdown:hover,
.cm-result-trio .improvement-box:hover{
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(20,20,20,0.08);
}
.bugs-title{ font-size:13.5px; }
.bugs-title::before{
content:""; display:inline-block; width:6px; height:6px;
border-radius:50%; background:#1D9E75; margin-right:2px;
box-shadow: 0 0 0 3px rgba(29,158,117,0.18);
}
.improvement-box{
background: linear-gradient(135deg, #FFFCF0 0%, #FFF9E6 100%);
}
.improvement-title{ letter-spacing:0.01em; }
.btn-retry, .btn-next, .btn-restart{
border-radius:10px; padding:13px 16px; font-size:14px;
box-shadow: 0 4px 14px rgba(0,0,0,0.06);
transition: transform .12s ease, box-shadow .15s ease, background .15s;
}
.btn-next{ background: linear-gradient(135deg, var(--cm-hud-line), var(--cm-hud-deep)); }
.btn-next:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(24,95,165,0.28); background: linear-gradient(135deg, var(--cm-hud-line), var(--cm-hud-deep)); filter: brightness(0.92); }
.btn-restart{ background: linear-gradient(135deg, var(--cm-accent), #1D9E75); }
.btn-restart:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(29,158,117,0.28); }
.btn-retry:hover{ transform: translateY(-1px); }
.bugs-found { background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.bugs-title { font-size: 14px; font-weight: 600; color: #111; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.bugs-list { list-style: none; padding: 0; }
.bugs-list li { padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; color: #333; line-height: 1.4; }
.bugs-list li:last-child { border-bottom: none; }
.result-actions { display: flex; gap: 12px; margin-top: 20px; }
.btn-retry { flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.btn-retry:hover { background: #f8f8f8; border-color: #ccc; }
.btn-next { flex: 1; padding: 12px; border: none; border-radius: 8px; background: var(--cm-hud-line); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.btn-next:hover { background: var(--cm-hud-deep); }
.btn-restart { flex: 1; padding: 12px; border: none; border-radius: 8px; background: #1D9E75; color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.btn-restart:hover { background: #0F6E56; }
/* ── Desktop: fill the whole screen ── */
@media(min-width:768px){
.wrap { max-width:none; padding:28px 48px 48px; }
.card-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.agent-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.score-breakdown { max-width:560px; margin-left:auto; margin-right:auto; }
.result-hero { max-width:480px; margin-left:auto; margin-right:auto; }
.stat-grid { max-width:480px; margin-left:auto; margin-right:auto; }
.rot-alert { max-width:480px; margin-left:auto; margin-right:auto; }
.debrief { max-width:600px; margin-left:auto; margin-right:auto; }
.btn-row { max-width:480px; margin-left:auto; margin-right:auto; }
h1 { font-size:22px; }
.budget-bar-wrap { font-size:14px; }
.mission-brief { font-size:14px; line-height:1.65; max-width:78ch; padding:12px 16px; }
.coach { max-width:78ch; }
.agent-speech-v2 { max-width:820px; margin-left:auto; margin-right:auto; }
.result-actions { max-width:560px; margin-left:auto; margin-right:auto; }
}
@media(min-width:1024px){
/* Result trio: bugs | breakdown | improve */
.cm-result-trio {
display:grid;
grid-template-columns: 1.1fr 1fr 1.1fr;
gap:16px;
align-items:start;
max-width:1180px;
margin:0 auto;
}
.cm-result-trio .trio-col { min-width:0; }
.cm-result-trio .bugs-found,
.cm-result-trio .score-breakdown,
.cm-result-trio .improvement-box {
margin:0;
max-width:none;
height:100%;
}
.cm-result-trio .bugs-list li { font-size:13.5px; }
.cm-result-trio .score-breakdown { font-size:13px; }
.cm-result-trio .improvement-box { font-size:13px; }
.cm-result-trio .improvement-box ul li { line-height:1.55; }
/* Bigger headlines + readable line lengths */
h1 { font-size:26px; letter-spacing:-0.01em; }
.mission-brief { font-size:15px; line-height:1.7; padding:14px 18px; max-width:72ch; }
.result-grade, .score-grade { font-size:20px; }
.score-number { font-size:64px; }
}
@media(min-width:1200px){
.wrap { padding:28px 80px 60px; }
.agent-grid { grid-template-columns:repeat(3,1fr); }
.card-grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
}
/* ── Inline hint panel (selection screen) ── */
.hint-panel{
display:none;
align-items:flex-start;
gap:12px;
padding:12px 14px 12px 12px;
margin:0 0 14px;
border-radius:12px;
background: linear-gradient(135deg, #FFF9E6 0%, #FFF3C9 100%);
border:1px solid #F6E095;
box-shadow: 0 4px 14px rgba(245,166,35,0.18), inset 0 0 0 1px rgba(255,255,255,0.5);
position:relative;
opacity:0; transform: translateY(-6px);
transition: opacity .25s ease, transform .25s ease;
}
.hint-panel.on{ opacity:1; transform: translateY(0); }
.hint-panel-icon{
font-size:20px; line-height:1;
width:34px; height:34px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
border-radius:50%;
background:#fff;
border:1px solid #F6E095;
box-shadow: 0 2px 6px rgba(245,166,35,0.25);
animation: cm-bob 2.4s ease-in-out infinite;
}
.hint-panel-body{ flex:1; min-width:0; }
.hint-panel-label{
font-size:12px; font-weight:600; letter-spacing:0;
text-transform:none; color:#B28200; margin-bottom:3px;
}
.hint-panel-text{
font-size:13px; color:#5b3a00; line-height:1.55;
}
.hint-panel-text strong{ color:#3f2700; }
.hint-panel-close{
background:transparent; border:none; cursor:pointer;
color:#a07a30; font-size:14px; line-height:1; padding:4px 6px;
border-radius:6px; transition: background .15s, color .15s;
flex-shrink:0;
}
.hint-panel-close:hover{ background:rgba(245,166,35,0.18); color:#5b3a00; }
/* ── Compact agent tip / ok chip (results screen) ── */
.agent-chip{
display:inline-flex; align-items:center; gap:8px;
padding:7px 12px 7px 10px;
border-radius:999px;
font-size:12.5px; line-height:1.4;
margin: -4px auto 12px;
max-width: 820px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.cm-stage > .agent-chip{ display:inline-flex; }
.cm-stage:has(> .agent-chip){ text-align:center; }
.agent-chip-icon{ font-size:13px; line-height:1; }
.agent-chip-text{ color:#1a1a18; }
.agent-chip-text strong{ font-weight:600; }
.agent-chip-tip{
background:var(--cm-hud-soft);
border:1px solid #B5D4F2;
color:var(--cm-hud-line);
}
.agent-chip-tip .agent-chip-text{ color:var(--cm-hud-deep); }
.agent-chip-ok{
background:#E1F5EE;
border:1px solid #9ED6BD;
color:#0F6E56;
}
.agent-chip-ok .agent-chip-text{ color:#0a4d3c; }
.agent-chip-bad{
background:rgba(226,75,74,0.08);
border:1px solid rgba(226,75,74,0.30);
color:var(--cm-bad);
cursor:help;
}
.agent-chip-bad .agent-chip-text{ color:#9b2b2a; }
/* Condition chips below the agent speech bubble (trap hit / over budget). */
.agent-cond-chips{
display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
margin:-4px auto 12px; max-width:820px;
}
.agent-cond-chips .agent-chip{ margin:0; }
/* ── Sound toggle button ── */
.cm-sound-toggle{
position:fixed; bottom:18px; right:18px;
width:42px; height:42px; border-radius:50%;
background:#fff; border:1px solid #ddd;
font-size:16px; cursor:pointer; line-height:1;
display:flex; align-items:center; justify-content:center;
box-shadow:0 4px 12px rgba(0,0,0,0.10);
z-index:60;
transition: transform .15s ease, background .15s, box-shadow .15s;
}
.cm-sound-toggle:hover{ background:#f4f4f0; transform:scale(1.06); box-shadow:0 6px 16px rgba(0,0,0,0.14); }
.cm-sound-toggle:active{ transform:scale(0.96); }
.cm-sound-toggle.muted{ opacity:0.6; }
/* ── Mission builder ── */
.btn-back {
background:#fff; border:0.5px solid #ccc; color:#444; font-size:13px;
padding:6px 12px; border-radius:8px; cursor:pointer; transition:all 0.15s;
}
.btn-back:hover { background:#f4f4f0; border-color:#888; }
.mission-card.custom-tile {
background:
repeating-linear-gradient(45deg, transparent 0 22px, rgba(184,122,48,0.05) 22px 23px),
linear-gradient(135deg, #fff8f0 0%, #fef3e2 100%);
border: 1px dashed #d39a4d;
}
.mission-card.custom-tile:hover { border-color:#b87a30; transform: translateY(-2px); box-shadow:0 8px 20px rgba(184,122,48,0.12); }
.mission-card.custom-tile .mc-corner { border-color:#d39a4d; }
.mission-card.custom-tile .mc-code { color:#b87a30; }
.mission-card.custom-tile .mc-divider { background:repeating-linear-gradient(90deg,#d39a4d 0 4px,transparent 4px 8px); }
.mission-card.custom-tile .btn-deploy { background:#b87a30; }
.mission-card.custom-tile .btn-deploy:hover { background:#8b5a20; }
.builder-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
@media(min-width:900px) {
.builder-grid { grid-template-columns: 1fr 1fr; }
}
.builder-col { display:flex; flex-direction:column; gap:10px; }
.builder-label {
font-size:12px; font-weight:600; color:#333; margin-top:6px;
text-transform:none; letter-spacing:0;
}
.builder-input {
font-family: inherit; font-size:13px; padding:9px 11px;
border:0.5px solid #ccc; border-radius:8px; background:#fff;
color:#1a1a18; resize: vertical; transition: border 0.15s, box-shadow 0.15s;
}
.builder-input:focus {
outline: none; border-color:#378ADD;
box-shadow: 0 0 0 3px rgba(55,138,221,0.15);
}
.builder-tools-row {
display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
}
.builder-tools-row label {
display:flex; justify-content:space-between; align-items:center;
font-size:12px; padding:8px 10px; background:#f8f8f6;
border:0.5px solid #ddd; border-radius:8px; gap:8px;
}
.builder-tools-row input {
width:50px; padding:4px 6px; border:0.5px solid #ccc;
border-radius:6px; font-size:12px; text-align:center;
}
.builder-actions {
display:flex; gap:10px; margin-top:8px; flex-wrap:wrap;
}
.btn-share, .btn-play-custom {
flex:1; min-width:140px; padding:11px 14px; border-radius:8px;
font-size:13px; font-weight:600; cursor:pointer; border:none;
transition: all 0.15s;
}
.btn-share { background:#fff; color:var(--cm-hud-line); border:1px solid #378ADD; }
.btn-share:hover { background:var(--cm-hud-soft); }
.btn-play-custom { background:var(--cm-hud-line); color:#fff; }
.btn-play-custom:hover { background:var(--cm-hud-deep); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(24,95,165,0.25); }
.builder-hint { font-size:12px; color:#888; line-height:1.5; margin-top:4px; }
.builder-src-grid {
display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:8px; max-height:560px; overflow-y:auto; padding:4px;
border:0.5px dashed #ddd; border-radius:8px;
}
.builder-src {
background:#fff; border:0.5px solid #ddd; border-radius:8px;
padding:8px 10px; transition: all 0.15s;
}
.builder-src.ideal { border:1.5px solid #1D9E75; background:#E1F5EE; }
.builder-src.trap { border:1.5px solid #E24B4A; background:#FCEBEB; }
.builder-src-head {
display:flex; justify-content:space-between; align-items:center;
font-size:12.5px; font-weight:500; color:#222; margin-bottom:6px;
}
.builder-src-meta { font-size:10.5px; color:#888; font-weight:400; }
.builder-src-actions {
display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px;
}
.builder-src-actions button {
font-size:10.5px; padding:5px 4px; border-radius:5px;
border:0.5px solid #ccc; background:#f8f8f6; color:#555;
cursor:pointer; font-weight:500; transition: all 0.12s;
}
.builder-src-actions button:hover { background:#eee; }
.bsa-ideal.on { background:#1D9E75; color:#fff; border-color:#0F6E56; }
.bsa-trap.on { background:#E24B4A; color:#fff; border-color:#A32D2D; }
.bsa-clear.on { background:#888; color:#fff; border-color:#555; }
/* ── Mission builder: guidance + share UX ── */
.builder-share-banner {
display:flex; gap:12px; align-items:flex-start;
background: linear-gradient(135deg, #FFF7E0 0%, #FFE9B8 100%);
border:1px solid #E6B23B; border-radius:10px;
padding:12px 14px; margin-bottom:14px;
}
.bsb-icon { font-size:20px; color:#A1761E; flex-shrink:0; }
.bsb-body { line-height:1.4; }
.bsb-title { font-weight:700; font-size:14px; color:#6D4F12; }
.bsb-sub { font-size:12.5px; color:#7A5D26; margin-top:2px; }
.builder-howto {
background:#F5F9FE; border:1px solid #CFE0F4; border-radius:10px;
padding:10px 14px; margin-bottom:16px;
}
.builder-howto > summary {
cursor:pointer; font-weight:600; font-size:13.5px; color:#185FA5;
list-style:none; display:flex; align-items:center; gap:8px;
padding:2px 0;
}
.builder-howto > summary::-webkit-details-marker { display:none; }
.builder-howto > summary::after {
content:'▼'; font-size:9px; color:#888; margin-left:auto;
transition: transform 0.15s;
}
.builder-howto:not([open]) > summary::after { transform: rotate(-90deg); }
.builder-howto .bh-sub { font-weight:400; color:#888; font-size:12px; }
.builder-howto-list {
margin: 10px 0 6px 0; padding-left:22px;
font-size:13px; color:#333; line-height:1.6;
}
.builder-howto-list li { margin-bottom:4px; }
.builder-howto-list .bh-ideal {
background:#E1F5EE; color:#0F6E56; padding:1px 6px; border-radius:4px;
font-weight:600; font-size:12px;
}
.builder-howto-list .bh-trap {
background:#FCEBEB; color:#A32D2D; padding:1px 6px; border-radius:4px;
font-weight:600; font-size:12px;
}
.builder-howto-actions {
display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;
}
.bh-action-btn {
display:inline-flex; align-items:center; gap:6px;
background:#fff; border:1px solid #B5D4F2; color:#185FA5;
padding:7px 12px; border-radius:6px; font-size:12.5px; font-weight:600;
cursor:pointer; transition: all 0.12s;
}
.bh-action-btn:hover { background:#EBF4FD; border-color:#378ADD; }
.bh-action-btn.ghost { color:#666; border-color:#ddd; }
.bh-action-btn.ghost:hover { background:#f5f5f5; border-color:#bbb; }
.bl-help { font-weight:400; color:#999; font-size:11.5px; }
.builder-balance {
display:flex; flex-direction:column; gap:6px;
padding:10px 12px; border-radius:8px; margin-top:6px;
border:1px solid transparent; transition: all 0.15s;
}
.builder-balance .bb-row {
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.builder-balance .bb-icon { font-size:16px; line-height:1; }
.builder-balance .bb-num { font-size:13px; font-weight:600; }
.builder-balance .bb-num b { font-weight:700; }
.builder-balance .bb-pills { display:flex; gap:6px; margin-left:auto; }
.builder-balance .bb-pill {
font-size:11px; font-weight:600; padding:2px 7px; border-radius:99px;
}
.builder-balance .bb-pill-ideal { background:#E1F5EE; color:#0F6E56; }
.builder-balance .bb-pill-trap { background:#FCEBEB; color:#A32D2D; }
.builder-balance .bb-msg { font-size:12px; line-height:1.5; }
.builder-balance.bb-ok { background:#E1F5EE; border-color:#A6DFC8; color:#0F6E56; }
.builder-balance.bb-thin { background:#FFF8E1; border-color:#F0D88A; color:#7A5D26; }
.builder-balance.bb-loose { background:#FFF8E1; border-color:#F0D88A; color:#7A5D26; }
.builder-balance.bb-tight { background:#FFE8D6; border-color:#E6A85A; color:#7A4520; }
.builder-balance.bb-over { background:#FCEBEB; border-color:#E6A0A0; color:#A32D2D; }
.builder-balance.bb-warn { background:#FCEBEB; border-color:#E6A0A0; color:#A32D2D; }
.builder-share-result {
background:#F5F9FE; border:1px solid #B5D4F2; border-radius:10px;
padding:12px 14px; margin-top:6px;
animation: cm-fade-in 0.25s ease-out;
}
@keyframes cm-fade-in { from { opacity:0; transform:translateY(-4px) } to { opacity:1; transform:none } }
.bsr-head { display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.bsr-icon { font-size:18px; color:#1D9E75; flex-shrink:0; }
.bsr-title { font-weight:700; font-size:13.5px; color:#185FA5; }
.bsr-sub { font-size:12px; color:#5a6a7a; margin-top:1px; line-height:1.4; }
.bsr-url-row {
display:flex; gap:6px; margin-bottom:6px;
}
.bsr-url {
flex:1; font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size:11.5px; padding:7px 10px;
border:1px solid #CFE0F4; background:#fff; border-radius:6px;
color:#185FA5; overflow:hidden; text-overflow:ellipsis;
}
.bsr-url:focus { outline:2px solid #378ADD; outline-offset:1px; }
.bsr-copy {
background:#185FA5; color:#fff; border:none; padding:7px 12px;
border-radius:6px; font-size:12px; font-weight:600; cursor:pointer;
display:inline-flex; align-items:center; gap:4px;
}
.bsr-copy:hover { background:#114a82; }
.bsr-copy.is-copied, .bsr-copy.is-copied:hover { background:#0F6E56; }
.bsr-foot { font-size:11.5px; color:#5a6a7a; line-height:1.5; margin-top:4px; }
.builder-src-desc {
font-size:11px; color:#666; line-height:1.4;
margin-bottom:6px;
}
.builder-src.ideal .builder-src-desc { color:#0F6E56; }
.builder-src.trap .builder-src-desc { color:#A32D2D; }
.builder-src-legend {
display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px;
font-size:11px;
}
.bsl-item {
display:inline-flex; align-items:center; gap:4px;
padding:3px 8px; border-radius:99px; font-weight:600;
border:1px solid transparent;
}
.bsl-ideal { background:#E1F5EE; color:#0F6E56; border-color:#A6DFC8; }
.bsl-trap { background:#FCEBEB; color:#A32D2D; border-color:#E6A0A0; }
.bsl-skip { background:#f4f4f4; color:#666; border-color:#ddd; }
/* ───────────────────── Welcome screen v2 ───────────────────── */
.cm-welcome { max-width:640px; margin:0 auto; padding-top:8px; }
.cm-welcome-hero { text-align:center; padding:18px 0 14px; }
.cm-welcome-bot {
position:relative; display:inline-block;
width:90px; height:90px; border-radius:50%;
background: radial-gradient(circle at 30% 30%, var(--cm-hud-soft) 0%, #CFE3F8 60%, #B5D4F2 100%);
border:1px solid #B5D4F2;
box-shadow: 0 10px 30px rgba(24,95,165,0.18), inset 0 0 0 1px rgba(255,255,255,0.6);
margin-bottom:10px;
animation: cm-w-bob 3s ease-in-out infinite;
}
.cm-welcome-bot-face {
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-size:46px; line-height:1;
}
.cm-welcome-bot-spark {
position:absolute; font-size:14px; color:#F5A623;
filter: drop-shadow(0 0 6px rgba(245,166,35,0.6));
animation: cm-spark 2.4s ease-in-out infinite;
}
.cm-spark-1 { top:-6px; right:-2px; }
.cm-spark-2 { bottom:-2px; left:-8px; font-size:11px; animation-delay:.8s; }
.cm-spark-3 { top:30%; right:-12px; font-size:10px; animation-delay:1.6s; }
@keyframes cm-w-bob {
0%,100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-5px) rotate(2deg); }
}
@keyframes cm-spark {
0%,100% { opacity:0; transform: scale(0.6); }
50% { opacity:1; transform: scale(1.1); }
}
.cm-welcome-title {
font-size:28px; font-weight:700; letter-spacing:-0.01em;
margin:6px 0 2px; color:#111;
}
.cm-welcome-tag {
font-size:13px; color:#777; letter-spacing:0;
text-transform:none; font-weight:500;
}
.cm-welcome-pitch {
font-size:14px; color:#444; margin:10px auto 0;
max-width:420px; line-height:1.5;
}
/* Demo card */
.cm-demo-card {
background: linear-gradient(180deg,#ffffff 0%,#f8f8f6 100%);
border:1px solid #e2e2e2; border-radius:18px;
padding:18px 16px 14px; margin:18px 0;
box-shadow: 0 8px 28px rgba(20,20,20,0.05);
position:relative; overflow:hidden;
}
.cm-demo-card::before {
content:""; position:absolute; inset:0;
background:
radial-gradient(ellipse 60% 80% at 50% 0%, rgba(24,95,165,0.04), transparent 60%),
radial-gradient(ellipse 40% 60% at 50% 100%, rgba(245,166,35,0.05), transparent 60%);
pointer-events:none;
}
.cm-demo-viewport {
position:relative;
display:flex; align-items:center; justify-content:center;
z-index:1;
}
.cm-demo-stage {
position:relative;
height:220px;
flex:1; min-width:0;
display:flex; align-items:center; justify-content:center;
}
.cm-demo-arrow {
width:36px; height:36px; border-radius:50%;
background:#fff; border:1px solid #e2e2e2;
color:var(--cm-hud-line); font-size:22px; font-weight:600; line-height:1;
cursor:pointer; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: all .15s ease;
padding:0; padding-bottom:3px;
z-index:2;
}
.cm-demo-arrow:hover {
background:var(--cm-hud-line); color:#fff; border-color:var(--cm-hud-line);
transform: scale(1.08);
box-shadow: 0 4px 12px rgba(24,95,165,0.3);
}
.cm-demo-arrow:active { transform: scale(0.96); }
.cm-demo-arrow-prev { margin-right:6px; }
.cm-demo-arrow-next { margin-left:6px; }
@media(max-width:480px) {
.cm-demo-arrow { width:32px; height:32px; font-size:20px; }
}
.cm-demo-caption {
text-align:center; font-size:13.5px; color:#333;
line-height:1.55; padding:6px 8px 0;
min-height:42px; position:relative; z-index:1;
}
.cm-demo-caption strong { color:#111; font-weight:700; }
.cm-demo-dots {
display:flex; justify-content:center; gap:8px;
padding:10px 0 4px; position:relative; z-index:1;
}
.cm-demo-dot {
width:8px; height:8px; border-radius:50%;
background:#d8d8d2; border:none; padding:0; cursor:pointer;
transition: all .25s ease;
}
.cm-demo-dot.active { background:var(--cm-hud-line); width:24px; border-radius:4px; }
.cm-demo-dot:hover:not(.active) { background:#aaa; }
/* Launch button */
.cm-welcome-launch {
width:100%; padding:14px;
background: linear-gradient(135deg,#1f76c9 0%,var(--cm-hud-line) 100%) !important;
border:none; border-radius:10px;
color:#fff; font-size:15px; font-weight:600;
cursor:pointer; transition: transform .15s, box-shadow .15s;
box-shadow: 0 6px 18px rgba(24,95,165,0.28);
}
.cm-welcome-launch:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(24,95,165,0.38); }
.cm-welcome-launch:active { transform: translateY(0) scale(0.99); }
.cm-welcome-tip {
text-align:center; font-size:12px; color:#888;
margin-top:12px; line-height:1.5;
}
/* ── Demo scenes ── */
.cm-scene {
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
opacity:0; transform: translateY(8px);
transition: opacity .35s ease, transform .35s ease;
pointer-events:none;
}
.cm-scene.on { opacity:1; transform: translateY(0); pointer-events:auto; }
/* Scene 1 — Agents */
.cm-scene-agents { gap:14px; }
.cm-mini-agent {
width:80px; height:100px; border-radius:14px;
background:#fff; border:1px solid #e2e2e2;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:6px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
position:relative; transition: all .4s ease;
}
.cm-mini-agent .ma-icon { font-size:34px; line-height:1; }
.cm-mini-agent .ma-name { font-size:10.5px; font-weight:600; color:#444; }
.cm-scene-agents.run .cm-mini-agent:nth-child(1) { transform: translateY(2px) scale(0.96); opacity:0.55; }
.cm-scene-agents.run .cm-mini-agent:nth-child(3) { transform: translateY(2px) scale(0.96); opacity:0.55; }
.cm-scene-agents.run .cm-mini-agent:nth-child(2) {
border-color:#1D9E75; background:#E1F5EE;
transform: translateY(-6px) scale(1.08);
box-shadow: 0 12px 24px rgba(29,158,117,0.25);
}
.cm-scene-agents.run .cm-mini-agent:nth-child(2)::after {
content:"✓"; position:absolute; top:-8px; right:-8px;
width:22px; height:22px; border-radius:50%;
background:#1D9E75; color:#fff; font-size:13px; font-weight:bold;
display:flex; align-items:center; justify-content:center;
animation: cm-pop .35s cubic-bezier(.34,1.56,.64,1);
box-shadow: 0 2px 6px rgba(29,158,117,0.4);
}
@keyframes cm-pop { 0%{transform:scale(0)} 100%{transform:scale(1)} }
/* Scene 2 — Sources */
.cm-scene-sources {
display:grid !important;
grid-template-columns: repeat(3, 140px);
gap:10px;
align-content:center; justify-content:center;
width:auto;
margin: 0 auto;
}
.cm-mini-src {
width:140px; padding:7px 11px; border-radius:10px;
background:#fff; border:1px solid #e2e2e2;
font-size:12px; color:#333; text-align:left;
display:flex; align-items:center; gap:6px;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
transition: all .35s ease;
white-space:nowrap; overflow:hidden;
height:34px;
}
.cm-mini-src .ms-icon { font-size:14px; flex-shrink:0; line-height:1; }
.cm-mini-src .ms-label {
flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
font-weight:500;
}
.cm-mini-src .ms-mark {
flex-shrink:0; font-weight:bold; font-size:13px; line-height:1;
opacity:0; transition: opacity .25s ease;
}
.cm-scene-sources.run .cm-mini-src.good {
border-color:#1D9E75; background:#E1F5EE; color:#0F6E56;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(29,158,117,0.18);
}
.cm-scene-sources.run .cm-mini-src.good .ms-mark { opacity:1; color:#1D9E75; }
.cm-scene-sources.run .cm-mini-src.trap {
border-color:#E24B4A; background:#FCEBEB; color:#A32D2D;
animation: shake 0.5s ease-in-out;
}
.cm-scene-sources.run .cm-mini-src.trap .ms-mark { opacity:1; color:#E24B4A; }
/* Scene 3 — Tool gallery */
.cm-scene-tool {
flex-direction:column; gap:10px;
align-items:center; justify-content:center;
}
.cm-tool-card {
width:280px; padding:8px 12px; border-radius:10px;
background:#fff; border:1px solid #e2e2e2;
display:flex; align-items:center; gap:10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
opacity:0; transform: translateX(-12px);
transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1), border-color .3s, background .3s;
}
.cm-tool-card .tc-icon {
font-size:22px; line-height:1; flex-shrink:0;
width:36px; height:36px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:#f4f4f0; border:1px solid #e2e2e2;
}
.cm-tool-card .tc-body { flex:1; min-width:0; text-align:left; }
.cm-tool-card .tc-name {
font-size:12.5px; font-weight:700; color:#111; line-height:1.2;
}
.cm-tool-card .tc-effect {
font-size:11.5px; color:#666; line-height:1.3; margin-top:2px;
}
.cm-tool-card .tc-tag {
font-size:10.5px; font-weight:700;
padding:3px 8px; border-radius:999px;
flex-shrink:0; line-height:1; letter-spacing:0.02em;
}
.cm-scene-tool.run .cm-tool-card {
opacity:1; transform: translateX(0);
}
.cm-scene-tool.run .cm-tool-card:nth-child(1) { transition-delay: .1s; }
.cm-scene-tool.run .cm-tool-card:nth-child(2) { transition-delay: .35s; }
.cm-scene-tool.run .cm-tool-card:nth-child(3) { transition-delay: .6s; }
.cm-tool-card.tc-summarize { border-color:var(--cm-hud-line); background: linear-gradient(135deg,#fff 0%, var(--cm-hud-soft) 100%); }
.cm-tool-card.tc-summarize .tc-icon { background:var(--cm-hud-soft); border-color:#B5D4F2; }
.cm-tool-card.tc-summarize .tc-tag { background:var(--cm-hud-soft); color:var(--cm-hud-line); border:1px solid #B5D4F2; }
.cm-tool-card.tc-filter { border-color:#1D9E75; background: linear-gradient(135deg,#fff 0%, #E1F5EE 100%); }
.cm-tool-card.tc-filter .tc-icon { background:#E1F5EE; border-color:#9ED6BD; }
.cm-tool-card.tc-filter .tc-tag { background:#E1F5EE; color:#0F6E56; border:1px solid #9ED6BD; }
.cm-tool-card.tc-search { border-color:#F5A623; background: linear-gradient(135deg,#fff 0%, #FFF9E6 100%); }
.cm-tool-card.tc-search .tc-icon { background:#FFF9E6; border-color:#F6E095; }
.cm-tool-card.tc-search .tc-tag { background:#FFF9E6; color:#B28200; border:1px solid #F6E095; }
/* Scene 4 — Bugs */
.cm-scene-bugs { flex-direction:column; gap:12px; }
.cm-bot-think {
font-size:42px; line-height:1;
animation: cm-bot-think 1.4s ease-in-out infinite;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
}
@keyframes cm-bot-think {
0%,100% { transform: rotate(-6deg); }
50% { transform: rotate(6deg); }
}
.cm-bug-row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:380px; }
.cm-bug-pill {
background:#FCEBEB; border:1px solid #F2C8C8; color:#A32D2D;
font-size:11.5px; font-weight:600; padding:5px 11px;
border-radius:999px; opacity:0; transform: translateY(10px) scale(0.85);
transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
display:inline-flex; align-items:center; gap:5px;
box-shadow: 0 2px 6px rgba(226,75,74,0.15);
}
.cm-scene-bugs.run .cm-bug-pill { opacity:1; transform: translateY(0) scale(1); }
.cm-scene-bugs.run .cm-bug-pill:nth-child(1) { transition-delay: .2s; }
.cm-scene-bugs.run .cm-bug-pill:nth-child(2) { transition-delay: .55s; }
.cm-scene-bugs.run .cm-bug-pill:nth-child(3) { transition-delay: .9s; }
@media(max-width:480px) {
.cm-demo-stage { height:240px; }
.cm-scene-sources { grid-template-columns: repeat(2, 130px); }
.cm-mini-src { width:130px; }
.cm-mini-agent { width:72px; height:90px; }
.cm-mini-agent .ma-icon { font-size:30px; }
.cm-tool-card { width:240px; }
}
/* ============================================================
GAME SCREEN — INTERACTIVE POLISH (v2)
============================================================ */
/* Mission bar — hero band with gradient stripe */
#screen-game .mission-bar{
position:relative;
background:linear-gradient(180deg,#ffffff 0%, #fafaf6 100%);
border:1px solid #ececdf;
border-radius:14px;
padding:14px 16px 14px 22px;
box-shadow:0 1px 0 rgba(255,255,255,0.7) inset, 0 4px 14px rgba(24,95,165,0.05);
overflow:hidden;
margin-bottom:14px;
align-items:flex-start;
gap:10px;
}
#screen-game .mission-bar::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
background:linear-gradient(180deg,#4774DD 0%, #7B61FF 100%);
}
#screen-game .mission-bar::after{
content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;
background:radial-gradient(circle,rgba(124,58,237,0.10) 0%, transparent 70%);
pointer-events:none;
}
#screen-game .mission-meta{ position:relative;z-index:1;flex:1;min-width:0; }
#screen-game .mission-meta small{
display:inline-block;
background:var(--cm-hud-soft);color:var(--cm-hud-line);
padding:2px 8px;border-radius:999px;
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-weight:700;letter-spacing:0.08em;font-size:10px;
}
#screen-game .mission-meta h2{
margin-top:6px;font-size:18px;font-weight:600;color:#0f172a;
letter-spacing:-0.01em;
}
/* ── Handler Mission Brief (speech-bubble hero) ── */
#screen-game .handler-brief{
display:flex;
align-items:flex-start;
gap:14px;
margin:6px 0 22px;
padding:0;
background:transparent;
border:0;
animation: handlerBriefIn .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes handlerBriefIn{
0%{opacity:0;transform:translateY(-6px)}
100%{opacity:1;transform:translateY(0)}
}
.handler-avatar{
position:relative;flex-shrink:0;
width:54px;height:54px;border-radius:50%;
background:linear-gradient(135deg,#DC80A6 0%,#7B61FF 100%);
display:flex;align-items:center;justify-content:center;
font-size:24px;line-height:1;
box-shadow:0 8px 22px rgba(124,58,237,.32), inset 0 0 0 2px rgba(255,255,255,.85);
}
.handler-avatar-icon{filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));}
.handler-avatar-pulse{
position:absolute;inset:-5px;border-radius:50%;
border:2px solid rgba(124,58,237,.45);
animation: handlerPulse 2.2s ease-out infinite;
pointer-events:none;
}
@keyframes handlerPulse{
0%{transform:scale(.92);opacity:.85}
100%{transform:scale(1.45);opacity:0}
}
.handler-bubble{
flex:1;min-width:0;position:relative;
background:linear-gradient(180deg,#ffffff 0%,#fbfaff 100%);
border:1px solid #e6e1f5;
border-left:4px solid var(--cm-accent);
border-radius:14px;
padding:14px 18px 14px 18px;
box-shadow:0 8px 24px rgba(60,40,140,.08), 0 1px 3px rgba(0,0,0,.03);
}
.handler-bubble-tail{
position:absolute;left:-8px;top:20px;
width:14px;height:14px;
background:#ffffff;
border-left:1px solid #e6e1f5;
border-bottom:1px solid #e6e1f5;
transform:rotate(45deg);
border-bottom-left-radius:3px;
}
.handler-bubble-head{
display:flex;align-items:flex-start;justify-content:space-between;
gap:12px;margin-bottom:10px;
font-size:12px;font-weight:600;letter-spacing:0;
text-transform:none;
}
.handler-name{padding-top:2px;}
.handler-head-right{
display:flex;flex-direction:column;align-items:flex-end;
gap:8px;flex-shrink:0;
}
.handler-name{color:var(--cm-accent);}
.handler-status{
color:#10b981;display:inline-flex;align-items:center;gap:6px;
}
.handler-status-dot{
width:7px;height:7px;border-radius:50%;
background:#10b981;
box-shadow:0 0 0 3px rgba(16,185,129,.18);
animation: handlerDot 1.6s ease-in-out infinite;
}
@keyframes handlerDot{50%{opacity:.35}}
.handler-directive{
font-size:19px;font-weight:600;line-height:1.38;
color:#15172b;margin:0;
letter-spacing:-0.005em;
}
.handler-context{
display:flex;gap:10px;align-items:flex-start;
margin:12px 0 0;padding-top:10px;
border-top:1px dashed #ece8f5;
font-size:13.5px;color:#5b5870;line-height:1.55;
}
.handler-context-label{
flex-shrink:0;
font-size:11px;font-weight:600;letter-spacing:0;
text-transform:none;
color:var(--cm-accent);background:var(--cm-accent-soft);
padding:4px 8px;border-radius:var(--cm-r-chip);
margin-top:1px;white-space:nowrap;
}
.handler-context-text{flex:1;min-width:0;}
@media(min-width:768px){
#screen-game .handler-brief{gap:16px;margin:8px 0 26px;}
.handler-avatar{width:60px;height:60px;font-size:26px;}
.handler-bubble{padding:16px 22px;border-left-width:5px;}
.handler-directive{font-size:22px;line-height:1.4;}
.handler-context{font-size:14px;}
}
@media(min-width:1024px){
.handler-directive{font-size:24px;}
}
@media(max-width:520px){
#screen-game .handler-brief{gap:10px;}
.handler-avatar{width:44px;height:44px;font-size:20px;}
.handler-bubble{padding:12px 14px;}
.handler-bubble-tail{top:16px;}
.handler-directive{font-size:16.5px;}
.handler-context{font-size:12.5px;gap:8px;}
.handler-bubble-head{font-size:9.5px;}
}
/* Context cards — risk borders, hover lift, animated entry */
#screen-game .ctx-card{
border-radius:14px;
padding:12px 14px 10px;
border:1px solid #e5e5dd;
background:#fff;
box-shadow:0 1px 2px rgba(0,0,0,0.025);
overflow:hidden;
transition:transform .18s cubic-bezier(.34,1.56,.64,1),
box-shadow .2s ease,
border-color .2s ease,
background .2s ease;
}
#screen-game .ctx-card .ctx-card-stripe{
position:absolute;left:0;top:0;bottom:0;width:4px;
border-radius:14px 0 0 14px;
transition:width .2s ease, opacity .2s ease;
opacity:.85;
}
#screen-game .ctx-card.risk-low .ctx-card-stripe{ background:linear-gradient(180deg,#3B6D11,#62a93b); }
#screen-game .ctx-card.risk-med .ctx-card-stripe{ background:linear-gradient(180deg,#854F0B,#E89417); }
#screen-game .ctx-card.risk-high .ctx-card-stripe{ background:linear-gradient(180deg,#A32D2D,#E24B4A); }
#screen-game .ctx-card.risk-high::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(135deg,
rgba(226,75,74,0.05) 0 8px,
transparent 8px 18px);
opacity:.55;
}
#screen-game .ctx-card:hover{
transform:translateY(-3px);
box-shadow:0 10px 24px rgba(15,23,42,0.10), 0 2px 4px rgba(15,23,42,0.04);
border-color:#cfcfc4;
}
#screen-game .ctx-card:hover .ctx-card-stripe{ width:6px; }
#screen-game .ctx-card.selected{
background:linear-gradient(180deg,#f3f8ff 0%,var(--cm-hud-soft) 100%);
border-color:#378ADD;
box-shadow:0 0 0 3px rgba(55,138,221,0.15), 0 6px 18px rgba(24,95,165,0.12);
animation: cm-card-pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cm-card-pop{
0%{ transform:scale(.97); }
60%{ transform:scale(1.02); }
100%{ transform:scale(1); }
}
#screen-game .ctx-card.risk-high.selected{
box-shadow:0 0 0 3px rgba(226,75,74,0.18), 0 6px 18px rgba(226,75,74,0.12);
border-color:#E24B4A;
animation: cm-card-pop .35s cubic-bezier(.34,1.56,.64,1), cm-warn-pulse 1.6s ease-in-out infinite .35s;
}
@keyframes cm-warn-pulse{
0%,100%{ box-shadow:0 0 0 3px rgba(226,75,74,0.18), 0 6px 18px rgba(226,75,74,0.12); }
50% { box-shadow:0 0 0 6px rgba(226,75,74,0.06), 0 6px 18px rgba(226,75,74,0.18); }
}
/* selected stamp number */
#screen-game .ctx-card-stamp{
position:absolute;top:10px;right:10px;
width:22px;height:22px;border-radius:50%;
background:linear-gradient(135deg,#4774DD,#7B61FF);
color:#fff;font-size:11px;font-weight:700;
display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 6px rgba(24,95,165,0.35);
animation: cm-stamp-in .35s cubic-bezier(.34,1.56,.64,1);
z-index:2;
}
@keyframes cm-stamp-in{
0%{ transform:scale(0) rotate(-45deg); opacity:0; }
100%{ transform:scale(1) rotate(0); opacity:1; }
}
#screen-game .ctx-card.selected .tip-btn{ display:none; }
/* card icon + token meter */
#screen-game .ctx-card-icon{
font-size:18px;
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:8px;
background:#fafaf6;border:1px solid #ececdf;
transition: transform .2s ease;
}
#screen-game .ctx-card:hover .ctx-card-icon{ transform: rotate(-6deg) scale(1.06); }
#screen-game .ctx-card-meter{
margin-top:8px;height:3px;background:#f0f0ec;border-radius:2px;overflow:hidden;
}
#screen-game .ctx-card-meter > span{
display:block;height:100%;border-radius:2px;
background:linear-gradient(90deg,#4774DD,#7B61FF);
transition: width .35s cubic-bezier(.34,1.56,.64,1);
}
#screen-game .ctx-card.risk-high .ctx-card-meter > span{
background:linear-gradient(90deg,#E24B4A,#A32D2D);
}
#screen-game .ctx-card.risk-med .ctx-card-meter > span{
background:linear-gradient(90deg,#E89417,#854F0B);
}
/* ripple */
#screen-game .ctx-card{ position:relative; }
.cm-ripple{
position:absolute;width:8px;height:8px;border-radius:50%;
background:rgba(55,138,221,0.45);
transform:translate(-50%,-50%) scale(1);
animation: cm-ripple-anim .6s ease-out forwards;
pointer-events:none;z-index:2;
}
.ctx-card.risk-high .cm-ripple{ background:rgba(226,75,74,0.45); }
@keyframes cm-ripple-anim{
to{ transform:translate(-50%,-50%) scale(40); opacity:0; }
}
/* tags polish */
#screen-game .tag{
font-size:11px;border-radius:999px;padding:2px 9px;
font-weight:600;letter-spacing:0.01em;
border:1px solid transparent;
}
#screen-game .tag-tokens{ background:#f4f4ee;color:#5a5a52;border-color:#e7e7df;
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
#screen-game .tag-low{ background:#EAF3DE;color:#3B6D11;border-color:#cce4a3; }
#screen-game .tag-med{ background:#FAEEDA;color:#854F0B;border-color:#f3d9a7; }
#screen-game .tag-high{ background:#FCEBEB;color:#A32D2D;border-color:#f4c5c5; }
/* card grid — gentle entry stagger */
#screen-game #card-grid{ gap:10px; }
#screen-game #card-grid > .ctx-card{
animation: cm-card-enter .35s cubic-bezier(.34,1.56,.64,1) backwards;
}
#screen-game #card-grid > .ctx-card:nth-child(1){ animation-delay:.02s; }
#screen-game #card-grid > .ctx-card:nth-child(2){ animation-delay:.06s; }
#screen-game #card-grid > .ctx-card:nth-child(3){ animation-delay:.10s; }
#screen-game #card-grid > .ctx-card:nth-child(4){ animation-delay:.14s; }
#screen-game #card-grid > .ctx-card:nth-child(5){ animation-delay:.18s; }
#screen-game #card-grid > .ctx-card:nth-child(6){ animation-delay:.22s; }
#screen-game #card-grid > .ctx-card:nth-child(7){ animation-delay:.26s; }
#screen-game #card-grid > .ctx-card:nth-child(8){ animation-delay:.30s; }
#screen-game #card-grid > .ctx-card:nth-child(9){ animation-delay:.34s; }
@keyframes cm-card-enter{
0%{ opacity:0; transform: translateY(8px) scale(.97); }
100%{ opacity:1; transform: translateY(0) scale(1); }
}
/* Budget bar — chunky pill, animated fill */
#screen-game #budget-row-container{
background:linear-gradient(180deg,#ffffff,#fafaf6);
border:1px solid #ececdf;
border-radius:12px;
padding:10px 14px;
margin-bottom:6px;
box-shadow:0 1px 2px rgba(0,0,0,0.02);
}
#screen-game .budget-label{
font-size:13px;font-weight:600;color:#1a1a18;
}
#screen-game #agent-reaction{
font-size:22px !important;
display:inline-block;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
transition: transform .2s ease;
}
#screen-game #budget-row-container:hover #agent-reaction{ transform: scale(1.1); }
#screen-game #budget-agent-tag{
border-radius:999px !important;
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-weight:700;letter-spacing:.06em;
}
#screen-game .budget-val{
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-weight:700;font-size:13px;
padding:3px 10px;border-radius:999px;
background:#EAF7F2;
}
#screen-game .budget-val.warn{ background:#FBF1DD; }
#screen-game .budget-val.over{ background:#FCEBEB; animation: cm-warn-pulse 1.2s ease-in-out infinite; }
#screen-game .bar-track{
height:12px;background:#eef0ec;border-radius:999px;
margin-bottom:8px;position:relative;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
transition: box-shadow .25s ease;
}
#screen-game .bar-track .bar-fill{
border-radius:999px;
background-image: linear-gradient(90deg,#1D9E75,#22C58F);
background-size: 200% 100%;
position:relative;
box-shadow: 0 0 12px rgba(29,158,117,0.4);
animation: cm-bar-shimmer 2.4s linear infinite;
}
#screen-game .bar-track.warn .bar-fill{
background-image: linear-gradient(90deg,#BA7517,#F5A623);
box-shadow: 0 0 12px rgba(245,166,35,0.45);
}
#screen-game .bar-track.over .bar-fill{
background-image: linear-gradient(90deg,#E24B4A,#FF6B6B);
box-shadow: 0 0 16px rgba(226,75,74,0.55);
}
#screen-game .bar-track.over{
box-shadow: inset 0 0 0 1.5px rgba(226,75,74,0.5);
}
@keyframes cm-bar-shimmer{
0%{ background-position: 200% 0; }
100%{ background-position: -200% 0; }
}
#screen-game .bar-track.pulse .bar-fill{ animation: cm-bar-shimmer 2.4s linear infinite, cm-bar-pop .28s ease-out; }
@keyframes cm-bar-pop{
0%{ filter: brightness(1); }
50%{ filter: brightness(1.35); }
100%{ filter: brightness(1); }
}
/* select count — pill */
#screen-game .select-count{
display:inline-flex;align-items:center;gap:6px;
font-size:12px;color:#666;margin-bottom:14px;
background:#f4f4ee;border:1px solid #ececdf;
padding:4px 10px;border-radius:999px;
}
#screen-game .select-count .sc-num{
display:inline-flex;align-items:center;justify-content:center;
min-width:18px;height:18px;padding:0 5px;border-radius:999px;
background:linear-gradient(135deg,#4774DD,#7B61FF);
color:#fff;font-weight:700;font-size:11px;
}
#screen-game .select-count .sc-pct{
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-weight:700;color:var(--cm-hud-line);
}
/* Run button — gradient, shine, glow when active */
#screen-game .btn-run{
position:relative;overflow:hidden;
margin-top:6px;
font-size:15px;font-weight:600;letter-spacing:.01em;
padding:14px;
border-radius:12px;
}
#screen-game .btn-run.active{
background:linear-gradient(135deg,#4774DD 0%,#7B61FF 100%);
box-shadow:0 6px 18px rgba(24,95,165,0.32), 0 2px 4px rgba(124,58,237,0.18);
animation: cm-run-breathe 2.4s ease-in-out infinite;
}
#screen-game .btn-run.active::before{
content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,0.35),transparent);
transform:skewX(-20deg);
animation: cm-run-shine 2.8s ease-in-out infinite;
}
@keyframes cm-run-breathe{
0%,100%{ transform: scale(1); }
50% { transform: scale(1.01); }
}
@keyframes cm-run-shine{
0%{ left:-60%; }
60%,100%{ left:120%; }
}
#screen-game .btn-run.active:hover{
transform: translateY(-1px);
box-shadow:0 10px 24px rgba(24,95,165,0.42), 0 2px 6px rgba(124,58,237,0.25);
}
#screen-game .btn-run.danger{
background:linear-gradient(135deg,#993C1D 0%,#E24B4A 100%);
box-shadow:0 6px 18px rgba(226,75,74,0.32);
}
/* Tools inventory polish */
#screen-game .tool-inventory{
background:linear-gradient(180deg,#ffffff,#fafaf6);
border:1px solid #ececdf;border-radius:14px;
}
#screen-game .tool-badge{
border-radius:10px;
transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
#screen-game .tool-badge:hover:not(.empty){
transform: translateY(-1px);
border-color:var(--cm-accent);background:var(--cm-accent-soft);
}
/* hint button extra glow */
#screen-game #hint-btn::after{
content:"";position:absolute;inset:-2px;border-radius:10px;
background:radial-gradient(circle,rgba(245,166,35,0.45) 0%,transparent 70%);
opacity:0;z-index:-1;transition: opacity .25s ease;
}
#screen-game #hint-btn:hover:not(:disabled)::after{ opacity:1; }
/* Run-button particles */
.cm-particle{
position:absolute;width:6px;height:6px;border-radius:50%;
pointer-events:none;
animation: cm-part 700ms ease-out forwards;
}
@keyframes cm-part{
0%{ transform: translate(0,0) scale(1); opacity:1; }
100%{ transform: translate(var(--dx),var(--dy)) scale(.2); opacity:0; }
}
/* Mobile tweaks */
@media (max-width:560px){
#screen-game .mission-bar{ flex-direction:column; align-items:stretch; }
#screen-game .mission-meta h2{ font-size:16px; }
#screen-game #card-grid{ grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
#screen-game .ctx-card-icon{ width:26px;height:26px;font-size:15px; }
}
/* ── Context Pack: shows what user fed the agent ── */
.cm-context-pack .cp-wrap{
background:#fff;
border:1px solid #ececea;
border-radius:14px;
padding:18px 20px;
box-shadow: 0 6px 18px rgba(20,20,20,0.04);
max-width:1180px;
margin:0 auto;
}
.cp-title{
font-size:14px; font-weight:700; color:#222; margin-bottom:14px;
display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
}
.cp-sub{ font-size:12px; font-weight:500; color:#888; }
.cp-grid{
display:grid;
grid-template-columns:1fr;
gap:14px;
}
@media(min-width:768px){
.cp-grid{ grid-template-columns:1fr 1fr 1fr; }
}
.cp-col{
background:#fafaf8;
border:1px solid #ececea;
border-radius:10px;
padding:12px 12px 14px;
min-width:0;
}
.cp-col-hits{ background:linear-gradient(180deg,#f0fbf5 0%, #fafffa 100%); border-color:#cdebd9; }
.cp-col-traps{ background:linear-gradient(180deg,#fdf1f1 0%, #fffafa 100%); border-color:#f1cccc; }
.cp-col-missed{ background:linear-gradient(180deg,#f6f6f6 0%, #fbfbfb 100%); border-color:#e2e2e2; }
.cp-col-head{
font-size:13px; font-weight:600; color:#333;
text-transform:none; letter-spacing:0;
display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.cp-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.cp-dot-ok{ background:#1D9E75; box-shadow:0 0 0 3px rgba(29,158,117,0.18); }
.cp-dot-bad{ background:#E24B4A; box-shadow:0 0 0 3px rgba(226,75,74,0.18); }
.cp-dot-muted{ background:#aaa; box-shadow:0 0 0 3px rgba(170,170,170,0.18); }
.cp-count{
margin-left:auto; font-weight:600; color:#666; font-size:11px;
background:#fff; border:1px solid #e2e2e2; border-radius:10px; padding:2px 8px;
}
.cp-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.cp-empty{ font-size:12px; color:#999; font-style:italic; padding:4px 0; }
.cp-chip{
display:inline-flex; align-items:center; gap:6px;
padding:5px 9px; border-radius:999px;
font-size:12px; font-weight:500;
border:1px solid transparent; background:#fff;
max-width:100%;
}
.cp-chip-icon{ font-size:13px; line-height:1; }
.cp-chip-label{
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px;
}
.cp-chip-tok{
font-size:10.5px; color:#888; background:#f4f4f2; border-radius:6px; padding:1px 5px;
font-variant-numeric: tabular-nums;
}
.cp-chip-hit{ border-color:#9bd9b6; background:#eafaf1; color:#0f6e4d; }
.cp-chip-trap{ border-color:#e8a6a6; background:#fde8e8; color:#9e2727; }
.cp-chip-trap.cp-chip-filtered{
border-color:#bbb; background:#f4f4f2; color:#666;
text-decoration:line-through; text-decoration-color:#bbb; text-decoration-thickness:1px;
}
.cp-chip-trap.cp-chip-filtered .cp-chip-label{ text-decoration:line-through; }
.cp-chip-missed{
border:1px dashed #c8c8c8; background:transparent; color:#777;
}
.cp-chip-hint{
background:#fffaf0; border:1px dashed #e0c98a; color:#7a5b1a;
font-style:italic;
}
.cp-chip-hint .cp-chip-label{ max-width:none; white-space:normal; font-style:italic; }
.cp-chip-hint .cp-chip-icon{ filter:none; }
.cp-chip-flag{
font-size:10.5px; font-weight:600; text-transform:none; letter-spacing:0;
background:#1D9E75; color:#fff; padding:1px 5px; border-radius:var(--cm-r-chip);
text-decoration:none;
}
.cp-modtag{
font-size:10.5px; background:#fff; border:1px solid #e2e2e2; border-radius:5px; padding:0 4px;
}
@media(max-width:560px){
.cp-chip-label{ max-width:130px; }
}
/* ─────────────────────────────────────────────────────────────
Surface Picker — application surface selector on agent screen.
───────────────────────────────────────────────────────────── */
.surface-picker{
margin-top:18px;
padding:14px 16px 12px;
background:#fff;
border:0.5px solid #ddd;
border-radius:12px;
}
.sp-label{
font-size:11px; font-weight:700; letter-spacing:0.08em;
color:var(--cm-hud-line); margin-bottom:10px;
}
.sp-row{ display:flex; flex-wrap:wrap; gap:8px; }
.sp-pill{
display:inline-flex; align-items:center; gap:6px;
background:#f6f7fa; border:1px solid #dadde3; color:#1a1a18;
border-radius:999px; padding:6px 12px;
font-size:13px; font-weight:500;
transition:background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.sp-pill:hover{ background:#eef2f7; border-color:#bfc7d1; }
.sp-pill:active{ transform:scale(0.97); }
.sp-pill.on{
background:var(--cm-hud-soft); border-color:#378ADD; color:var(--cm-hud-line);
box-shadow:0 0 0 1px #378ADD inset;
}
.sp-pill-icon{ font-size:14px; }
.sp-help{
margin-top:8px; font-size:11.5px; color:#888;
}
/* ─────────────────────────────────────────────────────────────
Release Confidence — heuristic score band on results screen.
───────────────────────────────────────────────────────────── */
.rc-score{
background:#fff;
border:1px solid #e2e2e2;
border-left-width:4px;
border-radius:10px;
padding:12px 14px;
margin-bottom:12px;
}
.rc-head{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.rc-icon{ font-size:16px; }
.rc-label{ font-size:13px; font-weight:600; color:#333; }
.rc-pct{
margin-left:auto; font-size:18px; font-weight:700; color:#222;
font-variant-numeric: tabular-nums;
}
.rc-band{
font-size:10.5px; font-weight:700; letter-spacing:0.06em;
padding:2px 7px; border-radius:5px;
}
.rc-meter{
height:6px; background:#f0f2f5; border-radius:999px;
margin-top:8px; overflow:hidden;
}
.rc-meter > span{
display:block; height:100%; border-radius:999px;
transition:width 0.6s ease;
}
.rc-sub{
margin-top:6px; font-size:11px; color:#777;
}
.rc-band-hi{ border-left-color:#1D9E75; }
.rc-band-hi .rc-band{ background:#E5F5EE; color:#15805F; }
.rc-band-hi .rc-meter > span{ background:#1D9E75; }
.rc-band-md{ border-left-color:#BA7517; }
.rc-band-md .rc-band{ background:#FCF1E0; color:#8A560F; }
.rc-band-md .rc-meter > span{ background:#BA7517; }
.rc-band-lo{ border-left-color:#E24B4A; }
.rc-band-lo .rc-band{ background:#FCE5E5; color:#A82A2A; }
.rc-band-lo .rc-meter > span{ background:#E24B4A; }
/* ─────────────────────────────────────────────────────────────
Planner card-hint outline + ribbon.
───────────────────────────────────────────────────────────── */
.ctx-card.card-hint-ideal{
border-style:dashed;
border-color:#7AAE6F;
box-shadow:0 0 0 1px rgba(122, 174, 111, 0.35) inset;
}
.ctx-card.card-hint-ideal.selected{
border-style:solid;
border-color:#378ADD;
}
.ctx-card.card-hint-ideal{
overflow:visible;
}
#screen-game .ctx-card.card-hint-ideal{
overflow:visible;
}
.card-hint-ribbon{
position:absolute;
top:-9px; right:10px;
background:#E8F2E2; color:#3F7034;
border:1px solid #B6D5AC;
font-size:10px; font-weight:700; letter-spacing:0.03em;
padding:2px 7px; border-radius:999px;
pointer-events:none;
z-index:3;
white-space:nowrap;
}
/* ─────────────────────────────────────────────────────────────
Analyzer bug-diagnosis label inside bug-reveal list.
───────────────────────────────────────────────────────────── */
.bug-dx{
display:inline-block;
margin-left:6px;
padding:1px 7px;
font-size:10.5px; font-weight:600; letter-spacing:0;
text-transform:none;
border-radius:var(--cm-r-chip);
vertical-align:middle;
}
.bug-dx.bd-reg{ background:#FCE5E5; color:#A82A2A; }
.bug-dx.bd-flake{ background:#FCF1E0; color:#8A560F; }
.bug-dx.bd-env{ background:#E5EEF8; color:#1F4B7A; }
/* ─────────────────────────────────────────────────────────────
COCKPIT ACCENT LAYER (2026-05-15)
Sci-fi HUD elements over the existing light theme.
───────────────────────────────────────────────────────────── */
:root{
--cm-bg: #f8f8f6;
--cm-surface: #ffffff;
--cm-hud-line: #185FA5;
--cm-hud-glow: #6FB3FF;
--cm-accent: #7C3AED;
--cm-accent-soft: #EFE7FF;
--cm-grid: rgba(24,95,165,0.05);
--cm-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--cm-ok: #1D9E75;
--cm-warn: #BA7517;
--cm-bad: #E24B4A;
--cm-hud-deep: #114578;
--cm-hud-soft: #EBF4FD;
--cm-brand-grad: linear-gradient(135deg, #185FA5, #1D9E75);
/* Unified radius scale */
--cm-r-chip: 6px; /* small tags/chips */
--cm-r-btn: 10px; /* all buttons */
--cm-r-card: 14px; /* cards, panels */
--cm-r-modal: 16px; /* modals, big surfaces */
--cm-r-pill: 999px; /* pills, toggles */
/* Unified motion curve */
--cm-ease: cubic-bezier(.2,.8,.2,1);
--cm-ease-spring: cubic-bezier(.34,1.56,.64,1);
}
/* ── SVG icon system ── */
.cm-ico{
display:inline-flex;align-items:center;justify-content:center;
line-height:1;color:currentColor;
flex-shrink:0;vertical-align:middle;
}
.cm-ico svg{
width:1em;height:1em;display:block;
stroke:currentColor;fill:none;
stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.cm-ico-lg svg{width:1.5em;height:1.5em}
.cm-ico-xl svg{width:2em;height:2em}
.cm-ico-fill svg{fill:currentColor;stroke:none}
/* Subtle grid backdrop on the game wrapper */
.wrap{
position: relative;
}
.wrap::before{
content:"";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--cm-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--cm-grid) 1px, transparent 1px);
background-size: 32px 32px, 32px 32px;
pointer-events: none;
mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 75%);
-webkit-mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 75%);
z-index: 0;
opacity: 0;
animation: cmGridFade 6s ease-in-out infinite alternate;
}
.wrap > *:not(.event-overlay):not(#toast-container):not(.cm-sound-toggle){ position: relative; z-index: 1; }
@keyframes cmGridFade{
0%{ opacity: 0.4; }
100%{ opacity: 0.9; }
}
/* ───── Telemetry strip ───── */
.telemetry-strip{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
margin: 6px 0 12px;
padding: 7px 12px;
font-family: var(--cm-mono);
font-size: 10.5px;
letter-spacing: 0;
color: #5b6b7a;
background: linear-gradient(90deg, rgba(24,95,165,0.03), rgba(124,58,237,0.03));
border: 1px solid rgba(24,95,165,0.15);
border-radius: var(--cm-r-chip);
text-transform: none;
}
.telemetry-strip .ts-item{ display: inline-flex; align-items: center; gap: 5px; }
.telemetry-strip .ts-sep{ color: rgba(24,95,165,0.4); }
.telemetry-strip .ts-dot{
width: 7px; height: 7px; border-radius: 50%;
background: var(--cm-ok);
box-shadow: 0 0 6px var(--cm-ok);
animation: cmPulseDot 1.6s ease-in-out infinite;
}
.telemetry-strip .ts-over{ color: var(--cm-bad); font-weight: 700; }
.telemetry-strip .ts-bad{ color: var(--cm-bad); font-weight: 700; }
.telemetry-strip .ts-sprint{ color: var(--cm-accent); font-weight: 700; }
@keyframes cmPulseDot{
0%, 100%{ opacity: 1; transform: scale(1); }
50%{ opacity: 0.4; transform: scale(0.85); }
}
/* ───── Sprint timer HUD (inline inside budget row) ───── */
.timer-hud{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px 3px 4px;
background: #ffffff;
border: 1px solid var(--cm-accent);
border-radius: 999px;
box-shadow: 0 0 0 1px rgba(124,58,237,0.12);
font-family: var(--cm-mono);
}
.timer-hud .timer-ring{ width: 22px; height: 22px; display: inline-block; }
.timer-hud .timer-ring svg{ width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-hud .th-track{ fill: none; stroke: rgba(124,58,237,0.18); stroke-width: 3; }
.timer-hud .th-fill{ fill: none; stroke: var(--cm-accent); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 200ms linear; }
.timer-hud .timer-mono{ font-weight: 700; font-size: 12px; color: var(--cm-accent); letter-spacing: 0.05em; }
.timer-hud .timer-label{ font-size: 9px; letter-spacing: 0.12em; color: #6b6480; font-weight: 700; }
.timer-hud.warn{ border-color: var(--cm-warn); }
.timer-hud.warn .th-fill{ stroke: var(--cm-warn); }
.timer-hud.warn .timer-mono{ color: var(--cm-warn); }
.timer-hud.crit{ border-color: var(--cm-bad); animation: cmTimerCrit 0.7s ease-in-out infinite; }
.timer-hud.crit .th-fill{ stroke: var(--cm-bad); }
.timer-hud.crit .timer-mono{ color: var(--cm-bad); }
.timer-hud.expired{ opacity: 0.5; }
@keyframes cmTimerCrit{
0%, 100%{ box-shadow: 0 0 0 1px rgba(226,75,74,0.3), 0 4px 12px rgba(226,75,74,0.2); }
50%{ box-shadow: 0 0 0 4px rgba(226,75,74,0.15), 0 6px 20px rgba(226,75,74,0.4); }
}
/* ───── Briefing layout (Agent + Surface + Sprint) ───── */
.briefing-layout{
display: grid;
grid-template-columns: 1fr 280px;
gap: 18px;
align-items: start;
margin-top: 14px;
}
.briefing-main{ min-width: 0; }
.briefing-side{
display: flex;
flex-direction: column;
gap: 12px;
position: sticky;
top: 80px;
}
.bs-card{
position: relative;
padding: 14px;
background: var(--cm-surface);
border: 1px solid rgba(24,95,165,0.18);
border-radius: 8px;
box-shadow: 0 1px 0 rgba(24,95,165,0.04), 0 6px 14px -10px rgba(24,95,165,0.18);
}
.bs-card::before, .bs-card::after{
content:"";
position: absolute;
width: 8px; height: 8px;
border: 1.5px solid var(--cm-hud-line);
}
.bs-card::before{ top:-1px; left:-1px; border-right: none; border-bottom: none; }
.bs-card::after{ bottom:-1px; right:-1px; border-left: none; border-top: none; }
.bs-label{
font-family: inherit;
font-size: 12px;
letter-spacing: 0;
color: var(--cm-hud-line);
font-weight: 600;
margin-bottom: 10px;
text-transform: none;
}
.bs-help{ font-size: 11px; color: #888; margin-top: 8px; line-height: 1.4; }
.bs-sprint-help{ color: color-mix(in srgb, var(--cm-accent) 60%, transparent); }
.sp-row-vert{ display: flex; flex-direction: column; gap: 6px; }
.sp-row-vert .sp-pill{ justify-content: flex-start; width: 100%; }
/* Sprint switch */
.sprint-switch{
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
}
.sprint-switch input{ position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.sprint-track{
position: relative;
width: 46px; height: 24px;
background: #e6e6ea;
border-radius: 999px;
transition: background 180ms ease;
border: 1px solid rgba(0,0,0,0.06);
}
.sprint-knob{
position: absolute;
top: 2px; left: 2px;
width: 18px; height: 18px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: transform 180ms ease;
}
.sprint-switch input:checked + .sprint-track{
background: linear-gradient(90deg, var(--cm-accent), #a87cf3);
border-color: var(--cm-accent);
}
.sprint-switch input:checked + .sprint-track .sprint-knob{
transform: translateX(22px);
}
.sprint-state{
font-family: var(--cm-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
color: #7a7a82;
min-width: 26px;
}
.sprint-switch input:checked ~ .sprint-state{ color: var(--cm-accent); }
/* Deploy CTA */
.bs-deploy-wrap{ margin-top: 4px; }
.btn-deploy-go{
width: 100%;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 14px 16px;
background: linear-gradient(135deg, var(--cm-hud-line), var(--cm-hud-glow));
color: #fff;
border: none;
border-radius: 8px;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.02em;
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform 120ms ease, box-shadow 160ms ease, opacity 120ms ease;
box-shadow: 0 8px 20px -8px rgba(24,95,165,0.45);
}
.btn-deploy-go:hover:not(:disabled){
transform: translateY(-1px);
box-shadow: 0 12px 26px -10px rgba(24,95,165,0.55);
}
.btn-deploy-go:disabled{ opacity: 0.45; cursor: not-allowed; }
.btn-deploy-go::after{
content:"";
position: absolute; top: 0; left: -60%;
width: 40%; height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
animation: cmShine 3.2s ease-in-out infinite;
}
.btn-deploy-go:disabled::after{ animation: none; opacity: 0; }
.btn-deploy-go .bdg-arrow{ font-size: 18px; }
@keyframes cmShine{
0%{ left: -60%; }
60%{ left: 110%; }
100%{ left: 110%; }
}
/* Mission "why it matters" caption */
.ab-why{
font-family: var(--cm-mono);
font-size: 11.5px;
color: var(--cm-accent);
margin-top: 6px;
letter-spacing: 0.02em;
line-height: 1.45;
}
/* Selected agent card highlight in roster */
.agent-card.picked{
border-color: var(--cm-accent) !important;
box-shadow: 0 0 0 2px var(--cm-accent), 0 0 22px rgba(124,58,237,0.25);
background: linear-gradient(135deg, #ffffff, var(--cm-accent-soft)) !important;
}
.agent-card.picked .ac-cta{
background: var(--cm-accent);
color: #fff;
border-color: var(--cm-accent);
}
/* ? button on dossier header */
.msh-howto{
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid var(--cm-hud-line);
background: #fff;
color: var(--cm-hud-line);
font-family: var(--cm-mono);
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: all 140ms ease;
}
.msh-howto:hover{ background: var(--cm-hud-line); color: #fff; box-shadow: 0 0 12px var(--cm-hud-glow); }
/* ───── Card grid scannability ───── */
.cc-statline{
display: flex;
align-items: center;
gap: 6px;
margin: 6px 0 8px;
font-family: var(--cm-mono);
font-size: 11px;
letter-spacing: 0.04em;
flex-wrap: wrap;
}
.cc-statline .cc-stat{ font-weight: 700; }
.cc-statline .cc-stat-tokens{ color: #3b6b96; }
.cc-statline .cc-stat-mod{ color: var(--cm-hud-line); }
.cc-statline .cc-stat-sep{ color: #bbb; }
.cc-statline .cc-risk-high{ color: #A32D2D; }
.cc-statline .cc-risk-med{ color: #854F0B; }
.cc-statline .cc-risk-low{ color: #3B6D11; }
.ctx-card-meter{
position: relative;
}
.cc-meter-pct{
position: absolute;
right: 4px; top: 50%;
transform: translateY(-50%);
font-family: var(--cm-mono);
font-size: 9.5px;
color: #8a8a92;
background: rgba(255,255,255,0.85);
padding: 0 4px;
border-radius: 3px;
pointer-events: none;
}
.cc-hover-desc{
display: none;
font-size: 11.5px;
color: #6a6a70;
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed rgba(0,0,0,0.08);
line-height: 1.4;
}
@media (hover: hover){
.ctx-card:hover .cc-hover-desc{ display: block; }
.ctx-card:hover{
transform: translateY(-1px);
box-shadow: 0 0 0 1px var(--cm-hud-line), 0 8px 18px -10px var(--cm-hud-glow);
}
}
.ctx-card.selected{
box-shadow: 0 0 0 2px var(--cm-hud-line), 0 0 18px rgba(111,179,255,0.45) !important;
}
.cc-mod-strip{
position: absolute;
top: 6px; left: 50%;
transform: translateX(-50%);
display: flex;
gap: 4px;
padding: 2px 6px;
background: rgba(24,95,165,0.08);
border-radius: 999px;
font-size: 11px;
z-index: 3;
}
.cc-mod-pip{ line-height: 1; }
/* ───── Teach diff ───── */
.cm-teach{ width: 100%; }
.teach-wrap{
background: var(--cm-surface);
border: 1px solid rgba(24,95,165,0.18);
border-radius: 10px;
padding: 16px 18px;
position: relative;
}
.teach-wrap::before, .teach-wrap::after{
content:"";
position: absolute;
width: 10px; height: 10px;
border: 1.5px solid var(--cm-hud-line);
}
.teach-wrap::before{ top: -1px; left: -1px; border-right: none; border-bottom: none; }
.teach-wrap::after{ bottom: -1px; right: -1px; border-left: none; border-top: none; }
.teach-title{
font-weight: 700;
font-size: 14px;
color: #333;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 6px;
}
.teach-title .teach-sub{
font-weight: 400;
font-size: 12px;
color: #888;
margin-left: 6px;
}
.teach-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.teach-neutral-block{
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed rgba(0,0,0,0.08);
}
.teach-col-head{
font-family: var(--cm-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--cm-hud-line);
font-weight: 700;
margin-bottom: 8px;
display: flex; align-items: center; gap: 6px;
}
.tch-count{
background: rgba(24,95,165,0.08);
color: var(--cm-hud-line);
padding: 1px 7px;
border-radius: 999px;
font-size: 10px;
}
.teach-row{
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 6px 8px;
padding: 8px 10px;
margin-bottom: 6px;
border-radius: 6px;
background: #fafaf8;
border-left: 3px solid #ddd;
}
.teach-row .teach-icon{ font-size: 16px; }
.teach-row .teach-label{ font-weight: 600; font-size: 13px; color: #333; }
.teach-row .teach-tag{
font-family: var(--cm-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
padding: 2px 6px;
border-radius: 4px;
}
.teach-row .teach-why{
grid-column: 1 / -1;
font-size: 11.5px;
color: #666;
margin-top: 4px;
line-height: 1.45;
}
/* Collapsed by default — reasoning revealed on tap (or via "Explain all"). */
.teach-row .teach-why{ display: none; }
.teach-row.show-why .teach-why{ display: block; }
.teach-tagwrap{ display: inline-flex; align-items: center; gap: 6px; }
.teach-row.expandable{ cursor: pointer; transition: background .12s ease; }
.teach-row.expandable:hover{ filter: brightness(0.985); }
.teach-row.expandable:focus-visible{ outline: 2px solid var(--cm-hud-line); outline-offset: 1px; }
.teach-chev{
font-size: 12px; color: #9aa0a8; display: inline-flex;
transition: transform .15s ease;
}
.teach-chev svg{ width: 12px; height: 12px; }
.teach-row.show-why .teach-chev{ transform: rotate(90deg); }
.teach-explain-all{
margin-left: auto;
font-family: var(--cm-mono); font-size: 10px; letter-spacing: 0.06em;
color: var(--cm-hud-line); background: rgba(24,95,165,0.08);
border: 1px solid rgba(24,95,165,0.18); border-radius: 999px;
padding: 3px 10px; cursor: pointer; transition: background .12s ease;
}
.teach-explain-all:hover{ background: rgba(24,95,165,0.15); }
.teach-row.hit{ border-left-color: var(--cm-ok); background: rgba(29,158,117,0.05); }
.teach-row.hit .tt-hit{ background: rgba(29,158,117,0.15); color: var(--cm-ok); }
.teach-row.miss{ border-left-color: var(--cm-warn); background: rgba(186,117,23,0.05); }
.teach-row.miss .tt-miss{ background: rgba(186,117,23,0.15); color: var(--cm-warn); }
.teach-row.hit-bad{ border-left-color: var(--cm-bad); background: rgba(226,75,74,0.06); }
.teach-row.hit-bad .tt-bad{ background: rgba(226,75,74,0.18); color: var(--cm-bad); }
.teach-row.neutralized{ border-left-color: var(--cm-hud-line); background: rgba(24,95,165,0.05); }
.teach-row.neutralized .tt-neutral{ background: rgba(24,95,165,0.15); color: var(--cm-hud-line); }
.teach-row.locked{
border-left-color: #9aa0a8;
background: repeating-linear-gradient(135deg, #f8f8f6 0 8px, #f1efe9 8px 16px);
position: relative;
}
.teach-row.locked .teach-icon{ filter: grayscale(1) opacity(0.7); }
.teach-row.locked .teach-label{ color: #555; font-style: italic; }
.teach-row.locked .tt-locked{
background: #2a2f36; color: #f5e9c8;
letter-spacing: 0.08em; font-family: var(--cm-mono, var(--fm, monospace));
}
.teach-row.locked .teach-why{ color: #6b6b6b; font-style: italic; }
/* Riddle list inside improvements */
.riddle-list{
margin: 6px 0 0 18px;
padding: 0;
list-style: none;
display: flex; flex-direction: column; gap: 4px;
}
.riddle-list li{
position: relative;
padding: 6px 10px 6px 26px;
font-style: italic;
color: #5a4a1a;
background: rgba(245,210,120,0.12);
border-left: 2px solid #d4a437;
border-radius: 0 6px 6px 0;
font-size: 13px;
}
.riddle-list li::before{
content: "🔍";
position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
font-style: normal;
}
.teach-empty{
padding: 14px;
font-size: 12px;
color: #888;
font-family: var(--cm-mono);
text-align: center;
background: rgba(29,158,117,0.05);
border: 1px dashed rgba(29,158,117,0.3);
border-radius: 6px;
}
/* ───── Budget Spent panel ───── */
.cm-budget-spent{ display: block; }
.bs-wrap{
background: #fff;
border: 1px solid #e3e1d8;
border-radius: 10px;
padding: 16px 18px;
box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.bs-head{
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-bottom: 12px;
}
.bs-title{
font-weight: 700; font-size: 14px; color: #2b2b2b;
}
.bs-sub{ color: #888; font-weight: 400; font-size: 12px; }
.bs-verdict{
font-family: inherit;
font-size: 11.5px; font-weight: 700; letter-spacing: 0;
padding: 4px 9px; border-radius: var(--cm-r-chip);
text-transform: none;
}
.bs-verdict.bs-ok { background: #E6F6EF; color: #1D9E75; border: 1px solid #b9e4d2; }
.bs-verdict.bs-mid { background: #FFF4D9; color: #8A6112; border: 1px solid #F2D580; }
.bs-verdict.bs-bad { background: #FDECEC; color: #C03A39; border: 1px solid #f1bcbb; }
.bs-meter-row{
display: grid;
grid-template-columns: 70px 1fr auto;
gap: 10px; align-items: center;
margin-bottom: 14px;
}
.bs-meter-label{ font-size: 11px; color: #777; font-family: var(--cm-mono, var(--fm, monospace)); letter-spacing: 0.06em; }
.bs-meter{
height: 10px; background: #f1efe9; border-radius: 999px; overflow: hidden;
border: 1px solid #e6e3d9;
}
.bs-meter-fill{
display: block; height: 100%;
background: linear-gradient(90deg, #22C58F 0%, #1D9E75 100%);
border-radius: 999px;
transition: width 0.8s cubic-bezier(.2,.7,.2,1);
}
.bs-meter.over .bs-meter-fill{ background: linear-gradient(90deg, #E07473 0%, #C03A39 100%); }
.bs-meter-val{ font-family: var(--cm-mono, var(--fm, monospace)); font-size: 12px; color: #444; font-weight: 700; }
.bs-meter-val.over{ color: #C03A39; }
.bs-stats{
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 8px; margin-bottom: 12px;
}
.bs-stat{
display: flex; flex-direction: column; align-items: center;
padding: 10px 6px; background: #faf8f1; border: 1px solid #ede9da;
border-radius: 8px;
}
.bs-stat-num{ font-size: 20px; font-weight: 800; color: #2b2b2b; line-height: 1; }
.bs-stat-lbl{ font-size: 11px; color: #888; margin-top: 4px; letter-spacing: 0; text-transform: none; font-family: inherit; }
.bs-stat-ok .bs-stat-num{ color: #1D9E75; }
.bs-stat-bad .bs-stat-num{ color: #C03A39; }
.bs-foot{
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
padding-top: 10px; border-top: 1px dashed #e6e3d9;
}
.bs-tools{ display: flex; flex-wrap: wrap; gap: 6px; }
.bs-toolchip{
font-family: var(--cm-mono, var(--fm, monospace));
font-size: 11px; padding: 3px 8px;
background: var(--cm-hud-soft); color: var(--cm-hud-line);
border: 1px solid #C7DBF1; border-radius: 4px;
}
.bs-toolchip-empty{ background: #f5f3eb; color: #888; border-color: #e6e3d9; font-style: italic; }
.bs-gap{
font-size: 12px; color: #8A6112; font-weight: 600;
background: rgba(245,210,120,0.18);
padding: 5px 10px; border-radius: 4px;
border: 1px solid rgba(212,164,55,0.35);
}
.bs-gap-clean{ color: #1D9E75; background: rgba(29,158,117,0.1); border-color: rgba(29,158,117,0.3); }
@media (max-width: 540px){
.bs-stats{ grid-template-columns: repeat(2, 1fr); }
.bs-meter-row{ grid-template-columns: 1fr; }
.bs-meter-row .bs-meter-val{ text-align: right; }
}
/* ───── Agent mood animations ───── */
.agent-speech-v2[data-mood] .agent-avatar.agent-avatar-mood{ animation: none; }
.agent-avatar-mood{ position: relative; overflow: visible; }
.agent-avatar-mood .agent-avatar-face{ display: inline-block; transform-origin: center; will-change: transform; }
.agent-avatar-mood .agent-avatar-fx{
position: absolute; inset: -8px;
pointer-events: none;
border-radius: 50%;
}
.agent-speech-v2[data-mood="ecstatic"] .agent-avatar-face{ animation: cmMoodBounce 1.1s ease-in-out infinite; }
.agent-speech-v2[data-mood="ecstatic"] .agent-avatar-fx{
background: radial-gradient(circle, rgba(255,215,90,0.55) 0%, rgba(255,215,90,0) 60%);
animation: cmMoodGlow 1.4s ease-in-out infinite;
}
.agent-speech-v2[data-mood="ecstatic"] .agent-avatar-fx::before,
.agent-speech-v2[data-mood="ecstatic"] .agent-avatar-fx::after{
content: "✦"; position: absolute; font-size: 14px; color: #ffce4d;
animation: cmMoodSparkle 1.6s ease-in-out infinite;
}
.agent-speech-v2[data-mood="ecstatic"] .agent-avatar-fx::before{ top: -6px; left: -6px; }
.agent-speech-v2[data-mood="ecstatic"] .agent-avatar-fx::after{ bottom: -6px; right: -6px; animation-delay: 0.4s; }
.agent-speech-v2[data-mood="happy"] .agent-avatar-face{ animation: cmMoodNod 2.4s ease-in-out infinite; }
.agent-speech-v2[data-mood="thinking"] .agent-avatar-face{ animation: cmMoodTilt 3s ease-in-out infinite; }
.agent-speech-v2[data-mood="thinking"] .agent-avatar-fx::before{
content: "?"; position: absolute; top: -10px; right: -10px;
font-size: 14px; font-weight: 800; color: #BA7517;
animation: cmMoodFloat 2.2s ease-in-out infinite;
}
.agent-speech-v2[data-mood="sad"] .agent-avatar-face{ animation: cmMoodSag 3s ease-in-out infinite; filter: saturate(0.7); }
.agent-speech-v2[data-mood="sad"] .agent-avatar-fx::before{
content: "💧"; position: absolute; top: 4px; right: -4px; font-size: 10px;
animation: cmMoodTear 2.6s ease-in-out infinite;
opacity: 0;
}
.agent-speech-v2[data-mood="dizzy"] .agent-avatar-face{ animation: cmMoodShake 0.5s ease-in-out infinite; }
.agent-speech-v2[data-mood="dizzy"] .agent-avatar-fx::before{
content: "✶"; position: absolute; top: -4px; left: 50%; transform-origin: 0 18px;
font-size: 12px; color: #C03A39;
animation: cmMoodSpin 1.4s linear infinite;
}
@keyframes cmMoodBounce{ 0%,100%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(-4px) scale(1.06); } }
@keyframes cmMoodGlow{ 0%,100%{ opacity: 0.5; transform: scale(0.9); } 50%{ opacity: 1; transform: scale(1.1); } }
@keyframes cmMoodSparkle{ 0%,100%{ opacity: 0; transform: scale(0.6) rotate(0deg); } 50%{ opacity: 1; transform: scale(1.2) rotate(180deg); } }
@keyframes cmMoodNod{ 0%,100%{ transform: rotate(0); } 50%{ transform: rotate(6deg); } }
@keyframes cmMoodTilt{ 0%,100%{ transform: rotate(-4deg); } 50%{ transform: rotate(4deg); } }
@keyframes cmMoodFloat{ 0%,100%{ transform: translateY(0); opacity: 0.5; } 50%{ transform: translateY(-4px); opacity: 1; } }
@keyframes cmMoodSag{ 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(2px) rotate(-4deg); } }
@keyframes cmMoodTear{ 0%,40%{ opacity: 0; transform: translateY(0); } 50%{ opacity: 1; } 100%{ opacity: 0; transform: translateY(10px); } }
@keyframes cmMoodShake{ 0%,100%{ transform: translateX(0); } 25%{ transform: translateX(-2px) rotate(-3deg); } 75%{ transform: translateX(2px) rotate(3deg); } }
@keyframes cmMoodSpin{ 0%{ transform: translateX(-50%) rotate(0deg); } 100%{ transform: translateX(-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
.agent-speech-v2[data-mood] .agent-avatar-face{ animation: none !important; }
.agent-speech-v2[data-mood] .agent-avatar-fx,
.agent-speech-v2[data-mood] .agent-avatar-fx::before,
.agent-speech-v2[data-mood] .agent-avatar-fx::after{ animation: none !important; }
}
/* Scanline shimmer on run/start buttons */
.btn-run.active::after, .btn-start::after{
content:"";
position: absolute;
top: 0; left: -60%;
width: 40%; height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
animation: cmShine 3.2s ease-in-out infinite;
pointer-events: none;
}
.btn-run, .btn-start{ position: relative; overflow: hidden; }
/* ───── Mobile ───── */
@media (max-width: 768px){
.briefing-layout{ grid-template-columns: 1fr; }
.briefing-side{ position: static; }
.timer-hud{ padding: 3px 8px 3px 3px; }
.timer-hud .timer-ring{ width: 20px; height: 20px; }
.timer-hud .timer-mono{ font-size: 11px; }
.timer-hud .timer-label{ font-size: 8px; }
.telemetry-strip{ font-size: 9.5px; padding: 6px 10px; }
.teach-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 480px){
.telemetry-strip .ts-sep{ display: none; }
.telemetry-strip{ gap: 4px 6px; }
.cc-meter-pct{ display: none; }
}
/* ── Task-type tags + agent↔task match highlighting ── */
.ac-task-row{ margin: 4px 0 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ac-task-tag{
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--fm, 'JetBrains Mono', monospace);
font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
padding: 2px 7px; border-radius: 4px;
background: #EEF3FA; color: var(--cm-hud-line); border: 1px solid #C7DBF1;
}
.agent-card.locked .ac-task-tag{ background:#ecebe4; color:#888; border-color:#dcdacf; }
/* Inline match pill — sits next to the task tag on the agent card */
.ac-match-pill{
display: inline-flex; align-items: center;
font-family: var(--fm, 'JetBrains Mono', monospace);
font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em;
padding: 2px 7px; border-radius: 4px;
}
.ac-match-pill.spec{
background:#1D9E75; color:#fff;
box-shadow: 0 2px 6px rgba(29,158,117,0.35);
}
.ac-match-pill.any{
background:var(--cm-hud-soft); color:var(--cm-hud-line); border:1px solid #C7DBF1;
}
.agent-card.locked .ac-match-pill.spec{ opacity: 0.7; }
/* Card halo + border when agent's signature matches the picked mission */
.agent-card.match-spec{
border-color: #1D9E75 !important;
box-shadow: 0 0 0 1px #1D9E75, 0 6px 18px -8px rgba(29,158,117,0.4);
background: linear-gradient(180deg, #F4FBF8 0%, #FFFFFF 38%);
}
.agent-card.match-spec .ac-status.unlocked{ color:#1D9E75; }
.agent-card.match-any { border-color: #B9D3EE; }
.agent-card.locked.match-spec{ background:#F4FBF8; }
.agent-card.locked.match-spec .ac-match-ribbon.spec{ opacity: 0.75; }
/* Deploy button accent when bonus is in play */
.btn-deploy-go.bonus-spec{
background: linear-gradient(180deg, #22C58F 0%, #1D9E75 100%) !important;
border-color: #178A66 !important;
color: #fff !important;
}
.btn-deploy-go.bonus-spec:hover:not(:disabled){
background: linear-gradient(180deg, #2BD89C 0%, #22C58F 100%) !important;
}
.btn-deploy-go.bonus-any{ border-color:#B9D3EE !important; }
/* Mission card task tag */
.mc-title-row{
display: flex; align-items: flex-start; justify-content: space-between;
gap: 10px; margin: 6px 0 2px;
}
.mc-title-row .mc-title{ margin: 0; flex: 1; min-width: 0; }
.mc-task-tag{
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 3px;
font-family: inherit;
font-size: 10.5px; font-weight: 600; letter-spacing: 0;
padding: 3px 7px; border-radius: var(--cm-r-chip);
background: #FFF4D9; color: #8A6112; border: 1px solid #F2D580;
text-transform: none; white-space: nowrap;
}
.mission-card.locked .mc-task-tag{ display: none; }
/* ────────────────────────────────────────────────────────────────────
LEVEL 0 — FORGE YOUR BASE CONTEXT
──────────────────────────────────────────────────────────────────── */
/* Pinned M-00 tile in mission grid — warm-tint "setup" card to separate from ops */
.mission-card.bc-tile{
position:relative;
background:linear-gradient(135deg,#fff8ec 0%,#fdeed1 100%);
border:1px solid #e6c997;
border-left:3px solid #c68a2e;
box-shadow:0 2px 8px rgba(184,122,48,0.10);
}
.mission-card.bc-tile::before{
background-image:
linear-gradient(transparent 95%,rgba(184,122,48,0.05) 95%),
linear-gradient(90deg,transparent 95%,rgba(184,122,48,0.05) 95%);
}
.mission-card.bc-tile:hover{
border-color:#c68a2e;
box-shadow:0 10px 22px rgba(198,138,46,0.18);
}
.mission-card.bc-tile .mc-corner{border-color:#c68a2e}
.mission-card.bc-tile .mc-code{color:#8a5a1c}
.mission-card.bc-tile .mc-divider{
background:repeating-linear-gradient(90deg,#c68a2e 0 4px,transparent 4px 8px);
}
.mission-card.bc-tile .mc-task-tag{
background:#fff5e0; color:#8a5a1c; border-color:#e6c997;
}
/* override the blue "Ready" pulse — use warm amber "Pre-mission" instead */
.mission-card.bc-tile .mc-status-badge.sb-ready{
background:linear-gradient(135deg,#E8A33D,#C77A1F);
color:#fff;
box-shadow:0 0 10px rgba(198,138,46,0.45);
}
/* override the teal "Begin" button — use warm amber instead */
.mission-card.bc-tile .btn-deploy,
.mission-card.bc-tile .btn-deploy.ready{
background:#C77A1F;
box-shadow:0 0 0 1px #C77A1F,0 6px 14px rgba(198,138,46,0.28);
animation:none;
}
.mission-card.bc-tile .btn-deploy:hover{background:#8a5a1c}
/* Done state — warm bg fades to soft green-tinted "completed" feel */
.mission-card.bc-tile-done{
background:linear-gradient(135deg,#fbfaf3 0%,#f3f6ea 100%);
border-color:#cdd9b8;
border-left:3px solid #4FA63A;
box-shadow:0 2px 8px rgba(79,166,58,0.10);
}
.mission-card.bc-tile-done .mc-corner{border-color:#7da85c}
.mission-card.bc-tile-done .mc-code{color:#4a6a2e}
.mission-card.bc-tile-done .mc-divider{
background:repeating-linear-gradient(90deg,#7da85c 0 4px,transparent 4px 8px);
}
.mission-card.bc-tile-done .mc-task-tag{
background:#f1f7ea; color:#4a6a2e; border-color:#cdd9b8;
}
.mission-card.bc-tile-done .btn-deploy,
.mission-card.bc-tile-done .btn-deploy.ready{
background:#4FA63A;
box-shadow:none;
animation:none;
}
.mission-card.bc-tile-done .btn-deploy:hover{background:#3a7d2a}
/* Broken-lock "Context-Crafted" badge in mission-select header */
.bc-crafted-badge{
display:inline-flex; align-items:center; gap:6px;
background:linear-gradient(180deg,#F0FDF4,#DCFCE7);
border:1px solid #86EFAC; color:#15803D;
padding:5px 11px; border-radius:var(--cm-r-pill,999px);
font-weight:600; font-size:12.5px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
}
.bc-cb-icon{display:inline-flex; width:14px; height:14px;}
/* Personal context card in card-grid */
.ctx-card.ctx-card-personal{
position:relative;
background:linear-gradient(180deg,#F0FAFA 0%,#FFFFFF 100%);
border:1px solid #7CCCC9;
box-shadow:0 4px 14px rgba(6,126,123,0.10);
}
.ctx-card.ctx-card-personal.selected{
border:1.5px solid #067E7B; background:#D6F0EF;
}
.cc-stat-personal{
background:linear-gradient(135deg,#0DA8A4,#067E7B);
color:#fff; font-family:var(--cm-mono,monospace);
font-size:10px; font-weight:700; letter-spacing:0.08em;
padding:2px 7px; border-radius:var(--cm-r-chip,4px);
display:inline-flex; align-items:center; gap:4px;
}
.cc-stat-personal svg{ width:11px; height:11px; }
/* ── Base-context screen ── */
#screen-base-context-intro{display:none;}
#screen-base-context-intro.active{display:block;}
#screen-base-context{display:none;}
#screen-base-context.active{display:block;}
.bc-intro-wrap{
max-width:760px; margin:0 auto; padding:28px 14px 60px;
}
.bc-intro-hero{
margin:6px 0 18px;
}
.bc-intro-steps{
display:grid; gap:10px; margin:18px 0 20px;
}
.bc-intro-step{
display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:flex-start;
background:linear-gradient(180deg,#fff,#fafaf7);
border:1px solid #e1ded2; border-radius:var(--cm-r-card);
padding:14px; box-shadow:0 4px 16px rgba(20,20,20,0.04);
}
.bc-intro-num{
width:32px; height:32px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:#E7F7F5; color:#067E7B; border:1px solid #BDE8E4;
font-weight:800; font-size:13px;
}
.bc-intro-step h2{
font-size:15px; font-weight:750; color:#111; margin:0 0 4px;
}
.bc-intro-step p{
font-size:13.5px; line-height:1.55; color:#555; margin:0;
}
.bc-intro-actions{
display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
}
.bc-intro-start{
width:auto; min-width:180px; padding:12px 18px;
}
@media(max-width:560px){
.bc-intro-wrap{padding-top:16px;}
.bc-intro-step{grid-template-columns:34px 1fr; padding:12px;}
.bc-intro-num{width:28px;height:28px;}
.bc-intro-actions{align-items:stretch;}
.bc-intro-actions > button{width:100%;}
}
.bc-wrap{
max-width:880px; margin:0 auto; padding:18px 14px 60px;
}
.bc-head{margin:6px 0 18px;}
.bc-eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--cm-mono,monospace);
font-size:11px; font-weight:700; letter-spacing:0.06em;
color:#067E7B; margin-bottom:6px;
}
.bc-pulse{
width:7px; height:7px; border-radius:50%;
background:#0DA8A4;
box-shadow:0 0 0 0 rgba(6,126,123,0.7);
animation:bc-pulse 1.6s infinite;
}
@keyframes bc-pulse{
0%{box-shadow:0 0 0 0 rgba(6,126,123,0.6);}
70%{box-shadow:0 0 0 8px rgba(6,126,123,0);}
100%{box-shadow:0 0 0 0 rgba(6,126,123,0);}
}
.bc-title{font-size:28px; font-weight:800; letter-spacing:-0.01em; color:#111; margin:2px 0 6px;}
.bc-sub{font-size:14.5px; color:#555; line-height:1.55; max-width:640px;}
/* Why row */
.bc-why{
display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
margin:12px 0 24px; padding:10px 0 0;
border-top:1px dashed rgba(6,126,123,0.22);
}
.bc-why > span{
display:inline-flex; align-items:center; gap:6px;
color:#555; font-size:12.5px; line-height:1.45;
}
.bc-why > span + span::before{
content:""; width:4px; height:4px; border-radius:50%;
background:#B8DAD9; margin-right:8px;
}
.bc-why [data-icon]{
flex-shrink:0; width:18px; height:18px; border-radius:50%;
background:#E7F7F6; color:#067E7B;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
font-size:12px; line-height:1;
}
.bc-why [data-icon] svg{display:block; width:11px; height:11px;}
/* Section labels */
.bc-section-label{
font-family:var(--cm-mono,monospace);
font-size:13px; font-weight:700; letter-spacing:0;
color:#555; margin:0 0 8px;
}
.bc-track, .bc-placement, .bc-depth, .bc-launch, .bc-checkin{margin:0 0 22px;}
/* Track cards */
.bc-track-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
gap:10px;
}
.bc-track-card{
--bc-track-accent:#2563EB;
--bc-track-bg:#EFF6FF;
text-align:left; cursor:pointer;
background:#fff; border:1px solid #ddd; border-radius:var(--cm-r-card,10px);
padding:14px 16px; font-family:inherit; color:inherit;
transition:all 0.18s var(--cm-ease,ease);
}
.bc-track-card[data-track="automation"]{--bc-track-accent:#7C3AED; --bc-track-bg:#F5F3FF;}
.bc-track-card[data-track="management"]{--bc-track-accent:#D97706; --bc-track-bg:#FFFBEB;}
.bc-track-card:hover{border-color:#bbb; transform:translateY(-1px);}
.bc-track-card.on{
border:1.5px solid var(--bc-track-accent);
background:linear-gradient(180deg,var(--bc-track-bg),#FFFFFF);
box-shadow:0 6px 18px color-mix(in srgb, var(--bc-track-accent) 14%, transparent);
}
.bc-track-head{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px;}
.bc-track-tag{
font-family:var(--cm-mono,monospace);
font-size:10px; font-weight:700; letter-spacing:0.06em;
padding:2px 7px; border-radius:var(--cm-r-chip,4px);
background:var(--bc-track-accent); color:#fff;
}
.bc-track-dot{
width:10px; height:10px; border-radius:999px;
background:var(--bc-track-accent); opacity:0.35;
}
.bc-track-card.on .bc-track-dot{opacity:1; box-shadow:0 0 0 4px color-mix(in srgb, var(--bc-track-accent) 16%, transparent);}
.bc-track-name{font-size:15px; font-weight:700; color:#111; margin-bottom:4px;}
.bc-track-desc{font-size:13px; color:#555; line-height:1.45; min-height:38px;}
.bc-track-use{margin-top:10px;}
.bc-track-use-label{
font-family:var(--cm-mono,monospace);
font-size:12px; font-weight:700; letter-spacing:0;
color:var(--bc-track-accent); margin-bottom:5px;
}
.bc-track-chips{display:flex; flex-wrap:wrap; gap:6px;}
.bc-track-chips span{
font-size:11px; font-weight:700; color:#374151; line-height:1.25;
background:rgba(255,255,255,0.78); border:1px solid rgba(0,0,0,0.08);
padding:3px 7px; border-radius:var(--cm-r-chip,4px);
}
/* Placement guide */
.bc-placement{
background:linear-gradient(180deg,#FAFAF8,#FFFFFF);
border:1px dashed #d8d5c9; border-radius:var(--cm-r-card,10px);
padding:12px 14px 13px;
}
.bc-placement-card{
--bc-placement-accent:#0DA8A4;
max-width:720px;
}
.bc-placement-item{
border-left:3px solid var(--bc-placement-accent);
padding:0 0 0 10px;
}
.bc-placement-card[data-track="automation"]{--bc-placement-accent:#7C3AED;}
.bc-placement-card[data-track="management"]{--bc-placement-accent:#D97706;}
.bc-placement-name{
font-size:12.5px; font-weight:800; color:#111; line-height:1.3; margin-bottom:3px;
}
.bc-placement-item p{
font-size:12px; color:#555; line-height:1.45; margin:0 0 6px;
}
.bc-placement-tools{
font-size:11px; font-weight:700; color:#374151; line-height:1.35;
}
/* Depth cards */
.bc-depth-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
gap:10px;
}
.bc-depth-card{
text-align:left; cursor:pointer;
background:#fff; border:1px solid #ddd; border-radius:var(--cm-r-card,10px);
padding:14px 16px; font-family:inherit; color:inherit;
transition:all 0.18s var(--cm-ease,ease);
}
.bc-depth-card:hover{border-color:#bbb; transform:translateY(-1px);}
.bc-depth-card.on{
border:1.5px solid #067E7B;
background:linear-gradient(180deg,#F0FAFA,#FFFFFF);
box-shadow:0 6px 18px rgba(6,126,123,0.10);
}
.bc-depth-head{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px;}
.bc-depth-tag{
font-family:var(--cm-mono,monospace);
font-size:10px; font-weight:700; letter-spacing:0.06em;
padding:2px 7px; border-radius:var(--cm-r-chip,4px);
}
.bc-depth-tag-fast{background:#0DA8A4; color:#fff;}
.bc-depth-tag-deep{background:#1F2937; color:#fff;}
.bc-depth-time{font-size:12px; color:#888; font-weight:600;}
.bc-depth-name{font-size:15px; font-weight:700; color:#111; margin-bottom:4px;}
.bc-depth-desc{font-size:13px; color:#555; line-height:1.5;}
/* Tool launch buttons */
.bc-launch-row{
display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
gap:10px; margin-bottom:10px;
}
.bc-tool{
display:flex; align-items:center; gap:12px;
text-decoration:none; padding:14px 16px;
border-radius:var(--cm-r-card,10px); color:#fff;
transition:transform 0.15s ease, box-shadow 0.18s ease;
font-weight:600;
}
.bc-tool:hover{transform:translateY(-1px);}
.bc-tool-claude{background:linear-gradient(135deg,#D97757,#A04A2D); box-shadow:0 6px 18px rgba(217,119,87,0.25);}
.bc-tool-chatgpt{background:linear-gradient(135deg,#10A37F,#0B6E55); box-shadow:0 6px 18px rgba(16,163,127,0.25);}
.bc-tool-gemini{background:linear-gradient(135deg,#4F8AF7,#7B5EE6); box-shadow:0 6px 18px rgba(79,138,247,0.25);}
.bc-tool-icon{
width:40px; height:40px; border-radius:10px;
background:#fff; color:#111;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
flex-shrink:0;
font-size:24px; line-height:1;
box-shadow:0 1px 2px rgba(0,0,0,0.12);
}
.bc-tool-icon svg{display:block;}
.bc-tool-icon-letter{font-family:var(--fh, system-ui, sans-serif); font-weight:800; font-size:22px; line-height:1;}
.bc-tool-claude .bc-tool-icon{color:#D97757;}
.bc-tool-chatgpt .bc-tool-icon{color:#10A37F;}
.bc-tool-gemini .bc-tool-icon{color:#4F8AF7;}
.bc-tool-arrow{font-size:18px;}
.bc-tool-body{display:flex; flex-direction:column; flex:1;}
.bc-tool-name{font-size:14.5px; font-weight:700; line-height:1.2;}
.bc-tool-meta{font-size:11.5px; opacity:0.85; font-weight:500;}
.bc-tool-arrow{
display:inline-flex; opacity:0.85;
transition:transform 0.15s ease;
}
.bc-tool:hover .bc-tool-arrow{transform:translateX(3px);}
/* Sub-steps within step 03 */
.bc-substep + .bc-substep{ margin-top:16px; }
.bc-substep-label{
font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
color:#888; margin-bottom:8px;
}
/* Fallback row */
.bc-launch-fallback{
display:flex; gap:8px; align-items:center; flex-wrap:wrap;
padding:0;
}
.bc-copy-btn, .bc-toggle-prompt{
display:inline-flex; align-items:center; gap:6px;
background:#fff; border:0.5px solid #ccc; border-radius:var(--cm-r-btn,8px);
padding:7px 12px; font-size:12.5px; font-weight:600; color:#333; cursor:pointer;
font-family:inherit;
}
.bc-copy-btn:hover, .bc-toggle-prompt:hover{background:#f5f5f0; border-color:#aaa;}
/* Primary copy — hero action of sub-step A */
.bc-copy-primary{
background:var(--cm-accent,#7C3AED); border-color:var(--cm-accent,#7C3AED); color:#fff;
padding:9px 16px; font-size:13px;
box-shadow:0 4px 12px color-mix(in srgb, var(--cm-accent,#7C3AED) 28%, transparent);
}
.bc-copy-primary:hover{
background:color-mix(in srgb, var(--cm-accent,#7C3AED) 88%, #000);
border-color:color-mix(in srgb, var(--cm-accent,#7C3AED) 88%, #000);
}
.bc-copy-primary .cm-ico{stroke:#fff;}
.bc-toggle-prompt .cm-ico{transition:transform 0.18s ease;}
.bc-toggle-prompt.open .cm-ico{transform:rotate(90deg);}
.bc-launch-hint{font-size:12px; color:#888;}
.bc-prompt-preview{
margin-top:10px; max-height:260px; overflow:auto;
background:#0F172A; color:#E5E7EB;
border-radius:var(--cm-r-card,10px); padding:14px 16px;
font-family:var(--cm-mono,monospace); font-size:12.5px; line-height:1.55;
}
.bc-prompt-preview pre{white-space:pre-wrap; word-break:break-word;}
.bc-trim-hint{
margin-top:16px;
max-width:760px;
border:1px dashed #d8d5c9;
border-radius:var(--cm-r-card,10px);
background:linear-gradient(180deg,#FAFAF8,#FFFFFF);
color:#555;
padding:11px 12px 4px;
}
/* Always-visible heading + note */
.bc-trim-head{
display:flex; align-items:center; gap:7px;
font-size:12.5px; font-weight:700; color:#555;
}
.bc-trim-head [data-icon]{
color:#B28200;
width:16px; height:16px;
display:inline-flex !important;
}
.bc-trim-hint .bc-trim-note{
margin:0; padding:6px 12px 4px 23px;
font-size:12px; line-height:1.5; color:#777;
}
/* Collapsible trim prompt */
.bc-trim-details{ margin-top:6px; }
.bc-trim-details summary{
display:flex; align-items:center; gap:7px;
padding:7px 0;
cursor:pointer;
font-size:12.5px; font-weight:700; color:#555;
list-style:none;
margin-left:23px;
}
.bc-trim-details summary::-webkit-details-marker{display:none;}
.bc-trim-copy{
margin-left:auto;
padding:4px 9px;
font-size:12px;
}
.bc-trim-details summary::after{
content:"";
width:7px; height:7px;
border-right:1.5px solid #888;
border-bottom:1.5px solid #888;
transform:rotate(-45deg);
margin-left:8px;
transition:transform 0.16s ease;
order:1;
}
.bc-trim-details[open] summary::after{transform:rotate(45deg);}
.bc-trim-hint p{
margin:0;
padding:0 12px 9px 23px;
font-size:12px; line-height:1.5; color:#777;
}
.bc-trim-hint pre{
margin:0 12px 12px 23px;
padding:10px 12px;
border-radius:var(--cm-r-btn,8px);
background:#F4F4F0;
border:1px solid #E4E1D6;
color:#333;
font-family:var(--cm-mono,monospace);
font-size:11.5px;
line-height:1.5;
white-space:pre-wrap;
word-break:break-word;
}
/* Check-in card */
.bc-checkin-card{
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
background:linear-gradient(180deg,#E8F7F6 0%,#F4FBFB 100%);
border:1px solid #7CCCC9; border-radius:var(--cm-r-card,10px);
padding:14px 16px;
}
.bc-checkin-card.done{
background:linear-gradient(180deg,#EFFBE6 0%,#F8FEEF 100%);
border-color:#86EFAC;
}
.bc-ci-body{display:flex; align-items:center; gap:12px; flex:1; min-width:240px;}
.bc-ci-icon{
width:42px; height:42px; border-radius:10px;
background:#fff; color:#067E7B;
display:inline-flex; align-items:center; justify-content:center;
border:1px solid #7CCCC9;
}
.bc-checkin-card.done .bc-ci-icon{color:#15803D; border-color:#86EFAC;}
.bc-ci-title{font-size:15px; font-weight:700; color:#111; margin-bottom:2px;}
.bc-ci-sub{font-size:12.5px; color:#555; line-height:1.5;}
.bc-ci-btn{
display:inline-flex; align-items:center; gap:8px;
background:linear-gradient(135deg,#0DA8A4,#067E7B);
color:#fff; border:none; border-radius:var(--cm-r-btn,8px);
padding:10px 16px; font-size:13.5px; font-weight:700; cursor:pointer;
box-shadow:0 4px 12px rgba(6,126,123,0.25);
font-family:inherit;
}
.bc-ci-btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(6,126,123,0.30);}
.bc-checkin-card.done .bc-ci-btn{
background:linear-gradient(135deg,#4FA63A,#2E7A21);
box-shadow:0 4px 12px rgba(79,166,58,0.25);
}
.bc-ci-check{
width:18px; height:18px; border-radius:5px;
background:rgba(255,255,255,0.18);
border:1.5px solid rgba(255,255,255,0.85);
display:inline-flex; align-items:center; justify-content:center;
flex-shrink:0; transition:background 0.18s ease, border-color 0.18s ease;
}
.bc-ci-check.on{background:#fff; border-color:#fff; color:#15803D;}
.bc-ci-check.on .cm-ico{width:14px; height:14px; stroke-width:3;}
.bc-checkin-card.done .bc-ci-btn:hover{
background:linear-gradient(135deg,#5BB445,#357F26);
}
/* Copy button — "Copied!" morph */
.bc-copy-btn.copied{
background:#DCFCE7; border-color:#86EFAC; color:#15803D;
}
.bc-copy-btn.copied .cm-ico{stroke:#15803D; stroke-width:3;}
.bc-copy-primary.copied{ background:#15803D; border-color:#15803D; color:#fff; box-shadow:none; }
.bc-copy-primary.copied .cm-ico{stroke:#fff;}
.bc-privacy{font-size:11.5px; color:#888; margin-top:8px;}
.bc-foot{margin-top:10px;}
/* Workshop banner */
.bc-workshop-banner{
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
background:linear-gradient(135deg,#1F2937,#0F172A);
color:#fff; border-radius:var(--cm-r-card,10px);
padding:14px 18px; margin-bottom:16px;
box-shadow:0 8px 24px rgba(15,23,42,0.25);
}
.bc-wb-pulse{
width:10px; height:10px; border-radius:50%;
background:#34D399;
box-shadow:0 0 0 0 rgba(52,211,153,0.6);
animation:bc-pulse 1.6s infinite;
flex-shrink:0;
}
.bc-wb-text{flex:1; min-width:200px;}
.bc-wb-eyebrow{
font-family:var(--cm-mono,monospace); font-size:10.5px; font-weight:700;
letter-spacing:0.08em; color:#FCD34D; margin-bottom:2px;
}
.bc-wb-title{font-size:17px; font-weight:800; letter-spacing:-0.01em;}
.bc-wb-share{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.bc-wb-url{
font-family:var(--cm-mono,monospace); font-size:12px;
background:rgba(255,255,255,0.08); color:#E5E7EB;
padding:6px 10px; border-radius:var(--cm-r-btn,8px);
max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bc-wb-copy{
display:inline-flex; align-items:center; gap:6px;
background:#FCD34D; color:#1F2937; border:none;
border-radius:var(--cm-r-btn,8px); padding:7px 12px;
font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
}
.bc-wb-copy:hover{background:#FBBF24;}
.bc-wb-qr{display:inline-flex;}
.bc-qr-stub{
display:inline-flex; align-items:center; gap:6px;
background:rgba(255,255,255,0.10); color:#E5E7EB;
border:1px dashed rgba(252,211,77,0.5);
padding:7px 10px; border-radius:var(--cm-r-btn,8px);
font-size:11.5px; font-weight:600;
}
@media (max-width: 640px){
.bc-wb-url{max-width:100%; flex:1;}
.bc-checkin-card{flex-direction:column; align-items:flex-start;}
.bc-ci-btn{width:100%; justify-content:center;}
}
/* ─────────────────────────────────────────────
M-00 Pre-mission briefing (intro + setup)
Reuses .agent-brief / .briefing-layout from
the mission deployment screen, tinted teal.
───────────────────────────────────────────── */
/* Brief panel — teal-tinted variant of .agent-brief */
.bc-brief{
background:linear-gradient(180deg,#F4FBFB 0%,#E8F5F3 100%);
border-color:#CFE6E2;
}
.bc-brief .ab-corner{border-color:#7CCCC9;}
.bc-brief .ab-eyebrow{color:#067E7B;}
.bc-brief .msh-pulse{
background:#0DA8A4;
box-shadow:0 0 0 0 rgba(13,168,164,0.55);
animation:bc-pulse 1.6s infinite;
}
.bc-brief .ab-title{color:#0B3D3B;}
.bc-brief .ab-actions{border-top-color:#CFE6E2;}
/* Persuasive hook directly under the title */
.bc-brief-hook{
position:relative; z-index:1;
font-size:15px; line-height:1.5; font-weight:700;
color:#0B3D3B; margin:0 0 8px; max-width:780px;
}
.bc-brief-hook em{font-style:normal; color:#0DA8A4;}
/* Closing kicker above the actions */
.bc-brief-kicker{
position:relative; z-index:1;
font-size:13.5px; line-height:1.5; font-weight:600;
color:#0B3D3B; margin:0 0 14px; padding-left:12px;
border-left:3px solid #0DA8A4; max-width:780px;
}
/* "What you'll get" pill list inside the brief */
.bc-brief-points{
position:relative; z-index:1;
list-style:none; margin:4px 0 14px; padding:0;
display:grid; gap:6px;
}
.bc-brief-points li{
display:flex; align-items:flex-start; gap:8px;
font-size:13px; line-height:1.5; color:#1f3a38;
}
.bc-brief-points strong{color:#0B3D3B; font-weight:700; margin-right:4px;}
.bc-bp-dot{
flex:none; margin-top:7px;
width:6px; height:6px; border-radius:50%;
background:#0DA8A4;
box-shadow:0 0 0 3px rgba(13,168,164,0.16);
}
/* "Begin M-00" deploy button — teal variant of .btn-deploy-go */
.btn-deploy-go.bc-brief-go{
width:auto; min-width:220px;
background:linear-gradient(135deg,#0DA8A4,#067E7B);
box-shadow:0 8px 20px -8px rgba(6,126,123,0.55);
}
.btn-deploy-go.bc-brief-go:hover:not(:disabled){
box-shadow:0 12px 26px -10px rgba(6,126,123,0.65);
}
/* Setup screen — wrap + briefing grid */
.bc-setup-wrap{padding-top:6px;}
.bc-briefing-layout{
grid-template-columns:1fr 320px;
gap:18px;
}
.bc-briefing-layout .briefing-main{display:flex; flex-direction:column; gap:14px;}
.bc-briefing-layout .briefing-side{gap:14px; top:90px;}
/* Step cards in the main column */
.bc-step-card{padding:16px 18px;}
.bc-step-card > .bs-label{
font-family:var(--cm-mono,monospace);
font-size:13px; font-weight:700; letter-spacing:0;
color:#067E7B;
margin-bottom:12px;
display:inline-flex; align-items:center; gap:6px;
}
.bc-step-card .bc-track-grid,
.bc-step-card .bc-depth-grid,
.bc-step-card .bc-launch-row{margin:0;}
/* Side cards */
.bc-side-card{padding:14px 16px;}
.bc-side-card > .bs-label{
display:inline-flex; align-items:center; gap:6px;
color:#067E7B;
}
.bc-side-card > .bs-label [data-icon]{
display:inline-flex !important;
align-items:center; justify-content:center;
width:14px; height:14px;
}
.bc-side-card .bc-placement-card{max-width:none;}
.bc-side-card .bc-placement-item{padding:2px 0 0 10px;}
.bc-side-card .bc-checkin-card{
margin:0;
background:linear-gradient(180deg,#F4FBFB 0%,#FFFFFF 100%);
border-color:#CFE6E2;
flex-direction:column; align-items:stretch;
padding:12px 14px;
}
.bc-side-card .bc-ci-body{min-width:0;}
.bc-side-card .bc-ci-btn{width:100%; justify-content:center; margin-top:10px;}
.bc-side-card .bc-privacy{margin:8px 2px 0;}
/* Override briefing-side corners to match teal accent */
.bc-briefing-layout .bs-card{
border-color:#CFE6E2;
box-shadow:0 1px 0 rgba(6,126,123,0.04), 0 6px 14px -10px rgba(6,126,123,0.18);
}
.bc-briefing-layout .bs-card::before,
.bc-briefing-layout .bs-card::after{border-color:#0DA8A4;}
/* Mobile collapse */
@media (max-width: 860px){
.bc-briefing-layout{grid-template-columns:1fr;}
.bc-briefing-layout .briefing-side{position:static; top:auto;}
.bc-side-card .bc-ci-btn{width:auto;}
}
@media (max-width: 560px){
.bc-brief .ab-title{font-size:22px;}
.btn-deploy-go.bc-brief-go{width:100%; min-width:0;}
.bc-brief .ab-actions{flex-direction:column-reverse; align-items:stretch;}
.bc-brief .ab-actions .btn-back{width:100%; justify-content:center;}
}
/* ───────────────────── Welcome / Intro screen v3 (cinematic) ───────────────────── */
.cm-intro {
position: relative;
margin: 8px 0 18px;
border-radius: 20px;
overflow: hidden;
background:
radial-gradient(ellipse 100% 60% at 50% -10%, rgba(127,182,240,0.22), transparent 65%),
radial-gradient(ellipse 80% 50% at -5% 110%, rgba(245,166,35,0.12), transparent 60%),
radial-gradient(ellipse 60% 50% at 105% 110%, rgba(197,150,255,0.14), transparent 60%),
linear-gradient(180deg, #0e1116 0%, #161b22 100%);
color: #e7ecf2;
border: 1px solid #1f2730;
box-shadow: 0 30px 60px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.02);
animation: cm-intro-fade .55s ease-out;
}
@keyframes cm-intro-fade {
from { opacity: 0; transform: translateY(8px) scale(0.99); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Blueprint grid */
.cm-intro::before {
content: "";
position: absolute; inset: 0; pointer-events: none; opacity: .22;
background-image:
linear-gradient(to right, rgba(140,180,220,.18) 1px, transparent 1px),
linear-gradient(to bottom, rgba(140,180,220,.18) 1px, transparent 1px);
background-size: 32px 32px;
-webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 80%);
mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 80%);
}
/* Scan line */
.cm-intro::after {
content: "";
position: absolute; left: 0; right: 0; top: -30%; height: 80%;
background: linear-gradient(180deg, transparent 0%, rgba(120,180,240,.07) 50%, transparent 100%);
animation: cm-intro-scan 7s linear infinite;
pointer-events: none;
}
@keyframes cm-intro-scan {
0% { transform: translateY(0%); }
100% { transform: translateY(180%); }
}
/* Top channel strip */
.cm-intro-channel {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 8px;
padding: 10px 16px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 12px; letter-spacing: 0; color: #98a7b9; font-weight: 700;
background: rgba(255,255,255,0.03);
border-bottom: 1px dashed rgba(140,180,220,.18);
}
.cm-intro-channel-dot {
width: 7px; height: 7px; border-radius: 50%; background: #56d364;
box-shadow: 0 0 8px rgba(86,211,100,0.7), 0 0 0 3px rgba(86,211,100,0.18);
animation: cm-intro-blink 1.4s ease-in-out infinite;
}
@keyframes cm-intro-blink {
0%, 100% { opacity: 1; }
50% { opacity: .35; }
}
.cm-intro-channel-sep { color: #3b4654; }
.cm-intro-channel-spacer { flex: 1; }
.cm-intro-channel-clock { color: #e7ecf2; letter-spacing: 0.16em; }
/* Body */
.cm-intro-body {
position: relative; z-index: 1;
padding: 36px 26px 26px;
text-align: center;
}
.cm-intro-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 13px; letter-spacing: 0; color: #7fb6f0; font-weight: 700;
padding: 6px 12px; border-radius: 999px;
background: rgba(127, 182, 240, 0.10);
border: 1px solid rgba(127, 182, 240, 0.28);
margin-bottom: 20px;
}
.cm-intro-pulse {
width: 7px; height: 7px; border-radius: 50%; background: #7fb6f0;
box-shadow: 0 0 0 0 rgba(127,182,240,0.55);
animation: cm-intro-pulse 1.6s infinite;
}
@keyframes cm-intro-pulse {
0% { box-shadow: 0 0 0 0 rgba(127,182,240,0.55); }
70% { box-shadow: 0 0 0 9px rgba(127,182,240,0); }
100% { box-shadow: 0 0 0 0 rgba(127,182,240,0); }
}
.cm-intro-eyebrow-sep { color: #3b4654; }
/* Title */
.cm-intro-title {
font-size: clamp(48px, 9vw, 80px);
font-weight: 900; letter-spacing: -0.025em; line-height: 0.95;
margin: 0 0 18px;
color: #fff;
text-shadow: 0 4px 24px rgba(127,182,240,0.18);
}
.cm-intro-title .cm-intro-line { display: block; }
.cm-intro-title .cm-intro-line-2 {
background: linear-gradient(135deg, #7fb6f0 0%, #c596ff 60%, #f5a623 110%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.cm-intro-tag {
font-size: 16px; color: #9fb1c5;
margin: 0 0 12px;
font-weight: 500;
}
.cm-intro-pitch {
font-size: 14.5px; color: #cdd6df; line-height: 1.6;
max-width: 480px; margin: 0 auto 28px;
}
/* Stats strip */
.cm-intro-stats {
display: grid;
grid-template-columns: repeat(4, minmax(80px, 1fr));
gap: 10px;
margin: 0 auto 28px;
max-width: 500px;
}
.cm-intro-stat {
padding: 12px 8px 10px;
border-radius: 12px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(140,180,220,.18);
display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.cis-num {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 22px; font-weight: 800; color: #fff;
letter-spacing: 0.02em;
line-height: 1;
}
.cis-lbl {
font-size: 12px; letter-spacing: 0;
color: #8ea2b7; font-weight: 700;
}
/* CTAs */
.cm-intro-ctas {
display: flex; flex-direction: column; gap: 10px;
max-width: 500px; margin: 0 auto 16px;
}
.cm-intro-cta {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
text-align: left;
padding: 14px 18px;
border: 1px solid transparent;
border-radius: 12px;
cursor: pointer;
font-family: inherit;
transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.cm-intro-cta .cic-label {
grid-column: 1; grid-row: 1;
font-size: 15px; font-weight: 700; color: #fff;
}
.cm-intro-cta .cic-meta {
grid-column: 1; grid-row: 2;
font-size: 11.5px; color: rgba(255,255,255,0.7); margin-top: 2px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
letter-spacing: 0.06em;
}
.cm-intro-cta .cic-arrow {
grid-column: 2; grid-row: 1 / span 2;
font-size: 22px; color: rgba(255,255,255,0.85);
margin-left: 14px;
display: inline-flex; align-items: center;
transition: transform .15s ease;
}
.cm-intro-cta:hover .cic-arrow { transform: translateX(4px); }
.cm-intro-cta:active { transform: translateY(1px); }
.cm-intro-cta-primary {
background: linear-gradient(135deg, #1f76c9 0%, #6f4cff 100%);
border-color: rgba(255,255,255,0.18);
box-shadow:
0 10px 30px rgba(24,95,165,0.45),
inset 0 1px 0 rgba(255,255,255,0.18);
}
.cm-intro-cta-primary:hover {
box-shadow:
0 14px 34px rgba(24,95,165,0.60),
inset 0 1px 0 rgba(255,255,255,0.22);
}
.cm-intro-cta-secondary {
background: rgba(255,255,255,0.04);
border-color: rgba(140,180,220,0.28);
}
.cm-intro-cta-secondary:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(140,180,220,0.5);
}
.cm-intro-cta-secondary .cic-label { color: #e7ecf2; }
.cm-intro-cta-secondary .cic-meta { color: rgba(231,236,242,0.6); }
.cm-intro-cta-secondary .cic-arrow { color: rgba(231,236,242,0.7); }
/* Foot links */
.cm-intro-foot {
display: flex; justify-content: center; align-items: center; gap: 8px;
margin-top: 16px;
font-size: 12.5px; color: #8ea2b7;
}
.cm-intro-link {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: none; padding: 5px 8px;
color: #9fb1c5; font-size: 12.5px; cursor: pointer;
font-family: inherit;
border-radius: 6px;
transition: color .15s ease, background .15s ease;
}
.cm-intro-link:hover { color: #fff; background: rgba(255,255,255,0.06); }
.cm-intro-foot-sep { color: #3b4654; }
@media (max-width: 520px) {
.cm-intro-body { padding: 26px 18px 18px; }
.cm-intro-title { font-size: 48px; }
.cm-intro-stats { grid-template-columns: repeat(2, 1fr); max-width: 320px; }
.cm-intro-cta { padding: 12px 14px; }
.cm-intro-channel{ font-size: 11px; letter-spacing: 0; padding: 8px 12px; }
}
/* Howto sub-view (carousel replay) */
.cm-intro-howto { animation: cm-intro-fade .35s ease-out; }
.cm-howto-head {
display: flex; align-items: center; gap: 12px;
padding: 4px 4px 14px;
}
.cm-howto-back {
background: #fff; border: 1px solid #e2e2e2; border-radius: 8px;
padding: 7px 12px; font-size: 12.5px; color: #444; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
font-family: inherit; font-weight: 600;
transition: all .15s ease;
}
.cm-howto-back:hover { border-color: var(--cm-hud-line); color: var(--cm-hud-line); }
.cm-howto-title {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 13px; letter-spacing: 0; color: #555; font-weight: 700;
}
.cm-howto-cta {
width: 100%; padding: 13px; margin-top: 6px;
background: linear-gradient(135deg, #1f76c9 0%, var(--cm-hud-line) 100%);
border: none; border-radius: 10px; color: #fff;
font-size: 14px; font-weight: 600; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
box-shadow: 0 6px 18px rgba(24,95,165,0.28);
transition: transform .15s ease, box-shadow .15s ease;
font-family: inherit;
}
.cm-howto-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(24,95,165,0.38); }
.cm-howto-cta:active { transform: translateY(0) scale(0.99); }
/* ── "Back to start" button on mission select header ── */
.msh-home{
display: inline-flex; align-items: center; gap: 4px;
height: 32px; padding: 0 12px;
border-radius: 16px;
border: 1px solid var(--cm-hud-line);
background: #fff;
color: var(--cm-hud-line);
font-family: inherit;
font-weight: 600;
font-size: 12.5px;
cursor: pointer;
transition: all 140ms ease;
}
.msh-home:hover{ background: var(--cm-hud-line); color: #fff; box-shadow: 0 0 12px var(--cm-hud-glow); }
.msh-home [data-icon]{ display: inline-flex; }
/* ── Bottom nav on base-context screen ── */
.bc-bottom-nav{
margin: 22px 0 8px;
padding-top: 18px;
border-top: 1px dashed #cfd6df;
display: flex; justify-content: center;
}
.btn-back.btn-back-lg{
font-size: 14px;
padding: 10px 18px;
border-radius: 10px;
display: inline-flex; align-items: center; gap: 6px;
}
/* ── Mobile polish (game-wide) ── */
@media (max-width: 640px){
.wrap{ padding: 14px 10px 36px; }
.msh-title{ font-size: 24px; }
.msh-sub{ font-size: 13px; }
.mission-select-head{ padding: 14px 14px 12px; }
.mission-select-head::after{ display: none; }
.msh-right{ gap: 8px; }
.mission-grid{ grid-template-columns: 1fr; gap: 12px; }
.mission-locked-grid{ grid-template-columns: repeat(2, 1fr); }
.mc-title{ font-size: 14.5px; }
.agent-screen-wrap{ padding: 6px 6px 0; }
.ab-title{ font-size: 22px; line-height: 1.2; }
.ab-brief{ font-size: 13.5px; }
.ab-actions{ flex-direction: column-reverse; align-items: stretch; }
.ab-actions .btn-back,
.ab-actions .btn-deploy-go{ width: 100%; justify-content: center; }
.ab-actions .points-display{ align-self: flex-end; }
.briefing-side{ position: static; top: auto; }
.bs-deploy-wrap .btn-deploy-go{ width: 100%; }
#screen-game .mission-bar{ gap: 8px; }
.mission-meta h2{ font-size: 16px; }
.card-grid{ grid-template-columns: 1fr; gap: 10px; }
#tools-container{ flex-wrap: wrap; }
.btn-run, .btn-start{ width: 100%; }
.bc-bottom-nav .btn-back.btn-back-lg{ width: 100%; justify-content: center; }
.bc-track-grid, .bc-depth-grid{ grid-template-columns: 1fr !important; }
.bc-launch-row{ flex-direction: column; }
.bc-launch-row .bc-tool{ width: 100%; }
}
@media (max-width: 420px){
.msh-title{ font-size: 21px; }
.rank-badge, .points-display{ font-size: 12px; padding: 5px 10px; }
.msh-home{ font-size: 11.5px; padding: 0 10px; }
.cm-intro-stats{ grid-template-columns: repeat(2, 1fr); }
.cm-intro-ctas{ grid-template-columns: 1fr; }
}
/* ── Sticky Run dock (mobile only) ── */
.cm-run-dock{ display: contents; }
.cm-run-stats{ display: none; }
@media (max-width: 640px){
.cm-run-dock{
display: block;
position: sticky;
bottom: 0;
left: 0;
right: 0;
z-index: 30;
margin: 14px -10px 0;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
background: rgba(255,255,255,0.92);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
border-top: 1px solid #e6e6dc;
box-shadow: 0 -6px 18px rgba(20,30,50,0.08);
}
.cm-run-dock .btn-run{ margin-top: 0; width: 100%; }
.cm-run-stats{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 12px;
color: #555;
margin: 0 0 8px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-weight: 600;
}
.cm-run-stats .crs-num{
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
background: linear-gradient(135deg,#4774DD,#7B61FF);
color: #fff; font-size: 11px; font-weight: 700;
margin-right: 4px;
}
.cm-run-stats .crs-sep{ color: #bbb; }
.cm-run-stats .crs-budget{ padding: 2px 8px; border-radius: 999px; background: #EAF7F2; color: #1D6B53; }
.cm-run-stats .crs-budget.warn{ background: #FBF1DD; color: #8A5B12; }
.cm-run-stats .crs-budget.over{ background: #FCEBEB; color: #993C1D; }
/* leave room above sticky dock so last card not hidden */
#screen-game .card-grid{ padding-bottom: 12px; }
}
/* ── Mobile touch targets (iOS 44×44 min) ── */
@media (max-width: 640px){
.cm-sound-toggle{ width: 44px; height: 44px; font-size: 17px; }
.tip-btn{ position: relative; }
.tip-btn::before{ content: ""; position: absolute; inset: -13px; }
.mc-sprint-pill{ padding: 12px 14px; font-size: 11.5px; min-height: 44px; }
}
/* ── Mobile intro polish ── */
@media (max-width: 480px){
.cm-intro-title{ font-size: 38px; line-height: 1; margin-bottom: 14px; }
.cm-intro-stats{ grid-template-columns: repeat(2, 1fr); max-width: 320px; gap: 8px; }
.cm-intro-stat{ padding: 10px 6px 8px; }
.cis-num{ font-size: 19px; }
}
/* ============================================================
Secret stash (easter egg) — real base-context files on M-00
============================================================ */
.bc-setup-wrap{ position: relative; }
/* "Secret stash" — invisible hotspot tucked into the brief's bottom-right corner.
No text, no border, no background, default cursor: totally un-noticeable.
Only someone told "tap the bottom-right corner" in person will find it. */
.cm-stash-key{
position: absolute; bottom: 0; right: 0;
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0; margin: 0;
background: transparent; border: 0; outline: none;
cursor: default;
-webkit-tap-highlight-color: transparent;
z-index: 2;
}
.cm-stash-key:focus,
.cm-stash-key:focus-visible{ outline: none; box-shadow: none; }
/* Whisper-faint key glyph — blends into the corner mark, no hover reaction. */
.cm-stash-key .cm-ico{
width: 11px; height: 11px;
stroke: #7CCCC9; opacity: 0.22;
}
.cm-stash-key-pop{ animation: cmKeyPop 0.45s cubic-bezier(.2,.9,.3,1.5); }
@keyframes cmKeyPop{
0%{ transform: scale(1); }
40%{ transform: scale(1.12); }
100%{ transform: scale(1); }
}
/* Party popper burst (birthday-style confetti) */
.cm-party{ position: fixed; inset: 0; z-index: 10000; pointer-events: none; overflow: hidden; }
.cm-party-piece{
position: absolute; width: 10px; height: 14px; border-radius: 2px;
will-change: transform, opacity;
animation-name: cmPartyFly; animation-timing-function: cubic-bezier(.15,.7,.35,1);
animation-fill-mode: both;
}
.cm-party-piece.circle{ width: 11px; height: 11px; border-radius: 50%; }
.cm-party-piece.ribbon{ width: 6px; height: 18px; border-radius: 3px; }
@keyframes cmPartyFly{
0%{ transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
12%{ opacity: 1; }
100%{ transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(0.85); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
.cm-party-piece{ animation-duration: 0.01s !important; opacity: 0 !important; }
.cm-stash-key-pop{ animation: none; }
}
/* Revealed panel */
.cm-stash-panel{
margin-top: 16px;
background: linear-gradient(135deg, #11131A, #0F172A);
border: 1px solid color-mix(in srgb, var(--cm-accent,#7C3AED) 40%, transparent);
border-radius: var(--cm-r-card,12px);
padding: 18px 18px 20px;
animation: cmStashPop 0.35s cubic-bezier(.2,.9,.3,1.3) both;
/* Keep clear of the sticky nav (WP admin bar 32px + nav) when scrolled into view */
scroll-margin-top: 80px;
}
@keyframes cmStashPop{
from{ opacity: 0; transform: translateY(8px) scale(0.98); }
to{ opacity: 1; transform: translateY(0) scale(1); }
}
.cm-stash-head{ margin-bottom: 14px; }
.cm-stash-title{
display: flex; align-items: center; gap: 8px;
font-size: 15px; font-weight: 700; color: #fff;
}
.cm-stash-title .cm-ico{ stroke: #C4B5FD; width: 18px; height: 18px; }
.cm-stash-sub{ margin: 5px 0 0; font-size: 12.5px; color: #9CA3AF; }
.cm-stash-grid{
display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.cm-stash-card{
display: flex; flex-direction: column; gap: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--cm-r-card,10px);
padding: 12px 13px;
}
.cm-stash-card-head{ display: flex; align-items: flex-start; gap: 9px; }
.cm-stash-card-icon{
flex: 0 0 auto; display: inline-flex; margin-top: 1px;
}
.cm-stash-card-icon .cm-ico{ stroke: #C4B5FD; width: 18px; height: 18px; }
.cm-stash-card-text{ min-width: 0; }
.cm-stash-card-title{ font-size: 13px; font-weight: 650; color: #F3F4F6; }
.cm-stash-card-desc{ font-size: 11.5px; color: #9CA3AF; margin-top: 2px; }
/* Indent the action row to line up under the title text (icon 18px + 9px gap),
and let the two buttons share the width evenly so the card reads balanced. */
.cm-stash-card-actions{
display: flex; gap: 8px; margin-top: auto; padding-top: 4px;
padding-left: 27px;
}
/* Match the page's testsigma button system (see .bc-copy-btn / .bc-copy-primary) */
.cm-stash-btn{
flex: 1 1 0; min-width: 0;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer;
border-radius: var(--cm-r-btn,8px); padding: 10px 16px;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.cm-stash-btn:hover{ transform: translateY(-1px); }
.cm-stash-btn:active{ transform: translateY(0); }
.cm-stash-btn .cm-ico{ width: 15px; height: 15px; }
/* Primary — solid teal accent, white text */
.cm-stash-btn-read{
background: var(--cm-accent,#0AB6B2); border: 1px solid var(--cm-accent,#0AB6B2); color: #fff;
box-shadow: 0 4px 12px color-mix(in srgb, var(--cm-accent,#0AB6B2) 28%, transparent);
}
.cm-stash-btn-read:hover{
background: color-mix(in srgb, var(--cm-accent,#0AB6B2) 88%, #000);
border-color: color-mix(in srgb, var(--cm-accent,#0AB6B2) 88%, #000);
}
.cm-stash-btn-read .cm-ico{ stroke: #fff; }
/* Secondary — outline in the teal accent */
.cm-stash-btn-dl{
background: transparent;
border: 1px solid color-mix(in srgb, var(--cm-accent,#0AB6B2) 55%, transparent);
color: var(--cm-accent,#0AB6B2);
}
.cm-stash-btn-dl:hover{
background: color-mix(in srgb, var(--cm-accent,#0AB6B2) 14%, transparent);
border-color: var(--cm-accent,#0AB6B2);
}
.cm-stash-btn-dl .cm-ico{ stroke: var(--cm-accent,#0AB6B2); }
/* Reader modal — z-index above sticky nav (20) and WP admin bar */
.cm-stash-modal{
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 24px;
background: rgba(8, 10, 16, 0.66);
backdrop-filter: blur(3px);
animation: cmStashFade 0.2s ease both;
}
@keyframes cmStashFade{ from{ opacity: 0; } to{ opacity: 1; } }
.cm-stash-dialog{
width: 100%; max-width: 720px; max-height: 85vh;
display: flex; flex-direction: column;
background: #fff; border-radius: 14px; overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.cm-stash-dialog-head{
display: flex; align-items: center; gap: 10px;
padding: 12px 14px; border-bottom: 1px solid #eceae4;
background: #f8f8f6;
}
.cm-stash-modal-title{
flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: #1f2430;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-stash-dl{
display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
background: var(--cm-accent,#7C3AED); border: 1px solid var(--cm-accent,#7C3AED);
color: #fff; border-radius: var(--cm-r-btn,8px); padding: 7px 12px;
}
.cm-stash-dl:hover{ background: color-mix(in srgb, var(--cm-accent,#7C3AED) 88%, #000); }
.cm-stash-dl .cm-ico{ stroke: #fff; width: 14px; height: 14px; }
.cm-stash-x{
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; padding: 0; cursor: pointer;
background: transparent; border: 1px solid #ddd9d0; border-radius: 8px; color: #555;
}
.cm-stash-x:hover{ background: #efece5; }
.cm-stash-x .cm-ico{ stroke: #555; width: 16px; height: 16px; }
/* Rendered markdown body */
.cm-stash-md{
overflow-y: auto; padding: 20px 24px 28px;
font-size: 14px; line-height: 1.62; color: #2b2f3a;
}
.cm-stash-md h1{ font-size: 20px; font-weight: 750; margin: 0 0 12px; color: #14171f; }
.cm-stash-md h2{ font-size: 16.5px; font-weight: 700; margin: 22px 0 8px; color: #14171f; }
.cm-stash-md h3{ font-size: 14px; font-weight: 700; margin: 18px 0 6px; color: #14171f; }
.cm-stash-md p{ margin: 0 0 11px; }
.cm-stash-md ul, .cm-stash-md ol{ margin: 0 0 12px; padding-left: 22px; }
.cm-stash-md li{ margin: 3px 0; }
.cm-stash-md strong{ font-weight: 700; color: #14171f; }
.cm-stash-md em{ font-style: italic; }
.cm-stash-md hr{ border: 0; border-top: 1px solid #e7e4dc; margin: 18px 0; }
.cm-stash-md code{
font-family: var(--fm, ui-monospace, monospace); font-size: 12.5px;
background: #f1efe9; border-radius: 4px; padding: 1px 5px;
}
.cm-stash-md pre{
background: #0F172A; color: #E5E7EB; border-radius: 10px;
padding: 14px 16px; overflow-x: auto; margin: 0 0 14px; font-size: 12.5px;
}
.cm-stash-md pre code{ background: transparent; padding: 0; color: inherit; }
@media (max-width: 640px){
.cm-stash-grid{ grid-template-columns: 1fr; }
.cm-stash-panel{ padding: 14px; }
.cm-stash-modal{ padding: 12px; }
.cm-stash-dialog{ max-height: 90vh; }
}
@media (max-width: 400px){
/* Stack the Read/Download buttons full-width on the narrowest phones so they
don't get squeezed; drop the icon-indent that pushed them off-centre. */
.cm-stash-card-actions{ flex-direction: column; padding-left: 0; }
}
/* ───── Global leaderboard (Supabase) ───── */
.cm-lb{
background: #fff;
border: 1px solid #e3e1d8;
border-radius: 10px;
padding: 16px 18px;
box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.cm-lb-head{
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-bottom: 12px;
}
.cm-lb-title{ font-weight: 700; font-size: 14px; color: #2b2b2b; }
.cm-lb-sub{ color: #888; font-weight: 400; font-size: 12px; }
.cm-lb-refresh{
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; flex-shrink: 0;
background: #faf8f1; border: 1px solid #ede9da; border-radius: 8px;
color: #777; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.cm-lb-refresh:hover{ background: var(--cm-hud-soft); color: var(--cm-hud-line); }
.cm-lb-post{
display: flex; gap: 8px; align-items: center;
margin-bottom: 12px;
}
.cm-lb-name{
flex: 1; min-width: 0;
font-family: inherit; font-size: 14px; color: #2b2b2b;
padding: 9px 12px; border: 1px solid #d9d6cb; border-radius: 8px;
background: #faf8f1;
}
.cm-lb-name:focus{ outline: none; border-color: var(--cm-hud-line); background: #fff; }
.cm-lb-submit{
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
font-family: inherit; font-size: 13px; font-weight: 700; color: #fff;
padding: 9px 14px; border: none; border-radius: 8px; cursor: pointer;
background: linear-gradient(90deg, #2274C7 0%, #185FA5 100%);
transition: filter .15s ease;
}
.cm-lb-submit:hover{ filter: brightness(1.06); }
.cm-lb-submit:disabled{ opacity: .6; cursor: default; filter: none; }
.cm-lb-posted{
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; color: #1D9E75;
background: rgba(29,158,117,0.1); border: 1px solid rgba(29,158,117,0.3);
padding: 8px 12px; border-radius: 8px;
}
.cm-lb-status{ font-size: 12px; color: #888; margin-bottom: 10px; min-height: 0; }
.cm-lb-status:empty{ display: none; }
.cm-lb-status.err{ color: #C03A39; }
.cm-lb-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cm-lb-row{
display: grid; grid-template-columns: 36px 1fr auto;
align-items: center; gap: 10px;
padding: 8px 10px; background: #faf8f1; border: 1px solid #ede9da; border-radius: 8px;
}
.cm-lb-row.me{ background: var(--cm-hud-soft); border-color: #C7DBF1; }
.cm-lb-rank{ font-weight: 800; font-size: 14px; color: #777; text-align: center; }
.cm-lb-player{ font-size: 14px; color: #2b2b2b; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-lb-row.me .cm-lb-player{ color: var(--cm-hud-line); }
.cm-lb-score{ font-family: var(--cm-mono, var(--fm, monospace)); font-size: 15px; font-weight: 800; color: #2b2b2b; }
.cm-lb-loading, .cm-lb-empty{ font-size: 13px; color: #999; padding: 8px 10px; font-style: italic; }
@media (max-width: 540px){
.cm-lb-post{ flex-wrap: wrap; }
.cm-lb-name{ flex: 1 1 100%; }
.cm-lb-submit{ flex: 1 1 100%; justify-content: center; }
}