:root {
  --ink: #392f31;
  --red: #db3e39;
  --dark-red: #a72932;
  --cream: #fff3d1;
  --display: "PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --hand: "Kaiti SC","STKaiti","KaiTi","Songti SC",serif;
  color: var(--ink);
  background: #f7ebcf;
  font-family: var(--display);
  color-scheme: light;
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  padding: env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  background: radial-gradient(ellipse at 87% 38%,#ffe7a88a,transparent 46%),linear-gradient(116deg,#faf1d8,#f6e6bf);
}

body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(#895d383d .65px,transparent .85px);
  background-size: 5px 5px;
  opacity: .52;
}

button,a {
  touch-action: manipulation
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer
}

a {
  color: inherit
}

:focus-visible {
  outline: 3px solid #186c63;
  outline-offset: 4px
}

button:disabled {
  cursor: default
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap
}

.mast {
  max-width: 1360px;
  width: 89%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(18px,3.4vh,36px) 0;
  border-bottom: 1px solid #77584166;
  gap: 12px;
}

.imprint {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: .13em;
}

.mark {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border: 2px solid #a93230;
  color: #af322e;
  font: 25px/1 var(--hand);
  outline: 1px solid #af322e;
  outline-offset: -4px;
  transform: rotate(-5deg);
}

.mast nav {
  display: flex;
  gap: clamp(15px,2.5vw,40px);
  align-items: center;
  white-space: nowrap;
}

.mast a,.final-actions a {
  text-decoration: none;
  border-bottom: 1px solid #8d604b78;
  padding: 5px 0;
  font-size: 14px;
  font-weight: 600;
}

.mast a:hover,.final-actions a:hover {
  color: var(--dark-red);
  border-color: currentColor
}

#sound {
  border: 0;
  padding: 8px 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
}

.music-note {
  font: bold 20px/1 Georgia,serif;
}

.spread {
  width: min(1150px,87%);
  margin: auto;
  padding: clamp(32px,6.5vh,70px) 0 clamp(32px,7vh,82px);
  display: grid;
  grid-template-columns: minmax(265px,.88fr) minmax(0,1.25fr);
  gap: clamp(30px,5vw,90px);
  align-items: center;
  min-height: min(85svh,820px);
}

.intro {
  position: relative;
  padding-left: clamp(0px,1.6vw,25px);
}

.intro-art {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 4px;
  width: max-content;
  color: var(--dark-red);
  transform: rotate(-4deg);
}

.intro-art i {
  display: block;
  width: 34px;
  height: 7px;
  border-block: 1px solid currentColor;
}

.intro-art b {
  font: 22px/1 Georgia,serif
}

h1,h2,p {
  margin: 0
}

h1 {
  font: 950 clamp(67px,7.2vw,109px)/1.09 var(--display);
  letter-spacing: -.085em;
  width: max-content;
}

h1 span,h1 strong {
  display: block;
  font-weight: 950;
}

h1 span {
  color: var(--red);
  text-shadow: 1.6px 1.6px 0 #a82932;
}

h1 strong {
  text-shadow: 1.3px 1.3px 0 var(--ink);
}

.message {
  font: clamp(20px,2vw,29px)/1.6 var(--hand);
  margin: clamp(22px,3.1vh,40px) 0;
  color: #553d34;
}

.message em {
  font-style: normal;
}

.instruction {
  width: max-content;
  max-width: 100%;
  color: #684c3b;
  border-top: 1px dashed #a98c67;
  padding-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 9px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  border: 1px solid var(--dark-red);
  flex: none;
}
.touch-tip { display: none; }
@media (pointer:coarse) {
  .key-tip { display: none; }
  .touch-tip { display: inline; }
  .mast nav a, #sound, .arrows button, .action, .final-actions a {
    min-height: 44px;
    min-width: 44px;
  }
  .mast nav a, .final-actions a {
    display: inline-flex;
    align-items: center;
    text-decoration: underline;
    text-underline-offset: 4px;
    border-bottom: 0;
  }
}

