html, body { width: 100%; height: 100%; overscroll-behavior: none; }
body { overflow: hidden; }
#app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.menu {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: max(24px, env(safe-area-inset-top)) max(40px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(40px, env(safe-area-inset-left));
  display: flex; flex-direction: column;
  background-image: radial-gradient(ellipse at 100% 0%, #e5d9bd77, transparent 55%);
}
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.brand { display: block; width: 246px; height: auto; mix-blend-mode: multiply; }
.event-mark { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 15px; }
.event-dot { width: 7px; height: 7px; background: var(--wax); border-radius: 50%; }
.invitation { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 30px 0 24px; }
.invitation .eyebrow { color: var(--wax); margin-bottom: 14px; }
.invitation h1 { font-family: var(--display); font-size: clamp(36px, 4vw, 60px); font-weight: 400; line-height: 1.08; letter-spacing: -.045em; margin-bottom: 0; }
.invitation h1 br { display: none; }
.invitation h1 em { color: var(--wax); font-style: normal; }
.menu-hint { color: var(--muted); font-size: 17px; line-height: 1.55; margin: 0 4px 0 0; }
.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 8px 0 24px; }
.game-grid[data-count="1"] { grid-template-columns: minmax(0, 620px); justify-content: center; }
.game-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 940px; width: 100%; margin: 0 auto; }
.game-card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 248px; border: 1px solid #c9bfab; border-radius: 5px; overflow: hidden; color: var(--ink); background: var(--paper-bright); text-decoration: none; box-shadow: 0 5px 0 -2px #e6ddcd; transition: transform .15s; }
.game-card:active { transform: translateY(3px); }
.card-art { height: clamp(86px, 14vh, 140px); position: relative; background: #e8e4d5; overflow: hidden; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); }
.game-card:nth-child(3n+2) .card-art { background: #e9d3c4; }
.game-card:nth-child(3n+3) .card-art { background: #dedfc9; }
.card-art img { height: 100%; width: 100%; object-fit: cover; }
.card-number { font-family: var(--display); font-size: 64px; color: #282b274d; transform: rotate(-6deg); line-height: 1; }
.card-art::after { content: ""; position: absolute; inset: 10px; border: 1px solid #282b2724; pointer-events: none; }
.card-copy { flex: 1; display: flex; flex-direction: column; padding: 20px 22px 18px; }
.card-copy h2 { font-family: var(--display); font-size: 27px; font-weight: 400; line-height: 1.2; margin: 0 0 9px; overflow-wrap: anywhere; }
.card-copy p { font-size: 16px; line-height: 1.45; color: var(--muted); margin-bottom: 16px; }
.card-play { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 15px; font-weight: 700; color: var(--wax); }
.card-arrow { font-size: 27px; line-height: 1; }
.catalog-state { flex: 1; min-height: 230px; display: flex; align-items: center; justify-content: center; gap: 70px; padding: 26px; margin-bottom: 18px; border: 1px dashed #c6bda9; border-radius: 8px; background: #fffdf74d; }
.state-copy { max-width: 410px; }
.state-copy .eyebrow { color: var(--muted); margin-bottom: 16px; font-size: 11px; }
.state-copy h2 { font-family: var(--display); font-size: clamp(28px, 3vw, 38px); font-weight: 400; letter-spacing: -.025em; line-height: 1.2; margin-bottom: 12px; }
.state-copy > p:last-of-type { color: var(--muted); font-size: 17px; line-height: 1.6; margin-bottom: 0; }
.state-copy .button { margin-top: 20px; }
.paper-emblem { width: 166px; height: 175px; position: relative; flex-shrink: 0; }
.paper-sheet { position: absolute; display: block; width: 116px; height: 144px; border: 1px solid #c6bda9; border-radius: 2px; }
.paper-sheet-back { background: #ddd4b8; top: 6px; left: 10px; transform: rotate(-13deg); }
.paper-sheet-front { padding: 29px 20px; background: #fffdf7; top: 6px; left: 29px; transform: rotate(7deg); box-shadow: 2px 5px 0 #282b270a; }
.paper-line { display: block; height: 1px; margin-bottom: 11px; background: #d6cebd; }
.paper-line:nth-child(3) { width: 60%; }
.paper-star { display: block; margin-top: 13px; font-size: 36px; color: var(--brass); }
.paper-seal { position: absolute; width: 58px; height: 58px; bottom: 5px; right: 0; display: flex; justify-content: center; align-items: center; font-family: var(--display); font-size: 31px; padding-top: 6px; color: #e9bd99; background: var(--wax); border: 4px double #c06a50; border-radius: 47% 51% 45% 53%; transform: rotate(-8deg); box-shadow: 2px 3px 0 #282b2720; }
.paper-seal > span { font-size: 15px; align-self: flex-end; padding-bottom: 9px; }
.catalog-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 16px; margin-bottom: 16px; border-left: 3px solid var(--wax); background: #f0e2d7; }
.menu-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.menu-controls { display: flex; align-items: center; gap: 10px; }
.footer-note { color: var(--muted); font-family: var(--display); font-size: 14px; }
.footer-note > span { font-size: 22px; margin-right: 8px; color: var(--brass); vertical-align: middle; }
.fullscreen-button, .sound-toggle { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 60px; min-width: 60px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 5px; background: #fffdf780; color: var(--ink); font-size: 15px; }
.fullscreen-button svg, .sound-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sound-toggle[aria-pressed="true"] { background: #e3e7d9; border-color: #8e9c79; }
/* A fixed name plus a slide switch: the knob shows the state, the text never changes. */
.switch { position: relative; flex-shrink: 0; width: 36px; height: 22px; border-radius: 11px; background: #c9c1af; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fffdf7; box-shadow: 0 1px 2px #282b2755; transition: transform .15s; }
[aria-pressed="true"] > .switch { background: #5e7a46; }
[aria-pressed="true"] > .switch::after { transform: translateX(14px); }
.sound-toggle[aria-pressed="true"] .sound-slash { display: none; }
.sound-volume { display: flex; align-items: center; gap: 10px; min-height: 60px; font-size: 14px; color: var(--muted); }
.sound-volume input { width: 110px; height: 60px; margin: 0; accent-color: var(--wax); cursor: pointer; }
.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.game-mount, .game-mount iframe { width: 100%; height: 100%; border: 0; display: block; }
.stage-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; background: var(--paper); z-index: 1; overflow-y: auto; }
.stage-status h1 { font-family: var(--display); font-size: clamp(30px, 4vw, 48px); font-weight: 400; margin-bottom: 14px; }
.stage-status p { line-height: 1.5; }
.stage-actions { display: flex; gap: 12px; margin-top: 16px; }
dialog { max-width: min(92vw, 460px); padding: 36px; border: 1px solid #b4a78e; border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 90px #0004; text-align: center; }
dialog::backdrop { background: #282b2780; }
dialog h2 { font-family: var(--display); font-size: 32px; font-weight: 400; line-height: 1.2; }
dialog p { line-height: 1.6; }
dialog .button { width: 100%; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 4; padding: 14px 22px; max-width: 90vw; background: var(--ink); color: var(--paper); border-radius: 6px; font-size: 15px; text-align: center; }
.noscript { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; padding: 24px; background: var(--wax); color: white; text-align: center; }

@media (max-width: 900px) {
  .menu { padding-left: 28px; padding-right: 28px; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invitation h1 br { display: initial; }
  .catalog-state { gap: 34px; }
}
@media (max-width: 600px) {
  .menu { padding: 18px; }
  .masthead { gap: 12px; flex-wrap: wrap; padding-bottom: 14px; }
  .brand { width: 210px; }
  .event-mark { font-size: 12px; }
  .invitation { padding: 24px 0 20px; align-items: center; }
  .invitation h1 { font-size: 36px; }
  .menu-hint { font-size: 13px; }
  .game-grid, .game-grid[data-count="2"] { grid-template-columns: 1fr; }
  .catalog-state { flex-direction: column; gap: 24px; padding: 30px 22px; text-align: center; }
  .paper-emblem { transform: scale(.8); height: 148px; }
  .state-copy h2 { font-size: 28px; }
  .catalog-notice { flex-wrap: wrap; }
  .footer-note { font-size: 12px; }
  .menu-controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .fullscreen-button, .sound-toggle { padding: 10px 8px; gap: 8px; font-size: 14px; }
  .fullscreen-button { grid-column: 3; grid-row: 1; }
  .sound-volume { grid-column: 1 / -1; grid-row: 2; }
  .sound-volume input { flex: 1; }
}
@media (min-width: 901px) and (max-height: 740px) {
  .menu { padding-top: 16px; }
  .brand { width: 210px; }
  .masthead { padding-bottom: 12px; }
  .invitation { padding: 20px 0; }
  .invitation h1 { font-size: 43px; }
  .catalog-state { min-height: 200px; }
  .card-art { height: 90px; }
  .card-copy { padding: 16px 20px; }
}