/* ============ the title screens: shared glyphs, and the desktop layout (dtitle; src/mobile/title.js) ============ */
/* Phones style the hero select and Choose Your Hero in mobile.css (body.mobile). The desktop shows the same screens
   (.mt-desk), laid out for a 1280x720 screen and scaled to the window by --title-zoom (src/ui/overlays.js), over the
   painted title art and its foreground: bigger type, hover and focus states for a mouse and a keyboard, the Play with
   friends bar at the top, the cloud save chip and its notes beside the pager. Buttons are CSS-built (borders and
   gradients), so no frame art is ever stretched. Glyphs, crest ribbons, the plus and the pill icons are CSS
   placeholders: their painted versions are in the art ledger (art/production/art_needed_curated.json, "Phone title"). */

/* ----- glyphs (both layouts): the pill icons, the dice and the class glyphs, as masks coloured with currentColor ----- */
#overlay .mt-ico-gear { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M10.3 2h3.4l.5 2.6c.7.2 1.3.5 1.9.9l2.2-1.5 2.4 2.4-1.5 2.2c.4.6.7 1.2.9 1.9l2.6.5v3.4l-2.6.5c-.2.7-.5 1.3-.9 1.9l1.5 2.2-2.4 2.4-2.2-1.5c-.6.4-1.2.7-1.9.9l-.5 2.6h-3.4l-.5-2.6c-.7-.2-1.3-.5-1.9-.9l-2.2 1.5-2.4-2.4 1.5-2.2c-.4-.6-.7-1.2-.9-1.9L2 13.7v-3.4l2.6-.5c.2-.7.5-1.3.9-1.9L4 5.7l2.4-2.4 2.2 1.5c.6-.4 1.2-.7 1.9-.9zM12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z'/%3E%3C/svg%3E"); }
#overlay .mt-ico-user { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='7.8' r='4.3'/%3E%3Cpath d='M3.6 21.2c.5-4.8 4-7.6 8.4-7.6s7.9 2.8 8.4 7.6z'/%3E%3C/svg%3E"); }
#overlay .mt-ico-dice { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='4.2' fill='none' stroke='black' stroke-width='2'/%3E%3Cg fill='black'%3E%3Ccircle cx='8.2' cy='8.2' r='1.7'/%3E%3Ccircle cx='15.8' cy='8.2' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='8.2' cy='15.8' r='1.7'/%3E%3Ccircle cx='15.8' cy='15.8' r='1.7'/%3E%3C/g%3E%3C/svg%3E"); }
#overlay .mt-glyph[data-cls="warrior"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M4 4l11 11M20 4 9 15M12.6 17.8l5.2-5.2M11.4 17.8 6.2 12.6M16.2 16.2l3.3 3.3M7.8 16.2l-3.3 3.3'/%3E%3Ccircle cx='20.6' cy='20.6' r='1.4' fill='black' stroke='none'/%3E%3Ccircle cx='3.4' cy='20.6' r='1.4' fill='black' stroke='none'/%3E%3C/svg%3E"); }
#overlay .mt-glyph[data-cls="mage"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 6.4C9.6 4.9 6.4 4.5 3 5.1v13.2c3.4-.6 6.6-.2 9 1.3 2.4-1.5 5.6-1.9 9-1.3V5.1c-3.4-.6-6.6-.2-9 1.3zM12 6.4v13.2M6 9.2c1.4-.2 2.7 0 3.8.5M6 12.2c1.4-.2 2.7 0 3.8.5M14.2 9.7c1.1-.5 2.4-.7 3.8-.5M14.2 12.7c1.1-.5 2.4-.7 3.8-.5'/%3E%3C/svg%3E"); }
#overlay .mt-glyph[data-cls="ranger"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3c6.4 3.4 6.4 14.6 0 18M8 3v18M3 12h17M17.2 9.2 20 12l-2.8 2.8M3 12 1.8 10.6M3 12l-1.2 1.4'/%3E%3C/svg%3E"); }
#overlay .mt-glyph[data-cls="rogue"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate%2845 12 12%29'%3E%3Cpath d='M12 1.2l2.3 4.2v9.4H9.7V5.4z' fill='black'/%3E%3Cpath d='M7.6 15.4h8.8' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M12 16.4v4' stroke='black' stroke-width='2.6'/%3E%3Ccircle cx='12' cy='21.8' r='1.4' fill='black'/%3E%3C/g%3E%3C/svg%3E"); }

/* ----- the desktop: both screens ----- */
#overlay .mt-desk { --mt-gold: #e2b65f; --mt-line: rgba(214, 168, 88, .72); --mt-ink: #f3e3bd;
  position: absolute; inset: 0; z-index: 1; display: grid; box-sizing: border-box; width: auto; max-height: none; margin: 0; overflow: hidden; transform: none; zoom: var(--title-zoom, 1);
  padding: 20px 32px 18px; color: var(--mt-ink); font: 16px/1.3 'EB Garamond', Georgia, serif; text-align: left; }
