
:root{
  --bg:#06020d; --panel:rgba(18,12,32,.84); --panel2:rgba(44,23,67,.78); --line:rgba(220,184,255,.24);
  --text:#fff7ff; --muted:#cbbdd8; --purple:#a855f7; --violet:#6d28d9; --gold:#ffd166; --red:#ff4d6d; --green:#60e39b; --blue:#7cc8ff;
  --radius:24px; --shadow:0 24px 90px rgba(0,0,0,.48);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:
radial-gradient(circle at 12% 10%,rgba(168,85,247,.28),transparent 34%),radial-gradient(circle at 88% 18%,rgba(255,209,102,.12),transparent 26%),linear-gradient(135deg,#050109,#0f0420 45%,#040207);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.034) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle at center,black,transparent 80%);pointer-events:none}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.hidden{display:none!important}
.page-shell{width:min(1240px,calc(100% - 28px));margin:auto;padding:18px 0 54px}.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0 16px;backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(216,178,255,.36);border-radius:16px;background:linear-gradient(135deg,#7c3aed,#210536);box-shadow:0 0 28px rgba(168,85,247,.32);font-size:1.4rem}.brand strong{display:block;font-size:1.05rem}.brand small{display:block;color:var(--muted);font-weight:700}.header-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.panel{border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),rgba(10,5,18,.78));box-shadow:var(--shadow);border-radius:var(--radius)}.hero{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:22px;padding:32px;margin-top:8px;overflow:hidden;position:relative}.hero h1{font-size:clamp(2.3rem,6vw,5rem);line-height:.96;margin:0 0 12px}.hero-text{font-size:1.1rem;color:var(--muted);line-height:1.58;max-width:740px}.eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.14em;color:#e9cfff;font-weight:950;font-size:.75rem}.selected-summary{justify-self:end;width:min(100%,360px);padding:22px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at top left,rgba(255,209,102,.13),transparent 45%),rgba(0,0,0,.24)}.selected-summary p{margin:0 0 10px;color:var(--muted);font-weight:800}.selected-summary strong{display:block;font-size:1.6rem;margin-bottom:10px}.selected-summary span{display:block;color:var(--muted);margin-top:6px}.selector-section{padding:24px;margin-top:18px}.section-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}.section-title-row h2{font-size:clamp(1.55rem,3vw,2.2rem);margin:0}.hint-pill,.phase-badge,.fight-stats span,.admin-badge{padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.24);color:var(--muted);font-weight:850}.search-box input{width:min(360px,100%);padding:13px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.28);color:var(--text);outline:none}.search-box input:focus{border-color:rgba(216,178,255,.70);box-shadow:0 0 0 4px rgba(168,85,247,.16)}.boss-grid,.deck-grid,.difficulty-grid{display:grid;gap:16px}.boss-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.deck-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:560px;overflow:auto;padding-right:6px}.difficulty-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.select-card{border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.048);padding:18px;min-height:160px;transition:.2s;text-align:left;color:var(--text)}.select-card:hover,.select-card.selected{transform:translateY(-4px);border-color:rgba(216,178,255,.72);box-shadow:0 0 36px rgba(168,85,247,.18)}.select-card.selected{background:linear-gradient(135deg,rgba(124,58,237,.34),rgba(255,209,102,.08))}.select-card h3{margin:0 0 7px;font-size:1.22rem}.select-card p{margin:0;color:var(--muted);line-height:1.45}.boss-card-row{display:grid;grid-template-columns:86px 1fr;gap:14px}.boss-thumb{width:86px;height:104px;background-size:contain;background-repeat:no-repeat;background-position:center bottom;border-radius:16px;background-color:rgba(0,0,0,.22);border:1px solid var(--line)}.meta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.tag{font-size:.75rem;padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:#e5d5ff;background:rgba(255,255,255,.07)}.import-box,.admin-panel{margin-top:16px;padding:16px;border:1px dashed var(--line);border-radius:18px;background:rgba(0,0,0,.18)}.import-box summary{cursor:pointer;font-weight:950}.import-box p,.admin-panel p{color:var(--muted);line-height:1.5}.admin-panel{display:flex;align-items:center;justify-content:space-between;gap:20px}.toggle-row{display:flex;align-items:center;gap:10px;font-weight:950}.toggle-row input{width:22px;height:22px}.start-panel{text-align:center;margin-top:18px;padding:24px}.warning-text{color:#ffc5d2;min-height:1.4em}.primary-btn,.ghost-btn,.danger-btn,.icon-btn{border:1px solid var(--line);border-radius:16px;color:var(--text);font-weight:950;padding:12px 16px;background:rgba(255,255,255,.065)}.primary-btn{background:linear-gradient(135deg,#8b5cf6,#6d28d9);border-color:rgba(216,178,255,.50);box-shadow:0 0 28px rgba(168,85,247,.24)}.primary-btn:hover,.ghost-btn:hover,.danger-btn:hover,.icon-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.danger-btn{background:linear-gradient(135deg,#e11d48,#7f1d1d)}.small{font-size:.88rem;padding:9px 12px}.huge{font-size:1.25rem;padding:16px 28px;border-radius:20px}.battle-shell{width:min(1380px,calc(100% - 24px))}.battle-layout{display:grid;grid-template-columns:390px 1fr;gap:16px}.boss-column,.fight-column{padding:20px}.boss-name-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.boss-name-row h1{font-size:2rem;margin:0}.boss-title{margin:6px 0 0;color:var(--muted);font-weight:800}.boss-stage{height:392px;position:relative;display:grid;place-items:end center;isolation:isolate;margin:14px 0;border:1px solid var(--line);border-radius:22px;background:radial-gradient(circle at center 80%,rgba(255,209,102,.18),transparent 40%),linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.30));overflow:hidden}.spotlight{position:absolute;bottom:0;width:90%;height:320px;background:radial-gradient(ellipse at center bottom,rgba(255,237,173,.20),transparent 68%);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);z-index:-1}.boss-sprite{width:min(100%,360px);height:375px;background-repeat:no-repeat;background-position:center bottom;background-size:contain;filter:drop-shadow(0 28px 35px rgba(0,0,0,.58));transform-origin:50% 100%}.pose-idle{animation:spriteIdle 3s ease-in-out infinite}.pose-taunt{animation:spriteTaunt 1.7s ease-in-out infinite}.pose-attack{animation:spriteAttack .78s ease-in-out infinite}.pose-special{animation:spriteSpecial 1.05s ease-in-out infinite}.pose-hurt{animation:spriteHurt .28s linear infinite}.pose-defeat{animation:spriteDefeat 1s ease forwards}.hp-panel{margin-top:12px}.hp-label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;color:var(--muted);font-weight:900}.hp-label strong{color:var(--text)}.hp-track{height:16px;background:rgba(255,255,255,.09);border:1px solid var(--line);border-radius:999px;overflow:hidden}.hp-track span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ef4444,#ffd166);transition:width .22s}.hp-track.player span{background:linear-gradient(90deg,#18b86e,#94ffca)}.dialogue{margin:16px 0 0;padding:14px 16px;border-left:4px solid var(--gold);border-radius:0 16px 16px 0;background:rgba(0,0,0,.28);min-height:84px;line-height:1.48}.fight-header{display:flex;justify-content:space-between;gap:16px;margin-bottom:14px}.fight-header h2{font-size:clamp(1.5rem,3vw,2.2rem);margin:0}.fight-stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-content:flex-start}.admin-badge{color:#ffe299;border-color:rgba(255,209,102,.5)}.battle-box-shell{position:relative;border-radius:20px;padding:12px;background:#030105;border:2px solid rgba(255,255,255,.74);box-shadow:inset 0 0 28px rgba(168,85,247,.12),0 0 30px rgba(168,85,247,.16);overflow:hidden}.battle-box-shell.fractured{animation:screenShake .16s infinite}.battle-box-shell.fractured:before,.battle-box-shell.fractured:after{content:"";position:absolute;inset:16% 22%;border-top:3px solid rgba(255,255,255,.45);transform:rotate(17deg);pointer-events:none;z-index:3}.battle-box-shell.fractured:after{inset:20% 12%;transform:rotate(-24deg);border-top-color:rgba(255,77,109,.55)}#battleCanvas{width:100%;height:auto;display:block;background:radial-gradient(circle at center,rgba(168,85,247,.08),#020104 72%);border-radius:10px}.player-status-under-box{display:grid;grid-template-columns:170px 1fr auto;gap:12px;align-items:center;margin:12px 0 14px;padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.045)}.shield-text{color:#9be7ff;font-weight:950}.action-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.action-btn{text-align:left;border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(255,255,255,.055);color:#fff;font-weight:950;min-height:86px}.action-btn span{font-size:1.4rem;margin-right:6px}.action-btn small{display:block;margin-top:6px;color:var(--muted);font-weight:750}.action-btn.attack:hover{border-color:#ff8aa0}.action-btn.heal:hover{border-color:#6ee7b7}.action-btn.defend:hover{border-color:#93c5fd}.action-row.disabled{opacity:.45;pointer-events:none}.control-help{margin:12px 0 0;color:var(--muted);font-size:.92rem;line-height:1.4}kbd{background:rgba(255,255,255,.12);border:1px solid var(--line);padding:2px 6px;border-radius:6px;color:#fff}.modal{position:fixed;z-index:60;inset:0;background:rgba(4,0,10,.72);backdrop-filter:blur(12px);display:grid;place-items:center;padding:16px}.modal-card{width:min(780px,100%);max-height:92vh;overflow:auto;padding:22px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(180deg,rgba(36,21,58,.98),rgba(10,5,18,.98));box-shadow:0 30px 100px rgba(0,0,0,.6)}.modal-head{display:flex;justify-content:space-between;gap:16px}.card-question{font-size:1.1rem;line-height:1.6;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:18px;padding:16px;margin:14px 0}.choice-area{display:grid;gap:10px;margin-bottom:12px}.choice-btn{text-align:left;border:1px solid var(--line);border-radius:15px;padding:12px 14px;background:rgba(255,255,255,.06);color:#fff}.choice-btn:hover{border-color:rgba(255,255,255,.5)}.typed-area{display:flex;gap:8px;margin-bottom:12px}.typed-area input{width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.28);color:var(--text)}.answer-reveal{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:16px;padding:12px;margin:10px 0}.answer-reveal summary{cursor:pointer;font-weight:950}.card-answer{margin-top:10px;color:#d6ffd9;line-height:1.55}.modal-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.result-card{text-align:center}.result-card h2{font-size:2.2rem}.damage-pop{position:fixed;z-index:80;pointer-events:none;font-weight:950;font-size:2rem;color:#ffd166;text-shadow:0 0 14px #000;animation:popUp .8s ease forwards}.error-panel{margin-top:50px;padding:28px;text-align:center}@keyframes spriteIdle{50%{transform:translateY(-9px)}}@keyframes spriteTaunt{0%,100%{transform:translateY(0) rotate(-1deg) scale(1)}50%{transform:translateY(-12px) rotate(2deg) scale(1.02)}}@keyframes spriteAttack{50%{transform:translateX(-12px) translateY(-6px) scale(1.035)}}@keyframes spriteSpecial{0%,100%{transform:scale(1) translateY(0);filter:drop-shadow(0 28px 35px rgba(0,0,0,.58)) drop-shadow(0 0 0 rgba(168,85,247,0))}50%{transform:scale(1.045) translateY(-8px);filter:drop-shadow(0 28px 35px rgba(0,0,0,.58)) drop-shadow(0 0 26px rgba(168,85,247,.65))}}@keyframes spriteHurt{25%{transform:translateX(7px)}75%{transform:translateX(-7px)}}@keyframes spriteDefeat{to{transform:translateY(22px) scale(.96);opacity:.45;filter:grayscale(.55) brightness(.75)}}@keyframes screenShake{25%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,2px)}}@keyframes popUp{to{transform:translateY(-60px) scale(.6);opacity:0}}@media(max-width:1040px){.hero,.battle-layout{grid-template-columns:1fr}.selected-summary{justify-self:stretch}.boss-grid,.deck-grid,.difficulty-grid{grid-template-columns:1fr 1fr}.boss-column{order:2}.fight-column{order:1}.player-status-under-box{grid-template-columns:1fr}.boss-stage{height:360px}.boss-sprite{height:345px}}@media(max-width:680px){.page-shell{width:min(100% - 16px,1240px)}.hero,.selector-section,.boss-column,.fight-column{padding:16px}.boss-grid,.deck-grid,.difficulty-grid,.action-row{grid-template-columns:1fr}.section-title-row,.fight-header,.admin-panel{display:block}.search-box input{width:100%;margin-top:10px}.typed-area{flex-direction:column}.brand small{display:none}.header-actions{gap:6px}.ghost-btn.small{font-size:.78rem;padding:8px 9px}}


/* Modular boss-pack support */
.boss-folder-note{font-size:.86rem;color:var(--muted);margin-top:8px}
body[data-boss="leonardo-da-vinci"]{--purple:#22d3ee;--violet:#0f766e;--gold:#f5c16c}
body[data-boss="marie-curie"]{--purple:#60a5fa;--violet:#1d4ed8;--gold:#a7f3d0}
body[data-boss="shakespeare"]{--purple:#a855f7;--violet:#6d28d9;--gold:#ffd166}
.boss-sprite{image-rendering:auto}
.folder-help{margin-top:18px;padding:16px;border:1px dashed var(--line);border-radius:18px;background:rgba(0,0,0,.18);color:var(--muted);line-height:1.5}
.folder-help code{color:#fff}

/* Three-boss pack theme hooks */
body[data-boss="sukuna"] .hp-track span{background:linear-gradient(90deg,#ff255a,#ff7a1a)}
body[data-boss="lelouch"] .hp-track span{background:linear-gradient(90deg,#7b61ff,#ff3d5e)}
body[data-boss="shakespeare"] .hp-track span{background:linear-gradient(90deg,#ef4444,#ffd166)}
body[data-boss="sukuna"] #battleCanvas{background:radial-gradient(circle at center,rgba(255,37,90,.10),#050003 72%)}
body[data-boss="lelouch"] #battleCanvas{background:radial-gradient(circle at center,rgba(123,97,255,.10),#030108 72%)}
.folder-help strong{color:#fff}


/* Sukuna Black Flash mechanic polish */
body.black-flash-screen::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;background:radial-gradient(circle at center,rgba(255,255,255,.92),rgba(255,36,90,.50) 18%,rgba(0,0,0,.78) 38%,transparent 62%);mix-blend-mode:screen;animation:blackFlashScreen .52s steps(2,end) forwards;}
.damage-pop.black-flash-pop{font-size:2.25rem;color:#fff;text-shadow:0 0 4px #000,0 0 12px #ff2147,0 0 26px #fff;letter-spacing:.06em;white-space:nowrap;}
body[data-boss="sukuna"] .phase-badge{box-shadow:0 0 18px rgba(255,37,90,.18);}
@keyframes blackFlashScreen{0%{opacity:0;filter:contrast(1)}16%{opacity:1;filter:contrast(2.8)}35%{opacity:.2}50%{opacity:1}100%{opacity:0;filter:contrast(1)}}
