/* The menu grows with its viewport; readable forms keep their own line limits. */
@media (min-width: 1101px) {
  #metaGame .meta-v21-shell > .meta-content {
    width: min(100%, 2720px);
    padding: clamp(22px, 2.2vw, 52px) clamp(28px, 3vw, 88px) 38px;
  }
  #metaGame .meta-v21-home {
    height: auto;
    min-height: 0;
    grid-template-rows: auto auto;
    gap: clamp(16px, 1.3vw, 30px);
  }
  #metaGame .meta-v21-home-stage {
    height: clamp(430px, min(74svh, 50vw), 1020px);
    grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr);
    gap: clamp(20px, 2vw, 48px);
  }
  #metaGame .meta-v21-hero { height: 100%; min-height: 0; }
  #metaGame .meta-v21-side { min-height: 0; grid-template-rows: repeat(3, minmax(0, 1fr)); }
  #metaGame .meta-v21-feature { min-height: 0; }
  #metaGame .meta-v21-hero-copy { left: clamp(32px, 3vw, 80px); right: 40px; max-width: min(820px, 82%); }
  #metaGame .meta-v21-hero-copy h1 { font-size: clamp(36px, 2.25vw, 64px); line-height: 1.04; }
  #metaGame .meta-v21-feature strong { font-size: clamp(20px, 1.15vw, 30px); }
  #metaGame .meta-v21-feature em { font-size: clamp(13px, .7vw, 18px); line-height: 1.4; }
  #metaGame .meta-v21-play-catalog { width: 100%; max-width: none; }
  #metaGame .meta-v21-mode-categories { gap: clamp(24px, 2vw, 42px); }
  #metaGame .meta-v21-mode-category { min-width: 0; }
  #metaGame .meta-v21-mode-category h2 { font-size: clamp(20px, 1.12vw, 28px); }
  #metaGame .meta-v21-mode-category .meta-v21-category-arrows { display: none; }
  #metaGame .meta-v21-mode-track {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    align-items: stretch;
    gap: clamp(12px, 1vw, 24px);
    overflow: visible;
    scroll-snap-type: none;
    padding: 2px;
  }
  #metaGame .meta-v21-mode-track > .meta-v21-choice { width: 100%; min-width: 0; }
  #metaGame .meta-v21-mode-track > .meta-v21-choice > span { min-height: 84px; }
  #metaGame .meta-v21-mode-track > .meta-v21-choice strong { font-size: clamp(18px, 1vw, 24px); }
  #metaGame .meta-v21-mode-track > .meta-v21-choice small { font-size: clamp(12px, .62vw, 16px); }
  #metaGame .meta-v21-play-panel { max-width: min(100%, 1560px); }
  #metaGame .meta-v21-play-panel .meta-v21-panel-venues .meta-v21-venue { flex-basis: 46%; width: 46%; }
}

