/* Main Character Journal demo. Everything is sized in container units of #stage (1cqw = 1% of its width; the stage is 100 × 125cqw). */
#stage{container-type:inline-size;background:radial-gradient(130% 70% at 50% -10%,#30261a 0%,#1a150f 55%,#120e0a 100%)}
#stage #cta{z-index:60}
#stage button{font-family:inherit;-webkit-tap-highlight-color:transparent}
#stage :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#stage textarea:focus-visible{outline:none}
.mc{--sq:#8EC7E8;position:absolute;inset:0;color:var(--ink);font-family:Inter,system-ui,sans-serif}
.mc::before{content:"";position:absolute;inset:1.4cqw;border:1px solid rgba(224,179,84,.14);border-radius:2.2cqw;pointer-events:none}
.mc img{image-rendering:pixelated;display:block}
.mc h3{margin:0;font:700 max(9.5px,2.6cqw)/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* ——— HUD ——— */
.mc-hud{position:absolute;left:4cqw;right:4cqw;top:2.8cqw;height:10cqw;display:flex;align-items:center;gap:3cqw}
.mc-face{flex:none;position:relative;width:10.4cqw;height:10.4cqw;border-radius:1.8cqw;padding:.9cqw;background:radial-gradient(circle at 50% 30%,#57432a,#1d160f 75%);box-shadow:inset 0 0 0 .45cqw #B98D3A,0 0 0 .3cqw #120e0a}
.mc-face img{width:100%;height:100%}
.mc-face b{position:absolute;right:-1.6cqw;bottom:-1.4cqw;min-width:5cqw;height:5cqw;padding:0 1cqw;border-radius:99px;display:grid;place-items:center;font:700 max(10px,2.8cqw)/1 var(--display);background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 .4cqw #120e0a}
.mc-who{flex:1;min-width:0}
.mc-rank{font:700 max(12px,3.7cqw)/1 var(--display);letter-spacing:.05em;white-space:nowrap}
.mc-rank small{font:600 max(9.5px,2.4cqw) Inter;color:var(--mid);letter-spacing:.08em;text-transform:uppercase;margin-left:1cqw}
.mc-xp{display:flex;align-items:center;gap:1.8cqw;margin-top:1.5cqw}
.mc-xpbar{flex:1;height:2.3cqw;border-radius:99px;background:#0d0a07;box-shadow:inset 0 0 0 .3cqw rgba(224,179,84,.3);position:relative;overflow:hidden}
.mc-xpbar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:linear-gradient(90deg,#a9792a,#f3cf6e);transition:width .5s cubic-bezier(.3,.7,.3,1)}
.mc-xpbar.fill i{transition:width 1.4s cubic-bezier(.45,0,.35,1)}
.mc-xpbar.ready{box-shadow:inset 0 0 0 .3cqw #f3cf6e,0 0 3cqw rgba(243,207,110,.75);animation:mc-ready .6s ease-in-out infinite alternate}
.mc-xpbar.ready i{background:linear-gradient(90deg,#f3cf6e,#fff3c4,#f3cf6e)}
@keyframes mc-ready{to{box-shadow:inset 0 0 0 .3cqw #fff3c4,0 0 5cqw rgba(243,207,110,1)}}
.mc-xp span{flex:none;min-width:17cqw;text-align:right;font:600 max(9.5px,2.6cqw) Inter;color:var(--mid);font-variant-numeric:tabular-nums}
.mc-streak{flex:none;position:relative;display:flex;align-items:center;gap:1.1cqw;padding:1cqw 2.2cqw 1cqw 1.6cqw;border-radius:99px;background:rgba(232,116,59,.1);border:1px solid rgba(232,116,59,.35)}
.mc-streak img{width:4.4cqw;height:4.4cqw}
.mc-streak b{font:700 max(13px,4.2cqw)/1 var(--display);color:#F6B44A;font-variant-numeric:tabular-nums}
.mc-streak span{font:600 max(8px,2.1cqw)/1.05 Inter;color:var(--mid);text-transform:uppercase;letter-spacing:.06em}
.mc-streak.bump{animation:mc-bump .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes mc-bump{40%{transform:scale(1.18)}}
.mc-sound{flex:none;width:7.4cqw;height:7.4cqw;min-width:28px;min-height:28px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--mid);display:grid;place-items:center;cursor:pointer;padding:0}
.mc-sound svg{width:55%;height:55%}
.mc-sound[aria-pressed="false"] .on,.mc-sound[aria-pressed="true"] .off{display:none}

/* ——— The journal page ——— */
.mc-page{position:absolute;left:4cqw;right:4cqw;top:15cqw;height:55cqw;border-radius:1.4cqw;padding:2.8cqw 4.4cqw 2cqw;display:flex;flex-direction:column;color:#33241A;
  background:
    radial-gradient(130% 100% at 50% 45%,transparent 52%,rgba(120,74,32,.42) 100%),
    radial-gradient(40% 30% at 82% 18%,rgba(150,100,45,.16),transparent 70%),
    radial-gradient(35% 28% at 12% 85%,rgba(150,100,45,.14),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .27 0 0 0 0 .12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .33 0 0 0 0 .15 0 0 0 .35 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(170deg,#EFE2C2,#E3D0A6 60%,#DCC596);
  box-shadow:0 1.4cqw 4cqw rgba(0,0,0,.55),inset 0 0 0 .35cqw rgba(110,70,30,.28),inset 0 0 5cqw rgba(110,66,24,.35);
  transition:height .7s cubic-bezier(.65,0,.25,1),padding .7s cubic-bezier(.65,0,.25,1)}
.mc-day{flex:none;display:flex;align-items:baseline;gap:1.8cqw;padding-bottom:1.3cqw;border-bottom:1px solid rgba(90,58,28,.32);transition:padding .7s}
.mc-dayn{font:700 max(14px,4.6cqw)/1 var(--display);letter-spacing:.05em;color:#4A3018;transition:font-size .7s cubic-bezier(.65,0,.25,1)}
.mc-orn{color:#A57A35;font-size:max(10px,2.6cqw)}
.mc-daysub{font:italic 500 max(11px,2.9cqw) Inter;color:#7A5835}
.mc-ink{position:relative;flex:1;min-height:0;margin-top:.6cqw}
.mc-ink textarea,.mc-read{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;padding:0;background:transparent;color:#33241A;font:400 max(16px,4.1cqw)/1.6 Inter,system-ui,sans-serif;letter-spacing:-.005em}
.mc-ink textarea{resize:none;outline:none;caret-color:#8A5A22;user-select:text;-webkit-user-select:text;
  background-image:linear-gradient(transparent calc(1.6em - 1px),rgba(110,72,38,.24) calc(1.6em - 1px),rgba(110,72,38,.24) 1.6em);background-size:100% 1.6em;background-attachment:local}
.mc-ink textarea::placeholder{color:#9A7A55;font-style:italic;opacity:1}
.mc-ink textarea:focus-visible{outline:none}
.mc-page:focus-within{box-shadow:0 1.4cqw 4cqw rgba(0,0,0,.55),inset 0 0 0 .35cqw rgba(160,110,40,.55),inset 0 0 5cqw rgba(110,66,24,.35)}
.mc-read{visibility:hidden;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;transition:font-size .7s cubic-bezier(.65,0,.25,1);
  -webkit-mask:linear-gradient(#000 82%,transparent);mask:linear-gradient(#000 82%,transparent)}
.mc-read mark{--c:#E0B354;color:inherit;border-radius:.25em;padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
  background:linear-gradient(color-mix(in srgb,var(--c) 52%,transparent),color-mix(in srgb,var(--c) 52%,transparent)) no-repeat 0 0/0% 100%;transition:background-size .32s ease-out,color .3s}
.mc-read mark.lit{background-size:100% 100%}
.mc-read mark.sent{background-image:linear-gradient(color-mix(in srgb,var(--c) 22%,transparent),color-mix(in srgb,var(--c) 22%,transparent));color:#6d553d}
.mc-private{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:1cqw;margin-top:1.2cqw;font:500 max(9.5px,2.4cqw) Inter;color:#8A6A48;transition:opacity .3s}
.mc-private img{width:2.8cqw;height:2.8cqw;opacity:.8}
.mc-page.nudge{animation:mc-shake .45s}
@keyframes mc-shake{20%,60%{transform:translateX(-1.2cqw)}40%,80%{transform:translateX(1.2cqw)}}

/* ——— Compose controls ——— */
.mc-compose{position:absolute;left:4cqw;right:4cqw;top:72cqw;transition:opacity .35s,transform .5s cubic-bezier(.65,0,.25,1),visibility 0s}
.mc-tryl{font:500 max(10.5px,2.8cqw) Inter;color:var(--mid);margin-bottom:1.5cqw}
.mc-examples{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}
.mc-ex{display:flex;align-items:center;gap:1.4cqw;min-height:10cqw;padding:1.4cqw 1.8cqw;border-radius:2cqw;border:1px solid rgba(224,179,84,.28);background:rgba(255,240,210,.04);color:var(--ink);font:600 max(11px,2.9cqw)/1.15 Inter;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.mc-ex:hover{background:rgba(255,240,210,.08);border-color:rgba(224,179,84,.55)}
.mc-ex:active{transform:scale(.97)}
.mc-ex .ic{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:.4cqw}
.mc-ex .ic img{width:2.9cqw;height:2.9cqw}
.mc-ex.on{border-color:var(--accent);background:rgba(224,179,84,.12)}
.mc-compose.pulse .mc-ex{animation:mc-glow 1s ease-in-out 2}
@keyframes mc-glow{50%{border-color:var(--accent);box-shadow:0 0 3cqw rgba(224,179,84,.35)}}
.mc-go{position:relative;display:block;width:100%;height:11cqw;margin-top:2.6cqw;border:0;border-radius:2.4cqw;cursor:pointer;font:700 max(15px,4.4cqw)/1 var(--display);letter-spacing:.05em;color:#1B140B;
  background:linear-gradient(#F4D07A,#C8942E);box-shadow:inset 0 .3cqw 0 rgba(255,255,255,.45),0 .9cqw 0 #7A5616,0 2cqw 4cqw rgba(0,0,0,.45);transition:transform .1s,box-shadow .1s,filter .2s}
.mc-go:hover{filter:brightness(1.06)}
.mc-go:active,.mc-go.press{transform:translateY(.7cqw);box-shadow:inset 0 .3cqw 0 rgba(255,255,255,.45),0 .2cqw 0 #7A5616,0 1cqw 2cqw rgba(0,0,0,.45)}
.mc-go .k{font:600 max(9px,2.3cqw) Inter;letter-spacing:0;opacity:.6;margin-left:1.6cqw;vertical-align:middle}
.mc-go.ready{animation:mc-goready 1.2s ease-in-out infinite}
@keyframes mc-goready{50%{filter:brightness(1.12);box-shadow:inset 0 .3cqw 0 rgba(255,255,255,.45),0 .9cqw 0 #7A5616,0 0 5cqw rgba(243,207,110,.55)}}

/* ——— Quest mode layout ——— */
.mc[data-mode="quest"] .mc-page{height:26cqw;padding:2cqw 3.6cqw 1.6cqw}
.mc[data-mode="quest"] .mc-day{padding-bottom:.7cqw}
.mc[data-mode="quest"] .mc-dayn{font-size:max(11px,3.2cqw)}
.mc[data-mode="quest"] .mc-ink textarea{visibility:hidden}
.mc[data-mode="quest"] .mc-read{visibility:visible;font-size:max(11.5px,3.15cqw);line-height:1.55}
.mc[data-mode="quest"] .mc-private{opacity:0;height:0;margin:0;overflow:hidden}
.mc[data-mode="quest"] .mc-compose{opacity:0;transform:translateY(6cqw);visibility:hidden;pointer-events:none;transition:opacity .3s,transform .5s,visibility 0s .5s}
.mc-panel{position:absolute;border-radius:2cqw;padding:2.3cqw 2.6cqw;background:linear-gradient(#231d16,#1a150f);border:1px solid rgba(224,179,84,.2);box-shadow:0 1cqw 3cqw rgba(0,0,0,.35);
  opacity:0;transform:translateY(4cqw);visibility:hidden;pointer-events:none;transition:opacity .45s .25s,transform .55s .25s cubic-bezier(.2,.8,.3,1)}
.mc[data-mode="quest"] .mc-panel{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.mc-log{left:4cqw;top:43cqw;width:55cqw;height:45.5cqw}
.mc-log h3{display:flex;justify-content:space-between;align-items:baseline}
.mc-log h3 span{font:700 max(10.5px,2.9cqw) Inter;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}
.mc-rows{list-style:none;margin:1.2cqw 0 0;padding:0}
.mc-q{--c:var(--accent);display:grid;grid-template-columns:5.6cqw 1fr auto;gap:1.8cqw;align-items:center;min-height:9cqw;padding:.9cqw 0;border-top:1px solid rgba(255,255,255,.06);opacity:0;transform:translateX(-3cqw);transition:opacity .25s,transform .4s cubic-bezier(.2,1.5,.4,1)}
.mc-q.in{opacity:1;transform:none}
.mc-q img{width:5.6cqw;height:5.6cqw;filter:drop-shadow(0 0 1.2cqw color-mix(in srgb,var(--c) 45%,transparent))}
.mc-q .qm{min-width:0}
.mc-q .qt{min-width:0;font:600 max(11px,2.9cqw)/1.22 Inter;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.mc-q .qr{display:flex;flex-direction:column;align-items:flex-end;gap:.5cqw}
.mc-q .qs{font:700 max(8px,1.95cqw)/1 Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--c);white-space:nowrap}
.mc-q .qx{font:700 max(12px,3.6cqw)/1 var(--display);color:var(--c);font-variant-numeric:tabular-nums}

.mc-stats{left:61cqw;right:4cqw;top:43cqw;height:57cqw;padding-left:2.4cqw;padding-right:2.4cqw}
.mc-stat{--c:var(--accent);position:relative;margin-top:2cqw}
.mc-stat:first-of-type{margin-top:1.8cqw}
.mc-stat .l{display:flex;align-items:center;gap:1.2cqw;font:600 max(10px,2.7cqw)/1 Inter}
.mc-stat .l img{width:3.4cqw;height:3.4cqw}
.mc-stat .l span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-stat .l b{font:700 max(10.5px,2.9cqw)/1 Inter;font-variant-numeric:tabular-nums;color:var(--ink);transition:color .3s}
.mc-stat .m{height:1.7cqw;margin-top:1cqw;border-radius:99px;background:#0d0a07;overflow:hidden;position:relative}
.mc-stat .m i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 55%,#000),var(--c));transition:width .9s cubic-bezier(.3,.7,.3,1)}
.mc-stat .m u{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:rgba(255,255,255,.08)}
.mc-stat.up .l b{color:var(--c)}
.mc-stat.up .m{box-shadow:0 0 2.4cqw color-mix(in srgb,var(--c) 60%,transparent)}
.mc-plus{position:absolute;right:0;top:-1.6cqw;font:800 max(11px,3.2cqw)/1 Inter;color:var(--c);text-shadow:0 .3cqw 0 #000;pointer-events:none;opacity:0}

.mc-side{left:4cqw;top:90cqw;width:55cqw;height:10cqw;padding:1.5cqw 2.4cqw;display:grid;grid-template-columns:6cqw 1fr;gap:2cqw;align-items:center;border-color:color-mix(in srgb,var(--sq) 40%,transparent);background:linear-gradient(100deg,#1b2228,#1a150f 80%)}
.mc[data-mode="quest"] .mc-side:not(.in){opacity:0;transform:translateY(2cqw)}
.mc-side img{width:6cqw;height:6cqw}
.mc-side .sl{display:flex;align-items:center;gap:1.4cqw;font:700 max(8.5px,2.1cqw)/1 Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--sq);white-space:nowrap}
.mc-side .sl em{font-style:normal;color:var(--mid);margin-left:auto;letter-spacing:.04em}
.mc-pips{display:flex;gap:.7cqw}
.mc-pips i{width:1.6cqw;height:1.6cqw;transform:rotate(45deg);border:1px solid color-mix(in srgb,var(--sq) 70%,transparent);border-radius:.2cqw}
.mc-side .st{margin-top:1cqw;font:700 max(11px,3.1cqw)/1.2 Inter;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-side.pop{animation:mc-bump .5s cubic-bezier(.3,1.8,.5,1)}

/* ——— Story so far ——— */
.mc-story{position:absolute;left:4cqw;right:4cqw;top:102.5cqw;height:20cqw;z-index:27}
.mc-story h3{display:flex;align-items:center;gap:2cqw;color:var(--mid)}
.mc-story h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.mc-chapters{position:relative;display:grid;grid-template-columns:12cqw 1fr 1fr 1fr;gap:2cqw;height:15.5cqw;margin-top:1.6cqw}
.mc-chapters::before{content:"";position:absolute;left:2cqw;right:2cqw;top:50%;border-top:1px dashed rgba(224,179,84,.3)}
.mc-ch{position:relative;display:flex;flex-direction:column;justify-content:center;gap:.6cqw;min-width:0;padding:1.4cqw 2cqw;border-radius:1.8cqw;border:1px solid rgba(224,179,84,.24);background:#1b1610;color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.mc-ch:hover{border-color:rgba(224,179,84,.55)}
.mc-ch small{font:700 max(8.5px,2.1cqw)/1 Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}
.mc-ch b{font:700 max(10.5px,2.85cqw)/1.12 var(--display);letter-spacing:.02em}
.mc-ch .ics{display:flex;gap:.6cqw}
.mc-ch .ics img{width:2.8cqw;height:2.8cqw}
.mc-ch.more{align-items:center;text-align:center;padding:1cqw}
.mc-ch.more b{font-size:max(13px,4.2cqw);color:var(--accent)}
.mc-ch.more span{font:600 max(8px,2cqw)/1.15 Inter;color:var(--mid);text-transform:uppercase;letter-spacing:.06em}
.mc-ch.today{border-style:dashed;background:rgba(27,22,16,.6)}
.mc-ch.today b{font:italic 500 max(10.5px,2.8cqw)/1.2 Inter;color:var(--mid)}
.mc-ch.written{border-style:solid;border-color:var(--accent);background:linear-gradient(#2b2215,#1b1610);box-shadow:0 0 3cqw rgba(224,179,84,.3)}
.mc-ch.written b{font:700 max(10.5px,2.85cqw)/1.12 var(--display);color:#F7D27A}
.mc-ch.written small{color:var(--accent)}
.mc-pop{position:absolute;left:5cqw;right:5cqw;bottom:24cqw;z-index:28;padding:3.2cqw 3.6cqw;border-radius:2cqw;color:#33241A;background:linear-gradient(170deg,#EFE2C2,#DFCB9F);box-shadow:0 2cqw 5cqw rgba(0,0,0,.6),inset 0 0 0 .35cqw rgba(110,70,30,.28)}
.mc-pop[hidden]{display:none}
.mc-pop h4{margin:0;font:700 max(13px,3.8cqw)/1.1 var(--display);color:#4A3018}
.mc-pop p{margin:1.4cqw 0 0;font:italic 400 max(12px,3.2cqw)/1.45 Inter}
.mc-pop .xp{margin-top:1.6cqw;font:700 max(10px,2.6cqw) Inter;letter-spacing:.08em;text-transform:uppercase;color:#8A5A22}

/* ——— Flying phrases and sparks ——— */
.mc-fly{--c:var(--accent);position:absolute;left:0;top:0;z-index:35;max-width:60cqw;padding:.7cqw 1.8cqw;border-radius:1.2cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
  font:600 max(11.5px,3.15cqw)/1.35 Inter;color:#1B140B;background:var(--c);box-shadow:0 1.2cqw 3cqw rgba(0,0,0,.5),0 0 4cqw color-mix(in srgb,var(--c) 70%,transparent);will-change:transform}
.mc-spark{position:absolute;left:0;top:0;z-index:36;width:1.6cqw;height:1.6cqw;margin:-.8cqw;background:var(--c,#F3CF6E);transform:rotate(45deg);pointer-events:none;box-shadow:0 0 1.6cqw var(--c,#F3CF6E)}
.mc-float{position:absolute;z-index:36;font:800 max(11px,3.2cqw)/1 Inter;color:#F6B44A;text-shadow:0 .3cqw 0 #000;pointer-events:none;white-space:nowrap}
.mc-tap{position:absolute;left:0;top:0;z-index:45;width:11cqw;height:11cqw;margin:-5.5cqw;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(255,246,220,.9) 0 22%,transparent 24%);box-shadow:inset 0 0 0 .7cqw rgba(255,246,220,.85)}

/* ——— Level up ——— */
.mc-burst{position:absolute;inset:0;z-index:40;display:grid;place-items:center;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle at 50% 42%,rgba(74,52,18,.95),rgba(14,10,6,.97) 72%)}
.mc-burst.on{opacity:1}
.mc-rays{position:absolute;left:50%;top:42%;width:190cqw;height:190cqw;margin:-95cqw 0 0 -95cqw;
  background:repeating-conic-gradient(from 0deg,rgba(243,207,110,.26) 0deg 7deg,transparent 7deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 6%,transparent 55%);mask:radial-gradient(circle,#000 6%,transparent 55%);animation:mc-spin 16s linear infinite}
@keyframes mc-spin{to{transform:rotate(1turn)}}
.mc-bcore{position:relative;text-align:center;transform:scale(.4);opacity:0;transition:transform .7s cubic-bezier(.2,1.5,.35,1),opacity .3s}
.mc-burst.on .mc-bcore{transform:none;opacity:1}
.mc-bface{width:34cqw;height:34cqw;margin:0 auto 3.6cqw;padding:5cqw;border-radius:50%;background:radial-gradient(circle at 50% 35%,#6a522c,#21190f 75%);box-shadow:0 0 0 .9cqw #E0B354,0 0 0 1.8cqw #120e0a,0 0 10cqw rgba(243,207,110,.65)}
.mc-bface img{width:100%;height:100%}
.mc-blv{font:700 15cqw/1 var(--display);letter-spacing:.06em;color:#F7D27A;text-shadow:0 0 5cqw rgba(243,190,80,.8),0 .8cqw 0 #5e410f}
.mc-brank{margin-top:2cqw;font:600 max(11px,3.2cqw)/1 Inter;letter-spacing:.22em;text-transform:uppercase;color:var(--mid)}
.mc-brank b{color:var(--ink)}
.mc-unlock{display:inline-flex;align-items:center;gap:2cqw;margin-top:4.4cqw;padding:2.2cqw 4.2cqw 2.2cqw 3cqw;border-radius:99px;border:1px solid rgba(243,207,110,.55);background:rgba(243,207,110,.12);font:500 max(13px,3.9cqw)/1 Inter;color:var(--ink)}
.mc-unlock b{color:#F7D27A;font-weight:700}
.mc-unlock img{width:5.4cqw;height:5.4cqw}

/* ——— Character sheet ——— */
.mc-scrim{position:absolute;left:0;right:0;top:0;height:101.5cqw;z-index:24;background:rgba(10,8,5,.72);opacity:0;pointer-events:none;transition:opacity .5s}
.mc-sheet{position:absolute;left:4cqw;right:4cqw;top:3cqw;height:97cqw;z-index:25;display:flex;flex-direction:column;padding:3.4cqw 4cqw;border-radius:2.4cqw;
  background:radial-gradient(120% 60% at 50% 0%,#33281a,#1b160f 70%);border:1px solid rgba(224,179,84,.45);box-shadow:0 3cqw 8cqw rgba(0,0,0,.7),inset 0 0 0 .6cqw rgba(224,179,84,.06);
  opacity:0;transform:translateY(8cqw) scale(.94);pointer-events:none;transition:opacity .45s,transform .7s cubic-bezier(.2,1.2,.35,1)}
.mc.sheet .mc-scrim{opacity:1}
.mc.sheet .mc-sheet{opacity:1;transform:none;pointer-events:auto}
.mc-shead{display:flex;align-items:center;gap:3.6cqw}
.mc-sface{flex:none;width:21cqw;height:21cqw;padding:2cqw;border-radius:2.4cqw;background:radial-gradient(circle at 50% 30%,#6a522c,#1d160f 75%);box-shadow:inset 0 0 0 .6cqw #C99A42,0 0 5cqw rgba(243,207,110,.25)}
.mc-sface img{width:100%;height:100%}
.mc-shead small{display:block;font:700 max(9px,2.3cqw)/1 Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.mc-shead h2{margin:1.4cqw 0 0;font:700 max(20px,6.6cqw)/1 var(--display);letter-spacing:.03em}
.mc-slv{margin-top:1.6cqw;font:600 max(10.5px,2.8cqw)/1.3 Inter;color:var(--mid)}
.mc-slv b{color:var(--ink)}
.mc-radar{display:block;width:100%;flex:1;min-height:0;margin:1cqw 0}
.mc-radar text{font-family:Inter,system-ui,sans-serif}
.mc-perk{display:flex;align-items:center;gap:2.6cqw;padding:2.2cqw 2.8cqw;border-radius:2cqw;background:rgba(243,207,110,.08);border:1px solid rgba(243,207,110,.3)}
.mc-perk img{flex:none;width:6.4cqw;height:6.4cqw}
.mc-perk b{display:block;font:700 max(12px,3.4cqw)/1.15 var(--display);color:#F7D27A}
.mc-perk span{display:block;margin-top:.6cqw;font:500 max(10px,2.6cqw)/1.35 Inter;color:var(--mid)}
.mc-sum{margin-top:2cqw;display:flex;justify-content:space-between;align-items:center;gap:2cqw;font:600 max(10px,2.7cqw)/1.3 Inter;color:var(--mid)}
.mc-sum b{color:var(--ink)}
.mc-close{flex:none;border:1px solid rgba(224,179,84,.55);background:transparent;color:var(--accent);border-radius:99px;padding:1.4cqw 3cqw;font:700 max(10.5px,2.7cqw)/1 var(--display);letter-spacing:.05em;cursor:pointer}
.mc.auto .mc-close{display:none}

@media (prefers-reduced-motion:reduce){.mc-rays{animation:none}.mc-xpbar.ready{animation:none}}