:root
{ --clr-bg: #102840; --clr-txt: #f0f0f0; --clr-lnk: #f0f0f0;
  --clr-btn-bg: #2040a0; --clr-btn-txt: #ffffff; 
  --clr-dlg-bg: #faf4e8; --clr-dlg-txt: #102840; --clr-dlg-tab: #eae4d8;
  --clr-targ-glow: #f0d020; --clr-tbl-head: #e0d0b0; --clr-tbl-row: #f0e8e0;
  --clr-ad-bg: none;
  --fnt-head: wellfleet, garamond, georgia, times new roman, serif;
  --fnt-btn: wellfleet, garamond, georgia, times new roman, serif;
  --fnt-para: copse, garamond, georgia, times new roman, serif; 
  --fnt-share: sans-serif; }
html
{ background-color: var(--clr-bg); color: var(--clr-txt); margin: 0; 
  padding: 0; font-family: var(--fnt-para); }
body 
{ margin: 0; padding: 0; }
.adbanner, .adskyscraper 
{ padding: 0; display: block; background-color: var(--clr-ad-bg); }
.adbanner 
{ margin: 0.5vh auto; text-align: center; width: 96vw; max-width: 800px; 
  height: 50px; }
.adbanner .adsbygoogle 
{ display: block; }
.adskyscraper 
{ margin: 0; width: 160px; }
.adskyscraper .adsbygoogle 
{ display: block; }
header h1 
{ text-align: center; font-size: 2vh; font-family: var(--fnt-head);
  font-weight: bold; font-variant: small-caps; margin: 0; height: 2.5vh; }
header .adbanner
{ border: none; width: 96vw; max-width: 800px; height: 50px; 
  margin: 0.5vh auto 0 auto; }
header .adbanner img
{ max-height: 100%; max-width: 100%; margin: 0; }
main 
{ display: grid; justify-content: stretch; align-content: stretch;
  grid-template-columns: 160px 1fr 160px; padding: 0; }
footer .adbanner
{ margin: 0 auto 0.5vh auto; }
.footnote
{ font-size: 1.4vh; text-align: center; margin: 0.5vh auto; height: 4vh; }
.footnote a:any-link
{ color: var(--clr-lnk); }
.footnote span
{ margin: 0 0.2em; }
#wordstacker 
{ position: relative; margin: 0.5vh auto; width: 96vw; height: 67vh;
  max-width: 53vh; min-width: 312px; min-height: 416px; 
  padding: 0; box-sizing: border-box; touch-action: none; display: grid; 
  grid-template-rows: [hs] 10% [he] 1fr [fs] 10% [fe]; 
  grid-template-columns: [le] 25% [cle] 1fr [cri] 25% [ri]; 
  justify-content: stretch; align-content: stretch; }
.wsfreeltr, .wswordltr, #wsghost 
{ border: none; width: 10%; height: 12%; margin: 0; text-align: center; 
  background-color: wheat; color: brown; border-radius: 18% / 14%; 
  user-select: none; background-size: 100% 100%; }
.wsfreeltr
{ position: absolute; cursor: grab; }
.wswordltr
{ position: absolute; }
.wstargmark
{ border: 2px solid var(--clr-targ-glow); 
  box-shadow: 0px 0px 4px var(--clr-targ-glow); }
#wsghost 
{ position: fixed; box-shadow: rgba(0,0,0,0.5) 0.5em 0.5em 0.5em; width: 10vw;
  height: 16vw; max-width: 6vh; max-height: 9vh; border-radius: 0.5em; }
.wsstacked
{ font-size: 14pt; grid-row: hs; grid-column: le; place-self: start start; 
  text-align: center; }
.wslives 
{ font-size: 14pt; width: auto; text-align: center; grid-row: hs;
  grid-column: cle; place-self: start center; }
.wscurrtitle
{ font-size: 10pt; width: auto; text-align: center; grid-row: fs;
  grid-column: cri; place-self: end end; }
.wscurrtitle::first-letter
{ font-size: 12pt; }
.wstargets
{ text-align: center; font-size: 12pt; grid-row: he; grid-column: cle; 
  place-self: start center; }