.cabinet {
  position: relative;
  width: min(100%,604px);
  margin: auto;
  padding-bottom: 16px;
}

.cabinet::before,.cabinet::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 11%;
  height: 24px;
  border: 3px solid var(--ink);
  border-radius: 0 0 7px 7px;
  background: #806e60;
  z-index: -1;
}

.cabinet::before {
  left: 7%;
}

.cabinet::after {
  right: 7%;
}

.cabinet-rim {
  position: relative;
  border: 3px solid var(--ink);
  border-radius: 31px 31px 15px 15px;
  background: var(--red);
  box-shadow: inset 4px 2px 0 #fb7761,inset -5px 0 0 #a72b32,7px 9px 0 #805b3d3d,0 19px 37px #6b412c24;
}

.marquee {
  margin: 0 2.2%;
  min-height: clamp(56px,7.5vw,90px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  position: relative;
  padding: 10px 9px 5px;
}

.nameplate {
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 7px clamp(20px,3.8vw,54px);
  box-shadow: 0 3px 0 var(--dark-red),inset 0 0 0 3px #f8d98f;
  white-space: nowrap;
  font: 700 clamp(19px,2vw,28px)/1.15 var(--hand);
  letter-spacing: .02em
}

.nameplate b {
  color: var(--red);
  margin: 0 .14em;
  font: 70% Georgia,serif;
}

.bulbs {
  display: flex;
  gap: clamp(4px,.65vw,10px)
}

.bulbs i {
  height: clamp(6px,.78vw,11px);
  aspect-ratio: 1;
  border: 1.5px solid #843a30;
  border-radius: 50%;
  background: #ffde75;
  box-shadow: 0 1px 0 #a32c2a,inset 1.5px 1.5px 0 #fff3bd;
}

.window-frame {
  margin: 0 4.3%;
  padding: 6px;
  background: #f8d796;
  border: 2.5px solid var(--ink);
  box-shadow: 0 -2px 0 #b3423a,0 3px 0 #a7312f;
  border-radius: 19px 19px 11px 11px;
}

#glass {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1.66;
  border: 2px solid var(--ink);
  border-radius: 12px 12px 6px 6px;
  overflow: hidden;
  cursor: crosshair;
  user-select: none;
  touch-action: none;
  background: linear-gradient(155deg,#e8f3db 0%,#bfded0 39%,#91bcad 85%);
}

#glass:focus-visible {
  outline-offset: -5px;
}

#glass::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .45;
  background: radial-gradient(#5c92872e .8px,transparent 1px);
  background-size: 6px 6px;
}

.glass-light {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg,transparent 7%,#fffde737 7.3% 12%,transparent 12.3% 14%,#fffde72a 14.2% 15.5%,transparent 15.8% 73%,#fffde727 73.4% 80%,transparent 80.4%);
  box-shadow: inset 0 9px 12px #325e5640,inset 0 -2px 4px #4b715340;
}

