/* LOTTO ARENA V13 — final responsive/readability stabilization layer
   IMPORTANT: load this file LAST. Page CSS must not override these common shell rules. */
:root{
  --la-content:760px;
  --la-rail:280px;
  --la-gap:24px;
  --la-red:#ff2e3f;
  --la-ink:#111827;
  --la-muted:#667085;
  --la-line:#e3e7ec;
}

/* readable floor */
html{font-size:16px}
body{font-size:13px;line-height:1.55}
p,li,dd,dt,input,textarea,select,button{line-height:1.55}
.sub,.lead,.desc,.copy,.hint,.meta,.eyebrow,
.section-head p,.page-title p,.article p,.notice-body,.faq-a,
.gift-wrap p,.my-wrap p,.content-wrap p,.result-wrap p{
  font-size:12px!important;
}
small,.counter,.src small,.gift-source small,.notify-item time,
.notice-item small,.ledger-row small,.activity-row small{
  font-size:10px!important;
}
.card label,.summary label,.result-kpi label,.round-stats label,
.point-label,.confirm-row label,.info-row label{
  font-size:10.5px!important;
}
a,button{font-size:11px}
.section-head a,.more,.go,.notify-cta{font-size:11px!important}

/* desktop companion rail */
.desktop-rail{
  padding-top:30px!important;
  margin-top:0!important;
}
.desktop-rail>.rail-card:first-child:has(.rail-brand){
  display:none!important;
}
.rail-login h3{font-size:19px!important}
.rail-login p,.rail-promo p{font-size:12px!important}
.rail-login button{font-size:12px!important}

/* common header */
.header{
  min-height:62px!important;
  height:62px!important;
  padding:0 16px!important;
  gap:10px;
  overflow:visible!important;
}
.header>.header-actions{
  margin-left:auto;
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  flex:0 0 auto;
}
/* Top-right action is League only in service pages */
.header .header-bell,
.header .login-top-btn{
  display:none!important;
}
.league-live-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  width:auto!important;
  min-width:104px!important;
  height:34px!important;
  padding:0 11px!important;
  border:1px solid #ffd0d4!important;
  border-radius:999px!important;
  background:#fff5f6!important;
  color:#c92f3b!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1!important;
  white-space:nowrap!important;
  flex:0 0 auto!important;
}
.league-live-link span:last-child{
  display:inline!important;
  color:#344054!important;
  font-size:10px!important;
}
.league-live-dot{
  width:8px!important;height:8px!important;flex:0 0 8px!important;
}

/* bottom GNB – fixed to app, never compress */
.gnb{
  position:fixed!important;
  z-index:90!important;
  bottom:0!important;
  height:72px!important;
  background:rgba(255,255,255,.97)!important;
  border-top:1px solid #e2e6eb!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  overflow:visible!important;
}
.gnb a{
  position:relative;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  font-size:10px!important;
  line-height:1.2!important;
  white-space:nowrap;
}
.gnb i{font-size:20px!important;line-height:1!important}
.gnb a.my-alert::after{
  content:"";
  position:absolute;
  top:10px;
  left:calc(50% + 10px);
  width:8px;height:8px;border-radius:50%;
  background:var(--la-red);
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(255,46,63,.08);
}

@media(min-width:1081px){
  .gnb{
    left:50%!important;
    width:var(--la-content)!important;
    transform:translateX(calc(-50% + (var(--la-rail) + var(--la-gap))/2))!important;
  }
}
@media(max-width:1080px){
  .site-shell{display:block!important;width:auto!important}
  .desktop-rail{display:none!important}
  .app{width:min(100%,var(--la-content))!important;max-width:var(--la-content)!important;margin:0 auto!important}
  .gnb{
    left:50%!important;
    width:min(100vw,var(--la-content))!important;
    transform:translateX(-50%)!important;
  }
}
@media(max-width:560px){
  body{font-size:13px}
  .content{padding-left:12px!important;padding-right:12px!important;padding-bottom:98px!important}
  .header{padding:0 12px!important}
  .brand strong{font-size:15px!important}
  .brand span{font-size:10px!important}
  .league-live-link{min-width:104px!important;height:34px!important;padding:0 10px!important}
  .gnb{height:70px!important}
  .gnb a{font-size:10px!important}
}

