/* Giao diện huyền bí: tím thẫm + lục lam + vàng nhạt */
:root{--gold:#b79cff;--red:#8a4dff;--panel:rgba(14,10,28,.82);--line:rgba(160,130,255,.28);--text:#e9e6f5;--mute:#9a96b8}
body::before{background:radial-gradient(ellipse at 50% -10%,#2a1260 0,#0d0820 45%,#030210 100%)!important}
#scene{box-shadow:0 18px 60px rgba(0,0,0,.75),0 0 60px rgba(138,77,255,.28)!important}
#sv svg{filter:hue-rotate(245deg) saturate(.85)}
#scene::after{content:'';position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:screen;opacity:.35;
 background:radial-gradient(40% 30% at 20% 70%,rgba(80,230,200,.35),transparent),radial-gradient(45% 35% at 80% 60%,rgba(150,90,255,.4),transparent);animation:fog 22s ease-in-out infinite alternate}
@keyframes fog{to{transform:translate(8%,-6%) scale(1.15)}}
#obj,#tt{text-shadow:4px 4px 0 #5b2bd0,0 0 30px rgba(138,77,255,.9)!important}
#tt{text-shadow:0 0 24px rgba(138,77,255,.6)!important}
#card{border-image:linear-gradient(135deg,#b79cff,transparent 40%,#4de3c8) 1;border-radius:0;box-shadow:0 0 40px rgba(110,70,220,.25)}
#tx{border-left-color:#4de3c8!important}
.sm{background:linear-gradient(180deg,#c6b0ff,#7a55e0)!important;color:#0d0820!important}
.ch:hover{box-shadow:0 0 24px rgba(138,77,255,.4)!important}
.ch.ev{border-color:#4de3c8!important;color:#4de3c8!important}
.box,.mh{background:#0f0a22!important}
/* minigame */
.mgr{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;margin:6px 0}
.mgi{text-align:center;color:var(--gold);letter-spacing:.2em;font-size:.85em;text-transform:uppercase}
.rune{width:62px;height:62px;border-radius:14px;font-size:1.7rem;color:#e9e6f5;background:rgba(120,80,255,.12);border:1px solid var(--line);transition:.2s}
.rune:hover{box-shadow:0 0 18px #8a4dff;transform:translateY(-2px)}
.rune.big{display:grid;place-items:center;width:84px;height:84px;font-size:2.4rem;box-shadow:0 0 34px #4de3c8;animation:fd .4s}
.rune.ok{background:rgba(77,227,200,.3)}.rune.no{background:rgba(255,60,90,.4)}
/* ===== Responsive điện thoại ===== */
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.ch,.ib,.sm,.btn,.rune{touch-action:manipulation}
@media (hover:none){.ch:hover{transform:none}.rune:hover{transform:none}}
@media (max-width:720px){
 #app{padding:8px}
 #bar{flex-wrap:wrap;gap:6px;padding:6px 8px}
 #logo{font-size:.9rem}
 #hud{order:3;flex:1 1 100%;font-size:.74rem;gap:8px}
 #scene{height:clamp(150px,28dvh,240px);border-radius:12px}
 #card{padding:16px 14px;border-radius:12px;margin-top:10px}
 #tx{padding-left:12px}
 .ch{min-height:48px;padding:11px 12px;gap:10px}
 #op{margin:12px 0 40px}
 .ib{width:42px;height:42px}
 #obj{font-size:clamp(28px,11vw,56px)}
 .kp{width:100%;max-width:190px}
 .box{max-height:92dvh;border-radius:14px}
 .mh{padding:12px 14px}.mb{padding:6px 14px 18px}
}
@media (max-width:420px){
 :root{--fs:15px}
 .rune{width:48px;height:48px;font-size:1.35rem}
 .rune.big{width:68px;height:68px;font-size:2rem}
 .mgr{gap:7px}
 #cap{font-size:.62rem;left:10px}
}
@media (max-height:480px) and (orientation:landscape){#scene{height:34dvh}}

#sv img.ph[src$="lan.jpg"]{object-position:50% 5%}
#sv img.ph[src$="tung.jpg"]{object-position:50% 76%}
#sv img.ph[src$="phong.jpg"],#sv img.ph[src$="phong2.jpg"]{object-position:50% 43%}