@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}

:root{
--amber:#f5a800;
--amber-dark:#7a5000;
--amber-deep:#5a3800;
--teal:#0f766e;
--teal-dark:#134e4a;
--teal-deep:#042f2e;
--rose:#e11d48;
--rose-dark:#9f1239;
--rose-deep:#881337;
--indigo:#6366f1;
--indigo-dark:#312e81;
--indigo-deep:#1e1b4b;
--green:#16a34a;
--green-dark:#14532d;
}

body{font-family:'Nunito',Arial,sans-serif;background:#100a04;overflow:hidden;width:100vw;height:100vh;}

#splash{
position:fixed;
inset:0;
background:radial-gradient(ellipse 80% 70% at 50% 100%,#2a1500 0%,#100a04 60%);
display:flex;
align-items:center;
justify-content:center;
z-index:1000;
transition:opacity .9s ease;
overflow:hidden;
}

.splash-noise{display:none;}
.splash-rays{display:none;}

.splash-content{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
}

.splash-lock-wrap{
position:relative;
margin-bottom:36px;
}

.splash-lock-glow{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:130px;
height:130px;
border-radius:50%;
background:radial-gradient(circle,rgba(245,168,0,.30) 0%,transparent 70%);
animation:glowPulse 2.4s ease-in-out infinite;
}

@keyframes glowPulse{
0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.7;}
50%{transform:translate(-50%,-50%) scale(1.3);opacity:1;}
}

.splash-lock-svg{
display:block;
width:88px;
height:88px;
position:relative;
z-index:1;
filter:drop-shadow(0 0 16px rgba(245,168,0,.65)) drop-shadow(0 4px 8px rgba(0,0,0,.6));
animation:lockBob 3s ease-in-out infinite;
}

@keyframes lockBob{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-6px);}
}

#splash h1{
font-size:clamp(2.6rem,6vw,4.4rem);
font-weight:900;
letter-spacing:6px;
color:var(--amber);
text-shadow:0 0 40px rgba(245,168,0,.55),0 2px 4px rgba(0,0,0,.8);
margin-bottom:44px;
text-align:center;
animation:titleReveal .8s ease both;
}

@keyframes titleReveal{
from{opacity:0;transform:translateY(10px);letter-spacing:14px;}
to{opacity:1;transform:translateY(0);letter-spacing:6px;}
}

.progress-bar-wrap{
width:min(380px,78vw);
height:12px;
background:rgba(255,255,255,.06);
border-radius:999px;
border:1.5px solid rgba(245,168,0,.18);
box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
overflow:hidden;
position:relative;
}

.progress-bar{
height:100%;
width:0%;
background:linear-gradient(90deg,#92400e 0%,#f5a800 60%,#ffd84d 100%);
border-radius:999px;
transition:width .1s linear;
box-shadow:0 0 10px rgba(245,168,0,.55);
}

#splash-pct{
color:rgba(245,168,0,.65);
font-size:.78rem;
font-weight:700;
margin-top:10px;
letter-spacing:3px;
}

#welcome{
position:fixed;
inset:0;
background:radial-gradient(ellipse 140% 100% at 30% 100%,#1e0d00 0%,#100805 35%,#07040c 100%);
display:flex;
align-items:center;
justify-content:center;
gap:0;
z-index:900;
transition:opacity .6s ease;
overflow:hidden;
}

#welcome::before{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(ellipse 50% 60% at 15% 50%,rgba(245,168,0,.07) 0%,transparent 70%),
radial-gradient(ellipse 40% 50% at 85% 50%,rgba(99,102,241,.05) 0%,transparent 70%),
radial-gradient(ellipse 60% 40% at 50% 90%,rgba(245,168,0,.04) 0%,transparent 70%);
}

#welcome::after{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background-image:
linear-gradient(rgba(245,168,0,.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(245,168,0,.025) 1px,transparent 1px);
background-size:48px 48px;
mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 0%,transparent 100%);
-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 0%,transparent 100%);
}

.welcome-left{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:24px 48px 24px 32px;
gap:14px;
position:relative;
z-index:1;
}

.welcome-left::before{
content:'';
position:absolute;
width:280px;
height:280px;
border-radius:50%;
background:radial-gradient(circle,rgba(245,168,0,.10) 0%,transparent 70%);
pointer-events:none;
}