.rail {
  position: absolute;
  inset: 3% 0 auto;
  height: 5px;
  background: linear-gradient(#685c4f,#d3c8ac 45%,#705e52 75%);
}

.floor {
  position: absolute;
  inset: 76% -25% -7%;
  transform: perspective(110px) rotateX(38deg);
  transform-origin: 50% 100%;
  background-color: #d5ddbc;
  background-image: repeating-conic-gradient(#91b6a1 0% 25%,transparent 0% 50%);
  background-size: 36px 36px;
  border-top: 2px solid #6c8b77;
  opacity: .9;
}

#hatch {
  position: absolute;
  z-index: 3;
  bottom: 1.7%;
  left: 38%;
  width: 24%;
  height: 4.2%;
  border: 2px solid #65786a;
  background: linear-gradient(#374a43,#5a6956);
  border-radius: 45%;
  box-shadow: 0 2px 0 #e1dcaa;
  pointer-events: none;
}

#cable {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 0;
  height: 9%;
  width: 5px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(150deg,#604f41 0 2px,#c7b08d 3px 4px);
  border-inline: 1px solid #514838;
  pointer-events: none;
}

#claw {
  position: absolute;
  z-index: 8;
  top: 8%;
  left: 50%;
  width: clamp(38px,4.65vw,68px);
  height: clamp(35px,4.35vw,61px);
  transform: translateX(-50%);
  pointer-events: none;
}

.grip-neck {
  position: absolute;
  z-index: 3;
  left: 39%;
  top: -3%;
  width: 22%;
  height: 33%;
  border: 2px solid var(--ink);
  background: linear-gradient(90deg,#7d8982,#eddfb6 50%,#87928a);
  border-radius: 3px;
}

.grip-hub {
  position: absolute;
  z-index: 4;
  top: 17%;
  left: 30%;
  width: 40%;
  height: 30%;
  border-radius: 6px 6px 9px 9px;
  border: 2px solid var(--ink);
  background: linear-gradient(90deg,#b2382f,#f28a60 50%,#b03731);
}

.grip-hub::after {
  content: "";
  position: absolute;
  inset: 29% 35%;
  border-radius: 50%;
  background: #fbd991;
  border: 1px solid #533a30;
}

.finger {
  position: absolute;
  top: 34%;
  width: 48%;
  height: 66%;
  background: var(--ink);
  clip-path: polygon(75% 0,100% 15%,34% 57%,62% 78%,61% 100%,12% 76%,0 50%);
  transition: rotate .22s;
  transform-origin: 85% 5%;
}

.finger::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: linear-gradient(110deg,#7e9288,#f2e5be 56%,#889890);
  clip-path: polygon(75% 0,100% 15%,34% 57%,62% 78%,61% 100%,12% 76%,0 50%);
}

.finger-l {
  left: 4%;
}

.finger-r {
  right: 4%;
  transform: scaleX(-1);
  transform-origin: center;
}

#claw.closed .finger-l {
  rotate: -16deg;
}

#claw.closed .finger-r {
  rotate: 16deg;
}

.prize {
  position: absolute;
  z-index: 4;
  width: 23%;
  bottom: 10%;
  background: none;
  padding: 0;
  border: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.prize[data-slot="0"] {
  left: 7.5%;
  --tilt: -8deg;
}

.prize[data-slot="1"] {
  left: 38.5%;
  --tilt: 3deg;
}

.prize[data-slot="2"] {
  left: 69.5%;
  --tilt: 8deg;
}

.mini-print {
  display: block;
  padding: 5% 5% 12%;
  position: relative;
  transform: rotate(var(--tilt));
  background: #fff8e4;
  border: 1.4px solid #736b59;
  box-shadow: 2px 3px 0 #234c442e;
  transition: transform .2s;
}

.mini-print img {
  display: block;
  width: 100%;
  aspect-ratio: 1/.97;
  object-fit: cover;
  object-position: center 38%;
  pointer-events: none;
}

.mini-print > i {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 18%;
  height: 5px;
  background: #cd3934;
  box-shadow: 0 0 0 1px #fff4d5, 0 2px 2px #42251d75;
  border-radius: 3px;
}

.prize.caught {
  visibility: hidden;
}

.prize.carried {
  z-index: 6;
}

.deck {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: clamp(13px,1.8vw,24px) 8%;
  border-top: 2px solid #743431;
  border-bottom: 2px solid var(--ink);
  margin-top: clamp(10px,1.1vw,15px);
  background: repeating-linear-gradient(135deg,#ffe3a900 0 3px,#ebbc7217 3px 4px),linear-gradient(#fff0bd,#f5d488);
  box-shadow: inset 0 3px 0 #fff5d0;
}

.arrows {
  display: flex;
  gap: 6px;
  padding: 6px 7px 8px;
  background: #bc986f;
  border: 2px solid #775443;
  border-radius: 15px;
  box-shadow: inset 0 2px 2px #63503c55;
}

.arrows button {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  border: 2px solid var(--ink);
  min-width: clamp(35px,4vw,54px);
  min-height: clamp(34px,3.9vw,51px);
  border-radius: 9px;
  color: #484038;
  background: linear-gradient(#fffbdf,#f7e3b8);
  box-shadow: 0 3px 0 #64513b;
  font: 700 17px/1 Arial,sans-serif;
}
@media (pointer:coarse) {
  .arrows button { min-width: 44px; min-height: 44px; }
}

.arrows button:hover:enabled {
  background: #fff5d8;
}

.arrows button:active:enabled, .arrows button.held {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #64513b;
}

.readout {
  justify-self: center;
  text-align: center;
  padding: 5px 13px;
  border: 2px solid #806144;
  border-radius: 8px;
  background: #493e36;
  color: #ffebbd;
  box-shadow: inset 0 2px 2px #2e2d28;
  white-space: nowrap;
}

.readout small {
  display: block;
  color: #ead2a3;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .1em;
}

.readout strong {
  font: 700 clamp(18px,2.05vw,28px)/1.1 "Courier New",monospace;
}

#drop {
  display: grid;
  place-items: center;
  width: clamp(62px,7vw,89px);
  aspect-ratio: 1.18;
  border-radius: 50%;
  background: #ebc372;
  border: 2.5px solid var(--ink);
  padding: 3px 5px 7px;
  box-shadow: 0 3px 0 #a07a52;
}

#drop span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-indent: .17em;
  border-radius: 50%;
  color: #fff6d3;
  background: linear-gradient(155deg,#f66f56,#da3a33 65%);
  border: 2px solid #893431;
  box-shadow: 0 4px 0 #a03a32,inset 0 2px 1px #ffa17b;
  font: 900 clamp(20px,2.15vw,30px)/1 var(--display);
}

#drop:active:enabled span {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #953d35;
}

#drop:disabled {
  filter: saturate(.72);
}

.machine-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 7% 10px;
}
#hint {
  flex: 1;
  text-align: center;
  color: #fff4d7;
  font-size: clamp(11px,1.1vw,14px);
  font-weight: 650;
  line-height: 1.5;
  margin: 0 7px;
}

