html, body { width: 100%; height: 100%; overflow-x: hidden }
:root { --ml-viewport-height:100vh; --ml-viewport-top:0px; }
@supports (height:1dvh) { :root { --ml-viewport-height:100dvh; } }
body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
.unity-mobile #unity-fullscreen-container { width: 100%; height: 100% }
#unity-fullscreen-container { position: relative; }
#unity-canvas { position: absolute; width: 100%; height: 100%; background: #FFF5DF }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); display: none; z-index: 2; width: max-content; max-width: min(92vw, 400px) }
/* M49 W4 (review fix): engine banners stay in the sign-wall band under the awning (header units, as the loader): from
   36u, ending above the rail (252u), so they never cover the hero or the reload. The shell keeps the first sentence
   (the whole message is in the console) and at most two banners; each is at most three lines (two 3-line banners end
   by 36u + 163 px, under 248u from u = .774 on) and two lines where u is smaller (narrow or short windows). No clipping
   box here: it would cut the banners' soft shadow into a hard rectangle. */
#unity-warning {
  --u: min(calc(100vw / 430), max(calc(100vh / 924), .74px), 1.25px);
  top: calc(36 * var(--u)); flex-direction: column; gap: 6px; pointer-events: none;
}
@supports (height: 1dvh) { #unity-warning { --u: min(calc(100vw / 430), max(calc(100dvh / 924), .74px), 1.25px) } }
@media (max-width: 332px), (max-height: 714px) { #unity-warning .ml-banner { -webkit-line-clamp: 2; line-clamp: 2; max-height: 2.9em } }

/* The bakery screen owns the viewport; Unity draws its own 430px shell and playfield. */
html, body { background: #f3ede4; overflow: hidden }
#unity-container.unity-desktop, #unity-container.unity-mobile {
  position: fixed; inset: 0; width: 100%; height: 100dvh;
  left: auto; top: auto; transform: none;
}
#unity-fullscreen-container { width: 100% !important; height: 100% !important }
#unity-canvas { width: 100% !important; height: 100% !important; background: #f3ede4 }
#unity-footer { display: none }

#unity-container.unity-mobile { height: 100dvh }
@media (max-width: 700px) {
  #unity-container.unity-desktop { position: fixed; inset: 0; width: 100%; height: 100dvh; transform: none }
  #unity-fullscreen-container { width: 100% !important; height: 100% !important }
  #unity-footer { display: none }
}

/* M49 W9: no browser gestures on the game. No blue tap flash, no pull-to-refresh or scroll chaining, no long-press
   selection or callout, no focus outline on the canvas. Buttons show the shop ring only for keyboard focus. The
   leaderboard dialog's input is not touched (it keeps its own focus style and text selection). */
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent }
#unity-canvas { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; outline: none }
#unity-canvas:focus, #unity-canvas:focus-visible { outline: none }
#mallangi-game-select, #unity-loading-container, #ml-rotate { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none }
#mallangi-game-select button, .ml-reload, #mallangi-rank-open { -webkit-tap-highlight-color: transparent; touch-action: manipulation }
#mallangi-game-select button:focus, .ml-reload:focus, #mallangi-rank-open:focus { outline: none }
#mallangi-game-select button:focus-visible, .ml-reload:focus-visible, #mallangi-rank-open:focus-visible {
  outline: 2.5px solid #B72E24; outline-offset: 3px
}

/* M49 W8: the shell's fixed wording in the game's own faces (ART-BIBLE §6): subsets of the local OFL Noto Serif KR
   (static 900: logo, mode names, rank title and numbers) and Noto Sans KR (variable: real 500-900 weights, no faux
   bold). Built by WebTests/web/fontgen/build-fonts.mjs; anything outside the subsets falls back per glyph to the
   platform's Korean face (no generic UI-font keyword). */
