/* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not
   distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
   Adapted from A Dark Room (Doublespeak Games, https://github.com/doublespeakgames/adarkroom): css/main.css,
   css/room.css and css/dark.css (the location tabs, the buttons and their cost tooltips, the legend boxes, the event
   panel over the game, the fading message column). Scoped to #boy so the site's own styles are untouched. */
#boy {
  --bg: #272823; --fg: #eeeeee; --dim: #8a8a84; --line: #55554f; --bar: #46473f;
  position: relative; background: var(--bg); color: var(--fg);
  font-family: "Times New Roman", Times, serif; font-size: 16px; line-height: normal; letter-spacing: normal;
  padding: 20px; margin: 0 0 1rem; min-height: 600px; border-radius: 6px;
}
#boy ::selection { background-color: transparent; }
#boy [hidden] { display: none !important; }
#boy .boy-warning { text-align: center; padding: 140px 20px; }
#boy .boy-warning p { margin: 0 0 10px; }
#boy .boy-warning .button { margin: 26px auto 8px; }

/* the layout: messages on the left, the place in the middle, the boxes on the right */
#boy .boy-game { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr) 220px; gap: 0 30px; }
#boy .boy-log { position: relative; height: 560px; overflow: hidden; }
#boy .boy-log .notification { margin-bottom: 10px; }
#boy .boy-log .notification.faint { color: #a9a9a1; }      /* the ticking: faint is near (not part of A Dark Room) */
#boy .boy-log .notification.fainter { color: #77776f; }
#boy .boy-log .notification.faintest { color: #57574f; }
#boy .boy-log .notification.rewritten { animation: boy-told 2.4s ease; }      /* a line the boy just told differently */
@keyframes boy-told { 0% { color: #ffffff; text-shadow: 0 0 6px rgba(255, 255, 255, .5); } 100% { color: inherit; text-shadow: none; } }
#boy .boy-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(39, 40, 35, 0) 0%, rgba(39, 40, 35, 1) 100%); }
#boy .boy-main { position: relative; min-height: 420px; }

/* the places, as tabs (A Dark Room's header buttons) */
#boy .boy-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 26px; }
#boy .boy-tabs { display: flex; flex-wrap: wrap; row-gap: 6px; }
#boy .boy-tabs .tab { font-size: 17px; cursor: pointer; border-left: 1px solid var(--fg); margin-left: 10px; padding-left: 10px; }
#boy .boy-tabs .tab:first-child { border-left: none; margin-left: 0; padding-left: 0; }
#boy .boy-tabs .tab:hover, #boy .boy-tabs .tab.on { text-decoration: underline; }
#boy .boy-tabs .tab.on { cursor: default; }
#boy .boy-head .boy-when { color: var(--dim); white-space: nowrap; font-size: 14px; }

/* buttons, with a cooldown bar and their cost on hover */
#boy .boy-btns { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
#boy .button {
  position: relative; z-index: 0; display: block; text-align: center; border: 1px solid var(--fg); width: 120px;
  margin: 0; padding: 5px 10px; cursor: pointer; user-select: none; -webkit-user-select: none;
  background: transparent; color: var(--fg); font: inherit; border-radius: 0; box-shadow: none; text-decoration: none;
}
#boy .button:hover, #boy .button:focus-visible { background: transparent; color: var(--fg); text-decoration: underline; outline: none; }
#boy .button.disabled, #boy .button.disabled:hover { cursor: default; border-color: #66665f; color: #7d7d76; text-decoration: none; }
#boy .button .cooldown { position: absolute; top: 0; left: 0; z-index: -1; height: 100%; width: 0; background-color: var(--bar); }
#boy .button .tooltip {
  display: none; position: absolute; top: 32px; left: 2px; z-index: 999; width: 100px; padding: 2px 5px; text-align: left;
  background: #171813; border: 1px solid #000; box-shadow: -1px 3px 2px #111; color: var(--fg);
}
#boy .button .tooltip .row { display: flex; justify-content: space-between; }
#boy .button:hover > .tooltip { display: block; }

