:root{
  color-scheme:dark;
  --navy:#1c2b4a; --navy2:#2b4170;
  --gold:#f6cf63; --gold2:#e39b2d;
  --wood:#6a4021; --wood2:#8a5a30; --wood-dark:#3d2412;
  --parch:#f6e7c4; --parch2:#e8d29d;
  --ink:#4a2e17;
  --font:'Baloo 2','Nunito','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#0e1626;font-family:var(--font);color:var(--ink);touch-action:none;overscroll-behavior:none}
#app{position:fixed;inset:0;overflow:hidden}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto}
.hidden{display:none!important}
img{-webkit-user-drag:none;pointer-events:none}
button{font-family:var(--font);cursor:pointer}

/* ---------- lớp phủ không khí ---------- */
#vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(10,16,40,.38) 100%)}
#mist{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.6s ease;
  background:radial-gradient(ellipse at center,rgba(170,120,220,.45) 0%,rgba(110,60,170,.66) 55%,rgba(60,20,110,.82) 100%);mix-blend-mode:multiply}
#mist.on{opacity:1}
#mist.on.soft{opacity:.5}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
#party{position:absolute;left:max(12px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));display:flex;gap:6px}
.mem{position:relative;width:calc(clamp(44px,5.6vw,66px) * var(--hui,1));aspect-ratio:110/116;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45));transition:transform .2s,filter .2s}
.mem img{width:100%;height:100%;object-fit:contain;display:block}
.mem span{position:absolute;left:-2px;bottom:-4px;font-weight:800;font-size:12px;color:#fff;background:var(--wood);border:2px solid var(--gold);border-radius:50%;width:19px;height:19px;display:grid;place-items:center;line-height:1}
.mem.active{transform:scale(1.14);filter:drop-shadow(0 0 7px rgba(255,214,92,.95)) drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.mem{pointer-events:auto;cursor:pointer}
.mem.locked img{filter:grayscale(1) brightness(.6)}
.mem:not(.locked) .lock{display:none}
.mem .cd{position:absolute;inset:6% 6% 8% 6%;border-radius:50%;pointer-events:none;background:conic-gradient(rgba(10,14,34,.62) var(--p,0deg),transparent 0)}
.mem .lock{position:absolute;right:2px;top:2px;font-style:normal;font-size:14px}
#hearts{position:absolute;left:max(12px,env(safe-area-inset-left));top:calc(max(10px,env(safe-area-inset-top)) + clamp(52px,6.8vw,80px) * var(--hui,1));display:flex;gap:3px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
#hearts img{width:calc(clamp(24px,2.6vw,34px) * var(--hui,1));height:auto;display:block}
#hearts img.pop{animation:pop .35s}
@keyframes pop{0%{transform:scale(1.5)}100%{transform:scale(1)}}
#objective{position:absolute;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  max-width:min(520px,52vw);padding:6px 18px 6px 10px;border-radius:14px;
  background:linear-gradient(#f9ecc9,#ecd6a0);border:3px solid var(--wood);box-shadow:0 0 0 2px var(--gold),0 5px 12px rgba(0,0,0,.4);transition:transform .3s}
#objective.flash{animation:objFlash .9s}
@keyframes objFlash{0%,100%{transform:translateX(-50%) scale(1)}30%{transform:translateX(-50%) scale(1.12)}}
#objective img{width:calc(38px * var(--hui,1));height:auto;flex:none}
#objective b{display:block;font-size:calc(11px * var(--hui,1));letter-spacing:.14em;text-transform:uppercase;color:#a0661c;line-height:1}
#objective span{display:block;font-weight:700;font-size:calc(clamp(13px,1.35vw,17px) * var(--hui,1));line-height:1.15;margin-top:2px}
#muteBtn{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));pointer-events:auto;width:calc(42px * var(--hui,1));height:calc(42px * var(--hui,1));border-radius:50%;
  border:3px solid var(--gold);background:radial-gradient(circle at 35% 30%,var(--wood2),var(--wood));font-size:18px;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.45)}
#pauseBtn{position:absolute;right:calc(max(12px,env(safe-area-inset-right)) + 52px * var(--hui,1));top:max(10px,env(safe-area-inset-top));pointer-events:auto;width:calc(42px * var(--hui,1));height:calc(42px * var(--hui,1));border-radius:50%;
  border:3px solid var(--gold);background:radial-gradient(circle at 35% 30%,var(--wood2),var(--wood));font-size:20px;line-height:1;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.45)}