@font-face { font-family: "Mallangi Serif"; src: url("fonts/mallangi-serif.woff2?v=38904564f9f86999d296b6c0fb3061dcdb84df7ac3ed582a7ea03317af157e2e") format("woff2"); font-weight: 900; font-display: swap }
@font-face { font-family: "Mallangi Sans"; src: url("fonts/mallangi-sans.woff2?v=7b9755e18d53a59b3206c419432ed4a0babea2aff78870f2808da2446deb8c9c") format("woff2"); font-weight: 100 900; font-display: swap }
:root {
  --ml-wall-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='l' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007 .011' numOctaves='3' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .95 0 0 0 .22 -.07'/%3E%3C/filter%3E%3Cfilter id='d' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.009 .013' numOctaves='3' seed='31' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .28 0 0 0 0 .16 0 0 0 .16 -.05'/%3E%3C/filter%3E%3Crect width='100%' height='100%' fill='%23CCCFA6'/%3E%3Crect width='100%' height='100%' filter='url(%23l)' opacity='0.8'/%3E%3Crect width='100%' height='100%' filter='url(%23d)' opacity='1'/%3E%3C/svg%3E");
  --ml-fascia-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='l' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007 .011' numOctaves='3' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .95 0 0 0 .22 -.07'/%3E%3C/filter%3E%3Cfilter id='d' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.009 .013' numOctaves='3' seed='31' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .28 0 0 0 0 .16 0 0 0 .16 -.05'/%3E%3C/filter%3E%3Crect width='100%' height='100%' fill='%23F5E9D3'/%3E%3Crect width='100%' height='100%' filter='url(%23l)' opacity='0.5'/%3E%3Crect width='100%' height='100%' filter='url(%23d)' opacity='0.45'/%3E%3C/svg%3E");
  --ml-awning-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 71.667 32' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='s'%3E%3Cstop offset='0' stop-opacity='.10'/%3E%3Cstop offset='.22' stop-opacity='0'/%3E%3Cstop offset='.62' stop-opacity='0'/%3E%3Cstop offset='1' stop-opacity='.13'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%23F0C3AE' d='M0 0H35.833V19A17.917 13 0 0 1 0 19Z'/%3E%3Cpath fill='url(%23s)' d='M0 0H35.833V19A17.917 13 0 0 1 0 19Z'/%3E%3Cpath fill='%23B72E24' d='M35.833 0H71.667V19A17.917 13 0 0 1 35.833 19Z'/%3E%3Cpath fill='url(%23s)' d='M35.833 0H71.667V19A17.917 13 0 0 1 35.833 19Z'/%3E%3Crect width='71.667' height='5' fill='%23fff' fill-opacity='.10'/%3E%3Cg fill='none' stroke-width='.9' stroke-dasharray='2.2 2'%3E%3Cpath stroke='%23B72E24' stroke-opacity='0.55' d='M3.2 18A14.717 9.4 0 0 0 32.633 18'/%3E%3Cpath stroke='%23F7D9C9' stroke-opacity='0.9' d='M39.033 18A14.717 9.4 0 0 0 68.467 18'/%3E%3C/g%3E%3Cpath fill='none' stroke='%236B3927' stroke-opacity='.55' stroke-width='1.1' d='M35.833 19A17.917 13 0 0 1 0 19M71.667 19A17.917 13 0 0 1 35.833 19'/%3E%3C/svg%3E");
  --ml-serif: "Mallangi Serif", "Noto Serif KR", "AppleMyungjo", serif;
  --ml-sans: "Mallangi Sans", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --ml-text: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

#unity-container[hidden], #mallangi-game-select[hidden] { display: none !important }
/* M49 W6 (review fix): a document loaded on the game's history guard steps back at once; nothing to tap meanwhile */
html.ml-stepping #mallangi-game-select { visibility: hidden }
.sel-old-icon { display: none }

/* ============================================================================================================
   M49 W8 select screen = the same shop as the game (ART-BIBLE §8.21, sel=b release default): awning -> fascia
   (logo sign, "게임 선택") -> oak rail -> pistachio wall (the white mochi on a plate; the cast hero is round 2) ->
   oak counter with the two order tickets taped on. Lengths are in header units u (the game's header scale,
   1u = .907 css at 390x844), so the screen keeps its proportions from 320x568 to desktop.
   ============================================================================================================ */
html:not(.ml-sel-a) #mallangi-game-select {
  --u: min(calc(100vw / 430), max(calc(100vh / 924), .74px), 1.25px);
  position: relative; box-sizing: border-box; min-height: 100vh; min-height: 100dvh; margin: 0; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: calc(216 * var(--u)) minmax(calc(128 * var(--u)), 1fr) auto;
  color: #4A2A1E; font-family: var(--ml-sans);
  background: var(--ml-wall-img) 0 0 / 512px 512px, #CCCFA6;
}
@supports (height: 1dvh) {
  html:not(.ml-sel-a) #mallangi-game-select { --u: min(calc(100vw / 430), max(calc(100dvh / 924), .74px), 1.25px) }
}
/* fascia (row 1) with the oak rail along its bottom edge; its shadow falls on the wall */
html:not(.ml-sel-a) #mallangi-game-select::before {
  content: ""; grid-area: 1 / 1; z-index: 0;
  background:
    linear-gradient(#DDB185 0 32%, #B98656 32% calc(100% - 1px), rgba(126, 82, 50, .7) calc(100% - 1px)) 0 100% / 100% calc(6 * var(--u)) no-repeat,
    var(--ml-fascia-img) 0 0 / 512px 512px, #F5E9D3;
  box-shadow: 0 calc(2.5 * var(--u)) calc(6 * var(--u)) rgba(58, 42, 16, .14);
}
/* oak counter (row 3): top 13u with fibre, back edge, front highlight and shade; plank front with grain */
html:not(.ml-sel-a) #mallangi-game-select::after, html:not(.ml-sel-a) #unity-loading-container::after {
  content: ""; z-index: 0;
  background:
    linear-gradient(rgba(169, 122, 79, .45), rgba(169, 122, 79, .45)) 0 0 / 100% 2px no-repeat,
    radial-gradient(closest-side, rgba(255, 252, 246, .55), rgba(255, 252, 246, 0)) 14% calc(6.5 * var(--u)) / calc(64 * var(--u)) calc(8 * var(--u)) no-repeat,
    radial-gradient(closest-side, rgba(255, 252, 246, .45), rgba(255, 252, 246, 0)) 88% calc(5.5 * var(--u)) / calc(34 * var(--u)) calc(7 * var(--u)) no-repeat,
    linear-gradient(#E6C192, #E6C192) 0 calc(13 * var(--u) - 1.6px) / 100% 1.6px no-repeat,
    linear-gradient(rgba(74, 42, 20, .28), rgba(74, 42, 20, 0)) 0 calc(13 * var(--u)) / 100% 3.2px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='12'%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .25' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 -.02'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 256px calc(13 * var(--u)) repeat-x,
    linear-gradient(#CF9F70, #CF9F70) 0 0 / 100% calc(13 * var(--u)) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='60'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .3' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .43 0 0 0 0 .25 0 0 0 0 .14 0 0 0 1.6 -.62'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23g)'/%3E%3C/svg%3E") 0 calc(13 * var(--u)) / 512px 60px,
    repeating-linear-gradient(transparent 0 13.8px, rgba(126, 82, 50, .55) 13.8px 15px, rgba(217, 168, 119, .35) 15px 15.8px, transparent 15.8px 15.8px) 0 calc(13 * var(--u)) / 100% 15.8px,
    linear-gradient(#A9764A, #8C5D38) 0 calc(13 * var(--u)) / 100% 100% no-repeat, #8C5D38;
}
html:not(.ml-sel-a) #mallangi-game-select::after { grid-area: 3 / 1 }
html:not(.ml-sel-a) .game-select-card { display: contents }
html:not(.ml-sel-a) .sel-old-icon { display: none }
/* the select awning is the loader's awning (same tile, same phase as the game header: content left = 50% - 215u) */
html:not(.ml-sel-a) .sel-awning {
  position: absolute; left: 0; right: 0; top: 0; height: calc(32 * var(--u)); z-index: 2; pointer-events: none;
  background: var(--ml-awning-img) calc(50% - 179.1667 * var(--u)) 0 / calc(71.6667 * var(--u)) calc(32 * var(--u)) repeat-x;
  filter: drop-shadow(calc(1.2 * var(--u)) calc(3.2 * var(--u)) calc(.9 * var(--u)) rgba(58, 32, 16, .17));
}
/* logo = the TOTAL sign language (318 x 86 css at 390): per-glyph tilt + misregistered cocoa plate (text unchanged) */
html:not(.ml-sel-a) #game-select-title {
  grid-area: 1 / 1; z-index: 1; justify-self: center; align-self: start; box-sizing: border-box;
  width: calc(350.6 * var(--u)); height: calc(98.7 * var(--u)); margin: calc(66 * var(--u)) 0 0; padding: 0 0 calc(3.9 * var(--u));
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 318 89.5'%3E%3Crect x='0' y='3.5' width='318' height='86' rx='13.76' fill='%233B1F15'/%3E%3Crect width='318' height='86' rx='13.76' fill='%235C3426'/%3E%3Cpath d='M4 2.48C95.4 3.17 197.16 3.25 314 3.18' stroke='%2376452F' stroke-width='1.27' fill='none' opacity='.5'/%3E%3Cpath d='M4 18.72C95.4 18.72 197.16 19.56 314 17.82' stroke='%2376452F' stroke-width='1.4' fill='none' opacity='.5'/%3E%3Cpath d='M4 34.13C95.4 33.12 197.16 34.14 314 34.42' stroke='%2376452F' stroke-width='0.82' fill='none' opacity='.5'/%3E%3Cpath d='M4 51.69C95.4 51.61 197.16 52.03 314 52.44' stroke='%2376452F' stroke-width='0.76' fill='none' opacity='.5'/%3E%3Cpath d='M4 67.96C95.4 67.53 197.16 67.21 314 68.17' stroke='%2376452F' stroke-width='1.18' fill='none' opacity='.5'/%3E%3Cpath d='M4 82.95C95.4 84.39 197.16 83.11 314 82.95' stroke='%2376452F' stroke-width='0.88' fill='none' opacity='.5'/%3E%3Crect x='.6' y='.6' width='316.8' height='84.8' rx='13.76' fill='none' stroke='%232A140B' stroke-width='1.2'/%3E%3Crect x='8' y='8' width='302' height='70' rx='8.26' fill='%23FFF6E4'/%3E%3Crect x='8' y='8' width='302' height='7' rx='6.88' fill='%233A2010' opacity='.10'/%3E%3Crect x='12.5' y='12.5' width='293' height='61' rx='6.19' fill='none' stroke='%23B72E24' stroke-width='1.3' opacity='.85'/%3E%3Ccircle cx='4' cy='43' r='2.24' fill='%23C9A24E' stroke='%236E4E17' stroke-width='.7'/%3E%3Cpath d='M2.56 42.2L5.44 43.8' stroke='%236E4E17' stroke-width='.8'/%3E%3Ccircle cx='314' cy='43' r='2.24' fill='%23C9A24E' stroke='%236E4E17' stroke-width='.7'/%3E%3Cpath d='M312.56 42.2L315.44 43.8' stroke='%236E4E17' stroke-width='.8'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  font: 900 calc(36.4 * var(--u)) / 1 var(--ml-serif); letter-spacing: 0; color: #B72E24;
}
html:not(.ml-sel-a) #game-select-title .sel-g { position: relative; display: inline-block; transform: rotate(var(--r, 0deg)); transform-origin: 50% 60% }
html:not(.ml-sel-a) #game-select-title .sel-g::before {
  content: attr(data-g); position: absolute; left: 0; top: 0; z-index: -1; color: #4A2A1E; opacity: .85;
  transform: translate(calc(1.65 * var(--u)), calc(2.2 * var(--u)));
}
html:not(.ml-sel-a) #game-select-title .sel-sp { display: inline-block; width: calc(10.6 * var(--u)) }
html:not(.ml-sel-a) .game-select-card > p {
  grid-area: 1 / 1; z-index: 1; justify-self: center; align-self: start; margin: calc(176 * var(--u)) 0 0;
  font: 600 calc(14.3 * var(--u)) / 1 var(--ml-sans); letter-spacing: .08em; color: rgba(74, 42, 30, .72);
}
/* hero: the approved white mochi resting on a plate in the middle of the wall */
html:not(.ml-sel-a) .sel-hero {
  grid-area: 2 / 1; z-index: 1; place-self: center; position: relative; display: grid; justify-items: center;
  width: calc(176 * var(--u)); padding-bottom: calc(14 * var(--u));
}
html:not(.ml-sel-a) .game-select-hero {
  position: relative; z-index: 1; display: block; width: calc(119 * var(--u)); height: auto; margin: 0 0 calc(-5.4 * var(--u));
  filter: drop-shadow(1px 2.3px .75px rgba(64, 34, 15, .30));
}
html:not(.ml-sel-a) .sel-plate {
  display: block; width: calc(176 * var(--u)); height: calc(15.4 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14'%3E%3Cpath d='M2 2L158 2Q152 10 136 10L24 10Q8 10 2 2Z' fill='%23FBF6EC' stroke='%236B3927' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M4 3.6L156 3.6' stroke='%23B72E24' stroke-width='1.8'/%3E%3Cpath d='M16 6.6L56 6.6' stroke='%23fff' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(3 * var(--u)) rgba(42, 26, 8, .16));
}
/* order tickets taped on the counter: thermal paper, half-moon notches, perforated stub with a kraft icon box */
html:not(.ml-sel-a) .game-select-options {
  grid-area: 3 / 1; z-index: 1; position: relative; display: flex; flex-direction: column; align-items: center;
  gap: calc(15.4 * var(--u)); padding: calc(42 * var(--u)) 16px calc(20 * var(--u) + env(safe-area-inset-bottom));
}
html:not(.ml-sel-a) .game-select-option {
  --tilt: -1.2deg;
  position: relative; box-sizing: border-box; display: block; width: min(calc(386 * var(--u)), 100%); height: calc(114.7 * var(--u));
  margin: 0; padding: 0; border: 0; border-radius: calc(8.8 * var(--u)); background: none; color: #4A2A1E; font: inherit; text-align: left;
  cursor: pointer; transform: rotate(var(--tilt)); filter: drop-shadow(1.2px 2.2px .35px rgba(58, 32, 16, .24));
  transition: transform 90ms ease-out, filter 90ms ease-out;
}
html:not(.ml-sel-a) .game-select-option[data-game="sling"] { --tilt: .9deg }
html:not(.ml-sel-a) .game-select-option:active { transform: rotate(var(--tilt)) translateY(2px); filter: drop-shadow(.6px 1px .3px rgba(58, 32, 16, .2)) }
html:not(.ml-sel-a) .game-select-option::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 128px 128px, #FCF8EF;
  -webkit-mask: radial-gradient(circle calc(7.7 * var(--u)) at calc(101.4 * var(--u)) 0, #0000 97%, #000 100%) 0 0 / 100% 52% no-repeat,
    radial-gradient(circle calc(7.7 * var(--u)) at calc(101.4 * var(--u)) 100%, #0000 97%, #000 100%) 0 100% / 100% 52% no-repeat;
  mask: radial-gradient(circle calc(7.7 * var(--u)) at calc(101.4 * var(--u)) 0, #0000 97%, #000 100%) 0 0 / 100% 52% no-repeat,
    radial-gradient(circle calc(7.7 * var(--u)) at calc(101.4 * var(--u)) 100%, #0000 97%, #000 100%) 0 100% / 100% 52% no-repeat;
}
html:not(.ml-sel-a) .sel-stub {
  position: absolute; left: calc(8.8 * var(--u)); top: calc(8.8 * var(--u)); bottom: calc(8.8 * var(--u)); width: calc(83.8 * var(--u));
  border-radius: calc(6.6 * var(--u)); background: rgba(221, 184, 135, .55);
}
html:not(.ml-sel-a) .sel-stub::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(92.6 * var(--u)); width: 1px;
  background: repeating-linear-gradient(rgba(107, 57, 39, .55) 0 2px, transparent 2px 5px);
}
html:not(.ml-sel-a) .sel-icon { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
html:not(.ml-sel-a) .sel-text { position: absolute; left: calc(125.7 * var(--u)); right: calc(74 * var(--u)); top: calc(22 * var(--u)) }
html:not(.ml-sel-a) .game-select-option strong {
  display: block; font: 900 calc(30.9 * var(--u)) / 1 var(--ml-serif); letter-spacing: .01em; color: #4A2A1E;
}
html:not(.ml-sel-a) .game-select-option small {
  display: block; margin-top: calc(13.5 * var(--u)); font: 500 calc(15.4 * var(--u)) / 1.1 var(--ml-sans); color: #855A42;
  white-space: nowrap;
}
html:not(.ml-sel-a) .sel-arrow {
  position: absolute; right: calc(26.5 * var(--u)); top: 50%; width: calc(48.5 * var(--u)); height: calc(22 * var(--u)); margin-top: calc(-11 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20'%3E%3Cg fill='none' stroke='%23C4362A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11C16 8.2 28 12.4 41 10'/%3E%3Cpath d='M32 2.6L41.2 10L33 17.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
html:not(.ml-sel-a) .sel-tape {
  position: absolute; width: calc(30.9 * var(--u)); height: calc(13.2 * var(--u)); z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cg opacity='.9'%3E%3Crect width='28' height='12' fill='%23F0C3AE'/%3E%3Crect x='0' width='4.5' height='12' fill='%23B72E24'/%3E%3Crect x='9' width='4.5' height='12' fill='%23B72E24'/%3E%3Crect x='18' width='4.5' height='12' fill='%23B72E24'/%3E%3Crect width='28' height='12' fill='%23fff' opacity='.2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
html:not(.ml-sel-a) .sel-tape-a { left: calc(.1 * var(--u)); top: calc(-4.4 * var(--u)); transform: rotate(-28deg) }
html:not(.ml-sel-a) .sel-tape-c { left: calc(-4.4 * var(--u)); bottom: calc(-4.4 * var(--u)); transform: rotate(20deg) }
/* short landscape windows (phones turned sideways before choosing): smaller fascia, no hero, tickets side by side */
@media (orientation: landscape) and (max-height: 520px) {
  html:not(.ml-sel-a) #mallangi-game-select { --u: .74px; grid-template-rows: calc(176 * var(--u)) minmax(0, 1fr) auto }
  html:not(.ml-sel-a) #game-select-title { margin-top: calc(40 * var(--u)) }
  html:not(.ml-sel-a) .game-select-card > p { margin-top: calc(148 * var(--u)) }
  html:not(.ml-sel-a) .sel-hero { display: none }
  html:not(.ml-sel-a) .game-select-options { flex-direction: row; justify-content: center; padding-top: calc(30 * var(--u)) }
  html:not(.ml-sel-a) .game-select-option { width: min(calc(386 * var(--u)), calc(50% - 8px)) }
}

/* M39 bakery loader (no text). Its awning sits exactly where the game's first frame draws it, so the
   cream cross-fade keeps the awning still. Header scale, as in WatermelonRuntime.RefreshCamera (M39 B2):
   s = min(W/430, max(H/924, .74), 1.25); shell = W <= 430 ? W : 430s; awning = 12 bands per 430s, 32s tall.
   --ml-u is s as a length (1 logical header px). Landscape phones under 600px height keep the legacy
   header (shell min(W,430), awning 32px or 32*234/258 when W <= 390). */
#unity-loading-container {
  position: absolute; inset: 0; width: 100%; height: 100%; display: flex; z-index: 1;
  overflow: hidden; background: #f3ede4; container-type: size;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: opacity .32s cubic-bezier(.32, 0, .67, 0);
}
#unity-loading-container.ml-done { opacity: 0; pointer-events: none }
.ml-shell {
  --ml-u: min(calc(100vw / 430), max(calc(100vh / 924), .74px), 1.25px);
  --ml-ux: var(--ml-u);
  --ml-uy: var(--ml-u);
  position: relative; flex: none; width: calc(430 * var(--ml-u)); height: 100%; margin: 0 auto;
  background: linear-gradient(#fff9ef, #fff5df);
}
@supports (height: 1dvh) {
  .ml-shell { --ml-u: min(calc(100vw / 430), max(calc(100dvh / 924), .74px), 1.25px) }
}
@supports (width: 1cqw) {
  .ml-shell { --ml-u: min(calc(100cqw / 430), max(calc(100cqh / 924), .74px), 1.25px) }
}
@media (max-width: 430px) {
  .ml-shell { width: 100% }
}
@media (orientation: landscape) and (max-height: 599.98px) {
  .ml-shell { --ml-ux: calc(min(100vw, 430px) / 430); --ml-uy: 1px; width: min(100%, 430px) }
}
@media (orientation: landscape) and (max-height: 599.98px) and (max-width: 390px) {
  .ml-shell { --ml-uy: .90698px }
}
/* Soft shell edges on wide screens: #6b3927 a.10 fading (1-t)^2 over 16px, as the game's shell. */
.ml-shell::before, .ml-shell::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 16px; pointer-events: none;
}
.ml-shell::before {
  right: 100%;
  background: linear-gradient(to left, rgba(107, 57, 39, .10), rgba(107, 57, 39, .056) 25%, rgba(107, 57, 39, .025) 50%, rgba(107, 57, 39, .006) 75%, rgba(107, 57, 39, 0));
}
.ml-shell::after {
  left: 100%;
  background: linear-gradient(to right, rgba(107, 57, 39, .10), rgba(107, 57, 39, .056) 25%, rgba(107, 57, 39, .025) 50%, rgba(107, 57, 39, .006) 75%, rgba(107, 57, 39, 0));
}

/* M48 awning (review flag awn=a: html.ml-awn-a): the in-game BakeryAwningTexture geometry as a vector (12 bands per
   430 logical px, pink #f0c3ae first; band rect y 0-19 plus scallop ellipse rx 17.92 ry 13 at y 19; a 1.2px rim at
   35%), extended by 3 bands each side for a shell wider than the header content. It is a background, not an inline
   <svg>: a replaced element at a half-pixel position gets snapped and every band shifts by one device pixel.
   The soft shadow follows the scallop silhouette; clip-path keeps it from spilling past the shell sides.
   M49 W8 (awn=b, release default): ART-BIBLE §8.2 = STAGE S3's in-game awning values: per-stripe cylinder shade
   (left 0-22% black .10 -> 0, right 62-100% 0 -> .13), 5u top light .10, stitched hem 3.2u inside the scallop
   (.9u dashes 2.2/2.0, #F7D9C9 .9 on red, #B72E24 .55 on peach), ink hem 1.1u #6B3927 .55, shadow (1.2, 3.2)u .17.
   A two-stripe tile repeats from the header content's left edge, so it continues across a full-width shop. */
.ml-awning {
  position: absolute; left: 0; right: 0; top: 0; height: calc(32 * var(--ml-uy)); pointer-events: none;
  background: var(--ml-awning-img) 0 0 / calc(71.6667 * var(--ml-ux)) calc(32 * var(--ml-uy)) repeat-x;
  filter: drop-shadow(calc(1.2 * var(--ml-ux)) calc(3.2 * var(--ml-uy)) calc(.9 * var(--ml-uy)) rgba(58, 32, 16, .17));
}
.ml-awn-a .sel-awning { display: none }

.ml-stage {
  position: absolute; left: 0; right: 0; top: 34%;
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.ml-hero { position: relative; width: 88px; padding-bottom: 5px }
.ml-shadow {
  position: absolute; left: 50%; bottom: 0; width: 60px; height: 10px; margin-left: -30px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(107, 57, 39, .14), rgba(107, 57, 39, .10) 55%, rgba(107, 57, 39, 0));
  animation: mlShadow 1.15s infinite;
}
.ml-mochi {
  position: relative; width: 88px; height: 80px; transform-origin: 50% 100%;
  animation: mlHop 1.15s infinite; will-change: transform;
}
.ml-mochi-png, .ml-mochi-shape {
  position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 100%; pointer-events: none; -webkit-user-drag: none;
}
/* loading-mochi.png is cropped with an 8 px transparent margin (M39PortraitBake Margin, 176 px long side),
   4 CSS px at 88 px: drop the image by that much so the body bottom sits on the shadow centre (the
   .ml-mochi box bottom, which stays the squash pivot). Use 0 if the bake margin drops to 2 px or less. */
.ml-mochi-png { bottom: -4px }
/* The SVG fallback body ends 2 viewBox units above its box bottom (1.76px at 88px, about 1.6px to its visible
   anti-aliased edge): same grounding, measured on the 0%/84% poses. */
.ml-mochi-shape { display: none; height: auto; bottom: -1.6px }
.ml-no-png > .ml-mochi-shape { display: block }

.ml-pill {
  position: relative; width: 196px; height: 12px; margin-top: 26px; border-radius: 6px; overflow: hidden;
  background: #f2dfcc; box-shadow: inset 0 0 0 1px #e3c9b2, inset 0 1px 2px rgba(107, 57, 39, .10);
}
/* Progress states (set by mallangi-shell.js mlShowProgress; no class = no real value yet):
   - ml-indeterminate: no real value 1.5 s after the loader appeared (a server without Content-Length reports
     nothing until a whole file lands). No fill; a soft glaze sheen travels along the whole track. It is an
     activity cue, not progress.
   - ml-determinate: the first real value arrived. The fill shows it (monotonic, never a time-based guess),
     never narrower than a 28px capsule so a tiny real value reads as a pill rather than a dot; the sheen
     fades out under it.
   Transitions live on the state rules only, so the first style resolution never animates anything. */
#unity-progress-bar-full {
  position: relative; width: 0; min-width: 0; height: 100%; border-radius: 6px; overflow: hidden; opacity: 0;
  background: linear-gradient(rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, #e46a45, #b72e24) 0 0 / 196px 100% no-repeat;
  box-shadow: inset 0 -1px 0 rgba(125, 26, 20, .30);
}
.ml-determinate #unity-progress-bar-full {
  opacity: 1; min-width: 28px;
  transition: width .3s cubic-bezier(.33, 1, .68, 1), min-width .3s cubic-bezier(.33, 1, .68, 1), opacity .18s linear;
}
/* Diagonal sugar stripes keep moving even while the network stalls (one period = 12px / cos 45deg). */
#unity-progress-bar-full::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -17px; right: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 5.4px, rgba(255, 255, 255, 0) 6.6px 11.4px, rgba(255, 255, 255, .22) 12px);
  animation: mlStripe .9s linear infinite; will-change: transform;
}
/* The sheen sits inside the 1px track rim (rim stays crisp) and under the fill. One cream glint with a faint
   warm bed per 194px inner track, looping seamlessly every 2 s; a transform animation, so it keeps moving
   while the main thread is busy compiling. */
.ml-sheen {
  position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; border-radius: 5px; overflow: hidden; opacity: 0;
}
.ml-sheen::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -194px; width: 388px;
  background: linear-gradient(90deg, rgba(255, 252, 247, 0) 14%, rgba(255, 252, 247, .45) 33%, rgba(255, 252, 247, .96) 50%, rgba(255, 252, 247, .45) 67%, rgba(255, 252, 247, 0) 86%) 0 0 / 194px 100% repeat-x,
    linear-gradient(90deg, rgba(228, 106, 69, 0) 4%, rgba(228, 106, 69, .07) 22%, rgba(228, 106, 69, .15) 50%, rgba(228, 106, 69, .07) 78%, rgba(228, 106, 69, 0) 96%) 0 0 / 194px 100% repeat-x;
  animation: mlSheen 2s linear infinite; will-change: transform;
}
.ml-indeterminate .ml-sheen { opacity: 1; transition: opacity .45s ease-out }
.ml-determinate .ml-sheen { transition: opacity .3s ease-out }
.ml-coupon { display: none }

/* Hop: anticipation squash, stretched launch, round apex, stretched fall, impact squash, rebound.
   The shadow narrows with height on the same keyframes. */
@keyframes mlHop {
  0% { transform: translateY(0) scale(1.08, .92); animation-timing-function: cubic-bezier(.35, 0, .7, .52) }
  16% { transform: translateY(-9px) scale(.95, 1.06); animation-timing-function: cubic-bezier(.5, 1, .89, 1) }
  45% { transform: translateY(-22px) scale(.98, 1.03); animation-timing-function: cubic-bezier(.11, 0, .5, 0) }
  76% { transform: translateY(-7px) scale(.95, 1.06); animation-timing-function: linear }
  84% { transform: translateY(0) scale(1.1, .9); animation-timing-function: cubic-bezier(.33, 1, .68, 1) }
  92% { transform: translateY(0) scale(1.01, .99); animation-timing-function: cubic-bezier(.65, 0, .35, 1) }
  100% { transform: translateY(0) scale(1.08, .92) }
}
@keyframes mlShadow {
  0% { transform: scaleX(1.04); opacity: 1; animation-timing-function: cubic-bezier(.35, 0, .7, .52) }
  16% { transform: scaleX(.88); opacity: .82; animation-timing-function: cubic-bezier(.5, 1, .89, 1) }
  45% { transform: scaleX(.7); opacity: .6; animation-timing-function: cubic-bezier(.11, 0, .5, 0) }
  76% { transform: scaleX(.9); opacity: .85; animation-timing-function: linear }
  84% { transform: scaleX(1.08); opacity: 1; animation-timing-function: cubic-bezier(.33, 1, .68, 1) }
  92% { transform: scaleX(1); opacity: 1; animation-timing-function: cubic-bezier(.65, 0, .35, 1) }
  100% { transform: scaleX(1.04); opacity: 1 }
}
@keyframes mlStripe {
  from { transform: translateX(0) }
  to { transform: translateX(16.97px) }
}
@keyframes mlSheen {
  from { transform: translateX(0) }
  to { transform: translateX(194px) }
}
/* Reduced motion: the hop and the sugar stripes stop; the indeterminate sheen only slows (it is the one
   remaining sign that loading is alive while no real value exists). */
@media (prefers-reduced-motion: reduce) {
  .ml-mochi, .ml-shadow, #unity-progress-bar-full::after { animation: none }
  .ml-sheen::before { animation-duration: 6s }
}

/* ============================================================================================================
   M49 W8 loader = the same shop (sel=b): full-width fascia/rail down to the game's header bottom, pistachio wall,
   the counter from the stage's 615.5u line (WatermelonStageLayout: stageH = min(H - hb - 16, shellW * 650/430)),
   so the cream cross-fade lands on the game's first frame. Progress = the 9-slot friends coupon: one shop seal per
   11% (CSS only); the wooden rubber stamp hovers over the next slot. Reduced motion: slots only fill, no stamping.
   ============================================================================================================ */
html:not(.ml-sel-a) #unity-loading-container {
  --u: min(calc(100vw / 430), max(calc(100vh / 924), .74px), 1.25px);
  --hb: calc(258 * var(--u));
  --shell-w: calc(430 * var(--u));
  --stage-h: min(calc(100vh - var(--hb) - 16px), calc(var(--shell-w) * 650 / 430));
  --counter-top: calc(var(--hb) + var(--stage-h) * 615.5 / 650);
  background: var(--ml-wall-img) 0 0 / 512px 512px, #CCCFA6;
}
@supports (height: 1dvh) {
  html:not(.ml-sel-a) #unity-loading-container {
    --u: min(calc(100vw / 430), max(calc(100dvh / 924), .74px), 1.25px);
    --stage-h: min(calc(100dvh - var(--hb) - 16px), calc(var(--shell-w) * 650 / 430));
  }
}
@media (max-width: 430px) { html:not(.ml-sel-a) #unity-loading-container { --shell-w: 100vw } }
html:not(.ml-sel-a) #unity-loading-container::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--hb); z-index: 0;
  background:
    linear-gradient(#DDB185 0 32%, #B98656 32% calc(100% - 1px), rgba(126, 82, 50, .7) calc(100% - 1px)) 0 100% / 100% calc(6 * var(--u)) no-repeat,
    var(--ml-fascia-img) 0 0 / 512px 512px, #F5E9D3;
  box-shadow: 0 calc(2.5 * var(--u)) calc(6 * var(--u)) rgba(58, 42, 16, .14);
}
html:not(.ml-sel-a) #unity-loading-container::after { position: absolute; left: 0; right: 0; top: var(--counter-top); bottom: 0 }
html:not(.ml-sel-a) .ml-shell { position: static; background: none }
html:not(.ml-sel-a) .ml-shell::before, html:not(.ml-sel-a) .ml-shell::after { content: none }
html:not(.ml-sel-a) .ml-awning {
  position: absolute; z-index: 2;
  background-position: calc(50% - 179.1667 * var(--ml-ux)) 0;
}
html:not(.ml-sel-a).ml-awn-a .ml-awning { left: calc(50% - 215 * var(--ml-ux)); right: auto; width: calc(430 * var(--ml-ux)); background-position: 50% 0 }
html:not(.ml-sel-a) .ml-stage { z-index: 1; top: calc((var(--hb) + var(--counter-top)) / 2); transform: translateY(-58%) }
html:not(.ml-sel-a) .ml-hero { width: calc(97 * var(--u)) }
html:not(.ml-sel-a) .ml-mochi { width: calc(97 * var(--u)); height: calc(88.2 * var(--u)) }
html:not(.ml-sel-a) .ml-shadow { width: calc(66 * var(--u)); margin-left: calc(-33 * var(--u)) }
html:not(.ml-sel-a) .ml-pill { display: none }
html:not(.ml-sel-a) .ml-coupon {
  --slot: calc(31.5 * var(--u));
  position: relative; display: flex; box-sizing: border-box; margin-top: calc(30 * var(--u));
  width: calc(9 * var(--slot) + 16 * var(--u)); height: calc(44 * var(--u)); padding: calc(5 * var(--u)) calc(8 * var(--u));
  border-radius: 4px; transform: rotate(-.6deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .25' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .14 0 0 0 .16 -.02'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 128px 128px, #DDB887;
  filter: drop-shadow(1.2px 2.2px .35px rgba(58, 32, 16, .24));
}
html:not(.ml-sel-a) .ml-coupon::before {
  content: ""; position: absolute; inset: calc(3 * var(--u)); border-radius: 3px; pointer-events: none;
  border: 1px dashed rgba(107, 57, 39, .5);
}
html:not(.ml-sel-a) .ml-slot { position: relative; flex: 1 1 0; height: 100% }
html:not(.ml-sel-a) .ml-slot + .ml-slot::before {
  content: "›"; position: absolute; left: -.28em; top: 50%; transform: translateY(-52%);
  font: 600 calc(13 * var(--u)) / 1 var(--ml-sans); color: rgba(107, 57, 39, .5);
}
html:not(.ml-sel-a) .ml-slot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(25 * var(--u)); height: calc(25 * var(--u));
  margin: calc(-12.5 * var(--u)) 0 0 calc(-12.5 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg opacity='.92'%3E%3Cpath d='M36.28 20L36.4 22.16L36.24 24.35L35.46 26.4L34.21 28.2L33.33 30.23L31.75 31.75L29.99 33.02L28.06 33.96L26.39 35.44L24.2 35.67L22.19 36.6L20 36.54L17.82 36.56L15.69 36.09L13.56 35.56L11.89 34.05L10.03 33L8.46 31.54L7.04 29.95L5.64 28.29L4.96 26.23L4.13 24.25L3.67 22.15L3.61 20L3.57 17.84L3.84 15.67L4.44 13.56L5.44 11.59L6.59 9.71L8.56 8.56L9.96 6.92L11.85 5.88L13.78 4.99L15.8 4.31L17.86 3.73L20 3.76L22.17 3.53L24.31 3.93L26.16 5.13L28.22 5.77L30.17 6.74L31.54 8.46L33.08 9.96L34.57 11.59L34.99 13.79L35.77 15.78L36.49 17.83L36.24 20Z' fill='none' stroke='%23C4362A' stroke-width='2.3' stroke-dasharray='31 1.3 22 .9 38 1.6 17 1.1'/%3E%3Cpath fill='%23C4362A' d='M10.93 23.45C10.74 12.92 29.26 12.92 29.08 23.45Z'/%3E%3Ccircle cx='17.28' cy='20' r='0.91' fill='%23FCF8EF'/%3E%3Ccircle cx='22.72' cy='20' r='0.91' fill='%23FCF8EF'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  opacity: 0; transform: rotate(var(--rot, -12deg)) scale(1.2);
}
html:not(.ml-sel-a) .ml-slot.on::after {
  opacity: .92; transform: rotate(var(--rot, -12deg)) scale(1);
  transition: transform 130ms cubic-bezier(.34, 1.56, .64, 1), opacity 90ms linear;
}
html:not(.ml-sel-a) .ml-stamp-tool {
  position: absolute; z-index: 1; bottom: calc(100% - 6 * var(--u)); width: calc(23 * var(--u)); height: calc(33 * var(--u));
  left: calc(8 * var(--u) + var(--slot) * (var(--next, 0) + .5) - 11.5 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -34 28 40'%3E%3Crect x='-13' y='-2' width='26' height='6' rx='1.5' fill='%23C4362A'/%3E%3Crect x='-12' y='-11' width='24' height='10' rx='2' fill='%23D9A867' stroke='%236B3927' stroke-width='1.1'/%3E%3Crect x='-12' y='-11' width='24' height='3' rx='1.5' fill='%23F0C995'/%3E%3Cpath d='M-4 -11C-5 -17 -7 -19 -7 -24C-7 -32 7 -32 7 -24C7 -19 5 -17 4 -11Z' fill='%23E7BC84' stroke='%236B3927' stroke-width='1.1'/%3E%3Cellipse cx='-2.5' cy='-26' rx='1.8' ry='2.6' fill='%23fff' opacity='.55'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(.8px 1.8px .7px rgba(64, 34, 15, .22));
  transition: left .3s cubic-bezier(.33, 1, .68, 1), opacity .2s linear;
}
/* review fix (ART-BIBLE §10 allows no other endless loop): the stamp bobs only while no real progress value exists */
html:not(.ml-sel-a) .ml-coupon.ml-indeterminate .ml-stamp-tool { animation: mlStampBob 1.15s infinite }
html:not(.ml-sel-a) .ml-coupon.ml-full .ml-stamp-tool { opacity: 0 }
@keyframes mlStampBob {
  0%, 100% { transform: translateY(calc(-7 * var(--u))) rotate(-4deg) }
  50% { transform: translateY(0) rotate(-1deg) }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.ml-sel-a) .ml-stamp-tool, html:not(.ml-sel-a) .ml-coupon.ml-indeterminate .ml-stamp-tool { animation: none; transition: none }
  html:not(.ml-sel-a) .ml-slot::after { content: none }
  html:not(.ml-sel-a) .ml-slot.on { background: rgba(184, 142, 92, .5); border-radius: 3px }
}

/* M49 W4: loading failed or the WebGL context was lost: no text, one round reload (Unity's retry arrow). The hero
   stops and fades, the progress hides. The second button sits over the canvas for a lost context after the loader
   has gone. */
.ml-reload {
  box-sizing: border-box; display: grid; place-items: center; width: 52px; height: 52px; margin: 22px 0 0; padding: 0;
  border: 0; border-radius: 50%; background: #d9523d; box-shadow: 0 4px 0 #9f2d22; cursor: pointer; pointer-events: auto;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}
.ml-reload[hidden] { display: none }
.ml-reload::before { content: ""; width: 28px; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M41.93 18.25A17 17 0 1 1 22.19 12.03' fill='none' stroke='%23FFF9EF' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M22.14 7.5L25.05 15.52L29.9 9.22Z' fill='%23FFF9EF' stroke='%23FFF9EF' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat }
.ml-reload:active { transform: translateY(3px); box-shadow: 0 1px 0 #9f2d22 }
.ml-failed .ml-mochi, .ml-failed .ml-shadow, .ml-failed .ml-stamp-tool { animation-play-state: paused }
.ml-failed .ml-hero { opacity: .6 }
.ml-failed .ml-pill, .ml-failed .ml-coupon { display: none !important }
#ml-lost {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background: rgba(255, 249, 239, .62);
}
#ml-lost[hidden] { display: none }
#ml-lost .ml-reload { margin: 0 }

/* M49 W7: a phone turned sideways pauses the game and asks, without words, to turn it back. Cream veil over the
   shell, a 64 px phone that rotates upright (1.2 s loop; still under reduced motion). */
#ml-rotate {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center;
  background: rgba(255, 249, 239, .9);
}
#ml-rotate[hidden] { display: none }
#ml-rotate::before {
  content: ""; width: 64px; height: 64px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='20' y='8' width='24' height='44' rx='5' fill='%23FFF6E4' stroke='%236B3927' stroke-width='2.6'/%3E%3Cpath d='M28 13.5h8' stroke='%236B3927' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='46' r='2' fill='%236B3927'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  animation: mlTurn 1.2s cubic-bezier(.65, 0, .35, 1) infinite;
}
#ml-rotate::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23C4362A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 22C47 13 39 8.5 30.5 9.5'/%3E%3Cpath d='M44.5 21.5L50.5 22.5L52 16.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
@keyframes mlTurn {
  0%, 20% { transform: rotate(-90deg) }
  60%, 100% { transform: rotate(0deg) }
}
@media (prefers-reduced-motion: reduce) { #ml-rotate::before { animation: none } }

/* M49 W1/W3: the rank pill (made by mallangi-leaderboard.js) appears with the game, never over the selection, the
   loader or a Unity modal. html.ml-loading: from the choice until the loader has lifted. data-unsettled: the canvas
   raster does not match its CSS box yet (the pill would sit at a wrong scale). data-ml-host-modal: a Unity modal
   is open: the pill sinks under the same dim (#2B0F18 .58, ART-BIBLE §8.16) and takes no input. */
#mallangi-rank-open { transition: opacity .32s linear }
html.ml-loading #mallangi-rank-open, #mallangi-rank-open[data-unsettled] { opacity: 0; pointer-events: none; transition: none }
html[data-ml-host-modal] #mallangi-rank-open { pointer-events: none }
html.ml-failed #mallangi-rank-open { display: none }
#mallangi-rank-open > span { position: relative }
#mallangi-rank-open > span::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  background: rgba(43, 15, 24, .58); opacity: 0; transition: opacity .15s linear;
}
html[data-ml-host-modal] #mallangi-rank-open > span::after { opacity: 1 }

/* Engine warning/error banners (text is the engine's own) on the bakery panel. Review fix: three lines at most. */
.ml-banner {
  flex: none; margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid #e2c3aa; background: #fff8ec; color: #47291e;
  font: 13px/1.45 var(--ml-text);
  box-shadow: 0 6px 14px rgba(71, 41, 30, .16); word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; max-height: 4.35em;
}
.ml-banner-alert { color: #a8321f }

/* M49 D15 (user "b로해"): release awn=a = the M48 loader awning. These rules used to live only in the review-only module.
   (The M48 select screen that lived here is replaced by HOME-REDESIGN below.) */

.ml-awn-a .ml-awning {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-107.5 0 645 32' preserveAspectRatio='none'%3E\
%3Crect x='-107.5' y='0' width='645' height='19' fill='%23f0c3ae'/%3E\
%3Cg fill='%23f0c3ae'%3E%3Cellipse cx='-53.75' cy='19' rx='17.917' ry='13'/%3E%3Cellipse cx='17.917' cy='19' rx='17.917' ry='13'/%3E%3Cellipse cx='89.583' cy='19' rx='17.917' ry='13'/%3E%3Cellipse cx='161.25' cy='19' rx='17.917' ry='13'/%3E%3Cellipse cx='232.917' cy='19' rx='17.917' ry='13'/%3E%3Cellipse cx='304.583' cy='19' rx='17.917' ry='13'/%3E%3Cellipse cx='376.25' cy='19' rx='17.917' ry='13'/%3E%3Cellipse cx='447.917' cy='19' rx='17.917' ry='13'/%3E%3Cellipse cx='519.583' cy='19' rx='17.917' ry='13'/%3E\
%3C/g%3E\
%3Cg fill='%23b72e24'%3E\
%3Crect x='-107.5' width='35.833' height='19'/%3E\
%3Crect x='-35.833' width='35.833' height='19'/%3E\
%3Crect x='35.833' width='35.833' height='19'/%3E\
%3Crect x='107.5' width='35.833' height='19'/%3E\
%3Crect x='179.167' width='35.833' height='19'/%3E\
%3Crect x='250.833' width='35.833' height='19'/%3E\
%3Crect x='322.5' width='35.833' height='19'/%3E\
%3Crect x='394.167' width='35.833' height='19'/%3E\
%3Crect x='465.833' width='35.833' height='19'/%3E%3Cellipse cx='-89.583' cy='19' rx='17.917' ry='13'/%3E%3Cellipse cx='-17.917' cy='19' rx='17.917' ry='13'/%3E%3Cellipse cx='53.75' cy='19' rx='17.917' ry='13'/%3E%3Cellipse cx='125.417' cy='19' rx='17.917' ry='13'/%3E%3Cellipse cx='197.083' cy='19' rx='17.917' ry='13'/%3E%3Cellipse cx='268.75' cy='19' rx='17.917' ry='13'/%3E%3Cellipse cx='340.417' cy='19' rx='17.917' ry='13'/%3E%3Cellipse cx='412.083' cy='19' rx='17.917' ry='13'/%3E%3Cellipse cx='483.75' cy='19' rx='17.917' ry='13'/%3E\
%3C/g%3E\
%3Cpath fill='none' stroke='%23d9a089' stroke-opacity='.35' stroke-width='1.2' d='M-36.433 19A17.317 12.4 0 0 1 -71.067 19M35.233 19A17.317 12.4 0 0 1 0.6 19M106.9 19A17.317 12.4 0 0 1 72.267 19M178.567 19A17.317 12.4 0 0 1 143.933 19M250.233 19A17.317 12.4 0 0 1 215.6 19M321.9 19A17.317 12.4 0 0 1 287.267 19M393.567 19A17.317 12.4 0 0 1 358.933 19M465.233 19A17.317 12.4 0 0 1 430.6 19M536.9 19A17.317 12.4 0 0 1 502.267 19'/%3E\
%3Cpath fill='none' stroke='%238f231b' stroke-opacity='.35' stroke-width='1.2' d='M-72.267 19A17.317 12.4 0 0 1 -106.9 19M-0.6 19A17.317 12.4 0 0 1 -35.233 19M71.067 19A17.317 12.4 0 0 1 36.433 19M142.733 19A17.317 12.4 0 0 1 108.1 19M214.4 19A17.317 12.4 0 0 1 179.767 19M286.067 19A17.317 12.4 0 0 1 251.433 19M357.733 19A17.317 12.4 0 0 1 323.1 19M429.4 19A17.317 12.4 0 0 1 394.767 19M501.067 19A17.317 12.4 0 0 1 466.433 19'/%3E\
%3C/svg%3E") 50% 0 / calc(645 * var(--ml-ux)) calc(32 * var(--ml-uy)) no-repeat;
  filter: drop-shadow(0 calc(1.2 * var(--ml-uy)) calc(4 * var(--ml-uy)) rgba(107, 57, 39, .22));
  clip-path: inset(0 0 calc(-14 * var(--ml-uy)) 0);
}

/* M49 D15 rank (user "b로해"): rank (rk=a) = the M48 rank button and dialog. These rules used to live
   only in the review-only module, so a release build with the M48 values showed an unstyled select screen. */
/* scoped to html.ml-rk-a (set by mallangi-shell.js when rk=a) */
html.ml-rk-a #mallangi-rank-open{position:fixed;z-index:20;background:transparent;color:#633f2d;border:0;padding:0;font:bold 14px system-ui;cursor:pointer;display:flex;align-items:center;justify-content:center}html.ml-rk-a #mallangi-rank-open[hidden]{display:none}html.ml-rk-a #mallangi-rank-open span{box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:#fff5df;border:1px solid #dfb884;border-radius:999px;box-shadow:0 2px 8px #482c2520;pointer-events:none}html.ml-rk-a #mallangi-rank-dialog{box-sizing:border-box;width:min(94vw,420px);max-height:88dvh;overflow:auto;border:1px solid #dfb884;border-radius:24px;padding:20px;background:#fff9ef;color:#633f2d;font:14px/1.5 system-ui;box-shadow:0 18px 70px #482c2530}html.ml-rk-a #mallangi-rank-dialog::backdrop{background:#392f2b88}html.ml-rk-a #mallangi-rank-dialog h2{margin:0;font-size:23px}html.ml-rk-a #mallangi-rank-dialog .rank-head{display:flex;align-items:center;justify-content:space-between;gap:12px}html.ml-rk-a #mallangi-rank-dialog button{min-height:44px;border:0;background:#d84f39;color:#fff9ef;border-radius:12px;padding:8px 16px;font:bold 14px system-ui;cursor:pointer}html.ml-rk-a #mallangi-rank-dialog [data-close]{background:transparent;color:#8c6c55;padding:4px;width:44px;font:24px system-ui}html.ml-rk-a #mallangi-rank-dialog input{box-sizing:border-box;min-width:0;width:100%;border:1px solid #dfb884;border-radius:12px;padding:11px;background:white;color:#633f2d;font:16px system-ui}html.ml-rk-a #mallangi-rank-dialog form{display:flex;gap:8px;margin:18px 0}html.ml-rk-a #mallangi-rank-dialog form button{flex-shrink:0;white-space:nowrap}html.ml-rk-a #mallangi-rank-dialog [role=status]:empty{display:none}html.ml-rk-a #mallangi-rank-dialog [role=status]{margin:0 0 14px;color:#87563a}html.ml-rk-a #mallangi-rank-dialog table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}html.ml-rk-a #mallangi-rank-dialog th{font-weight:500;color:#8c6c55;text-align:left}html.ml-rk-a #mallangi-rank-dialog td{border-bottom:1px solid #ead7bb;padding:12px 4px;overflow-wrap:anywhere}html.ml-rk-a #mallangi-rank-dialog td:last-child,html.ml-rk-a #mallangi-rank-dialog th:last-child{text-align:right;white-space:nowrap}html.ml-rk-a #mallangi-rank-dialog td[data-empty]{color:#8c6c55;text-align:center;padding:22px 0}html.ml-rk-a #mallangi-rank-dialog .rank-delete{background:transparent;color:#a34b35;width:44px;min-width:44px;padding:10px;vertical-align:middle;margin-left:4px}html.ml-rk-a #mallangi-rank-dialog .rank-delete svg{width:20px;height:20px;display:block}html.ml-rk-a #mallangi-rank-dialog button:disabled{opacity:.45;cursor:wait}html.ml-rk-a #mallangi-rank-dialog tr[data-mine]{background:#ffe5b9;color:#7b351c;font-weight:700}html.ml-rk-a #mallangi-rank-dialog td:nth-child(3){white-space:nowrap;font-weight:700;color:#b24329}html.ml-rk-a #mallangi-rank-dialog th{white-space:nowrap}html.ml-rk-a #mallangi-rank-dialog td{padding:10px 3px}html.ml-rk-a #mallangi-rank-dialog .rank-delete{width:44px;min-width:44px;margin-left:0}

/* FINISH-POLISH: shared bakery materials; keep the shipped A composition. */
:root {
  --ml-ui-paper:#fff9ef;
  --ml-ui-ink:#4a2a1e;
  --ml-ui-muted:#79503b;
  --ml-ui-line:#d9b994;
  --ml-ui-coral:#c74737;
  --ml-ui-shadow:0 4px 0 #6b392729,0 16px 40px #482c2526;
}
html.ml-rk-a #mallangi-rank-dialog {
  overflow:hidden; padding:16px; border:2px solid var(--ml-ui-line);
  color:var(--ml-ui-ink); font:14px/1.5 var(--ml-sans); box-shadow:var(--ml-ui-shadow);
}
html.ml-rk-a #mallangi-rank-dialog[open] { display:flex; flex-direction:column; }
html.ml-rk-a #mallangi-rank-dialog .rank-head,
html.ml-rk-a #mallangi-rank-dialog form,
html.ml-rk-a #mallangi-rank-dialog [role=status] { flex-shrink:0; }
html.ml-rk-a #mallangi-rank-dialog .rank-scroll {
  min-height:0; overflow:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#b98c60 var(--ml-ui-paper); scrollbar-gutter:stable;
}
html.ml-rk-a #mallangi-rank-dialog h2 { font-size:22px; line-height:1.3; }
html.ml-rk-a #mallangi-rank-dialog button { font-family:var(--ml-sans); background:var(--ml-ui-coral); box-shadow:0 3px 0 #922f26; }
html.ml-rk-a #mallangi-rank-dialog [data-close] {
  flex:none; border:1.5px solid var(--ml-ui-line); border-radius:50%;
  background:#fffaf0; color:#6b3927; font:24px/1 var(--ml-sans); box-shadow:none;
}
html.ml-rk-a #mallangi-rank-dialog input { font-family:var(--ml-sans); }
html.ml-rk-a #mallangi-rank-dialog th {
  position:sticky; top:0; z-index:1; background:var(--ml-ui-paper);
  color:var(--ml-ui-muted); font-weight:700; padding:8px 3px;
}
html.ml-rk-a #mallangi-rank-dialog .rank-delete { background:transparent; box-shadow:none; }
html.ml-rk-a #mallangi-rank-dialog button:focus-visible,
html.ml-rk-a #mallangi-rank-dialog input:focus-visible {
  outline:3px solid #b74330; outline-offset:3px;
}
html.ml-rk-a #mallangi-rank-dialog button:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
@media (max-width:370px) {
  html.ml-rk-a #mallangi-rank-dialog { width:calc(100vw - 24px); padding:12px; font-size:12px; }
  html.ml-rk-a #mallangi-rank-dialog form { gap:6px; margin:12px 0; }
  html.ml-rk-a #mallangi-rank-dialog form button { padding:8px 10px; }
}