/* modal / sheet mobile safety */
.modal,.state-modal{
  width:min(430px,calc(100vw - 24px))!important;
  max-width:430px!important;
}
.sheet{width:min(520px,100vw)!important}
.modal-actions{gap:10px!important}
.modal-actions button{min-height:44px!important}

/* cards/grids should not be crushed */
.card{min-width:0}
img,svg{max-width:100%}
input,textarea,select{max-width:100%}
table{max-width:100%}

/* page-specific mobile QA */
@media(max-width:560px){
  /* common two-column lists should retain readable card widths */
  .machine-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .machine-list .machine-card{min-width:0!important}
  .gift-type-grid,.machine-gift-list,.quick-grid,.guide-feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .source-summary,.result-kpis,.round-stats,.summary,.sum,.adds{
    gap:8px!important;
  }
  /* numbers never fuse together */
  .balls,.myballs,.result-balls{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:6px!important;
  }
  .ball,.myball,.result-ball{
    flex:0 0 auto!important;
  }
  /* tables can scroll rather than collapse */
  .table-wrap,.league-table,.result-table{overflow-x:auto!important}
  /* prevent sticky action covering GNB/content */
  .sticky-action{bottom:82px!important}
}

/* V14 header consistency + typography */
body{font-size:14px!important}
p,li,dd,dt,input,textarea,select{font-size:14px!important}
button,a{font-size:13px!important}
.sub,.lead,.desc,.copy,.hint,.meta,.eyebrow,
.section-head p,.page-title p,.article p,.notice-body,.faq-a,
.gift-wrap p,.my-wrap p,.content-wrap p,.result-wrap p,
.machine-card .desc,.guide span,.gift p,.notify-copy p{
  font-size:14px!important;
  line-height:1.6!important;
}
small,.counter,.src small,.gift-source small,.notify-item time,
.notice-item small,.ledger-row small,.activity-row small,
.result-game-source small,.machine-card small{
  font-size:12px!important;
  line-height:1.45!important;
}
.card label,.summary label,.result-kpi label,.round-stats label,
.point-label,.confirm-row label,.info-row label{
  font-size:12px!important;
}
.section-head a,.more,.go,.notify-cta,.gift-type .go{
  font-size:13px!important;
}
.gnb a{font-size:11px!important}
.gnb i{font-size:21px!important}
.league-live-link{
  min-width:110px!important;
  height:36px!important;
  font-size:11px!important;
}
.league-live-link span:last-child{font-size:11px!important}
.header .page-actions,
.header .detail-actions,
.header .utility-actions,
.header .header-extra,
.header .header-icons{
  display:none!important;
}
@media(max-width:560px){
  body{font-size:14px!important}
  p,li,dd,dt,input,textarea,select{font-size:14px!important}
  button,a{font-size:13px!important}
  .sub,.lead,.desc,.copy,.hint,.meta,.eyebrow,
  .section-head p,.page-title p,.article p,.notice-body,.faq-a,
  .gift-wrap p,.my-wrap p,.content-wrap p,.result-wrap p,
  .machine-card .desc,.guide span,.gift p,.notify-copy p{
    font-size:13.5px!important;
  }
  small,.counter,.src small,.gift-source small,.notify-item time,
  .notice-item small,.ledger-row small,.activity-row small,
  .result-game-source small,.machine-card small{
    font-size:11.5px!important;
  }
  .league-live-link{
    min-width:110px!important;
    height:36px!important;
    padding:0 10px!important;
  }
  .section-head h2{font-size:20px!important}
  .machine-card h3,.gift-type h2,.guide-feature h2{font-size:16px!important}
  .filter-pill,.notify-filter,.result-source-filter{font-size:12px!important;padding:8px 10px!important}
}