:root{
  --ink:#2B2118;
  --paper:#FFF4DC;
  --red:#E2402F;
  --navy:#1F3A68;
  --mustard:#F2B632;
  --green:#3E8E5A;
  --terra:#C8673E;
  --teal:#19B3A6;
  --teal-off:#8FB5B1;
  --font:'Nunito','Quicksand','Segoe UI',system-ui,Roboto,'DejaVu Sans',Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-weight:800;
  line-height:1.4;
  user-select:none;
  -webkit-user-select:none;
}
button{font-family:inherit;font-weight:inherit;cursor:pointer}
#app{position:fixed;inset:0}
.screen{position:absolute;inset:0;z-index:1;display:none;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:var(--paper)}
.screen.active{display:flex}
#screen-play{background:transparent}

/* ---------- paper bits ---------- */
.notebook{
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(31,58,104,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(31,58,104,.14) 1px,transparent 1px);
  background-size:26px 26px;
  border:3px solid var(--ink);
  border-radius:16px;
  box-shadow:0 6px 0 rgba(43,33,24,.30);
}
.ruled{
  background-image:repeating-linear-gradient(transparent 0 31px,rgba(31,58,104,.22) 31px 32px);
}
.card{
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:16px;
  box-shadow:0 6px 0 rgba(43,33,24,.32);
}
.torn{
  background:var(--paper);
  border-top:3px dashed rgba(43,33,24,.45);
  box-shadow:0 -3px 0 rgba(43,33,24,.12);
}
.tab{
  display:inline-block;
  padding:4px 14px;
  border:3px solid var(--ink);
  border-bottom:none;
  border-radius:10px 10px 0 0;
  background:var(--mustard);
  color:var(--ink);
  font-size:14px;
  transform:translateY(3px);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;
  font-size:clamp(15px,2.4vw,20px);
  letter-spacing:.3px;
  color:var(--navy);
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:15px;
  box-shadow:0 6px 0 var(--ink);
  transition:transform .09s ease, box-shadow .09s ease;
}
.btn:hover,.btn:focus-visible{transform:translateY(-3px);box-shadow:0 9px 0 var(--ink);outline:none}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.btn.primary{background:var(--navy);color:var(--paper)}
.btn.red{background:var(--red);color:var(--paper)}
.btn.teal{background:var(--teal);color:#fff}
.btn.small{padding:8px 14px;font-size:14px;box-shadow:0 4px 0 var(--ink)}
.btn.block{width:100%}

/* ---------- title ---------- */
#screen-menu{justify-content:flex-start}
#menu-bg{position:absolute;inset:0;background:url(assets/bg_title.jpg) center/cover no-repeat;filter:saturate(1.05)}
#menu-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,244,220,.10) 0%,rgba(255,244,220,0) 40%,rgba(255,244,220,.55) 100%)}
#menu-minh{position:absolute;z-index:2;left:2%;bottom:-1%;height:min(46vh,320px);filter:drop-shadow(0 10px 0 rgba(43,33,24,.18));animation:idlebob 1.6s ease-in-out infinite;transform-origin:bottom center}
@keyframes idlebob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}
@media (max-width:760px){#menu-minh{height:min(30vh,180px);opacity:.95}}
#menu-inner{position:relative;z-index:3;width:min(92vw,560px);display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 0 22px;margin-top:max(10px,4vh);max-height:100%;overflow:auto}
.title-board{position:relative;width:min(90vw,470px)}
.title-board img{display:block;width:100%;filter:drop-shadow(0 8px 0 rgba(43,33,24,.25))}
.title-board .vi{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-52%) rotate(-2.6deg);
  text-align:center;font-size:clamp(22px,7.2vw,44px);font-weight:900;line-height:1.05;
  color:var(--paper);text-shadow:0 4px 0 var(--navy),0 -1px 0 var(--ink),1px 0 0 var(--ink),-1px 0 0 var(--ink),0 1px 0 var(--ink);
  letter-spacing:1px;padding:0 6%;
}
.subtitle{color:var(--navy);font-size:clamp(14px,3.6vw,19px);margin-top:-2px}
.subitalic{color:var(--ink);font-style:italic;font-weight:700;opacity:.8;font-size:clamp(12px,3vw,15px)}
#menu-buttons{width:min(88vw,360px);display:flex;flex-direction:column;gap:12px;margin-top:8px;padding:16px 16px 16px}
.menu-card{padding:16px}
.badge-mini{position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-2deg)}

/* ---------- generic top bars ---------- */
.topbar{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;justify-content:space-between;align-items:flex-start;padding:10px;gap:8px;pointer-events:none}
.topbar>*{pointer-events:auto}

