/* mc.css — Java-MC platform theme */
:root{
  --bg:#0b1020; --bg2:#0e1428; --panel:#141b30; --panel2:#182142;
  --line:#252f4d; --line2:#33406a;
  --fg:#e8ecf6; --muted:#8b97b8; --dim:#5f6b8f;
  --blue:#5aa2ff; --green:#37d67a; --green2:#20a75f; --gold:#ffce6b; --red:#ff5d5d;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:'Inter',ui-sans-serif,system-ui,Segoe UI,Roboto,sans-serif;color:var(--fg);margin:0;min-height:100%;
  background:
    radial-gradient(900px 520px at 85% -12%, rgba(55,214,122,.10), transparent 60%),
    radial-gradient(820px 520px at 8% -6%, rgba(90,162,255,.10), transparent 55%),
    var(--bg);}
.mono,code,.CodeMirror,.lbl,.badge,.pill,.status{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
.mc-muted{color:var(--muted)}

/* header */
header.mc{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 20px;background:rgba(12,17,34,.8);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.mc h1{font-size:16px;margin:0;font-weight:800;letter-spacing:.2px;display:flex;align-items:center;gap:10px}
header.mc h1:before{content:"⛏️";display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,#37d67a,#1b8f8f);box-shadow:0 4px 12px rgba(55,214,122,.35);font-size:15px}
header.mc h1 .sub{font-weight:400;color:var(--muted);font-size:13px}
header.mc .spacer{flex:1}
.container{max-width:1180px;margin:0 auto;padding:22px 18px}

/* cards */
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.card .hd{padding:13px 16px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px}
.card .bd{padding:16px;line-height:1.55}
.card .bd code,.spec code{background:rgba(120,220,170,.12);padding:1px 6px;border-radius:6px;font-size:.9em;color:#b6eccd}

/* buttons */
.btn{background:#1b2440;color:var(--fg);border:1px solid var(--line2);border-radius:10px;padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.btn:hover{border-color:var(--green2);text-decoration:none;transform:translateY(-1px)}
.btn.primary,.btn.run{background:linear-gradient(135deg,#37d67a,#20a75f);color:#05230f;border:0;font-weight:800;box-shadow:0 6px 16px rgba(55,214,122,.28)}
.btn.primary:hover,.btn.run:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.badge{font-size:11px;color:var(--muted);border:1px solid var(--line2);border-radius:20px;padding:3px 11px;background:rgba(255,255,255,.03)}

/* fields + alerts */
.field{margin-bottom:12px}.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.field input,.field textarea{width:100%;background:#0b1224;border:1px solid var(--line2);border-radius:10px;color:var(--fg);padding:11px;font-size:14px;font-family:inherit}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--green2);box-shadow:0 0 0 3px rgba(55,214,122,.15)}
.alert{padding:11px 14px;border-radius:10px;margin-bottom:14px;font-size:14px}
.alert.err{background:rgba(255,93,93,.12);border:1px solid rgba(255,93,93,.4);color:#ffb3ad}
.alert.ok{background:rgba(55,214,122,.12);border:1px solid rgba(55,214,122,.4);color:#9ff0bf}

/* table */
table.mc{width:100%;border-collapse:collapse;font-size:14px}
table.mc th,table.mc td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
table.mc th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.6px}
table.mc tr:hover td{background:rgba(255,255,255,.02)}
.pill{font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid var(--line2)}
.pill.ok{color:var(--green);border-color:rgba(55,214,122,.5);background:rgba(55,214,122,.08)}.pill.no{color:var(--muted)}

/* login */
.login-wrap{max-width:410px;margin:9vh auto 0;padding:0 16px}
.login-hero{text-align:center;margin-bottom:18px}
.login-hero .logo{width:58px;height:58px;border-radius:16px;display:inline-grid;place-items:center;font-size:28px;background:linear-gradient(135deg,#37d67a,#1b8f8f);box-shadow:0 10px 26px rgba(55,214,122,.35)}
.login-hero h1{margin:12px 0 2px;font-size:23px;font-weight:800}
.login-hero p{margin:0;color:var(--muted);font-size:14px}

/* sections list */
.sections-list{display:flex;flex-direction:column;gap:12px}
.section-row{display:flex;align-items:center;gap:16px;padding:16px 18px;text-decoration:none;color:var(--fg);transition:.16s;border-left:3px solid transparent}
.section-row:hover{transform:translateY(-2px);border-left-color:var(--green);text-decoration:none}
.section-row .no{font-size:20px;font-weight:800;width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,rgba(55,214,122,.22),rgba(90,162,255,.15));color:#c4f2d6}
.section-row .meta{flex:1}.section-row .meta .t{font-weight:700;font-size:15px}.section-row .meta .d{font-size:12px;color:var(--muted);margin-top:2px}

/* editor + run panel */
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px;align-items:start}
@media(max-width:920px){.grid2{grid-template-columns:1fr}}
.editor-tabs{display:flex;gap:4px;padding:8px 10px 0;background:#0c1122;border-bottom:1px solid var(--line);flex-wrap:wrap}
.editor-tab{padding:7px 13px;font-size:12.5px;color:var(--muted);cursor:pointer;border-radius:8px 8px 0 0;border:1px solid transparent;border-bottom:none}
.editor-tab:hover{color:var(--fg)}
.editor-tab.active{color:var(--fg);background:var(--panel);border-color:var(--line);position:relative}
.editor-tab.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--green)}
.CodeMirror{height:380px!important;font-family:'JetBrains Mono',monospace!important;font-size:13px;line-height:1.5}
.toolbar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.status{font-size:12px;color:var(--muted)}
.sec{padding:12px 16px;border-top:1px solid var(--line)}
.sec h3{margin:0 0 8px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px}
.mc-test{font-size:13px;padding:3px 0;font-weight:500}.mc-test.pass{color:var(--green)}.mc-test.fail{color:var(--red)}
pre.console{margin:0;max-height:150px;overflow:auto;font-size:12px;color:#b7c2e0;white-space:pre-wrap;background:#0a0f1e;border-radius:8px;padding:10px}

/* ===================== SCENES (used by mc-scenes.js) ===================== */
.mc-stage{position:relative;border-radius:12px;overflow:hidden}
.mc-stage.sc-combat{height:340px;background:#0a1020}
.sc-sky{position:absolute;inset:0;background:radial-gradient(1200px 320px at 70% -70%,#1b2b52 0%,#0b1226 55%,#070b18 100%)}
.sc-sky:before{content:"";position:absolute;inset:0;opacity:.7;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 40% 18%,#cde,transparent),radial-gradient(1px 1px at 65% 33%,#fff,transparent),radial-gradient(1px 1px at 82% 14%,#bcd,transparent),radial-gradient(1px 1px at 30% 55%,#fff,transparent),radial-gradient(1px 1px at 55% 46%,#dde,transparent)}
.sc-moon{position:absolute;top:24px;right:64px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fdfbe7,#e9e2b0);box-shadow:0 0 28px rgba(253,251,231,.35)}
.mc-ground{position:absolute;bottom:0;left:0;right:0;height:54px;background:linear-gradient(#1c4a29,#123018);border-top:3px solid #2b6a3a}
.sc-hud{position:absolute;top:12px;width:184px;z-index:3}
.sc-hud.left{left:16px}.sc-hud.right{right:16px;text-align:right}
.sc-name{font-size:13px;font-weight:700;margin-bottom:4px}
.mc-hearts{font-size:15px;letter-spacing:1px;line-height:1.1}
.h.full{color:#ff5566}.h.half{color:#ff5566;opacity:.45}.h.empty{color:#3a2530}
.sc-hpbar,.sc-hunbar{height:7px;border-radius:5px;background:#20140f;overflow:hidden;margin-top:4px;position:relative}
.sc-hpghost{position:absolute;left:0;top:0;height:100%;width:100%;background:#f2c14e;transition:width .55s ease .06s}
.sc-hpfill{position:absolute;left:0;top:0;height:100%;z-index:1;background:linear-gradient(90deg,#ff5d5d,#ff9d5c);transition:width .14s ease}
.sc-hunbar{background:#1a1508}.sc-hunfill{height:100%;background:linear-gradient(90deg,#d29922,#e8c24a);transition:width .3s ease}
.lbl{font-size:11px;color:var(--muted);margin-top:3px}
.hun{margin-top:3px}.hun .p{opacity:.25}.hun .p.full{opacity:1}
.sc-turn{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;opacity:0;font-weight:800;z-index:4}
.sc-turn.show{animation:sc-turn .5s ease forwards}
@keyframes sc-turn{0%{opacity:0;transform:translateX(-50%) translateY(-14px)}35%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:.9}}
.sc-fighter{position:absolute;bottom:56px;width:96px;text-align:center;z-index:2;overflow:visible;transition:transform .16s cubic-bezier(.3,1.4,.5,1)}
.sc-fighter.sc-steve{left:12%}.sc-fighter.sc-zombie{right:12%}
.sc-fighter:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:58px;height:12px;border-radius:50%;background:rgba(0,0,0,.4);filter:blur(3px);z-index:-1}
.sc-sprite{font-size:76px;line-height:1;filter:drop-shadow(0 6px 5px rgba(0,0,0,.55));animation:sc-bob 2.4s ease-in-out infinite}
.sc-zombie .sc-sprite{transform:scaleX(-1)}
@keyframes sc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.sc-windup.sc-steve{transform:translateX(-14px) rotate(-6deg)}
.sc-windup.sc-zombie{transform:translateX(14px) rotate(6deg)}
.sc-lungeR{transform:translateX(96px) scale(1.06)}.sc-lungeL{transform:translateX(-96px) scale(1.06)}
.sc-hit .sc-sprite{animation:sc-hitflash .22s}
@keyframes sc-hitflash{0%{filter:brightness(3.2) drop-shadow(0 0 8px #fff)}100%{filter:none}}
.sc-glow .sc-sprite{filter:drop-shadow(0 0 12px #5ee08a)}
.sc-shake{animation:sc-shake .22s}
@keyframes sc-shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-5px,2px)}50%{transform:translate(5px,-2px)}75%{transform:translate(-3px,1px)}}
.sc-slash{position:absolute;width:64px;height:64px;pointer-events:none;background:linear-gradient(120deg,transparent 42%,#fff 50%,transparent 58%);border-radius:50%;transform:rotate(-30deg) scale(.4);animation:sc-slash .3s ease-out forwards;mix-blend-mode:screen;z-index:5}
@keyframes sc-slash{0%{opacity:0;transform:rotate(-30deg) scale(.3)}40%{opacity:1}100%{opacity:0;transform:rotate(20deg) scale(1.25)}}
.sc-fighter.dead{transform:rotate(90deg) translateY(24px)!important;opacity:.7;transition:transform .5s,opacity .5s}
.sc-fighter.dead .sc-sprite{filter:grayscale(1) brightness(.55)!important;animation:none!important}
.sc-part{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:6;animation:sc-part .55s ease-out forwards}
@keyframes sc-part{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
.mc-float{position:absolute;font-weight:800;font-size:22px;text-shadow:0 2px 3px rgba(0,0,0,.6);animation:mcfl 1s ease-out forwards;pointer-events:none;z-index:6}
.mc-float.dmg{color:#ff7a7a}.mc-float.heal{color:#66e6a0}
@keyframes mcfl{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-46px)}}
.mc-result{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;font-size:28px;font-weight:800;background:rgba(4,8,18,.55);text-align:center;line-height:1.35}
.mc-result.win{color:var(--green)}.mc-result.lose{color:var(--red)}
.mc-result[style*="flex"]{animation:sc-pop .4s ease}
@keyframes sc-pop{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}
.mc-inv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.mc-invgrid{display:grid;grid-template-columns:repeat(9,46px);gap:7px}
.mc-slot{width:46px;height:46px;border:2px solid var(--line2);border-radius:8px;background:#0f172e;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;transition:transform .2s,border-color .2s,box-shadow .2s}
.mc-slot .tag{position:absolute;bottom:-16px;font-size:9px;color:var(--muted);white-space:nowrap}
.loai-VU_KHI{border-color:#c98a3a}.loai-THUC_AN{border-color:#3aa85a}.loai-KHOI{border-color:#5a7ad6}.loai-CONG_CU{border-color:#a05ac0}
.mc-slot.flyin{animation:sc-flyin .34s cubic-bezier(.2,1.5,.4,1);box-shadow:0 0 14px rgba(255,224,138,.7)}
@keyframes sc-flyin{0%{transform:translateY(26px) scale(.4);opacity:0}70%{transform:translateY(-4px) scale(1.18)}100%{transform:translateY(0) scale(1)}}
.mc-slot.dropout{animation:sc-dropout .24s ease forwards}
@keyframes sc-dropout{0%{transform:scale(1);opacity:1}100%{transform:scale(.3) translateY(14px);opacity:0}}