/* RESPONSIVE-FIT: real visible area, including address-bar and keyboard changes. */
#unity-container.unity-desktop, #unity-container.unity-mobile {
  top:var(--ml-viewport-top); bottom:auto; height:var(--ml-viewport-height);
}
html.ml-rk-a #mallangi-rank-dialog {
  top:calc(var(--ml-viewport-top) + (var(--ml-viewport-height) + max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom))) / 2);
  bottom:auto; margin-block:0; transform:translateY(-50%);
  max-height:calc(var(--ml-viewport-height) - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)));
}
html.ml-rk-a.ml-short-viewport #mallangi-rank-dialog { overflow:auto; }
html.ml-rk-a.ml-short-viewport #mallangi-rank-dialog .rank-scroll { flex-shrink:0; }

/* DEVICE-CLIP: native menu/help/confirmation must remain reachable even in
   a tiny window. The visible host scrolls; only a paused dialog uses this height. */
html.ml-scroll-game-modal #unity-container { overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#a57b5b #fff9ef; }
html.ml-scroll-game-modal #unity-fullscreen-container,
html.ml-scroll-game-modal #unity-canvas { min-height:320px; }
html.ml-scroll-game-modal #unity-canvas { touch-action:pan-y; }
html.ml-scroll-game-modal #mallangi-rank-open { visibility:hidden; }
html.ml-scroll-game-modal #mallangi-economy-abandon {
  position:relative; left:auto; top:auto; bottom:auto; transform:none; margin:12px auto;
}

