/* ==========================================================================
   Free Rein - shared palette sheet (freerein.click)
   Class prefix contract : every selector class = view8a111-*
   Variable contract     : every custom property = --view8a111-*
   Canvas                : 320-430px phone frame, centered on wide screens
   Direction             : mono accents over a regular body face, mixed corner
                           radii, grouped cover cards, fact-first rhythm,
                           menu slide-in + card lift motion, solid primary
                           CTA paired with outlined secondary CTA.
   ========================================================================== */

:root{
  --view8a111-bg:#0F0F23;
  --view8a111-bg-raise:#191934;
  --view8a111-bg-deep:#0A0A1B;
  --view8a111-magenta:#8B008B;
  --view8a111-violet:#9400D3;
  --view8a111-purple:#800080;
  --view8a111-mist:#E0FFFF;
  --view8a111-silver:#CCCCCC;
  --view8a111-tint:rgba(224,255,255,.62);
  --view8a111-line:rgba(224,255,255,.18);
  --view8a111-line-soft:rgba(224,255,255,.10);
  --view8a111-font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --view8a111-font-mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --view8a111-r-xl:22px;
  --view8a111-r-lg:16px;
  --view8a111-r-md:12px;
  --view8a111-r-sm:8px;
  --view8a111-head-h:58px;
  --view8a111-tabbar-h:60px;
  --view8a111-ease:cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------ base ----------------------------------- */

*,
*::before,
*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--view8a111-bg-deep);
}

body{
  margin:0 auto;
  max-width:480px;
  min-height:100vh;
  background:var(--view8a111-bg);
  color:var(--view8a111-silver);
  font-family:var(--view8a111-font-body);
  font-size:15px;
  line-height:1.62;
  overflow-x:hidden;
  position:relative;
  transform:translateZ(0); /* makes body the containing block for fixed bars */
}

img{max-width:100%;display:block;}
a{color:var(--view8a111-mist);}
button{font:inherit;color:inherit;}
ul,ol{margin:0;padding:0;}
h1,h2,h3,h4,p{margin:0;overflow-wrap:break-word;}

::selection{background:rgba(148,0,211,.55);color:var(--view8a111-mist);}

:focus-visible{
  outline:2px solid var(--view8a111-violet);
  outline-offset:2px;
  border-radius:4px;
}

/* Wide screens keep the centered phone canvas with a framed edge. */
@media (min-width:481px){
  html{
    background:
      radial-gradient(620px 420px at 18% -10%,rgba(139,0,139,.30),transparent 62%),
      radial-gradient(560px 460px at 96% 14%,rgba(148,0,211,.16),transparent 60%),
      var(--view8a111-bg-deep);
    background-attachment:fixed;
  }
  body{
    border-inline:1px solid var(--view8a111-line-soft);
    box-shadow:0 0 46px rgba(139,0,139,.30);
  }
}

/* Body scroll lock while the layered menu is open. */
.view8a111-locked{overflow:hidden;}

/* Screen-reader only helper. */
.view8a111-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.view8a111-skip{
  position:absolute;left:10px;top:-46px;z-index:120;
  background:var(--view8a111-violet);color:#fff;
  padding:9px 14px;border-radius:0 0 10px 10px;
  font-weight:700;font-size:12.5px;text-decoration:none;
  transition:top .18s var(--view8a111-ease);
}
.view8a111-skip:focus{top:0;}

/* --------------------------- fixed top bar ------------------------------ */

.view8a111-topbar{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:rgba(15,15,35,.93);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--view8a111-line-soft);
}

.view8a111-topbar-in{
  display:flex;align-items:center;gap:7px;
  min-height:var(--view8a111-head-h);
  padding:8px 11px;
}

