/* ============================================================
   fbb77.click  ·  compact-588a06-interface.css
   Mobile-first (320-430px) interface sheet.
   Palette: #1C2833 base / #FFC0CB accent / #C0C0C0 ink / #4A4A4A line
   Direction: mono accents + regular body, low-radius sectioned panels,
   compact square game directory, lede-then-sections rhythm,
   restrained fade feedback, segmented action buttons.
   All classes & variables carry the ui88a06- prefix.
   ============================================================ */

:root{
  --ui88a06-bg:#1C2833;
  --ui88a06-bg-deep:#141D26;
  --ui88a06-bg-raise:#223140;
  --ui88a06-panel:#1F2B38;
  --ui88a06-panel-soft:rgba(192,192,192,.05);
  --ui88a06-line:#4A4A4A;
  --ui88a06-line-soft:rgba(74,74,74,.55);
  --ui88a06-line-faint:rgba(74,74,74,.32);
  --ui88a06-ink:#C0C0C0;
  --ui88a06-ink-bright:#E9EDEF;
  --ui88a06-ink-dim:#8C98A3;
  --ui88a06-accent:#FFC0CB;
  --ui88a06-accent-soft:rgba(255,192,203,.16);
  --ui88a06-accent-line:rgba(255,192,203,.45);
  --ui88a06-mono:"ui-monospace","SFMono-Regular","Cascadia Mono","Consolas","Courier New",monospace;
  --ui88a06-body:"Segoe UI","Noto Sans Bengali","Hind Siliguri","SolaimanLipi",system-ui,-apple-system,"Arial",sans-serif;
  --ui88a06-shell:480px;
  --ui88a06-radius:3px;
  --ui88a06-top-h:106px;
  --ui88a06-bottom-h:92px;
  --ui88a06-gutter:14px;
}

/* ---------- reset-ish base ---------- */
html{ -webkit-text-size-adjust:100%; }
*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--ui88a06-bg-deep);
  color:var(--ui88a06-ink);
  font-family:var(--ui88a06-body);
  font-size:15px;
  line-height:1.7;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
button{
  font-family:inherit;
  color:inherit;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}