.vents {
  height: 7px;
  width: 33px;
  background: repeating-linear-gradient(115deg,transparent 0 4px,#a43031 4px 7px);
}

.slot {
  width: 20%;
  height: 9px;
  border-radius: 5px;
  background: #7e2930;
  border: 1px solid #783130;
  box-shadow: 0 1px 0 #ef7865;
}

dialog {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  max-width: calc(100vw - 32px);
  max-height: 92vh;
  max-height: 92svh;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 13px;
  box-shadow: 0 22px 70px #29171b77;
  inset: env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  max-height: min(92svh, calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 16px));
}

dialog::backdrop {
  background: #392f36bd;
  backdrop-filter: blur(4px);
}

.ticket,.final-ticket {
  background: #fff0cb;
  border: 3px solid var(--ink);
  border-radius: 13px;
  position: relative;
}

.ticket {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center;
  gap: 32px;
  max-width: 690px;
  padding: 32px;
}

.ticket-photo {
  position: relative;
  padding: 8px 8px 29px;
  background: #fffbec;
  border: 1px solid #a08870;
  box-shadow: 3px 5px 0 #dcc79f;
  transform: rotate(-3deg);
}

.ticket-photo img {
  display: block;
  width: 100%;
  max-height: 49svh;
  object-fit: contain;
}

.ticket-photo i {
  font: 17px/1 var(--hand);
  position: absolute;
  right: 9px;
  bottom: 5px;
  color: var(--dark-red);
}
.photo-sender {
  position: absolute;
  bottom: 4px;
  left: 8px;
  color: #794838;
  font: 13px/1.2 var(--hand);
}