/* Brand zone: real logo image + site name only. */
.view8a111-brand{
  display:flex;align-items:center;gap:7px;
  min-width:0;flex:1 1 auto;
  text-decoration:none;
  color:var(--view8a111-mist);
  font-weight:800;font-size:15.5px;letter-spacing:.2px;
  white-space:nowrap;
}
.view8a111-brand img{
  width:30px;height:30px;flex:0 0 auto;
  object-fit:cover;
  border-radius:9px;
  border:1px solid var(--view8a111-line);
  background:var(--view8a111-bg-raise);
}

/* Header action area: outlined Login + solid Register + menu trigger. */
.view8a111-topbtn{
  min-height:36px;padding:0 12px;
  border-radius:999px;
  font-size:12.3px;font-weight:700;letter-spacing:.02em;
  cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--view8a111-ease),box-shadow .18s var(--view8a111-ease),background .18s;
}
.view8a111-topbtn--ghost{
  background:transparent;
  color:var(--view8a111-mist);
  border:1px solid rgba(224,255,255,.40);
}
.view8a111-topbtn--solid{
  border:0;
  color:#fff;
  background:linear-gradient(135deg,var(--view8a111-violet),var(--view8a111-magenta));
  box-shadow:0 4px 14px rgba(139,0,139,.42);
}
.view8a111-topbtn:active{transform:translateY(1px) scale(.98);}
.view8a111-topbtn--solid:hover{box-shadow:0 6px 18px rgba(148,0,211,.55);}

.view8a111-menubtn{
  width:38px;height:38px;flex:0 0 auto;
  display:grid;align-content:center;justify-items:center;gap:4px;
  border-radius:11px;
  border:1px solid var(--view8a111-line);
  background:var(--view8a111-bg-raise);
  cursor:pointer;
}
.view8a111-menubtn i{
  display:block;width:17px;height:2px;border-radius:2px;
  background:var(--view8a111-mist);
  transition:transform .26s var(--view8a111-ease),opacity .2s;
}
.view8a111-menubtn[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg);}
.view8a111-menubtn[aria-expanded="true"] i:nth-child(2){opacity:0;}
.view8a111-menubtn[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ------------------------- layered slide-in menu ------------------------ */

.view8a111-scrim{
  position:fixed;inset:0;z-index:90;
  background:rgba(10,10,27,.68);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;
  transition:opacity .28s var(--view8a111-ease),visibility .28s;
}
.view8a111-scrim.is-on{opacity:1;visibility:visible;}

.view8a111-menu{
  position:fixed;top:0;right:0;bottom:0;z-index:100;
  width:min(84vw,326px);
  background:var(--view8a111-bg-deep);
  border-left:1px solid var(--view8a111-line-soft);
  box-shadow:-18px 0 40px rgba(10,10,27,.6);
  transform:translateX(103%);
  transition:transform .3s var(--view8a111-ease);
  display:flex;flex-direction:column;
  padding:14px 13px 18px;
  overflow-y:auto;
}
.view8a111-menu.is-open{transform:none;}

.view8a111-menu-head{
  display:flex;align-items:center;gap:8px;
  padding-bottom:12px;
  border-bottom:1px solid var(--view8a111-line-soft);
}
.view8a111-menu-head .view8a111-brand{font-size:14.5px;}
.view8a111-menu-close{
  margin-left:auto;
  width:36px;height:36px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:10px;
  border:1px solid var(--view8a111-line);
  background:var(--view8a111-bg-raise);
  color:var(--view8a111-mist);
  font-size:16px;font-weight:700;line-height:1;
  cursor:pointer;
}

.view8a111-menu-group{margin-top:15px;}
.view8a111-menu-group h3{
  margin:0 0 7px;
  font-family:var(--view8a111-font-mono);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--view8a111-tint);
}
.view8a111-menu-group a{
  display:flex;align-items:center;gap:9px;
  min-height:46px;
  padding:0 11px;
  border-radius:11px;
  border:1px solid transparent;
  text-decoration:none;
  color:var(--view8a111-silver);
  font-size:13.4px;font-weight:600;
  transition:background .18s,color .18s,border-color .18s;
}
.view8a111-menu-group a::after{
  content:"›";
  margin-left:auto;
  font-family:var(--view8a111-font-mono);
  color:rgba(224,255,255,.38);
  font-size:15px;
}
.view8a111-menu-group a:hover,
.view8a111-menu-group a:focus-visible{
  background:rgba(128,0,128,.28);
  border-color:rgba(148,0,211,.45);
  color:var(--view8a111-mist);
}