a{ color:var(--ui88a06-accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ margin:0; font-weight:700; }
p{ margin:0 0 12px; }
p:last-child{ margin-bottom:0; }
ul{ margin:0; padding:0; list-style:none; }

/* centred phone canvas used on wide screens */
.ui88a06-wrap{
  width:100%;
  max-width:var(--ui88a06-shell);
  margin:0 auto;
}

/* ---------- fixed top bar: brand row + action row ---------- */
.ui88a06-topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:60;
  background:linear-gradient(180deg,#1C2833 0%,#182430 100%);
  border-bottom:1px solid var(--ui88a06-line-soft);
  box-shadow:0 1px 0 rgba(0,0,0,.35);
}
.ui88a06-toprow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px var(--ui88a06-gutter) 7px;
}
.ui88a06-brand{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  text-decoration:none;
}
.ui88a06-brand:hover{ text-decoration:none; }
.ui88a06-logo{
  width:36px; height:36px;
  flex:0 0 auto;
  border:1px solid var(--ui88a06-accent-line);
  border-radius:var(--ui88a06-radius);
  object-fit:cover;
  background:#0F161D;
}
.ui88a06-brandname{
  font-family:var(--ui88a06-mono);
  font-size:21px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ui88a06-ink-bright);
  white-space:nowrap;
}
.ui88a06-brandname b{ color:var(--ui88a06-accent); font-weight:700; }
.ui88a06-actions{
  display:flex;
  align-items:stretch;
  gap:8px;
  padding:0 var(--ui88a06-gutter) 10px;
}
/* segmented register/login control */
.ui88a06-seg{
  display:flex;
  flex:1 1 auto;
  border:1px solid var(--ui88a06-line);
  border-radius:var(--ui88a06-radius);
  overflow:hidden;
  background:var(--ui88a06-panel);
}
.ui88a06-segbtn{
  flex:1 1 50%;
  min-height:44px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:box-shadow .18s ease, background .18s ease;
}
.ui88a06-segbtn:hover{ text-decoration:none; }
.ui88a06-regbtn{
  background:var(--ui88a06-accent);
  color:#1C2833;
}
.ui88a06-regbtn:hover{
  background:#FFCBD4;
  box-shadow:0 0 12px var(--ui88a06-accent-soft);
}
.ui88a06-loginbtn{
  color:var(--ui88a06-ink);
  border-left:1px solid var(--ui88a06-line);
  background:transparent;
}
.ui88a06-loginbtn:hover{
  background:var(--ui88a06-panel-soft);
  color:var(--ui88a06-ink-bright);
}
.ui88a06-menubtn{
  flex:0 0 52px;
  min-height:44px;
  border:1px solid var(--ui88a06-line);
  border-radius:var(--ui88a06-radius);
  background:var(--ui88a06-panel);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.ui88a06-menubtn:hover{ background:var(--ui88a06-panel-soft); }
.ui88a06-burger{
  display:block;
  width:20px; height:2px;
  background:var(--ui88a06-accent);
  border-radius:1px;
}
.ui88a06-burger + .ui88a06-burger{ width:14px; }
.ui88a06-menulabel{
  font-family:var(--ui88a06-mono);
  font-size:9px;
  letter-spacing:.14em;
  color:var(--ui88a06-ink-dim);
  text-transform:uppercase;
}

/* ---------- slide-up route sheet ---------- */
.ui88a06-scrim{
  position:fixed;
  inset:0;
  z-index:70;
  background:rgba(8,12,17,.66);
  opacity:0;
  pointer-events:none;
  transition:opacity .26s ease;
}
.ui88a06-scrim.ui88a06-open{ opacity:1; pointer-events:auto; }
.ui88a06-sheet{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:80;
  background:#1A2530;
  border-top:2px solid var(--ui88a06-accent);
  border-radius:6px 6px 0 0;
  transform:translateY(103%);
  visibility:hidden;
  transition:transform .3s ease, visibility .3s ease;
  max-width:var(--ui88a06-shell);
  margin:0 auto;
  box-shadow:0 -10px 30px rgba(0,0,0,.45);
}
.ui88a06-sheet.ui88a06-open{ transform:translateY(0); visibility:visible; }
.ui88a06-sheethead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px var(--ui88a06-gutter) 8px;
  border-bottom:1px solid var(--ui88a06-line-faint);
}
.ui88a06-sheettitle{
  font-family:var(--ui88a06-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--ui88a06-accent);
  text-transform:uppercase;
}
.ui88a06-sheetclose{
  min-width:44px; min-height:44px;
  margin:-8px -8px -8px 0;
  font-family:var(--ui88a06-mono);
  font-size:16px;
  color:var(--ui88a06-ink-dim);
}
.ui88a06-sheetclose:hover{ color:var(--ui88a06-accent); }
.ui88a06-sheetbody{
  padding:8px var(--ui88a06-gutter) calc(14px + env(safe-area-inset-bottom));
  max-height:62vh;
  overflow-y:auto;
}
.ui88a06-routegroup{
  font-family:var(--ui88a06-mono);
  font-size:10px;
  letter-spacing:.18em;
  color:var(--ui88a06-ink-dim);
  text-transform:uppercase;
  padding:12px 2px 6px;
}
.ui88a06-routes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.ui88a06-route{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:46px;
  padding:6px 10px;
  border:1px solid var(--ui88a06-line-faint);
  border-radius:var(--ui88a06-radius);
  background:var(--ui88a06-panel-soft);
  color:var(--ui88a06-ink);
  font-size:13px;
  line-height:1.35;
  border-top:3px solid transparent;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.ui88a06-route:hover{
  background:var(--ui88a06-accent-soft);
  color:var(--ui88a06-ink-bright);
  text-decoration:none;
}
.ui88a06-route.ui88a06-route-active{
  border-top-color:var(--ui88a06-accent);
  color:var(--ui88a06-accent);
  background:var(--ui88a06-accent-soft);
}
.ui88a06-routenum{
  font-family:var(--ui88a06-mono);
  font-size:10px;
  color:var(--ui88a06-ink-dim);
}

/* ---------- main canvas ---------- */
.ui88a06-main{
  background:var(--ui88a06-bg);
  padding-top:calc(var(--ui88a06-top-h) + 6px);
  padding-bottom:calc(var(--ui88a06-bottom-h) + 22px);
  min-height:78vh;
}

/* ---------- hero ---------- */
.ui88a06-hero{ padding:14px var(--ui88a06-gutter) 4px; }
.ui88a06-h1{
  font-family:var(--ui88a06-mono);
  font-size:20px;
  line-height:1.35;
  letter-spacing:.01em;
  color:var(--ui88a06-ink-bright);
  border-left:3px solid var(--ui88a06-accent);
  padding-left:10px;
  margin-bottom:10px;
}
.ui88a06-lede{ font-size:14.5px; color:var(--ui88a06-ink); }
.ui88a06-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--ui88a06-line-soft);
  border-radius:var(--ui88a06-radius);
  margin-top:12px;
  background:var(--ui88a06-panel);
}
.ui88a06-fact{
  padding:9px 6px 8px;
  text-align:center;
  border-left:1px solid var(--ui88a06-line-faint);
}
.ui88a06-fact:first-child{ border-left:0; }
.ui88a06-factnum{
  display:block;
  font-family:var(--ui88a06-mono);
  font-size:17px;
  font-weight:700;
  color:var(--ui88a06-accent);
  line-height:1.2;
}
.ui88a06-factlabel{
  font-size:10.5px;
  color:var(--ui88a06-ink-dim);
  letter-spacing:.03em;
}

