/* Generated scalable gray UI artwork. */
:root {
  --ui-frame-PauseView: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22450%22%20height%3D%22290%22%20viewBox%3D%220%200%20450%20290%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M4%200H446L450%204V286L446%20290H4L0%20286V4Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M5%203H445L447%205V285L445%20287H5L3%20285V5Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M11%209H439L441%2011V279L439%20281H11L9%20279V11Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-PauseViewButton: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%2240%22%20viewBox%3D%220%200%20100%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M2%200H98L100%202V38L98%2040H2L0%2038V2Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M2%201H98L99%202V38L98%2039H2L1%2038V2Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M3%203H97L97%203V37L97%2037H3L3%2037V3Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-PauseViewButtonLarge: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22184%22%20height%3D%2240%22%20viewBox%3D%220%200%20184%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M2%200H182L184%202V38L182%2040H2L0%2038V2Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M2%201H182L183%202V38L182%2039H2L1%2038V2Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M3%203H181L181%203V37L181%2037H3L3%2037V3Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-PauseButtonTapped: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%2240%22%20viewBox%3D%220%200%20100%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20opacity%3D%22.7%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M12%200H88L90%202V38L88%2040H12L10%2038V2Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M12%201H88L89%202V38L88%2039H12L11%2038V2Z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M12%202H88L88%202V38L88%2038H12L12%2038V2Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M13%203H87L87%203V37L87%2037H13L13%2037V3Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-PauseButtonTappedLarge: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%2240%22%20viewBox%3D%220%200%20180%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20opacity%3D%22.7%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M20%200H160L162%202V38L160%2040H20L18%2038V2Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M20%201H160L161%202V38L160%2039H20L19%2038V2Z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M20%202H160L160%202V38L160%2038H20L20%2038V2Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M21%203H159L159%203V37L159%2037H21L21%2037V3Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-ObjectivesButton: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2240%22%20viewBox%3D%220%200%2030%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M2%200H28L30%202V38L28%2040H2L0%2038V2Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M2%201H28L29%202V38L28%2039H2L1%2038V2Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M3%203H27L27%203V37L27%2037H3L3%2037V3Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-Button85x35: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2285%22%20height%3D%2235%22%20viewBox%3D%220%200%2085%2035%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M2%200H83L85%202V33L83%2035H2L0%2033V2Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M2%201H83L84%202V33L83%2034H2L1%2033V2Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M3%203H82L82%203V32L82%2032H3L3%2032V3Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-Button85x35Highlighted: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2285%22%20height%3D%2235%22%20viewBox%3D%220%200%2085%2035%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20opacity%3D%22.7%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M10.5%200H74.5L76.5%202V33L74.5%2035H10.5L8.5%2033V2Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M10.5%201H74.5L75.5%202V33L74.5%2034H10.5L9.5%2033V2Z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M10.5%202H74.5L74.5%202V33L74.5%2033H10.5L10.5%2033V2Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M11.5%203H73.5L73.5%203V32L73.5%2032H11.5L11.5%2032V3Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-MovementButton: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2270%22%20height%3D%2225%22%20viewBox%3D%220%200%2070%2025%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M2%200H68L70%202V23L68%2025H2L0%2023V2Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M2%201H68L69%202V23L68%2024H2L1%2023V2Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M3%203H67L67%203V22L67%2022H3L3%2022V3Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-MovementButtonHighlighted: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2270%22%20height%3D%2225%22%20viewBox%3D%220%200%2070%2025%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20opacity%3D%22.7%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M9%200H61L63%202V23L61%2025H9L7%2023V2Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M9%201H61L62%202V23L61%2024H9L8%2023V2Z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M9%202H61L61%202V23L61%2023H9L9%2023V2Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M10%203H60L60%203V22L60%2022H10L10%2022V3Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-SmallTab: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2260%22%20height%3D%2217%22%20viewBox%3D%220%200%2060%2017%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M2%200H58L60%202V15L58%2017H2L0%2015V2Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M2%201H58L59%202V15L58%2016H2L1%2015V2Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M3%203H57L57%203V14L57%2014H3L3%2014V3Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-LargePanel: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22300%22%20viewBox%3D%220%200%20200%20300%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23303030%22%20d%3D%22M4%200H196L200%204V296L196%20300H4L0%20296V4Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M4%202H196L198%204V296L196%20298H4L2%20296V4Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M7%206H193L194%207V293L193%20294H7L6%20293V7Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-NudgeController: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22130%22%20height%3D%22155%22%20viewBox%3D%220%200%20130%20155%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23303030%22%20d%3D%22M4%200H126L130%204V151L126%20155H4L0%20151V4Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M4%202H126L128%204V151L126%20153H4L2%20151V4Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M7%206H123L124%207V148L123%20149H7L6%20148V7Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-StatusBar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22130%22%20height%3D%2240%22%20viewBox%3D%220%200%20130%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23303030%22%20d%3D%22M4%200H126L130%204V36L126%2040H4L0%2036V4Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M4%202H126L128%204V36L126%2038H4L2%2036V4Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M7%206H123L124%207V33L123%2034H7L6%2033V7Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-BarTop: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290%22%20height%3D%2250%22%20viewBox%3D%220%200%2090%2050%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M2%200H88L90%202V148L88%20150H2L0%20148V2Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M3%202H87L88%203V147L87%20148H3L2%20147V3Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M6%205H84L85%206V144L84%20145H6L5%20144V6Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-BarBottom: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290%22%20height%3D%2250%22%20viewBox%3D%220%200%2090%2050%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M2%20-100H88L90%20-98V48L88%2050H2L0%2048V-98Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M3%20-98H87L88%20-97V47L87%2048H3L2%2047V-97Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M6%20-95H84L85%20-94V44L84%2045H6L5%2044V-94Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-BarMidSection: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2290%22%20height%3D%2230%22%20viewBox%3D%220%200%2090%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M2%20-30H88L90%20-28V58L88%2060H2L0%2058V-28Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M3%20-28H87L88%20-27V57L87%2058H3L2%2057V-27Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M6%20-25H84L85%20-24V54L84%2055H6L5%2054V-24Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-BarLeft: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2260%22%20viewBox%3D%220%200%2050%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M2%200H148L150%202V58L148%2060H2L0%2058V2Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M3%202H147L148%203V57L147%2058H3L2%2057V3Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M6%205H144L145%206V54L144%2055H6L5%2054V6Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-BarRight: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2260%22%20viewBox%3D%220%200%2050%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M-98%200H48L50%202V58L48%2060H-98L-100%2058V2Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M-97%202H47L48%203V57L47%2058H-97L-98%2057V3Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M-94%205H44L45%206V54L44%2055H-94L-95%2054V6Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-BarMidVertical: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2260%22%20viewBox%3D%220%200%2030%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20d%3D%22M-28%200H58L60%202V58L58%2060H-28L-30%2058V2Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20d%3D%22M-27%202H57L58%203V57L57%2058H-27L-28%2057V3Z%22%2F%3E%3Cpath%20fill%3D%22%23747474%22%20d%3D%22M-24%205H54L55%206V54L54%2055H-24L-25%2054V6Z%22%2F%3E%3C%2Fsvg%3E");
  --ui-frame-OpenLevel: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%20viewBox%3D%220%200%20140%20140%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%232f2f2f%22%20fill-rule%3D%22evenodd%22%20d%3D%22M2%200H138L140%202V138L138%20140H2L0%20138V2ZM5%205H135L135%205V135L135%20135H5L5%20135V5Z%22%2F%3E%3Cpath%20fill%3D%22%23575757%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3%202H137L138%203V137L137%20138H3L2%20137V3ZM5%205H135L135%205V135L135%20135H5L5%20135V5Z%22%2F%3E%3C%2Fsvg%3E");
}

#canvasContainer {
    position: relative;
    height: 100vh;
}

#gameCanvas {

    position: absolute;
    top: 0;
    left: 0;

}

#pause-btn {
    position: absolute;
    top: 10px;
    left: 3px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    display: none; /* Initially hidden */
}