.view8a111-menu-cta{
  margin-top:auto;padding-top:16px;
}
.view8a111-menu-cta button{
  width:100%;
  min-height:46px;
  border:0;border-radius:999px;
  background:linear-gradient(135deg,var(--view8a111-violet),var(--view8a111-magenta));
  color:#fff;font-weight:800;font-size:13.5px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(139,0,139,.45);
}

/* ------------------------------- layout --------------------------------- */

.view8a111-main{
  padding:calc(var(--view8a111-head-h) + 12px) 14px calc(var(--view8a111-tabbar-h) + 34px + env(safe-area-inset-bottom));
}

.view8a111-h1{
  font-size:19px;line-height:1.32;font-weight:800;
  color:var(--view8a111-mist);
  margin:2px 0 7px;
}
.view8a111-sub{
  font-size:12.6px;color:var(--view8a111-silver);
  margin-bottom:13px;
}

/* ------------------------------- hero ----------------------------------- */

.view8a111-hero{
  position:relative;
  border-radius:var(--view8a111-r-xl) var(--view8a111-r-lg) var(--view8a111-r-lg) var(--view8a111-r-xl);
  overflow:hidden;
  border:1px solid var(--view8a111-line-soft);
  background:var(--view8a111-bg-deep);
  margin-bottom:13px;
  touch-action:pan-y;
}
.view8a111-hero-track{position:relative;aspect-ratio:16/9;}

.view8a111-slide{
  position:absolute;inset:0;
  width:100%;border:0;padding:0;
  background:var(--view8a111-bg-deep);
  text-align:left;
  opacity:0;visibility:hidden;
  cursor:pointer;
  transition:opacity .55s var(--view8a111-ease),visibility .55s;
}
.view8a111-slide.is-on{opacity:1;visibility:visible;}
.view8a111-slide img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.view8a111-slide-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,27,.18) 0%,rgba(10,10,27,.62) 56%,rgba(10,10,27,.94) 100%);
}
.view8a111-slide-copy{
  position:absolute;inset:auto 0 0 0;
  padding:12px 14px 13px;
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
}
.view8a111-kicker{
  font-family:var(--view8a111-font-mono);
  font-size:9.6px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(224,255,255,.82);
  background:rgba(128,0,128,.42);
  border:1px solid rgba(148,0,211,.5);
  border-radius:6px;padding:3px 7px;
}
.view8a111-slide-copy h3{
  font-size:16px;line-height:1.34;font-weight:800;
  color:var(--view8a111-mist);
}
.view8a111-slide-copy p{
  font-size:11.8px;line-height:1.5;
  color:rgba(204,204,204,.94);
}
.view8a111-cta{
  min-height:38px;padding:0 16px;
  border:0;border-radius:999px;
  background:linear-gradient(135deg,var(--view8a111-violet),var(--view8a111-magenta));
  color:#fff;font-size:12.6px;font-weight:800;letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 5px 16px rgba(139,0,139,.5);
  transition:transform .18s var(--view8a111-ease),box-shadow .18s;
}
.view8a111-cta:hover{box-shadow:0 7px 20px rgba(148,0,211,.6);}
.view8a111-cta:active{transform:translateY(1px) scale(.98);}

.view8a111-dots{
  position:absolute;top:10px;right:12px;z-index:3;
  display:flex;gap:6px;
}
.view8a111-dot{
  width:8px;height:8px;padding:0;border:0;
  border-radius:999px;
  background:rgba(224,255,255,.36);
  cursor:pointer;
  transition:width .24s var(--view8a111-ease),background .24s;
}
.view8a111-dot.is-on{width:20px;background:var(--view8a111-mist);}