#toast{position:absolute;left:50%;top:22%;transform:translate(-50%,-10px);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;
  padding:10px 24px;border-radius:999px;background:rgba(28,43,74,.92);color:#fff;border:2px solid var(--gold);font-weight:700;font-size:clamp(15px,1.7vw,21px);text-align:center;max-width:86vw;box-shadow:0 6px 18px rgba(0,0,0,.4)}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- hộp thoại ---------- */
#dialog{position:absolute;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom));display:flex;justify-content:center;pointer-events:auto}
#dlgBox{position:relative;width:min(94vw,940px);--u:9px;animation:rise .25s ease-out}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
#dlgBox>img{width:100%;display:block;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4))}
#dlgName{position:absolute;left:11.2%;top:2.4%;width:21%;height:21%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:calc(var(--u)*2.05);color:#7a3d0c;letter-spacing:.02em;white-space:nowrap}
#dlgText{position:absolute;left:11%;right:11.5%;top:29%;bottom:15%;font-weight:600;font-size:calc(var(--u)*2.1);line-height:1.22;color:var(--ink);overflow:hidden}
#dlgFace{position:absolute;left:-4%;bottom:66%;width:15.5%;aspect-ratio:118/123;z-index:2;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));animation:rise .25s ease-out}
#dlgFace canvas{width:100%;height:100%;display:block}
#dlgNext{position:absolute;right:13.5%;bottom:17%;font-size:calc(var(--u)*1.7);color:#b8741f;animation:bob .8s infinite alternate}
@keyframes bob{to{transform:translateY(5px)}}
#prompt{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:6px 18px;border-radius:999px;pointer-events:none;
  background:rgba(28,43,74,.88);color:#fff;border:2px solid var(--gold);font-weight:700;font-size:clamp(13px,1.4vw,18px);white-space:nowrap}
#prompt kbd{background:var(--gold);color:var(--wood-dark);padding:0 8px;border-radius:6px;margin-right:6px;font-family:var(--font);font-weight:800}

/* ---------- cảm ứng ---------- */
#touch{position:absolute;inset:0;pointer-events:none}
#touch.off{visibility:hidden}
#joy{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));width:calc(150px * var(--tui,1));height:calc(150px * var(--tui,1));pointer-events:auto;touch-action:none}
#joy img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:auto;opacity:.92}
#joy #joyThumb{width:54%}
.tbtn{position:absolute;pointer-events:auto;border:0;background:none;padding:0;touch-action:none;width:calc(96px * var(--tui,1));filter:drop-shadow(0 4px 5px rgba(0,0,0,.5));transition:transform .08s}
.tbtn img{width:100%;display:block}
.tbtn:active,.tbtn.down{transform:scale(.9)}
#btnAtk{right:max(20px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:calc(104px * var(--tui,1))}
#btnTalk{right:calc(max(20px,env(safe-area-inset-right)) + 112px * var(--tui,1));bottom:max(16px,env(safe-area-inset-bottom))}
#btnSw{right:max(24px,env(safe-area-inset-right));bottom:calc(max(24px,env(safe-area-inset-bottom)) + 122px * var(--tui,1));width:calc(72px * var(--tui,1))}
@media (max-height:480px){
  #dlgBox{width:min(80vw,700px)}
  #joy{width:calc(122px * var(--tui,1));height:calc(122px * var(--tui,1));bottom:12px}.tbtn{width:calc(78px * var(--tui,1))}#btnAtk{width:calc(86px * var(--tui,1));bottom:16px}#btnTalk{right:calc(max(20px,env(safe-area-inset-right)) + 96px * var(--tui,1));bottom:8px}#btnSw{width:calc(58px * var(--tui,1));bottom:calc(104px * var(--tui,1))}
}