/* cushion-settings-responsive-v1 */
/* Keep one scroll surface, with the title and close control always in reach. */
#menuDialog.console-menu {
  box-sizing: border-box;
  width: min(1120px, calc(100vw - max(16px, var(--app-safe-left, 0px)) - max(16px, var(--app-safe-right, 0px))));
  max-width: none;
  inset-inline: max(16px, var(--app-safe-left, 0px)) max(16px, var(--app-safe-right, 0px));
  inset-block: max(12px, var(--app-safe-top, 0px)) max(12px, var(--app-safe-bottom, 0px));
  max-height: calc(var(--app-viewport-height, 100dvh) - max(12px, var(--app-safe-top, 0px)) - max(12px, var(--app-safe-bottom, 0px)));
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scroll-padding-block: 88px 16px;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}
#menuDialog > form:first-child { position: sticky; top: 0; z-index: 5; height: 0; margin: 0; pointer-events: none; }
#menuDialog > form:first-child .modal-close { top: 12px; right: 14px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; background: #16372f; border: 1px solid #84978b55; pointer-events: auto; }
#menuDialog > .console-menu-header { position: sticky; top: 0; z-index: 4; padding: 16px 76px 14px 22px; background: #112c29; }
#menuDialog > .console-menu-header h2 { margin: 4px 0 0; font-size: clamp(20px, 2.3vw, 28px); line-height: 1.15; letter-spacing: -.7px; overflow-wrap: anywhere; }
#menuDialog > .console-menu-header .eyebrow { font-size: 11px; }
#menuDialog .console-primary-actions { padding: 16px 22px 0; }
#menuDialog .console-primary-actions .console-action { min-height: 58px!important; padding: 10px 14px!important; }
#menuDialog .console-action-copy strong { font-size: 14px; }
#menuDialog > .console-section { margin: 16px 22px; }
#menuDialog .console-setting-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#menuDialog .console-setting { min-height: 72px!important; padding: 12px 14px!important; gap: 10px; flex-direction: row; align-items: center; }
#menuDialog .console-setting-copy strong { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
#menuDialog .console-setting .setting-state { flex: 0 0 auto; margin-left: auto; font-size: 12px; }
#menuDialog .console-setting:is(.language-setting, .quality-setting) { grid-column: auto; flex-direction: column; align-items: stretch; gap: 6px; }
#menuDialog .language-setting .console-setting-copy { align-items: flex-start; }
#menuDialog .language-setting select { box-sizing: border-box; width: 100%; max-width: none; min-width: 0; min-height: 36px; padding: 5px 10px; font-size: 14px; }
#menuDialog .quality-setting select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 36px!important; font-size: 14px; }
#menuDialog #resourceStorageSettings { padding-top: 12px!important; }
#menuDialog #resourceStorageSettings > p { max-width: 90ch; margin: 7px 0 10px; }
#menuDialog #resourceStorageSettings button { min-height: 44px!important; }
#menuDialog .console-utility-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#menuDialog .console-utility-actions button { min-height: 48px!important; padding: 10px 18px!important; gap: 10px; font-size: 13px!important; }
#menuDialog .console-utility-actions button > span:first-child { min-width: 0; overflow-wrap: anywhere; }
#menuDialog .console-about-links { gap: 0 24px; }
#menuDialog :is(button, select, a):focus-visible { outline: 2px solid #ffe095; outline-offset: -3px; }
@media (max-width: 650px) {
  #menuDialog.console-menu { width: calc(100vw - max(8px, var(--app-safe-left, 0px)) - max(8px, var(--app-safe-right, 0px))); inset-inline: max(8px, var(--app-safe-left, 0px)) max(8px, var(--app-safe-right, 0px)); }
  #menuDialog > .console-menu-header { padding: 14px 68px 14px 16px; }
  #menuDialog .console-primary-actions { padding: 12px 14px 0; }
  #menuDialog > .console-section { margin: 14px; }
  #menuDialog .console-setting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #menuDialog .console-setting { min-height: 64px!important; padding: 10px!important; gap: 7px; }
  #menuDialog .console-setting-copy strong { font-size: 13px; }
  #menuDialog .console-setting:is(.language-setting, .quality-setting) { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; }
  #menuDialog .language-setting select, #menuDialog .quality-setting select { width: 60%; max-width: 200px; margin-left: auto; }
  #menuDialog .console-utility-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #menuDialog .console-utility-actions button { padding: 10px 12px!important; font-size: 12px!important; }
}
@media (orientation: landscape) and (max-height: 650px) {
  #menuDialog.console-menu { max-height: calc(var(--app-viewport-height, 100dvh) - max(6px, var(--app-safe-top, 0px)) - max(6px, var(--app-safe-bottom, 0px))); inset-block: max(6px, var(--app-safe-top, 0px)) max(6px, var(--app-safe-bottom, 0px)); padding: 0; scroll-padding-top: 64px; }
  #menuDialog > .console-menu-header { padding: 10px 68px 10px 16px; }
  #menuDialog > .console-menu-header h2 { font-size: 20px; margin: 0; }
  #menuDialog > form:first-child .modal-close { top: 5px; right: 12px; }
  #menuDialog .console-primary-actions { padding-top: 10px; }
  #menuDialog > .console-section { margin-block: 10px; }
  #menuDialog .console-setting { min-height: 60px!important; padding: 8px 10px!important; }
}
@media (min-width: 1800px) {
  #metaGame .meta-header.meta-v21-header { gap: 18px; min-height: 92px; }
  #metaGame .meta-header.meta-v21-header > nav button { min-height: 52px; padding-inline: clamp(14px, 1vw, 28px); font-size: clamp(14px, .72vw, 20px); }
  #metaGame .meta-header.meta-v21-header > nav .meta-game-icon { width: 32px; height: 32px; }
  #metaGame .meta-v21-hero-copy p { font-size: clamp(16px, .85vw, 22px); }
  #metaGame .meta-v21-hero-cta { min-height: 54px; font-size: clamp(16px, .8vw, 20px); }
}
@media (min-width: 2100px) {
  #metaGame .meta-v21-mode-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
/* Short desktop windows should not stretch the opening artwork vertically. */
@media (min-width: 1101px) and (max-height: 650px) {
  #metaGame .meta-v21-home-stage { height: 410px; }
}

@media (min-width: 1400px) {
  #metaGame .meta-v21-play-panel .meta-v21-config { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-content: start; gap: 24px 34px; }
  #metaGame .meta-v21-config > section:has(.meta-v21-table-carousel) { grid-column: 2; grid-row: 1 / span 4; }
}

/* home-fit-v1 */
/* Keep the home stage within the space left after header, survey and goals. */
@media (min-width: 768px) {
  #metaGame .meta-v21-shell:has(> .meta-page-home) { display: flex; flex-direction: column; min-height: 0; height: 100%; }
  #metaGame .meta-v21-shell > .meta-content.meta-page-home { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; height: auto; padding-block: clamp(12px, 2vh, 28px) clamp(10px, 1.4vh, 22px); overflow: visible; }
  #metaGame .meta-page-home > .meta-v21-home { flex: 1 1 0; height: auto; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(10px, 1.2vh, 20px); }
  #metaGame .meta-page-home .meta-v21-home-stage { height: auto; min-height: 0; }
  #metaGame .meta-page-home .meta-v21-hero { height: 100%; min-height: 0; }
  #metaGame .meta-page-home .meta-v21-side { padding-block: 8px; gap: clamp(8px, 1.2vh, 14px); }
  #metaGame .meta-page-home .meta-v21-home-footer { padding-top: 0; }
  #metaGame .meta-page-home > .player-audience-card { flex: 0 0 auto; margin-bottom: 12px; }
}

/* keyboard-shortcuts-v1: consultable from Settings before the 3D game loads. */
#keyboardHelpDialog{box-sizing:border-box;width:min(920px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px)!important;padding:0;overflow:hidden;border-color:#bda46a66;background:linear-gradient(135deg,#112d28,#081c1d);zoom:1!important}
#keyboardHelpDialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr);height:min(750px,calc(100dvh - 24px))}
.keyboard-help-heading{position:relative;padding:24px 68px 18px 24px;border-bottom:1px solid #c4ad6d2b}
#keyboardHelpDialog h2{margin:0 0 8px;font-size:clamp(20px,3vw,28px);letter-spacing:-.6px}
#keyboardHelpDialog .keyboard-help-heading p{margin:0;font-size:14px;line-height:1.4}
.keyboard-help-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px 24px 24px;scrollbar-gutter:stable;touch-action:pan-y}
.keyboard-single-setting{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid #bca57440;border-radius:12px;background:#ffffff06;cursor:pointer;min-height:64px}
.keyboard-single-setting input{flex:0 0 auto;width:22px;height:22px;accent-color:#f2cb77;cursor:pointer}
.keyboard-single-setting>span{display:grid;gap:6px;min-width:0}.keyboard-single-setting strong{font-size:15px}.keyboard-single-setting small{font-size:12px;line-height:1.5;color:#b4c8be}.keyboard-single-setting output{margin-left:auto;color:#f1ce81;font-size:12px;white-space:nowrap}
#keyboardHelpDialog .keyboard-help-note,#keyboardHelpDialog .keyboard-help-foot{font-size:12px;line-height:1.55;margin:16px 0;color:#aebfb5}
.keyboard-help-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}.keyboard-help-groups section{min-width:0}.keyboard-help-groups h3{font-size:15px;color:#f2d38e;margin:8px 0 12px}.keyboard-help-groups dl{display:grid;grid-template-columns:minmax(92px,.8fr) minmax(0,1.25fr);gap:10px 12px;align-items:start;margin:0}.keyboard-help-groups dt,.keyboard-help-groups dd{min-width:0;margin:0;font-size:13px;line-height:1.5}.keyboard-help-groups dd{color:#d6e0d7}.keyboard-help-groups kbd{display:inline-block;max-width:100%;border:1px solid #82978e66;border-bottom-width:2px;border-radius:5px;padding:2px 7px;background:#183b33;color:#f5e3ae;font-family:inherit;font-weight:600;font-size:11px;line-height:1.6;overflow-wrap:anywhere}
#keyboardHelpDialog :is(button,input,.keyboard-help-body):focus-visible{outline:2px solid #ffe095;outline-offset:-3px}
@media(max-width:600px){#keyboardHelpDialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)!important}#keyboardHelpDialog[open]{height:calc(100dvh - 16px)}.keyboard-help-heading{padding:18px 60px 16px 16px}.keyboard-help-body{padding:16px}.keyboard-help-groups{grid-template-columns:minmax(0,1fr);gap:16px}.keyboard-single-setting{gap:10px;flex-wrap:wrap}.keyboard-single-setting>span{flex:1 1 calc(100% - 40px)}.keyboard-single-setting output{margin-left:32px}}
@media(orientation:landscape) and (max-height:650px){#keyboardHelpDialog{width:calc(100vw - max(10px,env(safe-area-inset-left)) - max(10px,env(safe-area-inset-right)));max-height:calc(100dvh - 16px)!important}#keyboardHelpDialog[open]{height:calc(100dvh - 16px)}.keyboard-help-heading{padding:12px 64px 10px 18px}.keyboard-help-body{padding:12px 18px}.keyboard-help-heading p{display:none}.keyboard-single-setting{padding:10px}.keyboard-help-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}}
/* Let phone browsers scroll naturally instead of compressing readable cards. */
@media (max-width: 767px) {
  html:not(.sinuca-native) #metaGame .meta-v21-shell > .meta-content.meta-page-home { height: auto; min-height: 0; overflow: visible; overflow-x: clip; }
  html:not(.sinuca-native) #metaGame .meta-page-home > .meta-v21-home { height: auto; min-height: 0; grid-template-rows: auto auto; }
  html:not(.sinuca-native) #metaGame .meta-page-home .meta-v21-home-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 240px; }
}
@media (orientation: landscape) and (max-height: 650px) {
  html.sinuca-native #metaGame .meta-v21-shell:has(> .meta-page-home) { display: flex; flex-direction: column; min-height: 0; height: 100%; }
  html.sinuca-native #metaGame .meta-v21-shell > .meta-content.meta-page-home { display: flex; flex-direction: column; flex: 1 1 0; height: auto; min-height: 0; padding: 6px 12px; overflow: visible; }
  html.sinuca-native #metaGame .meta-page-home > .meta-v21-home { flex: 1 1 0; height: auto; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; }
  html.sinuca-native #metaGame .meta-page-home .meta-v21-home-stage { height: auto; min-height: 0; }
  html.sinuca-native #metaGame .meta-page-home .meta-v21-hero { height: 100%; min-height: 0; }
  html.sinuca-native #metaGame .meta-page-home .meta-guest-save .meta-game-icon { width: 28px; height: 28px; }
  html.sinuca-native #metaGame .meta-page-home > .player-audience-card { flex: 0 0 auto; margin-bottom: 6px; padding: 6px 10px; gap: 10px; }
  html.sinuca-native #metaGame .meta-page-home > .player-audience-card strong { font-size: 12px; }
  html.sinuca-native #metaGame .meta-page-home > .player-audience-card p { font-size: 10px; line-height: 1.25; }
  html.sinuca-native #metaGame .meta-page-home > .player-audience-card button { min-height: 44px; font-size: 11px; padding: 5px 12px; }
}