/* BG-YEAST (2026-10-22, branch claude/bg-yeastken): the rank button in the header buttons' Bear-Bakery style — cream face,
   3 u cocoa-brown edge, 3 u tan lip, 14 u corners; the press drops 1.5 u and shrinks to .97 (ease-out, 80 ms). Selectors
   outrank both the leaderboard's injected rule and the ml-rk-a rule above. Delete this block with YeastLook = false. */
html:root body #mallangi-rank-open { color: #8B5E3C }
html:root body #mallangi-rank-open span { border-radius: calc(14*var(--rank-u,1px)); background: #FFF8EC;
  box-shadow: inset 0 0 0 calc(3*var(--rank-u,1px)) #8B5E3C, 0 calc(3*var(--rank-u,1px)) 0 #D9BFA0; border: 0 }
html:root body #mallangi-rank-open span::before { display: none }
html:root body #mallangi-rank-open:active span { transform: translateY(calc(1.5*var(--rank-u,1px))) scale(.97);
  box-shadow: inset 0 0 0 calc(3*var(--rank-u,1px)) #8B5E3C, 0 calc(1.5*var(--rank-u,1px)) 0 #D9BFA0 }
@media (hover:hover) and (pointer:fine) { html:root body #mallangi-rank-open:hover span { background: #FFFCF6 } }
@media (prefers-reduced-motion: reduce) { html:root body #mallangi-rank-open:active span { transform: none } }
/* BG-SODA (2026-10-24, WatermelonRuntime.SodaLook): the rank button as the draft B2 header buttons — white face, 2 u cocoa
   line #4A3229, 12 u corners, no lip; the press only shrinks to .97. Same selectors as BG-YEAST, later, so they win.
   Off with SodaLook = false (2026-10-24): uncomment the rules below with SodaLook = true.
html:root body #mallangi-rank-open { color: #4A3229 }
html:root body #mallangi-rank-open span { border-radius: calc(12*var(--rank-u,1px)); background: #FFFFFF;
  box-shadow: inset 0 0 0 calc(2*var(--rank-u,1px)) #4A3229 }
html:root body #mallangi-rank-open:active span { transform: scale(.97); box-shadow: inset 0 0 0 calc(2*var(--rank-u,1px)) #4A3229 }
@media (hover:hover) and (pointer:fine) { html:root body #mallangi-rank-open:hover span { background: #F4FAFC } } */

/* ============================================================================================================
   UI-TONE (2026-10-24, user: “인게임 뿐만 아니라 ui 싹다 저 톤에 맞게 정돈하셈”): every page surface in the in-game header's
   Bear-Bakery tone (WatermelonRuntime.Yeast*): cream #FFF8EC faces with a cocoa #8B5E3C edge and a tan #D9BFA0 lip, white
   inner rows with a 2 px cocoa edge, the strawberry #E05A74 primary (lip #B8475E), gold only for something ready to take,
   the mint/white awning over the cream wall #FCF5EA → #F6E9D6 and the mint counter, one dark-cocoa dim, Mallangi Sans
   everywhere, no gradients or gloss. Tokens below; mallangi-economy.css uses them too. html.ml-ui-y (index.html) switches
   the whole block (here and in mallangi-economy.css).
   ============================================================================================================ */
html.ml-ui-y {
  --y-cream: #FFF8EC; --y-ink: #8B5E3C; --y-lip: #D9BFA0; --y-white: #FFFFFF; --y-track: #F5EADD; --y-locked: #E7DED4; --y-pencil: #B8957A;
  --y-wall-top: #FCF5EA; --y-wall-low: #F6E9D6; --y-wood: #E9C9A0; --y-mint: #A8DCD1; --y-mint-deep: #86C7BA;
  --y-choco: #7A4A2E; --y-choco-edge: #5A341F; --y-choco-lip: #4A2A18; --y-straw: #E05A74; --y-straw-lip: #B8475E; --y-straw-ink: #B23652; --y-pink: #F9B3C1; --y-best: #FFE08A;
  --y-gold: #FFC93C; --y-coin: #FFD86B; --y-coin-core: #E3AE3C; --y-gold-lip: #D9A93A;
  /* the one dim (the item cut-in's #2B1A0F). The canvas blends its .42 in linear light: over the cream it lands on #CCC6BC,
     which this sRGB overlay reproduces on the rank pill's cream face (measured #CCC6BC by #CAC4BA, cocoa edge within 9/255) */
  --y-dim: rgba(43, 26, 15, .4); --y-dim-canvas: rgba(51, 48, 44, .25);
  --y-edge: 2.5px; --y-lip-h: 4px;
  /* the game's header scale (WatermelonStageLayout, header 276 u + field 650 u) */
  --y-u: min(calc(100vw / 430), max(calc(100vh / 926), .74px), 1.25px);
  --y-awning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 71.667 32' preserveAspectRatio='none'%3E%3Cpath fill='%23a8dcd1' d='M0 0H35.833V19A17.917 13 0 0 1 0 19Z'/%3E%3Cpath fill='%23fff' d='M35.833 0H71.667V19A17.917 13 0 0 1 35.833 19Z'/%3E%3Cg fill='none' stroke-width='1.2' stroke-opacity='.35'%3E%3Cpath stroke='%238ccbbe' d='M35.233 19A17.317 12.4 0 0 1 .6 19'/%3E%3Cpath stroke='%23e3d6c6' d='M71.067 19A17.317 12.4 0 0 1 36.433 19'/%3E%3C/g%3E%3C/svg%3E");
}
@supports (height: 1dvh) { html.ml-ui-y { --y-u: min(calc(100vw / 430), max(calc(100dvh / 926), .74px), 1.25px) } }
html.ml-ui-y body { font-family: var(--ml-sans) }
html.ml-ui-y #unity-warning { --u: min(calc(100vw / 430), max(calc(100vh / 926), .74px), 1.25px) }
@supports (height: 1dvh) { html.ml-ui-y #unity-warning { --u: min(calc(100vw / 430), max(calc(100dvh / 926), .74px), 1.25px) } }
html.ml-ui-y #mallangi-game-select button:focus-visible, html.ml-ui-y .ml-reload:focus-visible, html.ml-ui-y #mallangi-rank-open:focus-visible { outline-color: var(--y-straw-ink) }

/* loader = the game's first frame: the wall over the whole window, the mint/white awning across it (same phase as the
   header: tile start = 50% − 215 u) and the counter where the stage puts it (counter 600 u, mint 612 u of the 650 u field
   under the 276 u header), so the cross-fade only adds the jar and the HUD */
html.ml-ui-y #unity-loading-container { background: linear-gradient(var(--y-wall-top), var(--y-wall-low)) }
html.ml-ui-y .ml-shell {
  position: static; background: none;
  --ml-u: min(calc(100vw / 430), max(calc(100vh / 926), .74px), 1.25px);
  --y-lshell: min(100vw, calc(430 * var(--ml-u)));
  --y-lstage: min(calc(100vh - 276 * var(--ml-u)), calc(var(--y-lshell) * 650 / 430));
  --y-lfu: calc(var(--y-lstage) / 650);
}
@supports (height: 1dvh) { html.ml-ui-y .ml-shell { --ml-u: min(calc(100vw / 430), max(calc(100dvh / 926), .74px), 1.25px); --y-lstage: min(calc(100dvh - 276 * var(--ml-u)), calc(var(--y-lshell) * 650 / 430)) } }
@supports (width: 1cqw) {
  html.ml-ui-y .ml-shell {
    --ml-u: min(calc(100cqw / 430), max(calc(100cqh / 926), .74px), 1.25px);
    --y-lshell: min(100cqw, calc(430 * var(--ml-u)));
    --y-lstage: min(calc(100cqh - 276 * var(--ml-u)), calc(var(--y-lshell) * 650 / 430));
  }
}
@media (max-width: 430px) { html.ml-ui-y .ml-shell { --y-lshell: 100vw } }
@supports (width: 1cqw) { @media (max-width: 430px) { html.ml-ui-y .ml-shell { --y-lshell: 100cqw } } }
html.ml-ui-y .ml-shell::before { content: none }
html.ml-ui-y .ml-shell::after {
  left: 0; right: 0; width: auto; top: calc(276 * var(--ml-u) + 600 * var(--y-lfu)); bottom: 0;
  background:
    linear-gradient(var(--y-pencil), var(--y-pencil)) 0 0 / 100% max(1px, calc(1.2 * var(--y-lfu))) no-repeat,
    linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)) 0 calc(3 * var(--y-lfu)) / 100% calc(1.4 * var(--y-lfu)) no-repeat,
    linear-gradient(var(--y-pencil), var(--y-pencil)) 0 calc(11.4 * var(--y-lfu)) / 100% max(1px, calc(1.2 * var(--y-lfu))) no-repeat,
    linear-gradient(rgba(134, 199, 186, .35), rgba(134, 199, 186, .35)) 0 calc(12 * var(--y-lfu)) / 100% calc(5 * var(--y-lfu)) no-repeat,
    linear-gradient(90deg, rgba(134, 199, 186, .55) 0 calc(1.1 * var(--y-lfu)), transparent 0 calc(2 * var(--y-lfu)), rgba(255, 255, 255, .35) 0 calc(3 * var(--y-lfu)), transparent 0)
      calc(50% - var(--y-lstage) * 215 / 650 + 33.487 * var(--y-lfu)) calc(16 * var(--y-lfu)) / calc(34.642 * var(--y-lfu)) 100% repeat-x,
    linear-gradient(var(--y-wood), var(--y-wood)) 0 0 / 100% calc(12 * var(--y-lfu)) no-repeat,
    var(--y-mint);
}
@media (orientation: landscape) and (max-height: 599.98px) { html.ml-ui-y .ml-shell::after { content: none } }
html.ml-ui-y.ml-awn-a .ml-awning {
  left: 0; right: 0; width: auto; clip-path: none;
  background: var(--y-awning) calc(50% - 179.1667 * var(--ml-ux)) 0 / calc(71.6667 * var(--ml-ux)) calc(32 * var(--ml-uy)) repeat-x;
  filter: drop-shadow(0 calc(1.2 * var(--ml-uy)) calc(2.5 * var(--ml-uy)) rgba(184, 149, 122, .32));
}
/* the progress: the combo rail's track and pink fill in a cocoa edge with the tan lip */
html.ml-ui-y .ml-pill { box-sizing: border-box; height: 16px; border: var(--y-edge) solid var(--y-ink); border-radius: 8px; background: var(--y-track); box-shadow: 0 3px 0 var(--y-lip) }
html.ml-ui-y #unity-progress-bar-full { border-radius: 6px; background: var(--y-pink); box-shadow: none }
html.ml-ui-y .ml-sheen { inset: 0; border-radius: 6px }
html.ml-ui-y .ml-sheen::before { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 14%, rgba(255, 255, 255, .5) 33%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, .5) 67%, rgba(255, 255, 255, 0) 86%) 0 0 / 194px 100% repeat-x }
html.ml-ui-y .ml-shadow { background: radial-gradient(closest-side, rgba(139, 94, 60, .16), rgba(139, 94, 60, .1) 55%, rgba(139, 94, 60, 0)) }
/* reload (load failed / context lost): the strawberry primary as a round jelly button */
html.ml-ui-y .ml-reload { background: var(--y-straw); box-shadow: inset 0 0 0 var(--y-edge) var(--y-ink), 0 var(--y-lip-h) 0 var(--y-straw-lip) }
html.ml-ui-y .ml-reload:active { transform: translateY(2.5px); box-shadow: inset 0 0 0 var(--y-edge) var(--y-ink), 0 1.5px 0 var(--y-straw-lip) }
html.ml-ui-y #ml-lost { background: rgba(252, 245, 234, .62) }
html.ml-ui-y .ml-banner { border: 2px solid var(--y-ink); background: var(--y-cream); color: var(--y-ink); font: 600 13px/1.45 var(--ml-sans); box-shadow: 0 3px 0 var(--y-lip) }
html.ml-ui-y .ml-banner-alert { color: var(--y-straw-ink) }
html.ml-ui-y #ml-rotate { background: rgba(252, 245, 234, .92) }
html.ml-ui-y #ml-rotate::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='20' y='8' width='24' height='44' rx='6' fill='%23FFF8EC' stroke='%238B5E3C' stroke-width='3'/%3E%3Cpath d='M28 13.5h8' stroke='%238B5E3C' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='46' r='2.2' fill='%238B5E3C'/%3E%3C/svg%3E") }
html.ml-ui-y #ml-rotate::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23E05A74' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 22C47 13 39 8.5 30.5 9.5'/%3E%3Cpath d='M44.5 21.5L50.5 22.5L52 16.5'/%3E%3C/g%3E%3C/svg%3E") }