.welcome-left img{
width:min(260px,50vw);
filter:drop-shadow(0 0 28px rgba(245,168,0,.5)) drop-shadow(0 8px 16px rgba(0,0,0,.6));
animation:logoFloat 4s ease-in-out infinite;
position:relative;
z-index:1;
}

@keyframes logoFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-8px);}
}

.welcome-left h2{
font-size:clamp(1.5rem,3.2vw,2.4rem);
font-weight:900;
color:var(--amber);
letter-spacing:4px;
text-align:center;
text-shadow:0 0 24px rgba(245,168,0,.45),0 2px 4px rgba(0,0,0,.8);
line-height:1.3;
position:relative;
z-index:1;
}

.welcome-left h2::after{
content:'';
display:block;
width:60px;
height:2px;
background:linear-gradient(90deg,transparent,var(--amber),transparent);
margin:10px auto 0;
border-radius:1px;
box-shadow:0 0 8px rgba(245,168,0,.6);
}

.welcome-divider{
width:1px;
background:linear-gradient(180deg,transparent 0%,rgba(245,168,0,.25) 30%,rgba(245,168,0,.25) 70%,transparent 100%);
margin:32px 0;
position:relative;
z-index:1;
}

.welcome-divider::before{
content:'';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:6px;
height:6px;
border-radius:50%;
background:var(--amber);
box-shadow:0 0 12px rgba(245,168,0,.8),0 0 24px rgba(245,168,0,.4);
}

.welcome-right{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:24px 32px 24px 48px;
gap:8px;
position:relative;
z-index:1;
}

.welcome-right h3{
font-size:.78rem;
font-weight:900;
color:rgba(245,168,0,.4);
letter-spacing:4px;
margin-bottom:4px;
text-transform:uppercase;
}

.welcome-right h3::before{
content:'';
display:block;
width:40px;
height:1px;
background:rgba(245,168,0,.2);
margin:0 auto 10px;
}

.pill-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
width:260px;
padding:15px 24px;
border-radius:999px;
font-family:'Nunito',sans-serif;
font-size:.95rem;
font-weight:900;
letter-spacing:2.5px;
cursor:pointer;
border:none;
outline:none;
transition:transform .1s,box-shadow .1s,filter .1s;
position:relative;
overflow:hidden;
}

.pill-btn::before{
content:'';
position:absolute;
top:0;
left:-60%;
width:40%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
transform:skewX(-20deg);
transition:none;
animation:btnShimmer 3.5s ease-in-out infinite;
}

@keyframes btnShimmer{
0%{left:-60%;}
50%,100%{left:130%;}
}

.pill-btn:hover{filter:brightness(1.08);}
.pill-btn:active{transform:translateY(3px);}

