@media (max-width: 700px) {
  body.m6-active #startScreen .heroWrap { background-image: none !important; }
  html:has(body.m6-active), body.m6-active { width: 100%; height: 100%; overflow: hidden !important; overscroll-behavior: none; background: #8fd3ff; }
  body.m6-active > #app,
  body.m6-active > .v40-overlay,
  body.m6-active > #onlineOverlay,
  body.m6-active > #onlineBattle,
  body.m6-active > #soloTouchCharge,
  body.m6-active > #naiwa-resource-loading { display: none !important; }
  #m6App, #m6App * { box-sizing: border-box; }
  #m6App {
    --ink: #60381f;
    --ink-soft: #8f6748;
    --paper: #fff9e8;
    --paper-2: #fff1c8;
    --orange: #ff9d36;
    --orange-dark: #d46e28;
    --yellow: #ffd667;
    --green: #55c875;
    position: fixed; inset: 0; z-index: 900000; width: 100%; height: 100dvh; overflow: hidden;
    color: var(--ink); font-family: ui-rounded, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    background: #8fd3ff url('/assets/mobile-lobby-v6.jpg') center/cover no-repeat;
    -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  }
  #m6App button, #m6App input { font: inherit; }
  #m6App button { border: 0; color: inherit; touch-action: manipulation; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
  #m6App button:focus-visible, #m6App input:focus-visible { outline: 3px solid #ff8b2d; outline-offset: 3px; }
  .m6-screen { position: absolute; inset: 0; min-height: 100%; overflow-x: hidden; overflow-y: auto; padding: calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 18px); }
  .m6-screen::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 247 221 / .18) 52%, rgb(255 240 204 / .56)); }
  .m6-stack { position: relative; z-index: 1; width: min(100%, 440px); min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px); margin: 0 auto; display: flex; flex-direction: column; }
  .m6-home { background: linear-gradient(180deg,rgb(255 255 255 / .02),rgb(255 244 211 / .1) 58%,rgb(255 239 196 / .42)),url('/assets/m6-home-poster.jpg') center/cover no-repeat; }
  .m6-home::before { background: linear-gradient(180deg,rgb(255 255 255 / .08),transparent 54%,rgb(104 60 31 / .08)); }
  .m6-home .m6-main-panel { margin-top: auto; background: linear-gradient(155deg,rgb(255 253 242 / .97),rgb(255 239 193 / .96)); }
  .m6-top { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .m6-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .m6-brand-mark { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border: 3px solid #fff; border-radius: 16px; color: #704323; font-size: 23px; background: linear-gradient(145deg,#fff6bd,#ffc04d); box-shadow: 0 5px 0 #c56b2c, 0 10px 24px rgb(103 62 31 / .18); }
  .m6-brand-copy { min-width: 0; line-height: 1; }
  .m6-brand-copy strong { display: block; font-size: 17px; font-weight: 1000; letter-spacing: -.6px; white-space: nowrap; }
  .m6-brand-copy small { display: block; margin-top: 6px; color: #995f33; font-size: 9px; font-weight: 1000; letter-spacing: 1.5px; }
  .m6-profile { max-width: 132px; min-height: 42px; display: flex; align-items: center; gap: 7px; padding: 6px 10px 6px 7px; border: 2px solid rgb(255 255 255 / .9); border-radius: 15px; background: rgb(255 249 232 / .88); box-shadow: 0 5px 0 rgb(184 112 56 / .45); backdrop-filter: blur(10px); }
  .m6-profile img { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
  .m6-profile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 950; }
  .m6-panel { position: relative; border: 3px solid rgb(255 255 255 / .95); border-radius: 26px; background: linear-gradient(155deg, rgb(255 253 242 / .96), rgb(255 239 193 / .94)); box-shadow: 0 8px 0 rgb(184 105 48 / .72), 0 18px 38px rgb(97 58 29 / .22); backdrop-filter: blur(12px); }
  .m6-main-panel { margin-top: auto; padding: 20px; }
  .m6-kicker { margin: 0 0 7px; color: #cf7028; font-size: 11px; font-weight: 1000; letter-spacing: 1.4px; }
  .m6-title { margin: 0; max-width: 12ch; color: #613820; font-size: clamp(30px, 10vw, 43px); line-height: 1.02; letter-spacing: -2px; font-weight: 1000; }
  .m6-lead { margin: 10px 0 16px; color: #876247; font-size: 13px; line-height: 1.55; font-weight: 800; }
  .m6-hero { height: min(35dvh, 285px); min-height: 185px; display: grid; place-items: end center; margin: 4px 0 -4px; pointer-events: none; }
  .m6-hero img { width: min(70vw, 285px); height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 15px 10px rgb(83 49 25 / .2)); }
  .m6-btn { width: 100%; min-height: 54px; padding: 12px 18px; border: 2px solid #fff6d1 !important; border-radius: 17px; color: #5e351f !important; background: linear-gradient(#ffd86c,#ff9d3b); box-shadow: 0 6px 0 #c96c2c, 0 10px 18px rgb(123 70 32 / .18); font-size: 16px; font-weight: 1000; transition: transform .08s, box-shadow .08s; }
  .m6-btn:active { transform: translateY(4px) scale(.99); box-shadow: 0 2px 0 #c96c2c; }
  .m6-btn.secondary { border-color: #fff !important; background: linear-gradient(#fffdf6,#ffefc7); box-shadow: 0 5px 0 #d3b071; }
  .m6-btn.green { background: linear-gradient(#91e999,#50c875); box-shadow: 0 6px 0 #2f9652; }
  .m6-btn.danger { color: #8a3d31 !important; background: linear-gradient(#fff7ed,#ffd9c4); box-shadow: 0 5px 0 #d49b72; }
  .m6-btn[disabled] { opacity: .46; filter: saturate(.4); pointer-events: none; }
  .m6-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .m6-link { min-height: 44px; padding: 8px 12px; border-radius: 14px; background: rgb(255 249 230 / .82); color: #80583d !important; font-size: 13px; font-weight: 900; }
  .m6-back { width: 46px; height: 46px; display: grid; place-items: center; border: 2px solid #fff !important; border-radius: 15px; background: rgb(255 250 235 / .9); box-shadow: 0 5px 0 rgb(185 112 53 / .55); font-size: 22px; }
  .m6-page-head { position: relative; z-index: 1; display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 10px; }
  .m6-page-head h1 { margin: 0; color: #60381f; text-align: center; font-size: 21px; font-weight: 1000; }
  .m6-content { position: relative; z-index: 1; width: min(100%, 440px); margin: 18px auto 0; }
  .m6-mode-grid { display: grid; gap: 13px; }
  .m6-mode-card { min-height: 145px; display: grid; grid-template-columns: 1fr 124px; overflow: hidden; padding: 18px; text-align: left; }
  .m6-mode-card h2 { margin: 0 0 7px; font-size: 24px; font-weight: 1000; }
  .m6-mode-card p { margin: 0; color: #8c6749; font-size: 12px; line-height: 1.5; font-weight: 800; }
  .m6-mode-card img { align-self: end; width: 126px; height: 112px; object-fit: contain; filter: drop-shadow(0 8px 5px rgb(95 55 28 / .15)); }
  .m6-role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .m6-role { min-width: 0; padding: 8px 5px 10px; border: 3px solid #fff !important; border-radius: 20px; background: rgb(255 249 230 / .92); box-shadow: 0 5px 0 #d6b16f; }
  .m6-role img { display: block; width: 100%; height: 105px; object-fit: contain; }
  .m6-role strong { display: block; margin-top: 3px; font-size: 14px; font-weight: 1000; }
  .m6-role small { display: block; margin-top: 3px; color: #9a7453; font-size: 9px; font-weight: 850; }
  .m6-role.selected { border-color: #ff9c36 !important; background: #fff5c9; box-shadow: 0 5px 0 #d36b28, 0 0 0 3px rgb(255 198 75 / .35); transform: translateY(-2px); }
  .m6-select-panel { padding: 16px; }
  .m6-select-copy { margin: 13px 0 16px; text-align: center; }
  .m6-select-copy h2 { margin: 0 0 6px; font-size: 25px; }
  .m6-select-copy p { margin: 0; color: #8e694b; font-size: 12px; font-weight: 800; }
  .m6-field { display: grid; gap: 7px; margin-bottom: 13px; }
  .m6-field label { color: #7f5436; font-size: 12px; font-weight: 950; }
  .m6-field input { width: 100%; height: 54px; padding: 0 16px; border: 2px solid #e5b96e; border-radius: 16px; background: #fffdf7; color: #60381f; font-size: 17px; font-weight: 900; outline: none; user-select: text; -webkit-user-select: text; }
  .m6-field input::placeholder { color: #a7866d; }
  .m6-online-menu { padding: 17px; }
  .m6-divider { height: 1px; margin: 15px 0; background: rgb(139 91 54 / .18); }
  .m6-code { margin: 10px 0 14px; text-align: center; color: #704126; font-size: clamp(38px, 14vw, 58px); line-height: 1; letter-spacing: 7px; font-weight: 1000; }
  .m6-room-panel { padding: 17px; }
  .m6-room-list { display: grid; gap: 8px; margin: 13px 0; }
  .m6-player-row { min-height: 49px; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 8px 11px; border: 1px solid #ead4aa; border-radius: 15px; background: rgb(255 253 246 / .82); }
  .m6-player-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .m6-player-main img { width: 34px; height: 34px; object-fit: contain; }
  .m6-player-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .m6-status { flex: 0 0 auto; padding: 5px 8px; border-radius: 9px; color: #9b6c49; background: #f2e2c4; font-size: 10px; font-weight: 1000; }
  .m6-status.ready { color: #267443; background: #cff2d6; }
  .m6-status.offline { color: #87463b; background: #f5d1ca; }
  .m6-note { min-height: 38px; display: grid; place-items: center; margin-top: 12px; color: #855f43; text-align: center; font-size: 11px; line-height: 1.4; font-weight: 850; }
  .m6-countdown { width: 76px; height: 76px; display: grid; place-items: center; margin: 5px auto 13px; border: 4px solid #fff; border-radius: 50%; background: linear-gradient(#ffe37b,#ffac3d); box-shadow: 0 6px 0 #ca6d2b; font-size: 32px; font-weight: 1000; }
  .m6-role-screen { overflow: hidden; background: #8fd3ff url('/assets/m6-role-stage.jpg') center/cover no-repeat; }
  .m6-role-screen::before { background: linear-gradient(180deg,rgb(255 255 255 / .08),transparent 46%,rgb(255 245 214 / .2)); }
  .m6-role-stage-layout { position: relative; z-index: 1; width: min(100%,440px); height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 78px); min-height: 450px; margin: 8px auto 0; }
  .m6-role-stage-grid { position: absolute; top: 25%; left: -5px; right: -5px; display: grid; grid-template-columns: repeat(3,1fr); gap: 0; align-items: end; }
  .m6-stage-role { min-width: 0; padding: 0; background: transparent; filter: drop-shadow(0 10px 8px rgb(80 46 25 / .2)); transition: transform .16s,filter .16s; }
  .m6-stage-role img { width: 100%; height: min(27dvh,210px); object-fit: contain; object-position: center bottom; pointer-events: none; }
  .m6-stage-role strong { display: inline-block; min-width: 62px; margin-top: -5px; padding: 6px 9px; border: 2px solid #fff; border-radius: 12px; background: rgb(255 248 225 / .92); box-shadow: 0 4px 0 rgb(185 109 49 / .58); font-size: 12px; }
  .m6-stage-role.selected { z-index: 2; transform: translateY(-12px) scale(1.08); filter: drop-shadow(0 12px 8px rgb(100 54 24 / .25)); }
  .m6-stage-role.selected strong { color: #8a431f; background: #ffe785; box-shadow: 0 4px 0 #d06d28,0 0 0 3px rgb(255 255 255 / .55); }
  .m6-role-footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 15px; text-align: center; }
  .m6-role-footer h2 { margin: 0 0 5px; font-size: 22px; }
  .m6-role-footer p { margin: 0 0 12px; color: #8d6547; font-size: 11px; font-weight: 850; }
  .m6-role-countdown { position: absolute; z-index: 3; top: 3px; left: 50%; transform: translateX(-50%); width: 58px; height: 58px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(#ffe47b,#ffab3c); box-shadow: 0 5px 0 #c96b2c; font-size: 24px; font-weight: 1000; }
  .m6-loading { display: grid; place-items: center; }
  .m6-loading-card { width: min(84vw, 340px); padding: 24px; text-align: center; }
  .m6-loading-character { width: 126px; height: 126px; object-fit: contain; filter: drop-shadow(0 10px 8px rgb(81 48 25 / .18)); animation: m6-float 1.5s ease-in-out infinite; }
  .m6-loading-card h1 { margin: 4px 0 7px; font-size: 25px; }
  .m6-loading-card p { margin: 0 0 15px; color: #8b6648; font-size: 12px; font-weight: 850; }
  .m6-progress { height: 12px; overflow: hidden; border: 3px solid #fff; border-radius: 20px; background: #ead2a7; box-shadow: inset 0 2px 3px rgb(112 66 30 / .18); }
  .m6-progress > i { display: block; width: 12%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ffd65d,#ff8f37); transition: width .25s; }
  @keyframes m6-float { 50% { transform: translateY(-8px) rotate(2deg); } }

  .m6-battle { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; background: #addbf4; touch-action: none; }
  .m6-battle-head { position: relative; z-index: 4; min-height: calc(env(safe-area-inset-top) + 64px); display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: end; gap: 7px; padding: calc(env(safe-area-inset-top) + 7px) 9px 7px; background: linear-gradient(180deg,#fff9df 0,#fff4cf 100%); border-bottom: 2px solid #f2c77b; box-shadow: 0 5px 15px rgb(98 62 32 / .15); }
  .m6-battle-brand { min-width: 0; display: flex; align-items: center; gap: 6px; }
  .m6-battle-brand img { width: 39px; height: 39px; object-fit: contain; border: 2px solid #fff; border-radius: 12px; background: #ffd667; box-shadow: 0 3px 0 #ca702c; }
  .m6-battle-brand span { min-width: 0; }
  .m6-battle-brand strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .m6-battle-brand small { display: block; margin-top: 3px; color: #aa7044; font-size: 8px; font-weight: 900; }
  .m6-battle-clock { min-width: 82px; padding: 7px 10px; border: 2px solid #fff; border-radius: 14px; background: #704730; color: #ffe57c; text-align: center; box-shadow: 0 4px 0 #bc7138; font-size: 17px; font-weight: 1000; font-variant-numeric: tabular-nums; }
  .m6-battle-actions { display: flex; justify-content: flex-end; gap: 5px; }
  .m6-hud-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid #fff !important; border-radius: 13px; background: #fffaf0; box-shadow: 0 3px 0 #d0a366; font-size: 17px; }
  .m6-stage { position: relative; min-height: 0; overflow: hidden; background: #a8d8f2 url('/assets/mobile-lobby-v6.jpg') center/cover no-repeat; isolation: isolate; }
  .m6-stage canvas { position: absolute; inset: -56px; width: calc(100% + 112px); height: calc(100% + 112px); display: block; touch-action: none; }
  .m6-stage canvas.m6-touch-charging { cursor: grabbing; }
  .m6-stage-flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(circle,#fff 0,#ffe99b 28%,rgb(255 116 72 / .4) 58%,transparent 76%); mix-blend-mode: screen; transition: opacity .06s linear; }
  .m6-danger { position: absolute; z-index: 6; inset: 7px; display: grid; place-content: start center; padding-top: 56px; border: 8px solid rgb(255 78 69 / .82); box-shadow: inset 0 0 35px rgb(255 49 49 / .38); color: #713622; text-align: center; opacity: 0; pointer-events: none; transform: scale(.985); }
  .m6-danger strong,.m6-danger span { width: max-content; max-width: calc(100vw - 70px); padding: 4px 12px; background: #fff7df; text-shadow: 0 2px #fff; }
  .m6-danger strong { border: 3px solid #ff8c59; border-radius: 13px 13px 0 0; font-size: 17px; }
  .m6-danger span { justify-self: center; border-radius: 0 0 10px 10px; color: #e05439; font-size: 11px; font-weight: 1000; }
  .m6-danger.show { opacity: 1; transform: scale(1); animation: m6-danger-pulse .34s steps(2,end) infinite; }
  .m6-stage-status { position: absolute; z-index: 3; top: 9px; left: 50%; max-width: calc(100% - 20px); transform: translateX(-50%); padding: 7px 11px; border: 2px solid rgb(255 255 255 / .9); border-radius: 13px; background: rgb(255 249 229 / .9); box-shadow: 0 4px 0 rgb(186 113 53 / .55); color: #704226; white-space: nowrap; font-size: 10px; font-weight: 950; backdrop-filter: blur(8px); }
  .m6-combo { position: absolute; z-index: 4; top: 54px; left: 10px; color: #ff633f; text-shadow: 0 3px #fff,0 6px 14px rgb(122 58 29 / .35); font-size: 21px; font-weight: 1000; opacity: 0; transform: scale(.7) rotate(5deg); transition: opacity .12s,transform .12s; }
  .m6-combo.show { opacity: 1; transform: scale(1) rotate(-4deg); animation: m6-combo-pop .35s ease-out; }
  .m6-skill-banner { position: absolute; z-index: 5; top: 52px; right: 8px; width: max-content; max-width: min(62%,250px); padding: 7px 11px; border: 2px solid #fff8ca; border-radius: 12px; color: #713719; background: linear-gradient(90deg,#ffe66d,#ff9b3e); box-shadow: 0 4px 0 #c45b28,0 8px 18px rgb(99 47 25 / .26); font-size: 12px; line-height: 1.25; font-weight: 1000; opacity: 0; pointer-events: none; transform: translateX(115%); }
  .m6-skill-banner.show { animation: m6-skill-pop 1.05s both; }
  @keyframes m6-combo-pop { 50% { transform: scale(1.22) rotate(3deg); } }
  @keyframes m6-skill-pop { 0% { opacity: 0; transform: translateX(115%); } 18%,72% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(18px); } }
  @keyframes m6-danger-pulse { 50% { border-color: rgb(255 236 111 / .96); box-shadow: inset 0 0 50px rgb(255 49 49 / .55); } }
  .m6-power-row { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px); min-height: 36px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border: 2px solid rgb(255 245 214 / .88); border-radius: 14px; background: rgb(94 56 37 / .86); box-shadow: 0 4px 13px rgb(55 31 20 / .24); color: #fff5c7; font-size: 11px; font-weight: 1000; pointer-events: none; }
  .m6-power-track { height: 13px; overflow: hidden; border: 3px solid #fff5d4; border-radius: 14px; background: #8f6a55; box-shadow: inset 0 2px 3px rgb(44 25 16 / .32); }
  .m6-power-fill { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ffe45e,#ff9b31 70%,#ff6653); transition: width .04s linear; }
  .m6-gesture-guide { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: calc(env(safe-area-inset-top) + 16px) 18px calc(env(safe-area-inset-bottom) + 16px); background: rgb(66 43 35 / .66); backdrop-filter: blur(8px); }
  .m6-guide-card { width: min(100%, 370px); padding: 18px 20px 22px; text-align: center; }
  .m6-guide-art { position: relative; height: 116px; display: grid; place-items: center; }
  .m6-guide-art img { width: 116px; height: 116px; object-fit: contain; filter: drop-shadow(0 7px 5px rgb(85 51 26 / .2)); }
  .m6-guide-swipe { position: absolute; top: 8px; right: 47px; width: 47px; height: 47px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; background: #ffd366; color: #713e1b; font-size: 30px; font-weight: 1000; animation: m6-guide-swipe 1.5s ease-in-out infinite; }
  @keyframes m6-guide-swipe { 50% { transform: translate(10px,-9px); } }
  .m6-guide-card h2 { margin: 3px 0 14px; color: #643b23; font-size: 25px; }
  .m6-guide-card ol { display: grid; gap: 9px; margin: 0 0 19px; padding: 0; list-style: none; counter-reset: guide; text-align: left; }
  .m6-guide-card li { position: relative; min-height: 50px; display: grid; gap: 1px; padding: 7px 10px 7px 48px; border: 1px solid #ead0a5; border-radius: 12px; background: #fffaf0; counter-increment: guide; }
  .m6-guide-card li::before { content: counter(guide); position: absolute; top: 9px; left: 10px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #ffd36c; color: #744425; font-weight: 1000; }
  .m6-guide-card li strong { color: #673c22; font-size: 14px; }
  .m6-guide-card li span { color: #90664a; font-size: 11px; font-weight: 800; }
  .m6-ai-row { background: rgb(255 235 153 / .34); }
  .m6-modal-layer { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 18px); background: rgb(73 46 30 / .52); backdrop-filter: blur(9px); }
  .m6-result-layer { background: url('/assets/m6-result-bg.jpg') center/cover no-repeat; backdrop-filter: none; }
  .m6-result-layer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgb(255 255 255 / .06),rgb(255 247 220 / .22)); pointer-events: none; }
  .m6-result-layer .m6-modal { position: relative; z-index: 1; }
  .m6-modal { width: min(100%, 360px); max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 34px); overflow: auto; padding: 21px; text-align: center; }
  .m6-modal-character { width: 125px; height: 125px; object-fit: contain; margin-top: 0; filter: drop-shadow(0 10px 7px rgb(60 35 20 / .2)); }
  .m6-result-character-wrap { position: relative; height: 190px; display: grid; place-items: center; margin-top: 0; }
  .m6-result-character-wrap .m6-modal-character { position: absolute; z-index: 2; width: 154px; height: 154px; margin: 0; object-fit: contain; transform-origin: 50% 88%; }
  .m6-result-ring { position: absolute; width: 134px; height: 82px; border: 7px solid rgb(255 242 150 / .74); border-radius: 50%; box-shadow: 0 0 28px #ffd56e; animation: m6-result-ring 1.35s ease-in-out infinite; }
  .m6-result-layer.won .m6-modal-character { animation: m6-result-win 1.25s ease-in-out infinite; }
  .m6-result-layer.lost .m6-modal-character { animation: m6-result-lose 1.65s ease-in-out infinite; }
  .m6-result-sparkles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
  .m6-result-sparkles i { position: absolute; color: #fff6a7; font-style: normal; font-size: 35px; text-shadow: 0 4px 12px #ef8a3c; animation: m6-result-sparkle 1.4s ease-in-out infinite; }
  .m6-result-sparkles i:nth-child(1) { top: 10%; left: 9%; }.m6-result-sparkles i:nth-child(2) { top: 18%; right: 11%; animation-delay: .3s; }.m6-result-sparkles i:nth-child(3) { bottom: 18%; left: 8%; animation-delay: .65s; }.m6-result-sparkles i:nth-child(4) { bottom: 12%; right: 9%; animation-delay: .9s; }
  @keyframes m6-result-win { 0%,100% { transform: translateY(5px) rotate(-3deg) scale(1); } 45% { transform: translateY(-18px) rotate(5deg) scale(1.08,.94); } 70% { transform: translateY(2px) rotate(-2deg) scale(.96,1.06); } }
  @keyframes m6-result-lose { 0%,100% { transform: translateY(-8px) rotate(-9deg); } 48% { transform: translateY(13px) rotate(10deg) scale(1.08,.9); } }
  @keyframes m6-result-ring { 50% { transform: scale(1.17); opacity: .55; } }
  @keyframes m6-result-sparkle { 50% { transform: translateY(-12px) rotate(22deg) scale(1.3); opacity: .58; } }
  .m6-modal h2 { margin: 2px 0 7px; font-size: 28px; }
  .m6-modal p { margin: 0 0 15px; color: #8a6448; font-size: 12px; line-height: 1.5; font-weight: 800; }
  .m6-ranking { display: grid; gap: 6px; max-height: 178px; overflow: auto; margin: 13px 0 16px; padding-right: 2px; text-align: left; }
  .m6-rank { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 7px; min-height: 39px; padding: 6px 9px; border-radius: 12px; background: #fffaf0; font-size: 11px; font-weight: 900; }
  .m6-rank.mine { background: #fff0a8; }
  .m6-discover-choice { display: flex; align-items: center; gap: 8px; margin: 12px 0; color: #765239; font-size: 12px; font-weight: 850; }
  .m6-discover-choice input { width: 19px; height: 19px; accent-color: #ef9b45; }
  .m6-room-discovery { display: grid; gap: 7px; max-height: 180px; overflow: auto; margin-top: 10px; color: #866345; font-size: 11px; }
  .m6-discovered-room { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px; border: 2px solid #f1d5a9; border-radius: 13px; background: #fff9e8; color: #70462e; font-size: 11px; text-align: left; }
  .m6-discovered-room span { white-space: nowrap; }
  .m6-toast { position: absolute; z-index: 30; top: calc(env(safe-area-inset-top) + 76px); left: 50%; max-width: calc(100% - 30px); transform: translate(-50%,-8px); padding: 8px 13px; border: 2px solid #fff; border-radius: 13px; background: #704630; color: #fff4c2; box-shadow: 0 5px 16px rgb(51 28 16 / .25); opacity: 0; pointer-events: none; white-space: nowrap; font-size: 11px; font-weight: 900; transition: opacity .15s, transform .15s; }
  .m6-toast.show { opacity: 1; transform: translate(-50%,0); }

  @media (max-height: 660px) {
    .m6-screen { padding-top: calc(env(safe-area-inset-top) + 8px); }
    .m6-stack { min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 18px); }
    .m6-top { min-height: 48px; }
    .m6-brand-mark { width: 41px; height: 41px; }
    .m6-hero { height: min(27dvh, 170px); min-height: 122px; }
    .m6-main-panel { padding: 15px; }
    .m6-title { font-size: 30px; }
    .m6-lead { margin: 7px 0 11px; line-height: 1.35; }
    .m6-mode-card { min-height: 124px; padding: 14px; grid-template-columns: 1fr 105px; }
    .m6-mode-card img { width: 105px; height: 95px; }
    .m6-role img { height: 82px; }
    .m6-role-stage-layout { min-height: 0; height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 66px); }
    .m6-role-stage-grid { top: 18%; }
    .m6-stage-role img { height: 124px; }
    .m6-role-footer { padding: 11px; }
    .m6-role-footer h2 { font-size: 18px; }
    .m6-role-footer p { margin-bottom: 8px; }
    .m6-content { margin-top: 11px; }
    .m6-guide-art { height: 96px; }
    .m6-guide-art img { height: 96px; }
  }
  @media (max-width: 350px) {
    .m6-brand-copy small { display: none; }
    .m6-role img { height: 82px; }
    .m6-battle-clock { min-width: 72px; font-size: 15px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .m6-loading-character { animation: none; }
    .m6-guide-swipe { animation: none; }
    #m6App *, #m6App *::before, #m6App *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  }
}