/* ============================================================================================================
   HOME-REDESIGN (2026-10-25, user 2026-10-24: “메인화면도 단순히 색감만 바꾸는 게 아니라 전체적으로 모든 요소를 톤에 맞게
   재디자인하고 … 싹다 일관성과 통일성 맞춰”). The approved design: work/background-drafts-2026-10-22/home-redesign/final
   (built from the official references). The shop front owns the window and never scrolls: the mint/white awning, the
   hanging sign (title + tagline), the arch shop window with the white mochi on a cake stand, and the counter with the
   dock [모드][게임 시작][상점] under the equipped slots (HOME-17: the mode card took 일일 퀘스트's place); ?, 일일 퀘스트 and
   the coins hang at the 430 column's top corners.
   UI: cream faces, cocoa #8B5E3C outlines, tan lip, no gradients; scene props: pencil lines; gold only for something
   ready to take. Lengths in the game's header unit (--y-u). mallangi-economy.css seats the economy panel's pieces in
   .sel-dock (its grid areas: err, slots, mode, start, shop). This block replaces the M48/UI-TONE select-screen rules.
   ============================================================================================================ */
html.ml-ui-y #mallangi-game-select {
  --sel-col: min(406px, calc(100vw - 24px));
  --sel-top: max(calc(38 * var(--y-u)), env(safe-area-inset-top));
  position: fixed; left: 0; right: 0; top: var(--ml-viewport-top, 0px); height: var(--ml-viewport-height, 100vh); min-height: 0;
  box-sizing: border-box; margin: 0; padding: 0; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; place-items: stretch;
  background: linear-gradient(var(--y-wall-top), var(--y-wall-low)); color: var(--y-ink); font-family: var(--ml-sans); text-align: left;
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
html.ml-ui-y #mallangi-game-select :where([class^="sel-"], [class*=" sel-"]) { box-sizing: border-box }
html.ml-ui-y .sel-defs { position: absolute; width: 0; height: 0; overflow: hidden }
html.ml-ui-y #mallangi-game-select .sel-awning {
  display: block; position: absolute; left: 0; right: 0; top: 0; height: calc(32 * var(--y-u)); z-index: 6; pointer-events: none;
  background: var(--y-awning) calc(50% - 179.1667 * var(--y-u)) 0 / calc(71.6667 * var(--y-u)) calc(32 * var(--y-u)) repeat-x;
  filter: drop-shadow(0 calc(1.2 * var(--y-u)) calc(2.5 * var(--y-u)) rgba(184, 149, 122, .32));
}

