:root{ --bg:#0f1115; --card:#151823; --line:#23283a; --muted:#b3b8c5; --accent:#3d6af2; --good:#22c55e; --warn:#eab308; --bad:#ef4444 }
*{box-sizing:border-box}

body{
    margin:0;
    background: radial-gradient(1000px 600px at 10% 10%, #111425 0%, #0b0e14 45%, #090b11 100%);
    color:#e6e6e6;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    min-height:100vh;
    display:grid; place-items:center; padding:24px
}

.card{ width:100%; max-width:1100px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 18px 12px; box-shadow:0 10px 30px rgba(0,0,0,.35) }

h1{margin:0 0 6px; font-size:26px}
.subtitle{margin:0 0 10px; color:var(--muted)}

.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.spacer{flex:1}
.btn{ padding:10px 12px; border-radius:10px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer }
.btn.secondary{ background:transparent; border-color:#444c6b; color:#cbd3f5 }

.meter{ display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); margin:6px 0 10px }
.meter b{ color:#fff }

.panel{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0 }
select, input[type=range]{ background:#0f1320; color:#e6e6e6; border:1px solid #2a3050; border-radius:10px; padding:8px }
label{ color:var(--muted) }

.board{ background:#0e1220; border:1px solid #222a42; border-radius:14px; padding:12px; position:relative }

.mem{
    position:relative; height:72px; border-radius:10px;
    background: repeating-linear-gradient(
            90deg,
            #0b0f1e 0px,  #0b0f1e 16px,
            #0c1223 16px, #0c1223 32px
    );
    border:1px solid #1d2540; overflow:hidden
}
.mem::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(61,106,242,.18) }

.tick{ position:absolute; top:0; bottom:0; width:1px; background:#1c2544; opacity:.4 }

.block{
    position:absolute; top:4px; bottom:4px; border-radius:8px; border:1px solid rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center;
    font:12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.6);
    transition:left .35s ease, width .35s ease, transform .08s ease;
    padding:0 4px;
    overflow:hidden;
    white-space:nowrap; text-overflow:ellipsis;
}
.block:active{ transform:translateY(1px) }
.block .label{ pointer-events:none }

.hole{
    position:absolute; top:6px; bottom:6px; background:rgba(61,106,242,.08);
    border:1px dashed rgba(61,106,242,.35); border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font:11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:#aeb8ff;
    cursor:pointer; opacity:.7; transition:opacity .15s ease, transform .1s ease
}
.hole:hover{ opacity:1; transform:translateY(-1px) }
.hole.bad{ background:rgba(239,68,68,.06); border-color:rgba(239,68,68,.45); color:#fda4af; cursor:not-allowed }

.timer{ height:10px; background:#0e1220; border:1px solid #222a42; border-radius:999px; overflow:hidden; margin:10px 0 0 }
.timer > div{ height:100%; width:100%; background:linear-gradient(90deg,#3d6af2,#9b8cff,#3d6af2); transform-origin:left center }

.status{ margin-top:8px; padding:10px 12px; border:1px dashed #2a3050; border-radius:12px; min-height:44px; display:flex; align-items:center; background:#0f1320 }
.hint{ color:#cbd3f5; font:13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-top:6px }

.status .rq{ color:var(--muted); margin-right:6px }
.status code.op{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding:3px 6px; border-radius:8px; border:1px solid rgba(255,255,255,.15);
    background:rgba(61,106,242,.12); color:#dbe3ff
}
.status code.op.malloc{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35); color:#86efac }
.status code.op.free{ background:rgba(234,179,8,.12); border-color:rgba(234,179,8,.45); color:#fde68a }
.status .arrow{ opacity:.75; margin:0 8px }
.status .action{ font-weight:700; color:#aeb8ff }

.reqs{ display:flex; gap:8px; align-items:center }
.req{ background:#0f1320; border:1px solid #2a3050; border-radius:10px; padding:8px 10px; font:12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:#aeb8ff }

.hearts{ display:flex; gap:4px }
.heart{ width:16px; height:16px; display:inline-block; background:conic-gradient(from 0deg, #ef4444, #f97316); clip-path: polygon(50% 90%, 90% 55%, 98% 35%, 84% 18%, 68% 20%, 50% 38%, 32% 20%, 16% 18%, 2% 35%, 10% 55%) }

.badge{ display:inline-flex; align-items:center; gap:6px; border:1px solid #2a3050; background:#0f1320; color:#aeb8ff; border-radius:10px; padding:6px 8px; font:12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
.badge.green{ border-color:#174e21; background:#0b1a0d; color:#86efac }

.foot{ margin-top:8px; color:#8a93a8; font-size:12px; opacity:.7 }
.foot a{ color:#aeb8ff; text-decoration:none }
.foot a:hover{ text-decoration:underline }

.menu{
    position:fixed; inset:0; display:grid; place-items:center;
    background:linear-gradient(180deg, rgba(15,17,21,.85), rgba(6,8,12,.9));
    backdrop-filter:saturate(1.2) blur(6px); z-index:10
}
.menu-card{ width:min(560px, 92vw); background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.35) }
.menu-card h1{ margin:0 0 6px }
.menu-card .muted{ color:var(--muted) }
.menu-row{ display:flex; gap:14px; align-items:center; margin:10px 0 }
.radio{ display:flex; gap:8px; align-items:center; user-select:none }
.field{ display:flex; gap:8px; align-items:center }
.field input, .field select{ background:#0f1320; color:#e6e6e6; border:1px solid #2a3050; border-radius:10px; padding:8px }
.field .suffix{ color:var(--muted) }
.menu-actions{ margin-top:6px; display:flex; gap:10px; justify-content:flex-end }

.overlay{
    position:fixed; inset:0; z-index:20; display:grid; place-items:center;
    background:rgba(0,0,0,.55);
}
.matrix-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.go-card{
    position:relative; z-index:1;
    width:min(480px, 92vw);
    background:var(--card); border:1px solid var(--line);
    border-radius:16px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.35);
    text-align:center;
}
.go-card h2{ margin:0 0 8px }
.go-card .muted{ color:var(--muted); margin:0 0 14px }

.confetti{ position:fixed; top:-10px; font-weight:700; opacity:.95; pointer-events:none; will-change: transform, opacity }
[hidden]{ display:none !important; }
.menu[hidden]{ display:none !important; }

@media (max-width: 480px){
    .mem{ height:96px; }
    .block{ font-size:10px; }
    .hole{ font-size:10px; }
    .req{ font-size:11px; }
    .meter{ gap:10px; }
}