*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,sans-serif;background:linear-gradient(180deg,#0b6a43,#052d22);color:#fff}.app{width:min(100%,620px);margin:auto;min-height:100vh;padding:12px 14px 24px;background:radial-gradient(circle at 50% 18%,#1b956044,transparent 36%)}button{font:inherit}.overlay{position:fixed;inset:0;display:none;place-items:center;padding:20px;background:#021b14ef;z-index:1000}.overlay.show{display:grid}.start-card{width:min(100%,420px);padding:26px;text-align:center;border:2px solid #f3c94f;border-radius:28px;background:linear-gradient(#0c6c46,#06392a);box-shadow:0 20px 50px #0008}.start-logo{display:grid;place-items:center;width:82px;height:82px;margin:0 auto 14px;border-radius:50%;background:#6f2dbd;border:5px solid #f3c94f;color:#f3c94f;font-size:48px;font-weight:900}.start-card h1{color:#ffe09b}.start-card p{color:#d9e8de}.start-card button{border:0;border-radius:999px;padding:13px 24px;background:#f3c94f;color:#4a246f;font-weight:900;cursor:pointer}.topbar{display:grid;grid-template-columns:1fr auto 1fr;gap:10px}.pill,.levelbox{border:2px solid #f3c94f;background:linear-gradient(#11794c,#083f2f);box-shadow:0 8px 18px #0005}.pill{border-radius:999px;padding:10px 14px;display:flex;align-items:center;gap:8px}.pill.right{justify-content:flex-end}.gp{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#f3c94f;color:#4a246f;font-weight:900}.levelbox{border-radius:0 0 22px 22px;text-align:center;padding:7px 17px 11px}.levelbox small{display:block;color:#ffe8a0}.levelbox b{display:block;font-size:31px}.brand{display:flex;align-items:center;justify-content:center;gap:14px;padding:17px 0 11px}.pi-logo{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle,#7d3cc9,#451170);border:5px solid #f3c94f;color:#f3c94f;font-size:44px;font-weight:900}.brand h1{margin:0;color:#f3c94f;font-family:Georgia,serif;font-size:40px;line-height:.95}.brand h1 span{font-size:.8em;color:#fff}.brand p{margin:8px 0 0;color:#ffe8a3;font-size:13px;font-weight:700}.audio-panel,.mission-card,.panel-view{border-radius:18px;background:#063d2ee8;border:1px solid #f3c94f77;margin-bottom:11px}.audio-panel{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 14px;align-items:center}.audio-panel small,.mission-card small{display:block;color:#bfddca;font-size:10px;letter-spacing:.12em}.audio-panel strong,.mission-card strong{display:block;margin-top:4px}.audio-panel span,.mission-card span{display:block;color:#ffe6a1;margin-top:3px;font-size:12px}.audio-actions{display:flex;gap:8px}.audio-actions button{width:44px;height:44px;border-radius:50%;border:2px solid #f3c94f;background:linear-gradient(#13895a,#0a4d38);color:white;cursor:pointer}.volume-wrap{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}.volume-wrap input{width:100%}.mission-card{display:flex;justify-content:space-between;align-items:center;padding:12px 14px}.mission-badge{background:#f3c94f;color:#4a246f;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800}.status{display:flex;justify-content:space-between;gap:10px;color:#ffe9a8;font-size:12px;margin-bottom:9px}.board{position:relative;height:540px;border:2px solid #f3c94f88;border-radius:27px;background:linear-gradient(180deg,#074a36,#063729);box-shadow:inset 0 0 38px #0005,0 13px 28px #0005;overflow:hidden}.tile{position:absolute;width:78px;height:96px;border:0;border-radius:12px;background:linear-gradient(#fffef9,#eee6d6);color:#0b5e3c;font-size:32px;font-weight:900;box-shadow:0 6px 0 #c99238,0 9px 14px #0007;cursor:pointer;transition:transform .12s,filter .12s,opacity .18s}.tile.pi{background:radial-gradient(circle,#7d3ecb 0 58%,#451070 59%);border:3px solid #f3c94f;color:#f3c94f}.tile.blocked{filter:brightness(.65) saturate(.8);cursor:not-allowed}.tile.free:hover{transform:translateY(-5px) scale(1.04)}.tile.selected{outline:4px solid #ffdf64;transform:translateY(-7px) scale(1.06);filter:drop-shadow(0 0 10px #ffdc5d)}.tile.matched{opacity:0;pointer-events:none;transform:scale(.3)}.board.theme-noken{background:linear-gradient(135deg,#5b2d16,#b56a2d 48%,#3b1b0e)}.board.theme-noken .tile{background:linear-gradient(#fff5dc,#e8c48d);color:#7b2f16;box-shadow:0 6px 0 #7b3518,0 9px 14px #0008}.board.theme-honai{background:linear-gradient(180deg,#46301f,#24170e)}.board.theme-honai .tile{background:linear-gradient(#f3e1bd,#c89f6a);color:#4c2a14;box-shadow:0 6px 0 #6d3f20,0 9px 14px #0008}.board.theme-cenderawasih{background:linear-gradient(160deg,#0f4d75,#0e7990 45%,#0b3154)}.board.theme-cenderawasih .tile{background:linear-gradient(#fff8dc,#ffd37d);color:#b24717;box-shadow:0 6px 0 #d67521,0 9px 14px #0008}.board.theme-tifa{background:linear-gradient(160deg,#7d1d22,#311013)}.board.theme-tifa .tile{background:linear-gradient(#fff3e4,#e8b47e);color:#7b1717;box-shadow:0 6px 0 #8e2c22,0 9px 14px #0008}.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}.tools button{position:relative;border:2px solid #f3c94f;border-radius:18px;padding:11px 7px;background:linear-gradient(#13895a,#0a4d38);color:white;font-size:21px;cursor:pointer}.tools span{display:block;font-size:12px;font-weight:800}.tools em{position:absolute;right:8px;top:7px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#f3c94f;color:#4a246f;font-size:11px;font-style:normal;font-weight:900}.progress-wrap{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.progress{height:10px;border-radius:999px;background:#ffffff22;overflow:hidden}.progress div{height:100%;width:0;background:linear-gradient(90deg,#f3c94f,#6bd391)}.view{display:none!important}.view.active{display:block!important}.panel-view{padding:18px}.info-card{padding:14px;border-radius:14px;background:#0a4b37;border:1px solid #ffffff1c;margin-top:10px}.info-card strong,.info-card span{display:block}.info-card span{color:#c9ddd0;margin-top:5px;font-size:13px}.shop-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.shop-header h2{margin:0 0 6px}.shop-header p{margin:0;color:#c9ddd0;font-size:13px}.shop-balance{white-space:nowrap;background:#f3c94f;color:#4a246f;border-radius:999px;padding:9px 12px;font-weight:900}.shop-section{margin-top:22px}.section-title{display:flex;justify-content:space-between;gap:10px;align-items:end;margin-bottom:10px}.section-title h3{margin:0;color:#ffe09b}.section-title span{font-size:11px;color:#bdd0c3;text-align:right}.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.shop-card{border:1px solid #ffffff24;border-radius:16px;background:linear-gradient(#0b5a41,#073c2d);padding:13px;min-height:168px;display:flex;flex-direction:column}.shop-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#ffffff14;font-size:28px;margin-bottom:9px}.shop-card h4{margin:0 0 5px;color:#fff}.shop-card p{margin:0 0 10px;color:#c9ddd0;font-size:12px;line-height:1.35}.shop-meta{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px}.price{color:#ffe09b;font-weight:900;font-size:13px}.shop-action{border:0;border-radius:999px;padding:8px 11px;background:#f3c94f;color:#4a246f;font-weight:900;cursor:pointer}.shop-action.secondary{background:#ffffff1c;color:#fff;border:1px solid #ffffff38}.shop-action:disabled{opacity:.55;cursor:not-allowed}.owned-badge{display:inline-block;margin-top:6px;color:#8ff0b8;font-size:11px;font-weight:700}.coming-grid{display:grid;gap:8px}.coming-card{padding:12px;border-radius:13px;background:#ffffff0c;border:1px dashed #ffffff33;color:#d7e7dc}.bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);margin:16px -14px 0;background:#052e23;border-top:1px solid #f3c94f88}.bottom-nav button{border:0;background:transparent;color:#dce9df;padding:12px 4px;font-size:20px;cursor:pointer}.bottom-nav span{display:block;font-size:12px;margin-top:4px}.bottom-nav .active{color:#ffe29a;background:#f3c94f22}footer{text-align:center;color:#bdd0c3;font-size:10px;padding:14px 4px 0}footer strong{color:#ffe09b}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(100px);background:#161616e8;color:white;padding:11px 16px;border-radius:999px;opacity:0;transition:.25s;z-index:1100;font-size:13px}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}@media(max-width:520px){.board{height:470px}.tile{width:62px;height:78px;font-size:26px}.brand h1{font-size:34px}.pi-logo{width:64px;height:64px;font-size:38px}.shop-grid{grid-template-columns:1fr}.section-title{align-items:flex-start;flex-direction:column}.section-title span{text-align:left}}
.board::before{
  content:"";
  position:absolute;
  left:50%;
  top:48%;
  width:76%;
  height:68%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,#ffffff0b 0%,#ffffff03 45%,transparent 72%);
  pointer-events:none;
}