/* ----------------------------- fact strip ------------------------------- */

.view8a111-facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin:0 0 13px;
}
.view8a111-fact{
  background:var(--view8a111-bg-raise);
  border:1px solid var(--view8a111-line-soft);
  border-radius:var(--view8a111-r-md);
  padding:8px 4px;text-align:center;
}
.view8a111-fact b{
  display:block;
  font-family:var(--view8a111-font-mono);
  font-size:14.5px;line-height:1.25;
  color:var(--view8a111-mist);
}
.view8a111-fact span{
  display:block;
  font-size:9.7px;line-height:1.3;
  color:var(--view8a111-tint);
}

/* ------------------------------ chips row ------------------------------- */

.view8a111-chips{
  display:flex;gap:8px;
  overflow-x:auto;
  padding:2px 2px 11px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.view8a111-chips::-webkit-scrollbar{display:none;}
.view8a111-chip{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:6px;
  min-height:36px;padding:0 13px;
  border-radius:999px;
  border:1px solid var(--view8a111-line);
  background:var(--view8a111-bg-raise);
  color:var(--view8a111-silver);
  text-decoration:none;
  font-size:12.4px;font-weight:700;
  transition:background .18s,color .18s,border-color .18s;
}
.view8a111-chip em{
  font-style:normal;
  font-family:var(--view8a111-font-mono);
  font-size:9.6px;color:rgba(224,255,255,.55);
}
.view8a111-chip:hover,
.view8a111-chip:focus-visible{
  color:var(--view8a111-mist);
  border-color:rgba(148,0,211,.55);
  background:rgba(128,0,128,.30);
}

/* ------------------------------ find box -------------------------------- */

.view8a111-find{
  display:flex;align-items:center;gap:8px;
  margin:0 0 16px;
}
.view8a111-find input{
  flex:1;min-width:0;min-height:42px;
  padding:0 12px;
  border-radius:var(--view8a111-r-md);
  border:1px solid var(--view8a111-line);
  background:var(--view8a111-bg-deep);
  color:var(--view8a111-mist);
  font-family:inherit;font-size:13.4px;
}
.view8a111-find input::placeholder{color:rgba(204,204,204,.55);}
.view8a111-find-count{
  flex:0 0 auto;
  font-family:var(--view8a111-font-mono);
  font-size:10.6px;
  color:var(--view8a111-mist);
  background:rgba(128,0,128,.30);
  border:1px solid rgba(148,0,211,.42);
  border-radius:999px;
  padding:6px 10px;
  white-space:nowrap;
}

/* --------------------------- grouped game halls ------------------------- */

.view8a111-hall{
  border:1px solid var(--view8a111-line-soft);
  border-radius:var(--view8a111-r-xl) 30px var(--view8a111-r-lg) var(--view8a111-r-lg);
  background:
    linear-gradient(180deg,rgba(148,0,211,.12),rgba(148,0,211,0) 46%),
    var(--view8a111-bg-raise);
  padding:14px 11px 16px;
  margin-bottom:17px;
  scroll-margin-top:calc(var(--view8a111-head-h) + 14px);
}
.view8a111-hall-empty{display:none;}

.view8a111-hall-head{
  display:flex;align-items:baseline;gap:8px;
  margin-bottom:6px;
}
.view8a111-hall-no{
  flex:0 0 auto;
  font-family:var(--view8a111-font-mono);
  font-size:10.5px;letter-spacing:.08em;
  color:rgba(224,255,255,.58);
  border-bottom:2px solid var(--view8a111-violet);
  padding-bottom:2px;
}
.view8a111-hall h2{
  font-size:17.4px;line-height:1.34;font-weight:800;
  color:var(--view8a111-mist);
}
.view8a111-hall-intro{
  font-size:13px;line-height:1.62;
  color:var(--view8a111-silver);
  margin:5px 0 9px;
}
.view8a111-hall-intro a{
  color:var(--view8a111-mist);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:rgba(148,0,211,.7);
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}
.view8a111-hall-meta{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 12px;
}
.view8a111-hall-meta span{
  font-family:var(--view8a111-font-mono);
  font-size:10.3px;letter-spacing:.04em;
  color:var(--view8a111-mist);
  background:rgba(128,0,128,.24);
  border:1px solid rgba(148,0,211,.38);
  border-radius:7px;
  padding:3px 8px;
}

/* Game grid: 4 tracks at 320px, 5 tracks from 414px up. */
.view8a111-grid{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:11px 8px;
}
.view8a111-grid li{margin:0;padding:0;list-style:none;}

.view8a111-card{
  display:flex;flex-direction:column;
  width:100%;padding:0;border:0;
  background:transparent;
  text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .22s var(--view8a111-ease);
}
.view8a111-card:hover,
.view8a111-card:focus-visible{
  transform:translateY(-3px);
}
.view8a111-card:active{transform:translateY(-1px) scale(.97);}

.view8a111-card-cover{
  position:relative;display:block;
  aspect-ratio:1/1;
  border-radius:var(--view8a111-r-md) var(--view8a111-r-md) 9px 9px;
  overflow:hidden;
  border:1px solid var(--view8a111-line-soft);
  background:var(--view8a111-bg-deep);
}
.view8a111-card-cover img{
  width:100%;height:100%;
  object-fit:cover;
}
.view8a111-card-flag{
  position:absolute;top:5px;left:5px;
  font-family:var(--view8a111-font-mono);
  font-size:8.4px;letter-spacing:.1em;font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,var(--view8a111-violet),var(--view8a111-magenta));
  border-radius:6px;
  padding:2px 5px;
}
.view8a111-card-name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
  margin-top:5px;
  font-size:10.8px;line-height:1.32;font-weight:600;
  color:var(--view8a111-silver);
}