#overlay .mt-desk::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 5, 2, .6), rgba(10, 5, 2, .14) 26%, rgba(10, 5, 2, .2) 64%, rgba(6, 3, 1, .8)); }
#overlay .mt-desk .embers { z-index: -1; }
body:not(.mobile) #overlay > .title-fg { z-index: 0; } /* the painted foreground: above the vignette, behind the screen */
#overlay .mt-desk .mt-ico, #overlay .mt-desk .mt-glyph { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
/* One colour per class (the crest ribbon, the emblem, the glow behind the art); --fx/--fy/--z frame the head and
   shoulders of hero_<class>.webp on a hero card, as on the phone. */
#overlay .mt-desk [data-cls="warrior"] { --crest: #a52a1e; --crest2: #561009; --crest-glow: rgba(196, 72, 40, .4); --fx: 59%; --fy: .035; --z: 3.1; }
#overlay .mt-desk [data-cls="mage"] { --crest: #2d58b8; --crest2: #11286a; --crest-glow: rgba(72, 112, 222, .4); --fx: 45%; --fy: .09; --z: 3.1; }
#overlay .mt-desk [data-cls="ranger"] { --crest: #2f8342; --crest2: #113d1b; --crest-glow: rgba(72, 164, 84, .36); --fx: 33%; --fy: .09; --z: 3.1; }
#overlay .mt-desk [data-cls="rogue"] { --crest: #7a35a8; --crest2: #36104f; --crest-glow: rgba(152, 72, 204, .38); --fx: 70%; --fy: .045; --z: 3.1; }
#overlay .mt-desk .mt-rule { position: relative; display: block; width: 80%; height: 11px; margin: 3px auto 0;
  background: linear-gradient(90deg, transparent, var(--mt-gold) 28%, var(--mt-gold) 72%, transparent) center / 100% 1px no-repeat; }
#overlay .mt-desk .mt-rule::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; transform: rotate(45deg);
  background: linear-gradient(135deg, #fff3b8, #d49a2a); box-shadow: 0 0 7px rgba(255, 190, 80, .8); }
#ui #overlay .mt-desk button.mt-pill { display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-sizing: border-box; height: 46px; min-height: 46px; min-width: 46px; margin: 0; padding: 0 20px 0 16px;
  border: 1px solid var(--mt-line); border-image: none; border-radius: 23px; background: linear-gradient(180deg, rgba(56, 37, 20, .94), rgba(19, 12, 7, .95));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 222, 150, .14); color: #f5e2b2; font: 700 14px/1 Cinzel, Georgia, serif; letter-spacing: .07em;
  text-shadow: 0 1px 2px #000; transform: none; filter: none; transition: filter .15s, border-color .15s, box-shadow .15s, transform .12s; cursor: pointer; }
#ui #overlay .mt-desk button.mt-pill .mt-ico { color: var(--mt-gold); }
#ui #overlay .mt-desk button.mt-pill:hover { border-color: #f3cd7a; filter: brightness(1.14); box-shadow: 0 4px 14px rgba(0, 0, 0, .6), 0 0 14px rgba(255, 186, 80, .3), inset 0 1px rgba(255, 222, 150, .2); }
#ui #overlay .mt-desk button:is(.mt-pill, .mt-arrow, .mt-card, .mt-play, .mt-more, .mt-del, .mt-dice, .mt-go):active { transform: scale(.97); filter: brightness(1.15); }
#overlay .mt-desk :is(button, [role="radio"]):focus-visible { outline: 2px solid #f6d987; outline-offset: 3px; }

/* ----- the hero select ----- */
#overlay .mt-home.mt-desk { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: 'brand coop pills' 'roster roster roster' 'pager pager pager'; column-gap: 28px; row-gap: 10px; }
#overlay .mt-desk .mt-top { display: contents; }
#overlay .mt-desk .mt-brand { grid-area: brand; display: flex; flex-direction: column; align-items: center; width: 280px; }
#overlay .mt-desk .mt-logo { display: block; width: 100%; height: auto; margin: -4px 0 -2px; aspect-ratio: 1536 / 560; object-fit: cover; object-position: 50% 43%;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .8)); pointer-events: none; }
#overlay .mt-desk .mt-tagline { margin: 0; color: #eed08f; font: 700 10.5px/1.3 Cinzel, Georgia, serif; letter-spacing: .25em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, .85); }
#overlay .mt-desk .mt-pills { grid-area: pills; align-self: start; display: flex; gap: 12px; padding-top: 8px; }
/* The domain-transfer action adds a third control; let it wrap on narrow phone screens. */
body.mobile #overlay .mt-home .mt-pills:has([data-mt="migration"]) { min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
body.mobile #overlay .mt-home .mt-pills [data-mt="migration"] { flex-shrink: 0; }
#overlay .mt-desk .mt-roster { grid-area: roster; position: relative; min-height: 0; overflow: hidden; touch-action: none; }
#overlay .mt-desk .mt-track { display: flex; gap: var(--mt-gap, 18px); height: 100%; transition: transform .38s cubic-bezier(.22, .8, .24, 1); }
#overlay .mt-desk .mt-roster.dragging .mt-track { transition: none; }
/* A page holds whole cards; a screen taller than 16:9 keeps them at most about twice as tall as wide, centred. */
#overlay .mt-desk .mt-page { flex: 0 0 100%; display: flex; align-items: center; gap: var(--mt-gap, 18px); box-sizing: border-box; height: 100%; padding: 6px 0 12px; }
#overlay .mt-desk .mt-page.off { visibility: hidden; }
#ui #overlay .mt-desk .mt-card { position: relative; flex: 0 0 var(--mt-card-w, 290px); width: var(--mt-card-w, 290px); height: 100%; max-height: calc(var(--mt-card-w, 290px) * 1.9);
  min-height: 0; box-sizing: border-box; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--mt-line); border-image: none; border-radius: 14px;
  background: linear-gradient(180deg, #221710, #0c0806); color: var(--mt-ink); box-shadow: 0 10px 22px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .55);
  text-align: left; text-shadow: none; transform: none; filter: none; transition: transform .16s, box-shadow .16s, border-color .16s, filter .16s; }