/* ---------- banner carousel ---------- */
.ui88a06-carousel{
  margin:14px var(--ui88a06-gutter) 0;
  border:1px solid var(--ui88a06-line-soft);
  border-radius:var(--ui88a06-radius);
  background:var(--ui88a06-panel);
  overflow:hidden;
}
.ui88a06-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.ui88a06-track::-webkit-scrollbar{ display:none; }
.ui88a06-slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  position:relative;
}
.ui88a06-slidebtn{
  display:block;
  width:100%;
  position:relative;
}
.ui88a06-slideimg{
  width:100%;
  aspect-ratio:480/208;
  object-fit:cover;
}
.ui88a06-slidecap{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 12px;
  background:linear-gradient(180deg,rgba(20,29,38,0) 0%,rgba(20,29,38,.92) 70%);
}
.ui88a06-slidecap b{
  font-family:var(--ui88a06-mono);
  font-size:12.5px;
  color:var(--ui88a06-ink-bright);
  letter-spacing:.02em;
}
.ui88a06-slidecap i{
  font-style:normal;
  font-family:var(--ui88a06-mono);
  font-size:11px;
  color:var(--ui88a06-accent);
  white-space:nowrap;
}
.ui88a06-dots{
  display:flex;
  justify-content:center;
  gap:9px;
  padding:8px 0 9px;
  border-top:1px solid var(--ui88a06-line-faint);
}
.ui88a06-dot{
  width:22px; height:4px;
  border-radius:2px;
  background:var(--ui88a06-line);
  transition:background .18s ease;
}
.ui88a06-dot.ui88a06-dot-active{ background:var(--ui88a06-accent); }