/* boxes with a legend: stores, the house, make: */
#boy .boy-side { display: flex; flex-direction: column; gap: 24px; align-self: start; }
#boy .boy-box { position: relative; border: 1px solid var(--fg); padding: 14px 10px 8px; }
#boy .boy-box::before { content: attr(data-legend); position: absolute; top: -11px; left: 8px; background: var(--bg); padding: 0 4px; }
#boy .boy-box .row { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 4px; }
#boy .boy-box .row span:last-child { color: #cfcfc8; text-align: right; }
#boy .boy-box .row.ghost span:first-child { color: #6f6f69; }
#boy .boy-box .row.ghost { border-bottom: 1px dashed rgba(238, 238, 238, .22); padding-bottom: 2px; }
#boy .boy-box .row.letter { cursor: pointer; }
#boy .boy-box .row.letter:hover { text-decoration: underline; }
#boy .shore-btns:not(:empty) { margin-bottom: 30px; }      /* the last house's buttons, above the boat (not part of A Dark Room) */
#boy .boy-make { margin-top: 34px; width: 142px; display: flex; flex-direction: column; gap: 10px; padding: 16px 10px 10px; border-color: transparent; }
#boy .boy-make::before { left: 0; padding: 0; }

/* the event panel, over the game (A Dark Room's eventPanel) */
#boy .boy-event {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%); width: min(360px, 92%); z-index: 20;
  background: var(--bg); border: 1px solid var(--fg); padding: 22px 20px 20px;
  box-shadow: 5px 5px 5px #111, 0 0 0 100vmax rgba(39, 40, 35, .6);
}
#boy .boy-event .boy-event-title { position: absolute; top: -11px; left: 14px; background: var(--bg); padding: 0 6px; font-weight: bold; }
#boy .boy-event p { margin: 0 0 8px; }
#boy .boy-event .boy-event-btns { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 18px; }
#boy .boy-event.slow .boy-event-lines p, #boy .boy-event.slow .boy-event-btns { animation: boy-in .8s ease both; }
@keyframes boy-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
/* the crossing (not part of A Dark Room): the ticking prints fainter as it nears; the boat rocks */
#boy .boy-event p.faint { color: #a9a9a1; }
#boy .boy-event p.fainter { color: #77776f; }
#boy .boy-event p.faintest { color: #57574f; }
#boy .boy-event.shudder { animation: boy-shudder .45s linear 4; }
@keyframes boy-shudder {
  0%, 100% { transform: translateX(-50%); }
  20% { transform: translate(calc(-50% - 3px), 1px); }
  45% { transform: translate(calc(-50% + 3px), -1px); }
  70% { transform: translate(calc(-50% - 2px), -1px); }
}

#boy .boy-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 18px; color: var(--dim); font-size: 14px; margin-top: 10px; }
#boy .boy-foot span { cursor: pointer; }
#boy .boy-foot span:hover { color: var(--fg); text-decoration: underline; }
#boy .boy-end { padding: 60px 10px; text-align: center; }
#boy .boy-end .row { display: flex; justify-content: space-between; max-width: 340px; margin: 0 auto 6px; }
#boy .boy-end .button { margin: 26px auto 0; }
#boy .boy-end.credits { padding: 160px 10px; letter-spacing: .04em; }
#boy .boy-end.credits p { margin: 0 0 10px; }
/* a setting card: a quiet screen before a part, lines fading in (not part of A Dark Room) */
#boy .boy-end.card { text-align: left; max-width: 520px; margin: 0 auto; padding: 110px 10px 80px; }
#boy .boy-end.card p { margin: 0 0 12px; animation: boy-in 1.2s ease both; }
#boy .boy-end.card .card-title { font-weight: bold; letter-spacing: .03em; margin-bottom: 26px; animation-delay: 0s; }
#boy .boy-end.card .button { margin: 34px 0 0; animation: boy-in 1.2s ease both; }
@media (max-width: 780px) {
  #boy { padding: 16px; }
  #boy .boy-game { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  #boy .boy-main { order: 1; min-height: 0; }
  #boy .boy-side { order: 2; }
  #boy .boy-log { order: 3; height: 220px; }
  #boy .boy-foot { order: 4; }
  #boy .boy-head { flex-direction: column; gap: 6px; margin-bottom: 18px; }
  #boy .boy-event { top: 64px; }
}