#ui #overlay .mt-desk .mt-card:hover { border-color: #f3cd7a; transform: translateY(-3px); box-shadow: 0 14px 26px rgba(0, 0, 0, .65), 0 0 20px rgba(255, 186, 80, .26), inset 0 0 0 1px rgba(0, 0, 0, .55); }
/* A saved hero: the head and shoulders over the class colour, the crest ribbon, name, level, where it returns, PLAY and ⋯. */
#overlay .mt-desk .mt-hero .mt-art { position: absolute; left: 0; right: 0; top: 0; height: 66%; overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 44%, var(--crest-glow), transparent 72%), linear-gradient(180deg, #1c130c, #0d0906); }
#overlay .mt-desk .mt-hero .mt-art img { position: absolute; left: 0; top: calc(var(--fy) * var(--z) * -100%); width: 100%; height: calc(var(--z) * 100%); max-width: none;
  object-fit: cover; object-position: var(--fx) 0; pointer-events: none; transition: filter .16s; }
#overlay .mt-desk .mt-hero:hover .mt-art img { filter: brightness(1.08); }
#overlay .mt-desk .mt-hero .mt-crest { position: absolute; z-index: 2; top: -1px; right: 14px; width: 30px; height: 46px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .75)); }
#overlay .mt-desk .mt-hero .mt-crest::before, #overlay .mt-desk .mt-hero .mt-crest::after { content: ''; position: absolute; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
#overlay .mt-desk .mt-hero .mt-crest::before { inset: 0; background: linear-gradient(180deg, #f6d98a, #a8752b); }
#overlay .mt-desk .mt-hero .mt-crest::after { inset: 0 2px 3px; background: linear-gradient(180deg, var(--crest), var(--crest2)); }
#overlay .mt-desk .mt-hero .mt-crest .mt-glyph { position: absolute; z-index: 1; left: 50%; top: 9px; width: 17px; height: 17px; margin-left: -8.5px; color: #f8e3ac; }
#overlay .mt-desk .mt-hero .mt-difftag { position: absolute; z-index: 2; top: 10px; left: 10px; max-width: calc(100% - 64px); box-sizing: border-box; padding: 4px 9px; overflow: hidden;
  border: 1px solid rgba(255, 186, 110, .65); border-radius: 10px; background: rgba(70, 18, 8, .88); color: #ffdca6; font: 700 11px/1.1 Cinzel, Georgia, serif; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
#overlay .mt-desk .mt-hero .mt-difftag[hidden] { display: none; }
#overlay .mt-desk .mt-hero .mt-info { position: absolute; left: 0; right: 0; bottom: 0; top: 48%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 16px 16px;
  background: linear-gradient(180deg, rgba(13, 9, 6, 0), rgba(13, 9, 6, .9) 30%, #0d0906 52%); }
#overlay .mt-desk .mt-hero .mt-name { margin: 0; overflow: hidden; color: #f8e4b4; font: 700 20px/1.2 Cinzel, Georgia, serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  text-overflow: ellipsis; text-shadow: 0 1px 3px #000; }
#overlay .mt-desk .mt-hero .mt-name.long { font-size: 17px; letter-spacing: .03em; }
#overlay .mt-desk .mt-hero .mt-lvl { margin: 2px 0 0; overflow: hidden; color: #dcc69b; font: 17px/1.25 Georgia, serif; white-space: nowrap; text-overflow: ellipsis; }
#overlay .mt-desk .mt-hero .mt-loc { display: flex; align-items: center; gap: 7px; margin: 9px 0 0; padding-top: 9px; border-top: 1px solid rgba(214, 168, 88, .32); color: #baa887;
  font: 15.5px/1.2 Georgia, serif; white-space: nowrap; }
