/* Naija Hustle 1.31 — presentation-only visual lab. Original logic intentionally untouched. */
:root{--nh-forest:#053d30;--nh-forest2:#09684f;--nh-ink:#132c28;--nh-soft:#f7f7ef;--nh-gold:#e7bd53;--nh-border:#d8e5db}
body{background:radial-gradient(ellipse 110% 34% at 50% -6%,#bedfc7 0%,#e8f1e7 58%,#eaf0ed 100%);color:var(--nh-ink)}
.shell{position:relative}
.brand{background:linear-gradient(118deg,#053e30 0%,#087454 75%,#064635 100%);border:1px solid #ffffff2c;box-shadow:0 14px 25px #133d3040, inset 0 1px 0 #ffffff38;position:relative;overflow:hidden}
.brand:before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,#ffda6a,transparent);opacity:.85;pointer-events:none}
.brand>b{letter-spacing:-1.3px}.brand b span{color:#ffdc7a;text-shadow:0 2px 15px #ffd36b45}
.brand .quiet,.brand-button{background:#ffffff19!important;color:#fff!important;border-color:#ffffff28!important}
/* Story picker retains mode-first navigation. Both modes remain free and unchanged. */
#setup{position:relative;isolation:isolate;background:linear-gradient(160deg,#fffdf6 0%,#f7f9f2 62%,#f4f7ed 100%);border:1px solid #ffffff;box-shadow:0 25px 70px #123d2e20,0 4px 14px #1b4f2a12;overflow:visible}
#setup:before{content:"";pointer-events:none;position:absolute;left:0;right:0;top:0;height:7px;border-radius:30px 30px 0 0;background:linear-gradient(90deg,#0b7656 0%,#2fa780 46%,#eec767 82%,#f7e3a1 100%)}
#setup>.pill{background:#e3f3e7;border:1px solid #b9dfc5;color:#086343;box-shadow:0 2px 5px #0a5e3910}
#setup>h1{color:#103b30;font-weight:1000;letter-spacing:-1.5px;max-width:530px}
#setup>p.muted{color:#586d60;max-width:580px}
.story-cards{gap:14px}
.story-choice{border-radius:25px;min-height:226px;transition:transform .17s ease,box-shadow .17s ease,border-color .17s ease;box-shadow:0 13px 27px #133a3020,inset 0 1px 0 #ffffff80}
.story-choice.challenge{background:linear-gradient(136deg,#f7e8b4 0%,#dce9c7 82%);border:1px solid #e4d9ae}
.story-choice.full{background:linear-gradient(125deg,#064b3b,#0c7051 72%,#124638);border:1px solid #2e8d6b;color:#fff}
.story-choice.challenge::after{background:linear-gradient(90deg,#f6e8b7 0%,#f5e8b9ec 41%,#f5e8b910 82%)}
.story-choice.full::after{background:linear-gradient(90deg,#064b3b 0%,#0b594adf 45%,#0b594a0b 90%)}
.story-choice:before{content:"";position:absolute;width:280px;height:280px;border:1px solid #ffffff3d;border-radius:50%;right:-30px;top:-65px;pointer-events:none;z-index:1}
.story-choice .setup-art{width:206px;height:206px;right:-23px;bottom:-11px;box-shadow:0 0 0 12px #ffffff18,0 15px 32px #112f2420;transition:transform .18s ease}
.story-choice:hover .setup-art,.story-choice:focus-visible .setup-art{transform:scale(1.045) translateY(-2px)}
.story-choice:hover{transform:translateY(-3px);box-shadow:0 20px 32px #0e402b2b}
.story-copy h2{font-weight:1000;letter-spacing:-.7px}.story-kicker{color:inherit;opacity:.8}.story-arrow{background:#ffffff21;box-shadow:inset 0 1px 0 #ffffff42}
#setup .setup-details{animation:nh-slide-in .23s ease-out both}
.selected-mode-chip{background:#d8f0de;border:1px solid #a9d7b5;color:#086144}
.setup-detail-heading{font-weight:1000;color:#123d30}
.setup-details .look{border-radius:19px;padding-bottom:5px;position:relative;transition:transform .17s ease,filter .17s ease}
.setup-details .portrait.option{border:2px solid #d8e4d4!important;border-radius:18px;box-shadow:0 7px 13px #14382318;overflow:hidden;transition:border-color .16s,transform .16s,box-shadow .16s}
.setup-details .look:hover .portrait{transform:translateY(-3px);box-shadow:0 11px 21px #14382326}
#looks .look.selected .portrait{border:3px solid #dfac3c!important;box-shadow:0 0 0 3px #fff7d9,0 8px 24px #b7782780;transform:translateY(-2px)}
#looks .look.selected:after{content:"SELECTED";position:absolute;right:7px;top:8px;background:#164e38;color:#fff6df;padding:5px 7px;border-radius:100px;font-size:8px;letter-spacing:.7px;line-height:1.1;font-weight:1000;box-shadow:0 2px 8px #0006;pointer-events:none}
.roster-name{color:#274b3b}
.career-choice{background:linear-gradient(150deg,#fff,#f6f9f4);border:1px solid #d6e4d6;box-shadow:0 4px 9px #173f2510;transition:transform .15s,box-shadow .15s}
.career-choice[aria-pressed=true]{background:#e3f4df;border:2px solid #0c8a5d;box-shadow:0 6px 15px #0d764025}
.career-choice:hover{transform:translateY(-2px)}
.setup-start-block{position:relative}
.setup-start-block #startBtn,.primary{background:linear-gradient(110deg,#078c60,#09a86e);border:1px solid #087d57;box-shadow:0 5px 0 #06573c,0 12px 20px #09694025;color:#fff}
.setup-start-block #startBtn:hover,.primary:hover{background:linear-gradient(110deg,#067956,#0ba26c)}
/* Active game: preserve fixed-area layout and scrolling; give the supplied artwork room to breathe. */
#play>main.card{background:#fffef9}
#play .identity{background:linear-gradient(105deg,#fbfff6,#f4f9ed)}
#play .identity .portrait{border:2px solid #fff;box-shadow:0 4px 14px #19563535}
#play .wallet h2{color:#067651}
#play .scene-banner{height:78px!important;min-height:78px!important;position:relative;overflow:hidden}
#play .scene-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,#05362590 100%);pointer-events:none}
#play .scene-banner img{object-position:center 41%}
#play .chapter-tag{z-index:2;background:#06432cde;color:#fff4d5;border:1px solid #ffffff30;border-radius:8px;letter-spacing:.9px;font-weight:900}
#play .toprow{background:#fffef9}
#play .toprow h2{color:#194532}
#play .timeline{background:#fffef9}
#play .entry{border-color:#dfe9db}
#play .entry:before{background:#09a267;box-shadow:0 0 0 4px #e5f5e9}
#play .actions{background:linear-gradient(180deg,#fffef9,#f5faf4)}
#play .ageup{border-color:#116e53;box-shadow:0 5px 0 #046044,0 9px 14px #075c3530}
/* Event artwork: illustrations actually change with category. */
#modalBack{background:#0b241cb5;backdrop-filter:blur(7px)}
#modalBack .modal{background:#fffef9;box-shadow:0 23px 70px #001c1380,0 0 0 1px #ffffff30;border-radius:24px;overflow-x:hidden}
#modalBack .event-card-type{font-weight:1000;letter-spacing:1.2px}
.nh-event-scene{position:relative;height:136px;overflow:hidden;margin:-16px -20px 15px;background-color:#235b43;background-position:center;background-repeat:no-repeat;background-size:cover;border-bottom:3px solid #dcb65a}
.nh-event-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,#0e2617b8 100%);pointer-events:none}
.nh-event-scene span{position:absolute;z-index:1;bottom:11px;left:15px;color:#fff;font-size:10px;letter-spacing:1.1px;font-weight:1000;text-shadow:0 2px 5px #061c1d;max-width:85%}
#modalBack .modal h2{color:#17372f;font-size:clamp(23px,5vw,29px);line-height:1.16;letter-spacing:-.6px;margin:9px 0}
#modalBack .modal p{color:#53665d;line-height:1.58}
#modalBack .choice{color:#194832!important;border:1px solid #d8e5d7;background:linear-gradient(130deg,#fbfefa,#f4f9f3);box-shadow:0 3px 8px #174c2411;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
#modalBack .choice:not(:disabled):active{transform:scale(.985)}
#modalBack .choice:hover:enabled{border-color:#4da97d;box-shadow:0 8px 16px #174c2420}
#modalBack .modal.nh-outcome{background:linear-gradient(165deg,#fffef6,#f3faf2)}
#modalBack .modal.nh-outcome h2{color:#086946}
#modalBack .modal.nh-outcome .nh-event-scene{border-bottom-color:#11a775}
#modalBack .modal.nh-outcome .choices>.primary{box-shadow:0 4px 0 #075e43}
#result{background:linear-gradient(160deg,#ffffff,#f5f9f2);border:1px solid #dfebdb;box-shadow:0 18px 42px #123d2b21}
#result h1{letter-spacing:-1.1px;color:#0c5138}
#result .result-grid>div{background:#edf7eb;border:1px solid #d7ead7;box-shadow:0 2px 8px #153c230d}
@keyframes nh-slide-in{from{opacity:.3;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:560px){
 #setup{padding:22px 17px 24px;margin:7px auto;border-radius:24px}
 #setup>h1{font-size:clamp(31px,8vw,42px);margin:16px 0 11px}
 .story-choice{min-height:212px;padding:19px 17px}
 .story-copy{width:76%}.story-copy h2{font-size:26px}.story-copy p{max-width:180px}
 .story-choice .setup-art{width:163px;height:163px;right:-40px;bottom:-5px}
 #play .scene-banner{height:70px!important;min-height:70px!important}
 .nh-event-scene{height:112px}
 #modalBack .modal{max-height:92dvh!important}
 #modalBack .modal h2{font-size:23px}
 #looks .look.selected:after{top:5px;right:4px;font-size:7px}
}
@media(max-width:365px){.story-choice .setup-art{right:-53px}.story-copy{width:80%}.story-copy h2{font-size:24px}#play .scene-banner{height:58px!important;min-height:58px!important}}
@media(prefers-reduced-motion:reduce){.story-choice,.setup-art,.career-choice,.look,.portrait,.choice{transition:none!important}.setup-details{animation:none!important}}

#modalBack .choice span:not(.choice-symbol){color:#3d6755!important}#modalBack .choice .choice-symbol{color:#137452!important}#modalBack .choice:disabled{color:#72877b!important;background:#f4f5f0!important}