@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&family=Rajdhani:wght@500;600;700&display=swap');
:root{
    --bg:#0f172a;
    --panel:rgba(15,23,42,0.92);
    --panel-soft:rgba(15,23,42,0.78);
    --cyan:#38bdf8;
    --violet:#a855f7;
    --violet-light:#c084fc;
    --green:#10b981;
    --red:#f43f5e;
    --gold:#fbbf24;
    --muted:#94a3b8;
}
*{box-sizing:border-box}
html,body{
    margin:0;padding:0;width:100%;height:100%;
    overflow:hidden;background:var(--bg);color:#fff;
    font-family:'Rajdhani','Trebuchet MS','Arial Black',Impact,system-ui,sans-serif;user-select:none;
    letter-spacing:.03em;
    background:radial-gradient(circle at top, rgba(36,72,126,.18), transparent 32%), linear-gradient(180deg,#050814 0%, #0b1227 38%, #0f172a 100%);
}

canvas{display:block;width:100%;height:100%}
button,input,select,textarea{font-family:inherit}
.hidden{display:none!important}
.overlay{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(15,23,42,0.84);backdrop-filter:blur(7px);z-index:30;
}
.panel{
    width:min(1100px,94vw);max-height:90vh;overflow:auto;
    background:linear-gradient(180deg,rgba(18,25,49,.98),rgba(11,18,39,.96));border:2px solid rgba(56,189,248,.78);border-radius:22px;
    box-shadow:0 22px 64px rgba(2,6,23,.62), inset 0 1px 0 rgba(255,255,255,.09), 0 0 38px rgba(56,189,248,0.18);padding:30px;
}
.title{
    font-family:'Orbitron','Arial Black',Impact,'Trebuchet MS',sans-serif;
    font-size:5.25rem;line-height:0.86;text-align:center;margin:0;
    color:transparent;-webkit-text-stroke:3px var(--violet);
    text-shadow:0 0 26px rgba(168,85,247,.72), 0 0 8px rgba(255,255,255,.25);
    letter-spacing:.08em;
}
.title-wrap{position:relative;width:min(760px,92vw);margin:0 auto 22px}
.title span{display:block}

.subtitle{color:#cbd5e1;text-align:center;margin:-2px 0 20px;font-weight:700;text-shadow:0 0 12px rgba(2,6,23,.68);font-family:'Rajdhani',sans-serif;font-size:1.08rem;letter-spacing:.04em}
.menu-stack{display:flex;flex-direction:column;align-items:center;gap:12px}
.menu-btn,.small-btn,.card-btn{
    background:transparent;color:#fff;border:2px solid var(--cyan);
    padding:14px 20px;border-radius:10px;cursor:pointer;
    transition:.18s ease;box-shadow:0 0 10px rgba(56,189,248,.18) inset;
}
.menu-btn{width:min(440px,92vw);font-size:1.26rem;text-transform:uppercase;font-family:'Orbitron','Arial Black',Impact,sans-serif;letter-spacing:.11em;text-shadow:0 0 8px rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 20px rgba(56,189,248,.08)}
.menu-btn:hover,.small-btn:hover,.card-btn:hover{
    background:var(--cyan);color:var(--bg);transform:translateY(-1px);
    box-shadow:0 0 18px var(--cyan);
}
.small-btn{font-size:.95rem;padding:10px 16px}
.small-btn.alt{border-color:var(--violet);box-shadow:0 0 10px rgba(168,85,247,.18) inset}
.small-btn.alt:hover{background:var(--violet);box-shadow:0 0 18px var(--violet);color:#fff}
.small-btn.green{border-color:var(--green);box-shadow:0 0 10px rgba(16,185,129,.18) inset}
.small-btn.green:hover{background:var(--green);box-shadow:0 0 18px var(--green);color:#06231b}
.small-btn.red{border-color:var(--red);box-shadow:0 0 10px rgba(244,63,94,.18) inset}
.small-btn.red:hover{background:var(--red);box-shadow:0 0 18px var(--red);color:#2b0a11}
.top-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;border-bottom:1px solid rgba(148,163,184,.25);padding-bottom:10px}
.tab-btn{
    background:none;border:none;color:#cbd5e1;cursor:pointer;padding:10px 14px;
    font-size:1rem;font-weight:bold;border-bottom:2px solid transparent
}
.tab-btn.active{color:var(--cyan);border-bottom-color:var(--cyan)}
.tab-btn.green.active{color:var(--green);border-bottom-color:var(--green)}
.tab-page{display:none}
.tab-page.active{display:block}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.section{
    background:rgba(255,255,255,.04);border:1px solid rgba(148,163,184,.18);
    border-radius:14px;padding:16px;
}
.section h3,.section h4{margin:0 0 12px;color:var(--cyan)}
.kv{display:grid;grid-template-columns:180px 1fr;gap:10px;align-items:center;margin-bottom:10px}
.kv label{color:#cbd5e1}
.kv input[type="text"], .kv input[type="number"], .kv textarea, .kv select{
    width:100%;background:rgba(2,6,23,.55);border:1px solid rgba(148,163,184,.3);
    color:#fff;border-radius:8px;padding:10px 12px;font-size:0.96rem;
}
.kv textarea{min-height:84px;resize:vertical}
.inline-note{font-size:.9rem;color:var(--muted);margin-top:8px}
.locked{opacity:.55;filter:saturate(.7)}
.badge{
    display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);
    border:1px solid rgba(148,163,184,.22);padding:6px 10px;border-radius:999px;
    font-size:.85rem;color:#e2e8f0
}
.unlock-grid,.cos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.shop-card,.upgrade-card,.slot-card{
    background:rgba(255,255,255,.05);border:1px solid rgba(148,163,184,.2);
    border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;
}
.shop-card h4,.upgrade-card h4,.slot-card h4{margin:0;color:#fff}
.shop-card p,.upgrade-card p,.slot-card p{margin:0;color:#cbd5e1;font-size:.92rem;line-height:1.4}
.cost{color:var(--gold);font-weight:bold}
.ui-layer{
    position:absolute;inset:0;display:none;pointer-events:none;z-index:10;
}
#credits-badge{
    position:absolute;top:16px;left:18px;padding:8px 12px;border-radius:999px;
    background:rgba(15,23,42,.85);border:1px solid rgba(168,85,247,.55);
    color:#e9d5ff;font-weight:bold;transform:rotate(-8deg);
    box-shadow:0 0 14px rgba(168,85,247,.25);
}
#hud-left,#hud-right{
    position:absolute;top:20px;background:var(--panel-soft);border-radius:12px;
    border:1px solid var(--cyan);padding:12px 14px;box-shadow:0 0 12px rgba(56,189,248,.18);
}
#hud-left{left:20px;top:58px;min-width:230px}
#hud-right{right:20px;min-width:220px;text-align:right}
.hud-line{font-size:1rem;margin:4px 0}
.hud-line b{color:var(--cyan)}
#hearts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.heart{
    width:34px;height:34px;background-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="%23f43f5e" xmlns="http://www.w3.org/2000/svg"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    background-size:cover;filter:drop-shadow(0 0 5px var(--red));
}
.heart.half{
    background-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="half" x1="0" x2="1" y1="0" y2="0"><stop offset="50%" stop-color="%23f43f5e"/><stop offset="50%" stop-color="transparent"/></linearGradient></defs><path fill="url(%23half)" stroke="%23f43f5e" stroke-width="2" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
}
.heart.empty{opacity:.25}
#hud-bottom{
    position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
    display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:auto;max-width:min(96vw,1000px)
}
#quick-keys,#utility-keys,#power-row{
    display:flex;gap:8px;flex-wrap:wrap;justify-content:center
}
.qk-btn{
    background:rgba(15,23,42,.92);border:1px solid var(--violet);color:var(--violet-light);
    padding:7px 10px;border-radius:8px;font-size:.88rem;cursor:pointer;transition:.2s;pointer-events:auto
}
.qk-btn:hover{background:var(--violet);color:#fff;box-shadow:0 0 12px var(--violet)}
.qk-btn.mode{border-color:var(--green);color:var(--green)}
.qk-btn.mode:hover{background:var(--green);color:#032b22;box-shadow:0 0 12px var(--green)}
.qk-btn.power{border-color:var(--gold);color:var(--gold)}
.qk-btn.power:hover{background:var(--gold);color:#271b00;box-shadow:0 0 12px var(--gold)}
#input-box{
    background:rgba(15,23,42,.95);padding:12px 24px;border-radius:999px;border:2px solid var(--violet);
    box-shadow:0 0 20px rgba(168,85,247,.35);display:flex;align-items:center;gap:14px;min-width:min(86vw,760px)
}
#input-box.implicit{border-color:var(--green);box-shadow:0 0 20px rgba(16,185,129,.3)}
#formula-prefix{font-size:1.55rem;color:var(--violet);font-weight:bold}
#input-box.implicit #formula-prefix{color:var(--green)}
#formula-view{font-size:1.75rem;min-height:38px;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cursor{display:inline-block;width:12px;height:28px;background:var(--violet);animation:blink 1s infinite;margin:0 2px}
#input-box.implicit .cursor{background:var(--green)}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
#countdown-banner{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-size:5rem;color:#fff;text-shadow:0 0 18px var(--gold);font-weight:900;display:none;z-index:18
}
#toast{
    position:absolute;top:20px;left:50%;transform:translateX(-50%);
    background:rgba(15,23,42,.92);border:1px solid var(--green);padding:10px 14px;border-radius:999px;
    color:#d1fae5;display:none;z-index:40;box-shadow:0 0 14px rgba(16,185,129,.2)
}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card-btn{padding:10px 14px;font-size:.95rem}
.center-big{font-size:3.3rem;margin:0 0 10px;text-align:center;color:var(--red);text-shadow:0 0 18px var(--red)}
.list{margin:0;padding-left:20px;color:#cbd5e1;line-height:1.55}
@media (max-width:900px){
    .grid-2,.grid-3,.cards{grid-template-columns:1fr}
    .kv{grid-template-columns:1fr}
    #hud-left,#hud-right{transform:scale(.92);transform-origin:top}
    #hud-bottom{width:96vw}
    #input-box{min-width:96vw}
    .title{font-size:3.2rem}
}

/* --- V1.2 additions --- */
.family-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.family-card{position:relative;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid rgba(148,163,184,.2);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:240px}
.family-card h4{margin:0;font-size:1.1rem}
.family-card p{margin:0;color:#cbd5e1;font-size:.92rem;line-height:1.42}
.family-preview,.cos-preview{height:96px;border-radius:12px;border:1px solid rgba(148,163,184,.18);background:linear-gradient(135deg,rgba(56,189,248,.10),rgba(168,85,247,.16));position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.family-preview svg,.formula-preview svg,.cos-preview svg{width:100%;height:100%}
.preview-cube,.formula-cube{
    position:absolute;width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#e2e8f0,#fbbf24);
    box-shadow:0 0 12px rgba(251,191,36,.65);opacity:0;transform:translate(-7px,-7px);pointer-events:none
}
.preview-cube::after,.formula-cube::after{content:'';position:absolute;inset:3px;border-radius:2px;background:rgba(15,23,42,.22)}

.tier-row{display:flex;align-items:center;gap:8px;min-height:26px}
.tier-dots{display:flex;gap:7px}
.tier-dot{width:12px;height:12px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);cursor:pointer;transition:.16s ease}
.tier-dot:hover{transform:scale(1.15)}
.tier-dot.on,.tier-dot.previewing{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px rgba(251,191,36,.42)}
.tier-dot.locked{opacity:.65;filter:none}

.card-lock{position:absolute;inset:18px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:3.4rem;color:rgba(255,255,255,.20);pointer-events:none}
.req-list{display:flex;flex-wrap:wrap;gap:6px}
.req-chip{padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(148,163,184,.18);font-size:.78rem;color:#cbd5e1}
.req-chip.ok{border-color:rgba(16,185,129,.55);color:#d1fae5}
.shop-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.slot-select{width:100%;background:rgba(2,6,23,.55);border:1px solid rgba(148,163,184,.3);color:#fff;border-radius:8px;padding:10px 12px;font-size:0.96rem}
.family-small-note{font-size:.86rem;color:var(--muted)}
.formula-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.formula-card{background:rgba(255,255,255,.05);border:1px solid rgba(148,163,184,.18);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.formula-preview{height:110px;border-radius:12px;border:1px solid rgba(148,163,184,.18);position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(16,185,129,.10),rgba(56,189,248,.10))}
.formula-preview .formula-svg{filter:drop-shadow(0 0 10px rgba(16,185,129,.20))}

.master-link{display:inline-flex;margin:0 auto;padding:8px 14px;border-radius:999px;text-decoration:none;color:#e9d5ff;border:1px solid rgba(168,85,247,.55);background:rgba(15,23,42,.88);transform:rotate(-5deg);box-shadow:0 0 14px rgba(168,85,247,.25);font-family:'Orbitron','Arial Black',Impact,sans-serif;letter-spacing:.06em}
.master-link:hover{background:var(--violet);color:#fff;box-shadow:0 0 18px var(--violet)}
.minecraft-credit{position:absolute;right:-156px;top:136px;font-size:.92rem}
#btn-save-gameplay{display:none}
.formula-chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.formula-mini-btn{background:rgba(15,23,42,.72);border:1px solid rgba(56,189,248,.42);color:#e2e8f0;padding:8px 10px;border-radius:10px;cursor:pointer;transition:.18s ease;font-size:.9rem}
.formula-mini-btn:hover{background:rgba(56,189,248,.16);border-color:var(--cyan);box-shadow:0 0 12px rgba(56,189,248,.2)}
.formula-mini-btn:disabled{opacity:.45;cursor:not-allowed}
.profile-avatar.editable{position:relative;overflow:hidden;cursor:pointer}
.profile-avatar.editable.has-image{background-size:cover;background-position:center;background-repeat:no-repeat}
.profile-avatar.editable .avatar-default{position:relative;z-index:1}
.profile-avatar.editable.has-image .avatar-default{display:none}
.avatar-edit-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,.55);opacity:0;transition:.18s ease;font-size:1.35rem;z-index:2}
.profile-avatar.editable:hover .avatar-edit-badge{opacity:1}
.profile-avatar.editable::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.creative-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.creative-check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:10px}
.creative-check{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(148,163,184,.16);font-size:.92rem;color:#e2e8f0}

.xp-shell{background:rgba(255,255,255,.07);border:1px solid rgba(148,163,184,.2);border-radius:999px;height:18px;overflow:hidden}
.xp-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--gold));box-shadow:0 0 14px rgba(56,189,248,.35);transition:width 1.2s ease}
.profile-card{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(148,163,184,.18);border-radius:16px;padding:16px;margin-top:18px}
.profile-avatar{width:120px;height:120px;border-radius:16px;background:linear-gradient(135deg,rgba(56,189,248,.25),rgba(168,85,247,.25));display:flex;align-items:center;justify-content:center;font-size:3rem;border:1px solid rgba(148,163,184,.22)}
.cos-grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.cos-card{background:rgba(255,255,255,.05);border:1px solid rgba(148,163,184,.2);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.cos-swatch{position:absolute;inset:auto 0 0 0;height:42px;opacity:.9}
.kv-tight{display:grid;grid-template-columns:140px 1fr;gap:10px;align-items:center;margin-bottom:10px}
#master-egg-layer .panel{max-width:820px}
#master-egg-content{color:#cbd5e1;line-height:1.65;min-height:180px}
.locked-note{color:#fca5a5;font-size:.9rem}
#input-box.explicit{border-color:var(--violet);box-shadow:0 0 20px rgba(168,85,247,.35)}
.preview-path{fill:none;stroke:#38bdf8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.preview-path.alt{stroke:#10b981}
.preview-path.gold{stroke:#fbbf24}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.ach-card{background:rgba(255,255,255,.05);border:1px solid rgba(148,163,184,.18);border-radius:14px;padding:14px}
.ach-card.done{border-color:rgba(16,185,129,.55);box-shadow:0 0 16px rgba(16,185,129,.12) inset}
.ach-card h4{margin:0 0 8px}
.ach-card p{margin:0;color:#cbd5e1;font-size:.92rem}

.preview-trigger{cursor:default}
.cos-preview{padding:6px}
.cos-preview .showcase-bg{fill:rgba(2,6,23,.28)}
.cos-preview .stroke-light{stroke:rgba(255,255,255,.34);stroke-width:2}
.cos-preview .tiny-grid{stroke:rgba(255,255,255,.08);stroke-width:1}

.family-card.locked-view{background:linear-gradient(180deg,rgba(12,17,34,.96),rgba(8,12,24,.96));border-color:rgba(148,163,184,.16)}
.family-constant{display:flex;align-items:center;justify-content:center;min-height:96px;border-radius:12px;border:1px dashed rgba(148,163,184,.18);background:linear-gradient(135deg,rgba(99,102,241,.10),rgba(15,23,42,.18));font-family:'Orbitron',sans-serif;font-size:1.9rem;font-weight:900;color:#e9d5ff;letter-spacing:.08em}
.family-constant small{display:block;font-size:.72rem;color:#cbd5e1;letter-spacing:.16em;margin-top:6px}
.preview-static{cursor:default}
.profile-card.compact{grid-template-columns:88px 1fr;margin-top:0}
.profile-card.compact .profile-avatar{width:88px;height:88px;font-size:2.1rem}
.family-card .card-lock{backdrop-filter:blur(2px)}
.formula-card.no-preview{padding-top:18px}
.formula-card.no-preview h4{margin-bottom:6px}
.panel h2,.section h3,.section h4,.tab-btn,.small-btn,.card-btn,.badge{font-family:'Orbitron','Arial Black',Impact,sans-serif}
.kv label,.inline-note,.shop-card p,.upgrade-card p,.slot-card p,.formula-card p,.ach-card p,.hud-line{font-family:'Rajdhani',sans-serif}

.credits-content{max-width:720px;margin:0 auto;font-size:1.08rem}
.credits-content p{margin:0 0 18px;color:#e2e8f0}
.credits-name{color:var(--gold);font-weight:800;text-shadow:0 0 10px rgba(251,191,36,.22)}
.credits-mail-line{margin-top:10px}
.credits-email{color:var(--cyan);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(56,189,248,.38)}
.credits-email:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6);text-shadow:0 0 12px rgba(56,189,248,.35)}