#overlay .mt-desk .mt-hero .mt-loc img { flex: none; width: 12px; height: 17px; object-fit: contain; }
#overlay .mt-desk .mt-hero .mt-loc span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#overlay .mt-desk .mt-hero .mt-acts { display: flex; gap: 8px; margin-top: 13px; }
#ui #overlay .mt-desk .mt-hero button.mt-play { flex: 1 1 auto; min-width: 0; height: 46px; min-height: 46px; margin: 0; padding: 0 8px; border: 1px solid #e3b65c; border-image: none; border-radius: 9px;
  background: linear-gradient(180deg, #93582a, #4e270d); box-shadow: inset 0 1px rgba(255, 222, 150, .38), 0 3px 8px rgba(0, 0, 0, .5); color: #fff3d2;
  font: 700 16px/1 Cinzel, Georgia, serif; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 2px #1a0800; transform: none; filter: none; cursor: pointer; transition: filter .15s, box-shadow .15s; }
#ui #overlay .mt-desk .mt-hero button.mt-play:hover { filter: brightness(1.16); box-shadow: inset 0 1px rgba(255, 222, 150, .45), 0 0 14px rgba(255, 176, 70, .55), 0 3px 8px rgba(0, 0, 0, .5); }
#ui #overlay .mt-desk .mt-hero button.mt-more { flex: 0 0 46px; width: 46px; height: 46px; min-height: 46px; margin: 0; padding: 0 0 5px; border: 1px solid rgba(214, 168, 88, .6); border-image: none;
  border-radius: 9px; background: rgba(24, 16, 10, .92); color: #f2d99c; font: 700 24px/1 Georgia, serif; letter-spacing: 0; text-shadow: none; transform: none; filter: none; cursor: pointer; transition: filter .15s, border-color .15s; }
#ui #overlay .mt-desk .mt-hero button.mt-more:hover { border-color: #f3cd7a; filter: brightness(1.25); }
#ui #overlay .mt-desk .mt-hero.menu-open button.mt-more { border-color: #ffd66c; color: #fff4d8; font-size: 18px; padding: 0; }
/* The ⋯ menu covers the card above its buttons: the difficulty (the desktop's list) and Delete hero. */
#overlay .mt-desk .mt-hero .mt-menu { position: absolute; z-index: 3; left: 0; right: 0; top: 0; bottom: 75px; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: 16px; background: linear-gradient(180deg, #16100a, #0d0906); border-bottom: 1px solid rgba(214, 168, 88, .3); }
#overlay .mt-desk .mt-hero .mt-menu[hidden] { display: none; }
#overlay .mt-desk .mt-hero .mt-menu-name { margin: 0 0 4px; overflow: hidden; color: #f8e4b4; font: 700 16px/1.2 Cinzel, Georgia, serif; letter-spacing: .06em; text-align: center;
  text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
#overlay .mt-desk .mt-hero .mt-menu-diff { display: grid; gap: 6px; }
#overlay .mt-desk .mt-hero .mt-menu-diff span { color: #cdb88d; font: 700 11px/1 Cinzel, Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
#ui #overlay .mt-desk .mt-hero .mt-menu select { width: 100%; height: 44px; min-height: 44px; box-sizing: border-box; margin: 0; padding: 0 32px 0 12px; appearance: none; -webkit-appearance: none;
  border: 1px solid rgba(214, 168, 88, .65); border-radius: 9px; color: #f3e0b6; font: 600 15px Cinzel, Georgia, serif; opacity: 1; cursor: pointer;
  background: rgba(8, 5, 2, .85) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7'><path d='M1 1l5 5 5-5' fill='none' stroke='%23e0b460' stroke-width='1.8'/></svg>") no-repeat right 12px center; }
#ui #overlay .mt-desk .mt-hero .mt-menu select:hover:not(:disabled) { border-color: #f3cd7a; }
#ui #overlay .mt-desk .mt-hero .mt-menu select:disabled { opacity: .6; cursor: default; }
#ui #overlay .mt-desk .mt-hero button.mt-del { height: 44px; min-height: 44px; margin: 0; padding: 0 10px; border: 1px solid rgba(226, 132, 100, .75); border-image: none; border-radius: 9px;
  background: linear-gradient(180deg, #6e2718, #34110a); color: #ffd6c4; font: 700 14px/1 Cinzel, Georgia, serif; letter-spacing: .06em; text-shadow: 0 1px 2px #000; transform: none; filter: none; cursor: pointer; transition: filter .15s; }
#ui #overlay .mt-desk .mt-hero button.mt-del:hover { filter: brightness(1.2); }
/* Create New Hero, and the empty slots that fill out the first page (a faint plus: nothing is locked). */
#ui #overlay .mt-desk button.mt-new, #ui #overlay .mt-desk button.mt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 16px 14px; text-align: center; cursor: pointer; }
#ui #overlay .mt-desk button.mt-new { background: radial-gradient(ellipse 90% 60% at 50% 42%, rgba(124, 74, 28, .48), transparent 70%), linear-gradient(180deg, #1e140c, #0b0705); }
#ui #overlay .mt-desk button.mt-empty { border-style: dashed; border-color: rgba(214, 168, 88, .4); background: rgba(12, 8, 5, .6); box-shadow: inset 0 0 22px rgba(0, 0, 0, .5); }
#ui #overlay .mt-desk button.mt-empty:hover { border-color: rgba(243, 205, 122, .8); background: rgba(24, 16, 9, .72); }
#overlay .mt-desk .mt-plus { position: relative; flex: none; box-sizing: border-box; width: 84px; height: 84px; border: 2px solid #dcae5a; border-radius: 50%;
  box-shadow: 0 0 20px rgba(240, 170, 60, .35), inset 0 0 16px rgba(240, 170, 60, .22); transition: box-shadow .16s, border-color .16s; }
#overlay .mt-desk .mt-plus::before, #overlay .mt-desk .mt-plus::after { content: ''; position: absolute; left: 50%; top: 50%; border-radius: 2px; background: #f2d186; box-shadow: 0 0 6px rgba(255, 200, 100, .6); }
#overlay .mt-desk .mt-plus::before { width: 36px; height: 4px; margin: -2px 0 0 -18px; }
#overlay .mt-desk .mt-plus::after { width: 4px; height: 36px; margin: -18px 0 0 -2px; }
#overlay .mt-desk .mt-new:hover .mt-plus { border-color: #f6cf7c; box-shadow: 0 0 28px rgba(255, 186, 70, .55), inset 0 0 18px rgba(255, 186, 70, .3); }
#overlay .mt-desk .mt-empty .mt-plus { width: 58px; height: 58px; border: 1px solid rgba(220, 174, 90, .45); box-shadow: none; }
#overlay .mt-desk .mt-empty .mt-plus::before { width: 22px; height: 2px; margin: -1px 0 0 -11px; background: rgba(242, 209, 134, .5); box-shadow: none; }
#overlay .mt-desk .mt-empty .mt-plus::after { width: 2px; height: 22px; margin: -11px 0 0 -1px; background: rgba(242, 209, 134, .5); box-shadow: none; }
#overlay .mt-desk .mt-empty:hover .mt-plus { border-color: rgba(243, 205, 122, .8); }
#overlay .mt-desk :is(.mt-new, .mt-empty) b { color: #f6e0ab; font: 700 18px/1.25 Cinzel, Georgia, serif; letter-spacing: .08em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 1px 3px #000; }
#overlay .mt-desk :is(.mt-new, .mt-empty) small { color: #bda983; font: italic 17px/1.25 Georgia, serif; }
#overlay .mt-desk .mt-empty b { color: rgba(232, 210, 162, .68); font-size: 16.5px; }
#overlay .mt-desk .mt-empty small { color: rgba(192, 172, 132, .6); font-size: 16px; }
/* Arrows and dots under the cards; past seven pages the dots become "3 / 9". */
#overlay .mt-desk .mt-pager { grid-area: pager; justify-self: center; display: flex; align-items: center; gap: 16px; height: 52px; }
#ui #overlay .mt-desk button.mt-arrow { width: 46px; height: 46px; min-height: 46px; margin: 0; padding: 0 0 4px; border: 1px solid var(--mt-line); border-image: none; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3d2917, #140c07 75%); box-shadow: 0 3px 10px rgba(0, 0, 0, .55); color: #f5d992; font: 700 30px/1 Georgia, serif; text-shadow: none;
  transform: none; filter: none; cursor: pointer; transition: filter .15s, border-color .15s, box-shadow .15s; }
