/* The comparison pages (/vs/scrabble, /vs/words-with-friends, /vs/sudoku,
   /vs/kakuro): one stylesheet, cached once for all four and their
   translations. The header and logo are the same as rules.html's. */
:root{font-family:'Nunito',system-ui,sans-serif;background:#f6f4ee;color:#1b2733}
*{box-sizing:border-box}
body{margin:0;line-height:1.6}
a{color:#2b6cb0}
h1,h2,h3{font-family:'Baloo 2',system-ui,sans-serif;margin:0;line-height:1.12;color:#1b2733}
p{margin:0}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}

header.siteHeader{background:#1b2733;box-shadow:inset 0 -3px 0 #c98f1a;padding:14px 0;position:sticky;top:0;z-index:10}
.siteHeader .bl-crazy,.siteHeader .bl-s{color:#fff}
.siteHeaderInner{max-width:1040px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brandLogo{display:flex;align-items:center;text-decoration:none}
.bl-crazy{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;color:#1b2733;font-size:var(--bl-type,26px);display:flex}
.bl-crazy span{display:inline-block;margin-right:1px}
.bl-tile{--bl-box:calc(var(--bl-type,26px)*1.15);border-radius:calc(var(--bl-box)*0.27);display:flex;align-items:center;justify-content:center;font-family:'Nunito',system-ui,sans-serif;font-weight:900;color:#3a2c05;background:#f6cf3f;font-size:calc(var(--bl-box)*0.67);letter-spacing:-0.0625em;width:var(--bl-box);height:var(--bl-box);flex-shrink:0;padding:calc(var(--bl-box)*0.026) calc(var(--bl-box)*0.087) 0 0;margin:0 1px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(180,110,10,.4),0 1px 0 #c98f1a,0 1px 2px rgba(0,0,0,.16)}
.bl-s{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;color:#1b2733;font-size:var(--bl-type,26px)}
.navPlayBtn{font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:14px;color:#1b2733;background:#f6cf3f;border:none;border-radius:9px;padding:9px 16px;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(180,110,10,.4),0 1px 0 #c98f1a,0 2px 6px rgba(180,110,10,.22)}
.navPlayBtn:hover{filter:brightness(1.03)}

/* Tiles: gold = already on the board, blue = placed this turn (as in the rules) */
.tl{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:9px;background:#f6cf3f;color:#3a2c05;font-family:'Nunito',system-ui,sans-serif;font-weight:900;font-size:21px;flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(180,110,10,.4),0 2px 0 #c98f1a,0 0 0 1px rgba(27,39,51,.13)}
.tl.nw{background:#bcd8fb;color:#0c3f73;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(30,90,160,.4),0 2px 0 #2b6cb0,0 0 0 1px rgba(27,39,51,.13)}
.tl.lt{background:#eef1f5;color:#1b2733;box-shadow:inset 0 1px 0 #fff,0 2px 0 #aab3c0,0 0 0 1px rgba(27,39,51,.13)}
.tl.wd{background:#7c3aed;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #4c1d95,0 0 0 1px rgba(27,39,51,.13)}
.tl.sm{width:36px;height:36px;font-size:17px;border-radius:8px}
.tl.xs{width:20px;height:20px;font-size:11px;border-radius:5px}
.sq{width:44px;height:44px;border-radius:9px;background:rgba(27,39,51,.07)}
.grid{display:grid;gap:6px;justify-content:center}

/* Hero: the landing page's blue band */
.hero{position:relative;overflow:hidden;background:linear-gradient(115deg,#1b2733 0%,#22406a 55%,#2b6cb0 100%);color:#fff}
.hero::before{content:'';position:absolute;inset:-40% -20%;transform:rotate(-14deg);opacity:.9;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='66'%3E%3Crect x='3' y='3' width='60' height='60' rx='12' fill='white' fill-opacity='.05'/%3E%3C/svg%3E")}
.heroInner{position:relative;max-width:1040px;margin:0 auto;padding:30px 24px 64px}
.crumbs{font-size:14px;font-weight:700;color:#9fb4cc;margin:0 0 30px}
.crumbs a{color:#c9d3df;text-decoration:none}
.crumbs a:hover{color:#fff}
.heroCols{display:flex;gap:52px;align-items:center}
.heroText{flex:1 1 0;min-width:0}
.kicker{display:block;font-weight:900;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#c98f1a;margin:0 0 10px}
.hero .kicker{color:#f6cf3f;margin-bottom:14px}
.hero h1{font-size:54px;font-weight:800;color:#fff;margin:0 0 18px;text-wrap:balance}
.lede{font-size:19px;line-height:1.6;color:#e3ebf5;max-width:34em;margin:0 0 26px}
.lede b{color:#fff}
.ctaRow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.btnGold{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;border-radius:999px;background:#f6cf3f;color:#1b2733;font-weight:900;font-size:18px;text-decoration:none;box-shadow:0 3px 0 #c98f1a}
.btnGold:hover{background:#f8d95e}
.ctaNote{font-size:15px;font-weight:700;color:#b8c9dd}
.heroArt{width:380px;flex-shrink:0;display:flex;flex-direction:column;gap:12px}
.artCard{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:20px 22px}
.artCard .kicker{font-size:12px;color:#b8c9dd;margin:0 0 12px}
.artCard.c10 .kicker{color:#f6cf3f}
.artRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.artNote{margin-left:10px;font-weight:800;color:#e3ebf5;font-size:15px}
.artSum{margin-left:10px;font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;color:#fff;font-size:26px}
.vsChip{align-self:center;width:44px;height:44px;border-radius:12px;background:#7c3aed;color:#fff;font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 #4c1d95}
.heroArt.side{flex-direction:row;align-items:center;justify-content:center;gap:20px}
.artFig{display:flex;flex-direction:column;align-items:center;gap:12px}
.artFig .kicker{font-size:12px;color:#b8c9dd;margin:0}
.artFig .artRow{flex-wrap:nowrap}
.artFig.c10 .kicker{color:#f6cf3f}
/* A 3x3 Sudoku box and a Kakuro run, drawn in white lines on the blue */
.sdk{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px);border:3px solid #e3ebf5;border-radius:6px;overflow:hidden}
.sdk span{display:flex;align-items:center;justify-content:center;border:1px solid rgba(227,235,245,.35);font-weight:800;font-size:19px;color:#fff}
.kkr{display:flex;border:2px solid #e3ebf5;border-radius:6px;overflow:hidden}
.kkr span{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-left:1px solid rgba(227,235,245,.4);font-weight:800;font-size:19px;color:#fff}
.kkr .clue{border-left:none;background:linear-gradient(to top right,rgba(255,255,255,.14) calc(50% - 1px),rgba(227,235,245,.6) 50%,rgba(255,255,255,.14) calc(50% + 1px));align-items:flex-start;justify-content:flex-end;padding:3px 5px;font-size:13px}

/* Sections */
section{padding:84px 0 0}
section h2{font-size:36px;font-weight:800;margin:0 0 24px;text-wrap:balance}
.card{background:#fff;border-radius:18px;box-shadow:0 1px 0 rgba(27,39,51,.08),0 8px 24px rgba(27,39,51,.06)}
.body{font-size:17px;line-height:1.65;color:#3d4552}
.body b,.body strong{color:#1b2733}

/* At a glance */
.glance{overflow:hidden}
.gRow{display:grid;grid-template-columns:210px minmax(0,1fr) minmax(0,1fr);border-top:1px solid #e7e3d8}
.gRow>div{padding:14px 22px;font-size:16px;line-height:1.45}
.gHead{border-top:none;background:#1b2733}
.gHead>div{font-weight:900;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#c9d3df}
.gHead>div.c10{background:#f6cf3f;color:#1b2733}
.gLab{font-weight:800;color:#1b2733}
.gThem{color:#3d4552}
.gUs{font-weight:700;color:#1b2733;background:#fff8dc}

/* What carries over */
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.four .card{padding:24px;display:flex;flex-direction:column;gap:12px}
.four h3{font-size:20px;font-weight:800}
.four p{font-size:15.5px;line-height:1.55;color:#3d4552}
.ico{width:44px;height:44px;border-radius:12px;background:#1b2733;color:#f6cf3f;display:flex;align-items:center;justify-content:center}

/* A worked example */
.split{padding:44px 48px;display:flex;gap:52px;align-items:center}
.split>div:first-child{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px}
.split h2{margin:0}
.exBox{width:330px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:16px;background:#f6f4ee;border-radius:16px;padding:26px 20px}
.exCap{text-align:center;font-size:15px;line-height:1.5;color:#3d4552}
.exCap b{color:#1b2733}
.key{display:flex;gap:16px;font-size:13px;font-weight:700;color:#5b6472;align-items:center;flex-wrap:wrap;justify-content:center}
.key span{display:flex;gap:6px;align-items:center}
.ticks{display:flex;flex-direction:column;gap:12px;margin:4px 0 0;padding:0;list-style:none}
.ticks li{display:flex;gap:12px;font-size:16px;line-height:1.55;color:#3d4552}
.ticks li b{color:#1b2733}
.ticks svg{flex-shrink:0;margin-top:3px;color:#2b6cb0}
.lines{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.lines .artRow{gap:6px}
.lines .sumLbl{margin-left:8px;font-weight:800;color:#1b2733;font-size:15px}

/* Which one is for you */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.two .card{padding:30px 32px}
.two .card.pick{box-shadow:0 0 0 2px #f6cf3f,0 8px 24px rgba(27,39,51,.06)}
.two h3{font-size:23px;font-weight:800;margin:0 0 12px}
.two ul{margin:0;padding-left:20px;font-size:16px;line-height:1.7;color:#3d4552}

/* Tips */
.tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 46px}
.tip{display:flex;gap:16px;align-items:flex-start}
.num{width:36px;height:36px;border-radius:9px;background:#f6cf3f;color:#1b2733;font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 #c98f1a;flex-shrink:0}
.tip h3{font-size:20px;font-weight:800;margin:0 0 4px}
.tip p{font-size:16px;line-height:1.55;color:#3d4552}

/* Questions (the same words as the FAQPage data in the head) */
.faq{border-bottom:1px solid #e7e3d8}
.faq details{border-top:1px solid #e7e3d8;padding:18px 4px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:800;font-size:18px;color:#1b2733}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-family:'Nunito',system-ui,sans-serif;font-size:18px;font-weight:800;margin:0}
.faq summary::after{content:'';width:10px;height:10px;border-right:3px solid #c98f1a;border-bottom:3px solid #c98f1a;transform:rotate(45deg);flex-shrink:0;margin-right:6px;transition:transform .15s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{margin-top:10px;font-size:16px;line-height:1.6;color:#3d4552;max-width:70ch}

/* Last call to action */
.finalCta{border-radius:22px;background:linear-gradient(115deg,#1b2733 0%,#22406a 55%,#2b6cb0 100%);padding:48px 52px;display:flex;align-items:center;justify-content:space-between;gap:36px}
.finalCta h2{color:#fff;font-size:36px;margin:0 0 10px}
.finalCta p{font-size:18px;color:#d3dfed}
.finalCta .ctaCol{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
.finalCta .ctaCol a:not(.btnGold){color:#f6cf3f;font-weight:800;font-size:15px}

/* Other comparisons */
.more{padding:60px 0 64px}
.more h2{font-size:22px;margin:0 0 16px}
.moreGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.moreGrid a{padding:18px 22px;text-decoration:none;display:flex;flex-direction:column;gap:4px}
.moreGrid b{color:#1b2733;font-size:17px}
.moreGrid span{color:#5b6472;font-size:14.5px;line-height:1.45}
.moreGrid a:hover b{color:#2b6cb0}

footer.siteFoot{background:#1b2733;box-shadow:inset 0 3px 0 #c98f1a;padding:32px 0 40px}
.siteFoot .wrap{display:flex;flex-direction:column;gap:14px}
.footLinks{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px}
.footLinks a{color:#c9d3df;text-decoration:none;font-weight:700}
.footLinks a:hover{color:#fff}
.langLink{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.langLink svg{flex-shrink:0}
.tm{font-size:13px;color:#8a99ab;max-width:75ch}

@media(max-width:900px){
  .heroCols{flex-direction:column;align-items:stretch;gap:32px}
  .heroArt{width:auto;max-width:420px}
  .four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{flex-direction:column;align-items:stretch;padding:32px 28px;gap:28px}
  .exBox{width:auto}
  .finalCta{flex-direction:column;align-items:stretch;text-align:center;padding:36px 28px}
  .moreGrid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .wrap,.heroInner{padding-left:16px;padding-right:16px}
  .heroInner{padding-top:22px;padding-bottom:44px}
  .crumbs{margin-bottom:20px}
  .hero h1{font-size:38px}
  .lede{font-size:17px}
  .btnGold{width:100%}
  .ctaNote{width:100%;text-align:center}
  section{padding-top:56px}
  section h2{font-size:28px}
  .gRow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gRow>div{padding:10px 14px;font-size:14.5px}
  .gRow .gLab{grid-column:1/-1;padding-bottom:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5b6472}
  .gHead>div:first-child{display:none}
  .gHead>div{font-size:12px}
  .four{grid-template-columns:1fr}
  .two,.tips{grid-template-columns:1fr}
  .two .card{padding:22px}
  .split{padding:26px 18px}
  .faq summary,.faq summary h3{font-size:16.5px}
  .finalCta h2{font-size:28px}
  .heroArt.side{flex-direction:column;gap:14px;max-width:none}
  .sdk{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px)}
  .kkr span{width:34px;height:34px}
}
@media(max-width:420px){.siteHeaderInner{padding:0 12px}.navPlayBtn{font-size:13px;padding:8px 10px}}