.wshidden
{ display: none; }
#wsloading
{ font-size: 16pt; grid-column: cle; grid-row: he; text-align: center; }
.wsdlg
{ box-sizing: border-box; padding: 0; width: 80vw; max-width: 80vh; 
  border-radius: 1em; font-size: 12pt; border: 2px outset white; 
  background-color: var(--clr-dlg-bg); color: var(--clr-dlg-txt); 
  text-align: center; }
.wsdlg h1, .wsdlg h2, .wsdlg h3
{ text-align: center; font-family: var(--fnt-head); font-weight: bold; }
.wsdlg h2
{ font-size: 14pt; }
.wsdlg p
{ text-align: center; margin: 1em 1em; }
#wssharedlg
{}
.wsdlg .wsclosebtn
{ border: none; background: none; font-size: 18pt; font-weight: bold; 
  position: absolute; top: 0; right: 0; padding: 0; margin: 1%; 
  cursor: pointer; box-shadow: none; color: inherit; font-family: sans-serif; }
#wssharedlg textarea
{ display: block; width: 90%; font-size: 12pt; margin: 5% auto; height: 10em; 
  font-family: var(--fnt-share); border: 2px dashed #102840; padding: 0.5em; }
.wsdlg button, #wsendbtn, #wsresultbtn, #wsydaybtn
{ font-size: 12pt; border: none; border-radius: 1em; padding: 0.5em 1em; 
  background-color: var(--clr-btn-bg); color: var(--clr-btn-txt); 
  font-family: var(--fnt-btn); font-weight: bold; 
  box-shadow: 0px 4px 4px rgba(0.2,0,0.5,0.4); cursor: pointer; }
#wsendbtn, #wsresultbtn
{ grid-row: fs; grid-column: cle; place-self: end center; }
#wsydaybtn
{ grid-row: fs; grid-column: le; place-self: end start; padding: 0.1em 1em; }
#wsydaybtn img
{ width: 30px; height: 30px; margin: 0; }
.wsdlg button
{ display: block; margin: 3% auto; }
.wsdlg button.wshidden
{ display: none; }
#wssharelinks
{ text-align: center; }
#wssharelinks a
{ display: inline-block; margin: 5px; line-height: 0; width: 30px; 
  height: 30px; font-size: 0; }
.social-facebook 
{ background-image: url('images/social-facebook.png?v=1.6'); 
  background-size: cover; }
.social-x
{ background-image: url('images/social-x.png?v=1.6');
  background-size: cover; }
.social-tumblr
{ background-image: url('images/social-tumblr.png?v=1.6');
  background-size: cover; }
.social-telegram
{ background-image: url('images/social-telegram.png?v=1.6');
  background-size: cover; }
.social-whatsapp
{ background-image: url('images/social-whatsapp.png?v=1.6');
  background-size: cover; }
.social-mastodon
{ background-image: url('images/social-mastodon.png?v=1.6');
  background-size: cover; }
#wsconfetti
{ position: fixed; top: 50vh; left: 50vw; background-repeat: no-repeat; 
  margin: -50vh -50vw; width: 100vw; height: 100vh; background-size: contain; 
  background-image: url('images/confetti.png?v=1.6'); 
  background-position: top; pointer-events: none; }
#wstitlehelpbtn
{ background-color: var(--clr-btn-bg); color: var(--clr-btn-txt);
  border: 1px solid white; cursor: pointer; font-weight: bold;
  font-family: sans-serif; border-radius: 100%; width: 30px; height: 30px;
  position: absolute; right: 0px; box-shadow: none; padding: 0; 
  margin-top: -30px; margin-right: 4px; }
#wstitlehelpbtn.wshidden
{ display: none; }
#wshelpbtn
{ background-color: var(--clr-btn-bg); color: var(--clr-btn-txt);
  border: 1px solid white; cursor: pointer; font-weight: bold; 
  font-family: sans-serif; font-size: 25px; border-radius: 100%; width: 40px; 
  height: 40px; grid-row: hs; grid-column: cri; place-self: start end; }
.wstutanim
{ text-align: center; margin: 1em auto; padding: 0; }
.wstutanim img
{ max-width: 80%; max-height: 50vh; margin: 0 auto; border-radius: 1em; }
.wshelptabset
{ display: flex; flex-wrap: wrap; justify-content: center; }
input[type="radio"].wshelptab
{ display: none; }
input[type="radio"].wshelptab + label
{ cursor: pointer; display: block; border: 2px outset white; padding: 0.25em; 
  border-bottom: 2px inset white; border-radius: 1em 1em 0 0; order: -1;
  width: 50%; margin: 0; font-size: 14pt; background-color: var(--clr-dlg-tab); 
  box-sizing: border-box; }
input[type="radio"].wshelptab + label + div.wshelptab
{ display: none; }
input[type="radio"].wshelptab:checked + label
{ font-weight: bold; 
  border-bottom: none; background-color: var(--clr-dlg-bg); }
input[type="radio"].wshelptab:checked + label + div.wshelptab
{ display: block; width: 100%; }
.wsscorekey
{ display: inline-block; margin: 0 0.3em; font-size: 11pt; }
.wsscoretable
{ font-size: 10pt; font-family: sans-serif; border-spacing: 0; 
  text-align: center; margin: 0.5em auto; }
.wsscoretable th
{ font-weight: normal; background-color: var(--clr-tbl-head);
  padding-left: 0.5em; padding-right: 0.5em; }
.wsscoretable tr:nth-child(2n)
{ background-color: var(--clr-tbl-row); }
.wsscoretable td.wsscorehl
{ border: 2px solid #2040a0; }
#wssolution table
{ text-align: center; margin-left: 1em; border-spacing: 0;
  border-collapse: collapse; margin-right: 1em; display: inline-block;
  vertical-align: top; font-size: 11pt; margin-top: 0.5em; 
  margin-bottom: 0.5em; }
#wssolution table td
{ padding: 0; }
#wssolution table td strong
{ text-decoration: underline; }
@media (min-width: 100vh) and (min-width: 700px)
{ footer .adbanner { display: none; } }
@media (max-width: 100vh) or (max-width: 700px)
{ .adskyscraper { display: none; } 
  main { display: block; } }
@media (min-width: 100vh) and (max-height: 500px)
{ header h1 { font-size: 10pt; height: 20px; }
  .footnote { font-size: 8pt; height: 40px; } }
.wsbadmove
{ animation: 0.25s 1 normal bad-shake; }
.wsgoodmove
{ animation: 0.5s 1 normal good-flash; }
.wstargmove
{ animation: 0.5s 1 normal target-flash; }
.wsupdated
{ animation: 0.25s 1 normal update-nudge; }
.wsburst
{ animation: 3s 1 normal confetti-burst; animation-timing-function: linear; }
@keyframes bad-shake
{ 12%  { scale: 110%; filter: hue-rotate(-45deg) saturate(200%); 
         translate: -5px 0px; }
  37%  { translate: 5px 0px; }
  62%  { translate: -5px 0px; }
  87%  { translate: 5px 0px; }
  100% { translate: 0px 0px; scale: 100%; filter: none; } }
@keyframes good-flash
{ 25%  { scale: 110%; filter: brightness(200%) saturate(500%); }
  100% { scale: 100%; filter: none; } }
@keyframes target-flash
{ 25%  { scale: 110%; filter: brightness(500%) saturate(500%) blur(2px); }
  100% { scale: 100%; filter: none; } }
@keyframes update-nudge
{ 0%   { translate: 0px -3px; scale: 105%; }
  33%  { translate: 0px 2px; scale: 102%; }
  66%  { translate: 0px -1px; scale: 101%; }
  100% { translate: 0px 0px; scale: 100%; } }
@keyframes confetti-burst
{ 0%   { opacity: 1.0; scale: 0%; translate: 0px 0px; }
  5%   { scale: 71%; translate: 0px 1px; }
  10%  { scale: 83%; translate: 0px 3px; }
  15%  { scale: 88%; translate: 0px 6px; }
  20%  { scale: 91%; translate: 0px 10px; }
  25%  { translate: 0px 15px; }
  30%  { translate: 0px 21px; }
  35%  { translate: 0px 28px; }
  40%  { scale: 95%; translate: 0px 36px; }
  45%  { translate: 0px 45px; }
  50%  { translate: 0px 55px; }
  60%  { scale: 97%; }
  80%  { scale: 98%; }
  100% { scale: 98%; opacity: 0.0; translate: 0px 115px; } }
@font-face
{ font-family: 'wellfleet';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/wellfleet.woff2?v=1.6') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face
{ font-family: 'copse';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/copse.woff2?v=1.6') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }