/* The home page: the rain behind, the logo, the filters and the games' tiles. The tiles' pictures are
   /site/tile-art.css (site/src/tile-art.css), which the leaderboards share. */
:root{color-scheme:dark;--cream:#f8f0dc;--gold:#dbbc76;--gold-2:#f5dfaa;--soft:#d9cfbd;--mist:#c7d4d4;--glass:#0b1720b8;--line:#d7e3e73d}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0;background:#04070a;color:var(--cream);font-family:var(--gu-sans,"Segoe UI",Arial,sans-serif)}
body{overflow-x:hidden}
[hidden]{display:none!important}

/* the rain on the window, and a shade over it so the tiles read */
.rain-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.rain-shade{position:fixed;inset:0;z-index:1;background:radial-gradient(circle at 50% 30%,#07111722 0,#02060999 78%),linear-gradient(180deg,#02070b55,#020507cc);pointer-events:none}
#hint{display:none}
#err{position:fixed;z-index:1;inset:0;display:none;align-items:flex-end;justify-content:center;padding:30px;color:#b8c7ca;font-size:12px;pointer-events:none}
.fallback{background:radial-gradient(ellipse at 25% 65%,#99703c55,transparent 18%),radial-gradient(ellipse at 70% 60%,#b22e2455,transparent 15%),linear-gradient(#09121e,#17202b 60%,#05080d)}
.fallback .rain-canvas{opacity:.3;background:repeating-linear-gradient(105deg,transparent 0 35px,#b7d9ee35 36px,transparent 38px 90px)}
.debug{position:fixed;z-index:5;top:12px;left:12px;color:#cde;background:#080c10bb;padding:8px;font:12px monospace;pointer-events:none}

.landing-main{position:relative;z-index:2;width:min(1180px,calc(100% - 48px));margin:0 auto;padding:calc(60px + env(safe-area-inset-top,0px) + 52px) 0 36px}

/* the heading: the logo (its alt text is the heading's name) and the tagline */
.landing-heading{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;text-shadow:0 4px 30px #000}
.landing-heading h1.landing-logo{margin:0;line-height:0}
.landing-logo img{display:inline-block;width:380px;max-width:80vw;height:auto;filter:drop-shadow(0 8px 26px #000b)}
.landing-heading p{margin:0;font:italic 26px/1.3 var(--gu-serif);color:#d9e4df}

/* "rainy day": just the rain, brighter, with a way back at the top right (site/src/shell.ts) */
.rain-link{color:inherit;text-decoration:underline;text-decoration-color:#dbbc7680;text-decoration-thickness:1px;text-underline-offset:.18em;border-radius:4px;transition:color .2s,text-decoration-color .2s}
.rain-link:hover{color:#fff;text-decoration-color:var(--gold)}
.rain-link:focus-visible{color:#fff;text-decoration-color:var(--gold);outline:2px solid var(--gold);outline-offset:3px}
.landing-main,#site-nav{transition:opacity .6s ease,visibility .6s}
.rain-shade{transition:opacity 1.2s ease}
.rain-canvas{transition:filter 1.2s ease}
body.just-rain{overflow:hidden}
body.just-rain .landing-main,body.just-rain #site-nav{opacity:0;visibility:hidden;pointer-events:none}
body.just-rain .rain-shade{opacity:.25}
body.just-rain .rain-canvas{filter:brightness(1.18) saturate(1.05)}
.rain-exit{position:fixed;z-index:10;top:calc(16px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));width:46px;height:46px;padding:0;border-radius:50%;border:1px solid #ffffff45;background:#04070a70;color:#f8f0dc;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:.8;transition:opacity .4s}
.rain-exit:hover,.rain-exit:focus-visible{opacity:1;outline:2px solid var(--gold);outline-offset:2px}
.rain-exit svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
body.just-rain.still{cursor:none}
body.just-rain.still .rain-exit{opacity:0}

/* the filters: All, Cards, Board games, Pub games, Puzzles, Arcade (site/src/landing-filter.ts) */
.game-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:32px auto 0}
.game-filter{flex:none;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid #d7e3e75c;background:#0a161ecc;color:var(--soft);font:500 15px var(--gu-sans,"Segoe UI",Arial,sans-serif);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,border-color .2s,color .2s}
.game-filter:hover{border-color:#dbbc76a6;color:var(--cream)}
.game-filter[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#081117}
.game-filter:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the games: a card each, the whole card the link */
.game-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:32px 0 0}
.game-choice{--glow:#bb824129;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#14242ed9,#081117dc);color:var(--cream);text-decoration:none;box-shadow:0 20px 50px #00000080,inset 0 1px #ffffff11;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:transform .25s ease,border-color .25s ease,background .25s ease}
.game-choice:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,var(--glow),transparent 55%);opacity:.7;transition:opacity .25s}
.game-choice:hover,.game-choice:focus-visible{transform:translateY(-4px);border-color:#dfc27a9c;background:linear-gradient(145deg,#19313cdd,#09171ddd)}
.game-choice:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.game-choice:hover:before,.game-choice:focus-visible:before{opacity:1}
.game-choice.filtered-out{display:none}
/* signed in: the games played lately come first (site/src/landing-recent.ts), with a lighter edge and a small label */
.game-choice.recent{border-color:#e6eef08f;box-shadow:0 20px 50px #00000080,inset 0 1px #ffffff1f,0 0 0 1px #e6eef01f}
.game-choice.recent:hover,.game-choice.recent:focus-visible{border-color:#f0dfb0c4}
.choice-copy .choice-recent{align-self:flex-start;margin-bottom:2px;padding:2px 9px;border-radius:999px;border:1px solid #e6eef05c;color:var(--mist);font:600 11.5px/1.3 var(--gu-sans,"Segoe UI",Arial,sans-serif);letter-spacing:.01em}
.choice-pic{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:124px;margin-bottom:10px}
.choice-pic .choice-art{zoom:.76}
.choice-pic .blockfall-art{zoom:.62}
.choice-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.choice-copy strong{font:400 25px/1.15 var(--gu-serif)}
.choice-copy>span{font-size:14px;line-height:1.5;color:var(--mist)}
.pool-choice{--glow:#27857136}.ships-choice{--glow:#2d5f9236}.lock-choice{--glow:#c9963a33}.checkers-choice{--glow:#a8442f33}.dominos-choice{--glow:#2f7a4a33}.gin-choice{--glow:#c0303033}.c4-choice{--glow:#2a8a5533}.wordies-choice{--glow:#c9a24a33}.settlers-choice{--glow:#2f7aa833}.holdem-choice{--glow:#1f7a3a33}.blackjack-choice{--glow:#b3262b33}.orbit-choice{--glow:#7a3cff33}.wordly-choice{--glow:#3a5fa833}.jewelled-choice{--glow:#b0306a33}.pegs-choice{--glow:#c8894236}.money-choice{--glow:#d9a63a36}.jumper-choice{--glow:#5fa0e830}.darts-choice{--glow:#c0303036}.shuffle-choice{--glow:#c8925036}.risky-choice{--glow:#3d65c936}.blockfall-choice{--glow:#e7b63833}.fruitchop-choice{--glow:#e8452e30}.flapping-choice{--glow:#e0864830}

/* a game an administrator has closed: dimmed, with its message across it (it still opens, to say so) */
.game-choice.closed{filter:saturate(.35)}
.game-choice.closed>*{opacity:.55}
.game-choice.closed:after{content:"Closed · " attr(data-closed);position:absolute;z-index:2;left:12px;right:12px;bottom:12px;padding:9px 12px;border-radius:10px;background:#0a161eee;border:1px solid #dbbc7666;color:var(--gold-2);font:600 12px/1.4 var(--gu-sans,"Segoe UI",Arial,sans-serif);letter-spacing:.01em}
.game-choice.closed:hover,.game-choice.closed:focus-visible{transform:none}

/* the foot of the home page (the website's: the app's home page is without it) */
.home-foot{margin:40px auto 0;padding:20px 0 8px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;color:#afbec0;font:14px/1.5 var(--gu-sans,"Segoe UI",Arial,sans-serif);text-shadow:0 2px 12px #000}
.home-foot p{margin:0}
.home-foot a{color:var(--gold-2);font-weight:600;text-decoration:underline;text-decoration-color:#dbbc7666;text-underline-offset:3px;border-radius:4px;display:inline-block;padding:2px 0;min-height:24px}
.home-foot a:hover{color:#fff;text-decoration-color:currentColor}
.home-foot a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media(max-width:1040px){.game-choices{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.game-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* phones: smaller tiles, the picture and the name; the filters scroll sideways */
@media(max-width:540px){
  .choice-recent{display:none}
  .landing-main{width:calc(100% - 32px);padding-top:calc(60px + env(safe-area-inset-top,0px) + 28px)}
  .landing-heading{gap:8px}
  .landing-logo img{width:min(300px,78vw)}
  .landing-heading p{font-size:22px}
  .game-filters{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:20px -16px 0;padding:0 16px 4px;gap:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .game-filters::-webkit-scrollbar{display:none}
  .game-filter{padding:0 16px}
  .filter-games{display:none}
  .game-choices{gap:12px;margin-top:16px}
  .game-choice{align-items:center;gap:8px;padding:14px 10px;border-radius:16px;box-shadow:inset 0 1px #ffffff11}
  .choice-pic{width:100%;height:96px;margin:0}
  .choice-pic .choice-art{zoom:.6}
  .choice-pic .blockfall-art{zoom:.5}
  .choice-copy strong{font-size:19px;text-align:center}
  .choice-copy>span{display:none}
  .game-choice.closed:after{left:6px;right:6px;bottom:6px;padding:6px 8px;font-size:11px}
  .home-foot{gap:8px 24px;margin-top:28px}
  .home-foot p{flex-basis:100%;text-align:center}
}

@media(prefers-reduced-motion:reduce){
  .game-choice,.game-choice:before,.game-filter,.landing-main,#site-nav,.rain-shade,.rain-canvas{transition:none}
  .game-choice:hover,.game-choice:focus-visible{transform:none}
  .rain-canvas{opacity:.35}
}