/* --------------------------- content modules ---------------------------- */

.view8a111-block{
  margin:0 0 21px;
  scroll-margin-top:calc(var(--view8a111-head-h) + 14px);
}
.view8a111-block>h2{
  font-size:17px;line-height:1.36;font-weight:800;
  color:var(--view8a111-mist);
  margin-bottom:8px;
  padding-left:10px;
  border-left:3px solid var(--view8a111-violet);
}
.view8a111-lead{
  font-size:13.4px;line-height:1.62;
  color:var(--view8a111-silver);
  margin-bottom:9px;
}
.view8a111-lead strong{color:var(--view8a111-mist);}
.view8a111-prose p{
  font-size:12.9px;line-height:1.66;
  color:var(--view8a111-silver);
  margin-bottom:9px;
}
.view8a111-prose p strong{color:var(--view8a111-mist);}
.view8a111-prose a{
  color:var(--view8a111-mist);font-weight:700;
  text-decoration:underline;
  text-decoration-color:rgba(148,0,211,.7);
  text-underline-offset:3px;
}

/* Milestone tiles (fact-first expandable rhythm). */
.view8a111-milestones{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
  margin-top:10px;
}
.view8a111-milestone{
  background:var(--view8a111-bg-raise);
  border:1px solid var(--view8a111-line-soft);
  border-left:3px solid var(--view8a111-violet);
  border-radius:10px;
  padding:9px 10px;
}
.view8a111-milestone b{
  display:block;
  font-family:var(--view8a111-font-mono);
  font-size:11.6px;letter-spacing:.06em;
  color:var(--view8a111-mist);
  margin-bottom:3px;
}
.view8a111-milestone span{
  font-size:11.4px;line-height:1.5;
  color:var(--view8a111-silver);
}