@font-face {
    font-family: 'Munro';
    src: url('../assets/fonts/munro.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MunroSmall';
    src: url('../assets/fonts/munro_small.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MunroNarrow';
    src: url('../assets/fonts/munro_narrow.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face { font-family: HartlandRegular; src: url('../assets/fonts/hartland_regular.ttf'); }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: #000; color: #fff; font-family: Munro, monospace; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Even a prevented Tab changes browser keyboard-focus styling. */
:focus-visible { outline: none; }
button:disabled { opacity: .3; cursor: default; }
button img, canvas, img { image-rendering: pixelated; }
[hidden] { display: none !important; }
#canvasContainer { position: fixed; top: 50%; left: 50%; width: 1136px; height: 640px; transform-origin: center; overflow: hidden; }
/* Native menu labels do not support selection or long-press text callouts. */
#canvasContainer, #canvasContainer * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#canvasContainer img { -webkit-user-drag: none; }
#canvasContainer :is(button, a, summary, input[type='checkbox'], input[type='radio']):focus-visible { outline: none; }
/* Keep actual text-entry fields editable in the existing editor. */
#canvasContainer input:not([type='checkbox']):not([type='radio']), #canvasContainer textarea, #canvasContainer [contenteditable='true'] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
#gameCanvas { width: 100%; height: 100%; outline: none; }
.rescue-next { position: absolute; inset: 0; z-index: 11; width: 100%; height: 100%; padding: 0; touch-action: none; background: transparent; }
#menu-root { position: absolute; inset: 0 auto auto 0; width: 568px; height: 320px; transform: scale(2); transform-origin: top left; z-index: 20; }
/* HomeScreen.m adds Start, confirmation and pack controls directly over the
   movie. Only the Credits scroll view has a full-screen, 50% black backing. */
#menu-root:is(.credits-menu, .opening, .level-editor)::before { content: ''; position: absolute; inset: calc(-1 * var(--extra-y, 0px)) calc(-1 * var(--extra-x, 0px)); background: #000; z-index: -1; pointer-events: none; }
#menu-root.credits-menu::before { background: rgb(0 0 0 / 50%); }
.game-title { position: absolute; left: 76px; top: 27px; width: 336px; font: 80px/1 MunroNarrow, monospace; margin: 0; font-weight: normal; white-space: nowrap; }
/* The browser's 80px line box places the i-dot higher than UIKit's label. */
/* Mask the sliver of the dot beside the tail without resizing the sprite. */
.cover-chai { position: absolute; left: 320px; top: 12px; width: 8px; height: 11px; box-shadow: 1px 0 #000; }
.title-two { position: absolute; left: 432px; top: 21px; width: 60px; height: 90px; }
.menu-button { position: absolute; display: grid; place-items: center; transform: translate(-50%, -50%); width: 120px; height: 50px; padding: 0; font: 30px/1 Munro, monospace; white-space: nowrap; isolation: isolate; }
.menu-button.wide { width: 170px; }
/* CSS background images need the same nearest-neighbor scaling as sprite imgs. */
.menu-button::after { content: ''; position: absolute; inset: 0; z-index: 1; background: url('../assets/menus/MenuFrame1.png') center/100% 100%; image-rendering: pixelated; pointer-events: none; }
.menu-button.wide::after { background-image: url('../assets/menus/MenuFrame2.png'); }
.menu-button-bands { position: absolute; inset: 4px; pointer-events: none; }
.menu-button-label { position: relative; z-index: 2; line-height: 30px; transform: translate(var(--button-label-x, 0px), var(--button-label-y, 0px)); pointer-events: none; }
.menu-heading { position: absolute; top: 13px; left: 0; width: 100%; text-align: center; font: 50px/1 Munro; font-weight: normal; margin: 0; }
/* The scenery fills the display, while edge actions stop at the safe-area
   boundary. Insets are converted to this 568 × 320 menu coordinate system. */
.back-button { position: absolute; right: calc(4px - var(--extra-x, 0px) + var(--safe-menu-right, 0px)); bottom: calc(-1 * var(--extra-y, 0px) + var(--safe-menu-bottom, 0px)); min-width: 75px; height: 44px; font: 25px Munro; text-align: right; padding-right: 6px; }
.save-note { position: absolute; bottom: 29px; width: 100%; text-align: center; font: 12px Munro; }
.new-warning { position: absolute; top: 98px; width: 100%; margin: 0; text-align: center; white-space: pre-line; font: 20px/1.3 HartlandRegular, monospace; }
.option-row { position: absolute; left: 134px; width: 300px; height: 41px; display: flex; align-items: center; font: 30px Munro; }
.option-row span { background: rgb(0 0 0 / 50%); padding: 0 5px; }
/* HomeScreen.optTapped places the 32 × 41 image at (394, 107 + 50i),
   then UIButton+ButtonExtend adds 15px horizontally and 2px vertically.
   Only this enlarged control is interactive; the native label is separate. */
.option-row input { appearance: none; -webkit-appearance: none; position: absolute; left: 245px; top: -5px; width: 62px; height: 45px; margin: 0; border: 0; padding: 0; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; image-rendering: pixelated; background: url('../assets/menus/OptionsButton.png') center/32px 41px no-repeat; }
/* HomeScreen.addCoverForOptButton hides Chai with a 2px-inset black cover,
   leaving the original OptionsButton frame intact in both states. */
.option-row input:not(:checked) {
    background: linear-gradient(#000, #000) center/28px 37px no-repeat,
        url('../assets/menus/OptionsButton.png') center/32px 41px no-repeat;
}
/* UIButton's default highlighted-image adjustment affects the art, not the label. */
.option-row input.is-pressed:not(:disabled) { filter: brightness(.5); }
.credits-menu { background: transparent; }
.credits-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior-y: none; scrollbar-width: none; outline: none; touch-action: pan-y; }
.credits-scroll::-webkit-scrollbar { display: none; }
.credit-row { position: absolute; left: 0; width: 100%; text-align: center; transform: translateY(-50%); white-space: nowrap; }
.credit-row.tester { left: 282px; width: auto; text-align: left; }
.credit-row.credit-link { left: 50%; width: max-content; max-width: 90%; transform: translate(-50%, -50%); padding: 8px; color: #c6e0ff; text-underline-offset: 3px; }
.credit-link:hover { color: #fff; }
.credits-game-catalog { position: absolute; left: 50%; display: flex; align-items: center; justify-content: center; gap: 8px; transform: translateX(-50%); }
.credits-game-link { display: block; flex: none; width: 32px; height: 32px; padding: 0; overflow: hidden; border: 1px solid #fff; border-radius: 0; background: #000; touch-action: pan-y; }
.credits-game-link img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; pointer-events: none; }
.credits-game-link:active { transform: translateY(2px); }
.credit-cats { position: absolute; right: calc(100% + 4px); top: 7px; display: flex; gap: 4px; }
.credit-cats img { width: 8px; height: 11px; }
.credits-secret { position: absolute; left: 216px; width: 136px; height: 68px; padding: 0; overflow: hidden; cursor: default; }
.credits-secret img { position: absolute; left: 0; top: 0; width: 136px; height: 187px; }
/* secretLvl presents a UIKit alert over the existing, scrolled Credits. Use
   the same system-alert treatment as the native editor introduction. */
.secret-overlay { position: absolute; inset: calc(-1 * var(--extra-y, 0px)) calc(-1 * var(--extra-x, 0px)); z-index: 70; display: grid; place-items: center; background: rgb(0 0 0 / 40%); touch-action: none; }
.secret-alert { width: 270px; overflow: hidden; border-radius: 12px; background: #f7f7f7f5; color: #000; text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.secret-alert h1 { margin: 18px 16px 7px; font: 600 17px/21px -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.secret-alert p { margin: 0 16px 20px; font: 13px/16px -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.secret-actions { display: flex; border-top: .5px solid #b9b9bb; }
.secret-actions button { width: 50%; height: 44px; padding: 0; color: #007aff; font: 400 17px/44px -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.secret-actions button:first-child { font-weight: 600; border-right: .5px solid #b9b9bb; }
.secret-actions button:active { background: #ddd; }
.pack-row { position: absolute; left: 27px; right: 27px; top: 89px; display: flex; gap: 20px; }
.pack-card { position: relative; flex-shrink: 0; width: 158px; height: 158px; background: url('../assets/menus/PackFrame.png') center/100%; padding: 4px; text-align: left; }
.pack-card canvas { width: 150px; height: 150px; }
/* LevelPackLoader.m uses separate label frames for the two-row Easy card
   and the single-row minigames, in the original 158 × 158 card coordinates. */
.pack-name { position: absolute; left: 50%; top: 22px; width: max-content; transform: translate(-50%, -50%); font: 25px/1 MunroSmall; text-align: center; white-space: nowrap; background: rgb(0 0 0 / 50%); }
.pack-score { position: absolute; left: 7px; top: 106px; background: rgb(0 0 0 / 50%); font: 17px Munro; white-space: pre; }
.pack-score.minigame-score { top: 122px; font-size: 20px; }
.pack-chais { position: absolute; left: 19px; top: 128px; width: 50px; height: 20px; background: rgb(0 0 0 / 50%); font: 20px/20px Munro; text-align: center; white-space: pre; }
.center-message { position: absolute; top: 90px; left: 40px; right: 40px; text-align: center; white-space: pre-line; font: 25px/1.3 Munro; }
.screen-transition { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 100; touch-action: none; }
/* CreateUIElements.m: (-6, -8, 42, 54), with a centered 24 × 24 image.
   Values here use the game's 2× stage; retain the source image's transparent inset. */
/* GameView adds Pause after the gameplay ScrollView, so its complete native
   hit frame must stay above the full-height movement targets. */
#pause-btn { z-index: 11; width: 84px; height: 108px; left: var(--pause-left, -12px); top: var(--pause-top, -16px); padding: 30px 18px; }
#pause-btn img { display: block; width: 100%; height: 100%; }
/* The original pause icon relies on UIButton's highlighted-image adjustment. */
#pause-btn.is-pressed:not(:disabled) img { filter: brightness(.5); }
/* Native StatusBox: 150 × 60 on phone and 180 × 80 on iPad, aligned with
   the arrow artwork. Its separate one-point strips retain the open corners. */
.game-status { --status-width: 150px; --status-height: 60px; --status-font: 25px; --status-line: 20px; position: absolute; left: 45%; bottom: 20px; width: var(--status-width); height: var(--status-height); transform-origin: bottom left; z-index: 9; pointer-events: none; }
/* Fill the extra point inside the right/bottom strips without moving the labels. */
.game-status::before { content: ''; position: absolute; inset: 0 -1px -1px 0; background: rgb(0 0 0 / 70%); }
.game-status[data-native-layout='tablet'] { --status-width: 180px; --status-height: 80px; --status-font: 30px; --status-line: 24px; }
.status-edge, .status-divider { position: absolute; display: block; }
.status-edge { background: #696969; }
.status-edge:is(.left, .right) { top: 0; width: 1px; height: calc(var(--status-height) + 1px); }
.status-edge.left { left: -1px; }
.status-edge.right { left: calc(var(--status-width) + 1px); }
.status-edge:is(.top, .bottom) { left: 0; width: calc(var(--status-width) + 1px); height: 1px; }
.status-edge.top { top: -1px; }
.status-edge.bottom { top: calc(var(--status-height) + 1px); }
.status-divider { left: 15px; top: calc(var(--status-height) / 2); width: calc(var(--status-width) - 30px); height: 1px; background: rgb(255 0 0 / 60%); }
.game-status span { position: absolute; height: var(--status-line); color: #fff; opacity: .7; font: var(--status-font)/var(--status-line) MunroSmall; text-align: center; white-space: nowrap; }
.status-level { left: 6px; top: 3px; width: 142px; }
.status-deaths { left: 8px; top: 33px; width: 138px; }
.game-status[data-native-layout='tablet'] .status-level { left: 7px; top: 7px; width: 171px; }
.game-status[data-native-layout='tablet'] .status-deaths { left: 10px; top: 46px; width: 166px; }
#score-hud { position: absolute; inset: 0; text-align: center; pointer-events: none; }
.score-value { position: absolute; left: 50%; top: 80px; transform: translate(-50%, -50%); font: 100px/1 Munro; }
#score-hud[data-mode="mini2"] .score-value { left: calc(50% + 416px); top: calc(50% - 107px); }
.score-best { position: absolute; top: max(6px, var(--safe-canvas-top, 0px)); right: max(10px, var(--safe-canvas-right, 0px)); font: 40px/1 MunroSmall; }
.score-notice { position: absolute; top: 240px; left: 0; width: 100%; font: 80px/1 MunroSmall; text-shadow: 2px 2px #000; }
#score-hud[data-mode="mini1"] .score-notice { top: 260px; }
/* Keep LoC2's arrow sizes and match LoC1's compact Left/Right spacing:
   20px on phones, 40px on tablets, or the smaller native-stage gap.
   Left stays at 44 points and Jump at 35 from the right/bottom, plus 60%
   of each side safe inset. The movement boundary follows the midpoint
   between the arrow centers; side-edge pixels stay active.
   PNG translucency is already baked into the original artwork. */
#touch-controls { position: absolute; inset: 0; z-index: 10; pointer-events: none; --control-scale: 1; --control-position-scale: var(--control-scale); --control-top-offset: 0px; --control-bottom-offset: 0px; --arrow-scale: var(--control-scale); --movement-arrow-gap: calc(14px * var(--control-position-scale)); --movement-half-step: calc((60px * var(--arrow-scale) + var(--movement-arrow-gap)) / 2); --movement-boundary: calc(.6 * var(--safe-left) + 44px * var(--control-position-scale) + var(--movement-half-step)); }
#touch-controls[data-native-layout='phone'][data-input-layout='touch'] { --arrow-scale: 1; --movement-arrow-gap: min(20px, calc(74px * var(--control-position-scale) - min(60px, 60px * var(--control-position-scale)))); }
#touch-controls[data-native-layout='tablet'] { --arrow-scale: 1.3333333333; }
#touch-controls[data-native-layout='tablet'][data-input-layout='touch'] { --movement-arrow-gap: min(40px, calc(74px * var(--control-position-scale) - min(80px, 60px * var(--control-position-scale)))); }
#touch-controls, #touch-controls * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#touch-controls :is(.horizontal-control-safe-strip, .jump-control-safe-strip) { position: absolute; top: 0; bottom: 0; width: 50%; pointer-events: none; }
#touch-controls .horizontal-control-safe-strip { left: 0; }
#touch-controls .jump-control-safe-strip { right: 0; }
#touch-controls button { position: absolute; padding: 0; overflow: visible; opacity: 1; pointer-events: auto; touch-action: none; cursor: default; background: transparent; }
#touch-controls button:focus-visible { outline: none; }
#touch-controls img { position: absolute; z-index: 1; display: block; width: calc(60px * var(--arrow-scale)); height: calc(60px * var(--arrow-scale)); bottom: max(0px, calc(var(--control-bottom-offset) + 35px * var(--control-position-scale) - 30px * var(--arrow-scale))); opacity: 1; filter: none; pointer-events: auto; -webkit-user-drag: none; }
#touch-controls .control-left { top: calc(var(--control-top-offset) + 40px * var(--control-position-scale)); bottom: 0; left: 0; width: var(--movement-boundary); }
#touch-controls .control-left-safe { top: 0; left: 0; width: var(--safe-left); height: calc(var(--control-top-offset) + 40px * var(--control-position-scale)); }
#touch-controls .control-left img { left: calc(.6 * var(--safe-left) + 44px * var(--control-position-scale) - 30px * var(--arrow-scale)); }
#touch-controls .control-right { inset: 0 auto 0 var(--movement-boundary); width: calc(186px * var(--control-position-scale) - var(--movement-half-step)); }
#touch-controls .control-right img { left: calc(var(--movement-arrow-gap) / 2); }
#touch-controls .control-jump { inset: 0 0 0 auto; width: calc(.6 * var(--safe-right) + 150px * var(--control-position-scale)); }
#touch-controls .control-jump img { right: calc(.6 * var(--safe-right) + 35px * var(--control-position-scale) - 30px * var(--arrow-scale)); }
.opening { background: #000; }
.opening button { touch-action: pan-x pan-y; }
.opening canvas { position: absolute; inset: 0; width: 568px; height: 320px; }
.scene-dialogue { position: absolute; transform: translate(-50%, -50%); color: #fff; text-align: center; font-family: Munro; pointer-events: none; }
/* SpeechBox.m draws four separate 1pt strips, leaving the corner pixels open.
   Its bottom strip sits just below the view's frame, at y = height. */
.scene-dialogue::before { content: ''; position: absolute; inset: 1px 0 0 1px; background: rgb(0 0 0 / 70%); }
.scene-dialogue::after { content: ''; position: absolute; inset: 0 0 -1px; background:
    linear-gradient(var(--speech-color), var(--speech-color)) 1px 0/calc(100% - 2px) 1px no-repeat,
    linear-gradient(var(--speech-color), var(--speech-color)) 1px 100%/calc(100% - 2px) 1px no-repeat,
    linear-gradient(var(--speech-color), var(--speech-color)) 0 1px/1px calc(100% - 2px) no-repeat,
    linear-gradient(var(--speech-color), var(--speech-color)) 100% 1px/1px calc(100% - 2px) no-repeat;
}
.scene-dialogue-label { position: absolute; top: 6px; display: flex; flex-direction: column; justify-content: center; }
.scene-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.scene-next { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-final { position: absolute; left: 40px; right: 40px; top: 50%; transform: translateY(-50%); margin: 0; text-align: center; font: 30px/34px MunroSmall; pointer-events: none; }
.pack-chais img { position: absolute; left: -5px; top: 5px; width: 8px; height: 11px; }

/* PauseView.m keeps a 450 × 290 point panel while the newer phone window grows
   to 667 × 375. The web menu coordinate plane stays at the older 568 × 320
   size, so present the complete native layout at 85% to retain that later-phone
   footprint without changing any of its internal coordinates. */
.game-paused .game-text { visibility: hidden; }
.pause-panel { position: absolute; left: 59px; top: 15px; width: 450px; height: 290px; transform: scale(.85); transform-origin: center; background: var(--ui-frame-PauseView) center/100% 100%; }
.pause-heading { position: absolute; top: 15px; left: 0; width: 100%; margin: 0; font: 40px/1 Munro; text-align: center; font-weight: normal; }
.pause-divider { position: absolute; left: 50px; top: 217px; width: 350px; height: 1px; background: #ff0000cc; }
.pause-actions { position: absolute; left: 20px; bottom: 20px; display: grid; grid-template-columns: 100px 184px 100px; gap: 13px; }
/* Keep native artwork and horizontal alignment; MenuButtonLabels accounts for
   the browser's font baseline instead of copying UIKit's line-box offset. */
.pause-button { display: grid; place-items: center; width: 100px; height: 40px; padding: 0; font: 30px/1 MunroSmall; text-indent: 1px; background: var(--ui-frame-PauseViewButton) center/100% 100%; white-space: nowrap; }
.pause-button-label { line-height: 30px; transform: translateY(var(--button-label-y, 0px)); pointer-events: none; }
.pause-button.wide { width: 184px; background-image: var(--ui-frame-PauseViewButtonLarge); }
.pause-button.is-pressed:not(:disabled) { background-image: var(--ui-frame-PauseButtonTapped); }
.pause-button.wide.is-pressed:not(:disabled) { background-image: var(--ui-frame-PauseButtonTappedLarge); }
.pause-button:disabled { opacity: 1; }
.pause-stats { position: absolute; left: 0; width: 100%; text-align: center; font: 30px/40px Munro; white-space: pre-line; margin: 0; }
.minigame-pause-stats { top: 90px; }
.easy-pause-chais { position: absolute; left: 183px; top: 100px; height: 20px; display: flex; align-items: flex-start; gap: 4px; }
.easy-pause-chais img { width: 8px; height: 11px; }
.easy-pause-chais span { position: relative; top: -9px; width: 53px; line-height: 30px; text-align: right; }
.pause-deaths { position: absolute; top: 130px; width: 100%; margin: 0; }
.pause-icon { position: absolute; padding: 0; width: 40px; height: 40px; }
.objectives-button { right: 12px; top: 17px; }
.objectives-frame { display: inline-block; position: relative; width: 30px; height: 40px; background: var(--ui-frame-ObjectivesButton) center/100% 100%; }
.objectives-frame img { position: absolute; left: 7px; top: 9px; width: 16px; height: 22px; }
.pause-close { top: 10px; right: 10px; display: grid; place-items: center; }
/* PauseView.m centers the original 20pt Cancel image in a 40pt button. */
.pause-close img { width: 20px; height: 20px; }
.pause-keys, .pause-chais { position: absolute; height: 20px; font: 20px/20px Munro; }
.pause-keys { left: 0; }
.pause-keys > * { position: absolute; }
.pause-keys img { left: 32px; width: 20px; height: 20px; }
/* Balance the visible digit between the inner panel wall and the key artwork. */
.pause-keys .keys-held { left: 10px; width: 28px; text-align: center; }
.pause-keys .keys-found { left: 56px; width: 72px; text-align: center; font: 15px/20px MunroSmall; }
.pause-chais { left: 324px; }
/* Anchor the native image frame to its row; inline baseline alignment adds 6px. */
.pause-chais img { position: absolute; left: 0; top: 0; width: 8px; height: 11px; }
.pause-chais span { position: absolute; top: -5px; left: 8px; width: 50px; text-align: right; }
.pause-inventory .unfound { opacity: .25; }
.pause-inventory { position: absolute; inset: 0; }
.pause-mittens { position: absolute; left: 185px; top: 68px; width: 80px; height: 110px; outline: 1px solid black; }
.mittens-tally { position: absolute; left: 189px; top: 186px; width: 72px; height: 25px; }
/* Keep the count centered and let the square follow its actual text width. */
.mittens-flash { position: absolute; top: 10px; right: calc(100% + 7px); width: 10px; height: 10px; background: url('../assets/chais/mittens/pixels/MittensPiece2.png') center/100%; image-rendering: pixelated; }
.mittens-count { position: absolute; left: 45px; top: -5px; width: max-content; transform: translateX(-50%); font: 25px/25px MunroSmall; text-align: center; }
.mittens-flash.animated { animation: mittens-flash .5s step-end infinite; }
@keyframes mittens-flash {
    0%, 100% { background-image: url('../assets/chais/mittens/pixels/MittensPiece1.png'); }
    25% { background-image: url('../assets/chais/mittens/pixels/MittensPiece2.png'); }
    50% { background-image: url('../assets/chais/mittens/pixels/MittensPiece3.png'); }
    75% { background-image: url('../assets/chais/mittens/pixels/MittensPiece4.png'); }
}
/* Match the objectives artwork's 17pt corner inset, allowing for the
   keyboard's 8pt vertical padding inside its 40pt touch target. */
.pause-keyboard { position: absolute; top: 9px; left: 17px; z-index: 2; }
.pause-keyboard summary { width: 50px; height: 40px; display: flex; align-items: center; gap: 3px; cursor: pointer; list-style: none; }
.pause-keyboard summary::-webkit-details-marker { display: none; }
.pause-keyboard summary img { width: 34px; height: 24px; }
.keyboard-chevron { font: 14px Munro; }
.pause-keyboard[open] .keyboard-chevron { transform: rotate(180deg); }
.keyboard-dropdown { position: absolute; top: 43px; left: 0; width: 276px; padding: 6px 10px; border: 2px solid #444; box-shadow: inset 0 0 0 1px #aaa, 3px 3px #0005; background: #626262; }
.keyboard-dropdown h2 { margin: 0 0 2px; font: 20px/20px Munro; font-weight: normal; }
.binding-row { display: flex; align-items: center; justify-content: space-between; height: 26px; font: 20px/1 Munro; }
.binding-button { width: 116px; height: 25px; border: 1px solid #aaa; background: #444; font: 17px/1 MunroSmall; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.binding-button.waiting { border-color: #fff680; color: #fff680; }
.binding-help { margin: 3px 0; min-height: 24px; font: 12px/12px Munro; }
.binding-defaults { padding: 1px 0; font: 14px/14px Munro; text-decoration: underline; }
.objective-grid { position: absolute; left: 20px; top: 90px; display: grid; grid-template-rows: repeat(3, 40px); grid-template-columns: 100px 184px 100px; grid-auto-flow: column; column-gap: 13px; row-gap: 30px; }
.objective-card { position: relative; background: var(--ui-frame-PauseViewButton) center/100% 100%; }
.objective-card.wide { background-image: var(--ui-frame-PauseViewButtonLarge); }
/* PauseView.m fixes icons at x=15 (and 115 in the middle column), then
   centers each number between the icon's right edge and its category bound.
   All labels use MunroSmall 30pt, centered at y=17.5 after CGRectIntegral. */
.objective-target { position: absolute; inset: 0; font: 30px/35px MunroSmall; white-space: nowrap; }
.objective-card.wide .objective-target:first-child { right: 69px; }
.objective-card.wide .objective-target:nth-child(2) { left: 100px; }
.objective-target > img, .objective-death { position: absolute; left: 15px; top: 15px; width: 8px; height: 11px; }
.objective-target > span:last-child { position: absolute; left: 23px; right: 0; top: 0; text-align: center; }
.objective-trophy { position: absolute; width: 16px; height: 22px; top: -22px; left: calc(50% - 8px); }
.objective-death { background: url('../assets/chais/luke/LukeLeft1.png') center/100%; image-rendering: pixelated; animation: objective-death .7s step-end infinite; }
@keyframes objective-death {
    0%, 100% { background-image: url('../assets/chais/luke/LukeLeft1.png'); }
    14% { background-image: url('../assets/chais/luke/LukeLeftDie1.png'); }
    28% { background-image: url('../assets/chais/luke/LukeLeftDie2.png'); }
    42% { background-image: url('../assets/chais/luke/LukeLeftDie3.png'); }
    57% { background-image: url('../assets/chais/luke/LukeLeftDie4.png'); }
    71% { background-image: url('../assets/chais/luke/LukeLeftDie5.png'); }
    85% { background-image: url('../assets/chais/luke/LukeLeftDie6.png'); }
}

/* Native editor geometry: 90px palette, 60px bottom bar, 20px world tiles. */
.level-editor { background: #000; font: 15px/1.15 Munro, monospace; user-select: none; }
.editor-canvas { position: absolute; left: 93px; top: 0; width: 475px; height: 257px; touch-action: none; cursor: crosshair; }
.editor-canvas.panning { cursor: grabbing; }
/* Keep the sidebar's bottom aligned with the raised bottom bar on inset screens. */
.editor-sidebar { position: absolute; z-index: 1; left: 3px; top: calc(3px + var(--safe-menu-top, 0px)); width: 90px; height: calc(254px - var(--safe-menu-top, 0px) - var(--safe-menu-bottom, 0px)); border-radius: 4px; overflow: hidden; background: var(--ui-frame-BarTop) top/90px 50px no-repeat, var(--ui-frame-BarBottom) bottom/90px 50px no-repeat, var(--ui-frame-BarMidSection) center/90px 100% no-repeat; }
/* Native scroll views sit 10px inside the artwork; its 3px origin is already on .editor-sidebar. */
.editor-palette { position: absolute; inset: 10px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; }
.editor-palette::-webkit-scrollbar { display: none; }
.editor-palette h2 { font: 20px/23px MunroSmall; text-align: center; margin: 0; font-weight: normal; white-space: pre-line; }
/* SideBar.m centers every Objects entry at 20 + 55 * index, including
   headings and Delete. Keep the final 15px of native scroll clearance. */
.editor-palette[data-tab='Objects'] { display: flex; flex-direction: column; gap: 15px; padding-bottom: 15px; }
.editor-palette[data-tab='Objects'] > h2 { display: grid; place-items: center; flex: none; height: 40px; }
.editor-movement-tools { position: relative; height: 288px; }
.editor-movement-tools h2 { position: absolute; left: 35px; top: 20px; transform: translate(-50%, -50%); margin: 0; font: 20px/23px MunroSmall; }
.editor-movement-tools .editor-object { position: absolute; left: 15px; top: 40px; width: 40px; min-height: 40px; padding: 0; margin: 0; }
.editor-movement-tools .editor-movement { position: absolute; margin: 0; }
.editor-object { display: block; position: relative; flex: none; width: 62px; height: 40px; min-height: 40px; margin: 0 auto; padding: 0 11px; }
.editor-object img { display: block; width: 40px; height: 40px; }
.editor-object[aria-label='Spawn point'] img { width: 24px; height: 33px; margin: 3.5px 8px; }
.editor-object[aria-pressed='true']::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 22px; background: url('../assets/chais/luke/LukeLeft1.png') center/100% 100% no-repeat; image-rendering: pixelated; pointer-events: none; }
/* Match the thin iOS X, using the native 60pt label in a 40pt target. */
.editor-delete { display: block; width: 40px; height: 40px; overflow: hidden; color: #f00; font: 300 60px/40px "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* SideBar.m overlaps the frame and raises only the selected bookmark above it. */
.editor-tabs { position: absolute; left: 85px; top: calc(16px + var(--safe-menu-top, 0px)); display: grid; gap: 7px; }
.editor-tab { position: relative; z-index: 0; width: 60px; height: 18px; padding: 0; text-align: right; font: 10px/1 MunroSmall; background: var(--ui-frame-SmallTab) center/100% 100%; color: #fff; }
.editor-tab .editor-button-label { inset: 0 5px 2px 0; transform: none; display: flex; align-items: center; justify-content: flex-end; }
.editor-tab[aria-pressed='true'] { z-index: 2; }
/* A single stretched middle strip avoids fractional-scale seams between tiles;
   clipping also keeps it out of the native end caps' rounded outer corners. */
.editor-bottom { position: absolute; left: 93px; top: 257px; width: 472px; height: 60px; overflow: hidden; border-radius: 4px; transform: translateY(calc(-1 * var(--safe-menu-bottom, 0px))); background: var(--ui-frame-BarLeft) left/50px 60px no-repeat, var(--ui-frame-BarRight) right/50px 60px no-repeat, var(--ui-frame-BarMidVertical) center/100% 60px no-repeat; }
/* Preserve CreateUIElements' horizontal placement. MenuButtonLabels centers
   MunroSmall's uppercase glyphs using the browser's actual text baseline. */
.editor-button { position: relative; width: 85px; height: 35px; font: 30px/34px MunroSmall; padding: 0; background: var(--ui-frame-Button85x35) center/100% 100%; color: #fff; }
/* LevelEditorInitializer.m: centers 55 + (91.25 + 88/3) * index,
   with integer division, then CreateUIElements.m's CGRectIntegral rounding. */
.editor-bottom > .editor-button { position: absolute; top: 12px; width: 86px; height: 36px; }
.editor-bottom > .editor-button:nth-child(1) { left: 12px; }
.editor-bottom > .editor-button:nth-child(2) { left: 132px; }
.editor-bottom > .editor-button:nth-child(3) { left: 253px; width: 85px; }
.editor-bottom > .editor-button:nth-child(4) { left: 373px; }
.editor-button-label { position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% + 1px), calc(-50% + var(--button-label-y, 0px))); white-space: nowrap; pointer-events: none; }
.editor-button.is-pressed:not(:disabled) { background-image: var(--ui-frame-Button85x35Highlighted); }
.editor-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 7px; font: 27px/1 Munro; }
.editor-icon img { width: 26px; height: 26px; }
.editor-pan { position: absolute; left: 3px; top: 258px; width: 90px; height: 60px; transform: translateY(calc(-1 * var(--safe-menu-bottom, 0px))); touch-action: none; flex-direction: column; }
.editor-pan img { width: 50px; height: 50px; }
#menu-root[data-input-layout='desktop'] .editor-pan { display: none; }
/* LevelEditor.moveZoomsToRight: 40px targets centered at x=508/543,
   with Help centered beneath Zoom In at y=60. Undo/Redo are web additions;
   keep their original plain arrow treatment to the left. */
/* Installed apps use the full screen edge, rather than adding the centered
   menu's side margin to the iOS safe inset. Move the whole toolbar together. */
.is-installed-app .level-editor { --editor-toolbar-edge-offset: var(--extra-x, 0px); }
.editor-toolbar { position: absolute; right: calc(5px + var(--safe-menu-right, 0px) - var(--editor-toolbar-edge-offset, 0px)); top: calc(5px + var(--safe-menu-top, 0px)); width: 150px; height: 75px; background: none; }
.editor-toolbar .editor-icon { position: absolute; opacity: .65; }
.editor-toolbar .editor-undo { left: 0; top: 5px; }
.editor-toolbar .editor-redo { left: 35px; top: 5px; }
.editor-toolbar .editor-zoom-out { left: 75px; top: 0; }
.editor-toolbar .editor-zoom-in { left: 110px; top: 0; }
.editor-toolbar .editor-help-trigger { left: 110px; top: 35px; }
.editor-toolbar .editor-history { width: 30px; height: 30px; padding: 2px; opacity: .8; }
.editor-toolbar .editor-icon:disabled { opacity: .2; }
.editor-movement { display: block; position: relative; width: 70px; height: 25px; font: 15px/17px MunroSmall; padding: 0; margin: 8px auto; background: var(--ui-frame-MovementButton) center/100% 100%; }
.editor-movement.is-pressed:not(:disabled) { background-image: var(--ui-frame-MovementButtonHighlighted); }
.editor-small { border: 1px solid #888; border-radius: 1px; padding: 4px 6px; margin: 3px; font: 12px/1.2 Munro; background: #292929; color: #fff; min-height: 23px; }
.editor-palette .editor-small { width: 70px; padding: 4px 1px; margin: 5px auto; font-size: 10px; }
/* Passive notices stay above the inset action bar and let every touch through. */
.editor-toast { position: absolute; z-index: 35; left: 330.5px; bottom: calc(76px + var(--safe-menu-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 9px; width: max-content; max-width: 410px; padding: 9px 12px; border: 1px solid #69695f; border-left: 3px solid #d8bd72; border-radius: 3px; background: linear-gradient(#292b26, #1c1e1a); box-shadow: inset 0 1px #ffffff12, 0 3px 8px #0008; color: #f4f3ec; text-align: left; font: 15px/1.35 Munro; pointer-events: none; }
.editor-toast-icon { flex: none; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #d8bd72; border-radius: 2px; color: #e7cc80; font: 16px/1 Munro; }
.editor-toast-glyph { display: block; transform: translateX(1px); }
.editor-toast-text { min-width: 0; overflow-wrap: anywhere; }
.editor-overlay { position: absolute; inset: 0; background: #0007; z-index: 40; }
.editor-dialog { position: absolute; left: 59px; top: 15px; width: 450px; height: 290px; background: var(--ui-frame-PauseView) center/100% 100%; color: #111; }

/* HelpView.m: the title scrolls with native labels inside a 350 × 250 viewport. */
.editor-help-overlay { z-index: 60; background: none; }
.editor-help-body { position: absolute; inset: 20px 50px; display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; }
.editor-help-body::-webkit-scrollbar { display: none; }
.editor-help-dialog .editor-help-label { flex: none; margin: 0; padding: 0; font-weight: normal; white-space: pre-wrap; }
.editor-help-close { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; }
.editor-help-close img { width: 20px; height: 20px; }

/* Native movement panels occupy 200 × 300 at the right; the level remains interactive. */
.editor-configuring > :is(.editor-sidebar,.editor-tabs,.editor-bottom,.editor-pan,.editor-toast) { display: none; }
.editor-configuring .editor-toolbar { left: calc(5px + var(--safe-menu-left, 0px)); top: calc(5px + var(--safe-menu-top, 0px)); right: auto; width: 75px; height: 75px; z-index: 35; }
.editor-configuring .editor-toolbar .editor-history { display: none; }
.editor-configuring .editor-toolbar .editor-icon { position: absolute; opacity: 1; }
.editor-configuring .editor-toolbar .editor-zoom-out { left: 0; top: 0; }
.editor-configuring .editor-toolbar .editor-zoom-in { left: 35px; top: 0; }
.editor-configuring .editor-toolbar .editor-help-trigger { left: 0; top: 35px; }
.editor-configuring.editor-nudging .editor-toolbar { left: auto; right: calc(5px + var(--safe-menu-right, 0px) - var(--editor-toolbar-edge-offset, 0px)); }
.editor-configuring.editor-nudging .editor-toolbar .editor-help-trigger { left: 35px; }
.editor-flow-layer { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.editor-flow-panel { position: absolute; left: 358px; top: 10px; width: 200px; height: 300px; background: var(--ui-frame-LargePanel) center/100% 100%; pointer-events: auto; color: #000; }
.editor-flow-heading { position: absolute; left: 0; top: 10px; width: 200px; margin: 0; text-align: center; color: #fff; font: 35px/40px MunroSmall; }
.editor-flow-description { position: absolute; left: 20px; top: 55px; width: 160px; margin: 0; font: 17px/19px Munro; white-space: pre-wrap; }
.editor-flow-short-description { font-size: 13px; line-height: 15px; }
.editor-flow-icon { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; touch-action: none; }
.editor-flow-icon img { width: 100%; height: 100%; object-fit: contain; }
.editor-flow-icon.is-pressed:not(:disabled) { filter: brightness(.5); }
.editor-flow-icon:disabled { opacity: .2; }
.editor-flow-cancel { left: 53px; top: 240px; width: 40px; height: 40px; }
.editor-flow-accept { left: 107px; top: 240px; width: 40px; height: 40px; }
.editor-flow-text { position: absolute; color: #000; font: 17px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 12px 10px; height: 44px; width: 100px; }
.editor-flow-refine { left: 50px; top: 186px; }
.editor-flow-refine-alternate { left: 0; top: 191px; }
.editor-flow-another { left: 95px; top: 191px; }
.editor-flow-rate { position: absolute; left: 99px; transform: translate(-50%, -50%); font: 17px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* UISlider: thin blue/gray track and a white thumb, independent of browser theme. */
.editor-flow-slider { position: absolute; left: 20px; width: 160px; height: 20px; margin: 0; padding: 0; appearance: none; background: transparent; touch-action: none; }
.editor-flow-slider::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: linear-gradient(to right, #007aff var(--fill), #b7b7b7 var(--fill)); }
.editor-flow-slider::-moz-range-track { height: 2px; border-radius: 1px; background: #b7b7b7; }
.editor-flow-slider::-moz-range-progress { height: 2px; background: #007aff; }
.editor-flow-slider::-webkit-slider-thumb { appearance: none; width: 28px; height: 28px; margin-top: -13px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0005; }
.editor-flow-slider::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0005; }
.editor-flow-image { position: absolute; width: 30px; height: 30px; padding: 5px; }
.editor-flow-image img { display: block; width: 20px; height: 20px; }
.editor-flow-image[aria-pressed='true'], .editor-flow-image.is-pressed { background: url('../assets/editor/SelectOutline.png') center/100% 100%; }
.editor-refine-controller { position: absolute; left: 10px; top: 110px; width: 130px; height: 200px; background: var(--ui-frame-NudgeController) top/130px 155px no-repeat; pointer-events: auto; }
.editor-stretch-controller { left: 428px; height: 155px; }
.editor-refine-controller h2 { position: absolute; top: 6px; left: 0; width: 100%; margin: 0; text-align: center; color: #fff; font: 25px/28px MunroSmall; }
.editor-refine-controller > .editor-flow-icon img { width: 30px; height: 30px; }
.editor-refine-status { position: absolute; top: 160px; width: 130px; height: 40px; background: var(--ui-frame-StatusBar) center/100% 100%; }
.editor-refine-status output { position: absolute; left: 10px; top: 10px; font: 15px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000; }
.editor-refine-status .editor-flow-icon { top: 5px; width: 30px; height: 30px; }
.editor-refine-status .editor-flow-icon img { width: 20px; height: 20px; }
.editor-refine-cancel { left: 65px; }
.editor-refine-accept { left: 95px; }
.editor-flow-list { position: absolute; left: 10px; top: 10px; width: 180px; height: 250px; overflow-y: auto; scrollbar-width: none; padding: 10px 10px 0; }
.editor-flow-row { position: relative; height: 35px; }
.editor-flow-view { position: absolute; inset: 0 0 auto; height: 30px; padding: 5px; color: #000; text-align: left; font: 20px/20px Munro; }
.editor-flow-view[aria-pressed='true'] { background: url('../assets/editor/EditSelectOutline.png') center/160px 30px; }
.editor-flow-gear { top: 5px; right: 35px; width: 20px; height: 20px; }
.editor-flow-delete { top: 5px; right: 5px; width: 20px; height: 20px; }
.editor-flow-done { position: absolute; left: 165px; top: 277px; transform: translate(-50%, -50%); padding: 0; color: #fff; font: 25px/28px MunroSmall; }

/* SettingsView/OpenView hide all of the editor behind the 450 × 290 panel. */
.editor-modal-open > :not(.editor-native-overlay,.editor-intro-overlay) { visibility: hidden; }
.editor-native-overlay { background: #000; }
.editor-native-label { position: absolute; transform: translate(-50%, -50%); margin: 0; padding: 0; text-align: center; white-space: nowrap; font-family: Munro; font-weight: normal; color: #000; }
.editor-settings-scroll { position: absolute; left: 30px; top: 20px; width: 390px; height: 250px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; }
.editor-settings-scroll::-webkit-scrollbar, .editor-open-scroll::-webkit-scrollbar { display: none; }
.editor-settings-content { position: relative; height: 250px; }
.editor-settings-name { position: absolute; left: 120px; top: 17.5px; width: 150px; height: 25px; padding: 0 4px; border: 1px solid #ccc; border-radius: 5px; outline: none; color: #000; background: #fff; text-align: center; font: 25px/25px MunroSmall; }
.editor-settings-close { left: 394px; top: 4px; width: 52px; height: 52px; }
.editor-settings-close img { width: 20px; height: 20px; }
.editor-settings-color { position: absolute; top: 130px; width: 40px; height: 40px; padding: 0; opacity: .3; }
.editor-settings-color img { display: block; width: 40px; height: 40px; }
.editor-settings-color[aria-pressed='true'] { opacity: 1; }
.editor-open-title, .editor-open-confirmation { color: #fff; }
.editor-open-scroll { position: absolute; left: 30px; top: 75px; width: 390px; height: 140px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-x; }
.editor-open-strip { height: 140px; display: flex; justify-content: center; gap: 10px; }
.editor-open-card { position: relative; flex: none; width: 140px; height: 140px; padding: 5px; background: var(--ui-frame-OpenLevel) center/140px 140px no-repeat; touch-action: pan-x; }
.editor-open-preview { position: relative; width: 130px; height: 130px; overflow: hidden; background: #000; }
.editor-open-preview canvas { display: block; width: 130px; height: 130px; }
.editor-open-name { font-family: MunroSmall; color: #fff; background: #0008; }
.editor-open-action { position: absolute; top: 230px; width: 184px; height: 40px; padding: 0; color: #fff; background: var(--ui-frame-PauseViewButtonLarge) center/100% 100%; }
.editor-open-action .editor-button-label { font: 30px/34px MunroSmall; }
.editor-open-action.is-pressed:not(:disabled) { background-image: var(--ui-frame-PauseButtonTappedLarge); }
.editor-open-action:disabled { opacity: .3; }
.editor-open-confirmation { white-space: pre; }
/* Web sharing reuses the native panel and large action buttons. */
.editor-share-title { color: #fff; }
.editor-share-description { position: absolute; left: 30px; top: 68px; width: 390px; margin: 0; color: #000; text-align: center; white-space: pre-line; font: 17px/20px Munro; }
.editor-share-text { position: absolute; left: 30px; top: 115px; width: 390px; height: 88px; padding: 7px; resize: none; border: 2px solid #444; border-radius: 0; background: #ddd; color: #111; font: 16px/18px Munro, monospace; overflow-wrap: anywhere; overscroll-behavior: contain; scrollbar-width: thin; }
.editor-share-text:focus { outline: 1px solid #fff; outline-offset: 1px; }
.editor-share-text[aria-invalid='true'] { border-color: #8d1818; }
.editor-share-status { position: absolute; left: 30px; top: 207px; width: 390px; margin: 0; color: #000; text-align: center; font: 12px/14px Munro; }
.editor-share-copy { left: 29.5px; }
.editor-share-load { left: 236.5px; }
/* UIAlertView is system UI in the original, rather than a pixel-art help panel. */
.editor-intro-overlay { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; background: #0006; }
.editor-intro-alert { width: 270px; overflow: hidden; border-radius: 12px; background: #f7f7f7f5; color: #000; text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.editor-intro-alert h1 { margin: 18px 16px 7px; font: 600 17px/21px -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.editor-intro-alert p { margin: 0 16px 20px; font: 13px/16px -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.editor-intro-dismiss { display: block; width: 100%; height: 44px; border-top: .5px solid #b9b9bb; color: #007aff; font: 600 17px/44px -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; padding: 0; }
.editor-intro-dismiss.is-pressed { background: #ddd; }
.editor-exit-panel .editor-flow-heading { top: 8px; white-space: pre-line; }
.editor-exit-panel .editor-flow-description { top: 95px; }
.editor-exit-refine .editor-flow-icon:disabled { opacity: .4; }

/* Shared remake guard presentation, copied from LoC1/styles.css. */
:root {
  --viewport-width: 100vw;
  --viewport-height: 100vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --rounded: "Arial Rounded MT Bold", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --system: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@supports (height: 100dvh) { :root:not(.is-installed-app) { --viewport-height: 100dvh; } }
html.is-installed-app { --viewport-width: 100vw; --viewport-height: 100vh; }
html.is-installed-app,
html.is-installed-app body {
  height: 100vh;
  min-height: 100vh;
}
#app {
  position: fixed;
  inset: var(--viewport-top, 0px) auto auto var(--viewport-left, 0px);
  width: var(--viewport-width);
  height: var(--viewport-height);
  /* viewport-fit=cover gives the game the entire display, including the
     areas behind a notch or Home indicator. Safe-area insets belong on UI,
     never on the render surface itself. */
  padding: 0;
  overflow: hidden;
}
/* Installed WebKit owns the layout viewport. Anchor the shell to every edge
   instead of sizing it from a possibly stale visual viewport. html/body keep
   the installed 100vh containing block; safe-area insets remain UI-only. */
html.is-installed-app #app {
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
}
#canvasContainer { position: absolute; }
.safe-area-probe {
  position: fixed;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}
.rotate-overlay, .resize-overlay { user-select: none; -webkit-user-select: none; touch-action: none; }
.rotate-overlay,
.resize-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: none;
  padding: max(24px, var(--safe-top)) max(24px, var(--safe-right)) max(24px, var(--safe-bottom)) max(24px, var(--safe-left));
  place-content: center;
  place-items: center;
  gap: 13px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 28%, rgba(153, 28, 39, 0.5), transparent 42%),
    #050506;
  font-family: var(--rounded);
  text-align: center;
}

.resize-overlay {
  z-index: 1001;
}

.rotate-overlay > img,
.resize-overlay > img {
  width: min(24vw, 96px);
  height: auto;
  border-radius: 22%;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

.rotate-overlay strong,
.resize-overlay strong {
  margin-top: 2px;
  font-size: clamp(22px, 8vw, 38px);
}

.rotate-overlay > span {
  color: #d3d3d8;
  font-family: var(--system);
  font-size: clamp(14px, 4.6vw, 19px);
  line-height: 1.4;
}

.browser-resize {
  display: none;
  grid-template: 50px 54px 50px / 48px 82px 48px;
  width: 178px;
  height: 154px;
  place-items: center;
  color: #ff8b94;
}

.browser-resize i {
  position: relative;
  grid-area: 2 / 2;
  display: block;
  width: 74px;
  height: 48px;
  border: 3px solid #fff;
  border-radius: 6px;
  box-shadow: inset 0 8px 0 -5px #fff;
}

.browser-resize i::before {
  position: absolute;
  top: 4px;
  left: 5px;
  width: 3px;
  height: 3px;
  content: "";
  background: #ff8b94;
  border-radius: 50%;
  box-shadow: 6px 0 #ff8b94, 12px 0 #ff8b94;
}

.resize-arrow {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  animation: resize-arrow-left 1.55s ease-in-out infinite;
}

.resize-arrow svg {
  display: block;
  width: 40px;
  height: 40px;
  overflow: visible;
}

.resize-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.resize-arrow-point-left svg {
  transform: rotate(180deg);
}

.resize-arrow-point-up svg {
  transform: rotate(-90deg);
}

.resize-arrow-point-down svg {
  transform: rotate(90deg);
}

.resize-arrow-left {
  grid-area: 2 / 1;
  animation-name: resize-arrow-right;
}

.resize-arrow-top {
  grid-area: 1 / 2;
  animation-name: resize-arrow-down;
}

.resize-arrow-right {
  grid-area: 2 / 3;
  animation-name: resize-arrow-left;
}

.resize-arrow-bottom {
  grid-area: 3 / 2;
  animation-name: resize-arrow-up;
}

.resize-copy {
  display: none;
  max-width: min(92vw, 760px);
  place-items: center;
}

.resize-copy > strong {
  display: block;
  text-wrap: balance;
}

/* Keep the browser-shape guard fully visible when a desktop window is made
   exceptionally short or narrow. The regular artwork retains its native
   dimensions; below this breakpoint every part follows the limiting viewport
   edge so the centered composition cannot be clipped. */
@media (max-height: 360px), (max-width: 360px) {
  .resize-overlay {
    padding:
      max(clamp(8px, 4vmin, 24px), var(--safe-top))
      max(clamp(8px, 4vmin, 24px), var(--safe-right))
      max(clamp(8px, 4vmin, 24px), var(--safe-bottom))
      max(clamp(8px, 4vmin, 24px), var(--safe-left));
    gap: clamp(5px, 3vmin, 13px);
  }

  .resize-overlay > img {
    width: min(24vw, 24vmin, 96px);
  }

  .resize-overlay strong {
    font-size: clamp(16px, 8vmin, 38px);
    line-height: 1.1;
  }

  .browser-resize {
    grid-template:
      min(12vmin, 50px) min(13vmin, 54px) min(12vmin, 50px) /
      min(11.5vmin, 48px) min(19.7vmin, 82px) min(11.5vmin, 48px);
    width: min(42.7vmin, 178px);
    height: min(37vmin, 154px);
  }

  .browser-resize i {
    width: min(17.8vmin, 74px);
    height: min(11.5vmin, 48px);
    border-width: min(0.72vmin, 3px);
    border-radius: min(1.45vmin, 6px);
    box-shadow: inset 0 min(1.92vmin, 8px) 0 max(-5px, -1.2vmin) #fff;
  }

  .browser-resize i::before {
    top: min(0.96vmin, 4px);
    left: min(1.2vmin, 5px);
    width: min(0.72vmin, 3px);
    height: min(0.72vmin, 3px);
    box-shadow:
      min(1.45vmin, 6px) 0 #ff8b94,
      min(2.9vmin, 12px) 0 #ff8b94;
  }

  .resize-arrow {
    width: min(11.5vmin, 48px);
    height: min(11.5vmin, 48px);
  }

  .resize-arrow svg {
    width: min(9.6vmin, 40px);
    height: min(9.6vmin, 40px);
  }
}

@keyframes resize-arrow-left {
  0%,
  100% {
    transform: translateX(5px);
  }

  50% {
    transform: translateX(-5px);
  }
}

@keyframes resize-arrow-right {
  0%,
  100% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(5px);
  }
}

@keyframes resize-arrow-up {
  0%,
  100% {
    transform: translateY(5px);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes resize-arrow-down {
  0%,
  100% {
    transform: translateY(-5px);
  }

  50% {
    transform: translateY(5px);
  }
}

.install-hint {
  max-width: min(90vw, 360px);
  margin: 3px 0 0;
  color: #aeb0b8;
  font-family: var(--system);
  font-size: clamp(12px, 3.45vw, 14px);
  line-height: 1.4;
}

.install-lead {
  display: block;
  text-wrap: balance;
}

.install-hint > span[aria-label="More"] {
  color: #fff;
  letter-spacing: 0.04em;
}

.phone-rotate {
  position: relative;
  width: 66px;
  height: 52px;
}

.phone-rotate span {
  position: absolute;
  inset: 0;
  display: block;
  width: 28px;
  height: 43px;
  margin: auto;
  border: 3px solid #fff;
  border-radius: 6px;
  animation: turn-phone 1.8s ease-in-out infinite;
}

.phone-rotate::after {
  position: absolute;
  inset: 0;
  width: 52px;
  height: 52px;
  margin: auto;
  content: "";
  border-top: 3px solid #ff8b94;
  border-right: 3px solid #ff8b94;
  border-radius: 50%;
  transform: rotate(28deg);
}

@keyframes turn-phone {
  0%,
  28% {
    transform: rotate(0deg);
  }

  60%,
  100% {
    transform: rotate(90deg);
  }
}

@media (orientation: portrait) and (max-aspect-ratio: 1 / 1) {
  .rotate-overlay {
    display: grid;
  }

  #canvasContainer {
    pointer-events: none;
  }
}

html[data-browser-window-fit="too-wide"] .resize-overlay,
html[data-browser-window-fit="too-wide"] .browser-resize-narrower,
html[data-browser-window-fit="too-tall"] .resize-overlay,
html[data-browser-window-fit="too-tall"] .browser-resize-wider,
html[data-browser-window-fit] .resize-copy {
  display: grid;
}

html[data-browser-window-fit] .rotate-overlay {
  display: none;
}

html[data-browser-window-fit] #canvasContainer {
  pointer-events: none;
}

.is-installed-app .install-hint {
  display: none;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
  :root {
    --viewport-width: 100vw;
    --viewport-height: 100vh;
    --viewport-left: 0px;
    --viewport-top: 0px;
  }
  html, body { height: 100vh; min-height: 100vh; }
  #app { inset: 0; width: auto; height: auto; min-height: 0; }
  .install-hint {
    display: none;
  }
}

/* Session-only debug controls stay out of the original interface until opened. */
.debug-tools {
  position: absolute;
  z-index: 70;
  inset: 0;
  font-family: var(--system);
  pointer-events: none;
}

.debug-toggle,
.debug-panel {
  pointer-events: auto;
}

.debug-toggle {
  position: absolute;
  /* DebugTools.layout uses physical viewport coordinates, so use the root
     safe-area values rather than the canvas-space values inherited only by
     the transformed game container. */
  top: max(1.5625cqh, var(--safe-top));
  right: max(0.8803cqw, var(--safe-right));
  min-width: 7.7465cqw;
  height: 8.125cqh;
  padding: 0 1.0563cqw;
  color: #d9d9df;
  background: rgba(7, 7, 10, 0.86);
  border: 0.3125cqh solid rgba(255, 255, 255, 0.44);
  border-radius: 4.0625cqh;
  box-shadow: 0 0.625cqh 2cqh rgba(0, 0, 0, 0.55);
  font: 800 clamp(7px, 3.75cqh, 14px)/1 var(--system);
  letter-spacing: 0.05em;
}

.debug-toggle::before {
  display: inline-block;
  width: 1.25cqh;
  height: 1.25cqh;
  margin-right: 0.7042cqw;
  content: "";
  background: #777780;
  border-radius: 50%;
  box-shadow: 0 0 0.8cqh transparent;
  vertical-align: 0.08em;
}

.debug-tools[data-enabled="true"] .debug-toggle {
  color: #efffe9;
  border-color: rgba(143, 255, 104, 0.72);
}

.debug-tools[data-enabled="true"] .debug-toggle::before {
  background: #8cff68;
  box-shadow: 0 0 1.4cqh rgba(140, 255, 104, 0.76);
}

.debug-toggle:active {
  filter: brightness(1.22);
  transform: scale(0.96);
}

.debug-panel {
  position: absolute;
  top: max(11.25cqh, var(--safe-top));
  right: max(0.8803cqw, var(--safe-right));
  display: grid;
  width: 40.493cqw;
  max-height: 86.25cqh;
  padding: 2.5cqh 1.7606cqw;
  gap: 2.1875cqh;
  overflow: auto;
  color: #f5f5f7;
  background: rgba(6, 6, 9, 0.96);
  border: 0.3125cqh solid rgba(255, 255, 255, 0.55);
  border-radius: 1.875cqh;
  box-shadow: 0 2.5cqh 7cqh rgba(0, 0, 0, 0.72);
  font-size: clamp(7px, 3.75cqh, 14px);
  line-height: 1.15;
  touch-action: pan-y;
}

.debug-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1.0563cqw;
}

.debug-header strong {
  font-family: var(--rounded);
  font-size: clamp(9px, 5cqh, 18px);
}

.debug-header output {
  min-width: 0;
  overflow: hidden;
  color: #aeb0b8;
  font: 600 clamp(6px, 3.125cqh, 12px)/1 var(--system);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debug-build {
  display: block;
  margin-top: -1.25cqh;
  overflow-wrap: anywhere;
  color: #8cff68;
  font: 700 clamp(5px, 2.5cqh, 10px)/1.2 var(--system);
}

.debug-panel fieldset {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  gap: 1.875cqh;
  border: 0;
}

.debug-panel fieldset:disabled {
  opacity: 0.38;
}

.debug-check {
  display: flex;
  min-height: 5.625cqh;
  align-items: center;
  gap: 1.0563cqw;
  user-select: none;
}

.debug-check input {
  flex: 0 0 auto;
  width: 2.8169cqw;
  height: 5cqh;
  margin: 0;
  accent-color: #82eb60;
}

.debug-master {
  min-height: 7.5cqh;
  padding: 0 1.0563cqw;
  background: #17171c;
  border-radius: 1.25cqh;
  font-weight: 700;
}

.debug-level-label {
  color: #bfc0c7;
  font-size: 0.88em;
  font-weight: 700;
}

.debug-level-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7042cqw;
}

.debug-panel select,
.debug-panel button:not(.debug-toggle) {
  min-width: 0;
  height: 8.125cqh;
  color: #fff;
  background: #222229;
  border: 0.3125cqh solid #5f606a;
  border-radius: 1.25cqh;
  font: 700 clamp(7px, 3.4375cqh, 13px)/1 var(--system);
}

.debug-panel select {
  width: 100%;
  padding: 0 1.0563cqw;
  color-scheme: dark;
  text-overflow: ellipsis;
}

.debug-panel button:not(.debug-toggle) {
  padding: 0 1.4085cqw;
  text-align: center;
  touch-action: pan-y;
}

.debug-panel button:not(.debug-toggle):active {
  color: #f2ffce;
  background: #464650;
  transform: translateY(0.4cqh);
}

.debug-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7042cqw;
}

.debug-respawn-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7042cqw;
}

.debug-respawn-action output {
  min-width: 0;
  overflow: hidden;
  color: #bfc0c7;
  font-size: 0.78em;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debug-cursor-position {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  min-width: 12.5cqw;
  padding: 1.25cqh 1.0563cqw;
  color: #efffe9;
  background: rgba(6, 6, 9, 0.92);
  border: 0.3125cqh solid rgba(143, 255, 104, 0.78);
  border-radius: 1.25cqh;
  box-shadow: 0 0.625cqh 2cqh rgba(0, 0, 0, 0.7);
  font: 800 clamp(7px, 3.4375cqh, 13px)/1 var(--system);
  text-align: center;
  white-space: nowrap;
  transform: translate(1.25cqh, calc(-100% - 1.25cqh));
  pointer-events: none;
}

.debug-cursor-position[data-horizontal="left"] {
  transform: translate(calc(-100% - 1.25cqh), calc(-100% - 1.25cqh));
}

.debug-cursor-position[data-vertical="below"] {
  transform: translate(1.25cqh, 1.25cqh);
}

.debug-cursor-position[data-horizontal="left"][data-vertical="below"] {
  transform: translate(calc(-100% - 1.25cqh), 1.25cqh);
}

.debug-number-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5625cqh 0.7042cqw;
}

.debug-number-editor label {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
  gap: 0.78125cqh;
  color: #bfc0c7;
  font-size: 0.82em;
  font-weight: 700;
}

.debug-number-editor input {
  width: 100%;
  min-width: 0;
  height: 8.125cqh;
  padding: 0 0.7042cqw;
  color: #fff;
  background: #17171c;
  border: 0.3125cqh solid #5f606a;
  border-radius: 1.25cqh;
  font: 700 clamp(8px, 3.75cqh, 14px)/1 var(--system);
  text-align: right;
  caret-color: #fff;
  cursor: text;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  color-scheme: dark;
}

@media (hover: hover) and (pointer: fine) {
  .debug-number-editor input {
    -webkit-user-select: text;
    user-select: text;
  }
}

#debug-apply-deaths,
#debug-give-keys {
  grid-column: 1 / -1;
}

.debug-note {
  margin: 0;
  color: #9b9ca5;
  font-size: clamp(6px, 3.125cqh, 12px);
  line-height: 1.25;
}


/* LoC2 draws a fixed canvas; match the displayed stage without scaling text twice. */
.debug-tools { container-type: size; }
.debug-tools[data-unavailable="true"] { visibility: hidden; }
#debug-message { color: #c9ffa8; }