.language-switch { position: relative; font: 14px/1.4 system-ui, sans-serif; flex: 0 0 auto; z-index: 30; }
.language-switch summary { cursor: pointer; list-style: none; border: 1px solid #978065; border-radius: 24px; padding: 9px 13px; background: #fffaf0; white-space: nowrap; }
.language-switch summary::-webkit-details-marker { display: none; }
.language-switch nav { position: absolute; right: 0; top: calc(100% + 8px); display: grid; min-width: 150px; padding: 7px; border: 1px solid #b9a78a; border-radius: 14px; background: #fffaf0; box-shadow: 0 8px 22px #2b201633; }
.language-switch a { display: block; padding: 9px 12px; text-decoration: none; color: #30271e; border-radius: 8px; }
.language-switch a:hover, .language-switch a[aria-current] { background: #e9deca; }
.language-switch a:focus-visible, .language-switch summary:focus-visible { outline: 3px solid #b38130; outline-offset: 2px; }
.directory-header { gap: 14px; flex-wrap: wrap; }
.directory-header .back-link { margin-left: auto; }
.locale-note { text-align: center; font: 13px/1.6 system-ui, sans-serif; opacity: .75; margin: 10px 16px 20px; }
html:not([lang="ja"]) body { font-family: 'Trebuchet MS', Arial, sans-serif; }
html:not([lang="ja"]) .stitched-label { font-size: clamp(15px, 1.8vw, 24px); white-space: normal; }
html:not([lang="ja"]) .message h2 { font-size: clamp(26px, 4vw, 52px); }
html:not([lang="ja"]) .message p { line-height: 1.7; }
html:not([lang="ja"]) .paper-link { font-size: clamp(18px, 3.4vw, 42px); }
html:not([lang="ja"]) .game-card h3 { font-size: clamp(11px, 1vw, 14px); }
html:not([lang="ja"]) .memo-card strong { font-size: clamp(16px, 2vw, 25px); }
html:not([lang="ja"]) .phone-bottom { font-size: 9px; }
@media(max-width:700px) {
  .nav-actions { gap: 6px; }
  .language-switch { font-size: 12px; }
  .language-switch summary { padding: 7px 9px; }
  .directory-header .language-switch { margin-left: auto; }
  html:not([lang="ja"]) .pill-button { font-size: 12px; padding-inline: 12px; }
  html:not([lang="ja"]) .download-ribbon-inner { flex-wrap: wrap; justify-content: center; gap: 12px; }
  html:not([lang="ja"]) .download-ribbon-inner p { font-size: 17px; }
  html:not([lang="ja"]) .store-button strong { font-size: 15px; }
}
/* Menus must extend beyond the rounded header, including on small phones. */
.language-switch { border: 0; margin: 0; padding: 0; }
.site-header, .nav { overflow: visible; }
.games-directory-link .cream-button { position: static; opacity: 1; pointer-events: auto; }
/* The Japanese hero is flattened artwork. Reuse the existing live components
   for translations so all headings and calls to action remain readable. */
html:not([lang="ja"]) .hero { min-height: 0; padding: 100px 0 0; background: radial-gradient(ellipse at 35% 10%, #f9dfaa, transparent 70%), repeating-linear-gradient(0deg,#b47b42 0,#b47b42 2px,#bd8a52 3px,#bd8a52 80px); }
html:not([lang="ja"]) .hero-inner { position: relative; width: min(calc(100% - 44px),1100px); height: auto; min-height: 580px; margin: auto; padding: 35px 0; overflow: visible; clip-path: none; grid-template-columns: 1fr 1fr; gap: 35px; }
html:not([lang="ja"]) .hero-copy { padding-top: 0; text-align: center; }
html:not([lang="ja"]) .hero-logo { max-width: 100%; }
html:not([lang="ja"]) .stitched-label { opacity: 1; padding: 16px 22px; line-height: 1.4; }
html:not([lang="ja"]) .phone-stage { display: block; width: min(320px,100%); }
html:not([lang="ja"]) .download-ribbon { position: relative; inset: auto; background: #a54829; padding: 20px; pointer-events: auto; }
html:not([lang="ja"]) .download-ribbon-inner { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; height: auto; pointer-events: auto; }
html:not([lang="ja"]) .download-ribbon p { display: block; margin: 0; }
html:not([lang="ja"]) .download-ribbon .cream-button { position: static; opacity: 1; min-height: 46px; min-width: 0; padding: 12px 24px; }
html:not([lang="ja"]) .felt-band { min-height: 0; background: repeating-linear-gradient(45deg,transparent 0,transparent 24px,#ffffff06 25px,#ffffff06 26px), #355c47; }
html:not([lang="ja"]) .message { position: relative; width: min(calc(100% - 40px),1000px); height: auto; margin: auto; overflow: visible; clip-path: none; padding: 60px 0 70px; }
html:not([lang="ja"]) .message h2 { text-shadow: none; overflow-wrap: normal; line-break: auto; }
html:not([lang="ja"]) .sticker-person { display: none; }
@media(max-width:700px) {
  .nav { padding: 8px 10px; gap: 6px; }
  .brand { width: clamp(78px,23vw,108px); }
  .nav-actions { margin-left: auto; flex: 0 0 auto; gap: 5px; }
  .pill-button { position: static; min-width: 0; min-height: 36px; padding: 0 9px; font-size: 12px; }
  html:not([lang="ja"]) .pill-button { padding: 0 9px; }
  .language-switch summary { padding: 7px 8px; }
  html:not([lang="ja"]) .hero { padding-top: 90px; }
  html:not([lang="ja"]) .hero-inner { grid-template-columns: 1fr; min-height: 0; width: calc(100% - 40px); padding: 20px 0 35px; gap: 26px; }
  html:not([lang="ja"]) .hero-logo { width: 230px; }
  html:not([lang="ja"]) .stitched-label { width: auto; max-width: 100%; margin: 14px auto 0; font-size: 17px; }
  html:not([lang="ja"]) .phone-stage { width: 225px; transform: rotate(5deg); }
  html:not([lang="ja"]) .message { padding: 38px 0 55px; }
}
html:not([lang="ja"]) .phone-bottom { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; width: 100%; }
html:not([lang="ja"]) .phone-bottom span { min-width: 0; font-size: 8px; padding-inline: 1px; overflow-wrap: anywhere; }
html:not([lang="ja"]) .message p { font-weight: 400; }