/* ---------- game sections ---------- */
.ui88a06-section{ padding:20px var(--ui88a06-gutter) 2px; }
.ui88a06-sechead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  border-left:3px solid var(--ui88a06-accent);
  padding-left:10px;
  margin-bottom:6px;
}
.ui88a06-h2{
  font-family:var(--ui88a06-mono);
  font-size:16.5px;
  line-height:1.4;
  color:var(--ui88a06-ink-bright);
}
.ui88a06-count{
  flex:0 0 auto;
  font-family:var(--ui88a06-mono);
  font-size:11px;
  color:var(--ui88a06-accent);
  border:1px solid var(--ui88a06-accent-line);
  border-radius:var(--ui88a06-radius);
  padding:2px 7px;
  white-space:nowrap;
}
.ui88a06-secintro{
  font-size:13.5px;
  color:var(--ui88a06-ink);
  margin:0 0 12px;
}
.ui88a06-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.ui88a06-game{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
  text-align:center;
}
.ui88a06-gamethumb{
  display:block;
  border:1px solid var(--ui88a06-line-soft);
  border-radius:var(--ui88a06-radius);
  overflow:hidden;
  background:#0F161D;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ui88a06-game:hover .ui88a06-gamethumb,
.ui88a06-game:focus-visible .ui88a06-gamethumb{
  border-color:var(--ui88a06-accent);
  box-shadow:0 0 10px var(--ui88a06-accent-soft);
}
.ui88a06-game:active .ui88a06-gamethumb{ transform:scale(.97); }
.ui88a06-gamethumb img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}
.ui88a06-gamename{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:11px;
  line-height:1.35;
  color:var(--ui88a06-ink);
  padding:5px 2px 6px;
  overflow-wrap:anywhere;
}
.ui88a06-game:hover .ui88a06-gamename{ color:var(--ui88a06-ink-bright); }

/* ---------- prose panels / modules ---------- */
.ui88a06-panel{
  background:var(--ui88a06-panel);
  border:1px solid var(--ui88a06-line-soft);
  border-radius:var(--ui88a06-radius);
  padding:14px 13px 15px;
  margin-top:10px;
}
.ui88a06-panel p{ font-size:14px; }
.ui88a06-note{
  border-left:3px solid var(--ui88a06-accent);
  background:var(--ui88a06-accent-soft);
  padding:9px 12px;
  font-size:12.5px;
  color:var(--ui88a06-ink);
  border-radius:0 var(--ui88a06-radius) var(--ui88a06-radius) 0;
}
.ui88a06-kv{
  border:1px solid var(--ui88a06-line-faint);
  border-radius:var(--ui88a06-radius);
  overflow:hidden;
  margin-top:4px;
}
.ui88a06-kvrow{
  display:flex;
  gap:10px;
  padding:8px 11px;
  border-top:1px solid var(--ui88a06-line-faint);
  font-size:12.5px;
}
.ui88a06-kvrow:first-child{ border-top:0; }
.ui88a06-kvkey{
  flex:0 0 96px;
  font-family:var(--ui88a06-mono);
  font-size:11px;
  color:var(--ui88a06-accent);
  letter-spacing:.03em;
  padding-top:2px;
}
.ui88a06-kvval{ flex:1; min-width:0; }

/* steps list */
.ui88a06-steps{ counter-reset:ui88a06step; }
.ui88a06-step{
  position:relative;
  counter-increment:ui88a06step;
  display:flex;
  gap:10px;
  padding:9px 0;
  border-top:1px dashed var(--ui88a06-line-faint);
  font-size:13.5px;
}
.ui88a06-step:first-child{ border-top:0; padding-top:2px; }
.ui88a06-stepnum{
  flex:0 0 26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--ui88a06-mono);
  font-size:12px;
  font-weight:700;
  color:#1C2833;
  background:var(--ui88a06-accent);
  border-radius:var(--ui88a06-radius);
}
.ui88a06-stepnum::before{ content:counter(ui88a06step,decimal-leading-zero); }

/* scenario rows */
.ui88a06-case{
  border:1px solid var(--ui88a06-line-faint);
  border-left:3px solid var(--ui88a06-accent);
  border-radius:var(--ui88a06-radius);
  padding:10px 12px 11px;
  margin-top:8px;
  background:var(--ui88a06-panel-soft);
}
.ui88a06-case:first-of-type{ margin-top:0; }
.ui88a06-casetag{
  display:block;
  font-family:var(--ui88a06-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--ui88a06-accent);
  text-transform:uppercase;
  margin-bottom:3px;
}
.ui88a06-case p{ font-size:13px; margin:0; }