.ticket h2,.final-ticket h2 {
  font: 900 clamp(29px,3.7vw,45px)/1.2 var(--display);
  color: #a63230;
  letter-spacing: -.055em;
}

.ticket h2 {
  font-size: clamp(29px,2.6vw,37px);
  text-wrap: balance;
}

.ticket-copy p,.last-words {
  font: clamp(18px,1.8vw,23px)/1.6 var(--hand);
  margin: 15px 0 21px;
  white-space: pre-line;
}

.ticket-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

#flip {
  padding: 10px 1px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--dark-red);
  text-decoration: underline;
  text-underline-offset: 4px;
}

#result[data-side="back"] .ticket-photo {
  transform: rotate(2deg);
  animation: turn-photo .28s ease-out;
}
@keyframes turn-photo {
  from { transform: perspective(680px) rotateY(54deg) rotate(-2deg); }
  to { transform: perspective(680px) rotateY(0deg) rotate(2deg); }
}

.action {
  min-height: 43px;
  padding: 8px 21px;
  font-weight: 750;
  border: 2px solid var(--ink);
  border-radius: 9px;
  color: #fff4d3;
  background: #c93b35;
  box-shadow: 0 3px 0 #713a32;
}

.action:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #713a32;
}

.final-ticket {
  width: min(540px,88vw);
  padding: 22px clamp(14px,4vw,40px) 28px;
  text-align: center;
}

.final-seal {
  color: var(--dark-red);
  font: 36px/1.05 var(--hand);
  padding-bottom: 10px;
}

#strip {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3px 0 23px;
  padding: 12px 0 15px;
  border-block: 1px dashed #bc966e;
}

#strip img {
  display: block;
  min-width: 0;
  width: 30%;
  aspect-ratio: .83;
  object-fit: cover;
  object-position: center 38%;
  border: 4px solid #fff9e8;
  border-bottom-width: 10px;
  box-shadow: 1px 2px 4px #8f72534d;
  transform: rotate(-4deg);
}

#strip img:nth-child(2) {
  transform: rotate(1deg);
  margin: 0 2%;
}

#strip img:nth-child(3) {
  transform: rotate(4deg);
}

.for-couple,.signed {
  font: 18px/1.4 var(--hand);
}

.final-ticket h2 {
  margin: 7px 0;
}

.final-ticket .last-words {
  margin: 10px 0;
}

.signed {
  color: #8c5240;
}

.final-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.no-js {
  text-align: center;
  padding: 0 0 24px;
}

@keyframes ticket-in {
  from {
    opacity: .3;
    transform: perspective(750px) rotateX(16deg) translateY(24px)
  }
  to {
    opacity: 1;
    transform: none
  }
}

dialog[open] .ticket,dialog[open] .final-ticket {
  animation: ticket-in .38s ease-out both;
}

.streamers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.streamers i {
  position: absolute;
  top: 1%;
  left: var(--x);
  width: 6px;
  height: 14px;
  background: var(--c);
  opacity: 0;
}

@keyframes party {
  0% {
    opacity: 0;
    transform: translateY(-10px) rotate(0)
  }
  12% {
    opacity: 1
  }
  85% {
    opacity: 1
  }
  100% {
    opacity: 0;
    transform: translateY(190px) rotate(215deg)
  }
}

dialog[open] .streamers i {
  animation: party .95s var(--d) ease-out both;
}

@media(max-width:800px) {
  .spread {
    width: 91%;
    grid-template-columns: minmax(210px,.64fr) minmax(0,1fr);
    gap: 22px;
  }
  h1 {
    font-size: clamp(62px,8.7vw,78px);
  }
  .marquee {
    gap: 3%;
  }
  .deck {
    gap: 8px;
    padding-inline: 6%;
  }
  .readout {
    padding-inline: 8px;
  }
}

