/* AI CITY — perapian visual (dimuat setelah gaya utama) */
body{background:radial-gradient(circle at 10% 6%,#ffffffb0 0 110px,#fff0 112px),radial-gradient(circle at 92% 18%,#ffffff88 0 80px,#fff0 82px),linear-gradient(#9fe3ff,#e6faff 42%,#d2f4e1);background-attachment:fixed;padding-bottom:env(safe-area-inset-bottom)}
.view.on{animation:viewIn .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes viewIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
h2{font-size:1.35rem;letter-spacing:.2px}
.panel{background:linear-gradient(#fff,#f2f8ff);border:3px solid #fff;box-shadow:0 12px 28px #1d2a4d26,0 3px 0 #ffffffd0 inset}
button{background:linear-gradient(#9b4de3,#7b2cbf);text-shadow:0 1px 0 #0003;box-shadow:0 5px 0 #4b1a78,0 10px 14px #4b1a7840;transition:transform .12s,filter .12s}
button.go{background:linear-gradient(#ffad66,#ff8c42);box-shadow:0 5px 0 #b85a1c,0 10px 16px #b85a1c40}
button.ok{background:linear-gradient(#3eedc4,#06d6a0);text-shadow:none}
button.ghost{background:linear-gradient(#fff,#eef4fd);text-shadow:none;box-shadow:0 5px 0 #c9d6ee,0 8px 12px #1d2a4d1a}
button:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.chip{background:linear-gradient(#fff,#f1f6ff);border:2px solid #fff}
.bar{height:16px;box-shadow:inset 0 2px 4px #1d2a4d22}
.bar i{background:linear-gradient(90deg,#06d6a0,#4cc9f0,#06d6a0);background-size:200% 100%;animation:shine 3s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.top{position:sticky;top:0;z-index:6;padding:8px 6px;margin:-6px -6px 10px;backdrop-filter:blur(8px);background:#e8f8ffcc;border-radius:0 0 18px 18px}
.aki-say{position:relative;align-items:center;background:linear-gradient(#fffbe6,#fff3c4);border:3px solid #fff;box-shadow:0 6px 16px #c99a1f33;border-radius:20px;padding:10px 14px}
.akiav{flex:0 0 auto;display:inline-block;animation:bob 2.6s ease-in-out infinite;filter:drop-shadow(0 4px 4px #1d2a4d33)}
/* kartu level */
.levels{gap:16px}
.lv{position:relative;overflow:hidden;border:3px solid #ffffff90;transition:transform .15s}
.lv::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#ffffff40 0,#fff0 55%),repeating-linear-gradient(45deg,#ffffff14 0 10px,#fff0 10px 20px)}
.lv>:not(.ico){position:relative}
.lv .ico{position:absolute;right:-8px;top:-8px;width:104px;height:104px;opacity:.3;transform:rotate(-8deg)}
.lv .n{font-size:2.6rem;text-shadow:0 3px 0 #0003;line-height:1}
.lv button{align-self:flex-start;margin-top:auto}
.lv:hover{transform:translateY(-3px) rotate(-.4deg)}
/* data latihan */
.it{border:2px solid #e3ecfa;transition:transform .15s}
.it:active{cursor:grabbing;transform:scale(1.06) rotate(-2deg)}
.it .m button{min-height:40px;min-width:40px}
.bin{border-radius:20px;transition:background .2s,transform .2s}
.bin.over{transform:scale(1.02)}
table tr:nth-child(even) td{background:#f6f9ff}
.panel table{display:block;overflow-x:auto;max-width:100%}
#toast{background:linear-gradient(#2b3b6b,#1d2a4d);border:2px solid #fff3;box-shadow:0 10px 24px #0005;font-weight:800}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 80% 15%,#fff7 0,#fff0 40%)}
.sp{position:absolute;color:#fff;opacity:0;pointer-events:none;animation:tw 3.6s ease-in-out infinite;z-index:2}
@keyframes tw{50%{opacity:.95;transform:scale(1.4) rotate(25deg)}}
button:focus-visible,select:focus-visible,input:focus-visible,.it:focus-visible{outline:4px solid #ff8c42;outline-offset:2px}
@media(max-width:600px){
 .view{padding:10px}
 .menu button{flex:1 1 100%;font-size:1.1rem}
 .hero .txt{top:8px}.hero h1{font-size:2rem}.tag{font-size:.85rem}
 .it{width:calc(50% - 6px)}
 .bins{grid-template-columns:1fr}
 h2{font-size:1.2rem}
}
@media(prefers-reduced-motion:reduce){.view.on,.akiav,.sp,.bar i{animation:none}.lv:hover,button:hover{transform:none}}