/* game pages layout (packs, shop, binder, ranks, map, gift) */
.lg-left { justify-content:flex-start; }
.lg-wallet { display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; margin:14px 0; font-size:22px; }
.lg-wallet b { font-size:28px; color:var(--lg-gold); }
.lg-sec { margin:22px 0; }
.lg-codhint { margin:14px 0; }
.lg-packgrid { margin-top:18px; }
.lg-evbanner { display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; margin:18px 0; padding:24px; border-radius:26px; background:linear-gradient(120deg, var(--ec), var(--ed)); color:#fff; box-shadow:0 14px 40px rgba(0,0,0,.4); }
.lg-evbanner h2 { font-size:clamp(28px,3.4vw,42px); margin:2px 0 6px; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.lg-evbanner p { font-size:20px; max-width:720px; }
.lg-ev-k { font-weight:900; letter-spacing:.04em; }
.lg-feat { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:22px; margin-top:14px; }
.lg-feat-i { display:flex; flex-direction:column; align-items:center; gap:10px; }
.lg-feat-i .lg-card { width:min(220px, 100%); }
.lg-feat-n { font-weight:800; font-size:19px; margin-top:8px; }
.lg-price { white-space:nowrap; }
.lg-bhead { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:14px; }
.lg-movebar { position:sticky; top:150px; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:12px; background:#ffd36b; color:#14142a; padding:12px 18px; border-radius:18px; font-weight:800; font-size:20px; margin:8px 0; }
.lg-movebar .lg-btn { min-height:56px; color:#14142a; border-color:#14142a; }
.lg-binder { display:grid; grid-template-columns:72px minmax(0, 1fr) 72px; gap:12px; align-items:center; margin-top:12px; }
.lg-bpage { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(10px, 2vw, 22px); padding:clamp(12px, 2.4vw, 28px); border-radius:28px; background:linear-gradient(160deg, rgba(60,40,120,.75), rgba(26,16,58,.85)); border:3px solid rgba(255,255,255,.16); max-width:900px; width:100%; margin:0 auto; touch-action:pan-y; }
.lg-pocket { position:relative; aspect-ratio:63/88; border-radius:14px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 2px rgba(255,255,255,.08); }
.lg-pocket.over { box-shadow:inset 0 0 0 4px var(--lg-gold); }
.lg-pocket.moving { outline:4px dashed var(--lg-gold); outline-offset:4px; }
.lg-empty-pk span { position:absolute; inset:10%; border:3px dashed rgba(255,255,255,.18); border-radius:12px; }
.lg-pk-btn { display:block; width:100%; height:100%; padding:0; background:none; border:0; cursor:pointer; color:inherit; }
.lg-pk-btn .lg-card, .lg-pk-btn .pc-slot { width:100%; }
.lg-flip { width:72px; height:120px; border-radius:22px; border:2px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#fff; font-size:30px; cursor:pointer; }
.lg-flip[disabled] { opacity:.25; }
.lg-pageno { text-align:center; font-weight:800; margin-top:10px; }
.lg-empty { text-align:center; margin:20px 0; }
.lg-sheet { display:grid; grid-template-columns:minmax(0, 260px) 1fr; gap:22px; text-align:left; align-items:start; }
.lg-sheet-card .lg-card { width:100%; }
.lg-col-btns { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.lg-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:10px 0; }
.lg-field { display:flex; flex-direction:column; gap:6px; margin:12px auto; max-width:360px; font-weight:800; text-align:left; }
.lg-field input { min-height:60px; border-radius:16px; border:2px solid rgba(255,255,255,.3); background:rgba(0,0,0,.3); color:#fff; font:800 24px Nunito, system-ui, sans-serif; padding:0 16px; text-align:center; }
.lg-warn { min-height:28px; color:#ffb3c7; font-weight:800; font-size:20px; }
.lg-link { word-break:break-all; background:rgba(0,0,0,.35); border-radius:14px; padding:12px; font-size:16px; }
.lg-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; font-size:20px; text-align:left; }
.lg-spk { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; }
.lg-spk-i { display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 10px; border-radius:20px; background:linear-gradient(160deg, color-mix(in srgb, var(--c) 45%, transparent), rgba(20,14,44,.6)); text-align:center; }
.lg-spk-i.unmet { opacity:.6; filter:grayscale(.6); }
.lg-spk-b { width:64px; height:64px; border-radius:50% 50% 46% 46%; background:radial-gradient(circle at 35% 30%, #fff, var(--c) 55%, var(--d)); box-shadow:0 0 18px var(--c); }
.lg-spk-b.st-none { background:rgba(255,255,255,.15); box-shadow:none; }
.lg-spk-b.st-egg { border-radius:50% 50% 45% 45% / 60% 60% 40% 40%; }
.lg-spk-b.st-buddy, .lg-spk-b.st-champion { width:78px; height:78px; }
.lg-spk-b.st-champion { box-shadow:0 0 26px #ffd36b, 0 0 8px var(--c); }
.lg-spk-i small { font-size:16px; opacity:.85; }
.lg-bar { width:100%; height:12px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; margin-top:6px; }
.lg-bar i { display:block; height:100%; background:linear-gradient(90deg, #ffd36b, #ff9de2); }
.lg-paw { min-height:48px; margin-top:8px; border-radius:14px; border:2px dashed rgba(255,255,255,.4); background:rgba(0,0,0,.25); color:#fff; font:800 14px ui-monospace, monospace; padding:0 10px; cursor:pointer; }
.lg-ms { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.lg-ms-i { display:flex; flex-direction:column; align-items:center; text-align:center; padding:14px; border-radius:18px; background:rgba(255,255,255,.06); opacity:.6; }
.lg-ms-i.got { opacity:1; background:rgba(255,211,107,.16); border:2px solid rgba(255,211,107,.5); }
.lg-ms-i span { font-size:40px; }
.lg-cert { text-align:center; }
.lg-seal { width:84px; height:84px; margin:0 auto 6px; border-radius:50%; display:grid; place-items:center; font-size:40px; background:radial-gradient(circle at 35% 30%, #fff4c8, #ffd36b 50%, #b07a10); color:#7a4a00; box-shadow:0 0 0 6px rgba(255,211,107,.3); }
.lg-cert-i { margin:14px 0; padding:14px; border-radius:18px; background:rgba(255,255,255,.07); }
.lg-dna { font:800 20px ui-monospace, monospace; letter-spacing:.06em; color:var(--lg-gold); }
.lg-gbadge { display:inline-block; padding:4px 12px; border-radius:99px; background:var(--c); color:#14142a; font-weight:800; }
/* ranks */
.lg-me { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin:14px 0 6px; }
.lg-av { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.12); font-size:28px; flex:none; }
.lg-av-big { width:96px; height:96px; font-size:56px; }
.lg-ranks { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap:18px; margin-top:16px; }
.lg-board { list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; }
.lg-board li { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:16px; background:rgba(255,255,255,.06); font-size:20px; min-height:64px; }
.lg-board li b { flex:1; min-width:0; overflow-wrap:anywhere; }
.lg-board li.top1 { background:linear-gradient(90deg, rgba(255,211,107,.35), rgba(255,211,107,.08)); }
.lg-board li.top2 { background:linear-gradient(90deg, rgba(220,230,255,.3), rgba(220,230,255,.06)); }
.lg-board li.top3 { background:linear-gradient(90deg, rgba(222,150,90,.35), rgba(222,150,90,.06)); }
.lg-board li.me { outline:3px solid #5dffa0; }
.lg-rk { width:40px; text-align:center; font-weight:900; font-size:24px; }
.lg-w { font-weight:800; white-space:nowrap; }
.lg-pass { font-weight:900; font-size:22px; color:#5dffa0; margin-bottom:10px; }
.lg-code { font:900 28px ui-monospace, monospace; letter-spacing:.08em; color:var(--lg-gold); }
.lg-avs { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.lg-avbtn { min-height:76px; font-size:40px; border-radius:18px; border:2px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); cursor:pointer; }
/* map */
.lg-map { position:relative; width:100%; height:calc(var(--rows) * 190px); min-height:520px; margin:16px 0; border-radius:30px; background:radial-gradient(ellipse at 30% 20%, rgba(120,90,220,.35), transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(60,160,220,.3), transparent 60%), rgba(10,8,30,.55); border:2px solid rgba(255,255,255,.12); overflow:hidden; }
.lg-map-trail { position:absolute; inset:0; width:100%; height:100%; }
.lg-map-trail path { fill:none; stroke:rgba(255,226,122,.55); stroke-width:.6; stroke-dasharray:1.6 1.4; vector-effect:non-scaling-stroke; stroke-width:4; }
.lg-stop { position:absolute; transform:translate(-50%, -50%); display:flex; flex-direction:column; align-items:center; gap:2px; background:none; border:0; color:#fff; cursor:pointer; font-family:Nunito, system-ui, sans-serif; min-width:84px; }
.lg-stop-o { width:72px; height:72px; border-radius:50%; display:grid; place-items:center; font:900 24px Nunito, system-ui, sans-serif; background:radial-gradient(circle at 35% 30%, #fff, var(--c) 45%, var(--d)); color:#14142a; box-shadow:0 0 18px var(--c); border:3px solid rgba(255,255,255,.6); }
.lg-stop.at .lg-stop-o { box-shadow:0 0 0 6px rgba(255,226,122,.5), 0 0 30px var(--c); }
.lg-stop-ev .lg-stop-o { width:86px; height:86px; font-size:36px; animation:lg-pulse 1.6s infinite; }
.lg-stop-n { font-weight:800; font-size:16px; text-shadow:0 2px 6px #000; max-width:130px; text-align:center; line-height:1.15; }
.lg-stop-s { color:#ffd36b; font-size:18px; letter-spacing:2px; }
.lg-stop-s i { color:rgba(255,255,255,.25); font-style:normal; }
.lg-zip { position:absolute; right:-6px; top:-10px; font-size:30px; animation:lg-bob 1.8s infinite; }
.lg-map-pip { position:absolute; width:60px; height:60px; transform:translate(-30%, -110%); transition:left .9s cubic-bezier(.4,.1,.2,1), top .9s cubic-bezier(.4,.1,.2,1); pointer-events:none; z-index:3; filter:drop-shadow(0 0 12px rgba(255,226,122,.9)); }
.lg-map-pip svg { width:100%; height:100%; animation:lg-bob 2s infinite; }
.lg-found { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:10px; margin:10px 0 14px; }
.lg-fnd { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; font-size:16px; }
.lg-fnd img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; filter:brightness(0) opacity(.45); }
.lg-fnd.got img { filter:none; }
/* gift */
.lg-gift { text-align:center; padding:30px 0; }
.lg-present { position:relative; width:220px; height:220px; margin:24px auto; display:block; border:0; background:none; cursor:pointer; animation:lg-wobble 1.8s infinite; }
.lg-present-box { position:absolute; left:10%; right:10%; bottom:0; height:62%; border-radius:16px; background:linear-gradient(90deg, #ff7ac6 0 42%, #ffd36b 42% 58%, #ff7ac6 58%); }
.lg-present-lid { position:absolute; left:4%; right:4%; top:22%; height:20%; border-radius:12px; background:linear-gradient(90deg, #ff5fa2 0 42%, #ffe27a 42% 58%, #ff5fa2 58%); transition:transform .6s; }
.lg-present-bow { position:absolute; left:50%; top:0; transform:translateX(-50%); font-size:64px; transition:transform .6s; }
.lg-present.pop .lg-present-lid { transform:translateY(-120px) rotate(-25deg); }
.lg-present.pop .lg-present-bow { transform:translate(-50%, -160px) rotate(30deg); }
@media (max-width:760px) {
  .lg-binder { grid-template-columns:1fr 1fr; }
  .lg-bpage { grid-column:1 / -1; order:-1; gap:8px; padding:10px; }
  .lg-flip { width:100%; height:64px; }
  .lg-sheet { grid-template-columns:1fr; justify-items:center; }
  .lg-sheet-card { width:min(240px, 70vw); }
  .lg-map { height:calc(var(--rows) * 170px); }
  .lg-stop-o { width:58px; height:58px; font-size:20px; }
  .lg-stop-n { font-size:14px; max-width:80px; }
  .lg-stop { min-width:64px; }
  .lg-movebar { top:140px; }
  .lg-wallet { font-size:20px; }
}