@media (max-width:640px) and (orientation:portrait), (max-width:900px) and (orientation:portrait) and (pointer:coarse) {
  .mast {
    width: min(calc(100% - 28px),650px);
    min-height: 54px;
    padding: 4px 0;
    gap: 8px;
  }
  .mark {
    width: 29px;
    height: 29px;
    font-size: 20px;
  }
  .imprint {
    font-size: 12px;
    gap: 8px;
    letter-spacing: .02em;
  }
  .mast nav {
    gap: clamp(7px,2.2vw,15px);
  }
  .mast a,#sound {
    font-size: 13px;
  }
  .music-note {
    font-size: 16px;
  }
  .spread {
    width: min(calc(100% - 26px),590px);
    grid-template-columns: minmax(0,1fr);
    align-content: center;
    gap: clamp(12px,2.5svh,26px);
    padding: 14px 0 20px;
    min-height: calc(100svh - 54px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  }
  .intro {
    width: 100%;
    padding: 0 4px;
  }
  .intro-art {
    display: none;
  }
  h1 {
    display: flex;
    align-items: baseline;
    column-gap: .28em;
    font-size: clamp(36px,min(11.8vw,6.7svh),66px);
    letter-spacing: .01em;
    white-space: nowrap;
  }
  .message {
    font-size: clamp(17px,4.45vw,23px);
    margin: clamp(9px,1.5svh,14px) 0 clamp(7px,1.2svh,11px);
    line-height: 1.45;
  }
  .message br {
    display: none;
  }
  .instruction {
    border: 0;
    padding: 0;
    gap: 6px;
    font-size: 13px;
  }
  .dot {
    width: 6px;
    height: 6px;
  }
  .cabinet {
    margin: 0 auto;
    padding-bottom: 11px;
  }
  .cabinet-rim {
    border-radius: 22px 22px 13px 13px;
  }
  .marquee {
    min-height: clamp(45px,6.8svh,63px);
  }
  .nameplate {
    font-size: 20px;
    padding: 5px 23px;
  }
  .window-frame {
    padding: 4px;
    border-radius: 13px;
  }
  #glass {
    aspect-ratio: auto;
    height: clamp(130px,min(73vw,calc(100svh - clamp(400px,112vw,465px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))),390px);
    border-radius: 7px;
  }
  #claw {
    width: 42px;
    height: 39px;
  }
  .floor {
    background-size: 26px 26px;
  }
  .deck {
    padding: 10px clamp(9px,3.4vw,24px) 13px;
    gap: clamp(6px,2vw,14px);
  }
  .arrows {
    padding: 4px 5px 7px;
  }
  .arrows button {
    min-width: clamp(44px,12.7vw,60px);
    min-height: clamp(44px,12.2vw,55px);
    font-size: 19px;
  }
  #drop {
    width: clamp(64px,18.6vw,85px);
  }
  .readout {
    padding: 4px clamp(4px,1.7vw,12px);
  }
  .machine-base {
    min-height: 30px;
    padding: 5px 4% 7px;
  }
  .vents { width: 15px; flex: none; }
  #hint { margin: 0 4px; font-size: 12px; }
  #result { width: min(92%,440px); max-width: min(94%,440px); }
  .ticket {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(0,1fr) auto;
    height: min(78svh,620px);
    width: 100%;
    padding: clamp(13px,4vw,22px);
    gap: clamp(10px,1.8svh,16px);
  }
  .ticket-photo, #result[data-side="back"] .ticket-photo {
    width: fit-content;
    min-height: 0;
    height: fit-content;
    max-width: 94%;
    max-height: 100%;
    justify-self: center;
    align-self: center;
    display: flex;
    padding: 6px 6px 24px;
  }
  .ticket-photo img {
    width: auto;
    max-width: 100%;
    max-height: min(41svh,315px);
    min-height: 0;
    flex: 0 1 auto;
  }
  .ticket-copy {
    width: 100%;
    text-align: center;
  }
  .ticket-actions { justify-content: center; gap: 4px 15px; }
  .ticket-copy p {
    margin: 9px 0 15px;
    font-size: 18px;
  }
  .ticket h2 {
    font-size: clamp(24px,6.8vw,34px);
  }
  .final-ticket {
    padding-top: 17px;
  }
}