/* Numbered step list with mono counters. */
.view8a111-steps{
  list-style:none;
  counter-reset:view8a111step;
  margin-top:4px;
}
.view8a111-steps li{
  position:relative;
  counter-increment:view8a111step;
  padding:0 0 11px 36px;
  font-size:12.9px;line-height:1.6;
  color:var(--view8a111-silver);
}
.view8a111-steps li::before{
  content:counter(view8a111step,decimal-leading-zero);
  position:absolute;left:0;top:1px;
  width:25px;height:25px;
  display:grid;place-items:center;
  font-family:var(--view8a111-font-mono);
  font-size:10.4px;
  color:var(--view8a111-mist);
  background:rgba(128,0,128,.32);
  border:1px solid rgba(148,0,211,.42);
  border-radius:var(--view8a111-r-sm);
}

/* FAQ accordions: summary line first, answer expands below. */
.view8a111-faq details{
  background:var(--view8a111-bg-raise);
  border:1px solid var(--view8a111-line-soft);
  border-radius:var(--view8a111-r-md);
  margin-bottom:8px;
  overflow:hidden;
}
.view8a111-faq summary{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:flex-start;gap:9px;
  min-height:46px;
  padding:11px 12px;
  font-size:13.1px;line-height:1.45;font-weight:700;
  color:var(--view8a111-mist);
}
.view8a111-faq summary::-webkit-details-marker{display:none;}
.view8a111-faq summary::after{
  content:"+";
  margin-left:auto;flex:0 0 auto;
  font-family:var(--view8a111-font-mono);
  font-size:15px;line-height:1;
  color:rgba(224,255,255,.66);
}
.view8a111-faq details[open] summary::after{content:"–";}
.view8a111-faq-a{
  padding:0 12px 12px;
  font-size:12.7px;line-height:1.64;
  color:var(--view8a111-silver);
}

/* ------------------------- extended footer block ------------------------ */

.view8a111-ext{
  border-top:1px solid var(--view8a111-line-soft);
  margin-top:23px;
  padding-top:15px;
}
.view8a111-ext h2{
  font-size:16.4px;line-height:1.36;font-weight:800;
  color:var(--view8a111-mist);
  margin-bottom:8px;
}
.view8a111-ext-brand p{
  font-size:12.6px;line-height:1.6;
  color:var(--view8a111-silver);
  margin-bottom:10px;
}

/* Horizontal promo shortcuts: 6 distinct campaign entries. */
.view8a111-shorts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
  margin:0 0 15px;
}
.view8a111-short{
  display:flex;align-items:center;gap:8px;
  min-height:46px;padding:0 10px;
  border-radius:11px;
  border:1px solid rgba(148,0,211,.48);
  background:linear-gradient(135deg,rgba(148,0,211,.22),rgba(139,0,139,.10));
  color:var(--view8a111-mist);
  font-size:12.1px;font-weight:700;line-height:1.3;
  text-align:left;
  cursor:pointer;
  transition:transform .18s var(--view8a111-ease),background .18s;
}
.view8a111-short:hover{background:linear-gradient(135deg,rgba(148,0,211,.32),rgba(139,0,139,.18));}
.view8a111-short:active{transform:translateY(1px) scale(.98);}
.view8a111-short svg{
  flex:0 0 auto;width:16px;height:16px;
  stroke:var(--view8a111-mist);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

/* Page directory: every internal route appears once. */
.view8a111-dir h3{
  margin:0 0 8px;
  font-family:var(--view8a111-font-mono);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--view8a111-tint);
}
.view8a111-dir ul{
  list-style:none;
  display:grid;grid-template-columns:repeat(2,1fr);gap:7px 12px;
  margin-bottom:15px;
}
.view8a111-dir a{
  display:inline-block;
  font-size:12.2px;font-weight:600;
  color:var(--view8a111-silver);
  text-decoration:none;
  border-bottom:1px dashed rgba(224,255,255,.22);
  padding-bottom:2px;
  transition:color .18s,border-color .18s;
}
.view8a111-dir a:hover,
.view8a111-dir a:focus-visible{
  color:var(--view8a111-mist);
  border-color:rgba(148,0,211,.7);
}

