/* lars's games (templates/lars_game.html): the "Thank you lars" screen, the close button and the credits note, in the
   site's own dark theme. Everything is scoped by id so the game's own stylesheet can't reach it, nor it the game. */
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/nunito-800-latin.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/nunito-700-latin.woff2") format("woff2")}
#lars-credit{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;padding:20px;
  background:radial-gradient(ellipse at 50% 40%,#1d1622 0%,#0d0b10 70%);color:#f3eee9;cursor:pointer;
  font:700 16px/1.45 Nunito,system-ui,sans-serif;text-align:center;transition:opacity .35s ease;outline:none}
#lars-credit.gone{opacity:0;pointer-events:none}
#lars-credit .lc-card{max-width:460px;width:100%;padding:28px 26px 22px;border:1px solid #2b2531;border-radius:18px;
  background:#18141c;box-shadow:0 0 0 1px rgba(103,232,249,.08),0 18px 60px rgba(0,0,0,.55)}
#lars-credit .lc-mascot{display:block;width:112px;height:112px;margin:-4px auto 6px;image-rendering:auto;
  animation:lc-bob 1.6s ease-in-out infinite}
#lars-credit .lc-game{margin:0;color:#67e8f9;font-weight:800;font-size:13px;letter-spacing:.18em}
#lars-credit h1{margin:4px 0 8px;color:#f67508;font:800 clamp(28px,7vw,40px)/1.1 Nunito,system-ui,sans-serif}
#lars-credit .lc-heart{display:inline-block;animation:lc-beat 1.1s ease-in-out infinite}
#lars-credit .lc-by{margin:0 0 6px;color:#aaa1ab;font-size:14px}
#lars-credit .lc-links{margin:0 0 16px;font-size:15px}
#lars-credit a{color:#67e8f9;text-decoration:none;border-bottom:1px solid rgba(103,232,249,.4)}
#lars-credit a:hover,#lars-credit a:focus-visible{border-bottom-color:#67e8f9;outline:none}
#lars-credit .lc-go{margin:0 0 10px;color:#f3eee9;font-size:13px}
#lars-credit .lc-key{color:#f67508}
#lars-credit .lc-bar{height:3px;border-radius:2px;background:#2b2531;overflow:hidden}
#lars-credit .lc-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#f67508,#67e8f9);
  transform-origin:left;animation:lc-fill 3s linear forwards}
@keyframes lc-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lc-bob{50%{transform:translateY(-6px)}}
@keyframes lc-beat{0%,60%,100%{transform:scale(1)}30%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){#lars-credit .lc-mascot,#lars-credit .lc-heart{animation:none}}
#lars-close{position:fixed;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));z-index:2147483500;
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(13,11,16,.72);color:#f3eee9;
  border:1px solid rgba(103,232,249,.45);font:800 16px/1 Nunito,system-ui,sans-serif;text-decoration:none;opacity:.72;
  transition:opacity .15s,border-color .15s,color .15s}
#lars-close:hover,#lars-close:focus-visible{opacity:1;color:#f67508;border-color:#f67508;outline:none}
#lars-hint{position:fixed;left:50%;top:max(14px,env(safe-area-inset-top));transform:translateX(-50%);z-index:2147483500;margin:0;
  padding:7px 14px;border-radius:999px;background:rgba(13,11,16,.86);border:1px solid #67e8f9;color:#f3eee9;
  font:700 14px/1.2 Nunito,system-ui,sans-serif;pointer-events:none}
#lars-hint[hidden]{display:none}
#lars-note{position:fixed;left:50%;transform:translateX(-50%);bottom:max(8px,env(safe-area-inset-bottom));text-align:center;z-index:2147483400;
  margin:0;max-width:calc(100vw - 16px);color:#f3eee9;opacity:.5;font:700 11px/1.2 Nunito,system-ui,sans-serif;
  text-shadow:0 1px 2px #000;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.lars-playing #lars-note{opacity:0;transition:opacity 1s}
/* the in-play thanks (lars_game.html #lars-thanks): small and quiet in a corner the game's HUD leaves free; only the
   word GitHub takes a click or a tap, the rest lets everything through to the game */
#lars-thanks{position:fixed;z-index:2147483300;margin:0;max-width:calc(100vw - 72px);color:#f3eee9;opacity:.62;
  font:700 clamp(10px,2.7vw,12px)/1.2 Nunito,system-ui,sans-serif;text-shadow:0 1px 2px #000,0 0 4px #000;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;user-select:none;-webkit-user-select:none;
  transition:opacity .2s}
#lars-thanks[hidden]{display:none}
#lars-thanks:hover{opacity:.95}
#lars-thanks a{pointer-events:auto;color:#67e8f9;text-decoration:none;border-bottom:1px solid rgba(103,232,249,.5);
  padding:6px 2px;margin:-6px -2px;outline:none;-webkit-tap-highlight-color:transparent}
#lars-thanks a:hover{color:#f67508;border-bottom-color:#f67508}
#lars-thanks[data-corner=tr]{top:calc(max(8px,env(safe-area-inset-top)) + 10px);right:calc(max(8px,env(safe-area-inset-right)) + 44px)}
#lars-thanks[data-corner=bl]{bottom:max(8px,env(safe-area-inset-bottom));left:max(10px,env(safe-area-inset-left))}
#lars-thanks[data-corner=br]{bottom:max(8px,env(safe-area-inset-bottom));right:max(10px,env(safe-area-inset-right))}
#lars-thanks[data-corner=bl],#lars-thanks[data-corner=br]{max-width:calc(100vw - 20px)}
/* WUBBOTRON's title keeps that corner for its WHORL mark: the thanks shows once a run is under way */
body.title #lars-thanks[data-corner=br]{display:none}
/* FLOE STATE's title and pause keep that corner for their volume slider: the thanks shows in play */
body:has(#title.show) #lars-thanks[data-corner=bl],body:has(#pause.show) #lars-thanks[data-corner=bl]{display:none}
/* a phone: the top-right thanks folds to two short lines beside the close button, over as little of the HUD as can be */
@media (max-width:600px){#lars-thanks[data-corner=tr]{top:calc(max(8px,env(safe-area-inset-top)) + 1px);max-width:185px;padding:2px 6px;border-radius:6px;background:rgba(13,11,16,.6);
  white-space:normal;text-align:right;line-height:1.25}}