/* play.agusanmu97.com landing - Style A "Agusan River" (river green + gold, Cinzel), 2026-11-11 */
@font-face{font-family:Cinzel;font-weight:600;font-display:swap;src:url(fonts/cinzel-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Cinzel;font-weight:800;font-display:swap;src:url(fonts/cinzel-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Cinzel;font-weight:900;font-display:swap;src:url(fonts/cinzel-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:400;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:500;font-display:swap;src:url(fonts/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:600;font-display:swap;src:url(fonts/jost-latin-600-normal.woff2) format("woff2")}
:root{--gold:#d6b15e;--gold2:#f0cf7c;--ink:#03100b;--card:rgba(8,40,29,.86);--txt:#e8efe9;--mut:#9fb7aa}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--ink);color:var(--txt);font-family:Jost,system-ui,sans-serif;-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;overflow-x:hidden}
.bg{position:fixed;inset:0;background:url(bg.jpg) 40% center/cover;filter:brightness(.42) saturate(.85)}
.sh{position:fixed;inset:0;background:linear-gradient(180deg,rgba(3,16,11,.55) 0%,rgba(3,16,11,.2) 30%,rgba(3,16,11,.92) 62%,var(--ink) 100%)}
.in{position:relative;max-width:440px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:calc(env(safe-area-inset-top) + 58px) 22px calc(env(safe-area-inset-bottom) + 40px)}
.logo{width:70px;height:70px;border:2px solid var(--gold);transform:rotate(45deg);display:flex;align-items:center;justify-content:center;background:rgba(6,30,22,.8);box-shadow:0 0 30px rgba(214,177,94,.4)}
.logo b{transform:rotate(-45deg);font:900 38px Cinzel,serif;color:#e8c56f}
.t1{font:600 14px Cinzel,serif;letter-spacing:5px;color:var(--gold);margin-top:26px}
.t2{font:900 40px/1.05 Cinzel,serif;letter-spacing:2px;margin-top:6px;background:linear-gradient(180deg,#fff3cf,var(--gold2) 50%,#b98a2e);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{font:500 15px Jost,sans-serif;color:#cfe3d8;margin-top:8px;letter-spacing:1px}
.gl{width:220px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:18px 0}
.view{width:100%;display:flex;flex-direction:column;align-items:center}
.view[hidden]{display:none}
.card{width:100%;background:var(--card);border:1px solid rgba(214,177,94,.55);border-radius:16px;padding:18px;text-align:left}
.card.center{text-align:center}
.card h2{font:800 17px Cinzel,serif;color:var(--gold2);letter-spacing:1px;margin-bottom:12px;text-align:center}
.st{display:flex;gap:12px;align-items:center;margin:10px 0;font:500 15px Jost,sans-serif;color:var(--txt);line-height:1.35}
.n{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold2);font:800 14px Cinzel,serif;display:flex;align-items:center;justify-content:center}
.share{display:inline-block;vertical-align:-4px;width:15px;height:17px;border:2px solid #0a84ff;border-top:none;border-radius:0 0 3px 3px;position:relative;margin:0 2px}
.share:before{content:"";position:absolute;left:4.5px;top:-9px;width:2px;height:13px;background:#0a84ff}
.share:after{content:"";position:absolute;left:1.5px;top:-9px;width:6px;height:6px;border-left:2px solid #0a84ff;border-top:2px solid #0a84ff;transform:rotate(45deg)}
.btn{width:100%;height:58px;border:0;border-radius:30px;background:linear-gradient(180deg,#f3d27e,#c6962f);color:#1b1206;font:900 21px Cinzel,serif;letter-spacing:3px;
  display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;box-shadow:0 6px 24px rgba(214,177,94,.35),inset 0 1px 0 #fff5d0}
.btn:active{transform:scale(.98);filter:brightness(.95)}
.btn[disabled]{opacity:.45}
.btn2{width:100%;height:48px;border-radius:26px;border:1.5px solid rgba(214,177,94,.7);background:transparent;color:var(--gold2);font:600 16px Jost,sans-serif;
  display:flex;align-items:center;justify-content:center;margin-top:14px;text-decoration:none;cursor:pointer}
.btn2:active{background:rgba(214,177,94,.12)}
.small{font:400 13px Jost,sans-serif;color:var(--mut);margin-top:12px}
.small a{color:var(--mut);text-decoration:none}
.sub{font:500 14px Jost,sans-serif;color:#cfe3d8;line-height:1.4}
.sub2{font:400 13px Jost,sans-serif;color:var(--mut);margin-top:6px}
.bar{width:100%;height:12px;border-radius:8px;background:#0c2a1f;border:1px solid rgba(214,177,94,.4);overflow:hidden;margin:14px 0 8px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1f7a57,#5fd3a0,var(--gold2));transition:width .3s}
.pct{display:flex;justify-content:space-between;width:100%;font:500 14px Jost,sans-serif;color:#cfe3d8}
.tip{width:100%;margin-top:20px;font:500 14px Jost,sans-serif;color:#cfe3d8;background:rgba(0,0,0,.35);border-left:2px solid var(--gold);padding:10px 12px;text-align:left;border-radius:6px;line-height:1.4}
.tip b{color:var(--gold2)}
.err{width:100%;margin-top:14px;font:500 14px Jost,sans-serif;color:#ffd2c8;background:rgba(120,20,10,.45);border:1px solid rgba(255,120,100,.5);border-radius:10px;padding:10px 12px}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:4px 0 26px}
.chip{font:500 13px Jost,sans-serif;color:#bfe8d4;border:1px solid rgba(95,211,160,.5);border-radius:14px;padding:4px 10px;background:rgba(10,52,38,.6);display:inline-flex;align-items:center;gap:6px}
.chip i{width:7px;height:7px;border-radius:50%;background:#8aa}
.chip.on i{background:#5fd3a0}.chip.off i{background:#e06a5a}.chip.mt i{background:#f0a040}
.chip.mt{color:#ffd9a0;border-color:rgba(240,160,64,.6)}.chip.off{color:#ffc4bb;border-color:rgba(224,106,90,.6)}
.chip b{font-weight:500}
.rot{margin:18px 0 12px;display:flex;align-items:center;gap:10px;font:500 14px Jost,sans-serif;color:var(--txt)}
.rp{width:20px;height:34px;border:2px solid var(--gold2);border-radius:5px;transform:rotate(-30deg)}
.arrow{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 8px);left:50%;margin-left:-14px;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;
  border-top:18px solid var(--gold2);filter:drop-shadow(0 0 8px var(--gold2));animation:bob 1.2s ease-in-out infinite}
.arrow[hidden]{display:none}
@keyframes bob{50%{transform:translateY(6px)}}
@media (min-width:700px){.in{padding-top:80px}}