/* the hanging sign (the game's title board: a chocolate plaque, darker edge and lip; HOME-17 F below) */
html.ml-ui-y .sel-sign-row {
  grid-row: 1; align-self: start; position: relative; z-index: 5; display: flex; justify-content: center;
  padding: calc(var(--sel-top) + 44px + 26 * var(--y-u)) 12px 0;
}
html.ml-ui-y .sel-sign {
  --sel-drop: calc(var(--sel-top) + 44px + 2 * var(--y-u));
  position: relative; max-width: 100%; text-align: center; padding: calc(12 * var(--y-u)) calc(24 * var(--y-u)) calc(11 * var(--y-u));
  background: var(--y-choco); border: var(--y-edge) solid var(--y-choco-edge); border-radius: calc(20 * var(--y-u)); box-shadow: 0 var(--y-lip-h) 0 var(--y-choco-lip);
}
html.ml-ui-y .sel-rope { position: absolute; bottom: calc(100% - 6px); width: 2.5px; height: calc(var(--sel-drop) + 6px); background: var(--y-pencil); border-radius: 2px; z-index: -1 }
html.ml-ui-y .sel-rope-l { left: 24% }
html.ml-ui-y .sel-rope-r { right: 24% }
html.ml-ui-y .sel-ring { position: absolute; top: -7px; width: 13px; height: 13px; border-radius: 50%; background: var(--y-cream); box-shadow: inset 0 0 0 2.2px var(--y-ink); transform: translateX(-50%) }
html.ml-ui-y .sel-ring-l { left: calc(24% + 1.25px) }
html.ml-ui-y .sel-ring-r { left: calc(76% - 1.25px) }
/* HOME-17 request 13 (user 2026-10-27: “'말랑이 디저트가게' 간판 가시성↑(귀여움 유지)”), then “타이틀을 치이카와랑 완전 똑같게
   하면안됨” → F (user pick, board home17 #sign2; ref Kirby's Dream Buffet logo = a chocolate plaque with cream letters): the
   board (above) is chocolate with a darker edge and lip, the title is cream with a strawberry drop, no white stroke; the round
   heavy face, 40 u and the alternate tilt stay. */