.view8a111-note{
  border:1px dashed rgba(224,255,255,.26);
  border-radius:var(--view8a111-r-md);
  background:rgba(10,10,27,.55);
  padding:10px 12px;
  font-size:11.4px;line-height:1.6;
  color:rgba(204,204,204,.88);
}

/* ------------------------------ copyright ------------------------------- */

.view8a111-foot{
  margin-top:15px;
  padding:13px 0 4px;
  border-top:1px solid var(--view8a111-line-soft);
  text-align:center;
  font-family:var(--view8a111-font-mono);
  font-size:10.4px;letter-spacing:.05em;
  color:rgba(204,204,204,.74);
}

/* --------------------------- mobile bottom nav -------------------------- */

.view8a111-tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:85;
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:2px;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  background:rgba(10,10,27,.96);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--view8a111-line-soft);
}
.view8a111-tab{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:50px;
  padding:5px 2px;
  border:0;border-radius:12px;
  background:transparent;
  text-decoration:none;
  color:rgba(204,204,204,.82);
  cursor:pointer;
  transition:color .2s,background .2s;
}
.view8a111-tab svg{
  width:22px;height:22px;
  stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .26s var(--view8a111-ease),fill .2s;
}
.view8a111-tab span{
  font-size:9.8px;font-weight:700;letter-spacing:.01em;
  white-space:nowrap;
}
.view8a111-tab--promo{color:#DDA6FF;}
.view8a111-tab.is-active{
  color:var(--view8a111-mist);
  background:rgba(128,0,128,.34); /* background support block for active tab */
}
.view8a111-tab.is-active svg{
  transform:translateY(-1px) scale(1.08);
  fill:rgba(224,255,255,.18); /* filled variant of the line icon */
}
.view8a111-tab:active svg{transform:scale(.9);}

/* ------------------------------ breakpoints ----------------------------- */

@media (min-width:375px){
  .view8a111-main{padding-left:16px;padding-right:16px;}
  .view8a111-hall{padding:15px 13px 17px;}
  .view8a111-hall h2{font-size:18px;}
  .view8a111-slide-copy h3{font-size:16.6px;}
}

/* Five game tracks once the canvas reaches 414px. */
@media (min-width:414px){
  .view8a111-grid{grid-template-columns:repeat(5,1fr);gap:12px 10px;}
}

/* Literal 430px checkpoint: compact rhythm for small phones. */
@media (max-width: 430px){
  .view8a111-topbar-in{gap:6px;padding:8px 10px;}
  .view8a111-topbtn{padding:0 10px;font-size:11.9px;}
  .view8a111-main{padding-left:12px;padding-right:12px;}
  .view8a111-h1{font-size:18px;}
  .view8a111-slide-copy h3{font-size:15.2px;}
  .view8a111-slide-copy p{font-size:11.4px;}
  .view8a111-fact b{font-size:13.6px;}
  .view8a111-hall{padding:13px 10px 15px;}
  .view8a111-hall h2{font-size:16.8px;}
  .view8a111-card-name{font-size:10.3px;}
  .view8a111-grid{gap:10px 7px;}
  .view8a111-tab span{font-size:9.4px;}
  .view8a111-short{font-size:11.7px;}
}

/* Very narrow canvas (320px): protect the header action row. */
@media (max-width:352px){
  .view8a111-topbtn{padding:0 8px;font-size:11.4px;}
  .view8a111-brand{font-size:14.4px;}
  .view8a111-brand img{width:27px;height:27px;}
  .view8a111-facts{gap:6px;}
  .view8a111-fact b{font-size:12.8px;}
}

/* --------------------------- motion preferences ------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,
  *::before,
  *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .view8a111-menu{transition:none;}
}