/* ---------- HUD ---------- */
#idcard{
  display:flex;align-items:center;gap:9px;padding:8px 12px 8px 8px;
  max-width:52vw;
}
#idcard .photo{width:46px;height:54px;border:3px solid var(--ink);border-radius:8px;background:#fff;overflow:hidden;flex:0 0 auto;display:flex;align-items:flex-end;justify-content:center}
#idcard .photo img{width:130%;height:auto;transform:translateY(6px)}
#idcard .meta{display:flex;flex-direction:column;line-height:1.15;min-width:0}
#idcard .mname{font-size:clamp(11px,2.6vw,15px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#idcard .mstage{font-size:clamp(10px,2.3vw,13px);color:var(--navy)}
.eqbadge{margin-left:auto;background:var(--mustard);border:3px solid var(--ink);border-radius:10px;padding:3px 9px;font-size:clamp(12px,2.8vw,16px);white-space:nowrap}
.eqbadge b{color:var(--red)}

#clockwrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#clock{
  background:var(--ink);border:4px solid var(--red);border-radius:14px;
  color:var(--paper);font-size:clamp(26px,6.4vw,50px);font-weight:900;line-height:1;
  padding:7px 15px;letter-spacing:2px;box-shadow:0 5px 0 rgba(43,33,24,.4);
  font-variant-numeric:tabular-nums;
}
#clock.danger{background:var(--red);color:var(--paper);animation:wobble 1s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-2.5deg)}75%{transform:rotate(2.5deg)}}
#pausebtn{width:42px;height:42px;padding:0;font-size:18px;border-radius:12px}

/* ---------- bottom hints ---------- */
#hints{
  position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;
  padding:7px 12px calc(7px + env(safe-area-inset-bottom,0px));text-align:center;
  font-size:clamp(10px,2.5vw,14px);color:var(--ink);font-weight:800;
}
#hints span{opacity:.92}

/* ---------- phaser host ---------- */
#phaser-host{position:absolute;inset:0;z-index:0;pointer-events:none}
#phaser-host canvas{display:block}
#vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 60%,rgba(43,33,24,.18) 100%)}

/* ---------- dialogue ---------- */
#dialogue{
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  display:none;padding:0 8px calc(6px + env(safe-area-inset-bottom,0px));
}
#dialogue.show{display:block;animation:risepanel .22s ease}
@keyframes risepanel{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
#dialogue-inner{position:relative;width:min(96vw,760px);margin:0 auto;padding:20px 16px 16px}
#dlg-tab{position:absolute;top:-14px;left:18px}
#dlg-text{font-size:clamp(15px,3.4vw,20px);margin:6px 0 12px;line-height:1.4}
#dlg-options{display:flex;flex-direction:column;gap:11px}
.opt{display:flex;align-items:flex-start;gap:11px;text-align:left;width:100%;padding:12px 14px;font-size:clamp(14px,3.2vw,18px);line-height:1.35}
.opt .ltr{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:16px;border:2px solid var(--ink)}
#dlg-close{position:absolute;top:8px;right:12px;font-size:22px;background:none;border:none;color:var(--ink);opacity:.55}

/* ---------- toast ---------- */
#toast{position:absolute;left:50%;top:26%;transform:translate(-50%,-10px);z-index:40;
  background:var(--paper);border:3px solid var(--ink);border-radius:14px;padding:12px 18px;max-width:80vw;
  box-shadow:0 6px 0 rgba(43,33,24,.3);font-size:clamp(14px,3.2vw,18px);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- eq pop ---------- */
#eqpop{position:absolute;z-index:45;pointer-events:none;display:none;flex-direction:column;align-items:center;gap:2px}
#eqpop.show{display:flex}
#eqpop .check{width:74px;height:74px}
#eqpop .val{font-size:26px;font-weight:900;color:var(--red);text-shadow:0 2px 0 var(--paper),0 0 4px var(--paper)}
@keyframes popup{0%{transform:translateY(0) scale(.6);opacity:0}30%{transform:translateY(-10px) scale(1.12);opacity:1}100%{transform:translateY(-70px) scale(1);opacity:0}}
.eqanim{animation:popup 1.05s ease forwards}

/* ---------- time penalty stamp ---------- */
#penalty{position:absolute;z-index:45;pointer-events:none;color:var(--red);font-size:34px;font-weight:900;border:4px solid var(--red);border-radius:12px;padding:2px 12px;transform:rotate(-14deg);display:none}
#penalty.show{display:block;animation:stampin .5s ease forwards}
@keyframes stampin{0%{transform:rotate(-14deg) scale(2.4);opacity:0}60%{transform:rotate(-14deg) scale(.92);opacity:1}100%{transform:rotate(-14deg) scale(1);opacity:1}}

/* ---------- mobile controls ---------- */
#touch{position:absolute;inset:0;z-index:18;pointer-events:none;display:none}
#touch.on{display:block}
#dpad{position:absolute;left:14px;bottom:14px;width:min(38vw,168px);height:min(38vw,168px);pointer-events:auto;opacity:.85}
#dpad button{position:absolute;width:33%;height:33%;border:3px solid var(--ink);background:var(--paper);border-radius:10px;font-size:20px;color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0}
#dpad button.up{left:33.5%;top:0}
#dpad button.down{left:33.5%;bottom:0}
#dpad button.left{left:0;top:33.5%}
#dpad button.right{right:0;top:33.5%}
#interact{position:absolute;right:14px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:min(34vw,150px);height:min(34vw,150px);border-radius:50%;border:5px solid var(--teal);background:rgba(255,244,220,.92);color:var(--teal);font-weight:900;font-size:clamp(13px,3vw,18px);pointer-events:auto;box-shadow:0 6px 0 rgba(43,33,24,.28);line-height:1.1}
#interact:active{transform:translateY(3px)}
body.touch #hints{display:none}

/* ---------- overlays / modal ---------- */
.overlay{position:absolute;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(43,33,24,.5)}
.overlay.show{display:flex}
.overlay .card{width:min(94vw,600px);max-height:92vh;overflow:auto;padding:22px}

/* campaign map transition burst */
#burst{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;pointer-events:none}
#burst.show{display:flex}
#burst .star{font-size:clamp(40px,12vw,90px);font-weight:900;color:var(--red);
  text-shadow:0 4px 0 var(--paper),0 0 22px var(--paper);animation:burstin .85s ease forwards}