@media(max-width:350px) {
  .imprint span:last-child {
    font-size: 11px;
  }
  .mast nav {
    gap: 9px;
  }
  #sound {
    gap: 3px;
  }
  .spread {
    padding-block: 9px 14px;
    gap: 9px;
  }
  .message {
    font-size: 16px;
  }
  .marquee {
    min-height: 43px;
  }
  .arrows {
    padding: 4px 4px 6px;
    gap: 3px;
  }
  .deck {
    padding: 9px 5%;
  }
  #drop {
    width: 62px;
  }
}
@media(max-height:680px) and (orientation:portrait) {
  .ticket { height: min(86svh,540px); }
  .ticket-photo img { max-height: 34svh; }
}

@media(max-height:500px) and (orientation:landscape) {
  .spread {
    width: min(95%,1000px);
    min-height: calc(100svh - 45px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    padding-block: 4px 9px;
    grid-template-columns: minmax(0,.60fr) minmax(0,1.4fr);
    gap: clamp(12px,2.5vw,30px);
  }
  .mast {
    width: min(95%,1100px);
    padding-block: 0;
  }
  .mark { width: 27px; height: 27px; font-size: 18px; }
  .mast nav { gap: 12px; }
  .imprint { font-size: 12px; letter-spacing: .03em; gap: 7px; }
  .mast a, #sound { font-size: 13px; }
  .intro-art { display: none; }
  .intro h1 { font-size: clamp(35px,10svh,50px); }
  .intro .message { margin-block: 9px; font-size: clamp(15px,4.6svh,21px); }
  .intro .instruction { width: auto; padding-top: 7px; font-size: 12px; }
  .cabinet { width: min(100%,130svh); padding-bottom: 8px; }
  .cabinet-rim {
    padding-inline: 6px;
    border-radius: 22px 22px 12px 12px;
    display: grid;
    grid-template-columns: minmax(0,1fr) clamp(104px,13vw,120px);
    grid-template-areas: "marquee marquee" "glass controls" "status status";
    gap: 5px;
  }
  .marquee { grid-area: marquee; min-height: 35px; padding: 3px; }
  .nameplate { padding: 3px 20px; font-size: 17px; }
  .window-frame { grid-area: glass; margin: 0; padding: 4px; border-radius: 12px; }
  #glass {
    aspect-ratio: auto;
    height: clamp(132px,min(47svh,calc(100svh - 138px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))),236px);
  }
  #claw { width: 34px; height: 31px; }
  .deck {
    grid-area: controls; grid-template-columns: minmax(0,1fr); grid-template-rows: 1fr auto auto;
    margin: 0; padding: 5px 1px 7px; gap: 4px;
    border: 2px solid #743431; border-radius: 10px; justify-items: center;
  }
  .arrows { padding: 2px; gap: 3px; border-radius: 10px; }
  .arrows button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .readout { order: -1; display: flex; align-items: center; gap: 4px; padding: 1px 5px; }
  .readout strong { font-size: 16px; }
  #drop { width: 56px; }
  .machine-base { grid-area: status; padding: 0 4% 5px; }
  .machine-base .vents { width: 15px; }
  .ticket {
    padding: 14px;
    gap: 16px;
  }
  .ticket-photo img {
    max-height: 54svh;
  }
  .final-ticket {
    width: min(550px,75vw);
    padding: 10px 15px;
  }
  .final-seal {
    display: none;
  }
  #strip {
    margin-bottom: 5px;
    padding: 2px;
  }
  #strip img {
    max-height: 17svh;
    width: auto;
  }
  .final-actions {
    margin-top: 6px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior: auto!important;
    transition: none!important;
    animation: none!important;
  }
}