/* ---------- segmented CTA block ---------- */
.ui88a06-ctawrap{
  border:1px solid var(--ui88a06-accent-line);
  border-radius:var(--ui88a06-radius);
  background:linear-gradient(180deg,rgba(255,192,203,.07) 0%,rgba(31,43,56,.4) 60%);
  padding:14px 13px 15px;
  margin-top:10px;
}
.ui88a06-ctaseg{
  display:flex;
  border:1px solid var(--ui88a06-accent);
  border-radius:var(--ui88a06-radius);
  overflow:hidden;
  margin-top:12px;
}
.ui88a06-ctabtn{
  flex:1 1 50%;
  min-height:48px;
  font-size:14px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:box-shadow .18s ease, background .18s ease;
}
.ui88a06-ctaprime{
  background:var(--ui88a06-accent);
  color:#1C2833;
}
.ui88a06-ctaprime:hover{ background:#FFCBD4; box-shadow:0 0 14px var(--ui88a06-accent-soft); }
.ui88a06-ctasecond{
  color:var(--ui88a06-ink-bright);
  border-left:1px solid var(--ui88a06-accent-line);
  background:rgba(20,29,38,.35);
}
.ui88a06-ctasecond:hover{ background:var(--ui88a06-accent-soft); }
.ui88a06-ctatext{
  font-size:12.5px;
  color:var(--ui88a06-ink-dim);
  text-align:center;
  margin-top:9px;
}
.ui88a06-ctatext a{ font-family:var(--ui88a06-mono); font-size:12px; }

/* ---------- extended footer (homepage only) ---------- */
.ui88a06-extfoot{
  margin:24px var(--ui88a06-gutter) 0;
  border:1px solid var(--ui88a06-line-soft);
  border-radius:var(--ui88a06-radius);
  background:#1A2530;
  padding:4px 13px 14px;
}
.ui88a06-extsechead{
  font-family:var(--ui88a06-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--ui88a06-accent);
  text-transform:uppercase;
  border-bottom:1px solid var(--ui88a06-line-faint);
  padding:12px 0 7px;
  margin-bottom:8px;
}
.ui88a06-dir{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 12px;
}
.ui88a06-dirlink{
  display:inline-block;
  font-size:12.5px;
  line-height:1.5;
  padding:5px 0 5px 12px;
  position:relative;
  color:var(--ui88a06-ink);
  border-bottom:1px dashed var(--ui88a06-line-faint);
}
.ui88a06-dirlink::before{
  content:"›";
  position:absolute;
  left:0;
  color:var(--ui88a06-accent);
  font-family:var(--ui88a06-mono);
}
.ui88a06-dirlink:hover{ color:var(--ui88a06-accent); text-decoration:none; }
.ui88a06-brandblurb{ font-size:13px; color:var(--ui88a06-ink); }
.ui88a06-promos{ border:1px solid var(--ui88a06-line-faint); border-radius:var(--ui88a06-radius); overflow:hidden; }
.ui88a06-promo{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:46px;
  padding:7px 11px;
  text-align:left;
  border-top:1px solid var(--ui88a06-line-faint);
  background:var(--ui88a06-panel-soft);
  font-size:13px;
  color:var(--ui88a06-ink-bright);
  transition:background .16s ease, box-shadow .16s ease;
}
.ui88a06-promo:first-child{ border-top:0; }
.ui88a06-promo:hover{ background:var(--ui88a06-accent-soft); box-shadow:inset 3px 0 0 var(--ui88a06-accent); }
.ui88a06-promonum{
  flex:0 0 auto;
  font-family:var(--ui88a06-mono);
  font-size:11px;
  color:var(--ui88a06-accent);
}
.ui88a06-promoarrow{
  margin-left:auto;
  font-family:var(--ui88a06-mono);
  color:var(--ui88a06-ink-dim);
  font-size:13px;
}
.ui88a06-disclaim{
  font-size:11.5px;
  line-height:1.65;
  color:var(--ui88a06-ink-dim);
  border:1px dashed var(--ui88a06-line);
  border-radius:var(--ui88a06-radius);
  padding:9px 11px;
}

/* ---------- common footer ---------- */
.ui88a06-foot{
  border-top:1px solid var(--ui88a06-line-faint);
  margin-top:18px;
  padding:14px var(--ui88a06-gutter) 10px;
  text-align:center;
}
.ui88a06-footcopy{
  font-family:var(--ui88a06-mono);
  font-size:11.5px;
  letter-spacing:.05em;
  color:var(--ui88a06-ink-dim);
}

/* ---------- layered bottom bar ---------- */
.ui88a06-bottombar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  background:#141D26;
  border-top:1px solid var(--ui88a06-line-soft);
  padding-bottom:env(safe-area-inset-bottom);
}
/* top layer: slim promo strip */
.ui88a06-bottomstrip{
  border-bottom:1px solid var(--ui88a06-line-faint);
  background:linear-gradient(90deg,rgba(255,192,203,.10) 0%,rgba(20,29,38,.9) 55%);
}
.ui88a06-stripbtn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-height:30px;
  padding:0 var(--ui88a06-gutter);
  font-family:var(--ui88a06-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--ui88a06-accent);
}
.ui88a06-stripbtn b{ font-weight:700; color:var(--ui88a06-ink-bright); }
.ui88a06-stripbtn:hover b{ color:var(--ui88a06-accent); }
/* main layer: five-role nav */
.ui88a06-bottomnav{
  display:flex;
  align-items:stretch;
  max-width:var(--ui88a06-shell);
  margin:0 auto;
}
.ui88a06-navitem{
  position:relative;
  flex:1 1 20%;
  min-height:56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:5px 2px 6px;
  color:var(--ui88a06-ink-dim);
  border-top:3px solid transparent;
  text-decoration:none;
}
.ui88a06-navitem:hover{ text-decoration:none; color:var(--ui88a06-ink); }
.ui88a06-navicon{ width:21px; height:21px; display:block; }
.ui88a06-navlabel{
  font-size:10px;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
}
.ui88a06-navitem.ui88a06-nav-active{
  color:var(--ui88a06-accent);
  border-top-color:var(--ui88a06-accent);
  text-shadow:0 0 10px var(--ui88a06-accent-soft);
}

