:root {
  font-family: "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  color: #252c29;
  background: #f8f8f5;
  font-synthesis: none;
  font-size: 15px;
  --ink: #252c29;
  --green: #315948;
  --line: #dedfd7;
  --yellow: #f6db62;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select {
  font: inherit;
}
button,
a,
select,
label.file-label {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button,
a,
input,
select {
  outline-offset: 5px;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
  background: none;
  border: 0;
}
button:hover,
a:hover {
  color: #43795d;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #2e7355;
}
svg {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
[hidden] {
  display: none !important;
}
.skip {
  position: fixed;
  left: 10px;
  top: -60px;
  z-index: 99;
  padding: 10px;
  background: #fff;
}
.skip:focus {
  top: 10px;
}
.site-header {
  max-width: 1120px;
  height: 96px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family:
    "Space Grotesk", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.8px;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--green);
  color: white;
  border-radius: 10px;
  font-size: 28px;
}
.brand small {
  font-family: "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: #777e74;
  display: block;
  margin-top: 1px;
}
nav {
  display: flex;
  gap: 18px;
  align-items: center;
}
nav button {
  font-size: 12px;
  font-weight: 600;
  padding: 8px 0;
}
.home {
  max-width: 1120px;
  margin: auto;
  padding: 0 24px;
}
.intro-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 0 34px;
}
.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  color: #6a7c68;
}
.intro-line h1 {
  font-size: 39px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.2;
  margin: 13px 0 15px;
}
.intro-line p {
  font-size: 14px;
  color: #777e74;
  margin: 0;
}
.stamp {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 0.98;
  transform: rotate(10deg);
  color: var(--green);
  border: 2px solid var(--green);
  border-radius: 50%;
  width: 95px;
  height: 95px;
  display: grid;
  align-content: center;
  text-align: center;
  margin-right: 25px;
}
.news {
  display: flex;
  align-items: center;
  gap: 16px;
  border-block: 1px solid var(--line);
  padding: 13px 0;
  font-size: 12px;
  margin-bottom: 28px;
}
.news > span {
  background: var(--green);
  color: #fff;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 9px;
  letter-spacing: 0.08em;
}
.news p {
  margin: 0;
  flex: 1;
}
.news time {
  font-family: "Space Grotesk";
  font-size: 11px;
  color: #879083;
}
.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.game-card {
  border: 1px solid #dbddd5;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  color: var(--ink);
}
.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px #263b2810;
  color: var(--ink);
}
.card-visual {
  position: relative;
  height: 280px;
  background: #e4e6df;
  overflow: hidden;
}
.card-visual canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: transform 0.5s;
}
.game-card:hover canvas {
  transform: scale(1.025);
}
.card-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 5px;
  padding: 5px 9px;
  background: #fffdf4e8;
  color: #365245;
}
.card-tag.yellow {
  background: #ffeaa4;
}
.play-icon {
  position: absolute;
  bottom: 15px;
  right: 15px;
  border-radius: 50%;
  height: 37px;
  width: 37px;
  background: #fffdf4e8;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.card-copy {
  padding: 24px 25px 20px;
}
.card-no {
  font-family: "Space Grotesk";
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #8a9184;
}
.card-copy h2 {
  font-size: 29px;
  letter-spacing: -1px;
  margin: 9px 0 10px;
}
.card-copy p {
  font-size: 13px;
  line-height: 1.8;
  color: #72776f;
  margin: 0 0 22px;
}
.card-bottom {
  border-top: 1px solid #e8e9e3;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: #7a8276;
}
.card-bottom strong {
  color: var(--green);
  font-size: 12px;
}
.home-record {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.home-record > span {
  font-family: "Space Grotesk";
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #8a9184;
}
.home-record p {
  margin: 0;
  display: flex;
  gap: 12px;
  color: #757c70;
}
.home-record b {
  color: #2e4e3d;
}
.home-record button {
  margin-left: auto;
  font-size: 11px;
}
.how {
  padding: 45px 0 50px;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
}
.how h2 {
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.6px;
  margin: 0;
}
.how p {
  font-size: 12px;
  color: #7b8177;
  line-height: 1.9;
  margin: 0;
}
footer {
  max-width: 1072px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding: 25px 0 35px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 10px;
  color: #8a9184;
}
.footer-brand {
  font-family: "Space Grotesk";
  font-size: 15px;
  font-weight: 700;
  color: #53624e;
}
footer p {
  flex: 1;
}
footer button {
  font-size: 10px;
  padding: 0;
}
.playing {
  overflow: hidden;
  overscroll-behavior: none;
  background: #dce4e9;
}
.game-header {
  height: 60px;
  background: #fffdf9;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 22px;
  position: relative;
  z-index: 5;
  border-bottom: 1px solid #dde0d7;
}
.game-header .brand {
  font-size: 14px;
  letter-spacing: -0.3px;
  gap: 12px;
}
.game-header .bar-title {
  font-size: 12px;
  color: #969a91;
  flex: 1;
}
.game-header nav {
  gap: 18px;
}
.game-header nav button {
  font-size: 11px;
}
.game-header nav button[data-action="fullscreen"] {
  font-size: 23px;
  line-height: 1;
}
.game-shell {
  height: calc(100dvh - 60px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #d7e0e5;
}
.game-shell,
.game-shell * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.game-shell :is(input, textarea) {
  -webkit-user-select: text;
  user-select: text;
}
.game-shell > canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  outline-offset: -3px;
}
.game-shell > canvas.grabbing {
  cursor: grabbing;
}
.hud {
  position: absolute;
  top: 23px;
  left: 28px;
  right: 25px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  pointer-events: none;
  gap: 15px;
}
.hud-left {
  color: #fff;
  filter: drop-shadow(0 2px 1px #202a35b0);
}
.hud-label {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 3px;
}
.main-value {
  font-family: "Space Grotesk", sans-serif;
  font-size: 49px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
}
.main-value small {
  font-size: 24px;
  margin-left: 5px;
  letter-spacing: 0;
}
.best-value {
  font-family:
    "Space Grotesk", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 10px;
}
.hud-right {
  display: flex;
  gap: 12px;
  align-items: center;
  pointer-events: auto;
}
.hud-right select {
  font-size: 11px;
  border: 1px solid #ffffff8a;
  border-radius: 6px;
  padding: 8px 25px 8px 10px;
  color: #263b39;
  background: #fffc;
  max-width: 210px;
  box-shadow: 0 2px 8px #18222b18;
}
.controls {
  display: flex;
  gap: 7px;
}
.controls button {
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  background: #fffd;
  font-size: 20px;
  box-shadow: 0 2px 5px #0001;
}
.title-overlay {
  position: absolute;
  top: 20%;
  width: 100%;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.2s;
}
.title-overlay h1 {
  color: #fff;
  font-size: clamp(46px, 6.4vw, 86px);
  font-weight: 900;
  letter-spacing: -3px;
  line-height: 1.2;
  margin: 6px 0 9px;
  -webkit-text-stroke: 7px #263b4b;
  paint-order: stroke fill;
  filter: drop-shadow(0 5px 0 #263b4b40);
}
.drive .title-overlay h1 {
  color: #fff6b4;
  -webkit-text-stroke-color: #384837;
}
.game-kicker {
  font-family: "Space Grotesk";
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #fff;
  text-shadow: 0 1px 4px #22313d;
  margin: 0 0 8px;
}
.game-subtitle {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 800;
  color: white;
  text-shadow:
    0 2px 2px #243241,
    1px 0 2px #243241,
    -1px 0 2px #243241;
  margin: 0;
}
.gesture-guide {
  position: absolute;
  left: 50%;
  bottom: 19%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  color: #fff;
  text-shadow: 0 1px 4px #253444;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.gesture-arrow {
  font-size: 49px;
  font-family: Arial;
  line-height: 1.3;
  animation: gesture 1.5s ease-in-out infinite;
}
.gesture-guide b {
  font-size: 18px;
  display: block;
  letter-spacing: -0.5px;
}
.gesture-guide span {
  font-size: 11px;
  display: block;
  margin-top: 8px;
  font-weight: 600;
}
.gone {
  opacity: 0;
  pointer-events: none;
}
.power-box {
  position: absolute;
  bottom: 18%;
  left: 50%;
  width: 250px;
  transform: translateX(-50%);
  background: #253b42e0;
  color: #fff;
  padding: 14px 18px;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 4px 22px #14232a33;
}
.power-caption {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 9px;
}
.power-track {
  height: 8px;
  background: #fff3;
  border-radius: 5px;
  overflow: hidden;
}
.power-track i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #c1e6b4, #f7d96a 60%, #ef705d);
  border-radius: 5px;
}
.bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  background: linear-gradient(transparent, #20324275);
  color: #fff;
  pointer-events: none;
  font-size: 10px;
}
.bottom-bar button {
  font-size: 11px;
  white-space: nowrap;
  pointer-events: auto;
  color: #fff;
}
.game-status {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  padding: 9px 17px;
  border-radius: 20px;
  background: #263b40d9;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.game-status.visible {
  opacity: 1;
}
.result-overlay {
  position: absolute;
  inset: 0;
  background: #263d4e38;
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  padding: 20px;
}
.result-card {
  background: #fffdf7f5;
  border: 1px solid #fff;
  border-radius: 17px;
  padding: 34px 40px 27px;
  text-align: center;
  box-shadow: 0 16px 70px #12212a38;
  max-width: 420px;
  width: 100%;
}
.result-card h2 {
  font-size: 28px;
  letter-spacing: -1px;
  margin: 13px 0 17px;
}
.result-value {
  font-family:
    "Space Grotesk", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  font-size: 51px;
  font-weight: 700;
  letter-spacing: -2px;
  color: #315948;
}
.result-value small {
  font-size: 22px;
  margin-left: 5px;
}
.result-card p {
  font-size: 12px;
  line-height: 1.8;
  color: #737a6c;
  margin: 13px 0 23px;
}
.result-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.primary,
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 13px;
  padding: 13px 18px;
  font-weight: 700;
}
.primary {
  background: #315948;
  color: #fff;
}
.primary:hover {
  background: #274a3a;
  color: white;
}
.secondary {
  border: 1px solid #daddd1;
  background: #f5f6ef;
  color: #4d6049;
}
.secondary:hover {
  background: #eaeee3;
}
.text-link {
  display: block;
  margin-top: 19px;
  font-size: 11px;
  color: #829079;
}
.result-card .eyebrow {
  font-size: 10px;
}
.dialog-close {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 27px;
  color: #6e7968;
  line-height: 1;
  padding: 5px;
}
dialog {
  border: 1px solid #e1e5d7;
  border-radius: 15px;
  background: #fffdf8;
  max-width: 520px;
  width: calc(100% - 36px);
  padding: 30px 34px;
  color: var(--ink);
  box-shadow: 0 18px 80px #16261944;
}
dialog::backdrop {
  background: #273d4680;
  backdrop-filter: blur(4px);
}
dialog h2 {
  font-size: 25px;
  letter-spacing: -0.8px;
  margin: 14px 0 18px;
}
dialog h3 {
  font-size: 14px;
  margin: 23px 0 9px;
}
dialog p {
  font-size: 13px;
  line-height: 1.9;
  color: #626c5c;
}
dialog a {
  color: #315948;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.muted {
  color: #8c9386 !important;
}
.small {
  font-size: 11px !important;
}
.name-label {
  display: flex;
  align-items: center;
  font-size: 12px;
  gap: 14px;
  margin-top: 22px;
}
.name-label input {
  min-width: 0;
  width: 170px;
  border: 1px solid #d9dfd1;
  border-radius: 5px;
  padding: 7px 10px;
  background: #fff;
}
.mini {
  font-size: 10px;
  text-decoration: underline;
  margin: 8px 0 15px;
  padding: 0;
  color: #6e8064;
}
.record-row {
  padding: 12px 0;
  border-bottom: 1px solid #e5e8dd;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
.record-row strong {
  font-family: "Space Grotesk";
  font-size: 14px;
  color: #315948;
}
.dialog-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.dialog-actions > * {
  flex: 1;
  font-size: 11px;
}
.file-label {
  cursor: pointer;
}
.file-label input {
  display: none;
}
#toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 15px);
  z-index: 100;
  padding: 12px 20px;
  border-radius: 9px;
  background: #263b39ef;
  color: white;
  box-shadow: 0 4px 20px #0002;
  pointer-events: none;
  font-size: 12px;
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
  max-width: calc(100% - 30px);
  width: max-content;
  text-align: center;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@keyframes gesture {
  0%,
  100% {
    translate: 0 0;
    opacity: 0.5;
  }
  50% {
    translate: 0 -8px;
    opacity: 1;
  }
}
@media (min-width: 1500px) {
  .card-visual {
    height: 305px;
  }
}
@media (max-width: 700px) {
  .site-header {
    height: 80px;
    padding: 0 20px;
  }
  .brand {
    font-size: 21px;
  }
  .brand-mark {
    width: 34px;
    height: 34px;
    font-size: 25px;
  }
  .brand small {
    font-size: 9px;
  }
  nav {
    gap: 13px;
  }
  nav button {
    font-size: 10px;
  }
  .home {
    padding: 0 20px;
  }
  .intro-line {
    padding: 24px 0;
  }
  .intro-line h1 {
    font-size: 30px;
    letter-spacing: -1.5px;
  }
  .intro-line p {
    font-size: 12px;
  }
  .eyebrow {
    font-size: 10px;
  }
  .stamp {
    width: 70px;
    height: 70px;
    font-size: 15px;
    margin: 0;
  }
  .news {
    font-size: 10px;
    gap: 8px;
    margin-bottom: 20px;
  }
  .news time {
    display: none;
  }
  .news > span {
    font-size: 8px;
  }
  .game-grid {
    gap: 20px;
    grid-template-columns: 1fr;
  }
  .card-visual {
    height: 260px;
  }
  .card-copy {
    padding: 20px;
  }
  .card-copy h2 {
    font-size: 26px;
    margin-top: 8px;
  }
  .card-copy p {
    font-size: 12px;
    line-height: 1.75;
  }
  .card-bottom {
    font-size: 10px;
  }
  .home-record {
    gap: 15px;
    flex-wrap: wrap;
    padding: 20px 0;
    font-size: 10px;
  }
  .home-record > span {
    width: 100%;
  }
  .home-record p {
    gap: 8px;
  }
  .home-record button {
    font-size: 10px;
  }
  .how {
    padding: 30px 0;
    display: block;
  }
  .how h2 {
    font-size: 21px;
  }
  .how p {
    margin-top: 16px;
    font-size: 11px;
  }
  footer {
    margin: 0 20px;
    gap: 12px;
    flex-wrap: wrap;
    padding: 22px 0;
  }
  footer p {
    font-size: 9px;
  }
  footer button,
  footer > a:last-child {
    font-size: 9px;
  }
  .game-header {
    height: 48px;
    padding: 0 12px;
    gap: 10px;
  }
  .game-header .brand {
    font-size: 12px;
    gap: 7px;
  }
  .game-header .bar-title {
    font-size: 10px;
  }
  .game-header nav {
    gap: 12px;
  }
  .game-header nav button {
    font-size: 10px;
  }
  .game-header nav button[data-action="fullscreen"] {
    display: none;
  }
  .game-header svg {
    width: 18px;
    height: 18px;
  }
  .game-shell {
    height: calc(100dvh - 48px);
  }
  .hud {
    top: 18px;
    left: 17px;
    right: 14px;
    gap: 8px;
  }
  .hud-label {
    font-size: 11px;
  }
  .main-value {
    font-size: 39px;
  }
  .main-value small {
    font-size: 20px;
  }
  .best-value {
    font-size: 10px;
    margin-top: 8px;
  }
  .hud-right {
    align-items: flex-end;
    gap: 8px;
    flex-direction: column;
  }
  .hud-right select {
    max-width: 175px;
    padding: 7px 17px 7px 8px;
    font-size: 10px;
  }
  .controls button {
    height: 30px;
    width: 30px;
    font-size: 18px;
  }
  .controls {
    gap: 6px;
  }
  .title-overlay {
    top: 24%;
  }
  .title-overlay h1 {
    font-size: 49px;
    -webkit-text-stroke-width: 5px;
    letter-spacing: -2px;
  }
  .game-kicker {
    font-size: 8px;
    letter-spacing: 0.15em;
  }
  .game-subtitle {
    font-size: 12px;
  }
  .gesture-guide {
    bottom: 22%;
  }
  .gesture-guide b {
    font-size: 16px;
  }
  .gesture-guide span {
    font-size: 10px;
  }
  .bottom-bar {
    padding: 12px 13px;
    font-size: 9px;
  }
  .bottom-bar > span {
    max-width: 75%;
    line-height: 1.6;
  }
  .bottom-bar button {
    font-size: 10px;
  }
  .game-status {
    top: 17%;
    font-size: 12px;
    max-width: 90%;
    white-space: normal;
    text-align: center;
    min-width: 150px;
  }
  .result-card {
    padding: 28px 25px 23px;
    max-width: 360px;
  }
  .result-card h2 {
    font-size: 26px;
  }
  .result-value {
    font-size: 48px;
  }
  dialog {
    padding: 28px 24px;
  }
  .power-box {
    bottom: 20%;
    width: 220px;
  }
}
@media (max-height: 550px) and (orientation: landscape) {
  .title-overlay {
    top: 15%;
  }
  .title-overlay h1 {
    font-size: 45px;
  }
  .gesture-guide {
    bottom: 13%;
    left: 75%;
  }
  .gesture-guide b {
    font-size: 13px;
  }
  .gesture-arrow {
    font-size: 30px;
  }
  .main-value {
    font-size: 32px;
  }
  .hud {
    top: 14px;
  }
  .game-subtitle {
    font-size: 12px;
  }
  .bottom-bar {
    padding: 6px 16px;
  }
  .result-card {
    padding: 16px 28px;
    max-width: 480px;
  }
  .result-card h2 {
    font-size: 22px;
    margin: 7px;
  }
  .result-value {
    font-size: 35px;
  }
  .result-card p {
    margin: 7px;
  }
  .result-actions {
    flex-direction: row;
    justify-content: center;
  }
  .result-actions button {
    font-size: 11px;
    padding: 10px 17px;
  }
  .text-link {
    margin-top: 10px;
  }
  .game-header {
    height: 44px;
  }
  .game-shell {
    height: calc(100dvh - 44px);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Three games and taproom */
.game-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card-copy h2 {
  font-size: 26px;
}
.card-visual {
  height: 265px;
}
.beer-card {
  background: #203634;
}
/* Compact taproom: order strip above the scene, floating controls below. */
.beer { --tap-ink:#152830; background:#172d31; }
.beer #game { top:100px;bottom:0;height:calc(100% - 100px); }
.beer .hud { top:12px;left:20px;right:20px; }
.beer .hud-label { font-size:10px; }
.beer .main-value { font-size:34px;line-height:1.1;font-variant-numeric:tabular-nums; }
.beer .main-value small { font-size:14px; }
.beer .best-value { font-size:9px;margin-top:3px; }
.beer .controls { gap:6px;pointer-events:auto; }
.beer .controls button { width:44px;height:44px;border:1px solid #ffffff50;border-radius:50%;background:#ffffff18;color:white;box-shadow:none; }
.beer button:focus-visible { outline:3px solid #ff9b57;outline-offset:3px; }
.beer-order { position:absolute;top:12px;left:50%;transform:translateX(-50%);width:340px;padding:9px 12px;background:#fff;color:#152830;border-radius:9px;pointer-events:none;display:grid;grid-template-columns:1fr auto;gap:3px 10px; }
.ticket-top { display:flex;align-items:center;gap:5px;grid-column:2;grid-row:1;font-size:9px;color:#65747b; }
.ticket-top span { font-size:8px;letter-spacing:.04em; }
.ticket-top b { color:#d94c16;font-size:12px; }
.beer-order > strong { grid-column:1;grid-row:1;font-size:14px; }
.beer-order p { grid-column:1/-1;font-size:11px;line-height:1.4;margin:0;color:#506169; }
.order-recipe { display:flex;grid-column:1;height:5px;align-self:center;overflow:hidden;border-radius:3px;background:#dce3e7; }
.order-recipe i:first-child { background:#ef9e16; }
.order-recipe i:last-child { background:#dce3e7; }
.recipe-legend { display:flex;gap:8px;font-size:8px;color:#506169; }
#beer-spill { position:absolute;top:calc(100% + 5px);right:0;display:flex;gap:10px;align-items:center;color:#ffb2a2;font-size:10px;white-space:nowrap; }
#beer-spill[hidden] { display:none; }
#beer-spill strong,#beer-spill b { font-size:12px; }
#beer-spill small { font-size:9px;margin-left:2px; }
.beer-intro { position:absolute;top:37%;left:50%;transform:translateX(-50%);width:max-content;max-width:95%;text-align:center;pointer-events:none;color:#fff;text-shadow:0 2px 8px #071b21;transition:opacity .18s; }
.beer-intro > span { font-size:10px;letter-spacing:.2em;color:#ff9b57; }
.beer-intro h1 { font-size:32px;margin:8px 0;letter-spacing:-1px; }
.beer-intro p { font-size:11px;margin:0; }
.beer-actions { position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(430px,calc(100% - 24px));display:flex;align-items:center;justify-content:flex-end;gap:12px;pointer-events:none; }
.beer-serve { pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:10px 18px;border-radius:25px;background:#ff782d;color:#152830;border:1px solid #ffa471;box-shadow:0 3px 10px #0003; }
.beer-serve svg { width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; }
.beer-serve b { font-size:16px; }
.beer-serve kbd { display:none; }
.beer-serve:disabled { opacity:.45;cursor:not-allowed; }
.beer-serve:not(:disabled):active { transform:scale(.96); }
.beer .game-status { top:auto;bottom:86px;left:50%;transform:translateX(-50%);max-width:90%;width:max-content;min-width:0;padding:7px 12px;border-radius:20px;background:#a63120df;font-size:11px; }
@media (max-width:1050px) and (min-width:701px) { .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) {
 .game-grid { grid-template-columns:1fr; } .card-visual { height:260px; }
 .beer .hud { top:10px;left:14px;right:14px; }
 .beer .hud-left { display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;max-width:220px; }
 .beer .main-value { font-size:29px; }
 .beer .best-value { flex-basis:100%;margin-top:-3px; }
 .beer-order { top:69px;left:12px;transform:none;width:calc(100% - 24px);padding:8px 10px; }
 .beer #game { top:151px;height:calc(100% - 151px); }
 .beer-intro { top:39%; }
}
@media (max-height:550px) and (orientation:landscape) {
 .beer #game { top:0;height:100%;left:220px;width:calc(100% - 220px); }
 .beer-order { top:95px;left:12px;transform:none;width:196px; }
 .ticket-top span { display:none; }
 .beer-order p { font-size:10px; }
 .beer .hud { left:12px;right:12px; }
 .beer-actions { left:auto;right:12px;transform:none;width:340px;bottom:12px; }
 .beer-intro { left:65%;top:24%; }
 .beer .game-status { left:65%;bottom:76px; }
}
@media (prefers-reduced-motion:reduce) { .beer button,.beer-intro { transition:none; } }

.beer .result-card { background:#fff;border:3px solid #152830;border-radius:9px;box-shadow:6px 7px 0 #091b2470;color:#152830; }
.beer .result-card .primary { background:#ff782d;color:#152830;font-weight:900;box-shadow:0 4px 0 #bd410f;border-radius:5px; }
.beer .result-card .secondary { background:#edf2f5;color:#152830;border-radius:5px; }
.beer .result-value { color:#e65c20; }
.spill-result { color:#b83022!important;font-weight:700; }
.beer-score-list { display:flex;gap:10px;margin:15px 0 22px; }
.beer-score-list span { flex:1;background:#edf2f5;padding:12px 5px;border-radius:4px;font-size:10px;color:#50616a; }
.beer-score-list b { display:block;font-size:18px;color:#152830;margin-top:7px; }
.controls .game-share { width:44px;height:44px;pointer-events:auto; }
.game-share svg { width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.share-dialog { background:#fff;color:#152830;max-width:380px;padding:28px 24px; }
.share-dialog .dialog-close { min-width:44px;min-height:44px;top:4px;right:6px;color:#52616b; }
.share-dialog h2 { margin:4px 0 8px; }
.share-dialog p { color:#52616b; }
.share-options { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px; }
.share-options button,.share-options a { display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:12px;background:#edf2f5;color:#152830;font-size:14px;font-weight:700;text-decoration:none; }
.share-options a { background:#152830;color:#fff; }
.share-options span { font-size:22px; }
.share-options :focus-visible,.share-dialog input:focus-visible { outline:3px solid #ff782d;outline-offset:3px; }
.share-url-label { display:block;font-size:11px;color:#52616b;margin-bottom:6px; }
.share-dialog input { width:100%;min-width:0;border:1px solid #dce3e7;border-radius:8px;padding:11px 10px;font-size:12px;background:#f5f7f9;color:#52616b; }
#share-feedback { min-height:24px;font-size:12px;line-height:1.5;margin:10px 0; }
.boast-dialog { max-height:calc(100dvh - 24px);overflow:auto; }
.boast-card { margin-top:16px;border:1px solid #dce3e7;border-radius:14px;padding:16px;text-align:center;background:#f5f7f9; }
.boast-label { font-size:11px;color:#52616b;font-weight:700; }
.boast-score { font-size:58px;line-height:1.2;font-weight:900;color:#df541c;letter-spacing:-2px;margin:8px 0 12px; }
.boast-score small { font-size:13px;letter-spacing:0;margin-left:5px; }
.boast-stats { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0; }
.boast-stats > div { padding:10px 4px;background:#fff;border-radius:8px; }
.boast-stats dt { font-size:11px;color:#52616b; }
.boast-stats dd { margin:5px 0 0;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums; }
.boast-stats dd small { font-size:11px;margin-left:3px; }
.boast-card p { margin:12px 0 0;font-size:12px;line-height:1.4; }
.share-dialog textarea { width:100%;height:65px;resize:none;border:1px solid #dce3e7;border-radius:8px;padding:8px;font-family:inherit;font-size:11px;line-height:1.5;background:#f5f7f9;color:#52616b; }
.beer .result-card .boast-button { min-height:48px;background:#152830;color:#fff;border:0; }
.beer .result-card { max-height:100%;overflow:auto; }
@media (max-height:650px) { .boast-dialog { padding:24px 20px 18px; }.boast-card { margin-top:12px;padding:12px; }.boast-score { font-size:46px;margin:4px 0 8px; }.boast-dialog .share-options { margin-top:12px; }.beer .result-card { padding:22px 24px; } }

/* Shared language switch, without restarting the active game. */
.language-control { display:flex;align-items:center;gap:3px;flex-shrink:0;color:#243833; }
.language-control > span { font-size:19px; }
.language-control select { min-height:44px;max-width:90px;border:0;background:transparent;font:600 11px/1.2 inherit;color:inherit;cursor:pointer; }
.language-control option { color:#152830;background:#fff; }
.game-header nav { gap:12px;margin-left:auto; }
.game-header { gap:12px; }
.beer-drag-guide { position:absolute;bottom:82px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 26px);text-align:center;color:#fff;background:#12352bd9;border:1px solid #ffffff3d;border-radius:14px;padding:9px 14px 10px;pointer-events:none;transition:opacity .25s,transform .25s; }
.beer-drag-guide b { display:block;font-size:12px;line-height:1.5; }
.beer-drag-guide small { display:block;font-size:10px;color:#c6e0d6;margin-top:2px; }
.beer-drag-guide.learned { opacity:0;transform:translate(-50%,8px); }
.drag-track { width:92px;height:32px;margin:0 auto 3px;position:relative; }
.drag-track > span { font-size:27px;line-height:26px;letter-spacing:20px;color:#c6e0d6; }
.drag-track svg { position:absolute;width:26px;height:26px;left:33px;top:4px;fill:#fff;stroke:#153b31;stroke-width:1.3;animation:show-drag 2s ease-in-out infinite; }
@keyframes show-drag { 0%,100% { transform:translateX(-22px) rotate(-10deg); } 50% { transform:translateX(22px) rotate(10deg); } }
.game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pasta-card .card-visual { background:#143c35; }
@media (max-width:900px) { .game-header .bar-title { display:none; } }
@media (max-width:700px) {
 .game-grid { grid-template-columns:1fr; }
 .game-header nav,.site-header nav { gap:9px; }.language-control select { max-width:78px;font-size:10px; }
 .game-header { padding:0 12px; }.game-header .brand { font-size:13px;gap:6px; }
 .site-header { padding:0 16px;gap:12px; }.site-header .brand small { display:none; }.site-header .brand { font-size:18px; }
 .site-header nav [data-action="records"],.site-header nav [data-action="sound"] { display:none; }
 .beer-drag-guide b { font-size:11px; }.beer-drag-guide small { font-size:9px; }
}
@media (max-width:400px) { .game-header .brand > span { display:none; }.game-header nav { gap:8px; } }
@media (max-height:500px) and (orientation:landscape) {
 .beer-drag-guide { bottom:70px;left:65%;padding:5px 10px; }.drag-track { height:26px; }
}
@media (prefers-reduced-motion:reduce) { .drag-track svg { animation:none; }.beer-drag-guide { transition:none; } }
@media (max-width:700px) { .beer .hud-left { max-width:calc(100% - 154px);gap:5px; } }
/* Pasta: four kitchen stations, one thumb. */
.pasta { display:flex;flex-direction:column;background:#163a32;color:#fff;overflow:hidden;--p-accent:#ff8a57;--p-good:#8fe0a9;--p-gold:#ffd36a; }
.pasta-top { display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 22px 10px;flex-shrink:0; }
.pasta-heading { min-width:0;flex:1; }
.pasta-eyebrow { font-size:9px;letter-spacing:.24em;color:#9cc9b6;font-weight:800; }
.pasta-top h1 { font-size:23px;letter-spacing:-.8px;margin:4px 0 2px;line-height:1.2; }
.pasta-instruction { margin:0;font-size:12px;line-height:1.45;color:#cfe3da; }
.pasta .controls { flex-shrink:0; }
.pasta .controls button { height:42px;width:42px;background:#ffffff12;color:#fff;border:1px solid #ffffff4d;box-shadow:none; }
.pasta-viewport { position:relative;flex:1;min-height:0;isolation:isolate;background:#2a2420; }
.pasta #game { position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:pointer;outline:none; }
.pasta[data-stage="toss"] #game { cursor:ns-resize; }
.pasta-steps { position:absolute;top:10px;left:12px;display:flex;gap:4px;margin:0;padding:4px;list-style:none;background:#1b1512b3;border-radius:20px;pointer-events:none;backdrop-filter:blur(6px); }
.pasta-steps li { display:flex;align-items:center;gap:5px;padding:3px 8px 3px 3px;border-radius:14px;font-size:10px;font-weight:800;color:#ffffff80; }
.pasta-steps i { width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;background:#ffffff1f; }
.pasta-steps li.active { background:#fff;color:#173b31; }
.pasta-steps li.active i { background:var(--p-accent);color:#fff; }
.pasta-steps li.done { color:#bfe8cf; }
.pasta-steps li.done i { background:#3e8a5f;color:#fff; }
.pasta[data-stage="recipe"] .pasta-steps,.pasta[data-stage="result"] .pasta-steps { display:none; }
.pasta-pop { position:absolute;top:22%;left:50%;transform:translate(-50%,0) scale(.6);font:900 34px/1 "Space Grotesk","Noto Sans KR",system-ui,sans-serif;letter-spacing:-1px;color:#fff6d8;text-shadow:0 3px 0 #8f2f18,0 6px 18px #0007;opacity:0;pointer-events:none;white-space:nowrap;z-index:3; }
.pasta-pop.perfect { color:#fff3b0;text-shadow:0 3px 0 #b5531c,0 0 22px #ffcf6a99,0 6px 18px #0007; }
.pasta-pop.good { color:#d9ffe6;text-shadow:0 3px 0 #2a6a45,0 6px 18px #0007; }
.pasta-pop.thick,.pasta-pop.thin,.pasta-pop.high,.pasta-pop.low,.pasta-pop.miss { color:#ffe1d6;font-size:27px;text-shadow:0 3px 0 #7a2a1d,0 6px 18px #0007; }
.pasta-pop.show { animation:pasta-pop .75s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes pasta-pop { 0% { opacity:0;transform:translate(-50%,12px) scale(.6) rotate(-4deg); } 18% { opacity:1;transform:translate(-50%,0) scale(1.08) rotate(-4deg); } 70% { opacity:1;transform:translate(-50%,-6px) scale(1) rotate(-4deg); } 100% { opacity:0;transform:translate(-50%,-22px) scale(.95) rotate(-4deg); } }
.pasta-gauge { position:absolute;right:12px;top:50%;transform:translateY(-50%);width:44px;height:min(260px,62%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 10px;background:#1b1512c4;border-radius:22px;pointer-events:none;backdrop-filter:blur(6px); }
.pasta-gauge > b { font-size:10px;color:#f4e6d6; }
.gauge-track { position:relative;flex:1;width:12px;border-radius:6px;background:linear-gradient(#ff5d3a,#ffb347 45%,#6fb7ff); }
.pasta-gauge[data-kind="boil"] .gauge-track { background:linear-gradient(#ffffff,#d8eef2); }
.pasta-gauge[data-kind="toss"] .gauge-track { background:#ffffff26; }
.gauge-zone { position:absolute;left:-6px;right:-6px;border:2px solid var(--p-good);border-radius:7px;background:#8fe0a940; }
.pasta-gauge[data-kind="boil"] .gauge-zone { border-color:#ff7a5c;background:#ff7a5c44; }
.pasta-gauge[data-kind="toss"] .gauge-zone { border-color:var(--p-gold);background:#ffd36a40; }
.gauge-needle { position:absolute;left:-9px;right:-9px;height:4px;margin-bottom:-2px;border-radius:2px;background:#fff;box-shadow:0 0 0 2px #1b1512,0 0 10px #fff; }
.pasta[data-heat="hot"] .gauge-needle { background:#ff6a45;box-shadow:0 0 0 2px #1b1512,0 0 14px #ff6a45; }
.pasta[data-foam="high"] .pasta-gauge { animation:pasta-warn .4s ease-in-out infinite alternate; }
@keyframes pasta-warn { to { background:#7a2a1dd9; } }
.pasta-intro { position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:min(360px,calc(100% - 28px));padding:16px 18px 14px;border-radius:18px;background:#fffaf0f2;color:#1f3a31;text-align:center;box-shadow:0 14px 40px #0007;pointer-events:none;animation:pasta-intro .45s cubic-bezier(.2,1.2,.4,1) both;z-index:4; }
@keyframes pasta-intro { from { opacity:0;transform:translate(-50%,20px); } }
.intro-step { font-size:10px;letter-spacing:.2em;font-weight:900;color:#c4572f; }
.pasta-intro h2 { margin:4px 0 6px;font-size:24px;letter-spacing:-.8px; }
.pasta-intro p { margin:0 0 12px;font-size:12px;line-height:1.55;color:#4d6158; }
.intro-hint { display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 10px;border-radius:22px;background:#1f3a31;color:#fff;font-size:13px; }
.intro-icon svg { width:28px;height:28px;display:block;fill:#fff;stroke:#1f3a31;stroke-width:1; }
.intro-icon .ring { fill:none;stroke:var(--p-accent);stroke-width:2;animation:pasta-tap 1.2s ease-out infinite;transform-origin:16px 12px; }
.intro-icon .pulse { animation-duration:1.6s; }
.intro-icon .arrow { fill:var(--p-accent);stroke:none;animation:pasta-up 1.1s ease-in-out infinite; }
@keyframes pasta-tap { from { transform:scale(.4);opacity:1; } to { transform:scale(1.3);opacity:0; } }
@keyframes pasta-up { 0%,100% { transform:translateY(3px); } 50% { transform:translateY(-3px); } }
.pasta-status { position:absolute;inset:0;display:grid;place-items:center;background:#1b1512b3;color:#fff;font-size:24px;font-weight:800;z-index:5; }
.pasta-bottom { flex-shrink:0;padding:12px 22px max(10px,env(safe-area-inset-bottom));background:#10302a;border-top:1px solid #ffffff1a; }
.pasta-bottom > * { max-width:600px;margin-left:auto;margin-right:auto; }
.pasta-recipes { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }
.pasta-recipes button { min-height:54px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #ffffff3d;border-radius:12px;color:#d5e8de;font-size:12px;padding:8px 6px;transition:background .15s,border-color .15s,transform .1s; }
.pasta-recipes button[aria-pressed="true"] { background:#fff;color:#173b31;border-color:#fff; }
.pasta-recipes button:active { transform:scale(.97); }
.sauce-dot { width:18px;height:18px;flex-shrink:0;border-radius:50%;background:var(--sauce);box-shadow:inset 0 0 0 3px #ffffff38,0 0 0 1px #0002; }
.pasta-recipe-note { text-align:center;color:#b2d1c4;font-size:11px;margin:8px auto 10px; }
.pasta-chips { display:flex;justify-content:center;gap:6px;margin-bottom:10px;flex-wrap:wrap; }
.pasta-chips span { display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:16px;border:1px solid #ffffff2e;font-size:11px;color:#a9c8bb;font-weight:700; }
.pasta-chips span.active { border-color:#fff;color:#fff;background:#ffffff14; }
.pasta-chips span.done,.pasta-chips span.perfect { color:#bfeccd;border-color:#3e8a5f;background:#3e8a5f33; }
.pasta-chips span.good { color:#fff3c4;border-color:#b99a3c; }
.pasta-chips span.high,.pasta-chips span.low { color:#ffd0c2;border-color:#a2513b; }
.pasta-chips i { width:10px;height:10px;border-radius:50%; }
.pasta-meter { margin-bottom:10px; }
.meter-track { position:relative;height:10px;border-radius:5px;background:#2f5447;overflow:hidden; }
.meter-track i { position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#f0c76a,var(--p-accent));border-radius:5px; }
.meter-window { position:absolute;top:0;bottom:0;background:#8fe0a955;border-left:2px solid var(--p-good);border-right:2px solid var(--p-good);z-index:1; }
.meter-scale { display:flex;justify-content:space-between;margin-top:5px;font-size:10px;color:#9fc2b3; }
.meter-scale span:nth-child(2) { color:var(--p-good);font-weight:800;margin-left:12%; }
.pasta-bottom-row { display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px; }
.pasta-detail { font-size:12px;color:#d6eadf;line-height:1.4;min-width:0;flex:1;font-variant-numeric:tabular-nums;font-weight:700; }
.pasta[data-heat="hot"] .pasta-detail { color:#ffad94; }
.pasta[data-heat="good"] .pasta-detail { color:var(--p-good); }
.pasta-next { min-height:48px;padding:12px 24px;border-radius:25px;background:var(--p-accent);color:#1d322b;font-size:14px;font-weight:900;flex-shrink:0;box-shadow:0 3px 0 #c5542d; }
.pasta-next:disabled { opacity:.38;cursor:not-allowed;box-shadow:none; }
.pasta-next:not(:disabled):active { transform:translateY(2px);box-shadow:0 1px 0 #c5542d; }
.pasta[data-stage="recipe"] .pasta-bottom-row { justify-content:center; }
.pasta[data-stage="recipe"] .pasta-detail { display:none; }
.pasta[data-stage="recipe"] .pasta-next { min-width:200px; }

@keyframes pasta-ready { 50% { box-shadow:0 3px 0 #c5542d,0 0 0 6px #ff8a5733; } }
.pasta-key-help { font-size:9px;color:#86b09d;text-align:center;margin-top:8px;margin-bottom:0; }
.pasta-result-overlay { top:auto;align-items:end;justify-items:center;background:none;backdrop-filter:none;padding:12px;max-height:100%; }
@media (min-width:900px) and (min-height:501px) { .pasta-result-overlay { inset:60px 24px 0 auto;width:420px;align-items:center; } }
.pasta-result { width:min(420px,100%);max-height:100%;overflow:auto;background:#fffaf0;border:0;border-radius:20px;color:#1f3a31;padding:18px 20px 14px; }
.pasta-result h2 { font-size:22px;margin:6px 0 4px; }
.pasta-score-line { display:flex;align-items:center;justify-content:center;gap:12px; }
.pasta-result .result-value { color:#d9582f;font-size:46px; }
.pasta-stars { font-size:24px;color:#f2a52b;letter-spacing:2px; }
.pasta-stars em { font-style:normal;color:#e3dccb; }
.pasta-result .pasta-critic { margin:2px 0 10px;font-size:13px;color:#4d6158;line-height:1.5; }
.pasta-score-list { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0; }
.pasta-score-list span { background:#f0f0e6;padding:8px 2px;border-radius:9px;font-size:10px;color:#5d6f66; }
.pasta-score-list b { display:block;font-size:19px;margin-top:3px;color:#1f3a31; }
.pasta-result .pasta-result-detail { margin:6px 0 12px;font-size:11px; }
.pasta-result .result-actions { flex-direction:row; }
.pasta-result .result-actions > * { flex:1; }
.pasta-result .primary { background:var(--p-accent);color:#1d322b;min-height:46px; }
.pasta-result .secondary { background:#1f3a31;color:#fff;min-height:46px; }
.pasta-result .text-link { margin-top:12px; }
.pasta-error { padding:24px;text-align:center; }
.pasta-error button { min-height:44px;background:#fff;color:#153b31;border-radius:8px;padding:10px 20px; }
.pasta button:focus-visible { outline:3px solid #a6e2c2;outline-offset:3px; }
@media (max-width:700px) {
 .pasta-top { padding:10px 14px 8px; }.pasta-top h1 { font-size:20px; }.pasta-instruction { font-size:11px; }
 .pasta-bottom { padding:10px 14px max(10px,env(safe-area-inset-bottom)); }
 .pasta-recipes { gap:6px; }.pasta-recipes button { flex-direction:column;gap:5px;font-size:11px;min-height:62px;padding:7px 3px; }
 .pasta-pop { font-size:30px; }.pasta-next { padding:12px 18px;font-size:13px; }
 .pasta-steps span { display:none; }.pasta-steps li { padding:3px; }.pasta-steps li.active span { display:inline; }.pasta-steps li.active { padding-right:8px; }
}
@media (max-width:400px) { .pasta-top h1 { font-size:18px; }.pasta .controls { gap:5px; }.pasta .controls button { width:38px;height:38px; } }
@media (max-height:650px) {
 .pasta-top { padding-top:6px;padding-bottom:6px; }.pasta-instruction { display:none; }
 .pasta-recipes button { min-height:46px;flex-direction:row;gap:5px; }.pasta-recipe-note { margin:6px auto; }
 .pasta-key-help { display:none; }.pasta-intro { padding:10px 14px; }.pasta-intro h2 { font-size:19px;margin:2px 0 4px; }.pasta-intro p { margin-bottom:8px; }
 .pasta-result { padding:12px 16px; }.pasta-result .result-value { font-size:36px; }.pasta-result .pasta-critic { margin-bottom:4px; }
}
@media (max-height:500px) and (orientation:landscape) {
 .pasta { display:grid;grid-template-columns:230px 1fr;grid-template-rows:auto 1fr; }
 .pasta-top { grid-column:1;grid-row:1;flex-direction:column;padding:10px 14px; }
 .pasta-viewport { grid-column:2;grid-row:1 / 3; }
 .pasta-bottom { grid-column:1;grid-row:2;border-top:0;overflow:auto;padding:6px 14px 10px; }
 .pasta-recipes { grid-template-columns:1fr 1fr; }.pasta-recipes button { min-height:40px;flex-direction:row; }
 .pasta-recipe-note,.pasta-key-help { display:none; }
 .pasta-bottom-row { flex-wrap:wrap; }.pasta-next { width:100%;min-height:44px;padding:8px 14px; }
 .pasta-intro { bottom:10px;padding:10px 14px; }.pasta-intro p { display:none; }.pasta-intro h2 { font-size:18px; }
 .pasta-result-overlay { inset:0 0 0 auto;width:min(380px,50%);align-items:center; }.pasta-result { padding:10px 16px; }.pasta-result .result-value { font-size:32px; }.pasta-result .pasta-critic,.pasta-result .text-link { display:none; }.pasta-score-list b { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) { .pasta-pop.show { animation-duration:.01s; }.pasta-intro,.intro-icon *,.pasta-next { animation:none !important; } }
/* pasta: guests, order ticket, fever */
.guest-avatar { --guest:#6f8fb8;position:relative;flex-shrink:0;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#ffe3c9 0 30%,transparent 31%),var(--guest);box-shadow:inset 0 -3px 0 #0002; }
.guest-avatar i { position:absolute;left:50%;top:44%;width:13px;height:4px;transform:translateX(-50%);background:radial-gradient(circle,#3b2a20 0 1.4px,transparent 1.6px) 0 0/6.5px 4px repeat-x; }
.pasta-guest { display:flex;align-items:center;gap:12px;margin:0 auto 10px;padding:10px 12px;border-radius:14px;background:#ffffff10;border:1px solid #ffffff22; }
.pasta-guest b { font-size:13px; }
.pasta-guest p { margin:2px 0 0;font-size:12px;line-height:1.45;color:#d5e8de; }
.guest-kicker { display:block;font-size:9px;letter-spacing:.16em;color:var(--p-gold);font-weight:800; }
.pasta-recipes button { position:relative; }
.sauce-ordered { position:absolute;top:-7px;right:6px;padding:1px 6px;border-radius:8px;background:var(--p-gold);color:#3b2a12;font-size:9px;font-style:normal;font-weight:900; }
.pasta-order { position:absolute;top:46px;left:12px;display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:20px;background:#fffaf0e8;color:#1f3a31;pointer-events:none;box-shadow:0 6px 16px #0004;z-index:2; }
.pasta-order .guest-avatar { width:26px;height:26px; }
.pasta-order small { display:block;font-size:9px;color:#7b6a55;font-weight:800; }
.pasta-order b { display:block;font-size:11px;line-height:1.2; }
.pasta[data-stage="result"] .pasta-order,.pasta[data-stage="recipe"] .pasta-order { display:none; }
.pasta[data-fever="on"] .pasta-viewport::after { content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 3px #ffd36acc,inset 0 0 60px #ffb43766;animation:pasta-fever .5s ease-in-out infinite alternate;z-index:1; }
@keyframes pasta-fever { to { box-shadow:inset 0 0 0 3px #ffd36a66,inset 0 0 90px #ffb43799; } }
.pasta-pop.fever { color:#fff7c2;text-shadow:0 3px 0 #c2641b,0 0 26px #ffd36a,0 6px 18px #0007;font-size:38px; }
.pasta-pop.cue { color:#fff;font-size:24px;text-shadow:0 3px 0 #7a1f2b,0 6px 18px #0007; }
.pasta-guest-result { display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:9px 10px;border-radius:12px;background:#f3ede0;text-align:left; }
.pasta-guest-result b { font-size:12px; }
.pasta-guest-result p { margin:1px 0 0;font-size:12px;line-height:1.4;color:#4d6158; }
.pasta-guest-result > div { flex:1;min-width:0; }
.pasta-tip { flex-shrink:0;padding:5px 9px;border-radius:9px;background:#e3dccb;color:#7b6a55;font-size:11px;font-weight:900;font-variant-numeric:tabular-nums; }
.pasta-guest-result.happy .pasta-tip { background:#ffd36a;color:#4a3410;animation:pasta-tip .6s cubic-bezier(.2,1.6,.4,1) both .3s; }
@keyframes pasta-tip { from { transform:scale(.4) rotate(-10deg);opacity:0; } }
@media (max-height:500px) and (orientation:landscape) { .pasta-guest { padding:6px 10px;margin-bottom:6px; } .pasta-guest p { display:none; } }
/* ── dalgona ── */
.dalgona-card .card-visual { background:#1b1a24; }
.dalgona { display:flex;flex-direction:column;background:#1d1b26;color:#fff;overflow:hidden;--p-accent:#f0a23a;--p-good:#8fe0a9;--p-gold:#ffd36a;--dal-red:#d94b3a; }
.dal-top { display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 22px 10px;flex-shrink:0; }
.dal-heading { min-width:0;flex:1; }
.dal-eyebrow { font-size:9px;letter-spacing:.24em;color:#f0b866;font-weight:800; }
.dal-top h1 { font-size:23px;letter-spacing:-.8px;margin:4px 0 2px;line-height:1.2; }
.dal-instruction { margin:0;font-size:12px;line-height:1.45;color:#d8d2e6; }
.dalgona .controls { flex-shrink:0; }
.dalgona .controls button { height:42px;width:42px;background:#ffffff12;color:#fff;border:1px solid #ffffff4d;box-shadow:none; }
.dal-viewport { position:relative;flex:1;min-height:0;isolation:isolate;background:#1b1a24; }
.dalgona #game { position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:pointer;outline:none; }
.dalgona[data-stage="carve"] #game { cursor:crosshair; }
.dal-steps { position:absolute;top:10px;left:12px;display:flex;gap:4px;margin:0;padding:4px;list-style:none;background:#14121bb3;border-radius:20px;pointer-events:none;backdrop-filter:blur(6px); }
.dal-steps li { display:flex;align-items:center;gap:5px;padding:3px 8px 3px 3px;border-radius:14px;font-size:10px;font-weight:800;color:#ffffff80; }
.dal-steps i { width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;background:#ffffff1f; }
.dal-steps li.active { background:#fff;color:#2b2233; }
.dal-steps li.active i { background:var(--p-accent);color:#fff; }
.dal-steps li.done { color:#ffd9a0; }
.dal-steps li.done i { background:#b9772b;color:#fff; }
.dalgona[data-stage="pick"] .dal-steps,.dalgona[data-stage="result"] .dal-steps { display:none; }
.dal-pop { position:absolute;top:20%;left:50%;transform:translate(-50%,0) scale(.6);font:900 32px/1 "Space Grotesk","Noto Sans KR",system-ui,sans-serif;letter-spacing:-1px;color:#fff3d6;text-shadow:0 3px 0 #8a4a14,0 6px 18px #0008;opacity:0;pointer-events:none;white-space:nowrap;z-index:3; }
.dal-pop.perfect { color:#ffe9a0;text-shadow:0 3px 0 #b5531c,0 0 22px #ffcf6a99,0 6px 18px #0008;font-size:38px; }
.dal-pop.good { color:#e2ffe9;text-shadow:0 3px 0 #2a6a45,0 6px 18px #0008; }
.dal-pop.miss { color:#ffe1d6;font-size:27px;text-shadow:0 3px 0 #7a2a1d,0 6px 18px #0008; }
.dal-pop.small { font-size:20px;top:30%; }
.dal-pop.show { animation:pasta-pop .75s cubic-bezier(.2,1.4,.4,1) forwards; }
.dal-gauge { position:absolute;right:12px;top:50%;transform:translateY(-50%);width:44px;height:min(260px,62%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 10px;background:#14121bc4;border-radius:22px;pointer-events:none;backdrop-filter:blur(6px); }
.dal-gauge > b { font-size:10px;color:#f4e6d6; }
.dal-gauge[data-kind="melt"] .gauge-track { background:linear-gradient(#2c170b,#8d4a16 22%,#d98f2a 38%,#f2d58a 68%,#fbf7ee); }
.dal-gauge[data-kind="soda"] .gauge-track { background:linear-gradient(#fff2c8,#e8b55c 60%,#b9772b); }
.dal-gauge[data-kind="press"] .gauge-track { background:linear-gradient(#e8d6b0,#b9772b); }
.dal-gauge .gauge-zone { border-color:#fff;background:#ffffff30; }
.dalgona[data-heat="good"] .gauge-zone { border-color:var(--p-good);background:#8fe0a955;box-shadow:0 0 12px #8fe0a9; }
.dalgona[data-heat="hot"] .gauge-needle { background:#ff6a45;box-shadow:0 0 0 2px #14121b,0 0 14px #ff6a45; }
.dal-hud { position:absolute;top:46px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:2; }
.dal-time { display:flex;align-items:baseline;gap:2px;padding:4px 12px;border-radius:14px;background:#14121bc4;backdrop-filter:blur(6px); }
.dal-time b { font:900 26px/1 "Space Grotesk",system-ui,sans-serif;font-variant-numeric:tabular-nums; }
.dal-time small { font-size:11px;color:#d8d2e6; }
.dal-risk { display:flex;flex-direction:column;align-items:flex-end;gap:5px;padding:7px 10px;border-radius:14px;background:#14121bc4;backdrop-filter:blur(6px);min-width:120px; }
.dal-risk > span { font-size:9px;letter-spacing:.1em;color:#d8d2e6;font-weight:800; }
.risk-track { width:100%;height:7px;border-radius:4px;background:#ffffff22;overflow:hidden; }
.risk-track i { display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#8fe0a9,#ffd36a 55%,#ff5d3a);transition:width .08s linear; }
.dalgona[data-risk="high"] .dal-risk { animation:pasta-warn .35s ease-in-out infinite alternate; }
.dal-chips { display:flex;gap:4px; }
.dal-chips i { width:14px;height:14px;border-radius:50%;border:2px solid #ffffff55; }
.dal-chips i.on { background:var(--dal-red);border-color:#ff9a8a;box-shadow:0 0 8px var(--dal-red); }
.dal-lick { position:absolute;right:12px;bottom:14px;display:flex;align-items:center;gap:6px;min-height:46px;padding:10px 16px;border-radius:24px;background:#5aa7d8;color:#0f2a3a;font-size:13px;font-weight:900;box-shadow:0 3px 0 #2f6f99;z-index:3; }
.dal-lick b { display:grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:#0f2a3a;color:#fff;font-size:11px; }
.dal-lick:disabled { opacity:.45;box-shadow:none; }
.dal-lick:not(:disabled):active { transform:translateY(2px);box-shadow:0 1px 0 #2f6f99; }
.dalgona[data-flash="bad"] .dal-viewport::after { content:"";position:absolute;inset:0;pointer-events:none;animation:dal-flash .5s ease-out forwards;box-shadow:inset 0 0 0 4px #ff5d3a,inset 0 0 80px #ff5d3a88;z-index:1; }
.dalgona[data-flash="soft"] .dal-viewport::after { content:"";position:absolute;inset:0;pointer-events:none;animation:dal-flash .4s ease-out forwards;box-shadow:inset 0 0 60px #ffd36a66;z-index:1; }
@keyframes dal-flash { to { opacity:0; } }
.dal-intro { position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:min(360px,calc(100% - 28px));padding:16px 18px 14px;border-radius:18px;background:#fff8ec;color:#2b2233;text-align:center;box-shadow:0 14px 40px #0008;pointer-events:none;animation:pasta-intro .45s cubic-bezier(.2,1.2,.4,1) both;z-index:4; }
.dal-intro h2 { margin:4px 0 6px;font-size:24px;letter-spacing:-.8px; }
.dal-intro p { margin:0 0 12px;font-size:12px;line-height:1.55;color:#5b5166; }
.dal-intro .intro-hint { background:#2b2233; }
.dal-intro .intro-icon svg { stroke:#2b2233; }
.dal-status { position:absolute;inset:0;display:grid;place-items:center;background:#14121bb3;color:#fff;font-size:24px;font-weight:800;z-index:5; }
.dal-bottom { flex-shrink:0;padding:12px 22px max(10px,env(safe-area-inset-bottom));background:#15131d;border-top:1px solid #ffffff1a; }
.dal-bottom > * { max-width:600px;margin-left:auto;margin-right:auto; }
.dal-shapes { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }
.dal-shapes button { min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid #ffffff3d;border-radius:12px;color:#e2dcef;font-size:12px;padding:8px 4px;transition:background .15s,border-color .15s,transform .1s; }
.dal-shapes button[aria-pressed="true"] { background:#fff;color:#2b2233;border-color:#fff; }
.dal-shapes button:active { transform:scale(.97); }
.shape-icon { width:22px;height:22px;fill:#e8a648;stroke:#8a4a14;stroke-width:.05; }
.dal-stars { font-size:9px;color:#f0a23a;letter-spacing:1px; }
.dal-stars em { font-style:normal;color:#ffffff33; }
.dal-shapes button[aria-pressed="true"] .dal-stars em { color:#d9d2c4; }
.dal-note { text-align:center;color:#c7bfd8;font-size:11px;margin:8px auto 10px; }
.dal-meter { margin-bottom:10px; }
.dal-meter .meter-track { position:relative;height:10px;border-radius:5px;background:#ffffff1f;overflow:hidden; }
.dal-meter i { display:block;height:100%;width:0;background:linear-gradient(90deg,#f0a23a,#ffd36a);border-radius:5px; }
.dal-bottom-row { display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px; }
.dal-detail { font-size:12px;color:#e4dcf0;line-height:1.4;min-width:0;flex:1;font-variant-numeric:tabular-nums;font-weight:700; }
.dalgona[data-heat="good"] .dal-detail { color:var(--p-good); }
.dalgona[data-heat="hot"] .dal-detail,.dalgona[data-risk="high"] .dal-detail { color:#ffad94; }
.dal-next { min-height:48px;padding:12px 24px;border-radius:25px;background:var(--p-accent);color:#2b1a08;font-size:14px;font-weight:900;flex-shrink:0;box-shadow:0 3px 0 #a8641c; }
.dal-next:not(:disabled):active { transform:translateY(2px);box-shadow:0 1px 0 #a8641c; }
.dalgona[data-stage="pick"] .dal-bottom-row { justify-content:center; }
.dalgona[data-stage="pick"] .dal-detail { display:none; }
.dal-key-help { font-size:9px;color:#9c93ae;text-align:center;margin-top:8px;margin-bottom:0; }
.dal-result-overlay { top:auto;align-items:end;justify-items:center;background:none;backdrop-filter:none;padding:12px;max-height:100%; }
@media (min-width:900px) and (min-height:501px) { .dal-result-overlay { inset:60px 24px 0 auto;width:420px;align-items:center; } }
.dal-result { width:min(420px,100%);max-height:100%;overflow:auto;background:#fff8ec;border:0;border-radius:20px;color:#2b2233;padding:18px 20px 14px; }
.dal-result h2 { font-size:24px;margin:6px 0 4px; }
.dal-result.win h2 { color:#b5531c; }
.dal-score-line { display:flex;align-items:center;justify-content:center;gap:12px; }
.dal-result .result-value { color:#c9622a;font-size:46px; }
.dal-shape-badge { display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:16px;background:#f1e3c8;font-size:13px;font-weight:800; }
.dal-vendor { margin:4px 0 10px;padding:9px 12px;border-radius:12px;background:#f1e8d8;font-size:12px;line-height:1.45;color:#5b5166;text-align:left; }
.dal-vendor b { display:block;font-size:10px;letter-spacing:.06em;color:#9a5a24;margin-bottom:2px; }
.dal-score-list { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0 12px; }
.dal-score-list span { background:#efe8da;padding:8px 2px;border-radius:9px;font-size:10px;color:#6b6176; }
.dal-score-list b { display:block;font-size:19px;margin-top:3px;color:#2b2233; }
.dal-result .result-actions { flex-direction:row; }
.dal-result .result-actions > * { flex:1; }
.dal-result .primary { background:var(--p-accent);color:#2b1a08;min-height:46px; }
.dal-result .secondary { background:#2b2233;color:#fff;min-height:46px; }
.dal-result .text-link { margin-top:12px; }
.dalgona button:focus-visible { outline:3px solid #ffd9a0;outline-offset:3px; }
@media (max-width:700px) {
 .dal-top { padding:10px 14px 8px; }.dal-top h1 { font-size:20px; }.dal-instruction { font-size:11px; }
 .dal-bottom { padding:10px 14px max(10px,env(safe-area-inset-bottom)); }
 .dal-shapes { gap:6px; }.dal-shapes button { font-size:11px;min-height:62px;padding:7px 3px; }
 .dal-pop { font-size:28px; }
 .dal-steps span { display:none; }.dal-steps li { padding:3px; }.dal-steps li.active span { display:inline; }.dal-steps li.active { padding-right:8px; }
}
@media (max-width:400px) { .dal-top h1 { font-size:18px; }.dalgona .controls { gap:5px; }.dalgona .controls button { width:38px;height:38px; } }
@media (max-height:650px) {
 .dal-top { padding-top:6px;padding-bottom:6px; }.dal-instruction { display:none; }
 .dal-shapes button { min-height:50px; }.dal-note { margin:6px auto; }
 .dal-key-help { display:none; }.dal-intro { padding:10px 14px; }.dal-intro h2 { font-size:19px;margin:2px 0 4px; }.dal-intro p { margin-bottom:8px; }
 .dal-result { padding:12px 16px; }.dal-result .result-value { font-size:36px; }
}
@media (max-height:500px) and (orientation:landscape) {
 .dalgona { display:grid;grid-template-columns:230px 1fr;grid-template-rows:auto 1fr; }
 .dal-top { grid-column:1;grid-row:1;flex-direction:column;padding:10px 14px; }
 .dal-viewport { grid-column:2;grid-row:1 / 3; }
 .dal-bottom { grid-column:1;grid-row:2;border-top:0;overflow:auto;padding:6px 14px 10px; }
 .dal-shapes { grid-template-columns:1fr 1fr; }.dal-shapes button { min-height:44px;flex-direction:row;gap:6px; }.dal-stars { display:none; }
 .dal-note,.dal-key-help { display:none; }
 .dal-bottom-row { flex-wrap:wrap; }.dalgona .dal-modes { width:100%;flex-direction:column;gap:6px; }.dalgona .dal-next,.dalgona .dal-make { width:100%;min-height:44px;padding:6px 12px; }
 .dal-intro { bottom:10px;padding:10px 14px; }.dal-intro p { display:none; }.dal-intro h2 { font-size:18px; }
 .dal-result-overlay { inset:0 0 0 auto;width:min(380px,50%);align-items:center; }.dal-result { padding:10px 16px; }.dal-result .result-value { font-size:32px; }.dal-vendor,.dal-result .text-link { display:none; }.dal-score-list b { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) { .dal-pop.show { animation-duration:.01s; }.dal-intro,.dalgona .intro-icon * { animation:none !important; } }
/* two ways in: straight to the needle, or make the candy first */
.dal-modes { display:flex;gap:10px;justify-content:center;align-items:stretch;flex-wrap:wrap; }
.dal-modes[hidden] { display:none; }
.dal-make { display:flex;flex-direction:column;justify-content:center;min-height:48px;padding:6px 18px;border-radius:25px;background:#ffffff14;color:#f4ecff;border:1.5px solid #ffffff40;text-align:left; }
.dal-make b { font-size:13px;font-weight:900; }
.dal-make small { font-size:10px;color:#c7bfd8;font-weight:700; }
.dal-make:not(:disabled):active { transform:translateY(2px); }
.dalgona[data-stage="pick"] #dal-quick { min-width:150px; }
.dalgona[data-mode="quick"] .dal-steps { display:none; }
.dalgona[data-needle="line"] .dal-detail { color:#ffd36a; }
.dalgona[data-needle="inside"] .dal-detail { color:#ffad94; }
/* two burners at once: heat on the left by the pan, foam on the right by the pot */
.pasta[data-stage="stove"] #pasta-gauge { right:auto;left:12px; }
.pasta-gauge.foam .gauge-track { background:linear-gradient(#ffffff,#d8eef2); }
.pasta-gauge.foam .gauge-zone { border-color:#ff7a5c;background:#ff7a5c44; }
.pasta[data-foam="high"] .pasta-gauge { animation:none; }
.pasta[data-foam="high"] .pasta-gauge.foam { animation:pasta-warn .4s ease-in-out infinite alternate; }
.pasta-tags { position:absolute;inset:0;pointer-events:none;z-index:1; }
.pasta-tags[hidden] { display:none; }
.pasta-tag { position:absolute;left:0;top:0;translate:-50% 34px;display:flex;flex-direction:column;align-items:center;padding:4px 10px;border-radius:14px;background:#1b1512b8;color:#fff4e6;line-height:1.15;backdrop-filter:blur(4px);transition:background .15s; }
.pasta-tag b { font-size:11px; }
.pasta-tag small { font-size:9px;color:#f4d9b8;font-weight:800; }
.pasta-tag.pan.on { background:#d9542ce6; }
.pasta-tag.pot.alert { background:#ffffffeb;color:#1f3a31;animation:pasta-bump .35s ease-in-out infinite alternate; }
.pasta-tag.pot.alert small { color:#c5542d; }
@keyframes pasta-bump { to { scale:1.12; } }
.pasta[data-stage="stove"][data-ready="on"] .pasta-next:not(:disabled) { animation:pasta-ready 1s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { .pasta-tag.pot.alert { animation:none; } }
/* Subway Dash */
.subway{display:flex;flex-direction:column;background:#132d39;color:#fff;overflow:hidden}.subway-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 18px}.subway-top h1{font-size:22px;margin:4px 0}.subway .eyebrow{color:#96d8c2}.subway .controls button{background:#ffffff18;color:#fff;width:40px;height:40px}.subway-viewport{position:relative;flex:1;min-height:0;isolation:isolate}.subway #game{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:none}.subway-hud{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:center;gap:8px;pointer-events:none}.subway-hud>div{background:#102b39df;padding:8px 12px;border-radius:12px;text-align:center}.subway-hud span{display:block;font-size:10px;color:#b6d7d7}.subway-hud b{font-size:23px;font-variant-numeric:tabular-nums}.subway[data-urgent=true] #sub-time{color:#ffb473}.subway-message{position:absolute;top:24%;left:0;right:0;text-align:center;font-size:clamp(24px,5vw,44px);font-weight:900;text-shadow:0 3px 8px #000;pointer-events:none}.subway-intro{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:min(400px,calc(100% - 28px));padding:18px;background:#fff8e9f5;color:#193440;border-radius:18px;text-align:center;box-shadow:0 12px 40px #0005}.subway-intro h2{margin:8px 0}.subway-intro p{font-size:12px;line-height:1.6}.subway .primary{background:#ffcf61;color:#15323a;min-height:46px}.subway-intro .primary{width:100%;border-radius:24px}.subway-bottom{display:flex;gap:10px;padding:10px 18px max(10px,env(safe-area-inset-bottom));justify-content:center}.subway-bottom button{min-height:48px;flex:1;max-width:180px;background:#ffffff18;border:1px solid #ffffff50;border-radius:14px;color:#fff;font-weight:800}.subway-result{max-height:100%;overflow:auto;background:#fff8e9;color:#193440;padding:22px}.subway-result h2{font-size:23px}.subway-result .result-value{font-size:42px;color:#cb6931}.subway-margin{font-size:18px;color:#b54825}.subway-margin strong{font-size:34px}.subway-result .secondary{background:#193440;color:#fff}.subway button:focus-visible{outline:3px solid #ffcf61;outline-offset:2px}.subway-card .card-visual{background:#183d47}
@media(max-height:500px){.subway-top{padding:4px 14px}.subway-top h1{font-size:18px}.subway-bottom{padding:4px 14px}.subway-bottom button{min-height:36px}.subway-intro{padding:10px;bottom:8px;max-width:350px}.subway-intro h2{margin:2px}.subway-intro p{margin:4px 0}.subway-result{padding:12px}.subway-result h2{margin:4px}.subway-result .result-value{font-size:30px}.subway-result p{margin:6px}}

.news-lines{flex:1;min-width:0;display:grid;gap:5px}
/* ── runway (SSUN AIR butter landing) ── */
.runway-card .card-visual { background:#9cc3e4; }
.runway { background:#9cc3e4;color:#fff;--rw-green:#8fe0a9;--rw-amber:#f6d24a;--rw-red:#ff7a66;--rw-panel:#0e1b26c2;font-variant-numeric:tabular-nums; }
.runway .controls { pointer-events:auto; }
.runway .controls button { width:40px;height:40px;border:1px solid #ffffff60;background:#0e1b2680;color:#fff;box-shadow:none;font-size:18px; }
.runway .controls button[aria-pressed="true"] { background:var(--rw-amber);color:#13202b; }
.runway button:focus-visible { outline:3px solid var(--rw-amber);outline-offset:3px; }
.rw-top { position:absolute;top:12px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none;z-index:2; }
.rw-stage { display:flex;flex-direction:column;gap:3px;text-shadow:0 1px 4px #0b1620; }
.rw-stage span { font-size:13px;font-weight:800; }
.rw-stage b { font-family:"Space Grotesk",ui-monospace,monospace;font-size:12px;letter-spacing:.04em;background:var(--rw-panel);padding:3px 7px;border-radius:5px;width:max-content; }
.rw-pfd { position:absolute;top:62px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:#ffffff26;border-radius:9px;overflow:hidden;pointer-events:none;width:min(560px,calc(100% - 24px));font-family:"Space Grotesk",ui-monospace,monospace;z-index:1; }
.runway[data-stage="takeoff"] .rw-pfd { grid-template-columns:repeat(5,minmax(0,1fr)); }
.runway[data-stage="takeoff"] .rw-crab { display:none; }
.rw-pfd > div { background:var(--rw-panel);padding:6px 8px 5px;display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:4px; }
.rw-pfd small { grid-column:1/-1;font-size:9px;letter-spacing:.12em;color:#9fc3d9; }
.rw-pfd b { font-size:21px;line-height:1.05;color:var(--rw-green); }
.rw-pfd i { font-style:normal;font-size:9px;color:#9fc3d9;justify-self:end; }
.rw-speedbar { position:absolute;top:118px;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 24px));height:8px;border-radius:4px;background:#0e1b2699;pointer-events:none;font-family:"Space Grotesk",ui-monospace,monospace; }
.rw-speedbar span { position:absolute;left:0;top:0;bottom:0;border-radius:4px;transition:background .2s; }
.rw-vrwin { position:absolute;top:-1px;bottom:-1px;border-radius:2px;background:#8fe0a955;box-shadow:inset 0 0 0 1px #8fe0a9aa; }
.rw-speedbar i { position:absolute;top:-2px;bottom:-2px;width:2px;background:#fff;font-style:normal; }
.rw-speedbar i { font-size:0; }
.rw-speedbar i::before { position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:700;color:#fff;text-shadow:0 1px 3px #0b1620; }
.rw-speedbar i:nth-of-type(1)::before { content:"V1"; }
.rw-speedbar i:nth-of-type(2)::before { content:"VR"; }
.runway[data-stage="landing"] .rw-speedbar { display:none; }
.rw-hint { position:absolute;top:142px;left:50%;transform:translateX(-50%);margin:0;max-width:calc(100% - 24px);width:max-content;font-size:13px;font-weight:800;padding:3px 10px;border-radius:999px;background:#0e1b26b8;color:#ffe27a;text-align:center;text-shadow:0 1px 4px #0b1620;pointer-events:none; }
.runway[data-stage="landing"] .rw-hint { top:122px; }
.rw-hint:empty { display:none; }
.rw-atc { position:absolute;top:172px;left:50%;transform:translateX(-50%);width:min(460px,calc(100% - 28px));background:#fffdf7f2;color:#16232c;border-radius:12px 12px 12px 3px;padding:9px 12px 9px 52px;box-shadow:0 6px 24px #0b162055;pointer-events:none;z-index:2; }
.rw-atc.show { animation:rw-pop .25s cubic-bezier(.2,1.4,.4,1); }
.rw-atc[hidden] { display:none; }
.rw-atc-from { position:absolute;left:10px;top:10px;font-family:"Space Grotesk",monospace;font-size:10px;font-weight:800;background:#2f6b52;color:#fff;border-radius:5px;padding:3px 5px;letter-spacing:.06em; }
.rw-atc-en { margin:0;font-family:"Space Grotesk",ui-monospace,monospace;font-size:12px;font-weight:700;line-height:1.35; }
.rw-atc-ko { margin:3px 0 0;font-size:12px;color:#40525c; }
@keyframes rw-pop { from { transform:translate(-50%,8px) scale(.94);opacity:0; } }
.rw-callout { position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-family:"Space Grotesk",ui-monospace,monospace;font-size:46px;font-weight:800;letter-spacing:.04em;color:var(--rw-green);text-shadow:0 2px 12px #0b1620c0;opacity:0;pointer-events:none;white-space:nowrap; }
.rw-callout.show { animation:rw-callout 1.3s ease-out forwards; }
@keyframes rw-callout { 0% { opacity:0;transform:translate(-50%,-30%) scale(.8); } 12% { opacity:1;transform:translate(-50%,-50%) scale(1); } 75% { opacity:1; } 100% { opacity:0; } }
.rw-warn { position:absolute;top:52%;left:50%;transform:translateX(-50%);font-family:"Space Grotesk",ui-monospace,monospace;font-size:15px;font-weight:800;letter-spacing:.1em;color:#1b0b07;background:var(--rw-red);border-radius:5px;padding:4px 10px;opacity:0;pointer-events:none;transition:opacity .15s; }
.rw-warn.show { opacity:1;animation:rw-blink .45s steps(2) infinite; }
@keyframes rw-blink { 50% { background:var(--rw-amber); } }
.rw-gs { position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;font-family:"Space Grotesk",monospace; }
.rw-gs small,.rw-loc small { font-size:9px;letter-spacing:.12em;color:#fff;text-shadow:0 1px 3px #0b1620; }
.rw-papi { display:flex;gap:4px;padding:5px 6px;background:var(--rw-panel);border-radius:8px; }
.rw-papi i { width:11px;height:11px;border-radius:50%;background:#ff3b30;box-shadow:0 0 8px #ff3b30; }
.rw-papi i.w { background:#fff;box-shadow:0 0 8px #fff; }
.rw-scale { position:relative;background:var(--rw-panel);border-radius:14px;display:flex;align-items:center;justify-content:space-between; }
.rw-scale.v { width:26px;height:110px;flex-direction:column;padding:9px 0; }
.rw-scale.h { height:26px;width:110px;padding:0 9px; }
.rw-scale span { width:7px;height:7px;border-radius:50%;border:1.5px solid #fff;flex-shrink:0; }
.rw-scale span.c { border:0;background:var(--rw-amber);border-radius:1px; }
.rw-scale.v span.c { width:18px;height:2px; }
.rw-scale.h span.c { width:2px;height:18px; }
.rw-scale b { position:absolute;left:50%;top:50%;width:13px;height:13px;background:#ff5fd2;transform:translate(-50%,-50%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:transform .08s linear; }
.rw-loc { position:absolute;left:50%;bottom:calc(176px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:7px;pointer-events:none;font-family:"Space Grotesk",monospace; }
.runway[data-stage="takeoff"] :is(.rw-gs,.rw-loc) { display:none; }
.rw-pad { position:absolute;left:12px;right:12px;bottom:max(14px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none; }
.rw-yoke { margin-left:auto;position:relative;width:132px;height:104px; }
.rw-yk-lbl { position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;font-weight:800;padding:1px 6px;border-radius:5px;background:#0e1b26b0;color:#d6e4ec;pointer-events:none; }
.rw-yk-lbl.up { bottom:calc(100% + 3px); }
.rw-yk-lbl.dn { top:calc(100% + 3px);color:var(--rw-green); }
.rw-yoke { margin-bottom:18px; }
.rw-thr { position:relative;width:78px;height:224px;padding:34px 0 46px;box-sizing:border-box;pointer-events:auto;touch-action:none;cursor:ns-resize;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;border-radius:14px;background:linear-gradient(#16283ae6,#0e1b26e6);border:1px solid #ffffff55;box-shadow:0 4px 18px #0b162055; }
.rw-thr.on { border-color:var(--rw-amber);box-shadow:0 0 0 2px #f6d24a66,0 4px 18px #0b162055; }
.rw-thr-up,.rw-thr-dn { position:absolute;left:0;right:0;text-align:center;font-size:11px;font-weight:800;line-height:1; }
.rw-thr-up { top:5px;color:var(--rw-green); }
.rw-thr-dn { bottom:19px;color:#ffb39f; }
.rw-thr small { position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:.14em;color:#9fc3d9; }
.rw-thr-track { position:relative;height:100%;margin:0 auto 0 34px;width:10px;border-radius:5px;background:#05090ccc;box-shadow:inset 0 0 0 1px #ffffff26; }
.rw-thr-fill { position:absolute;left:0;right:0;bottom:0;border-radius:5px;background:linear-gradient(var(--rw-green),#3f8a5c);height:0; }
.rw-thr-det { position:absolute;left:-22px;width:52px;height:0;border-top:1px dashed #ffffff40; }
.rw-thr-det em { position:absolute;right:calc(100% - 18px);top:-5px;transform:translateX(-4px);font:800 7px "Space Grotesk",monospace;font-style:normal;color:#9fc3d9;display:none; }
.rw-thr-grip { position:absolute;left:50%;bottom:0;width:54px;height:24px;transform:translate(-50%,50%);border-radius:6px;background:linear-gradient(#f1f5f7,#b9c4cb);border:1.5px solid #13202b;box-shadow:0 3px 8px #0b162080;display:grid;place-items:center;font:800 11px "Space Grotesk",monospace;color:#13202b; }
.rw-thr.on .rw-thr-grip { background:linear-gradient(#ffe27a,var(--rw-amber)); }
.rw-flaps { position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border-radius:12px;background:#0e1b26c4;border:1px solid #ffffff55;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none; }
.rw-flaps small { font-size:10px;font-weight:800;color:#d6e4ec; }
.rw-flaps button { width:58px;padding:5px 0;border-radius:7px;border:1px solid #ffffff70;background:#20384c;color:#fff;font:800 11px inherit;cursor:pointer;touch-action:manipulation; }
.rw-flaps button:active { background:var(--rw-amber);color:#13202b; }
.rw-flaps button:disabled { opacity:.35;cursor:default; }
.rw-flap-ind { display:flex;flex-direction:column;gap:2px;width:58px; }
.rw-flap-ind i { font:800 8px "Space Grotesk",monospace;font-style:normal;text-align:center;padding:1px 0;border-radius:3px;color:#9fc3d9;background:#05090c99; }
.rw-flap-ind i.on { background:var(--rw-green);color:#13202b; }
.rw-wheel { width:100%;height:100%;pointer-events:auto;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;border-radius:18px;background:radial-gradient(circle at 50% 40%,#16283a,#0e1b26d9 70%);border:1px solid #ffffff55;box-shadow:0 4px 18px #0b162055,inset 0 0 0 1px #ffffff10;transition:border-color .15s,box-shadow .15s; }
.rw-wheel.on { cursor:grabbing;border-color:var(--rw-amber);box-shadow:0 0 0 2px #f6d24a66,0 4px 18px #0b162055; }
.rw-wheel svg { display:block;width:100%;height:100%;overflow:visible; }
.rw-yk-grid { stroke:#ffffff26;stroke-width:1;fill:none; }
.rw-yk-col { fill:#33414c; }
.rw-yk-shaft { fill:#7d8a93; }
.rw-yk-horn { fill:none;stroke:#d9e2e8;stroke-width:7;stroke-linecap:round;stroke-linejoin:round; }
.rw-yk-grip { fill:#1d252b;stroke:#d9e2e8;stroke-width:1.5; }
.rw-yk-hub { fill:var(--rw-amber);stroke:#13202b;stroke-width:1.5; }
.rw-yk-mark { stroke:#13202b;stroke-width:3;stroke-linecap:round; }
.rw-wheel.on .rw-yk-horn,.rw-wheel.rolling .rw-yk-horn,.rw-wheel.pitching .rw-yk-horn { stroke:#fff; }
.rw-yk-box { fill:#0b1620c0;stroke:#ffffff55; }
.rw-yk-dot { fill:var(--rw-green);filter:drop-shadow(0 0 3px #8fe0a9); }
.rw-intro { position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(420px,calc(100% - 28px));background:#0e1b26e0;border:1px solid #ffffff30;border-radius:16px;padding:20px 20px 16px;text-align:center;z-index:3;box-shadow:0 18px 60px #0b162066; }
.rw-intro[hidden] { display:none; }
.rw-eyebrow { font-family:"Space Grotesk",monospace;font-size:10px;letter-spacing:.16em;color:var(--rw-amber); }
.rw-intro h1 { font-size:24px;margin:8px 0 8px;letter-spacing:-.5px; }
.rw-intro p { font-size:12.5px;line-height:1.6;color:#d6e4ec;margin:0 0 12px; }
.rw-intro dl { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 14px;font-family:"Space Grotesk",monospace; }
.rw-intro dl div { background:#ffffff14;border-radius:8px;padding:6px 2px; }
.rw-intro dt { font-size:9px;letter-spacing:.1em;color:#9fc3d9; }
.rw-intro dd { margin:2px 0 0;font-size:13px;font-weight:800;color:var(--rw-green);white-space:nowrap; }
.rw-intro .primary { width:100%;gap:8px;background:var(--rw-amber);color:#13202b; }
.rw-intro kbd,.rw-result kbd { font-family:"Space Grotesk",monospace;font-size:9px;border:1px solid currentColor;border-radius:4px;padding:1px 4px;opacity:.7; }
.rw-skip { margin-top:10px;font-size:12px;color:#cfe0ea;text-decoration:underline;text-underline-offset:3px; }
.rw-lv-btn { display:flex;align-items:center;justify-content:center;gap:7px;margin:10px auto 0;padding:5px 10px 5px 6px;border:1px solid #ffffff38;border-radius:999px;background:#ffffff12;color:#e6f0f5;font-size:12px;box-shadow:none; }
.rw-lv-btn b { color:var(--rw-amber);font-size:11px; }
.rw-lv-btn i,.rw-lv-tag i { width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:0 0 0 1px #0b162040;flex-shrink:0; }
.rw-lv-tag { display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;font-size:12px;font-weight:700;color:#4d5d55; }
.rw-livery { position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:14px;background:#0b1620a8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow:auto; }
.rw-livery[hidden] { display:none; }
.rw-lv-panel { width:min(760px,100%);max-height:100%;overflow:auto;background:#0e1b26f2;border:1px solid #ffffff30;border-radius:16px;padding:18px;text-align:center;box-shadow:0 18px 60px #0b162066; }
.rw-lv-panel h2 { font-size:22px;margin:6px 0 4px;color:#fff; }
.rw-lv-panel p { font-size:12.5px;color:#cfe0ea;margin:0 0 14px; }
.rw-lv-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; }
.rw-lv-card { display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:8px 8px 10px;border:1px solid #ffffff26;border-radius:12px;background:#ffffff0d;color:#fff;text-align:left;box-shadow:none;min-height:0; }
.rw-lv-card:hover { background:#ffffff1c;color:#fff; }
.rw-lv-btn:hover { color:#fff;background:#ffffff22; }
.rw-lv-card[aria-pressed="true"] { border-color:var(--rw-amber);box-shadow:0 0 0 2px #f6d24a55; }
.rw-lv-shot { display:block;width:100%;height:auto;aspect-ratio:12/5;border-radius:8px;background:linear-gradient(#bfe0f4,#e4f1f8);margin-bottom:4px; }
span.rw-lv-shot { background:linear-gradient(#bfe0f4,#e4f1f8) top/100% 62% no-repeat,linear-gradient(90deg,var(--b) 60%,var(--a) 60%); }
.rw-lv-card b { font-size:13px;line-height:1.25; }
.rw-lv-card small { font-size:10.5px;line-height:1.35;color:#b3c8d5; }
.rw-result h2 { color:#16232c; }
.rw-result.fail h2 { color:#b8341f; }
.rw-parts { display:flex;justify-content:center;gap:14px;font-size:12px;color:#5a6a63;margin-top:4px; }
.rw-parts b { color:#315948; }
.rw-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 0; }
.rw-stats div { background:#f1f3ec;border-radius:10px;padding:9px 4px; }
.rw-stats dt { font-size:10px;color:#6f7c73; }
.rw-stats dd { margin:3px 0 1px;font-family:"Space Grotesk",monospace;font-size:19px;font-weight:800;color:#20302a; }
.rw-stats dd small { font-size:10px;margin-left:2px; }
.rw-stats span { font-size:10px;color:#8a958c; }
.rw-result p { margin:14px 0 18px; }
@media (max-width:700px) {
 .runway .controls button { width:38px;height:38px;font-size:16px; }
 .rw-top { top:8px;left:10px;right:10px; }
 .rw-pfd { top:56px; }
 .rw-pfd > div { padding:5px 4px 4px; }
 .rw-pfd b { font-size:16px; }
 .rw-pfd i { display:none; }
 .rw-pfd small { font-size:8px;letter-spacing:.06em; }
 .rw-speedbar { top:104px; }
 .rw-hint { top:126px;font-size:11px; }
 .runway[data-stage="landing"] .rw-hint { top:106px; }
 .rw-atc { top:150px;padding:8px 10px 8px 48px; }
 .rw-atc-en,.rw-atc-ko { font-size:11px; }
 .rw-callout { font-size:38px; }
 .rw-gs { right:8px; }
 .rw-scale.v { height:96px; }
 .rw-yoke { width:116px;height:92px; }
 .rw-thr { width:70px;height:196px; }
 .rw-loc { bottom:calc(196px + env(safe-area-inset-bottom)); }
 .rw-stats dd { font-size:16px; }
 .rw-lv-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .rw-lv-panel { padding:14px 12px; }
}
@media (max-height:520px) and (orientation:landscape) {
 .rw-yoke { width:104px;height:78px; }
 .rw-thr { height:176px;padding-top:30px; }
 .rw-flaps { flex-direction:row; }
 .rw-flaps small { display:none; }
 .rw-flap-ind { width:auto;flex-direction:row-reverse; }
 .rw-flap-ind i { padding:2px 3px; }
 .rw-atc { top:auto;bottom:64px;left:100px;transform:none;width:min(300px,34%); }
 .rw-atc.show { animation:none; }
 .rw-hint { top:176px;font-size:11px; }
 .rw-intro { max-height:calc(100% - 20px);overflow:auto;padding:12px 16px; }
 .rw-intro p { display:none; }
 .rw-lv-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .rw-lv-panel p,.rw-lv-card small { display:none; }
 .rw-loc { bottom:84px; }
}