/* B Crowngrid — site styles */
:root{
  --bg:#0F1122; --surface:#181B30; --raised:#21253D; --border:#2C3150;
  --text:#FFFFFF; --text-2:#A3A8C3; --muted:#6B7194;
  --red:#E92623; --red-press:#C41E1B; --red-glow:rgba(233,38,35,.35);
  --r1:#2BB5A6; --r2:#3B8FE0; --r3:#8B5CF6; --r4:#E0569B; --r5:#F08A3C;
  --head:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#F3F4F9; --surface:#FFFFFF; --raised:#FFFFFF; --border:#E2E4EF;
    --text:#12142A; --text-2:#5A5F7D; --muted:#8D91AB; color-scheme:light;
    --r1:#6FD0C5; --r2:#7DB3EC; --r3:#B49BF9; --r4:#EC93BE; --r5:#F5B07C;
  }
}
:root[data-theme="light"]{
  --bg:#F3F4F9; --surface:#FFFFFF; --raised:#FFFFFF; --border:#E2E4EF;
  --text:#12142A; --text-2:#5A5F7D; --muted:#8D91AB; color-scheme:light;
  --r1:#6FD0C5; --r2:#7DB3EC; --r3:#B49BF9; --r4:#EC93BE; --r5:#F5B07C;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--body);
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--red)}
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--head);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800}
h3{font-size:1.1rem;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:720px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;padding-block:18px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);
  font-family:var(--head);font-weight:800;font-size:1.15rem}
.mark{width:34px;height:34px;border-radius:9px;background:var(--red);display:grid;place-items:center;
  box-shadow:0 6px 18px var(--red-glow);flex:none}
.nav{display:flex;gap:18px}
.nav a{color:var(--text-2);text-decoration:none;font-size:.95rem}
.nav a:hover{color:var(--text)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;
  border-radius:12px;border:0;font:700 15px var(--body);text-decoration:none;cursor:pointer;transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 24px var(--red-glow)}
.btn-primary:hover{background:var(--red-press)}
.btn-secondary{background:var(--raised);color:var(--text);border:1px solid var(--border)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-block:40px 72px}
.hero .lead{font-size:1.15rem;color:var(--text-2);max-width:34ch}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:32px;padding-top:16px}}

/* demo board */
.board-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:20px;max-width:420px;
  margin-inline:auto;width:100%}
.board{display:grid;grid-template-columns:repeat(5,1fr);border-radius:12px;overflow:hidden;
  border:3px solid var(--bg);aspect-ratio:1;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.cell{position:relative;border:0;padding:0;cursor:pointer;display:grid;place-items:center;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18);-webkit-tap-highlight-color:transparent}
.cell[data-r="A"]{background-color:var(--r1)} .cell[data-r="B"]{background-color:var(--r2)}
.cell[data-r="C"]{background-color:var(--r3)} .cell[data-r="D"]{background-color:var(--r4)}
.cell[data-r="E"]{background-color:var(--r5)}
.cell.bt{border-top:3px solid var(--bg)} .cell.bl{border-left:3px solid var(--bg)}
.cell svg{width:58%;height:58%}
.cell.x::after{content:"";width:34%;height:34%;background:
  linear-gradient(45deg,transparent 42%,rgba(15,17,34,.55) 42% 58%,transparent 58%),
  linear-gradient(-45deg,transparent 42%,rgba(15,17,34,.55) 42% 58%,transparent 58%)}
.cell.conflict{background-image:repeating-linear-gradient(45deg,rgba(255,77,79,.6) 0 6px,transparent 6px 12px)}
.cell.crown svg{animation:pop .22s ease-out}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}
.board-help{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:.9rem;color:var(--text-2);gap:12px}
.board-help button{background:none;border:0;color:var(--text-2);font:600 .9rem var(--body);cursor:pointer;text-decoration:underline;padding:4px}
.solved .cell.crown svg{filter:drop-shadow(0 0 8px rgba(255,213,74,.9))}

/* sections */
section{padding:56px 0}
.rule-list{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:28px}
.rule-list p{color:var(--text-2);margin:0}
@media (max-width:820px){.rule-list{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.rule-list{grid-template-columns:1fr}}
.modes{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px;margin-top:28px}
.mode{border-radius:14px;padding:26px;min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}
.mode p{margin:0;opacity:.92}
.mode h3{font-size:1.35rem;font-weight:800}
.m-daily{background:linear-gradient(135deg,#E92623,#FF7A45)}
.m-tour{background:linear-gradient(135deg,#6A3DF0,#B14CF0)}
.m-league{background:linear-gradient(135deg,#1E6FE0,#3FB4F5)}
@media (max-width:820px){.modes{grid-template-columns:1fr}.mode{min-height:150px}}
.get{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:36px;display:flex;
  justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.get p{color:var(--text-2);margin:0}

/* panels (hub / join / support) */
.page{padding-block:24px 8px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;margin-bottom:16px}
.panel > :last-child{margin-bottom:0}
.muted{color:var(--text-2)}
.small{font-size:.9rem}
.status{display:flex;flex-wrap:wrap;gap:10px 28px;margin:6px 0 18px}
.status strong{font-family:var(--head);font-size:1.45rem;display:block;line-height:1.2}
.status span{font-size:.85rem;opacity:.8}
.tour-head{background:linear-gradient(135deg,#6A3DF0,#B14CF0);color:#fff;border:0}
.tour-head .btn-secondary{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.28)}
.updates{list-style:none;margin:0;padding:0}
.updates li{padding:14px 0;border-top:1px solid var(--border)}
.updates li:first-child{border-top:0;padding-top:0}
.updates time{color:var(--muted);font-size:.85rem;display:block}
.updates p{margin:.2em 0 0;color:var(--text-2)}
.code{font-family:var(--head);font-weight:800;font-size:clamp(2.2rem,10vw,3.4rem);letter-spacing:.16em;
  background:var(--raised);border:2px dashed var(--border);border-radius:14px;padding:14px 10px;text-align:center;margin:18px 0}
ol.steps{padding-left:1.3em;margin:0 0 1em}
ol.steps li{margin-bottom:.4em}
details{border-top:1px solid var(--border);padding:14px 0}
details:last-of-type{border-bottom:1px solid var(--border)}
summary{cursor:pointer;font-weight:700;list-style:none;padding-right:24px;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:0;color:var(--muted);font-weight:400}
details[open] summary::after{content:"\2013"}
details p{margin:10px 0 0;color:var(--text-2)}

/* legal */
.legal{padding-block:24px}
.legal h2{font-size:1.25rem;margin-top:2em}
.legal ul{padding-left:1.2em}
.legal li{margin-bottom:.4em}
.legal table{width:100%;border-collapse:collapse;font-size:.92rem;margin:1em 0}
.legal th,.legal td{text-align:left;vertical-align:top;padding:10px;border-bottom:1px solid var(--border)}
.table-scroll{overflow-x:auto}

/* in-app vs web */
.only-app{display:none!important}
.in-app .only-app{display:flex!important}
.in-app .only-web{display:none!important}
.in-app .top,.in-app footer{display:none}

footer{border-top:1px solid var(--border);margin-top:40px;padding:28px 0;color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--text-2);text-decoration:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}