*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;background:linear-gradient(160deg,#e0f2fe,#ede9fe);min-height:100vh;color:#1e293b}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#4f46e5;color:#fff}
.top a{color:#fff;text-decoration:none;font-weight:600}
.top nav a{margin-left:16px}
.wrap{position:relative;z-index:1;max-width:640px;margin:20px auto;padding:0 14px}

/* ===== Aura: GAMBAR jadi latar HEADER (bukan latar halaman) ===== */
.topbar.tb2.aura-on{position:relative;overflow:hidden;border-color:transparent;
  background-size:cover;background-position:center;background-repeat:no-repeat}
/* Overlay tipis supaya nama/HP/XP tetap terbaca di atas gambar apa pun. */
.topbar.tb2.aura-on::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.5))}
.topbar.tb2.aura-on::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.topbar.tb2.aura-on > *{position:relative;z-index:1}
.topbar.tb2.aura-on .tb-name,.topbar.tb2.aura-on .tb-meta,
.topbar.tb2.aura-on .grade,.topbar.tb2.aura-on .bar-label,.topbar.tb2.aura-on .bar-val{text-shadow:0 1px 2px rgba(255,255,255,.85)}
.tb2 .fx.aura{font-weight:700}
.card{background:#fff;border-radius:16px;padding:18px;margin-bottom:16px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.row{display:flex;justify-content:space-between;margin-bottom:8px}
.label{font-size:.85rem;color:#64748b;margin-top:8px}
.xpbar{background:#e2e8f0;border-radius:99px;height:12px;overflow:hidden}
.xpbar div{background:#22c55e;height:100%}
.hpblocks{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.hpblocks span{width:22px;height:16px;border-radius:4px}
.hpblocks .full{background:#ef4444}.hpblocks .empty{background:#e2e8f0}
.btn{display:inline-block;background:#4f46e5;color:#fff;border:0;border-radius:12px;padding:12px 18px;font-size:1rem;cursor:pointer;text-decoration:none;font-weight:600}
.btn:hover{background:#4338ca}.btn.green{background:#16a34a}.btn.gray{background:#94a3b8}
.btn.block{display:block;width:100%;text-align:center}
input,select{width:100%;padding:11px;margin:6px 0 12px;border:1px solid #cbd5e1;border-radius:10px;font-size:1rem}
.flash{padding:12px;border-radius:10px;margin-bottom:14px;font-weight:600}
.flash.ok{background:#dcfce7;color:#166534}.flash.err{background:#fee2e2;color:#991b1b}
.arena{display:flex;justify-content:space-between;text-align:center;gap:10px}
.arena .char{flex:1}.arena .emoji{font-size:3.2rem}
.bubble{background:#fffbeb;border:2px solid #f59e0b;border-radius:14px;padding:14px;margin:12px 0;font-size:1.15rem;color:#1f2937;box-shadow:0 4px 14px rgba(15,23,42,.18)}
.opt{display:block;width:100%;text-align:left;background:#f1f5f9;border:2px solid #cbd5e1;border-radius:12px;padding:13px;margin-bottom:10px;font-size:1.05rem;cursor:pointer;color:#1f2937}
.opt:hover{background:#e0e7ff;border-color:#6366f1}
.opt.reveal{background:#dcfce7;border-color:#16a34a}
.weapons{margin:4px 0 8px}
.weapons .label{margin-bottom:6px}
.weapons .wpn{display:inline-block;margin:0 6px 6px 0}
.weapons .wpn .btn{padding:9px 13px;font-size:.92rem}
.weapons .qty{opacity:.75;font-weight:400}
.hint{background:#eef2ff;border:2px solid #6366f1;border-radius:12px;padding:10px 12px;margin:8px 0;color:#3730a3}
.result.good{border-left:6px solid #16a34a}.result.bad{border-left:6px solid #dc2626}
.item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #e2e8f0}
.item:last-child{border:0}.item form{margin:0}
.center{text-align:center}.muted{color:#64748b;font-size:.9rem}
.hptext{font-size:1.5rem;font-weight:700;color:#dc2626}
.statsflex{display:flex;gap:14px;align-items:center}
.statsinfo{flex:1}
.avatarbox{background:linear-gradient(#e0f2fe,#fef9c3);border-radius:14px;padding:6px}
.avatar{display:block;margin:0 auto}
.arena .emoji svg{margin:0 auto}
.slot-title{margin:16px 0 4px;color:#4f46e5}
.swatch{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid #94a3b8;vertical-align:middle;margin-right:6px}
.gradeform{margin:8px 0;text-align:left}.gradeform select{margin-bottom:6px}

/* ===== Lorong sekolah ===== */
.school{position:relative;background:#fffbeb;border:3px solid #92400e;border-radius:12px;padding:0 6px 8px;margin-bottom:12px;overflow:hidden}
.roof{background:#b45309;color:#fff;text-align:center;font-weight:700;margin:0 -6px 6px;padding:8px}
.flabel{font-size:.8rem;color:#92400e;font-weight:700;margin:6px 0 2px}
.floor{display:grid;grid-template-columns:34px repeat(6,minmax(0,1fr));gap:6px;align-items:end;border-bottom:6px solid #a16207;padding:0 0 0;margin-bottom:6px}
.floor.n2{grid-template-columns:34px repeat(2,minmax(0,1fr))}
.floor.n3{grid-template-columns:34px repeat(3,minmax(0,1fr))}
.floor.n4{grid-template-columns:34px repeat(4,minmax(0,1fr))}
.floor.n5{grid-template-columns:34px repeat(5,minmax(0,1fr))}
.floor.n6{grid-template-columns:34px repeat(6,minmax(0,1fr))}
.floor.n7{grid-template-columns:34px repeat(7,minmax(0,1fr))}
.floor.solo{grid-template-columns:34px minmax(0,1fr)}
.floor.solo .door{justify-self:center}
.floor>.door{min-width:0;max-width:100%}
.stairs{font-size:1.7rem;text-align:center;align-self:end;line-height:1;padding-bottom:4px}
.flabel.spooky{color:#7f1d1d;font-weight:800;text-shadow:0 0 8px rgba(239,68,68,.35)}
.door{display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;margin:0 0 -1px;--c:#22c55e;text-decoration:none;color:inherit}
.door:disabled{cursor:not-allowed}
.door.locked{opacity:.5}
.door.locked .frame{background:#e5e7eb;border-color:#94a3b8}
.door.locked .leaf{background:#9ca3af}
.door.sidang{--c:#450a0a}
.door.sidang .frame{background:#1e1b2e;border-color:#000;animation:doorGlow 2.8s ease-in-out infinite}
.door.sidang .plate{background:#7f1d1d;color:#fecaca;border-color:#450a0a;text-shadow:0 0 6px rgba(239,68,68,.8)}
.door.sidang .leaf{background:linear-gradient(#4c0519,#1a0202)}
.door.sidang .leaf b{color:#ef4444;font-size:1.7rem;text-shadow:0 0 10px #ef4444,0 0 22px #b91c1c}
.door.sidang .knob{background:#fca5a5;border-color:#7f1d1d}
@keyframes doorGlow{0%,100%{box-shadow:0 0 0 1px #7f1d1d,0 0 12px rgba(239,68,68,.4)}50%{box-shadow:0 0 0 2px #b91c1c,0 0 26px rgba(239,68,68,.9)}}
.door.t1{--c:#22c55e}.door.t2{--c:#84cc16}.door.t3{--c:#eab308}.door.t4{--c:#f97316}.door.t5{--c:#dc2626}.door.t6{--c:#7f1d1d}
.plate{font-size:.68rem;font-weight:700;background:#fff;border:1px solid #cbd5e1;border-radius:6px;padding:1px 4px;margin-bottom:3px;white-space:normal;text-align:center;line-height:1.05;max-width:100%;overflow-wrap:anywhere;color:#334155}
.frame{position:relative;display:block;width:100%;max-width:70px;height:96px;background:#fde68a;border:3px solid #78350f;border-bottom:0;border-radius:8px 8px 0 0;perspective:400px}
.dark{position:absolute;inset:0;background:#1e293b;border-radius:5px 5px 0 0}
.leaf{position:absolute;inset:0;background:var(--c);border-radius:5px 5px 0 0;transform-origin:left center;transition:transform .45s;display:flex;align-items:center;justify-content:center}
.leaf b{color:#fff;font-size:1.5rem;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.knob{position:absolute;right:6px;top:52%;width:7px;height:7px;border-radius:50%;background:#fde047;border:1px solid #92400e}
.door:not(:disabled):hover .leaf{transform:rotateY(-20deg)}
.door.open .leaf{transform:rotateY(-75deg)}
.door.current .frame{box-shadow:0 0 0 3px #4f46e5,0 0 12px #6366f1}
.door.current .plate{background:#4f46e5;color:#fff;border-color:#4f46e5}
.walker{position:absolute;z-index:5;pointer-events:none;left:0;top:0}
.walker .flip.left{transform:scaleX(-1)}
.walker.walking .bob{animation:bob .32s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}

.room.t1{background:linear-gradient(#ecfccb,#fef9c3)}
.room.t2{background:linear-gradient(#dbeafe,#e0f2fe)}
.room.t3{background:linear-gradient(#e2e8f0,#cbd5e1)}
.room.t4{background:linear-gradient(#fdba74,#fb923c);}
.room.t5{background:linear-gradient(#7f1d1d,#450a0a);color:#fff}
.room.t6{background:radial-gradient(circle at 50% 30%,#4c0519,#0b0210);color:#fff}
.room.t5 .muted,.room.t6 .muted{color:#e2e8f0}
.room.t5 .hptext,.room.t6 .hptext{color:#fecaca}
.teacher .aura{animation:pulse 1.6s ease-in-out infinite;transform-origin:50px 90px}
.teacher .orb{animation:pulse 1s ease-in-out infinite;transform-origin:80px 48px}
.teacher.t6{animation:shake .5s infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1px)}75%{transform:translateX(1px)}}
.teacherline{font-style:italic}
@media (max-width:480px){.frame{height:74px;max-width:56px}.leaf b{font-size:1rem}.plate{font-size:.56rem;padding:1px 2px}.stairs{font-size:1.2rem}.floor{gap:3px}.floor.n2{grid-template-columns:24px repeat(2,minmax(0,1fr))}.floor.n3{grid-template-columns:24px repeat(3,minmax(0,1fr))}.floor.n4{grid-template-columns:24px repeat(4,minmax(0,1fr))}.floor.n5{grid-template-columns:24px repeat(5,minmax(0,1fr))}.floor.n6{grid-template-columns:24px repeat(6,minmax(0,1fr))}.floor.n7{grid-template-columns:24px repeat(7,minmax(0,1fr));gap:2px}}

/* ===== Admin ===== */
body.admin .wrap{max-width:1040px}
body.admin .card{padding:16px 18px;border-radius:14px}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:-2px -2px 14px;padding:0 2px 10px;border-bottom:1px solid #f1f5f9;flex-wrap:wrap}
.card-title{margin:0;font-size:1.05rem;font-weight:700;color:#0f172a}
.card-subtitle{margin:4px 0 0;color:#64748b;font-size:.92rem;line-height:1.5}
.admin-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.admin-head h2{margin:0}
.admin-nav{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding:6px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;width:fit-content}
.admin-nav a{text-decoration:none;color:#475569;background:transparent;border-radius:10px;padding:7px 12px;font-weight:600;font-size:.92rem;transition:.15s ease;white-space:nowrap}
.admin-nav a:hover{background:#eef2ff;color:#3730a3}
.admin-nav a.on{background:#4f46e5;color:#fff;border-color:#4f46e5;box-shadow:0 1px 2px rgba(79,70,229,.15)}
.admin-group{position:relative}
.admin-group-btn{cursor:pointer;font:inherit;font-weight:600;font-size:.92rem;color:#475569;background:transparent;border:0;border-radius:10px;padding:7px 12px;white-space:nowrap;transition:.15s ease}
.admin-group-btn:hover{background:#eef2ff;color:#3730a3}
.admin-group-btn.on{background:#4f46e5;color:#fff;box-shadow:0 1px 2px rgba(79,70,229,.15)}
.admin-drop{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:30;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 8px 24px rgba(2,6,23,.12);padding:6px;min-width:200px}
.admin-group.open .admin-drop{display:block}
.admin-drop a{display:block;border-radius:8px;padding:8px 10px}
.admin-drop a.on{background:#4f46e5;color:#fff}
.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 18px}
.admin-grid .full{grid-column:1/-1}
.admin-grid label{display:block;font-size:.88rem;color:#475569;margin-bottom:4px;font-weight:600}
.admin-grid input,.admin-grid select{margin:0}
.admin-actions{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.admin-actions form{margin:0;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.admin-actions input,.admin-actions select{width:auto;margin:0;padding:6px 9px;font-size:.85rem;border-radius:9px;height:auto;line-height:1.2}
.admin-actions .btn.sm{padding:6px 9px}
.filterbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:14px;padding:12px;background:#f8fafc;border:1px solid #eef2f7;border-radius:12px}
.filterbar .fld{display:flex;flex-direction:column;gap:4px;min-width:150px}
.filterbar .fld.grow{flex:1;min-width:200px}
.filterbar .fld label{font-size:.78rem;font-weight:600;color:#64748b;margin:0}
.filterbar .fld input,.filterbar .fld select{margin:0}
.u-actions{display:flex;flex-direction:column;gap:6px;min-width:240px}
.u-actions form{margin:0;display:flex;gap:6px;align-items:center}
.u-actions .u-lbl{flex:0 0 66px;font-size:.78rem;color:#64748b;font-weight:600}
.u-actions input,.u-actions select{flex:1 1 auto;min-width:0;width:auto;margin:0;padding:6px 9px;font-size:.85rem;border-radius:9px;height:auto;line-height:1.2}
.u-actions .btn{flex:0 0 auto}
.btn.sm{padding:6px 10px;font-size:.85rem;border-radius:9px;line-height:1.1}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px 12px;text-align:center;text-decoration:none;color:inherit;display:block;transition:.15s ease}
.stat:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(15,23,42,.06);background:#fff}
.stat b{display:block;font-size:1.8rem;color:#4f46e5;line-height:1.1}
.stat span{font-size:.82rem;color:#64748b;display:block;margin-top:4px}
table.admin{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem}
table.admin th,table.admin td{text-align:left;padding:8px 10px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
table.admin th{color:#475569;font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;background:#fafafa;position:sticky;top:0;z-index:1}
table.admin tbody tr:hover{background:#fafafa}
table.admin td.wrap{white-space:normal;word-break:break-word;overflow:visible;text-overflow:unset}
table.admin td.nowrap{white-space:nowrap}
.tag{display:inline-block;background:#eef2ff;color:#4338ca;border-radius:99px;padding:2px 8px;font-size:.75rem;font-weight:600;line-height:1.2;border:1px solid #e0e7ff}
.tag.green{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.tag.blue{background:#e0f2fe;color:#0369a1;border-color:#bae6fd}
.tag.gray{background:#f1f5f9;color:#64748b;border-color:#e2e8f0}
.tag.purple{background:#ede9fe;color:#6d28d9;border-color:#ddd6fe}
.tag.gold{background:#fef3c7;color:#b45309;border-color:#fde68a}
.hintline{background:#f5f3ff;border:1px solid #e9e7ff;border-left:3px solid #a5b4fc;border-radius:10px;padding:9px 12px;margin:0 0 12px;color:#3730a3;font-size:.9rem;line-height:1.5}
.item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:9px 0;border-bottom:1px solid #f1f5f9}
.item:last-child{border:0}
.item>div:first-child{flex:1;min-width:0}
.item strong{line-height:1.35}
.muted{line-height:1.5}
@media (max-width:720px){.admin-grid{grid-template-columns:1fr}.admin-nav{width:100%}.admin-nav a{flex:1 0 auto;text-align:center}}

/* Pet bounce */
.pet-anim{animation:pet-bounce 2.4s ease-in-out infinite}
@keyframes pet-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Exit door header */
.exit-btn{position:absolute;top:8px;right:10px;z-index:10;text-decoration:none;display:flex;align-items:center;justify-content:center}
.door-exit .door-frame{position:relative;width:58px;height:72px;border:2px solid var(--bd,#1f2937);border-radius:5px;background:linear-gradient(180deg,#1f2937,#111827);display:flex;align-items:flex-end;justify-content:center;box-shadow:0 6px 12px rgba(0,0,0,.4)}
.door-exit .exit-text{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;color:#e5e7eb;text-shadow:0 1px 2px #000;letter-spacing:.6px}
.door-exit .door-leaf{position:absolute;top:3px;left:3px;width:50px;height:66px;background:linear-gradient(90deg,#b45309,#92400e);border:1px solid #78350f;border-radius:3px;transform-origin:100% 50%;transition:transform .3s ease;box-shadow:inset -3px 0 6px rgba(0,0,0,.3)}
.door-exit:hover .door-leaf{transform:perspective(260px) rotateY(-48deg)}
.door-exit .door-knob{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 2px #78350f}

/* Topbar baru */
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent);border:1px solid var(--bd,#1f2937);border-radius:10px;padding:8px 10px}
.topbar-left{display:flex;align-items:flex-start;gap:10px;min-width:0}
.char-mini svg{width:56px;height:56px;display:block;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--bd,#1f2937)}
.info{min-width:0}
.name-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.grade{color:var(--muted,#94a3b8);font-size:.9em}
.row{color:var(--muted,#94a3b8);font-size:.85em;margin-top:2px}
.bars{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.bar{display:flex;align-items:center;gap:6px;font-size:.75em}
.bar-label{color:var(--muted,#94a3b8);width:24px}
.bar-bg{flex:1;background:var(--bg2,#0b1220);border:1px solid var(--bd,#1f2937);border-radius:999px;height:8px;overflow:hidden}
.bar-fill{height:100%}
.bar-fill.hp{background:linear-gradient(90deg,#22c55e,#16a34a)}
.bar-fill.xp{background:linear-gradient(90deg,#60a5fa,#2563eb)}
.bar-val{color:var(--muted,#94a3b8);min-width:60px;text-align:right}
.topbar-right{display:flex;align-items:center;gap:10px}
.icon-btn{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--fg,#e5e7eb);background:rgba(255,255,255,.06);border:1px solid var(--bd,#1f2937);border-radius:8px;padding:4px 6px}
.icon-btn .icon{font-size:18px}
.icon-btn .icon-label{font-size:9px;color:var(--muted,#94a3b8)}

/* Topbar table layout */
.topbar.card{padding:10px 12px}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px;border-bottom:1px solid var(--bd,#1f2937);padding-bottom:6px}
.brand{font-weight:800;text-decoration:none;color:var(--fg,#e5e7eb);font-size:1.05em}
.topnav{display:flex;gap:10px;flex-wrap:wrap}
.topnav a{text-decoration:none;color:var(--muted,#94a3b8);font-size:.85em}
.topnav a:hover{color:var(--fg,#e5e7eb)}
.topbar-table{width:100%;border-collapse:collapse}
.topbar-table td{vertical-align:top}
.tb-char{width:150px;padding-right:12px}
.char-wide svg{width:140px;height:auto;max-height:180px;display:block;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--bd,#1f2937)}
.tb-info{padding-right:12px}
.tb-actions{width:90px;text-align:right}
.tb-actions .icon-btn{display:flex;flex-direction:column;align-items:center;margin:0 0 8px auto;width:70px}
.tb-actions .exit-btn{position:static;margin-left:auto}
@media(max-width:640px){
  .tb-char{width:110px}.char-wide svg{width:100px}
  .topbar-table,.topbar-table tbody,.topbar-table tr,.topbar-table td{display:block;width:100%}
  .tb-actions{text-align:left;display:flex;gap:10px}
  .tb-actions .icon-btn{margin:0;width:auto}
}

/* ===== Topbar redesain: avatar besar + animasi pet + 6 tombol (2x3) ===== */
.topbar{display:flex;align-items:stretch;justify-content:space-between;gap:12px;margin-bottom:12px;
  background:linear-gradient(180deg,#ffffff,#f1f5f9);border:1px solid #cbd5e1;border-radius:14px;padding:10px}
.topbar.card{padding:10px 12px}
.tb-main{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}
.tb-avatar{flex:0 0 auto;line-height:0;padding:4px;border-radius:12px;background:linear-gradient(#e0f2fe,#fef9c3);border:1px solid #cbd5e1}
.tb-avatar svg{display:block;width:104px;height:auto;max-height:none}
.tb-info{min-width:0;flex:1 1 auto}
.tb-name{font-size:1.05rem}
.tb-meta{color:#475569;font-size:.82em;margin-top:2px}
.fx-row{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.fx{display:inline-flex;align-items:center;gap:4px;font-size:.72em;font-weight:700;border-radius:999px;padding:3px 9px;border:1px solid}
.fx.pet{background:#dcfce7;color:#166534;border-color:#86efac}
.fx.def{background:#dbeafe;color:#1e40af;border-color:#93c5fd}
.fx.none{background:#f1f5f9;color:#94a3b8;border-color:#e2e8f0;font-weight:600}
.tb-pet{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;border-radius:12px;
  background:radial-gradient(circle at 50% 35%,#f0fdf4,#dcfce7);border:1px solid #86efac}
.tb-pet .pet-svg{display:block}
.tb-pet-name{font-size:.68em;font-weight:700;color:#166534}
.tb-actions{flex:0 0 auto;width:auto;text-align:left;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;align-content:start}
.tb-actions .icon-btn{margin:0;width:64px;padding:6px 4px;gap:2px;border-radius:10px;background:#fff;border:1px solid #cbd5e1;color:#334155}
.tb-actions .icon-btn:hover{background:#eef2ff;border-color:#818cf8;color:#3730a3;transform:translateY(-1px)}
.tb-actions .icon-btn .icon{font-size:20px;line-height:1}
.tb-actions .icon-btn .icon-label{font-size:9px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:.02em}

/* Bar HP/XP lebih keren */
.bars{margin-top:6px;display:flex;flex-direction:column;gap:5px;max-width:340px}
.bar{display:flex;align-items:center;gap:6px;font-size:.72em}
.bar-label{width:22px;font-weight:800;color:#475569}
.bar-bg{flex:1;background:#e2e8f0;border:1px solid #cbd5e1;border-radius:999px;height:11px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(15,23,42,.15)}
.bar-fill{height:100%;border-radius:999px;transition:width .4s ease}
.bar-fill.hp{background:linear-gradient(90deg,#34d399,#22c55e,#16a34a)}
.bar-fill.xp{background:linear-gradient(90deg,#93c5fd,#60a5fa,#2563eb)}
.bar-val{min-width:58px;text-align:right;font-weight:700;color:#475569;font-variant-numeric:tabular-nums}

@media (max-width:680px){
  .topbar{flex-direction:column;align-items:stretch}
  .tb-avatar svg{width:76px}
  .tb-pet{align-self:flex-end}
  .bars{max-width:none}
  .tb-actions{grid-template-columns:repeat(3,1fr);width:100%}
  .tb-actions .icon-btn{width:auto}
}

/* Senjata di dalam soal (sidang & kelas) */
.weapons{margin-top:10px;padding-top:10px;border-top:1px dashed #cbd5e1}
.weapons .label{font-weight:700;color:#475569;margin-bottom:6px}
.weapons .wpn{display:inline-block;margin:0 6px 6px 0}
.weapons .wpn .btn{padding:9px 13px;font-size:.92rem}
.weapons .qty{opacity:.75;font-weight:400}

/* Chat */
.chat-list{display:flex;flex-direction:column;gap:8px;max-height:440px;overflow-y:auto;padding:4px}
.chat-msg{display:flex;gap:8px;align-items:flex-start}
.chat-msg .who{font-weight:700;color:#4f46e5;white-space:nowrap;padding-top:6px}
.chat-msg.mine .who{color:#16a34a}
.chat-msg .body{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:6px 10px;flex:1;word-break:break-word}
.chat-msg.mine .body{background:#ecfdf5;border-color:#a7f3d0}
.chat-msg .when{color:#94a3b8;font-size:.72em;white-space:nowrap;padding-top:8px}

/* ===== Inventory (frontend) ===== */
.inv-hero{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-radius:16px;padding:16px 18px;margin-bottom:16px;box-shadow:0 8px 20px rgba(99,102,241,.3)}
.inv-hero h1{margin:0;font-size:1.25rem}
.inv-hero p{margin:5px 0 0;opacity:.92;font-size:.9rem}
.inv-sec{background:#fff;border-radius:16px;padding:16px 18px;margin-bottom:16px;box-shadow:0 4px 14px rgba(15,23,42,.08)}
.inv-sec-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;border-bottom:1px solid #f1f5f9;padding-bottom:10px}
.inv-sec-head h3{margin:0;font-size:1.05rem}
.inv-sec-head .muted{font-size:.85rem}
.inv-sec .slot-title{margin:14px 0 8px}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.inv-card{position:relative;display:flex;gap:12px;align-items:flex-start;background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid #e2e8f0;border-radius:14px;padding:12px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.inv-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.1);border-color:#c7d2fe}
.inv-card.inv-active{border-color:#86efac;background:linear-gradient(180deg,#f0fdf4,#dcfce7)}
.inv-card.inv-active::after{content:"✓";position:absolute;top:7px;right:7px;width:22px;height:22px;border-radius:999px;background:#22c55e;color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(15,23,42,.28);z-index:2}
.inv-thumb{flex:0 0 64px;width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#eef2ff,#e0e7ff);border-radius:12px;font-size:2rem;line-height:1;overflow:hidden}
.inv-thumb img{max-width:56px;max-height:56px;object-fit:contain}
.inv-main{flex:1;min-width:0}
.inv-name{font-weight:700;line-height:1.35;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.inv-main .muted{font-size:.82rem;margin-top:3px}
.inv-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.inv-actions form{margin:0}
.inv-empty{color:#94a3b8;font-size:.9rem;text-align:center;padding:16px;background:#f8fafc;border:1px dashed #e2e8f0;border-radius:12px}
.inv-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.inv-tab{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:70px;padding:9px 12px;border:1px solid #e2e8f0;background:#fff;border-radius:14px;color:#64748b;font-weight:700;font-size:.72rem;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.06);transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s ease}
.inv-tab .it-ico{font-size:1.35rem}
.inv-tab:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.14);border-color:#c7d2fe}
.inv-tab.active{background:linear-gradient(180deg,#6366f1,#4f46e5);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(79,70,229,.32)}
.inv-filter-card .inv-sec-head{margin-bottom:10px}
.inv-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.inv-filters .fld{display:flex;flex-direction:column;gap:4px;font-size:.78rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.02em}
.inv-filters select{padding:9px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#1e293b;font-size:.9rem;font-weight:600;min-width:170px;cursor:pointer}
.inv-filters select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.18)}
.inv-card.inv-rarity{position:relative;border-left:4px solid var(--rc)}
.inv-card.inv-rarity .inv-thumb{box-shadow:inset 0 0 0 2px var(--rc)}
.inv-card.inv-rarity:hover{border-color:#c7d2fe;box-shadow:0 10px 24px rgba(15,23,42,.12),0 0 0 1px var(--rc)}
.inv-card.inv-rarity.inv-active{box-shadow:0 0 0 1px var(--rc)}
.inv-card.is-hidden,.inv-sec.is-hidden,.slot-group.is-hidden{display:none!important}

/* ===== Roulette buka Secret Box ===== */
.roll-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.74);backdrop-filter:blur(4px);transition:opacity .25s ease}
.roll-overlay[hidden]{display:none}
.roll-overlay.closing{opacity:0}
.roll-panel{width:min(92vw,360px);background:linear-gradient(180deg,#ffffff,#eef2ff);border-radius:20px;padding:20px 18px;text-align:center;box-shadow:0 24px 60px rgba(2,6,23,.5)}
.roll-box{font-size:3.2rem;line-height:1}
.roll-title{margin:6px 0 14px;font-size:1.02rem;color:#334155;font-weight:700}
.roll-window{position:relative;height:100px;overflow:hidden;border-radius:16px;background:#0f172a;border:2px solid #1e293b;box-shadow:inset 0 0 32px rgba(0,0,0,.65),0 0 0 3px rgba(99,102,241,.18);transition:box-shadow .35s ease,border-color .35s ease}
.roll-window::before,.roll-window::after{content:"";position:absolute;left:0;right:0;height:30px;z-index:4;pointer-events:none}
.roll-window::before{top:0;background:linear-gradient(180deg,#0f172a,rgba(15,23,42,0))}
.roll-window::after{bottom:0;background:linear-gradient(0deg,#0f172a,rgba(15,23,42,0))}
.roll-window.win{box-shadow:inset 0 0 34px var(--wc),0 0 28px var(--wc),0 0 0 3px var(--wc)}
.roll-pointer{position:absolute;left:6px;right:6px;top:50%;height:0;border-top:2px dashed rgba(255,255,255,.9);z-index:3;box-shadow:0 0 8px rgba(0,0,0,.6)}
.roll-shine{position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(115deg,transparent 46%,rgba(255,255,255,.3) 50%,transparent 54%);background-size:250% 100%;animation:roll-shine 2.6s linear infinite}
.roll-strip{will-change:transform}
.roll-cell{height:100px;padding:2px 6px}
.roll-cell-card{position:relative;height:100%;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 8px;border:1.5px solid var(--rc);overflow:hidden;box-sizing:border-box}
.roll-cell-card::before{content:"";position:absolute;top:0;left:0;right:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0));pointer-events:none}
.roll-cell-ico{position:relative;line-height:0}
.roll-cell img,.roll-cell svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.roll-cell-name{position:relative;font-size:.78rem;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roll-cell.win .roll-cell-card{outline:3px solid #fff;outline-offset:-3px;animation:cell-win .7s cubic-bezier(.3,1.5,.5,1)}
.roll-result{margin-top:16px}
.roll-result[hidden]{display:none}
.roll-result .win-name{display:block;font-size:1.2rem;font-weight:900;margin:8px 0 4px;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.roll-result .win-desc{color:#64748b;font-size:.85rem;margin-top:6px;line-height:1.5}
.roll-result.win{animation:roll-pop .5s cubic-bezier(.2,1.4,.4,1)}
.roll-result .win-note{color:#16a34a;font-size:.8rem;font-weight:700;margin:10px 0 0}
.win-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.win-actions form{display:contents}
.win-actions .btn{width:auto;margin:0}
body.rolling .secret-result{visibility:hidden}
@keyframes roll-pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes roll-shine{0%{background-position:130% 0}100%{background-position:-130% 0}}
@keyframes cell-win{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}

/* ===== Header ruang kelas & sidang (user vs guru) ===== */
.battle-head{padding-top:16px}
.battle-head .arena{align-items:flex-end}
.battle-head .char .emoji{line-height:0}
.battle-head .char .emoji svg,.battle-head .char .emoji img{max-height:130px;width:auto;max-width:100%}
.battle-head .hp-only{max-width:340px;margin:12px auto 0}
.battle-head .exit-btn{top:6px;right:8px}
@media (max-width:480px){
  .battle-head{padding-top:12px}
  .battle-head .char .emoji svg,.battle-head .char .emoji img{max-height:96px}
  .battle-head .exit-btn{top:4px;right:4px}
  .battle-head .door-exit .door-frame{width:46px;height:56px}
  .battle-head .door-exit .door-leaf{width:40px;height:52px}
  .battle-head .exit-text{font-size:9px}
}

/* ===== Responsif global (mobile) ===== */
html,body{max-width:100%;overflow-x:hidden}
img,video{max-width:100%;height:auto}
body{overflow-wrap:break-word}

@media (max-width:760px){
  .wrap{padding:0 10px;margin:12px auto}
  .top nav a{margin-left:0;margin-right:14px}
  /* Tabel admin digeser horizontal daripada terpotong keluar layar. */
  body.admin .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.admin{min-width:520px}
  /* Dropdown menu admin tampil inline agar tidak terpotong di kanan layar. */
  .admin-drop{position:static;min-width:0;box-shadow:none;margin-top:4px;border-radius:10px}
  .admin-nav{width:100%;flex-direction:column;gap:2px}
  .admin-nav>a,.admin-nav .admin-group-btn{width:100%;text-align:left}
  .admin-nav .admin-drop{width:100%}
}

@media (max-width:480px){
  table.admin{font-size:.85rem}
  table.admin th,table.admin td{padding:6px 7px}
  .admin-actions input,.admin-actions select,.admin-actions input[type=file]{max-width:100%}
  .filterbar .fld,.filterbar .fld.grow{min-width:100%;flex:1 1 100%}
  .u-actions{min-width:0}
}