@charset "UTF-8";
@font-face {
  font-family: "DB Helvethaica";
  src: url("./assets/fonts/db-helvethaica-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; }
html { min-width: 280px; overflow-x: clip; color-scheme: light; }
body {
  margin: 0;
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  font-family: Tahoma, sans-serif;
  font-size: 16px;
  color: #596d86;
  background: #f5f7fa url("./assets/bg.jpg") center / cover no-repeat;
  background-image: image-set(url("./assets/bg.jpg") 1x, url("./assets/bg-2x.jpg") 2x);
}
.scenery { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.feathers {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  background: center / contain no-repeat;
}
.feathers-back {
  width: min(1646px, 114vw);
  height: min(832px, 66vw, 88svh);
  top: 4%;
  background-image: url("./assets/feather2.png");
  background-image: image-set(url("./assets/feather2.png") 1x, url("./assets/feather2-2x.png") 2x);
}
.feathers-front {
  width: min(1330px, 96vw);
  height: min(301px, 25vw);
  bottom: 6%;
  background-image: url("./assets/feather1.png");
  background-image: image-set(url("./assets/feather1.png") 1x, url("./assets/feather1-2x.png") 2x);
}
main {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: max(32px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
.portal { width: min(100%, 800px); text-align: center; }
.game-logo { display: block; width: min(100%, 720px); height: auto; margin: 0 auto 22px; }
.intro { margin: 0 0 27px; font-size: 16px; line-height: 1.85; }
.launch-form { width: min(100%, 340px); margin: 0 auto; }
.launch-form label { display: block; margin-bottom: 9px; text-align: left; font-size: 14px; color: #677b94; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; width: 7px; height: 7px; right: 18px; top: 19px;
  border-right: 1.5px solid #708eac; border-bottom: 1.5px solid #708eac;
  transform: rotate(45deg); pointer-events: none;
}
select {
  display: block; width: 100%; min-height: 50px; padding: 0 42px 0 15px;
  appearance: none; border: 1px solid #c5d3e1; border-radius: 8px;
  background: #ffffffd9; color: #506780; box-shadow: 0 2px 8px #6a89a507;
  font: 16px Tahoma, sans-serif; cursor: pointer;
}
.play-button {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
  gap: 17px; width: 100%; min-height: 64px; margin-top: 18px; padding: 8px 22px 11px;
  border: 1px solid #9bdff5; border-radius: 22px;
  background: linear-gradient(180deg, #e0faff 0%, #b7eeff 46%, #8edfff 49%, #68d0fa 100%);
  box-shadow: inset 0 1px #fff, inset 0 -1px 1px #70c1e355, 0 3px #87c5e0, 0 9px 20px #71b7d51c;
  color: #225b80; font: 700 40px/1 "DB Helvethaica", Tahoma, sans-serif;
  text-shadow: 0 1px #ffffffa8; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: filter .15s, transform .15s, box-shadow .15s;
}
.play-button::before {
  content: ""; position: absolute; inset: 2px 3px 49%; z-index: -1;
  border-radius: 19px 19px 8px 8px; background: linear-gradient(#ffffff5c, #ffffff05); pointer-events: none;
}
.play-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.play-button:focus-visible, select:focus-visible { outline: 3px solid #77b6d7; outline-offset: 4px; }
.mode-hint { min-height: 20px; margin: 48px 0 0; color: #7d8fa3; font-size: 14px; line-height: 1.8; }
.help { margin: 28px 0 0; color: #8a99aa; font-size: 14px; line-height: 1.9; }
@media (hover: hover) { .play-button:hover { filter: brightness(1.035); transform: translateY(-1px); } }
.play-button:active { transform: translateY(2px); box-shadow: inset 0 1px #fff, 0 1px #87c5e0, 0 4px 12px #71b7d51c; }
@media (max-width: 640px) {
  main { padding-top: max(32px, env(safe-area-inset-top)); padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .game-logo { width: min(calc(100% + 36px), 560px); max-width: calc(100vw - 12px); margin-left: 50%; transform: translateX(-50%); margin-bottom: 24px; }
  .intro { font-size: 15px; margin-bottom: 24px; }
  .help, .mode-hint { font-size: 13px; }
  .feathers-back { top: 16%; width: 170vw; height: 85vw; }
  .feathers-front { bottom: 7%; width: min(100%, 650px); height: 32vw; }
}
@media (max-height: 520px) and (min-width: 641px) {
  main { padding-block: 24px; }
  .portal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 35px; width: min(100%, 780px); align-items: center; }
  .game-logo { grid-column: 1; margin: 0; }
  .intro { grid-column: 1; margin: 0; font-size: 14px; }
  .launch-form { grid-column: 2; grid-row: 1 / 3; }
  .help { grid-column: 1 / -1; margin: 24px 0 0; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .play-button { transition: none; } }