/* ---------- utilities ---------- */
.ui88a06-sr{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
a:focus-visible,
button:focus-visible,
.ui88a06-game:focus-visible .ui88a06-gamethumb{
  outline:2px solid var(--ui88a06-accent);
  outline-offset:2px;
}
button{ -webkit-tap-highlight-color:rgba(255,192,203,.18); }

/* restrained reveal (active only when JS is present) */
.ui88a06-js .ui88a06-rv{
  opacity:0;
  transform:translateY(7px);
  transition:opacity .5s ease, transform .5s ease;
}
.ui88a06-js .ui88a06-rv-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .ui88a06-js .ui88a06-rv{ transition:none; opacity:1; transform:none; }
  .ui88a06-sheet{ transition:none; }
  .ui88a06-scrim{ transition:none; }
}

/* ---------- breakpoints ---------- */
/* 375px and up: slightly roomier type */
@media (min-width:375px){
  .ui88a06-h1{ font-size:21.5px; }
  .ui88a06-h2{ font-size:17.5px; }
  .ui88a06-gamename{ font-size:11.5px; }
}
/* 430px and up: 5-column game directory */
@media (min-width:430px){
  .ui88a06-grid{ grid-template-columns:repeat(5,1fr); gap:9px; }
  .ui88a06-dir{ gap:4px 16px; }
  .ui88a06-h1{ font-size:23px; }
}
/* wide screens: keep the centred phone canvas with framed edges */
@media (min-width:560px){
  body{ background:#0E151C; }
  .ui88a06-main{
    border-left:1px solid var(--ui88a06-line-faint);
    border-right:1px solid var(--ui88a06-line-faint);
  }
  .ui88a06-topbar{ border-left:1px solid var(--ui88a06-line-faint); border-right:1px solid var(--ui88a06-line-faint); }
}