/* the sunlight (the end; not part of A Dark Room): the page turns light, slowly, and stays */
#boy { transition: background-color 6s ease, color 6s ease; }
#boy.sunlit { --bg: #f2eee3; --fg: #2b2a25; --dim: #6f6b60; --line: #bdb7a8; --bar: #ddd6c4; }
#boy.sunlit .boy-fade { background: linear-gradient(rgba(242, 238, 227, 0) 0%, rgba(242, 238, 227, 1) 100%); }
#boy.sunlit .boy-box .row span:last-child { color: #4d4a41; }
#boy.sunlit .boy-qa { color: #4d4a41; }
#boy.sunlit .boy-qa select { background: #fffdf6; color: #2b2a25; }
@media (prefers-reduced-motion: reduce) { #boy { transition: none; } #boy .boy-event.shudder { animation: none; } }

/* the learn-more notes under the game (not part of A Dark Room): closed by default, on any page colour */
.boy-notes { max-width: 720px; margin: 1.5rem auto 2.5rem; font: 16px/1.55 "Times New Roman", Times, serif; }
.boy-notes summary { cursor: pointer; opacity: .8; }
.boy-notes summary:hover, .boy-notes summary:focus-visible { opacity: 1; text-decoration: underline; outline: none; }
.boy-notes h3 { font-size: 1em; font-weight: bold; letter-spacing: .02em; margin: 1.6em 0 .5em; }
.boy-notes p { margin: 0 0 .8em; }
.boy-notes .notes-spoiler { opacity: .65; font-style: italic; margin-top: .8em; }
.boy-notes .notes-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.2em; padding: .5em 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.boy-notes .notes-row span:first-child { opacity: .75; }
.boy-notes ul { margin: 0; padding-left: 1.2em; }
@media (max-width: 600px) { .boy-notes .notes-row { grid-template-columns: 1fr; gap: .2em; } }

/* QA mode (?qa=1): not part of A Dark Room */
#boy .boy-qa { margin-top: 18px; border-top: 1px dashed #66665f; padding-top: 10px; font: 13px/1.5 ui-monospace, Menlo, monospace; color: #cfcfc8; }
#boy .boy-qa .qa-title { font-weight: 700; letter-spacing: .12em; }
#boy .boy-qa .qa-read { margin: 4px 0 6px; word-break: break-word; }
#boy .boy-qa .qa-row { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
#boy .boy-qa .qa-speed, #boy .boy-qa .qa-btn { cursor: pointer; border: 1px solid #66665f; padding: 2px 8px; }
#boy .boy-qa .qa-speed.on { border-color: #eeeeee; color: #ffffff; }
#boy .boy-qa .qa-speed:hover, #boy .boy-qa .qa-btn:hover { border-color: #eeeeee; }
#boy .boy-qa select { font: inherit; background: #1d1e19; color: #eeeeee; border: 1px solid #66665f; padding: 2px 4px; max-width: 100%; }

/* The door and full screen (not part of A Dark Room): the page is the door; once the game begins it fills the window,
   over the site's header, with a small way out ("leave", or Esc) back to the door. */
#boy .boy-leave { display: none; }
#boy.door { min-height: 0; }
#boy.door .boy-game, #boy.door .boy-end, #boy.door .boy-qa { display: none !important; }
#boy.door .boy-warning { display: block !important; padding: 90px 20px; }
html.boy-playing, html.boy-playing body { overflow: hidden; }
html.boy-playing #boy {
  position: fixed; inset: 0; z-index: 100; margin: 0; border-radius: 0; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: max(56px, 9vh) max(20px, calc((100vw - 1080px) / 2)) 28px;
}
html.boy-playing #boy .boy-leave {
  display: block; position: fixed; top: 14px; right: 18px; z-index: 1;
  background: none; border: 0; padding: 4px 6px; margin: 0; box-shadow: none;
  font: 14px "Times New Roman", Times, serif; color: var(--dim); cursor: pointer;
}
html.boy-playing #boy .boy-leave:hover, html.boy-playing #boy .boy-leave:focus-visible { color: var(--fg); text-decoration: underline; outline: none; }
@media (min-width: 781px) {
  html.boy-playing #boy .boy-log { height: min(640px, calc(100dvh - 150px)); }
}