@keyframes burstin{0%{transform:scale(0) rotate(-30deg);opacity:0}55%{transform:scale(1.15) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}

/* screen wipe */
#wipe{position:absolute;inset:0;z-index:70;pointer-events:none;background:var(--paper);transform:translateX(-101%);}
#wipe.run{animation:wipeacross .72s ease forwards}
@keyframes wipeacross{0%{transform:translateX(-101%)}50%{transform:translateX(0)}100%{transform:translateX(101%)}}

/* ---------- stage 2 ---------- */
#screen-stage2{padding:0}
#s2-wrap{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  background-color:#dff0ee;
  background-image:linear-gradient(rgba(31,58,104,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(31,58,104,.06) 1px,transparent 1px);
  background-size:44px 44px}
#s2-top{width:100%;display:flex;justify-content:space-between;align-items:flex-start;padding:10px;gap:8px}
#s2-title{font-size:clamp(16px,4.4vw,30px);color:var(--red);text-align:center;margin:2px 0 4px;text-shadow:0 2px 0 var(--paper)}
#s2-instruction{font-size:clamp(11px,2.8vw,15px);opacity:.85;text-align:center}
#s2-barwrap{width:min(92vw,640px);margin:8px auto 0;position:relative}
#s2-bar{height:34px;background:var(--paper);border:3px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 4px 0 rgba(43,33,24,.28)}
#s2-fill{height:100%;width:0%;background:repeating-linear-gradient(45deg,var(--teal) 0 12px,#17a196 12px 24px);transition:width .35s ease}
#s2-pct{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--ink)}
#s2-art{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
#s2-art img{max-height:46vh;max-width:80vw;object-fit:contain;filter:drop-shadow(0 10px 0 rgba(43,33,24,.18))}
#s2-art.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-6px,3px)}50%{transform:translate(5px,-3px)}75%{transform:translate(-4px,2px)}}
.spk{position:absolute;font-size:clamp(12px,3vw,16px);background:var(--paper);border:3px solid var(--ink);border-radius:14px;padding:6px 12px;box-shadow:0 4px 0 rgba(43,33,24,.3);opacity:0}
.spk.show{animation:spk .9s ease forwards}
@keyframes spk{0%{opacity:0;transform:translateY(8px) scale(.8)}30%{opacity:1;transform:translateY(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
#s2-dialogue{width:100%;padding:0 8px calc(8px + env(safe-area-inset-bottom,0px))}
#s2-dialogue .inner{width:min(96vw,720px);margin:0 auto;padding:16px 14px;position:relative}

/* ---------- ending ---------- */
#screen-ending{background:#1b1410;justify-content:center}
#end-panel{position:relative;width:100%;height:100%;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}
.endbg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .6s}
.endbg.on{opacity:1}
#end-scene{position:absolute;inset:0;background:var(--paper)}
#end-scene .art{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;background-position:center;opacity:0;transition:opacity .6s}
#end-scene .art.on{opacity:1}
#end-art3{background-image:url(assets/bg_ending.jpg)}
#end-scene .dim{position:absolute;inset:0;background:rgba(43,33,24,.28)}
#end-box{position:relative;z-index:3;width:min(92vw,720px);padding:20px 18px;margin:auto}
#end-name{font-size:clamp(13px,3vw,17px);color:var(--navy);margin-bottom:4px}
#end-text{font-size:clamp(15px,3.6vw,22px);line-height:1.45;min-height:3.2em}
#end-hint{margin-top:12px;font-size:12px;opacity:.6;text-align:right}
#end-caption{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-6deg);
  color:var(--red);font-size:clamp(19px,4.6vw,40px);font-weight:900;text-align:center;
  border:5px solid var(--red);border-radius:16px;padding:16px 20px;background:rgba(255,244,220,.94);
  box-shadow:0 10px 0 rgba(43,33,24,.3);display:none;line-height:1.15;max-width:84vw}
#end-caption.show{display:block;animation:stampin .6s ease forwards}

/* ---------- results ---------- */
#scorecard-sheet{width:min(94vw,720px);max-height:94vh;overflow:auto;padding:20px 20px 24px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--ink);padding-bottom:10px;margin-bottom:12px;gap:10px}
.sheet-head h2{margin:0;font-size:clamp(17px,4.2vw,26px);color:var(--navy)}
.grade{position:relative;width:96px;height:96px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.grade .stamp{position:absolute;inset:-6px;background:url(assets/ui_stamp_grade.png) center/contain no-repeat;opacity:.55;transform:rotate(-6deg)}
.grade b{position:relative;z-index:2;font-size:34px;color:var(--red)}
.rank-line{font-size:clamp(14px,3.6vw,20px);color:var(--red);margin:6px 0}
.ruled-rows{background-image:repeating-linear-gradient(transparent 0 34px,rgba(31,58,104,.2) 34px 35px)}
.row{display:flex;justify-content:space-between;padding:6px 4px;line-height:34px;font-size:clamp(13px,3.2vw,17px)}
.row span:last-child{font-weight:900}
.comment{margin-top:14px;border-left:5px solid var(--red);background:rgba(226,64,47,.06);padding:10px 12px;font-style:italic;color:var(--navy);font-size:clamp(13px,3.2vw,17px)}
.result-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;justify-content:center}

/* ---------- leaderboard ---------- */
#board-sheet{width:min(94vw,660px);max-height:92vh;overflow:auto;padding:18px}
.board-row{display:flex;align-items:center;gap:10px;padding:7px 4px;line-height:32px}
.board-row .r{width:34px;text-align:center;font-weight:900;color:var(--red)}
.board-row .s{margin-left:auto;font-weight:900}
.board-row.me{background:rgba(242,182,50,.28);border-radius:8px}
.note{font-size:12px;opacity:.7;margin-top:12px;font-style:italic}

/* ---------- tutorial ---------- */
#tut-sheet{width:min(94vw,680px);max-height:94vh;overflow:auto;padding:18px 20px}
.tut-page{display:none}
.tut-page.on{display:block;animation:risepanel .2s ease}
.tut-doodle{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin:14px 0;min-height:120px}
.key{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 10px;border:3px solid var(--ink);background:#fff;border-radius:9px;box-shadow:0 4px 0 var(--ink);font-size:18px}
.tut-doodle img{height:130px}
.tut-title{color:var(--navy);font-size:clamp(16px,4vw,22px);margin:0 0 6px}
.tut-body{font-size:clamp(14px,3.3vw,17px);line-height:1.45}
.tut-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}
.dots{display:flex;gap:7px}
.dots i{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);background:var(--paper)}
.dots i.on{background:var(--red)}

/* ---------- settings ---------- */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0;font-size:clamp(14px,3.3vw,17px)}
input[type=range]{width:min(48vw,220px);accent-color:var(--red)}
.switch{width:64px;height:34px;border-radius:20px;border:3px solid var(--ink);background:var(--paper);position:relative;padding:0}
.switch i{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--ink);transition:left .15s}
.switch.on{background:var(--green)}
.switch.on i{left:32px;background:var(--paper)}

/* ---------- failure ---------- */
.fail-title{color:var(--red);font-size:clamp(24px,6vw,44px);font-weight:900;text-align:center;transform:rotate(-3deg);text-shadow:0 3px 0 var(--paper)}
.fail-sub{text-align:center;font-size:clamp(14px,3.4vw,19px);margin:12px 0}

/* scrollbars */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(43,33,24,.35);border-radius:6px}

@media (max-width:520px){
  #idcard{max-width:58vw}
  #menu-inner{gap:6px}
  #hints{font-size:11px}
}
@media (orientation:landscape) and (max-height:520px){
  #menu-inner{margin-top:2vh}
  .title-board{width:min(60vw,380px)}
  #menu-buttons{width:min(60vw,320px);gap:8px}
  .menu-card{padding:10px}
  .btn{padding:9px 16px}
}