/* Crosswise 1.22: the same azure and pearl material used by the Android game. */
:root{
  --bg:#E9EDFF;--paper:#F5F7FF;--dot:#C5CFF0;--ink:#273967;
  --ink-soft:#56678A;--muted:#56678A;--red:#DD3B70;--teal:#008F98;
  --ochre:#B87900;--green:#008F98;--blue:#2668C9;--plum:#8652CB;
  --card:#F9FBFF;--line:#C5CFF0;--shadow:0 18px 50px rgba(72,82,154,.12);
  --pearl:linear-gradient(165deg,#FFFFFF 0%,#F6F8FF 48%,#E7EEFF 100%);
  --pearl-shadow:inset 0 2px 1px white,inset 0 -3px 3px rgba(165,181,220,.1),0 4px 0 #BDCAE7,0 9px 20px rgba(83,107,177,.09);
  --azure:radial-gradient(ellipse 80% 45% at 50% 0%,#9ADFFF 0%,rgba(154,223,255,0) 72%),linear-gradient(180deg,#56ADFF 0%,#3189FA 18%,#2666DF 45%,#235BCC 100%);
}
body{color:var(--ink);background:radial-gradient(ellipse at 15% 0%,rgba(255,255,255,.96),transparent 47rem),radial-gradient(ellipse at 100% 20%,rgba(173,150,255,.14),transparent 50rem),var(--bg)}
.btn-primary,.play-button,.cta-button,.button.primary{color:#fff;background:var(--azure);border:1px solid #286DDA;box-shadow:inset 0 2px 1px rgba(255,255,255,.72),0 4px 0 #2355C6,0 10px 19px rgba(61,115,204,.2);text-shadow:0 1px 2px rgba(25,61,130,.28)}
.btn-ghost,.button.secondary{color:var(--ink);background:var(--pearl);border:1px solid #BDCCEC;box-shadow:var(--pearl-shadow)}
.btn:hover,.play-button:hover,.cta-button:hover,.button:hover{transform:translateY(-1px)}
.btn:active,.play-button:active,.cta-button:active,.button:active{transform:translateY(2px)}
.card,.faq>div,.post-card,.rule-card,.quote-card,.board-card,.end-cta,.panel,.platform,.quick a,details{background:var(--pearl);border-color:var(--line);box-shadow:var(--pearl-shadow)}
.site-header{background:rgba(239,244,255,.94);border-bottom-color:var(--line)}
.brand-mark{background:#fff url('/icon_512.png') center/cover no-repeat;border-color:#C5CFF0;color:transparent;box-shadow:0 2px 0 #BDCAE7;flex-shrink:0}
.brand{min-height:44px}
.toc,.mini,.board .cell{background:rgba(255,255,255,.82);border-color:var(--line)}
.toc a{min-height:44px;display:flex;align-items:center}
nav a,.back,.site-nav a,.site-footer>a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.quick a{display:block;min-height:74px}
article a{padding-block:5px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #2668C9;outline-offset:4px;border-radius:6px}
.contact{background:linear-gradient(150deg,#286FCF,#273967)}
.contact p{color:#E9F0FF}
@media(max-width:640px){.nav{gap:12px}.nav .brand{font-size:14px;line-height:1.2;max-width:210px}.nav .play-button{font-size:13px;padding-inline:15px;flex-shrink:0}.site-footer nav{gap:4px 15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:hover,.play-button:hover,.cta-button:hover,.button:hover,.btn:active,.play-button:active,.cta-button:active,.button:active{transform:none}}