/* inlasComp premium Web launcher.
   IMPORTANT: this file never sizes #canvas. LÖVE/love.js owns the backing
   store and the presentation geometry remains app-v13.css's responsibility. */

:root {
  --ic-bg: #050611;
  --ic-panel: rgba(14, 17, 34, 0.78);
  --ic-panel-strong: rgba(12, 14, 29, 0.94);
  --ic-line: rgba(199, 209, 255, 0.14);
  --ic-text: #f7f8ff;
  --ic-muted: #9ca5bb;
  --ic-purple: #8d42ff;
  --ic-purple-2: #5d26f4;
  --ic-green: #54dd8a;
  --ic-red: #ed3448;
  --ic-blue: #2996ff;
  --ic-yellow: #eab700;
  --ic-radius: 22px;
  --ic-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

#inlascomp-launcher[hidden] { display: none !important; }

#inlascomp-launcher {
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow: hidden;
  color: var(--ic-text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  background:
    radial-gradient(60% 65% at 76% 95%, rgba(91, 37, 246, 0.28), transparent 65%),
    radial-gradient(42% 48% at 42% 42%, rgba(37, 88, 255, 0.12), transparent 70%),
    linear-gradient(145deg, #03040a 0%, #060817 58%, #08091b 100%);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#inlascomp-launcher::before,
#inlascomp-launcher::after {
  content: "";
  position: absolute;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.7;
}

#inlascomp-launcher::before {
  width: 38vw;
  height: 38vw;
  right: -13vw;
  bottom: -18vw;
  background: radial-gradient(circle, rgba(121, 47, 255, 0.34), transparent 68%);
}

#inlascomp-launcher::after {
  width: 32vw;
  height: 32vw;
  left: 28vw;
  top: -23vw;
  background: radial-gradient(circle, rgba(39, 113, 255, 0.18), transparent 70%);
}

.ic-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  gap: 26px;
  box-sizing: border-box;
}

.ic-sidebar {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}

.ic-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 70px;
  padding: 0 12px;
}

.ic-brand-mark {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid rgba(167, 196, 255, .32);
  border-radius: 15px;
  background-image:
    url("assets/inlascomp-logo-mark.png?v=13.5-ml-inlascomp-r9");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 10px 28px rgba(0,0,0,.34), 0 0 22px rgba(85,139,255,.15), inset 0 1px rgba(255,255,255,.18);
  overflow: hidden;
}
.ic-brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,.15), transparent 38%, rgba(105,70,255,.08));
  pointer-events: none;
}