/* ---------- tải ---------- */
#loading{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,#2b4170,#101a30);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:30}
.ld-title{font-weight:800;font-size:clamp(34px,6vw,64px);letter-spacing:.06em;color:var(--gold);text-shadow:0 3px 0 var(--wood-dark),0 0 24px rgba(246,207,99,.35)}
.ld-bar{width:min(320px,70vw);height:16px;border-radius:99px;background:rgba(0,0,0,.4);border:2px solid var(--gold);overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .15s}
.ld-txt{color:#cdd8f0;font-weight:600;font-size:14px}

/* ---------- màn tiêu đề ---------- */
#title{position:absolute;inset:0;z-index:20;overflow:hidden;background:#101a30}
.t-bg{position:absolute;inset:-3%;background:url(img/title.webp) center 36%/cover no-repeat;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.07) translate(-1.2%,.8%)}}
.t-shade{position:absolute;inset:0;background:linear-gradient(rgba(8,18,50,.55) 0%,rgba(8,18,50,0) 38%,rgba(8,18,50,0) 62%,rgba(8,18,50,.62) 100%)}
.t-logo{position:absolute;left:0;right:0;top:clamp(6px,2vh,30px);text-align:center;animation:logoIn 1.1s cubic-bezier(.2,.9,.3,1.1)}
@keyframes logoIn{from{opacity:0;transform:translateY(-30px) scale(.9)}to{opacity:1;transform:none}}
.t-logoimg{display:block;margin:0 auto;width:min(60vw,640px);max-height:27vh;object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(20,10,40,.55)) drop-shadow(0 0 22px rgba(255,214,120,.35));animation:floaty 4.2s ease-in-out infinite alternate}
@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.t-bottom{position:absolute;left:0;right:0;bottom:clamp(8px,2.5vh,30px);display:flex;flex-direction:column;align-items:center;gap:8px}
.t-hint{color:#fff;font-weight:600;font-size:clamp(11px,1.15vw,15px);text-shadow:0 2px 6px #000;background:rgba(10,18,44,.5);padding:6px 16px;border-radius:99px;text-align:center;max-width:92vw}
.wood-btn{border:4px solid var(--gold);border-radius:18px;padding:12px 42px;font-weight:800;font-size:clamp(18px,2.2vw,28px);letter-spacing:.06em;color:#fff6d6;
  background:linear-gradient(#a56a36,#6a4021 60%,#58341a);text-shadow:0 2px 0 #3a200d;box-shadow:0 6px 0 #3a200d,0 12px 22px rgba(0,0,0,.45);transition:transform .1s,box-shadow .1s}
.wood-btn:hover{filter:brightness(1.1)}
.wood-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #3a200d,0 6px 12px rgba(0,0,0,.4)}
.t-btns{display:flex;gap:clamp(10px,2vw,22px);flex-wrap:wrap;justify-content:center}
.t-btns .wood-btn{padding:10px clamp(20px,3vw,40px);line-height:1.05;text-align:center}
.t-btns .wood-btn small{display:block;font-size:.5em;font-weight:700;letter-spacing:.04em;opacity:.9;margin-top:3px}
.wood-btn.alt2{background:linear-gradient(#4f8a5a,#2f6a3e 60%,#255632)}
#playBtn{animation:pulse 1.8s ease-in-out infinite}
.t-menu{flex-direction:column;align-items:stretch;gap:12px;width:min(300px,78vw)}
.t-menu .wood-btn{font-size:clamp(20px,2.4vw,28px);padding:10px 20px}
@keyframes pulse{50%{transform:scale(1.05)}}

/* ---------- chạm để vào game ---------- */
#tap{position:absolute;inset:0;z-index:22;overflow:hidden;background:#101a30;cursor:pointer}
.tap-bg{position:absolute;inset:-3%;background:url(img/title.webp) center 36%/cover no-repeat;filter:blur(1.5px) brightness(.88);animation:kb 26s ease-in-out infinite alternate}
.tap-txt{position:absolute;left:0;right:0;bottom:16vh;text-align:center;color:#fff6d6;font-weight:800;font-size:clamp(22px,3.4vw,40px);letter-spacing:.08em;text-shadow:0 3px 0 #3a200d,0 0 24px rgba(255,214,120,.7);animation:tapPulse 1.5s ease-in-out infinite}
@keyframes tapPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.fly{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff3b0;box-shadow:0 0 10px 3px rgba(255,230,140,.85);pointer-events:none;animation:flyUp var(--d,9s) linear infinite;opacity:0}
@keyframes flyUp{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:.95}85%{opacity:.8}100%{transform:translate(var(--dx,30px),-70vh) scale(1.1);opacity:0}}

/* ---------- hoàn thành ---------- */
#end{position:absolute;inset:0;z-index:25;background:rgba(10,18,44,.72);display:grid;place-items:center;backdrop-filter:blur(3px);animation:fade .6s}
@keyframes fade{from{opacity:0}}
.end-card{position:relative;width:min(560px,92vw);padding:38px 30px 22px;text-align:center;border-radius:22px;background:linear-gradient(#f9ecc9,#ecd6a0);border:5px solid var(--wood);box-shadow:0 0 0 3px var(--gold),0 20px 50px rgba(0,0,0,.55);animation:rise .6s cubic-bezier(.2,.9,.3,1.2)}
.end-ribbon{position:absolute;left:50%;top:-18px;transform:translateX(-50%);padding:4px 30px;border-radius:8px;background:linear-gradient(#3b5aa0,#27407a);color:var(--gold);font-weight:800;letter-spacing:.2em;border:3px solid var(--gold)}
.end-card h2{margin:6px 0 0;font-size:clamp(26px,4vw,38px);color:var(--wood-dark);line-height:1.1}
.end-sub{font-weight:800;font-size:22px;color:#c7761a;letter-spacing:.14em;text-transform:uppercase}
.end-card p{margin:12px 8px;font-weight:600;font-size:clamp(14px,1.8vw,17px);line-height:1.35}
.end-stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:10px 0 14px}
.end-stats div{background:rgba(106,64,33,.12);border:2px solid rgba(106,64,33,.35);border-radius:12px;padding:6px 14px;font-weight:700;min-width:104px}
.end-stats small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a0661c}
.end-btns{display:flex;gap:12px;justify-content:center;margin:8px 0 12px}
.end-btns{flex-wrap:wrap}
.end-btns .wood-btn{font-size:20px;padding:9px 26px}
.end-next{font-weight:700;font-size:13px;color:#7a5a30;opacity:.85}

/* ---------- tạm dừng ---------- */
#pause{position:absolute;inset:0;z-index:28;background:rgba(10,18,44,.6);display:grid;place-items:center;backdrop-filter:blur(2px);animation:fade .25s}
.pause-card{position:relative;width:min(380px,90vw);padding:34px 26px 18px;text-align:center;border-radius:22px;background:linear-gradient(#f9ecc9,#ecd6a0);border:5px solid var(--wood);box-shadow:0 0 0 3px var(--gold),0 20px 50px rgba(0,0,0,.55);animation:rise .3s cubic-bezier(.2,.9,.3,1.2)}
.pause-card h2{margin:6px 0 14px;font-size:clamp(22px,3.4vw,30px);color:var(--wood-dark);line-height:1.1}
.pause-btns{display:flex;flex-direction:column;gap:10px}
.pause-btns .wood-btn{font-size:clamp(16px,2vw,20px);padding:9px 18px;letter-spacing:.03em;width:100%}
.wood-btn.alt{background:linear-gradient(#8a7152,#5f4a31 60%,#4d3b26)}
.wood-btn.warn{background:linear-gradient(#d4623a,#a63b1c 60%,#8a2f15);animation:pulse .7s ease-in-out infinite}
.pause-hint{margin-top:12px;font-weight:700;font-size:13px;color:#7a5a30;opacity:.85}
@media (max-height:480px){.pause-card{padding:26px 22px 12px}.pause-btns{gap:6px}.pause-btns .wood-btn{padding:6px 14px;font-size:15px}.pause-card h2{margin-bottom:8px}}
#rotate{position:absolute;inset:0;z-index:40;background:rgba(10,18,44,.92);color:#fff;display:none;place-items:center;text-align:center;font-weight:700;font-size:20px;padding:24px;line-height:1.4}
@media (orientation:portrait) and (max-width:700px){#rotate:not(.hidden){display:grid}}
@media (prefers-reduced-motion:reduce){.t-bg,.tap-bg,#startBtn,.fly{animation:none}}

/* ---------- menu: chọn màn / cài đặt / thoát ---------- */
.t-panel{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:rgba(8,14,36,.55);backdrop-filter:blur(2px);animation:fade .3s}
.panel-card{position:relative;width:min(420px,90vw);padding:36px 26px 20px;text-align:center;border-radius:22px;background:linear-gradient(#f9ecc9,#ecd6a0);border:5px solid var(--wood);box-shadow:0 0 0 3px var(--gold),0 20px 50px rgba(0,0,0,.55);animation:rise .3s cubic-bezier(.2,.9,.3,1.2)}
.panel-card.lv-card-wrap{width:min(780px,94vw)}
.panel-back{margin-top:14px;font-size:clamp(16px,2vw,20px);padding:8px 26px}
.panel-note{margin-top:12px;font-weight:700;font-size:13px;color:#7a5a30;opacity:.9}
.set-btns .wood-btn{font-size:clamp(16px,2vw,20px);padding:10px 18px;letter-spacing:.03em;width:100%}
.bye-h{margin:6px 0 8px;font-size:clamp(22px,3vw,28px);color:var(--wood-dark);line-height:1.15}
.bye-p{margin:0 6px;font-weight:600;line-height:1.4}
.lv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1.4vw,14px);margin-top:6px}
.lv-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:clamp(120px,22vh,170px);padding:10px 6px;border-radius:16px;border:4px solid var(--gold);font-family:inherit;
  background:linear-gradient(#a56a36,#6a4021 60%,#58341a);color:#fff6d6;text-shadow:0 2px 0 #3a200d;box-shadow:0 5px 0 #3a200d,0 10px 18px rgba(0,0,0,.35);transition:transform .1s,filter .1s}
.lv-card:hover:not(.locked):not(.soon){filter:brightness(1.12);transform:translateY(-3px)}
.lv-card .n{font-size:clamp(30px,5vw,50px);font-weight:800;line-height:1}
.lv-card .t{font-size:clamp(11px,1.3vw,14px);font-weight:700;line-height:1.15}
.lv-card .s{font-size:12px;font-weight:800;letter-spacing:.06em;opacity:.95}
.lv-card.done .s{color:#aef0a8}
.lv-card.cur{animation:pulse 1.8s ease-in-out infinite}
.lv-card.locked,.lv-card.soon{cursor:not-allowed}
.lv-card.locked{background:linear-gradient(160deg,#cfe6fb,#8fb4d8 55%,#6e92b8);border-color:#e9f6ff;color:#27425f;text-shadow:0 1px 0 #fff;box-shadow:0 5px 0 #3d5a78,0 0 16px rgba(190,230,255,.6) inset,0 10px 18px rgba(0,0,0,.35);filter:saturate(.7)}
.lv-card.locked::before{content:"";position:absolute;inset:0;border-radius:11px;background:repeating-linear-gradient(115deg,rgba(255,255,255,.35) 0 2px,transparent 2px 14px);pointer-events:none}
.lv-card.locked .ico{font-size:clamp(22px,3vw,32px);filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.lv-card.soon{background:linear-gradient(#7a6a58,#5a4c3d 60%,#463b2f);filter:grayscale(.3)}
.lv-card.thaw{animation:thaw 1.4s ease-out}
@keyframes thaw{0%{filter:saturate(.7) brightness(1.5);transform:scale(.9)}40%{transform:scale(1.12);box-shadow:0 0 30px 8px rgba(190,235,255,.9)}100%{transform:none}}
@media (max-width:640px){.lv-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-height:480px){.panel-card{padding:26px 20px 12px}.lv-card{min-height:92px}.set-btns{gap:6px}.t-menu{gap:8px}.t-menu .wood-btn{padding:6px 14px;font-size:18px}}

/* ---------- chế độ DEV ---------- */
#devBtn{position:absolute;left:6px;top:46%;z-index:60;padding:6px 9px;border-radius:10px;border:2px solid #ff9d9d;background:rgba(120,20,30,.85);color:#fff;font-weight:800;font-size:12px;letter-spacing:.08em;opacity:.8}
#devPanel{position:absolute;inset:0;z-index:61;display:grid;place-items:center;background:rgba(8,14,36,.6)}
.dev-card{width:min(360px,92vw);max-height:92vh;overflow:auto;padding:26px 20px 14px;border-radius:18px;background:linear-gradient(#f9ecc9,#ecd6a0);border:5px solid #8a2f15;box-shadow:0 0 0 3px #ff9d9d,0 20px 50px rgba(0,0,0,.55);text-align:center}
.dev-card h3{margin:0 0 10px;color:#8a2f15;letter-spacing:.14em}
.dev-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:8px}
.dev-card button{border:3px solid var(--gold);border-radius:10px;padding:8px 6px;font-weight:800;font-size:14px;color:#fff6d6;background:linear-gradient(#8a7152,#5f4a31);text-shadow:0 1px 0 #3a200d}
.dev-card button.on{background:linear-gradient(#4f8a5a,#2f6a3e)}
.dev-card .wide{display:block;width:100%;margin-top:6px}
.dev-note{margin-top:8px;font-size:12px;font-weight:700;color:#7a5a30}

/* điện thoại dọc: khung mục tiêu xuống dưới hàng chân dung/tim cho khỏi đè nhau */
@media (orientation:portrait) and (max-width:700px){
  #objective{top:calc(max(10px,env(safe-area-inset-top)) + 84px);max-width:92vw}
  #toast{top:30%}
}

/* điện thoại ngang: thông báo nhỏ gọn, nằm ngay dưới khung mục tiêu để không choán màn hình */
html[data-layout="phone"] #toast{top:calc(max(10px,env(safe-area-inset-top)) + 58px * var(--hui,1));padding:4px 14px;font-size:calc(clamp(15px,1.7vw,21px) * .7);max-width:62vw;border-width:2px;box-shadow:0 3px 10px rgba(0,0,0,.4)}

/* điện thoại: khung mục tiêu thu thành 1 cuộn giấy nhỏ cạnh nút ☰, bấm vào mới mở dòng hướng dẫn */
html[data-layout="phone"] #objective,html[data-layout="portrait"] #objective{
  left:auto;transform:none;top:max(10px,env(safe-area-inset-top));right:calc(max(12px,env(safe-area-inset-right)) + 104px * var(--hui,1));
  width:calc(42px * var(--hui,1));height:calc(42px * var(--hui,1));padding:0;gap:0;max-width:none;border-radius:50%;justify-content:center;
  pointer-events:auto;cursor:pointer;border:3px solid var(--gold);background:radial-gradient(circle at 35% 30%,#fbefcf,#e3c58a);box-shadow:0 3px 8px rgba(0,0,0,.45)}
html[data-layout="phone"] #objective img,html[data-layout="portrait"] #objective img{width:calc(27px * var(--hui,1))}
html[data-layout="phone"] #objective div,html[data-layout="portrait"] #objective div{display:none}
html[data-layout="phone"] #objective.flash,html[data-layout="portrait"] #objective.flash{animation:objPulse .9s}
@keyframes objPulse{0%,100%{transform:scale(1)}30%{transform:scale(1.28)}}
html[data-layout="phone"] #objective.open,html[data-layout="portrait"] #objective.open{
  top:calc(max(10px,env(safe-area-inset-top)) + 50px * var(--hui,1));right:max(12px,env(safe-area-inset-right));width:auto;height:auto;max-width:min(330px,80vw);
  border-radius:14px;padding:5px 14px 5px 8px;gap:8px;justify-content:flex-start;border:3px solid var(--wood);background:linear-gradient(#f9ecc9,#ecd6a0);box-shadow:0 0 0 2px var(--gold),0 5px 12px rgba(0,0,0,.4)}
html[data-layout="phone"] #objective.open div,html[data-layout="portrait"] #objective.open div{display:block}
html[data-layout="phone"] #objective.open img,html[data-layout="portrait"] #objective.open img{width:calc(30px * var(--hui,1))}
html[data-layout="phone"] #objective.open span,html[data-layout="portrait"] #objective.open span{font-size:calc(14px * var(--hui,1))}
html[data-layout="phone"] #toast{top:calc(max(10px,env(safe-area-inset-top)) + 50px * var(--hui,1))}

/* chế độ chơi Dễ / Khó */
.mode-btn{display:block;margin:10px auto 0;padding:6px 18px;border-radius:999px;border:3px solid var(--gold);font-weight:800;font-size:15px;color:#fff6d6;
  background:linear-gradient(#5f9a62,#3d7a45);text-shadow:0 1px 0 #1d3b1f;box-shadow:0 3px 8px rgba(0,0,0,.35);cursor:pointer}
.mode-btn.normal{background:linear-gradient(#5a8a5a,#2f5a35);text-shadow:0 1px 0 #10260f}
.mode-btn.hard{background:linear-gradient(#b0583a,#7d3320);text-shadow:0 1px 0 #3a120a}
.mode-btn.insane{background:linear-gradient(#8a2fb0,#4a1470);text-shadow:0 1px 0 #1c0530}
.mode-btn:active{transform:translateY(1px)}
html[data-mode="normal"] #objective,html[data-mode="hard"] #objective,html[data-mode="insane"] #objective{display:none !important}
@media (max-height:480px){.mode-btn{margin-top:5px;padding:3px 14px;font-size:13px}.panel-note{margin-top:5px}}

/* nút ☰ và loa dùng ảnh gỗ + hoa cho đồng bộ với các nút khác */
#pauseBtn,#muteBtn{background:none;border:0;box-shadow:none;padding:0;width:calc(50px * var(--hui,1));height:calc(50px * var(--hui,1));font-size:0;cursor:pointer;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
#pauseBtn img,#muteBtn img{width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
#pauseBtn:active,#muteBtn:active{transform:scale(.93)}
#muteBtn{right:max(8px,env(safe-area-inset-right))}
#pauseBtn{right:calc(max(8px,env(safe-area-inset-right)) + 54px * var(--hui,1))}
html[data-layout="phone"] #objective,html[data-layout="portrait"] #objective{right:calc(max(8px,env(safe-area-inset-right)) + 108px * var(--hui,1));
  width:calc(44px * var(--hui,1));height:calc(44px * var(--hui,1));background:radial-gradient(circle at 35% 30%,#a8793f,#6b4423);box-shadow:0 3px 6px rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,236,170,.35)}
html[data-layout="phone"] #objective img,html[data-layout="portrait"] #objective img{width:calc(30px * var(--hui,1))}
html[data-layout="phone"] #objective.open,html[data-layout="portrait"] #objective.open{top:calc(max(10px,env(safe-area-inset-top)) + 54px * var(--hui,1));right:max(10px,env(safe-area-inset-right))}
html[data-layout="phone"] #toast{top:calc(max(10px,env(safe-area-inset-top)) + 54px * var(--hui,1))}

/* ===== Điện thoại ngang / màn hình thấp: thẻ kết màn, chọn màn, menu gọn lại để không bị tràn ===== */
@media (max-height:420px){
  #end{display:flex;overflow:auto;padding:8px}
  .end-card{margin:auto;width:min(560px,94vw);padding:22px 18px 8px;border-width:4px;border-radius:16px}
  .end-ribbon{top:-13px;padding:1px 20px;font-size:12px;border-width:2px}
  .end-card h2{font-size:21px;margin:2px 0 0}
  .end-sub{font-size:12px}
  .end-card p{margin:4px 6px;font-size:12px;line-height:1.25}
  .end-stats{gap:6px;margin:5px 0 6px}
  .end-stats div{padding:2px 8px;min-width:76px;font-size:13px;border-radius:9px}
  .end-stats small{font-size:9px}
  .end-btns{gap:8px;margin:4px 0 4px}
  .end-btns .wood-btn{font-size:14px;padding:4px 14px;border-width:3px;border-radius:12px}
  .end-next{font-size:10.5px}
  .t-panel{display:flex;overflow:auto;padding:6px}
  .panel-card,.panel-card.lv-card-wrap{margin:auto;width:min(780px,96vw);padding:20px 14px 8px;border-width:4px;border-radius:16px}
  .panel-card:not(.lv-card-wrap){width:min(420px,90vw)}
  .lv-grid{gap:6px;margin-top:2px}
  .lv-card{min-height:66px;padding:3px 3px;gap:1px;border-width:3px;border-radius:12px}
  .lv-card .n{font-size:24px}.lv-card .t{font-size:10px}.lv-card .s{font-size:10px}.lv-card.locked .ico{font-size:17px}
  .mode-btn{margin-top:4px;padding:2px 12px;font-size:12px;border-width:2px}
  .panel-note{margin-top:3px;font-size:11px}
  .panel-back{margin-top:6px}
  .panel-card .wood-btn.panel-back,.panel-back{font-size:14px;padding:3px 16px;border-width:3px}
  .set-btns{gap:4px}.set-btns .wood-btn{font-size:14px;padding:4px 14px;border-width:3px}
  .bye-h{font-size:18px;margin:4px 0}.bye-p{font-size:12px;margin:4px 0}
  .pause-card{padding:20px 20px 8px}
  /* màn hình đầu: menu dọc nhỏ gọn nằm bên phải để thấy nhân vật */
  .t-logoimg{max-height:31vh;width:min(44vw,420px)}
  .t-bottom{left:auto;right:max(12px,env(safe-area-inset-right));top:37%;bottom:auto;width:158px;align-items:stretch}
  .t-menu{width:100%;gap:6px}
  .t-menu .wood-btn{font-size:15px;padding:4px 8px;border-width:3px;border-radius:12px;letter-spacing:.03em}
  .t-hint{display:none}
}
/* khung mục tiêu mở ra nằm dưới thông báo, không chồng nhau */
html[data-layout="phone"] #objective.open{top:calc(max(10px,env(safe-area-inset-top)) + 88px * var(--hui,1))}

/* ===== Điện thoại dọc: hộp thoại to và chữ to; thông báo nhỏ gọn ngay dưới hàng tim ===== */
html[data-layout="portrait"] #dlgBox{width:calc(100vw - 14px);max-width:600px;aspect-ratio:2.9/1}
html[data-layout="portrait"] #dlgBox>img{height:100%;object-fit:fill}
html[data-layout="portrait"] #dlgText{font-size:17px;line-height:1.25}
html[data-layout="portrait"] #dlgName{font-size:13px}
html[data-layout="portrait"] #dlgNext{font-size:14px}
html[data-layout="portrait"] #toast{left:max(8px,env(safe-area-inset-left));top:calc(max(10px,env(safe-area-inset-top)) + 74px * var(--hui,1));transform:translate(0,-6px);
  text-align:left;padding:3px 11px;font-size:12px;line-height:1.3;border-radius:12px;border-width:2px;max-width:min(64vw,290px);box-shadow:0 3px 8px rgba(0,0,0,.4)}
html[data-layout="portrait"] #toast.show{transform:none}
html[data-layout="portrait"] #objective.open{top:calc(max(10px,env(safe-area-inset-top)) + 122px * var(--hui,1));max-width:min(330px,92vw)}