#ui #overlay .mt-desk button.mt-arrow:hover:not(:disabled) { border-color: #f3cd7a; filter: brightness(1.2); box-shadow: 0 3px 10px rgba(0, 0, 0, .55), 0 0 14px rgba(255, 186, 80, .35); }
#ui #overlay .mt-desk button.mt-arrow:disabled { opacity: .32; box-shadow: none; cursor: default; }
#overlay .mt-desk .mt-dots { display: flex; align-items: center; gap: 10px; min-width: 9px; }
#overlay .mt-desk .mt-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(232, 204, 146, .32); }
#overlay .mt-desk .mt-dot.on { width: 10px; height: 10px; background: #f5d27c; box-shadow: 0 0 8px rgba(255, 190, 80, .85); }
#overlay .mt-desk .mt-count { color: #e9cf95; font: 700 14px/1 Cinzel, Georgia, serif; letter-spacing: .08em; white-space: nowrap; }

/* The party button and pending host/invite state sit between the logo and the option pills. */
#overlay .mt-desk > .coop-invite { grid-area: coop; justify-self: center; align-self: start; position: relative; top: auto; left: auto; z-index: 2; transform: none;
  display: grid; grid-template-columns: auto auto; justify-content: center; justify-items: center; align-items: center; gap: 8px 12px; box-sizing: border-box; width: auto; max-width: 100%;
  margin: 4px 0 0; padding: 10px 18px 12px; border: 1px solid var(--mt-line); border-radius: 16px; background: linear-gradient(180deg, rgba(42, 28, 15, .93), rgba(14, 9, 5, .95));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 222, 150, .12); color: #e9d8b4; font: 15px/1.35 Georgia, serif; text-align: center; }