html.ml-ui-y #game-select-title {
  margin: 0; color: var(--y-cream); font-family: var(--ml-sans); font-weight: 900; font-size: calc(40 * var(--y-u)); line-height: 1.12;
  letter-spacing: -.02em; white-space: nowrap; text-shadow: none; filter: drop-shadow(0 calc(2.5 * var(--y-u)) 0 var(--y-straw));
}
html.ml-ui-y #game-select-title .sel-g { display: inline-block; transform: rotate(-2.5deg) }
html.ml-ui-y #game-select-title .sel-g:nth-child(even) { transform: translateY(calc(-1 * var(--y-u))) rotate(2.5deg) }
html.ml-ui-y .sel-tag {
  display: flex; align-items: center; justify-content: center; gap: 7px; margin: calc(5 * var(--y-u)) 0 0;
  color: var(--y-straw-ink); font-weight: 800; font-size: max(12px, calc(13.5 * var(--y-u))); line-height: 1.25; white-space: nowrap;
}
html.ml-ui-y .sel-tag::before, html.ml-ui-y .sel-tag::after { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--y-lip) }
html.ml-ui-y .sel-berry { position: absolute; right: calc(-14 * var(--y-u)); top: calc(-19 * var(--y-u)); width: calc(38 * var(--y-u)); height: calc(38 * var(--y-u)); transform: rotate(14deg) }
html.ml-ui-y .sel-leaf { position: absolute; left: calc(-12 * var(--y-u)); bottom: calc(-12 * var(--y-u)); width: calc(34 * var(--y-u)); height: calc(26 * var(--y-u)) }

/* the stage: the arch window, the phones' wall sconces and the white mochi on its cake stand. Sizes follow the stage box
   (container units where the browser has them; viewport estimates otherwise) */
/* HOME-17 (QA D3): the stage paints over the sign (same z, later in the page), so a tall hat or a hopping jelly passes in front of
   the board instead of vanishing behind it (320x568, 844x390, PC); the awning (6) stays on top */
html.ml-ui-y .sel-stage { grid-row: 2; align-self: stretch; position: relative; z-index: 5; min-height: 0; --sel-cw: 1vw; --sel-ch: calc((var(--ml-viewport-height, 100vh) - 330px) / 100) }
@supports (width: 1cqw) { html.ml-ui-y .sel-stage { container-type: size; --sel-cw: 1cqw; --sel-ch: 1cqh } }
html.ml-ui-y .sel-window {
  --bw: min(calc(306 * var(--y-u)), calc(80 * var(--sel-cw)));
  position: absolute; left: 50%; bottom: 0; width: var(--bw); height: min(calc(100 * var(--sel-ch) - 16px), calc(var(--bw) * 1.6));
  transform: translateX(-50%); pointer-events: none; overflow: hidden;
  border: calc(9 * var(--y-u)) solid #FFFFFF; border-bottom: 0; border-radius: calc(var(--bw) / 2) calc(var(--bw) / 2) 0 0;
  box-shadow: 0 0 0 1.6px #D9C3AC, inset 0 0 0 1.6px #D9C3AC;
  background:
    radial-gradient(closest-side, #FFFFFF 0 95%, transparent) calc(50% - var(--bw) * .1) calc(var(--bw) * .085) / calc(var(--bw) * .22) calc(var(--bw) * .06) no-repeat,
    radial-gradient(closest-side, #FFFFFF 0 95%, transparent) calc(50% - var(--bw) * .03) calc(var(--bw) * .062) / calc(var(--bw) * .11) calc(var(--bw) * .055) no-repeat,
    radial-gradient(closest-side, #FFFFFF 0 95%, transparent) calc(50% + var(--bw) * .27) calc(var(--bw) * .43) / calc(var(--bw) * .17) calc(var(--bw) * .048) no-repeat,
    radial-gradient(closest-side, #FFFFFF 0 95%, transparent) calc(50% - var(--bw) * .3) calc(var(--bw) * .47) / calc(var(--bw) * .13) calc(var(--bw) * .042) no-repeat,
    linear-gradient(#C9E6DF, #DDEFEA 55%, #E6F3EF);
}
html.ml-ui-y .sel-window svg { position: absolute; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: auto }
html.ml-ui-y .sel-window::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: calc(7 * var(--y-u)); transform: translateX(-50%); background: #FFFFFF; box-shadow: 0 0 0 1.2px #D9C3AC; z-index: 1 }
html.ml-ui-y .sel-window::after { content: ""; position: absolute; left: 0; right: 0; top: 44%; height: calc(7 * var(--y-u)); background: #FFFFFF; box-shadow: 0 0 0 1.2px #D9C3AC; z-index: 1 }
html.ml-ui-y .sel-sconce {
  --bw: min(calc(306 * var(--y-u)), calc(80 * var(--sel-cw)));
  position: absolute; z-index: 1; width: calc(58 * var(--y-u)); pointer-events: none;
  top: calc(100 * var(--sel-ch) - min(calc(100 * var(--sel-ch) - 16px), calc(var(--bw) * 1.6)) + var(--bw) * .2);
}
html.ml-ui-y .sel-sconce svg { display: block; width: 100%; height: auto; overflow: visible }
html.ml-ui-y .sel-sconce-l { right: calc(50% + var(--bw) / 2 + 2 * var(--y-u)) }
html.ml-ui-y .sel-sconce-r { left: calc(50% + var(--bw) / 2 + 2 * var(--y-u)) }
html.ml-ui-y .sel-sconce-r svg { transform: scaleX(-1) }
html.ml-ui-y .sel-sconce::before {
  content: ""; position: absolute; left: -40%; top: 30%; width: 120%; aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 226, 160, .5), rgba(255, 226, 160, 0));
}
html.ml-ui-y .sel-sconce-l::before { left: -6% }
html.ml-ui-y .sel-sconce-r::before { left: -14% }
@container (max-height: 400px) { html.ml-ui-y .sel-sconce { display: none } }
html.ml-ui-y .sel-hero-group {
  --hw: min(calc(360 * var(--y-u)), calc(80 * var(--sel-cw)), calc((100 * var(--sel-ch) - 20px) / 1.08));
  position: absolute; left: 50%; bottom: calc(-5 * var(--y-u) - var(--hw) * .033); width: var(--hw);
  transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
}
/* the mochi's box: one size after load (the tutorial ring measures only on step changes and resizes). The canvas mochi is
   mounted into button.sel-hero and may draw in .sel-hero-room (30 % of the box width left and right, 48 % above, 13 % below);
   nothing around it clips. */
html.ml-ui-y .sel-hero-slot { position: relative; z-index: 2; flex: none; width: calc(var(--hw) * .8); aspect-ratio: 176 / 158; margin-bottom: calc(var(--hw) * -.088) }
html.ml-ui-y .sel-hero-room { position: absolute; left: -30%; right: -30%; top: calc(-48% * 176 / 158); bottom: calc(-13% * 176 / 158); pointer-events: none }
html.ml-ui-y #mallangi-game-select .sel-hero {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 46% 46% 40% 40%;
  background: none; color: inherit; font: inherit; overflow: visible; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
html.ml-ui-y #mallangi-game-select .sel-hero:focus-visible { outline: 3px solid var(--y-straw-ink); outline-offset: 4px }
html.ml-ui-y .sel-hero .game-select-hero { display: block; width: 100%; height: 100%; margin: 0; filter: none; pointer-events: none; transform-origin: 50% 92% }
/* until the canvas mochi is mounted (data-live on the button), a press gives the picture one squish */
html.ml-ui-y .sel-hero.sel-hero-poke .game-select-hero { animation: sel-poke .52s cubic-bezier(.3, 1.6, .5, 1) }
@keyframes sel-poke { 0% { transform: scale(1, 1) } 22% { transform: scale(1.14, .84) } 48% { transform: scale(.93, 1.08) } 72% { transform: scale(1.03, .97) } 100% { transform: none } }
html.ml-ui-y .sel-bubble {
  position: absolute; z-index: 3; left: 66%; bottom: 96%; margin: 0; padding: 7px 12px; white-space: nowrap; pointer-events: none;
  border: var(--y-edge) solid var(--y-ink); border-radius: 16px; background: var(--y-cream); color: var(--y-ink); box-shadow: 0 3px 0 var(--y-lip);
  font-weight: 800; font-size: max(13px, calc(14 * var(--y-u))); line-height: 1.2;
}
html.ml-ui-y .sel-bubble[hidden] { display: none }
html.ml-ui-y .sel-bubble::after { /* the tail: bottom left, toward the mochi's head */
  content: ""; position: absolute; left: 14px; bottom: -8px; width: 12px; height: 12px; box-sizing: border-box; background: var(--y-cream);
  border-right: var(--y-edge) solid var(--y-ink); border-bottom: var(--y-edge) solid var(--y-ink); border-bottom-right-radius: 3px; transform: skewX(28deg) rotate(45deg);
}
html.ml-ui-y .sel-poke-lines { position: absolute; z-index: 3; left: -1%; top: 8%; width: 15%; height: auto; pointer-events: none }
/* HOME-MOCHI: once mallangi-mochi.js has drawn the canvas mochi (data-live on the button) the picture, the still poke lines
   and the plate shadow give way: the canvas draws the body, every reaction's effect and its own contact shadow */
html.ml-ui-y .sel-hero[data-live] .game-select-hero { visibility: hidden }
html.ml-ui-y .sel-hero[data-live] ~ .sel-poke-lines, html.ml-ui-y .sel-hero-group:has(.sel-hero[data-live]) .sel-plate-shadow { display: none }
html.ml-ui-y .sel-stand { position: relative; z-index: 1; display: block; width: 100%; height: auto }

/* the counter front = the dock (the game's counter: wood top 12 u, pencil lines, mint planks) */
html.ml-ui-y .sel-counter {
  grid-row: 3; align-self: end; position: relative; /* no z-index: the panel's fixed ?, coins and 상점 sheet rise over the whole home */
  padding: calc(24 * var(--y-u)) 12px calc(max(calc(16 * var(--y-u)), 10px) + env(safe-area-inset-bottom));
  background:
    linear-gradient(var(--y-pencil), var(--y-pencil)) 0 0 / 100% max(1px, calc(1.2 * var(--y-u))) no-repeat,
    linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)) 0 calc(3 * var(--y-u)) / 100% calc(1.4 * var(--y-u)) no-repeat,
    linear-gradient(var(--y-pencil), var(--y-pencil)) 0 calc(11.4 * var(--y-u)) / 100% max(1px, calc(1.2 * var(--y-u))) no-repeat,
    linear-gradient(rgba(134, 199, 186, .35), rgba(134, 199, 186, .35)) 0 calc(12 * var(--y-u)) / 100% calc(5 * var(--y-u)) no-repeat,
    linear-gradient(90deg, rgba(134, 199, 186, .55) 0 calc(1.1 * var(--y-u)), transparent 0 calc(2 * var(--y-u)), rgba(255, 255, 255, .35) 0 calc(3 * var(--y-u)), transparent 0)
      calc(50% - 17.321 * var(--y-u)) calc(16 * var(--y-u)) / calc(34.642 * var(--y-u)) 100% repeat-x,
    linear-gradient(var(--y-wood), var(--y-wood)) 0 0 / 100% calc(12 * var(--y-u)) no-repeat,
    var(--y-mint);
}
html.ml-ui-y #mallangi-game-select .sel-dock {
  position: relative; /* no z-index (as above) */ width: var(--sel-col); max-width: none; margin: 0 auto; padding: 0; text-align: center;
  display: grid; grid-template-columns: 78px minmax(0, 1fr) 78px; grid-template-areas: "err err err" "slots slots slots" "mode start shop";
  column-gap: 10px; row-gap: 0; align-items: end; justify-items: center;
}
html.ml-ui-y .sel-dock .game-select-options { grid-area: start; position: relative; z-index: 2; display: block; width: 100%; margin: 0 }
/* 게임 시작 = the widest strawberry jelly pill (the play button is the biggest thing on the counter; no gloss) */
html.ml-ui-y #mallangi-game-select .sel-start {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 72px; min-height: 0;
  margin: 0; padding: 0 12px 2px; border: 0; border-radius: 999px; background: var(--y-straw); color: #FFFFFF; font: inherit; text-align: center; cursor: pointer;
  box-shadow: inset 0 0 0 var(--y-edge) var(--y-ink), 0 5px 0 var(--y-straw-lip); transition: none;
}
html.ml-ui-y #mallangi-game-select .sel-start:active { transform: translateY(3px); box-shadow: inset 0 0 0 var(--y-edge) var(--y-ink), 0 2px 0 var(--y-straw-lip) }
@media (hover: hover) and (pointer: fine) {
  html.ml-ui-y #mallangi-game-select .sel-start:hover { background: #E4687F }
  /* the panel's cream buttons (mallangi-economy.css keeps its single hover rule for the 상점 cards) */
  html.ml-ui-y #mallangi-economy-home .ec-help:hover, html.ml-ui-y #mallangi-economy-home .ec-journal:hover, html.ml-ui-y #mallangi-economy-home .ec-mode:hover,
  html.ml-ui-y #mallangi-economy-home .ksh-open:hover, html.ml-ui-y #mallangi-economy-home .ksh-slots:hover { background: #FFFCF6 }
}
html.ml-ui-y .sel-start-icon { display: block; width: 25px; height: 25px; flex: none; filter: drop-shadow(0 1.5px 0 var(--y-straw-lip)) }
html.ml-ui-y .sel-start strong {
  display: block; margin: 0; color: #FFFFFF; font-weight: 900; font-size: clamp(20px, 6.15vw, 24px); line-height: 1; letter-spacing: -.01em;
  white-space: nowrap; text-shadow: 0 1.5px 0 var(--y-straw-lip);
}
@media (max-width: 345px) {
  html.ml-ui-y .sel-start-icon { display: none }
  html.ml-ui-y #mallangi-game-select .sel-dock { column-gap: 8px; grid-template-columns: 74px minmax(0, 1fr) 74px }
}

