/* ArcSpirit website — same Sticker Book HUD as battle.css / arena.css.
   3px ink + 6px white margin + 3px ink, hard shadow; Lilita One + Baloo 2; nothing tilted. */
:root{--paper:#FBEFD9;--card:#FFFDF7;--brown:#6B4A32;--plate:#FFF8E7;--nav-h:56px}
html{scroll-behavior:smooth}
body.land{font-family:'Baloo 2',system-ui,sans-serif;color:var(--ink);background:var(--paper);overflow-x:hidden;min-height:100%}
body.land h1,body.land h2,body.land h3,.lt{font-family:'Lilita One','Baloo 2',sans-serif;font-weight:400;letter-spacing:.5px;line-height:1.05}
body.land a{color:inherit;text-decoration:none}
body.land img{max-width:100%}

/* Sticker (identical recipe to the game HUD) */
.sticker{--fill:var(--white);background:var(--fill);border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 0 0 6px var(--white),0 0 0 9px var(--ink),5px 5px 0 9px var(--ink)}
.sticker.sm{border-radius:12px;box-shadow:0 0 0 4px var(--white),0 0 0 7px var(--ink),4px 4px 0 7px var(--ink)}

/* ===== Site nav: same bar the player sees inside the game (#site-nav) ===== */
header.site{position:sticky;top:0;z-index:200;height:var(--nav-h);display:flex;align-items:center;gap:18px;
  padding:0 18px;background:#14141c;border-bottom:3px solid var(--violet);color:#fff}
.site .logo{display:flex;align-items:center;gap:9px;font-family:'Lilita One',sans-serif;font-size:23px;letter-spacing:.5px;white-space:nowrap;color:#fff}
.site .logo b{color:var(--yellow);font-weight:400}
.site .logo svg,.site .logo .logo-ico{flex:none;width:34px;height:34px;object-fit:contain;border-radius:0;background:transparent;border:0;box-shadow:none}
.site nav{display:flex;gap:4px;align-items:center;overflow-x:auto;scrollbar-width:none}
.site nav::-webkit-scrollbar{display:none}
.site nav a,.site nav span.soon{font:800 14px/1 'Baloo 2',sans-serif;text-transform:uppercase;padding:7px 12px;border-radius:10px;
  color:#b9b3d6;border:2px solid transparent;white-space:nowrap}
.site nav a.on{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.site nav a:hover:not(.on){background:var(--violet);color:#fff}
.site nav span.soon{color:#8e88b0;cursor:default;pointer-events:none;user-select:none}
.site nav span.soon small{font-size:10px;margin-left:4px;color:var(--pink);text-transform:uppercase}
.site .sp{flex:1}
.site .chip-d{display:flex;align-items:center;gap:8px;font:800 13px 'Baloo 2';color:#fff;border:2px solid #43307A;border-radius:10px;padding:5px 10px;white-space:nowrap}
.site .chip-d .dot{width:9px;height:9px;border-radius:50%;background:var(--grass);border:2px solid #0d0d14}
@media(max-width:820px){.site .chip-d.net{display:none}}
@media(max-width:600px){
  header.site{gap:10px;padding:0 10px}
  .site .logo{font-size:19px}.site .logo svg{width:26px;height:26px}
  .site .logo .full{display:none}
  .site nav a,.site nav span.soon{padding:6px 8px;font-size:12.5px}
  .site nav span.soon small{display:none}
  .site .chip-d{display:none}
}

/* ===== Buttons: travel-dialog / skill stickers ===== */
.gbtn{--fill:var(--yellow);display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:800 18px/1 'Baloo 2',sans-serif;color:var(--ink);padding:12px 22px;border:3px solid var(--ink);border-radius:14px;background:var(--fill);
  box-shadow:0 0 0 5px var(--white),0 0 0 8px var(--ink),4px 4px 0 8px var(--ink);transition:transform .06s,box-shadow .06s;margin:8px}
.gbtn:hover{filter:brightness(1.05)}
.gbtn:active{transform:translate(3px,3px);box-shadow:0 0 0 5px var(--white),0 0 0 8px var(--ink),1px 1px 0 8px var(--ink)}
.gbtn.alt{--fill:var(--white)}
.gbtn.sky{--fill:var(--sky)}
.gbtn.pink{--fill:var(--pink)}
.gbtn .k{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#fff;border:2px solid var(--ink);font:400 14px 'Lilita One'}

/* Tags like the in-game wild nameplates */
.tag{display:inline-block;white-space:nowrap;font:800 12px/16px 'Baloo 2';background:#fff;border:2px solid var(--ink);border-radius:8px;padding:0 7px}
.tag.rare{background:#FFE79A}
.chip{--fill:var(--cream);display:inline-block;padding:2px 12px;font:800 13px/24px 'Baloo 2';white-space:nowrap;background:var(--fill);
  border:3px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink)}
.lv{--fill:#FFE08A}

/* Type badges (style_guide.md) */
.ty{display:inline-block;font:800 11px/18px 'Baloo 2';text-transform:uppercase;letter-spacing:.4px;padding:0 8px;border:2px solid var(--ink);border-radius:8px}
.ty.fire{background:#F6A38A}.ty.water{background:#A9DDF0}.ty.grass{background:#BFDDA0}
.ty.electric{background:#F8E391}.ty.rock{background:#D9C3A0}.ty.shadow{background:#C8B3E6}

/* Outlined game title text (like SUPER EFFECTIVE / VICTORY!) */
.ink-title{font-family:'Lilita One',sans-serif;color:var(--yellow);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;
  text-shadow:4px 4px 0 var(--ink)}

/* ===== HERO: live pan across the real Shiosaka map ===== */
.hero{position:relative;overflow:hidden;min-height:clamp(620px,86vh,780px);background:#A9C064;border-bottom:3px solid var(--ink)}
.hero .map{position:absolute;left:0;top:0;width:150%;height:150%;
  background:url(assets/map-shiosaka-2400.webp) center/cover no-repeat;
  animation:pan 70s ease-in-out infinite alternate;will-change:transform}
@keyframes pan{0%{transform:translate3d(-4%,-6%,0)}50%{transform:translate3d(-28%,-12%,0)}100%{transform:translate3d(-18%,-30%,0)}}
@media(max-width:700px){.hero .map{background-image:url(assets/map-shiosaka-1400.webp);background-image:image-set(url(assets/map-shiosaka-1400.webp) 1x,url(assets/map-shiosaka-2400.webp) 2x);/* HD-RES */width:260%;height:150%}
  @keyframes pan{0%{transform:translate3d(-10%,-8%,0)}100%{transform:translate3d(-55%,-28%,0)}}}
@media(prefers-reduced-motion:reduce){.hero .map{animation:none;transform:translate3d(-20%,-15%,0)}}
.hero .shade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 50% at 28% 42%,rgba(255,248,231,.18) 0%,rgba(255,248,231,0) 55%),
             linear-gradient(90deg,rgba(26,26,36,.28) 0%,rgba(26,26,36,.08) 45%,rgba(26,26,36,.05) 100%),
             linear-gradient(180deg,rgba(26,26,36,.12),rgba(26,26,36,0) 28%,rgba(26,26,36,0) 72%,rgba(26,26,36,.22))}
.hero .wrap{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:clamp(56px,10vh,110px) 24px 72px;display:flex;align-items:center;min-height:inherit}
.hero .panel{--fill:var(--plate);max-width:540px;width:100%;padding:24px 26px 22px;margin:9px}
.hero .eyebrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.hero h1{font-size:clamp(46px,6.4vw,78px);margin:0 0 4px}
.hero h1 .sub{display:block;font-size:.42em;color:var(--ink);-webkit-text-stroke:0;text-shadow:none;letter-spacing:1px;margin-top:6px}
.hero .lead{font:700 17px/1.5 'Baloo 2';color:#4A3C34;margin:12px 0 4px}
.hero .cta{display:flex;flex-wrap:wrap;gap:6px;margin:14px -8px 0}
.status{font:800 14px/1.4 'Baloo 2';color:#43307A;margin-top:12px}
.status b{background:var(--yellow);border:2px solid var(--ink);border-radius:6px;padding:0 6px;color:var(--ink)}
.status a{text-decoration:underline}

/* Stage: real sprites standing ON the map, foot-anchored with in-game contact shadows */
.stage{position:relative;align-self:end;height:440px}
.ent{position:absolute;bottom:0;transform:translateX(-50%)}
.ent img{display:block;height:var(--h);width:auto;position:relative;z-index:2;transform-origin:50% 100%;animation:idle 2.6s ease-in-out infinite;animation-delay:var(--d,0s);-webkit-user-drag:none;user-select:none}
.ent.flip img{scale:-1 1}
.ent.fly img{animation-name:hover}
.ent .cs{position:absolute;left:50%;bottom:calc(var(--h)*-0.05);width:calc(var(--h)*.62);height:calc(var(--h)*.14);transform:translateX(-50%);border-radius:50%;z-index:1;
  background:radial-gradient(closest-side,rgba(46,34,30,.58) 0%,rgba(46,34,30,.40) 40%,rgba(46,34,30,.16) 72%,rgba(46,34,30,0) 100%);
  animation:shadow 2.6s ease-in-out infinite;animation-delay:var(--d,0s)}
.ent.fly .cs{animation-name:shadowfly;opacity:.75}
.ent .tag{position:absolute;left:50%;top:-12px;transform:translateX(-50%);z-index:3;box-shadow:2px 2px 0 var(--ink)}
.ent .tag i{font-style:normal;color:#1F8A84}
@keyframes idle{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.975) translateY(1px)}}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes shadow{0%,100%{opacity:1}50%{opacity:.9}}
@keyframes shadowfly{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(.82)}}
@media(max-width:960px){
  .hero{min-height:clamp(520px,78vh,680px)}
  .hero .wrap{padding:28px 14px 40px;align-items:flex-start}
  .hero .panel{padding:18px 18px 16px;max-width:100%}
}

/* ===== Sections ===== */
.sec{padding:64px 20px;position:relative}
.sec .in{max-width:1200px;margin:0 auto}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.sec-head h2{font-size:clamp(34px,4.6vw,52px)}
.sec-head p{font:700 16px/1.45 'Baloo 2';color:#4A3C34;max-width:34em}
.sec.dark{background:#1d1626;color:#fff}
.sec.dark .sec-head p{color:#d7d2ee}
.sec.grass{background:#A9C064 url(assets/zone-aurora.webp) center/cover;background-blend-mode:soft-light}
.sec.sky{background:linear-gradient(180deg,#CFEFFF,#A9DDF0)}
@media(max-width:600px){.sec{padding:44px 14px}.sec-head{margin-bottom:22px}}

/* Battle: video inside an arena-style HUD frame */
.arena-frame{--fill:#2a2233;padding:12px;margin:9px}
.arena-frame .top{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:2px 0 14px}
.arena-frame video{display:block;width:100%;aspect-ratio:16/9;border:3px solid var(--ink);border-radius:12px;background:#000;object-fit:cover}
.arena-frame .skills{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:18px 0 6px}
.sk{--fill:var(--orange);width:86px;height:80px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px}
.sk.water{--fill:var(--sky)}.sk.guard{--fill:var(--cream)}.sk.ult{--fill:#E3B5F0}
.sk .key{position:absolute;left:-12px;top:-12px;width:26px;height:26px;border-radius:8px;background:#fff;border:3px solid var(--ink);font:400 15px 'Lilita One';display:grid;place-items:center}
.sk .ico{font-size:28px;line-height:1;margin-bottom:6px}
.sk .label{font:800 11.5px/1 'Baloo 2';background:#fff;border:2px solid var(--ink);border-radius:6px;padding:2px 5px;white-space:nowrap}
.sk.ult .label{background:var(--yellow)}
.sk.catch{--fill:#e8e4ee;border-radius:50%;width:80px}
@media(max-width:600px){.arena-frame{padding:8px}.sk{width:64px;height:62px}.sk .ico{font-size:20px}.sk .label{font-size:10px}.arena-frame .skills{gap:14px}.arena-frame .top .chip:nth-child(n+3){display:none}}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:40px}
@media(max-width:900px){.shots{grid-template-columns:repeat(2,1fr);gap:22px}}
.shot{padding:0;overflow:hidden;margin:9px}
.shot img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.shot .cap{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:7px 10px;font:800 13px 'Baloo 2';color:var(--ink);border-top:3px solid var(--ink)}

/* Zones */
.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media(max-width:900px){.zones{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(max-width:560px){.zones{grid-template-columns:1fr}}
.zone{--fill:var(--card);overflow:hidden;margin:9px}
.zone .pic{position:relative;aspect-ratio:16/9;overflow:hidden;border-bottom:3px solid var(--ink)}
.zone .pic img{width:100%;height:100%;object-fit:cover;transition:transform 6s ease}
.zone:hover .pic img{transform:scale(1.12)}
.zone .pic .chip{position:absolute;right:10px;top:10px}
.zone .body{padding:12px 14px 14px}
.zone h3{font-size:24px;margin-bottom:4px}
.zone p{font:700 14px/1.4 'Baloo 2';color:#4A3C34}

/* Monsters */
.mons{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:26px}
@media(max-width:560px){.mons{grid-template-columns:repeat(2,1fr);gap:20px}}
.mon{--fill:var(--card);margin:7px;padding:10px 10px 12px;text-align:center;position:relative}
.mon .pic{height:150px;display:grid;place-items:end center;position:relative;margin-bottom:8px}
.mon .pic::after{content:'';position:absolute;left:50%;bottom:-2px;width:62%;height:16px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(46,34,30,.45),rgba(46,34,30,0))}
.mon .pic img{max-height:146px;max-width:100%;width:auto;position:relative;z-index:1;transition:transform .2s}
.mon:hover .pic img{transform:translateY(-6px)}
.mon .nm{font:400 19px/1.1 'Lilita One';margin-bottom:5px}
.mon .meta{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.mon.fire{--fill:#FFF0E8}.mon.water{--fill:#EEF8FD}.mon.grass{--fill:#F2F9EA}.mon.electric{--fill:#FFFAE6}.mon.rock{--fill:#F8F1E6}.mon.shadow{--fill:#F4EEFB}
@media(max-width:560px){.mon .pic{height:118px}.mon .pic img{max-height:116px}.mon .nm{font-size:17px}}

/* Split feature rows */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.split.rev{grid-template-columns:.9fr 1.1fr}
.split.rev .media{order:2}
@media(max-width:860px){.split,.split.rev{grid-template-columns:1fr}.split.rev .media{order:0}}
.media{display:grid;gap:26px}
.media.two{grid-template-columns:1fr 1fr}
@media(max-width:560px){.media.two{grid-template-columns:1fr}}
.copy{--fill:var(--plate);padding:22px 24px;margin:9px}
.copy h2{font-size:clamp(30px,4vw,44px);margin-bottom:10px}
.copy p{font:700 16px/1.5 'Baloo 2';color:#4A3C34}
.copy ul{list-style:none;margin:14px 0 0;display:grid;gap:10px}
.copy li{display:flex;gap:10px;align-items:flex-start;font:700 15px/1.4 'Baloo 2';color:#3a2f28}
.copy li .b{flex:none;width:26px;height:26px;border-radius:8px;border:3px solid var(--ink);background:var(--yellow);display:grid;place-items:center;font:400 13px 'Lilita One'}
.fish{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fish .tag{font-size:12.5px;line-height:20px;padding:0 9px}
.fish .tag.epic{background:#E3D3FA}.fish .tag.leg{background:#FFD3A8}

/* Join band */
.join{position:relative;overflow:hidden;padding:84px 20px;border-top:3px solid var(--ink);background:#A9C064}
.join .bg{position:absolute;inset:-6%;background:url(assets/plaza.webp) center/cover;background-image:image-set(url(assets/plaza.webp) 1x,url(assets/plaza@2x.webp) 2x);/* HD-RES */animation:pan2 40s ease-in-out infinite alternate}
@keyframes pan2{to{transform:scale(1.1) translate(-2%,2%)}}
.join .box{--fill:var(--plate);position:relative;z-index:1;max-width:640px;margin:0 auto;text-align:center;padding:30px 24px 24px}
.join h2{font-size:clamp(36px,5vw,56px);margin-bottom:6px}
.join p{font:700 16px/1.5 'Baloo 2';color:#4A3C34}
.join .cta{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:16px}

footer.site-ft{background:#14141c;color:#b9b3d6;border-top:3px solid var(--violet);padding:22px 20px 30px;text-align:center;font:700 13px 'Baloo 2'}
footer.site-ft b{font:400 18px 'Lilita One';color:#fff;letter-spacing:.5px}
footer.site-ft b span{color:var(--yellow)}

/* Create page */
.land-main{max-width:560px;margin:36px auto 60px;padding:0 18px}
.land-main .pad{--fill:var(--plate);padding:24px;margin:9px}
.land-main h1{font-size:38px;margin-bottom:8px}
.land-main .lead{font:700 15px/1.5 'Baloo 2';color:#4A3C34;margin-bottom:14px}
.land-main label{display:block;font:800 12px 'Baloo 2';text-transform:uppercase;color:#6b5a4a;margin-bottom:6px}
.land-main input[type=text]{width:100%;background:#fff;border:3px solid var(--ink);border-radius:12px;color:var(--ink);font:800 18px 'Baloo 2';padding:10px 12px}
.land-main .hint{font:700 12px 'Baloo 2';color:#6b5a4a;margin-top:8px}
.land-main .addr{font:800 14px 'Baloo 2';color:#43307A;margin-bottom:14px}
.land-main .err,.land-main .ok{font:800 13px 'Baloo 2';padding:8px 10px;margin-top:12px;display:none;border:3px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink)}
.land-main .err{background:var(--pink)}.land-main .ok{background:#B8F2C8}
.land-main .err.show,.land-main .ok.show{display:block}
.land-main .row{display:flex;gap:4px;margin:14px -8px 0;flex-wrap:wrap}
body.land.create{background:#A9C064 url(assets/map-shiosaka-1400.webp) center/cover fixed}
/* fixes */
.shot img,.zone .pic img{height:auto}
.zone .pic img{height:100%}
.sec.dark .chip,.sec.dark .sk,.sec.dark .tag,.sec.dark .shot .cap{color:var(--ink)}
.shot{background:var(--card)}
@media(max-width:430px){.site .logo>span{display:none}.site nav{overflow:visible}}
@media(max-width:600px){.site nav span.soon small{display:block;font-size:8px;line-height:1;margin:2px 0 0;text-align:center}.site nav span.soon{padding:3px 8px}}

/* Auth logout chip in site header */
.chip-d.chip-btn{cursor:pointer;border:0;font:inherit;color:inherit;background:rgba(0,0,0,.28)}
.chip-d.chip-btn:hover{filter:brightness(1.08)}
.chip-d.chip-btn[hidden],.site .chip-d[hidden]{display:none!important}
/* FISHING-VIDEO */
.fvid video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#7FCFEA}
.fclips{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:-8px}
.fclips .shot{margin:9px}
.fclips .cap{font-size:12px;padding:5px 8px}
.fclips .tag.leg{background:#FFD3A8}
.fcap{font:800 15px 'Baloo 2',sans-serif;color:var(--ink);margin-top:10px}
@media(max-width:560px){.fclips{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.fclips .shot{margin:7px}.fclips .cap{font-size:10.5px;padding:4px 6px}.fclips .tag{display:none}}

/* TAP-FIX: no blue tap flash / selection / callout on mobile taps (text fields keep normal behaviour) */
html,body,*,*::before,*::after{-webkit-tap-highlight-color:transparent!important;tap-highlight-color:transparent}
canvas,img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
canvas,canvas:focus,canvas:focus-visible{outline:none!important}
button,a,[role="button"]{-webkit-touch-callout:none}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),[tabindex]:focus:not(:focus-visible){outline:none}
input,textarea,select,[contenteditable],[contenteditable] *{-webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default}