/* The heading, the lobby's row and its message take a line each; a party's note and its button share one. */
#overlay .mt-desk > .coop-invite > :is(b, .coop-lobby-row, .coop-lobby-msg), #overlay .mt-desk > .coop-invite:not(:has(> span)) > .mbtn { grid-column: 1 / -1; }
#overlay .mt-desk > .coop-invite > b { color: #f3cf7e; font: 700 16px/1.25 Cinzel, Georgia, serif; letter-spacing: .08em; white-space: nowrap; text-shadow: 0 1px 2px #000; }
#overlay .mt-desk > .coop-invite > span { color: #d9ccb0; font-size: 15px; }
#ui #overlay .mt-desk > .coop-invite .mbtn { display: inline-grid; place-items: center; box-sizing: border-box; width: auto; min-width: 0; height: 40px; min-height: 40px; margin: 0; padding: 0 16px;
  border: 1px solid #c79a4e; border-image: none; border-radius: 9px; background: linear-gradient(180deg, #5a3718, #2c180a); box-shadow: inset 0 1px rgba(255, 222, 150, .28), 0 2px 6px rgba(0, 0, 0, .45);
  color: #fff0c8; font: 700 13px/1 Cinzel, Georgia, serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 2px #120800; transform: none; cursor: pointer; transition: filter .15s, border-color .15s, box-shadow .15s; }
#ui #overlay .mt-desk > .coop-invite .mbtn:hover { border-color: #f3cd7a; filter: brightness(1.18); box-shadow: inset 0 1px rgba(255, 222, 150, .34), 0 0 12px rgba(255, 176, 70, .4); }
#ui #overlay .mt-desk > .coop-invite .mbtn:active { transform: scale(.97); }
#ui #overlay .mt-desk > .coop-invite .mbtn.coop-hosting { border-color: #e8bc6c; }
/* The heroes' PLAY while a party is chosen: Host, or Join a friend's (a hero who has not unlocked its difficulty is dim). */
#ui #overlay .mt-desk .mt-hero button.mt-play.coop-hosting { border-color: #ffd98a; box-shadow: inset 0 1px rgba(255, 222, 150, .38), 0 0 10px rgba(255, 200, 100, .45); }

/* The cloud save chip, bottom left beside the pager, and its notes bottom right; scaled like the screen (cloud.css
   gives them --title-zoom), in the room the pager leaves (--mt-side-room, src/mobile/title.js). */
#overlay.titlescr > .mt-desk ~ .cloud-chip { top: auto; right: auto; left: 32px; bottom: 21px; box-sizing: border-box; min-height: 44px; max-width: var(--mt-side-room, 400px);
  gap: 9px; padding: 8px 18px 8px 13px; font-size: 15px; }
#overlay.titlescr > .mt-desk ~ .cloud-chip b { font-size: 14px; }
#overlay.titlescr > .mt-desk ~ .cloud-chip[data-state="paused"] { width: auto; padding-left: 44px; row-gap: 0; align-content: center; }
#overlay.titlescr > .mt-desk ~ .cloud-chip[data-state="paused"] .cloud-chip-icon { left: 13px; top: 50%; margin-top: -8px; }
#overlay.titlescr > .mt-desk ~ .cloud-toast { top: auto; left: auto; right: 32px; bottom: 21px; width: max-content; max-width: var(--mt-side-room, 400px); pointer-events: none; }