.ic-brand-copy { min-width: 0; }
.ic-brand-name {
  font-size: clamp(25px, 2vw, 36px);
  line-height: .96;
  font-weight: 780;
  letter-spacing: -.055em;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.ic-word-inlas { color: #eef6ff; }
.ic-word-comp { color: #f0cf84; font-weight: 740; }
.ic-brand-sub {
  margin-top: 7px;
  color: rgba(176,188,213,.82);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .115em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ic-brand-stats {
  margin-top: 5px;
  color: rgba(170,181,207,.68);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ic-mobile-brand-copy { min-width: 0; }

.ic-nav {
  display: grid;
  gap: 9px;
  margin-top: 44px;
  padding: 0 4px;
}

.ic-nav-button,
.ic-icon-button,
.ic-action,
.ic-chip,
.ic-toggle,
.ic-lang-button,
.ic-inline-action {
  appearance: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.ic-nav-button {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #a8b0c5;
  font-size: 15px;
  text-align: left;
  transition: .18s ease;
}
.ic-nav-button:hover { color: #fff; background: rgba(255,255,255,.045); }
.ic-nav-button.is-active {
  color: #fff;
  border-color: rgba(167, 112, 255, 0.5);
  background: linear-gradient(100deg, rgba(140, 54, 255, .96), rgba(99, 37, 221, .86));
  box-shadow: 0 10px 28px rgba(111, 43, 235, .27), inset 0 1px rgba(255,255,255,.2);
}
.ic-nav-icon { width: 22px; text-align: center; font-size: 19px; opacity: .95; }

.ic-side-bottom { margin-top: auto; display: grid; gap: 9px; padding: 0 4px; }
.ic-side-rule { height: 1px; margin: 12px 16px; background: var(--ic-line); }

.ic-main {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
  padding: 2px 2px 4px;
}
.ic-main::-webkit-scrollbar { display: none; }

.ic-topbar {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.ic-heading { min-width: 0; }
.ic-heading h1 { margin: 0; font-size: clamp(23px, 2.3vw, 36px); letter-spacing: -.035em; }
.ic-heading p { margin: 6px 0 0; color: var(--ic-muted); font-size: 13px; }

.ic-top-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ic-lang {
  display: flex;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--ic-line);
  border-radius: 13px;
  background: rgba(11, 14, 28, .75);
  backdrop-filter: blur(18px);
}
.ic-lang-button {
  min-width: 37px;
  height: 34px;
  padding: 0 8px;
  border-radius: 9px;
  color: #8d96ac;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}
.ic-lang-button.is-active { color: #fff; background: rgba(136, 59, 255, .8); }

.ic-icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(166, 112, 255, .35);
  border-radius: 50%;
  background: rgba(18, 20, 38, .78);
  box-shadow: inset 0 0 22px rgba(132, 50, 255, .08);
  font-size: 18px;
}

.ic-view[hidden] { display: none !important; }

.ic-library-layout { display: grid; gap: 24px; }

.ic-game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
}

.ic-game-card {
  --accent: var(--ic-purple);
  position: relative;
  min-width: 0;
  height: clamp(230px, 34vh, 360px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, rgba(255,255,255,.15));
  border-radius: 17px;
  background: #111526;
  box-shadow: 0 18px 38px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.12);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ic-game-card:hover { transform: translateY(-2px); }
.ic-game-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 20px 55px rgba(0,0,0,.36), 0 0 30px color-mix(in srgb, var(--accent) 24%, transparent);
}
.ic-game-card[data-game="red"] { --accent: var(--ic-red); }
.ic-game-card[data-game="blue"] { --accent: var(--ic-blue); }
.ic-game-card[data-game="yellow"] { --accent: var(--ic-yellow); }

.ic-cover,
.ic-cover-fallback,
.ic-card-shade { position: absolute; inset: 0; }
.ic-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease, opacity .2s ease;
}
.ic-game-card:hover .ic-cover { transform: scale(1.025); }
.ic-cover-fallback {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 42%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 28%, #0b0d18), #090b14 72%);
}
.ic-cover-fallback::before {
  content: attr(data-letter);
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--accent) 68%, white);
  border-radius: 24px;
  color: white;
  font-size: 48px;
  font-weight: 820;
  box-shadow: 0 0 32px color-mix(in srgb, var(--accent) 32%, transparent);
}
.ic-card-shade {
  background: linear-gradient(to bottom, rgba(2,4,9,.04) 30%, rgba(3,4,10,.30) 56%, rgba(3,4,10,.96) 100%);
}
.ic-card-body {
  position: absolute;
  inset: auto 15px 14px;
  z-index: 2;
  display: grid;
  gap: 7px;
}
.ic-card-title { font-size: clamp(21px, 2.1vw, 30px); font-weight: 800; letter-spacing: .14em; text-shadow: 0 3px 16px #000; }
.ic-card-kicker { color: color-mix(in srgb, var(--accent) 80%, white); font-size: 9px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.ic-card-status { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #b7bfd2; font-size: 11px; }
.ic-status-dot { width: 8px; height: 8px; display: inline-block; margin-right: 6px; border: 1px solid currentColor; border-radius: 50%; }
.ic-ready .ic-status-dot { background: var(--ic-green); border-color: var(--ic-green); box-shadow: 0 0 10px rgba(84,221,138,.55); }
.ic-ready { color: #d5f8e2; }

.ic-detail {
  --accent: var(--ic-red);
  position: relative;
  overflow: hidden;
  min-height: 220px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 24px;
  padding: clamp(20px, 2.4vw, 34px);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.12));
  border-radius: 20px;
  background:
    radial-gradient(circle at 3% 35%, color-mix(in srgb, var(--accent) 19%, transparent), transparent 38%),
    linear-gradient(100deg, rgba(16, 15, 27, .95), rgba(12, 14, 27, .78));
  box-shadow: var(--ic-shadow), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(20px);
}
.ic-detail[data-game="red"] { --accent: var(--ic-red); }
.ic-detail[data-game="blue"] { --accent: var(--ic-blue); }
.ic-detail[data-game="yellow"] { --accent: var(--ic-yellow); }
.ic-detail::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .75;
}
.ic-detail-info { min-width: 0; align-self: center; }
.ic-eyebrow { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.ic-detail h2 { margin: 8px 0 7px; font-size: clamp(26px, 3vw, 43px); letter-spacing: -.04em; }
.ic-detail-sub { color: #b3bbce; font-size: 13px; line-height: 1.5; }
.ic-variant-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.ic-chip {
  min-height: 34px;
  min-width: 49px;
  padding: 0 12px;
  border: 1px solid var(--ic-line);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: #9ca6bd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
}
.ic-chip.is-active { color: #fff; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 25%, rgba(12,14,28,.85)); }
.ic-chip:disabled { opacity: .38; cursor: default; }

.ic-detail-actions {
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 11px;
  padding-left: 20px;
  border-left: 1px solid var(--ic-line);
}
.ic-action {
  min-height: 58px;
  padding: 0 20px;
  border: 1px solid var(--ic-line);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  color: #e8eaff;
  font-weight: 720;
  transition: .18s ease;
}
.ic-action:hover { transform: translateY(-1px); background: rgba(255,255,255,.075); }
.ic-action-primary {
  border-color: color-mix(in srgb, var(--accent) 70%, white 0%);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 88%, #fff 3%), color-mix(in srgb, var(--accent) 76%, #39155d));
  color: #fff;
  box-shadow: 0 11px 28px color-mix(in srgb, var(--accent) 27%, transparent);
  font-size: 17px;
}
.ic-action:disabled { opacity: .38; cursor: default; transform: none; }
.ic-action-danger { border-color: rgba(237,52,72,.32); color: #ff9ba6; }

.ic-progress-wrap { display: grid; gap: 8px; margin-top: 14px; }
.ic-progress-text { color: #b8c1d6; font-size: 11px; }
.ic-progress { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.ic-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); box-shadow: 0 0 14px var(--accent); transition: width .2s linear; }

.ic-panel {
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-radius);
  background: var(--ic-panel);
  box-shadow: var(--ic-shadow), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(22px);
}

.ic-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.ic-section-head h2 { margin: 0; font-size: 25px; letter-spacing: -.03em; }
.ic-section-head p { margin: 4px 0 0; color: var(--ic-muted); font-size: 12px; }
.ic-section-actions { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ic-inline-action {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--ic-line);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: #c8cfdf;
  font-size: 12px;
  font-weight: 700;
}
.ic-inline-action.is-accent { border-color: rgba(141,66,255,.58); background: rgba(127,48,243,.22); color: #fff; }

.ic-mod-page, .ic-settings-page { display: grid; gap: 18px; }
.ic-mod-hero { padding: clamp(22px, 2.6vw, 34px); }
.ic-mod-highlight {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(141,66,255,.32);
  border-radius: 16px;
  background: linear-gradient(110deg, rgba(119,45,240,.15), rgba(255,255,255,.025));
}
.ic-mod-logo { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg,#7d3bff,#3c1a88); font-size: 26px; box-shadow: 0 9px 24px rgba(96,39,207,.3); }
.ic-mod-highlight h3 { margin: 0; font-size: 17px; }
.ic-mod-highlight p { margin: 5px 0 0; color: var(--ic-muted); font-size: 12px; line-height: 1.45; }

.ic-mod-list { display: grid; gap: 10px; padding: 16px; }
.ic-mod-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid rgba(199,209,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.ic-mod-name { font-size: 14px; font-weight: 730; }
.ic-mod-meta { margin-top: 4px; color: var(--ic-muted); font-size: 11px; line-height: 1.35; }
.ic-toggle {
  position: relative;
  width: 50px;
  height: 28px;
  border-radius: 999px;
  background: #24293a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.ic-toggle::after {
  content: "";
  position: absolute;
  top: 4px; left: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #aab1c0;
  transition: transform .18s ease, background .18s ease;
}
.ic-toggle.is-on { background: rgba(80,214,135,.28); box-shadow: inset 0 0 0 1px rgba(80,214,135,.65); }
.ic-toggle.is-on::after { transform: translateX(22px); background: #63e49a; }
.ic-empty { padding: 32px 20px; text-align: center; color: var(--ic-muted); font-size: 13px; }

.ic-settings-card { padding: clamp(22px, 2.5vw, 32px); }
.ic-setting-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 17px 0;
  border-bottom: 1px solid var(--ic-line);
}
.ic-setting-row:last-child { border-bottom: 0; }
.ic-setting-title { font-size: 14px; font-weight: 720; }
.ic-setting-desc { margin-top: 4px; color: var(--ic-muted); font-size: 11px; line-height: 1.4; }

.ic-toast {
  position: fixed;
  z-index: 9010;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translate(-50%, 18px);
  max-width: min(580px, calc(100vw - 34px));
  padding: 12px 17px;
  border: 1px solid rgba(170,181,222,.2);
  border-radius: 12px;
  background: rgba(10,12,24,.94);
  color: #e8ebf7;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
  font-size: 12px;
  text-align: center;
}
.ic-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.ic-toast.is-error { border-color: rgba(237,52,72,.48); color: #ffb5bc; }

.ic-mobile-top, .ic-bottom-nav { display: none; }

@media (max-width: 820px), (orientation: portrait) {
  #inlascomp-launcher { overflow: auto; }
  .ic-shell {
    display: block;
    height: auto;
    min-height: 100%;
    padding: max(16px, env(safe-area-inset-top)) 14px calc(92px + env(safe-area-inset-bottom));
  }
  .ic-sidebar { display: none; }
  .ic-main { overflow: visible; padding: 0; }
  .ic-topbar { min-height: 68px; margin-bottom: 16px; }
  .ic-heading p { display: none; }
  .ic-top-tools .ic-lang { display: none; }
  .ic-top-tools { gap: 7px; }
  .ic-mobile-top { display: flex; align-items: center; gap: 10px; margin-right: auto; }
  .ic-mobile-top .ic-brand-mark { width: 36px; height: 36px; flex-basis: 36px; transform: scale(.86); transform-origin: center; }
  .ic-mobile-top .ic-brand-name { font-size: 24px; }
  .ic-heading { display: none; }
  .ic-game-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
  .ic-game-card { height: clamp(225px, 39vh, 360px); border-radius: 14px; }
  .ic-card-body { inset: auto 9px 10px; gap: 5px; }
  .ic-card-title { font-size: clamp(15px, 4.3vw, 24px); letter-spacing: .08em; }
  .ic-card-kicker { font-size: 7px; letter-spacing: .16em; }
  .ic-card-status { font-size: 9px; }
  .ic-detail { grid-template-columns: 1fr; gap: 17px; padding: 20px; min-height: 0; }
  .ic-detail-actions { grid-template-columns: 1fr auto; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--ic-line); }
  .ic-detail-actions .ic-action { min-height: 52px; }
  .ic-action-primary { grid-column: 1 / -1; }
  .ic-mod-highlight { grid-template-columns: 48px minmax(0,1fr); }
  .ic-mod-highlight .ic-inline-action { grid-column: 1 / -1; min-height: 44px; }
  .ic-bottom-nav {
    position: fixed;
    z-index: 9005;
    left: 14px;
    right: 14px;
    bottom: max(11px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    min-height: 64px;
    padding: 5px;
    border: 1px solid var(--ic-line);
    border-radius: 19px;
    background: rgba(10,13,26,.91);
    box-shadow: 0 18px 48px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.07);
    backdrop-filter: blur(24px);
  }
  .ic-bottom-nav .ic-nav-button { justify-content: center; min-height: 54px; padding: 0 7px; gap: 6px; border-radius: 14px; font-size: 10px; flex-direction: column; }
  .ic-bottom-nav .ic-nav-icon { font-size: 17px; }
  .ic-bottom-nav .ic-nav-button.is-active { box-shadow: none; }
}

@media (max-width: 520px) {
  .ic-game-card { height: clamp(190px, 33vh, 300px); }
  .ic-cover { object-fit: cover; }
  .ic-card-status span:last-child { display: none; }
  .ic-detail h2 { font-size: 27px; }
  .ic-detail-actions { grid-template-columns: 1fr; }
  .ic-action-primary { grid-column: auto; }
  .ic-section-head { align-items: flex-start; flex-direction: column; }
  .ic-section-actions { margin-left: 0; justify-content: flex-start; }
  .ic-setting-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #inlascomp-launcher *, #inlascomp-launcher *::before, #inlascomp-launcher *::after { transition: none !important; }
}

/* -------------------------------------------------------------------------
   v2 MOBILE VIEWPORT LOCK
   The launcher is a phone UI. JavaScript publishes the *visual* viewport
   (not a guessed model size), orientation, DPR and a compact/regular/large
   class. This keeps Safari chrome, PWA safe areas and Android viewport
   changes inside one bounded rectangle in both orientations. */

#inlascomp-launcher {
  inset: auto;
  left: var(--ic-viewport-left, 0px);
  top: var(--ic-viewport-top, 0px);
  width: var(--ic-viewport-w, 100vw);
  height: var(--ic-viewport-h, 100dvh);
  max-width: 100vw;
  max-height: 100dvh;
  overflow: hidden;
  contain: layout paint size;
}

.ic-device-readout {
  max-width: 18rem;
  padding: 8px 10px;
  border: 1px solid var(--ic-line);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: #d6dbea;
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}

.ic-chip.is-planned {
  border-style: dashed;
  opacity: .42;
}

/* Portrait phone: one bounded viewport, bottom navigation, internal scrolling
   only when a very short display cannot hold a complete panel. */
#inlascomp-launcher[data-orientation="portrait"] .ic-shell {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    calc(78px + env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}
#inlascomp-launcher[data-orientation="portrait"] .ic-sidebar { display: none; }
#inlascomp-launcher[data-orientation="portrait"] .ic-main {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  overscroll-behavior: contain;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-topbar {
  min-height: 54px;
  margin-bottom: 10px;
  gap: 8px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-heading { display: none; }
#inlascomp-launcher[data-orientation="portrait"] .ic-mobile-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-mobile-top .ic-brand-mark {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  transform: scale(.80);
  transform-origin: center;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-mobile-top .ic-brand-name {
  font-size: clamp(20px, 6vw, 25px);
}
#inlascomp-launcher[data-orientation="portrait"] .ic-top-tools .ic-lang { display: none; }
#inlascomp-launcher[data-orientation="portrait"] .ic-icon-button {
  width: 38px;
  height: 38px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-library-layout { gap: 12px; }
#inlascomp-launcher[data-orientation="portrait"] .ic-game-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 10px);
}
#inlascomp-launcher[data-orientation="portrait"] .ic-game-card {
  height: clamp(158px, 27vh, 255px);
  border-radius: 13px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-card-body {
  inset: auto 8px 9px;
  gap: 4px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-card-title {
  font-size: clamp(13px, 4.2vw, 20px);
  letter-spacing: .06em;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-card-kicker {
  font-size: 6px;
  letter-spacing: .12em;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-card-status { font-size: 8px; }
#inlascomp-launcher[data-orientation="portrait"] .ic-card-status span:last-child { display: none; }
#inlascomp-launcher[data-orientation="portrait"] .ic-detail {
  grid-template-columns: 1fr;
  gap: 10px;
  min-height: 0;
  padding: clamp(13px, 4vw, 18px);
  border-radius: 16px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-detail h2 {
  margin: 5px 0 4px;
  font-size: clamp(22px, 7vw, 30px);
}
#inlascomp-launcher[data-orientation="portrait"] .ic-detail-sub { font-size: 11px; }
#inlascomp-launcher[data-orientation="portrait"] .ic-variant-row {
  gap: 5px;
  margin-top: 9px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-chip {
  min-width: 40px;
  min-height: 30px;
  padding: 0 8px;
  font-size: 10px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-detail-actions {
  grid-template-columns: 1fr auto;
  gap: 7px;
  padding: 10px 0 0;
  border-left: 0;
  border-top: 1px solid var(--ic-line);
}
#inlascomp-launcher[data-orientation="portrait"] .ic-detail-actions .ic-action {
  min-height: 44px;
  padding: 0 13px;
  font-size: 12px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-action-primary {
  grid-column: 1 / -1;
  font-size: 15px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-bottom-nav {
  position: absolute;
  z-index: 9005;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 60px;
  padding: 4px;
  border: 1px solid var(--ic-line);
  border-radius: 18px;
  background: rgba(10,13,26,.93);
  box-shadow: 0 16px 40px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(24px);
}
#inlascomp-launcher[data-orientation="portrait"] .ic-bottom-nav .ic-nav-button {
  justify-content: center;
  min-height: 50px;
  padding: 0 5px;
  gap: 4px;
  border-radius: 13px;
  font-size: 9px;
  flex-direction: column;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-bottom-nav .ic-nav-icon { font-size: 16px; }
#inlascomp-launcher[data-orientation="portrait"] .ic-mod-hero,
#inlascomp-launcher[data-orientation="portrait"] .ic-settings-card { padding: 15px; }
#inlascomp-launcher[data-orientation="portrait"] .ic-mod-highlight {
  grid-template-columns: 44px minmax(0,1fr);
  gap: 11px;
  padding: 12px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-mod-highlight .ic-inline-action {
  grid-column: 1 / -1;
  min-height: 40px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-section-head {
  align-items: flex-start;
  flex-direction: column;
  gap: 9px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-section-actions {
  margin-left: 0;
  justify-content: flex-start;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-setting-row {
  grid-template-columns: 1fr;
  gap: 9px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-device-readout {
  max-width: none;
  text-align: left;
}

/* Compact portrait phones (320/360 CSS px classes): preserve all controls and
   shrink decoration before allowing horizontal overflow. */
#inlascomp-launcher[data-orientation="portrait"][data-size="compact"] .ic-game-card {
  height: clamp(142px, 25vh, 205px);
}
#inlascomp-launcher[data-orientation="portrait"][data-size="compact"] .ic-card-title {
  font-size: 12px;
}
#inlascomp-launcher[data-orientation="portrait"][data-size="compact"] .ic-card-kicker {
  display: none;
}
#inlascomp-launcher[data-orientation="portrait"][data-size="compact"] .ic-chip {
  min-width: 34px;
  padding: 0 6px;
  font-size: 9px;
}

/* Landscape phone: force the desktop-like sidebar composition even when the
   CSS width is <=820px. The old media query would otherwise switch a phone
   back to the portrait bottom-nav layout. */
#inlascomp-launcher[data-orientation="landscape"] .ic-shell {
  display: grid;
  grid-template-columns: clamp(136px, 20vw, 190px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: clamp(9px, 1.8vw, 18px);
  padding: max(8px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}
#inlascomp-launcher[data-orientation="landscape"] .ic-sidebar {
  display: flex;
  min-height: 0;
  padding: 0;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-brand {
  min-height: 52px;
  gap: 8px;
  padding: 0 5px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-brand-mark {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  transform: scale(.78);
  transform-origin: center;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-brand-name {
  font-size: clamp(19px, 2.5vw, 26px);
}
#inlascomp-launcher[data-orientation="landscape"] .ic-brand-sub {
  margin-top: 3px;
  font-size: 8px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-nav {
  gap: 5px;
  margin-top: 18px;
  padding: 0;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-nav-button {
  min-height: 42px;
  gap: 8px;
  padding: 0 10px;
  border-radius: 11px;
  font-size: 12px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-nav-icon { width: 18px; font-size: 16px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-side-bottom { display: grid; padding: 0; }
#inlascomp-launcher[data-orientation="landscape"] .ic-side-rule { margin: 7px 10px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-bottom-nav { display: none; }
#inlascomp-launcher[data-orientation="landscape"] .ic-main {
  display: block;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 2px 2px;
  overscroll-behavior: contain;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-topbar {
  min-height: 48px;
  margin-bottom: 8px;
  gap: 9px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-heading { display: block; }
#inlascomp-launcher[data-orientation="landscape"] .ic-heading h1 {
  font-size: clamp(20px, 3vw, 28px);
}
#inlascomp-launcher[data-orientation="landscape"] .ic-heading p {
  display: block;
  margin-top: 2px;
  font-size: 9px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-mobile-top { display: none; }
#inlascomp-launcher[data-orientation="landscape"] .ic-top-tools .ic-lang { display: flex; }
#inlascomp-launcher[data-orientation="landscape"] .ic-lang { padding: 2px; border-radius: 10px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-lang-button {
  min-width: 30px;
  height: 28px;
  padding: 0 5px;
  font-size: 9px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-icon-button {
  width: 36px;
  height: 36px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-library-layout { gap: 10px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-game-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.3vw, 14px);
}
#inlascomp-launcher[data-orientation="landscape"] .ic-game-card {
  height: clamp(140px, 37vh, 205px);
  border-radius: 12px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-card-body {
  inset: auto 10px 9px;
  gap: 3px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-card-title {
  font-size: clamp(15px, 2.4vw, 23px);
  letter-spacing: .08em;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-card-kicker { font-size: 6px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-card-status { font-size: 8px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-detail {
  grid-template-columns: minmax(0, 1.25fr) minmax(190px, .75fr);
  gap: 13px;
  min-height: 128px;
  padding: clamp(12px, 1.8vw, 18px);
  border-radius: 15px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-detail h2 {
  margin: 4px 0 3px;
  font-size: clamp(21px, 3.2vw, 31px);
}
#inlascomp-launcher[data-orientation="landscape"] .ic-detail-sub { font-size: 10px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-variant-row {
  gap: 5px;
  margin-top: 7px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-chip {
  min-width: 36px;
  min-height: 28px;
  padding: 0 7px;
  font-size: 9px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-detail-actions {
  grid-template-columns: 1fr;
  align-content: center;
  gap: 6px;
  padding: 0 0 0 12px;
  border-top: 0;
  border-left: 1px solid var(--ic-line);
}
#inlascomp-launcher[data-orientation="landscape"] .ic-detail-actions .ic-action {
  min-height: 38px;
  padding: 0 10px;
  font-size: 11px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-action-primary {
  grid-column: auto;
  font-size: 14px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-mod-page,
#inlascomp-launcher[data-orientation="landscape"] .ic-settings-page { gap: 10px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-mod-hero,
#inlascomp-launcher[data-orientation="landscape"] .ic-settings-card { padding: 14px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-section-head { margin-bottom: 10px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-section-head h2 { font-size: 20px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-mod-highlight {
  grid-template-columns: 44px minmax(0,1fr) auto;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-mod-logo {
  width: 44px;
  height: 44px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-mod-row {
  min-height: 56px;
  padding: 8px 10px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-setting-row {
  padding: 10px 0;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-device-readout {
  max-width: 16rem;
}

#inlascomp-launcher[data-orientation="landscape"][data-size="compact"] .ic-shell {
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 7px;
}
#inlascomp-launcher[data-orientation="landscape"][data-size="compact"] .ic-brand-sub { display: none; }
#inlascomp-launcher[data-orientation="landscape"][data-size="compact"] .ic-game-card {
  height: clamp(100px, 27vh, 150px);
}
#inlascomp-launcher[data-orientation="landscape"][data-size="compact"] .ic-heading p,
#inlascomp-launcher[data-orientation="landscape"][data-size="compact"] .ic-card-kicker { display: none; }

/* Desktop is not a target surface. Keep a phone-sized test frame instead of
   letting the launcher expand into a desktop dashboard and accidentally hide
   mobile overflows during development. */
#inlascomp-launcher[data-mobile="false"] .ic-shell {
  max-width: 956px;
  max-height: 440px;
  margin: auto;
}

/* ========================================================================
   inlasComp v3 — MAX GLASS + mobile polish
   Effect mechanics follow the supplied implementation spec: typed custom
   angles, moving diagonal sheen, masked conic glass edge, fixed-pixel depth
   shadows, backdrop blur, reduced-motion and no-backdrop fallback. The
   launcher's existing palette is intentionally retained.
   ======================================================================== */

@property --ic-glass-edge-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}
@property --ic-glass-sheen-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: -45deg;
}
@keyframes ic-glass-edge {
  from { --ic-glass-edge-angle: -75deg; }
  to { --ic-glass-edge-angle: -215deg; }
}
@keyframes ic-glass-sheen {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* Glass controls. Toggle is excluded because its ::after is the switch knob. */
.ic-nav-button,
.ic-icon-button,
.ic-report-button,
.ic-action,
.ic-chip,
.ic-lang-button,
.ic-inline-action {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(4px) saturate(135%);
  -webkit-backdrop-filter: blur(4px) saturate(135%);
  box-shadow:
    inset 0 1px 1px rgba(0,0,0,.18),
    inset 0 -1.5px 1px rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 1px 0 rgba(255,255,255,.14),
    0 10px 22px -12px rgba(0,0,0,.72);
  transition:
    transform .4s cubic-bezier(.25,1,.5,1),
    box-shadow .4s cubic-bezier(.25,1,.5,1),
    background .4s cubic-bezier(.16,1,.3,1),
    --ic-glass-edge-angle .5s ease;
}

.ic-nav-button::before,
.ic-icon-button::before,
.ic-report-button::before,
.ic-action::before,
.ic-chip::before,
.ic-lang-button::before,
.ic-inline-action::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(var(--ic-glass-sheen-angle),
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.34) 40% 50%,
    rgba(255,255,255,0) 55%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: ic-glass-sheen 6.8s cubic-bezier(.25,1,.5,1) infinite alternate;
  transition:
    background-position .5s cubic-bezier(.25,1,.5,1),
    --ic-glass-sheen-angle .5s cubic-bezier(.25,1,.5,1);
}

.ic-nav-button::after,
.ic-icon-button::after,
.ic-report-button::after,
.ic-action::after,
.ic-chip::after,
.ic-lang-button::after,
.ic-inline-action::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  box-sizing: border-box;
  background:
    conic-gradient(from var(--ic-glass-edge-angle) at 50% 50%,
      rgba(255,255,255,.52),
      rgba(255,255,255,0) 5% 40%,
      rgba(255,255,255,.52) 50%,
      rgba(255,255,255,0) 60% 95%,
      rgba(255,255,255,.52)),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.10));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  box-shadow: inset 0 0 0 .6px rgba(255,255,255,.34);
  pointer-events: none;
  animation: ic-glass-edge 8.5s cubic-bezier(.25,1,.5,1) infinite alternate;
  transition: --ic-glass-edge-angle .5s ease;
}

.ic-nav-button:hover,
.ic-icon-button:hover,
.ic-report-button:hover,
.ic-action:hover,
.ic-chip:hover:not(:disabled),
.ic-lang-button:hover,
.ic-inline-action:hover {
  transform: scale(.982);
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,.14),
    inset 0 -2px 2px rgba(255,255,255,.16),
    inset 0 0 1px 2px rgba(255,255,255,.13),
    0 14px 26px -13px rgba(0,0,0,.68);
}
.ic-nav-button:hover::before,
.ic-icon-button:hover::before,
.ic-report-button:hover::before,
.ic-action:hover::before,
.ic-chip:hover::before,
.ic-lang-button:hover::before,
.ic-inline-action:hover::before { background-position: 25% 50%; }

.ic-nav-button:active,
.ic-icon-button:active,
.ic-report-button:active,
.ic-action:active,
.ic-chip:active:not(:disabled),
.ic-lang-button:active,
.ic-inline-action:active {
  transform: scale(.96) rotate3d(1,0,0,13deg);
}
.ic-nav-button:active::before,
.ic-icon-button:active::before,
.ic-report-button:active::before,
.ic-action:active::before,
.ic-chip:active::before,
.ic-lang-button:active::before,
.ic-inline-action:active::before {
  background-position: 50% 15%;
  --ic-glass-sheen-angle: -15deg;
}
.ic-nav-button:active::after,
.ic-icon-button:active::after,
.ic-report-button:active::after,
.ic-action:active::after,
.ic-chip:active::after,
.ic-lang-button:active::after,
.ic-inline-action:active::after { --ic-glass-edge-angle: -75deg; }

.ic-nav-button:disabled::before,
.ic-nav-button:disabled::after,
.ic-action:disabled::before,
.ic-action:disabled::after,
.ic-chip:disabled::before,
.ic-chip:disabled::after,
.ic-inline-action:disabled::before,
.ic-inline-action:disabled::after {
  animation: none;
  opacity: .22;
}

/* Static glass surfaces: depth and refraction without changing the palette. */
.ic-panel,
.ic-detail,
.ic-game-card,
.ic-bottom-nav {
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.10),
    inset 0 -1px 1px rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(255,255,255,.045),
    0 20px 48px -24px rgba(0,0,0,.86);
}

/* Report A Bug is a real CTA instead of a small punctuation icon. */
.ic-report-button {
  appearance: none;
  min-width: 126px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(180,145,255,.52);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(110deg, rgba(131,57,242,.74), rgba(71,34,145,.58));
  font: 800 10px/1 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .075em;
  white-space: nowrap;
  cursor: pointer;
}
.ic-report-button > span { position: relative; z-index: 4; }
.ic-report-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 11px rgba(255,255,255,.78);
}

/* Give the brand its own breathing room before the Library typography. */
#inlascomp-launcher[data-orientation="landscape"] .ic-brand {
  margin-bottom: 10px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-nav {
  margin-top: 28px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-shell {
  gap: clamp(18px, 2.8vw, 30px);
  grid-template-columns: clamp(148px, 21vw, 198px) minmax(0, 1fr);
}
#inlascomp-launcher[data-orientation="landscape"] .ic-main {
  padding-left: clamp(5px, 1vw, 12px);
}

/* Official covers: always show the complete box art, never crop/stretch it,
   and keep it physically inside the card's rounded clipping box. */
.ic-game-card {
  padding: 5px;
}
.ic-cover,
.ic-cover-fallback,
.ic-card-shade {
  border-radius: calc(17px - 5px);
}
.ic-cover {
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  padding: clamp(2px, .7vw, 6px);
  transform: none !important;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.38));
}
.ic-game-card:hover .ic-cover { transform: none !important; }
.ic-card-shade {
  inset: 5px;
  background: linear-gradient(to bottom,
    rgba(2,4,9,0) 38%,
    rgba(3,4,10,.16) 58%,
    rgba(3,4,10,.93) 100%);
}
.ic-card-body {
  padding: 7px 8px;
  border-radius: 10px;
  background: linear-gradient(110deg, rgba(8,10,20,.35), rgba(8,10,20,.12));
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* Mod actions: toggle + explicit local uninstall. */
.ic-mod-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
}
.ic-uninstall-action {
  min-height: 34px;
  padding: 0 11px;
  font-size: 10px;
  white-space: nowrap;
}

#inlascomp-launcher[data-orientation="portrait"] .ic-report-button {
  min-width: 106px;
  height: 38px;
  padding: 0 10px;
  gap: 6px;
  font-size: 8px;
}
#inlascomp-launcher[data-orientation="portrait"][data-size="compact"] .ic-report-button {
  min-width: 92px;
  padding: 0 8px;
  font-size: 7px;
  letter-spacing: .05em;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-report-button {
  min-width: 116px;
  height: 36px;
  padding: 0 11px;
  font-size: 8px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-mod-row,
#inlascomp-launcher[data-orientation="landscape"] .ic-mod-row {
  grid-template-columns: minmax(0,1fr) auto;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-mod-actions {
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-uninstall-action {
  min-height: 30px;
  font-size: 9px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ic-nav-button,
  .ic-icon-button,
  .ic-report-button,
  .ic-action,
  .ic-chip,
  .ic-lang-button,
  .ic-inline-action,
  .ic-panel,
  .ic-detail,
  .ic-bottom-nav {
    background-color: rgba(14,17,34,.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  #inlascomp-launcher *,
  #inlascomp-launcher *::before,
  #inlascomp-launcher *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ========================================================================
   inlasComp v4 — stable mobile chrome
   - Keep the supplied MAX-glass construction, but freeze the continuous
     sheen/edge animation on touch devices: Safari was repainting the masked
     conic edge + backdrop-filter and producing the visible "jump".
   - Anchor the launcher to the stable small viewport instead of following
     visualViewport while Safari's bars animate.
   - The page title already exists inside each panel, so landscape header
     keeps only the brand + tools and cannot visually concatenate inlasCompMods.
   ======================================================================== */

/* Stable viewport: browser chrome may animate, launcher chrome must not. */
#inlascomp-launcher {
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100svh !important;
  max-width: 100vw !important;
  max-height: 100svh !important;
}

/* The MAX-glass look remains, but the glass itself is static. This removes
   continuous compositor churn from mask + conic-gradient + backdrop-filter. */
.ic-nav-button,
.ic-icon-button,
.ic-report-button,
.ic-action,
.ic-chip,
.ic-lang-button,
.ic-inline-action {
  --ic-glass-edge-angle: -112deg;
  --ic-glass-sheen-angle: -45deg;
  transition:
    transform .16s cubic-bezier(.2,.8,.2,1),
    box-shadow .20s cubic-bezier(.2,.8,.2,1),
    background .20s cubic-bezier(.2,.8,.2,1) !important;
}
.ic-nav-button::before,
.ic-icon-button::before,
.ic-report-button::before,
.ic-action::before,
.ic-chip::before,
.ic-lang-button::before,
.ic-inline-action::before {
  animation: none !important;
  background-position: 38% 50% !important;
  opacity: .82;
  transition: opacity .18s ease, background-position .18s ease !important;
}
.ic-nav-button::after,
.ic-icon-button::after,
.ic-report-button::after,
.ic-action::after,
.ic-chip::after,
.ic-lang-button::after,
.ic-inline-action::after {
  animation: none !important;
  transition: opacity .18s ease !important;
}

/* Touch screens do not have a meaningful hover state. Safari can latch
   :hover after a tap; neutralise that path and keep only a small press depth. */
@media (hover: none), (pointer: coarse) {
  .ic-nav-button:hover,
  .ic-icon-button:hover,
  .ic-report-button:hover,
  .ic-action:hover,
  .ic-chip:hover:not(:disabled),
  .ic-lang-button:hover,
  .ic-inline-action:hover {
    transform: none !important;
  }
  .ic-nav-button:hover::before,
  .ic-icon-button:hover::before,
  .ic-report-button:hover::before,
  .ic-action:hover::before,
  .ic-chip:hover::before,
  .ic-lang-button:hover::before,
  .ic-inline-action:hover::before {
    background-position: 38% 50% !important;
  }
  .ic-nav-button:active,
  .ic-icon-button:active,
  .ic-report-button:active,
  .ic-action:active,
  .ic-chip:active:not(:disabled),
  .ic-lang-button:active,
  .ic-inline-action:active {
    transform: scale(.985) !important;
  }
  .ic-nav-button:active::before,
  .ic-icon-button:active::before,
  .ic-report-button:active::before,
  .ic-action:active::before,
  .ic-chip:active::before,
  .ic-lang-button:active::before,
  .ic-inline-action:active::before {
    background-position: 48% 42% !important;
    --ic-glass-sheen-angle: -38deg;
  }
}

/* Landscape phone: don't repeat the page title beside the sidebar brand.
   Each page already carries its own heading inside the content panel. */
#inlascomp-launcher[data-orientation="landscape"] .ic-heading {
  display: none !important;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-topbar {
  justify-content: flex-end;
  padding-left: 4px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-top-tools {
  margin-left: auto;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-shell {
  grid-template-columns: clamp(174px, 22vw, 212px) minmax(0, 1fr) !important;
  gap: clamp(22px, 3vw, 36px) !important;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-brand {
  padding-right: 10px;
}

/* Portrait bottom navigation is a sibling of the scrolling main pane. Keep it
   anchored to the stable launcher viewport; only the main content scrolls. */
#inlascomp-launcher[data-orientation="portrait"] .ic-bottom-nav {
  position: absolute !important;
  left: max(10px, env(safe-area-inset-left)) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  transform: translateZ(0);
}
#inlascomp-launcher[data-orientation="portrait"] .ic-main {
  padding-bottom: 2px;
}

/* Engine hand-off is authoritative. The Web bridge adds web-game-live before
   gameplay; the DOM launcher must never sit above the game's HUD/touch pad. */
body.web-game-live #inlascomp-launcher {
  display: none !important;
  pointer-events: none !important;
}

/* =========================================================================
   v13.5-r2 — AJUSTEMENTS DEMANDÉS, ET RIEN D'AUTRE
   =========================================================================
   Trois points, tous additifs. Aucune règle existante n'est réécrite, aucune
   couleur, taille, police, position, animation ou mise en page ne change.
   ------------------------------------------------------------------------- */

/* 1. LAUNCHER UNIQUE — symétrie avec la feuille critique d'index.html.
      body.web-game-live existe déjà mais transite par
      love.system.openURL("javascript:…"), que Safari refuse : sur iPhone il
      n'arrive jamais. web-viewport-game est le reflet du canal FICHIER
      web-viewport-mode.txt, que le moteur écrit sur toutes les plateformes.
      Les deux UI deviennent donc mutuellement exclusives sous un seul
      signal : jeu visible => shell DOM retiré, launcher moteur masqué. */
body.web-viewport-game #inlascomp-launcher {
  display: none !important;
  pointer-events: none !important;
}

/* 2. RÉACTIVITÉ TACTILE — aucun style modifié, seulement le temps de réponse.
      touch-action: manipulation retire l'attente de double-tap que
      Safari/iOS s'impose avant d'émettre le click.
      L'état :active existait déjà (transform scale(.96) + sheen), mais la
      règle de base lui appliquait une transition de 400 ms : l'appui
      paraissait mou. La pression devient instantanée, le relâchement garde
      son amorti d'origine. Aucun écouteur JS n'est ajouté : le canal reste
      l'unique délégation click du shell, donc aucun double déclenchement,
      aucun double import, aucune commande envoyée deux fois au pont. */
.ic-nav-button,
.ic-icon-button,
.ic-report-button,
.ic-action,
.ic-chip,
.ic-toggle,
.ic-lang-button,
.ic-inline-action,
.ic-game-card {
  touch-action: manipulation;
}
.ic-nav-button:active,
.ic-icon-button:active,
.ic-report-button:active,
.ic-action:active:not(:disabled),
.ic-chip:active:not(:disabled),
.ic-lang-button:active,
.ic-inline-action:active {
  transition-duration: 0s;
}
/* Les cartes de jeu n'avaient de retour qu'au survol — inatteignable au
   doigt. Elles reprennent EXACTEMENT la valeur du :hover existant, appliquée
   sans délai à l'appui. Aucun nouveau visuel n'est introduit. */
.ic-game-card:active {
  transform: translateY(-2px);
  transition-duration: 0s;
}

/* 3. BOUTONS DE LANGUES — espacement légèrement augmenté.
      Uniquement .ic-lang (barre du haut ET ligne Paramètres). Taille,
      apparence, centrage et hitboxes inchangés ; seul l'écart horizontal
      passe de 0 à 6 px. Contrôlé sans débordement : 5 x 37 px + 4 x 6 px
      + 8 px de padding = 217 px, sous les 292 px utiles d'un écran 320 px en
      portrait, où la ligne Paramètres passe déjà en pleine largeur. */
.ic-lang { gap: 6px; }
/* En paysage TÉLÉPHONE les pastilles sont plus petites (30 x 28) et partagent
   la barre du haut avec le titre et REPORT A BUG : 4 px suffisent à aérer
   sans pousser quoi que ce soit hors cadre (5 x 30 + 4 x 4 + 4 = 170 px).
   data-size est calculé sur le petit côté de l'écran, donc il ne bascule pas
   à la rotation : "large" (tablette, desktop) garde bien les 6 px. */
#inlascomp-launcher[data-orientation="landscape"]:not([data-size="large"]) .ic-lang {
  gap: 4px;
}
/* Filet de sécurité : si un appareil très étroit ne pouvait pas tenir la
   rangée, elle se replierait proprement plutôt que de déborder ou de créer un
   défilement horizontal. Aucun bouton n'est rétréci, et l'alignement actuel
   est conservé tel quel (pas de justify-content ajouté : en portrait la ligne
   Paramètres est pleine largeur et les pastilles doivent rester où elles
   sont). Sur les largeurs réelles ce repli ne se déclenche jamais. */
.ic-lang { flex-wrap: wrap; row-gap: 4px; }

/* =========================================================================
   inlasComp v1.0 — save manager + safe return to launcher
   Additive Web UI only. No canvas sizing, transform, viewport or touch-control
   rule is changed here.
   ========================================================================= */

.ic-save-entry {
  min-height: 44px;
  color: #cfd5e6;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,.028);
}

.ic-save-modal[hidden] { display: none !important; }
.ic-save-modal {
  position: absolute;
  z-index: 9020;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
.ic-save-backdrop {
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(2, 4, 12, .68);
  backdrop-filter: blur(9px) saturate(112%);
  -webkit-backdrop-filter: blur(9px) saturate(112%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ic-save-sheet {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: clamp(18px, 2.6vw, 28px);
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 8%, rgba(141,66,255,.16), transparent 34%),
    rgba(10, 13, 27, .94);
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.ic-save-sheet::-webkit-scrollbar { display: none; }
.ic-save-head {
  display: grid;
  grid-template-columns: 62px minmax(0,1fr) 36px;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ic-line);
}
.ic-save-cover-wrap {
  position: relative;
  width: 62px;
  height: 78px;
  overflow: hidden;
  border: 1px solid rgba(199,209,255,.14);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.ic-save-cover-fallback,
.ic-save-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.ic-save-cover-fallback {
  display: grid;
  place-items: center;
  color: #cfd5ea;
  font-size: 22px;
  font-weight: 800;
}
.ic-save-cover {
  object-fit: contain;
  padding: 3px;
}
.ic-save-head-copy { min-width: 0; }
.ic-save-head h2 {
  margin: 4px 0 4px;
  overflow: hidden;
  color: var(--ic-text);
  font-size: clamp(20px, 4vw, 28px);
  line-height: 1.05;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ic-save-sub {
  overflow: hidden;
  color: var(--ic-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ic-save-close {
  appearance: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ic-line);
  border-radius: 50%;
  background: rgba(255,255,255,.045);
  color: #d9def0;
  font: 500 22px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ic-save-list {
  display: grid;
  gap: 9px;
  padding: 15px 0;
}
.ic-save-row {
  display: grid;
  grid-template-columns: 27px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 11px 12px;
  border: 1px solid rgba(199,209,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.026);
}
.ic-save-row.is-active {
  border-color: rgba(84,221,138,.28);
  background: linear-gradient(110deg, rgba(84,221,138,.07), rgba(255,255,255,.026));
}
.ic-save-row-copy { min-width: 0; }
.ic-save-row-title {
  overflow: hidden;
  color: #f0f2fa;
  font-size: 13px;
  font-weight: 730;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ic-save-row-meta {
  margin-top: 4px;
  overflow: hidden;
  color: var(--ic-muted);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ic-save-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.ic-save-row-actions .ic-inline-action {
  min-height: 34px;
  padding: 0 10px;
  font-size: 10px;
}
.ic-save-active {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(84,221,138,.28);
  border-radius: 999px;
  background: rgba(84,221,138,.09);
  color: #bdf5d2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ic-save-empty {
  padding: 26px 14px;
  color: var(--ic-muted);
  font-size: 12px;
  text-align: center;
}
.ic-save-footer {
  padding-top: 14px;
  border-top: 1px solid var(--ic-line);
}
.ic-save-import {
  width: 100%;
  min-height: 50px;
  background: linear-gradient(110deg, rgba(126,48,243,.28), rgba(255,255,255,.035));
}


.ic-save-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 0 1px;
}
.ic-save-tool {
  appearance: none;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(199,209,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #cfd5e6;
  font: 720 10px/1 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ic-save-tool.is-danger {
  margin-left: auto;
  border-color: rgba(255,92,111,.24);
  background: rgba(255,72,94,.07);
  color: #ffb4bd;
}
.ic-save-tool:disabled,
.ic-save-check:disabled {
  cursor: default;
  opacity: .42;
}
.ic-save-check,
.ic-save-check-placeholder {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  box-sizing: border-box;
}
.ic-save-check {
  appearance: none;
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(199,209,255,.20);
  border-radius: 50%;
  background: rgba(255,255,255,.035);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.ic-save-check::after {
  content: "";
  width: 7px;
  height: 11px;
  margin-top: -2px;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(45deg) scale(.72);
  transition: border-color .14s ease, transform .14s ease;
}
.ic-save-check.is-selected {
  border-color: rgba(156,103,255,.72);
  background: linear-gradient(145deg, rgba(139,72,255,.84), rgba(101,45,212,.70));
  box-shadow: 0 5px 16px rgba(90,36,190,.22), inset 0 1px rgba(255,255,255,.18);
}
.ic-save-check.is-selected::after {
  border-right-color: #fff;
  border-bottom-color: #fff;
  transform: rotate(45deg) scale(1);
}
.ic-save-check:active:not(:disabled) { transform: scale(.92); }
.ic-save-row.is-selected {
  border-color: rgba(151,91,255,.32);
  background: linear-gradient(110deg, rgba(120,57,229,.09), rgba(255,255,255,.026));
}
.ic-save-row.is-active.is-selected {
  border-color: rgba(122,157,227,.38);
  background: linear-gradient(110deg, rgba(84,221,138,.055), rgba(126,48,243,.075));
}
.ic-save-delete {
  border-color: rgba(255,92,111,.24) !important;
  background: rgba(255,72,94,.055) !important;
  color: #ffb0ba !important;
}
.ic-save-delete-confirm {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 1px 0 13px;
  padding: 13px 14px;
  border: 1px solid rgba(255,92,111,.22);
  border-radius: 15px;
  background: linear-gradient(115deg, rgba(131,34,54,.13), rgba(255,255,255,.025));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.ic-save-delete-confirm-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.ic-save-delete-confirm-copy strong {
  color: #ffe9ec;
  font-size: 11px;
  font-weight: 780;
  line-height: 1.35;
}
.ic-save-delete-confirm-copy span {
  color: #c3aeb3;
  font-size: 9px;
  line-height: 1.35;
}
.ic-save-delete-confirm-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ic-save-delete-confirm-actions .ic-action {
  min-height: 38px;
  padding: 0 12px;
  font-size: 10px;
}
.ic-action-danger {
  border-color: rgba(255,92,111,.40) !important;
  background: linear-gradient(110deg, rgba(211,43,67,.34), rgba(126,22,46,.22)) !important;
  color: #fff !important;
}

/* Gameplay return control: outside #inlascomp-launcher and outside canvas
   layout. Only its small handle/menu accept pointer events. */
#inlascomp-game-return {
  position: fixed;
  z-index: 99990;
  top: max(9px, env(safe-area-inset-top));
  right: max(9px, env(safe-area-inset-right));
  display: none;
  align-items: flex-start;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
body.web-game-live #inlascomp-game-return,
body.web-viewport-game #inlascomp-game-return {
  display: flex;
}
.ic-game-return-handle {
  appearance: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  padding: 0;
  border: 1px solid rgba(215,221,255,.20);
  border-radius: 50%;
  background: rgba(8, 11, 24, .56);
  color: rgba(244,246,255,.82);
  box-shadow: 0 8px 24px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.10);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  font: 600 15px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  cursor: pointer;
  opacity: .68;
  pointer-events: auto;
  touch-action: manipulation;
  transition: opacity .16s ease, transform .16s ease, background .16s ease;
}
.ic-game-return-handle:active {
  opacity: 1;
  transform: scale(.96);
}
.ic-game-return-menu {
  position: absolute;
  top: 0;
  right: 43px;
  width: min(216px, calc(100vw - 66px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  display: grid;
  gap: 7px;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid rgba(199,209,255,.16);
  border-radius: 15px;
  background: rgba(9, 12, 25, .91);
  box-shadow: 0 16px 38px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(18px) saturate(132%);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
  pointer-events: auto;
}
.ic-game-return-menu .ic-inline-action {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  font-size: 10px;
}
.ic-game-return-main { color: #fff; }
.ic-game-return-title {
  color: #f2f4fb;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: -.01em;
}
.ic-game-return-copy,
.ic-game-return-status,
.ic-game-return-error {
  color: #aeb6ca;
  font-size: 9px;
  line-height: 1.4;
}
.ic-game-return-status { color: #d3d8e6; }
.ic-game-return-error { color: #ffadb6; }
.ic-game-return-actions {
  display: grid;
  gap: 6px;
}
.ic-game-return-danger {
  border-color: rgba(237,52,72,.34) !important;
  color: #ffb1ba !important;
  background: rgba(237,52,72,.08) !important;
}

#inlascomp-launcher[data-orientation="portrait"] .ic-save-sheet {
  width: min(520px, 100%);
  padding: 16px;
  border-radius: 20px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-save-head {
  grid-template-columns: 52px minmax(0,1fr) 32px;
  gap: 11px;
  padding-bottom: 13px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-save-cover-wrap {
  width: 52px;
  height: 66px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-save-row {
  grid-template-columns: 27px minmax(0,1fr);
  gap: 8px 10px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-save-row-actions {
  grid-column: 2;
  justify-content: flex-start;
  flex-wrap: wrap;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-save-tools {
  flex-wrap: wrap;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-save-delete-confirm {
  grid-template-columns: 1fr;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-save-delete-confirm-actions {
  justify-content: stretch;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-save-delete-confirm-actions .ic-action {
  flex: 1 1 0;
}

#inlascomp-launcher[data-orientation="landscape"] .ic-save-modal {
  padding:
    max(8px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}
#inlascomp-launcher[data-orientation="landscape"] .ic-save-sheet {
  width: min(650px, 88%);
  padding: 14px 16px;
  border-radius: 18px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-save-head {
  grid-template-columns: 48px minmax(0,1fr) 30px;
  gap: 10px;
  padding-bottom: 10px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-save-cover-wrap {
  width: 48px;
  height: 60px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-save-head h2 {
  font-size: 20px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-save-list {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
  padding: 10px 0;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-save-empty {
  grid-column: 1 / -1;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-save-row {
  grid-template-columns: 27px minmax(0,1fr);
  gap: 7px 9px;
  min-height: 58px;
  padding: 8px 9px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-save-row-actions {
  grid-column: 2;
  justify-content: flex-start;
  flex-wrap: wrap;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-save-tools {
  padding-top: 9px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-save-delete-confirm {
  margin-bottom: 9px;
  padding: 10px 11px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-save-footer {
  padding-top: 10px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-save-import {
  min-height: 40px;
}

@media (prefers-reduced-motion: reduce) {
  .ic-game-return-handle,
  .ic-save-check,
  .ic-save-check::after { transition: none !important; }
}

/* MOD import progress: same bar primitive as ROM import, but global so it
   remains visible if the user changes launcher tabs during a long local ZIP. */
.ic-mod-import-progress {
  --accent: var(--ic-purple);
  position: fixed;
  z-index: 9012;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 34px));
  box-sizing: border-box;
  padding: 13px 16px 14px;
  border: 1px solid rgba(170,181,222,.22);
  border-radius: 14px;
  background: rgba(10,12,24,.95);
  box-shadow: 0 18px 45px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  pointer-events: none;
}
.ic-mod-import-progress[hidden] { display: none !important; }
.ic-mod-import-progress .ic-progress-wrap { margin-top: 0; }
.ic-mod-import-progress .ic-progress-text { margin-bottom: 8px; font-size: 12px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.ic-mod-import-progress.is-error { --accent: var(--ic-red); border-color: rgba(237,52,72,.48); }
.ic-mod-import-progress.is-complete { --accent: var(--ic-green); }

@media (max-width: 820px), (orientation: portrait) {
  .ic-mod-import-progress {
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(max(11px, env(safe-area-inset-bottom)) + 75px);
    width: auto;
    transform: none;
  }
}

#inlascomp-launcher[data-orientation="landscape"] .ic-mod-import-progress {
  bottom: max(14px, env(safe-area-inset-bottom));
}


/* =========================================================================
   inlasComp r6 — surgical launcher evolution
   ========================================================================= */

/* Card metadata stays in the lower quarter/third. The artwork is never blurred;
   only a compact progressive shade protects text readability. */
.ic-card-shade {
  background: linear-gradient(to bottom,
    rgba(2,4,9,0) 54%,
    rgba(3,4,10,.06) 66%,
    rgba(3,4,10,.48) 82%,
    rgba(3,4,10,.88) 100%) !important;
}
.ic-card-body {
  padding: 5px 7px !important;
  gap: 4px !important;
  background: linear-gradient(180deg, rgba(7,9,18,.02), rgba(7,9,18,.24)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.ic-cover { object-position: 50% 46% !important; }
.ic-card-title { text-shadow: 0 2px 10px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.54); }
.ic-card-status { text-shadow: 0 1px 8px rgba(0,0,0,.96); }

/* Official remote mod is distinct, but reuses the existing mod-card language. */
.ic-official-highlight {
  border-color: rgba(108,151,255,.34);
  background: linear-gradient(110deg, rgba(43,91,184,.15), rgba(117,52,219,.10), rgba(255,255,255,.022));
}
.ic-official-logo {
  background-image:
    url("assets/inlascomp-logo-mark.png?v=13.5-ml-inlascomp-r9");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid rgba(164,195,255,.28);
  box-shadow: 0 9px 24px rgba(45,85,173,.25), inset 0 1px rgba(255,255,255,.16);
}
.ic-mod-badge {
  margin-bottom: 4px;
  color: #a9c7ff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.ic-local-highlight { margin-top: 10px; }
.ic-inline-action:disabled { opacity: .42; cursor: default; }

/* Unknown Content-Length uses a true indeterminate bar, never a fake %. */
.ic-mod-import-progress.is-indeterminate .ic-progress { position: relative; overflow: hidden; }
.ic-mod-import-progress.is-indeterminate .ic-progress > span {
  position: absolute;
  left: -35%;
  width: 35% !important;
  animation: icRemoteDownload 1.15s ease-in-out infinite;
}
@keyframes icRemoteDownload {
  from { transform: translateX(0); }
  to { transform: translateX(390%); }
}

/* Mobile brand: keep the real mark + wordmark + live counters beside Report A Bug. */
#inlascomp-launcher[data-orientation="portrait"] .ic-mobile-top .ic-brand-mark {
  transform: none !important;
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 11px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-mobile-top .ic-brand-name {
  font-size: clamp(19px, 5.7vw, 24px);
  letter-spacing: -.06em;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-mobile-top .ic-brand-stats {
  max-width: 154px;
  margin-top: 3px;
  font-size: clamp(6.5px, 1.85vw, 8px);
}
#inlascomp-launcher[data-orientation="landscape"] .ic-brand-mark {
  transform: none !important;
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 11px;
}
#inlascomp-launcher[data-orientation="landscape"] .ic-brand-sub { font-size: 6.5px; letter-spacing: .08em; }
#inlascomp-launcher[data-orientation="landscape"] .ic-brand-stats { margin-top: 3px; font-size: 6.5px; }
#inlascomp-launcher[data-orientation="landscape"][data-size="compact"] .ic-brand-stats { display: none; }

@media (max-width: 520px) {
  .ic-card-body { padding: 4px 5px !important; }
  .ic-card-shade {
    background: linear-gradient(to bottom,
      rgba(2,4,9,0) 58%,
      rgba(3,4,10,.08) 70%,
      rgba(3,4,10,.56) 86%,
      rgba(3,4,10,.88) 100%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ic-mod-import-progress.is-indeterminate .ic-progress > span { animation: none; left: 32%; }
}


/* ========================================================================
   inlasComp v2 — What's new / release notes
   Additive launcher-only view. No canvas, engine, touch or game geometry.
   ======================================================================== */
.ic-whatsnew-page {
  display: grid;
  gap: 16px;
  padding-bottom: 4px;
}
.ic-release-hero {
  position: relative;
  min-height: 210px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  gap: 24px;
  padding: clamp(24px, 3vw, 40px);
  overflow: hidden;
  border: 1px solid rgba(160,112,255,.30);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 22%, rgba(125,64,255,.22), transparent 35%),
    radial-gradient(circle at 8% 105%, rgba(41,150,255,.15), transparent 38%),
    linear-gradient(120deg, rgba(16,17,34,.95), rgba(10,11,25,.82));
}
.ic-release-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.05), transparent 30%, transparent 68%, rgba(141,66,255,.06));
}
.ic-release-hero-copy { position: relative; z-index: 2; min-width: 0; }
.ic-release-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  color: #aeb6ca;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ic-release-badge {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 27px;
  padding: 0 10px;
  border: 1px solid rgba(183,143,255,.58);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(120deg, rgba(141,66,255,.95), rgba(93,38,244,.78));
  box-shadow: 0 8px 24px rgba(111,43,235,.22), inset 0 1px rgba(255,255,255,.20);
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: none;
}
.ic-release-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(190,199,220,.55); }
.ic-release-hero h2 {
  margin: 15px 0 9px;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: .98;
  letter-spacing: -.055em;
}
.ic-release-hero p {
  max-width: 760px;
  margin: 0;
  color: #b7bfd2;
  font-size: 14px;
  line-height: 1.65;
}
.ic-release-mark {
  position: relative;
  z-index: 1;
  justify-self: end;
  width: 156px;
  height: 156px;
  border-radius: 38px;
  background: url("assets/inlascomp-logo-mark.png?v=13.5-ml-inlascomp-r9") center/cover no-repeat;
  box-shadow: 0 28px 60px rgba(0,0,0,.34), 0 0 48px rgba(110,63,255,.16), inset 0 1px rgba(255,255,255,.20);
  opacity: .92;
}
.ic-release-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ic-release-card {
  min-width: 0;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid rgba(199,209,255,.12);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(15,18,36,.86), rgba(10,12,26,.72));
}
.ic-release-card.is-wide { grid-column: 1 / -1; }
.ic-release-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.ic-release-card-head h2 { margin: 0; font-size: clamp(18px, 2vw, 24px); letter-spacing: -.025em; }
.ic-release-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(166,122,255,.30);
  border-radius: 11px;
  color: #c9b2ff;
  background: rgba(128,70,255,.10);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  font-size: 15px;
}
.ic-release-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.ic-release-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  color: #b7bfd2;
  font-size: 12.5px;
  line-height: 1.48;
}
.ic-release-check { color: #8d63ff; font-weight: 850; text-align: center; }
.ic-release-card.is-wide .ic-release-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}

#inlascomp-launcher[data-orientation="portrait"] .ic-whatsnew-page { gap: 11px; }
#inlascomp-launcher[data-orientation="portrait"] .ic-release-hero {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 10px;
  padding: 18px;
  border-radius: 17px;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-release-mark {
  width: 58px;
  height: 58px;
  border-radius: 17px;
  align-self: start;
}
#inlascomp-launcher[data-orientation="portrait"] .ic-release-meta { gap: 6px; font-size: 7.5px; letter-spacing: .075em; }
#inlascomp-launcher[data-orientation="portrait"] .ic-release-badge { min-width: 33px; height: 22px; padding: 0 8px; font-size: 10px; }
#inlascomp-launcher[data-orientation="portrait"] .ic-release-hero h2 { margin: 10px 0 7px; font-size: clamp(27px, 9vw, 38px); }
#inlascomp-launcher[data-orientation="portrait"] .ic-release-hero p { font-size: 11px; line-height: 1.48; }
#inlascomp-launcher[data-orientation="portrait"] .ic-release-grid { grid-template-columns: 1fr; gap: 11px; }
#inlascomp-launcher[data-orientation="portrait"] .ic-release-card,
#inlascomp-launcher[data-orientation="portrait"] .ic-release-card.is-wide { grid-column: auto; padding: 16px; border-radius: 16px; }
#inlascomp-launcher[data-orientation="portrait"] .ic-release-card-head { gap: 9px; margin-bottom: 12px; }
#inlascomp-launcher[data-orientation="portrait"] .ic-release-card-head h2 { font-size: 18px; }
#inlascomp-launcher[data-orientation="portrait"] .ic-release-icon { width: 31px; height: 31px; flex-basis: 31px; border-radius: 9px; }
#inlascomp-launcher[data-orientation="portrait"] .ic-release-list,
#inlascomp-launcher[data-orientation="portrait"] .ic-release-card.is-wide .ic-release-list { grid-template-columns: 1fr; gap: 9px; }
#inlascomp-launcher[data-orientation="portrait"] .ic-release-list li { font-size: 11px; line-height: 1.42; }
#inlascomp-launcher[data-orientation="portrait"] .ic-bottom-nav .ic-nav-button { font-size: 8px; }

#inlascomp-launcher[data-orientation="landscape"] .ic-whatsnew-page { gap: 10px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-release-hero { min-height: 145px; grid-template-columns: minmax(0,1fr) 94px; gap: 14px; padding: 18px 20px; border-radius: 16px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-release-mark { width: 82px; height: 82px; border-radius: 22px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-release-meta { font-size: 7.5px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-release-badge { min-width: 34px; height: 22px; font-size: 10px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-release-hero h2 { margin: 9px 0 5px; font-size: clamp(27px, 4vw, 38px); }
#inlascomp-launcher[data-orientation="landscape"] .ic-release-hero p { font-size: 10px; line-height: 1.45; }
#inlascomp-launcher[data-orientation="landscape"] .ic-release-grid { gap: 10px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-release-card { padding: 14px; border-radius: 14px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-release-card-head { margin-bottom: 9px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-release-card-head h2 { font-size: 16px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-release-icon { width: 29px; height: 29px; flex-basis: 29px; border-radius: 9px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-release-list { gap: 7px; }
#inlascomp-launcher[data-orientation="landscape"] .ic-release-list li { grid-template-columns: 15px minmax(0,1fr); gap: 6px; font-size: 9px; line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
  .ic-release-hero, .ic-release-card, .ic-release-mark { scroll-behavior: auto; }
}