.pill-btn.amber{
background:linear-gradient(135deg,#ffd84d 0%,var(--amber) 60%,#e09000 100%);
color:var(--amber-dark);
border:3px solid var(--amber-dark);
box-shadow:0 5px 0 var(--amber-deep),0 8px 20px rgba(245,168,0,.25);
}

.pill-btn.amber:active{box-shadow:0 2px 0 var(--amber-deep),0 4px 8px rgba(0,0,0,.4);}

.pill-btn.teal{
background:linear-gradient(135deg,#2dd4bf 0%,var(--teal) 60%,#0a5e58 100%);
color:white;
border:3px solid var(--teal-dark);
box-shadow:0 5px 0 var(--teal-deep),0 8px 20px rgba(15,118,110,.3);
}

.pill-btn.teal:active{box-shadow:0 2px 0 var(--teal-deep),0 4px 8px rgba(0,0,0,.4);}

.pill-btn.rose{
background:linear-gradient(135deg,#fb7185 0%,var(--rose) 60%,#b5153a 100%);
color:white;
border:3px solid var(--rose-dark);
box-shadow:0 5px 0 var(--rose-deep),0 8px 20px rgba(225,29,72,.3);
}

.pill-btn.rose:active{box-shadow:0 2px 0 var(--rose-deep),0 4px 8px rgba(0,0,0,.4);}

.pill-btn.slate{
background:linear-gradient(135deg,#64748b 0%,#334155 60%,#1e293b 100%);
color:rgba(255,255,255,.85);
border:3px solid #1e293b;
box-shadow:0 5px 0 #0f172a,0 8px 20px rgba(0,0,0,.35);
}

.pill-btn.slate:active{box-shadow:0 2px 0 #0f172a,0 4px 8px rgba(0,0,0,.4);}

.config-modal-wrap{
position:fixed;
inset:0;
z-index:1200;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.72);
padding:60px 16px 24px;
opacity:0;
pointer-events:none;
transition:opacity .3s ease;
}

.config-modal-wrap.show{opacity:1;pointer-events:all;}

.config-section-label{
font-size:.68rem;
font-weight:900;
letter-spacing:3px;
color:rgba(0,0,0,.4);
margin-bottom:10px;
}

.config-section-divider{height:1px;background:rgba(0,0,0,.1);margin:14px 0;}

.config-toggle-row{
display:flex;
align-items:center;
justify-content:space-between;
font-size:.9rem;
font-weight:700;
color:#1a0e04;
background:rgba(0,0,0,.06);
border-radius:12px;
padding:10px 14px;
}

.toggle-switch{position:relative;display:inline-block;cursor:pointer;}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute;}

.toggle-track{
display:block;
width:48px;
height:26px;
border-radius:999px;
background:rgba(0,0,0,.15);
border:2px solid rgba(0,0,0,.12);
transition:background .25s,border-color .25s;
position:relative;
}

.toggle-thumb{
position:absolute;
top:3px;
left:3px;
width:16px;
height:16px;
border-radius:50%;
background:rgba(255,255,255,.6);
transition:transform .25s,background .25s;
}

.toggle-switch input:checked + .toggle-track{
background:linear-gradient(135deg,#2dd4bf,var(--teal));
border-color:var(--teal-dark);
}

.toggle-switch input:checked + .toggle-track .toggle-thumb{
transform:translateX(22px);
background:white;
box-shadow:0 0 6px rgba(255,255,255,.4);
}

.config-lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

.lang-btn{
padding:10px 12px;
border-radius:12px;
background:rgba(0,0,0,.06);
border:2px solid rgba(0,0,0,.1);
color:rgba(0,0,0,.45);
font-family:'Nunito',sans-serif;
font-size:.85rem;
font-weight:900;
letter-spacing:1px;
cursor:pointer;
transition:background .15s,border-color .15s,color .15s;
}

.lang-btn:hover{background:rgba(245,168,0,.15);border-color:rgba(245,168,0,.4);color:var(--amber-dark);}

.lang-btn.active{
background:rgba(245,168,0,.25);
border-color:var(--amber-dark);
color:var(--amber-dark);
box-shadow:0 2px 0 var(--amber-deep);
}

#game{position:fixed;inset:0;z-index:100;display:none;}
#game canvas{display:block;width:100%;height:100%;}

.crosshair{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:24px;
height:24px;
pointer-events:none;
}

.crosshair::before,
.crosshair::after{
content:'';
position:absolute;
background:#c084fc;
box-shadow:0 0 3px 1px rgba(0,0,0,.8),0 0 6px 1px rgba(192,132,252,.6);
}

.crosshair::before{top:50%;left:0;width:100%;height:2px;transform:translateY(-50%);}
.crosshair::after{left:50%;top:0;height:100%;width:2px;transform:translateX(-50%);}

.hud-top{
position:absolute;
top:0;
left:0;
right:0;
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 20px;
background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,transparent 100%);
pointer-events:none;
gap:16px;
opacity:0;
transition:opacity .6s ease;
}

.hud-top.visible{opacity:1;}
.hud-title-wrap{display:flex;align-items:center;gap:8px;}
.hud-title{color:var(--amber);font-size:.85rem;font-weight:900;letter-spacing:3px;}

.hud-binary{
display:flex;
gap:6px;
align-items:center;
background:rgba(0,0,0,.4);
border:1px solid rgba(245,168,0,.2);
border-radius:8px;
padding:5px 12px;
}

.hud-bit{
font-size:1.1rem;
font-weight:900;
font-family:'Courier New',monospace;
width:18px;
text-align:center;
transition:color .3s,text-shadow .3s;
color:rgba(245,168,0,.25);
}

.hud-bit.bit-1{color:#ffffff;text-shadow:0 0 8px rgba(255,255,255,.7);}
.hud-bit.bit-0{color:#ffffff;text-shadow:0 0 8px rgba(255,255,255,.7);}
.hud-bit.bit-pending{color:rgba(245,168,0,.5);}

.hud-hint{
color:rgba(255,200,100,.50);
font-size:.62rem;
font-family:sans-serif;
pointer-events:none;
white-space:nowrap;
letter-spacing:1px;
opacity:0;
transition:opacity .6s ease;
flex:1;
text-align:center;
}

.hud-hint.visible{opacity:1;}

.hud-menu-btn{
position:absolute;
top:14px;
right:20px;
pointer-events:all;
background:rgba(245,168,0,.12);
border:2px solid rgba(245,168,0,.3);
color:var(--amber);
border-radius:8px;
padding:6px 14px;
font-family:'Nunito',sans-serif;
font-size:.75rem;
font-weight:900;
letter-spacing:2px;
cursor:pointer;
}

.door-panel{display:flex;flex-direction:column;align-items:center;gap:16px;}
.door-code-display{display:flex;gap:8px;}

.door-bit{
width:42px;
height:52px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.4rem;
font-weight:900;
font-family:'Courier New',monospace;
border:3px solid rgba(0,0,0,.2);
transition:all .3s;
}

.door-bit.b1{background:#bbf7d0;color:#14532d;border-color:#16a34a;}
.door-bit.b0{background:#fecdd3;color:#9f1239;border-color:#e11d48;}
.door-bit.empty{background:rgba(0,0,0,.08);color:rgba(0,0,0,.25);}
.door-enter-btn{margin-top:4px;}

#overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.72);
display:flex;
align-items:flex-start;
justify-content:center;
z-index:1100;
opacity:0;
pointer-events:none;
transition:opacity .3s ease;
padding:60px 16px 24px;
overflow-y:auto;
}

#overlay.show{opacity:1;pointer-events:all;}

.scroll-wrapper{
position:relative;
width:min(320px,90vw);
margin:40px auto 32px;
animation:popIn .25s ease;
flex-shrink:0;
}

@keyframes popIn{
from{transform:scale(.85);opacity:0;}
to{transform:scale(1);opacity:1;}
}

.scroll-body{
position:relative;
border-radius:14px;
padding:24px 18px 40px 18px;
box-shadow:4px 7px 0 rgba(0,0,0,.22),0 12px 28px rgba(0,0,0,.4);
}

.scroll-body::before{
content:'';
position:absolute;
inset:7px;
border:2px solid rgba(0,0,0,.15);
border-radius:9px;
pointer-events:none;
}

.fold-tl,
.fold-tr{position:absolute;top:0;width:0;height:0;z-index:6;}

.theme-amber .scroll-body{background:#fef3c7;}
.theme-teal  .scroll-body{background:#ccfbf1;}
.theme-rose  .scroll-body{background:#ffe4e6;}
.theme-indigo .scroll-body{background:#e0e7ff;}
.theme-green .scroll-body{background:#dcfce7;}

.ribbon-wrap{
position:absolute;
top:-40px;
left:50%;
transform:translateX(-50%);
width:250px;
z-index:20;
}

.ribbon-wrap svg{width:100%;display:block;}

.ribbon-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-60%);
font-size:18px;
font-weight:900;
letter-spacing:2px;
white-space:nowrap;
}

.close-btn{
position:absolute;
bottom:-19px;
right:-19px;
width:40px;
height:40px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:20;
background:radial-gradient(circle at 40% 35%,#ffd84d,#f5a800);
border:3px solid var(--amber-dark);
box-shadow:2px 3px 0 var(--amber-deep);
}

.close-btn svg{width:18px;height:18px;}

.modal-body{margin-top:28px;display:flex;flex-direction:column;gap:14px;}
.modal-text{font-size:.95rem;font-weight:700;color:#1a0e04;line-height:1.5;text-align:center;}

.modal-challenge{
background:rgba(0,0,0,.07);
border-radius:12px;
padding:14px;
font-size:.9rem;
font-weight:700;
color:#1a0e04;
line-height:1.5;
text-align:center;
}

.modal-input{
width:100%;
padding:10px 16px;
border-radius:999px;
border:3px solid rgba(0,0,0,.2);
background:white;
font-family:'Nunito',sans-serif;
font-size:1rem;
font-weight:900;
text-align:center;
letter-spacing:2px;
outline:none;
color:#1a0e04;
}

.modal-input:focus{border-color:var(--teal);}
.modal-options{display:flex;flex-direction:column;gap:8px;}

.opt-btn{
width:100%;
padding:10px 16px;
border-radius:999px;
border:3px solid rgba(0,0,0,.2);
background:white;
font-family:'Nunito',sans-serif;
font-size:.9rem;
font-weight:900;
letter-spacing:1px;
cursor:pointer;
text-align:center;
transition:transform .08s,background .15s;
color:#1a0e04;
}

.opt-btn:active{transform:translateY(2px);}
.opt-btn.correct{background:#bbf7d0;border-color:var(--green);}
.opt-btn.wrong{background:#fecdd3;border-color:var(--rose);}

.drag-zone{
min-height:50px;
border-radius:12px;
border:2px dashed rgba(0,0,0,.2);
background:rgba(0,0,0,.04);
display:flex;
flex-wrap:wrap;
gap:6px;
padding:8px;
align-content:flex-start;
}

.drag-chip{
padding:6px 14px;
border-radius:999px;
background:white;
border:2px solid rgba(0,0,0,.2);
font-size:.8rem;
font-weight:900;
cursor:grab;
user-select:none;
letter-spacing:1px;
}

.drag-chip:active{cursor:grabbing;}

.drag-label{
font-size:.7rem;
font-weight:900;
letter-spacing:2px;
color:rgba(0,0,0,.4);
margin-bottom:2px;
}

.modal-btns{display:flex;gap:10px;margin-top:4px;}
.modal-btns .pill-btn{flex:1;width:auto;font-size:.85rem;padding:10px 12px;}

#toast{
position:fixed;
bottom:24px;
left:50%;
transform:translateX(-50%) translateY(120px);
z-index:2000;
transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s;
pointer-events:none;
max-width:min(420px,90vw);
width:max-content;
opacity:0;
}

#toast.show{transform:translateX(-50%) translateY(0);pointer-events:all;opacity:1;}

.toast-inner{
background:white;
border-radius:16px;
display:flex;
align-items:center;
gap:10px;
padding:10px 12px 10px 16px;
border:3px solid var(--amber-dark);
box-shadow:0 4px 0 var(--amber-deep),0 8px 20px rgba(0,0,0,.4);
white-space:normal;
word-break:break-word;
}

.toast-icon{
width:32px;
height:32px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.toast-icon.ok{background:radial-gradient(circle at 40% 35%,#bbf7d0,#16a34a);}
.toast-icon.fail{background:radial-gradient(circle at 40% 35%,#fecdd3,#e11d48);}
.toast-msg{font-size:.9rem;font-weight:900;letter-spacing:1px;color:#1a0e04;flex:1;line-height:1.4;}

.toast-close{
width:28px;
height:28px;
border-radius:50%;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.08);
border:none;
cursor:pointer;
transition:background .15s;
}

.toast-close:hover{background:rgba(0,0,0,.16);}

#victory{
position:fixed;
inset:0;
background:rgba(0,0,0,.85);
display:none;
align-items:center;
justify-content:center;
z-index:1500;
}

#victory.show{display:flex;}

.victory-card{
background:#fef3c7;
border-radius:20px;
padding:40px 32px;
text-align:center;
max-width:360px;
width:90vw;
box-shadow:0 20px 60px rgba(0,0,0,.5);
animation:popIn .4s ease;
}

.victory-card h2{
font-size:2rem;
font-weight:900;
color:var(--amber-dark);
letter-spacing:3px;
margin-bottom:8px;
}

.victory-card p{font-size:.9rem;color:var(--amber-dark);margin-bottom:24px;opacity:.7;}
.star-row{display:flex;justify-content:center;gap:10px;margin-bottom:24px;}
.score-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}

.score-item{
background:rgba(245,168,0,.15);
border-radius:12px;
padding:10px 16px;
display:flex;
justify-content:space-between;
align-items:center;
}

.score-item span:first-child{font-size:.75rem;font-weight:900;letter-spacing:2px;color:var(--amber-dark);}
.score-item span:last-child{font-size:1.1rem;font-weight:900;color:var(--amber-dark);}