/* ----- Choose Your Hero ----- */
#overlay .mt-create.mt-desk { grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 14px; }
#overlay .mt-desk .mt-ctop { position: relative; display: flex; justify-content: center; min-height: 46px; }
#ui #overlay .mt-desk button.mt-back { position: absolute; left: 0; top: 0; padding: 0 20px 0 14px; }
#overlay .mt-desk .mt-chev { font: 700 26px/1 Georgia, serif; margin-top: -4px; }
#overlay .mt-desk .mt-heading { display: flex; flex-direction: column; align-items: center; padding: 0 170px; }
#overlay .mt-desk .mt-heading h1 { margin: 0; font: 700 36px/1.08 Cinzel, Georgia, serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(180deg, #fff3c4, #e8b25a 52%, #b0621f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .85)); }
#overlay .mt-desk .mt-heading .mt-rule { width: min(360px, 70%); margin-top: 4px; }
#overlay .mt-desk .mt-heading p { margin: 2px 0 0; color: #ecd08f; font: 700 12px/1.2 Cinzel, Georgia, serif; letter-spacing: .34em; text-transform: uppercase; text-shadow: 0 1px 3px #000; }
#overlay .mt-desk .mt-classes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; min-height: 0; padding: 6px 0 4px; }
/* The class cards: the old desktop .ccard rules (style.css) stay out of the way here, as on the phone. */
#ui #overlay .mt-desk .ccard.mt-class { position: relative; isolation: isolate; width: auto; min-width: 0; min-height: 0; height: 100%; box-sizing: border-box; margin: 0; padding: 0; overflow: hidden;
  border: 1px solid rgba(214, 168, 88, .5); border-radius: 14px; background: radial-gradient(ellipse 85% 55% at 50% 30%, var(--crest-glow), transparent 75%), linear-gradient(180deg, #1c130c, #0b0705);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .6); text-align: center; cursor: pointer; transform: none; filter: brightness(.78) saturate(.86); transition: filter .18s, box-shadow .18s, border-color .18s, transform .18s; }
#ui #overlay .mt-desk .ccard.mt-class::before, #ui #overlay .mt-desk .ccard.mt-class::after { content: none; display: none; }
#ui #overlay .mt-desk .ccard.mt-class:hover { border-color: rgba(243, 205, 122, .85); filter: brightness(.94) saturate(.95); transform: translateY(-2px); }
#ui #overlay .mt-desk .ccard.mt-class.sel { border-color: #ffd46a; filter: none; transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(255, 214, 108, .95), 0 0 26px rgba(255, 176, 56, .6), 0 12px 24px rgba(0, 0, 0, .6); }
#overlay .mt-desk .mt-class .mt-class-art { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 4%; pointer-events: none; }
#overlay .mt-desk .mt-class .mt-class-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 14px 16px; background: linear-gradient(180deg, rgba(11, 7, 5, 0), rgba(11, 7, 5, .88) 26%, #0b0705 58%); }
#overlay .mt-desk .mt-class .mt-emblem { display: grid; place-items: center; box-sizing: border-box; width: 38px; height: 38px; margin: 0 auto 10px; transform: rotate(45deg); border: 2px solid #e6b85c;
  background: radial-gradient(circle at 50% 40%, var(--crest), var(--crest2)); box-shadow: 0 0 12px rgba(240, 180, 80, .55), inset 0 0 7px rgba(0, 0, 0, .6); }
#overlay .mt-desk .mt-class .mt-emblem .mt-glyph { width: 20px; height: 20px; transform: rotate(-45deg); color: #fbe7b3; }
#overlay .mt-desk .mt-class h3 { margin: 0; color: #f9e2a6; font: 700 23px/1.1 Cinzel, Georgia, serif; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 3px #000; pointer-events: none; }
#overlay .mt-desk .mt-class .mt-class-tag { min-height: 0; margin: 5px 0 0; overflow: hidden; color: #dccaa5; font: italic 17px/1.25 Georgia, serif; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
#overlay .mt-desk .mt-class .mt-hr { display: block; width: 72%; height: 1px; margin: 9px auto 8px; background: linear-gradient(90deg, transparent, rgba(226, 178, 96, .85), transparent); }
#overlay .mt-desk .mt-class .mt-skills { min-height: 2.9em; margin: 0; color: #f1c86e; font: 700 12.5px/1.45 Cinzel, Georgia, serif; letter-spacing: .05em; text-wrap: balance; pointer-events: auto; }
#overlay .mt-desk .mt-class .mt-skills span { white-space: nowrap; }
#overlay .mt-desk .mt-class .mt-skills b { margin-left: 6px; color: rgba(241, 200, 110, .6); font-weight: 400; }
/* The name (person icon, the field, the dice), the difficulty and CREATE HERO. */
#overlay .mt-desk .mt-namebar { display: flex; align-items: center; gap: 14px; }
#overlay .mt-desk .mt-namefield { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-width: 0; height: 54px; padding: 0 3px 0 18px;
  border: 1px solid var(--mt-line); border-radius: 27px; background: rgba(12, 8, 5, .92); box-shadow: inset 0 2px 7px rgba(0, 0, 0, .65), 0 4px 12px rgba(0, 0, 0, .45); }
#overlay .mt-desk .mt-namefield:focus-within { border-color: #f3cd7a; box-shadow: inset 0 2px 7px rgba(0, 0, 0, .65), 0 0 0 2px rgba(232, 188, 108, .22), 0 4px 12px rgba(0, 0, 0, .45); }
#overlay .mt-desk .mt-namefield > .mt-ico { width: 19px; height: 19px; color: #d9b36a; }
#ui #overlay .mt-desk .mt-namefield input { flex: 1 1 auto; width: 0; min-width: 0; height: 48px; min-height: 0; margin: 0; padding: 0; border: 0; outline: none; background: none; box-shadow: none;
  color: #f7e7c5; font: 20px/1.2 Georgia, serif; letter-spacing: .03em; user-select: text; -webkit-user-select: text; }
#ui #overlay .mt-desk .mt-namefield input::placeholder { color: #928571; }
#ui #overlay .mt-desk .mt-namefield button.mt-dice { flex: none; display: grid; place-items: center; width: 46px; height: 46px; min-height: 46px; margin: 0; padding: 0; border: 1px solid rgba(214, 168, 88, .55);
  border-image: none; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3d2917, #140c07 75%); color: #f2cf82; transform: none; filter: none; cursor: pointer; transition: filter .15s, border-color .15s; }