/* PC (wide, not short): the wall of the game's PC screen: hanging lamps with their glow, rounded L shelves with jars,
   bread, plants and mochi friends, bread and a jar on the counter */
html.ml-ui-y .sel-deco, html.ml-ui-y .sel-counter-prop { display: none }
@media (min-width: 760px) and (min-aspect-ratio: 1/1) and (min-height: 600px) {
  html.ml-ui-y .sel-deco { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none }
  html.ml-ui-y .sel-lamp { position: absolute; top: 0; width: calc(64 * var(--y-u)) }
  html.ml-ui-y .sel-lamp svg, html.ml-ui-y .sel-shelf svg, html.ml-ui-y .sel-counter-prop svg { display: block; width: 100%; height: auto; overflow: visible }
  html.ml-ui-y .sel-l1 { left: calc(50% - 600 * var(--y-u)) }
  html.ml-ui-y .sel-l2 { left: calc(50% - 400 * var(--y-u)) }
  html.ml-ui-y .sel-r1 { left: calc(50% + 336 * var(--y-u)) }
  html.ml-ui-y .sel-r2 { left: calc(50% + 536 * var(--y-u)) }
  html.ml-ui-y .sel-glow {
    position: absolute; width: calc(200 * var(--y-u)); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(255, 226, 160, .42), rgba(255, 226, 160, 0));
  }
  html.ml-ui-y .sel-g1 { left: calc(50% - 568 * var(--y-u)); top: calc(244 * var(--y-u)) }
  html.ml-ui-y .sel-g2 { left: calc(50% - 368 * var(--y-u)); top: calc(172 * var(--y-u)) }
  html.ml-ui-y .sel-g3 { left: calc(50% + 368 * var(--y-u)); top: calc(172 * var(--y-u)) }
  html.ml-ui-y .sel-g4 { left: calc(50% + 568 * var(--y-u)); top: calc(244 * var(--y-u)) }
  html.ml-ui-y .sel-shelf { position: absolute; width: calc(330 * var(--y-u)) }
  html.ml-ui-y .sel-s1, html.ml-ui-y .sel-s2 { left: calc(50% - 640 * var(--y-u)) }
  html.ml-ui-y .sel-s3, html.ml-ui-y .sel-s4 { left: calc(50% + 310 * var(--y-u)) }
  html.ml-ui-y .sel-s1 { top: calc(318 * var(--y-u)) }
  html.ml-ui-y .sel-s2 { top: calc(498 * var(--y-u)) }
  html.ml-ui-y .sel-s3 { top: calc(300 * var(--y-u)) }
  html.ml-ui-y .sel-s4 { top: calc(470 * var(--y-u)) }
  html.ml-ui-y .sel-counter-prop { display: block; position: absolute; bottom: calc(100% - 7 * var(--y-u)); z-index: 1; pointer-events: none }
  html.ml-ui-y .sel-p1 { left: calc(50% - 480 * var(--y-u)); width: calc(124 * var(--y-u)) }
  html.ml-ui-y .sel-p2 { left: calc(50% + 290 * var(--y-u)); width: calc(150 * var(--y-u)) }
  html.ml-ui-y .sel-sconce { display: none }
}
/* tablet, upright: the same shelves on both sides of the window (the sconces give way to them) */
@media (min-width: 600px) and (max-aspect-ratio: 1/1) {
  html.ml-ui-y .sel-deco { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none }
  html.ml-ui-y .sel-lamp, html.ml-ui-y .sel-glow { display: none }
  html.ml-ui-y .sel-shelf { position: absolute; width: min(300px, calc(50% - 153 * var(--y-u) - 34px)) }
  html.ml-ui-y .sel-shelf svg { display: block; width: 100%; height: auto; overflow: visible }
  html.ml-ui-y .sel-s1, html.ml-ui-y .sel-s2 { left: 14px }
  html.ml-ui-y .sel-s3, html.ml-ui-y .sel-s4 { right: 14px }
  html.ml-ui-y .sel-s1 { top: 33% }
  html.ml-ui-y .sel-s2 { top: 51% }
  html.ml-ui-y .sel-s3 { top: 37% }
  html.ml-ui-y .sel-s4 { top: 55% }
  html.ml-ui-y .sel-sconce { display: none }
}
/* a short landscape phone: no tagline or sconces; the dock is one row: [모드][게임 시작][상점] stays centred as on
   the phone and the equipped slots sit to its left (the tutorial's first ring needs them on screen) */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  html.ml-ui-y .sel-tag, html.ml-ui-y .sel-sconce { display: none }
  html.ml-ui-y #mallangi-game-select .sel-dock {
    width: min(820px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    grid-template-columns: minmax(max-content, 1fr) 78px minmax(150px, 230px) 78px minmax(0, 1fr);
    grid-template-areas: "err err err err err" "slots mode start shop ."; align-items: center;
  }
  html.ml-ui-y #mallangi-game-select #mallangi-economy-home .ksh-slots { justify-self: end; margin: 0 }
}
@media (prefers-reduced-motion: reduce) {
  html.ml-ui-y .sel-hero.sel-hero-poke .game-select-hero { animation: none }
  html.ml-ui-y #mallangi-game-select .sel-start:active { transform: none }
}

/* rank: the pill's label in Mallangi Sans (its face is the BG-YEAST rule above); it sinks under the canvas' own dim */
html.ml-ui-y body #mallangi-rank-open { font: 800 calc(15 * var(--rank-u, 1px)) / 1 var(--ml-sans) }
html.ml-ui-y #mallangi-rank-open > span::after { background: var(--y-dim-canvas); border-radius: inherit }
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog {
  border: 3px solid var(--y-ink); border-radius: 26px; background: var(--y-cream); color: var(--y-ink);
  box-shadow: 0 5px 0 var(--y-lip); font: 600 14px/1.5 var(--ml-sans);
}
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog::backdrop { background: rgba(43, 26, 15, .4) }
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog h2 { color: var(--y-ink); font-weight: 900 }
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog [data-close] {
  width: 44px; height: 44px; padding: 0; border: var(--y-edge) solid var(--y-ink); border-radius: 14px; background: var(--y-cream);
  color: var(--y-ink); font: 900 24px/1 var(--ml-sans); box-shadow: 0 3px 0 var(--y-lip);
}
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog input {
  border: 2px solid var(--y-ink); border-radius: 14px; background: var(--y-white); color: var(--y-ink); font-weight: 700;
}
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog input::placeholder { color: var(--y-pencil) }
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog form button {
  border-radius: 14px; background: var(--y-straw); color: #FFF; font-weight: 900; text-shadow: 0 1.5px 0 var(--y-straw-lip);
  box-shadow: inset 0 0 0 var(--y-edge) var(--y-ink), 0 3px 0 var(--y-straw-lip);
}
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog .rank-tabs button[data-period] {
  background: var(--y-cream); color: var(--y-ink); font-weight: 800; box-shadow: inset 0 0 0 2px var(--y-ink), 0 3px 0 var(--y-lip);
}
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog .rank-tabs button[data-period][aria-pressed=true] {
  background: var(--y-straw); color: #FFF; font-weight: 900; text-shadow: 0 1.5px 0 var(--y-straw-lip);
  box-shadow: inset 0 0 0 var(--y-edge) var(--y-ink), 0 3px 0 var(--y-straw-lip);
}
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog .rank-note { font: 600 12px/1.45 var(--ml-sans); color: var(--y-ink) }
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog [role=status] { color: var(--y-ink) }
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog th { background: var(--y-cream); color: var(--y-ink); font-weight: 800 }
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog td { border-bottom: 1.5px solid #EBDCC9 }
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog td[data-empty] { color: var(--y-ink) }
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog td:nth-child(3) { color: var(--y-straw-ink); font-weight: 800 }
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog tr[data-mine] { background: var(--y-best); color: var(--y-ink); font-weight: 900 }
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog .rank-delete { color: var(--y-straw-ink) }
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog .rank-scroll { scrollbar-color: var(--y-pencil) var(--y-cream) }
html.ml-ui-y.ml-rk-a #mallangi-rank-dialog button:focus-visible, html.ml-ui-y.ml-rk-a #mallangi-rank-dialog input:focus-visible { outline-color: var(--y-straw-ink) }

/* the play-record consent prompt (mallangi-analytics.js; dormant until analytics is on) and its 일지 line */
html.ml-ui-y #ma-consent { border: 3px solid var(--y-ink); border-radius: 22px; background: var(--y-cream); color: var(--y-ink); box-shadow: 0 5px 0 var(--y-lip); font: 600 13px/1.55 var(--ml-sans) }
html.ml-ui-y #ma-consent b { font-weight: 900 }
html.ml-ui-y #ma-consent button { border: 0; border-radius: 14px; background: var(--y-cream); color: var(--y-ink); font: 800 14px var(--ml-sans); box-shadow: inset 0 0 0 2px var(--y-ink), 0 3px 0 var(--y-lip) }
html.ml-ui-y #ma-consent button.ma-yes { background: var(--y-straw); color: #FFF; font-weight: 900; text-shadow: 0 1.5px 0 var(--y-straw-lip); box-shadow: inset 0 0 0 var(--y-edge) var(--y-ink), 0 3px 0 var(--y-straw-lip) }
html.ml-ui-y .ma-privacy { border-top: 1.5px dashed var(--y-lip); color: var(--y-ink); font-family: var(--ml-sans); font-weight: 600 }
html.ml-ui-y .ma-privacy button { border: 0; border-radius: 12px; background: var(--y-cream); color: var(--y-ink); font: 800 12px var(--ml-sans); box-shadow: inset 0 0 0 2px var(--y-ink), 0 2px 0 var(--y-lip) }

/* HOME-17 MOCHI (user 2026-10-27, request 8: “메인 메뉴에서 진열된 말랑이를 다른 종류의 말랑이로 변경할 수 있는 버튼”). Owned by
   the MOCHI part of HOME-17; nothing above this block belongs to it. mallangi-mochi.js injects button.sel-mochi-switch into
   .sel-hero-slot right after the mochi button (outside .sel-hero and outside [data-game]) once the canvas mochi runs: a
   44 px round cream button with the cocoa edge and the tan lip of the home's buttons, icon only (aria-label), standing on
   the plate's left rim clear of the mochi's side (the madeleine's narrow hinge end and the hint bubble's other side); it
   squashes a little under the finger. Review fix: anchored by its right edge 10 px left of the mochi's box at every size (it
   was left: -20% of the box, which put the fixed 44 px button on a small mochi - short landscape, 320 px phones). 10 px
   also clears the madeleine's hinge end, which reaches past the box; at 390x844 / PC it moved 4 px left. */
html.ml-ui-y #mallangi-game-select .sel-mochi-switch {
  position: absolute; z-index: 3; left: auto; right: calc(100% + 10px); bottom: -1%; width: 44px; height: 44px; margin: 0; padding: 7px;
  border: var(--y-edge) solid var(--y-ink); border-radius: 50%; background: var(--y-cream); box-shadow: 0 var(--y-lip-h) 0 var(--y-lip);
  color: var(--y-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .14s cubic-bezier(.3, 1.6, .5, 1), box-shadow .14s;
}
html.ml-ui-y #mallangi-game-select .sel-mochi-switch svg { display: block; width: 100%; height: 100%; pointer-events: none }
html.ml-ui-y #mallangi-game-select .sel-mochi-switch:active { transform: translateY(2.5px) scale(1.08, .9); box-shadow: 0 1.5px 0 var(--y-lip) }
html.ml-ui-y #mallangi-game-select .sel-mochi-switch:focus-visible { outline: 3px solid var(--y-straw-ink); outline-offset: 3px }
html.ml-ui-y #mallangi-game-select .sel-mochi-switch[hidden] { display: none }
@media (prefers-reduced-motion: reduce) { html.ml-ui-y #mallangi-game-select .sel-mochi-switch { transition: none } }