#ui #overlay .mt-desk .mt-namefield button.mt-dice:hover { border-color: #f3cd7a; filter: brightness(1.22); }
#overlay .mt-desk .mt-dice .mt-ico { width: 24px; height: 24px; }
#overlay .mt-desk .mt-dice.rolled .mt-ico { animation: mt-roll .45s cubic-bezier(.3, .7, .3, 1); }
#overlay .mt-desk .mt-namefield.mt-need { border-color: #e0896a; animation: mt-need .5s; }
#overlay .mt-desk .mt-diffsel { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
#overlay .mt-desk .mt-diffsel span { color: #cdb88d; font: 700 11px/1 Cinzel, Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
#ui #overlay .mt-desk .mt-diffsel select { height: 36px; min-height: 0; margin: 0; padding: 0 14px; appearance: none; -webkit-appearance: none; border: 1px solid rgba(214, 168, 88, .45); border-radius: 9px;
  background: rgba(8, 5, 2, .82); color: #d9c49a; font: 600 15px Cinzel, Georgia, serif; opacity: .9; }
#ui #overlay .mt-desk button.mt-go { flex: none; display: inline-flex; align-items: center; gap: 12px; height: 54px; min-height: 54px; margin: 0; padding: 0 26px 0 34px;
  border: 1px solid #ffe08a; border-image: none; border-radius: 27px; background: linear-gradient(180deg, #f7d27a, #d9962f 52%, #99601a);
  box-shadow: 0 0 18px rgba(255, 186, 72, .5), 0 5px 14px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 250, 220, .7); color: #2b1405; font: 700 17px/1 Cinzel, Georgia, serif;
  letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px rgba(255, 236, 190, .55); transform: none; filter: none; cursor: pointer; transition: filter .15s, box-shadow .15s; }
#ui #overlay .mt-desk button.mt-go:hover { filter: brightness(1.08); box-shadow: 0 0 26px rgba(255, 186, 72, .7), 0 5px 14px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 250, 220, .75); }
#ui #overlay .mt-desk button.mt-go .mt-chev { font-size: 28px; }

/* ----- the desktop's Settings over the title: a service window, sized with the interface (--ui-zoom) ----- */
.mt-dset .service-frame { zoom: var(--ui-zoom, 1); width: min(780px, calc(100vw / var(--ui-zoom, 1) - 40px)); max-height: calc(100vh / var(--ui-zoom, 1) - 40px); padding: 4px 22px 16px; }
.mt-dset .service-frame > header { align-items: center; padding: 6px 0 12px; }
.mt-dset .service-frame > header h2 { margin: 0; }
.mt-dset .service-scroll { padding: 10px 8px 2px 0; }
.mt-dset .dset { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 30px; align-items: start; color: #eadfc4; }
.mt-dset .dset h3 { margin: 0 0 2px; color: #e7c675; font: 700 13px Cinzel, Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.mt-dset .dset-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; border-bottom: 1px solid #3a2e20; font-size: 17px; }
.mt-dset .dset-step { display: flex; align-items: center; gap: 10px; }
.mt-dset .dset-step b { min-width: 56px; color: #ffe6a6; font: 700 16px Cinzel, Georgia, serif; text-align: center; }
#ui #titleSettings button.dset-btn { min-width: 100px; height: 38px; min-height: 38px; margin: 0; padding: 0 16px; border: 1px solid #98703c; border-image: none; border-radius: 8px;
  background: linear-gradient(#43301e, #21170f); color: #ffe6a6; font: 700 14px/1 Cinzel, Georgia, serif; letter-spacing: .04em; text-shadow: 0 1px 2px #000; transform: none; cursor: pointer; transition: filter .15s, border-color .15s; }
#ui #titleSettings button.dset-btn:hover { border-color: #e8bc6c; filter: brightness(1.18); }
#ui #titleSettings button.dset-btn:active { transform: scale(.97); }
#ui #titleSettings .dset-step button.dset-btn { min-width: 44px; padding: 0; font-size: 20px; }

/* The Controls screen that Settings opens (src/ui/overlays.js showHelp; the pause menu's too): when a short window
   cannot hold the whole list, the list scrolls inside the frame and the heading and Back stay in view. */
body:not(.mobile) #overlay .menubox.help { box-sizing: border-box; display: flex; flex-direction: column; max-height: calc(100vh - 16px); }
body:not(.mobile) #overlay .menubox.help > * { flex: none; }
body:not(.mobile) #overlay .menubox.help > table { display: block; flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #98703c #1b130b; }

@media (prefers-reduced-motion: reduce) {
  #overlay .mt-desk .mt-track, #ui #overlay .mt-desk .mt-card, #ui #overlay .mt-desk .ccard.mt-class { transition: none; }
  #ui #overlay .mt-desk .mt-card:hover { transform: none; }
  #overlay .mt-desk .mt-dice.rolled .mt-ico, #overlay .mt-desk .mt-namefield.mt-need { animation: none; }
}