/* P3 MENU: Stonewatch main menu, settings, credits and the painted campaign map. Scoped to .tdm and .tdc. */
.tdm, .tdc { --gold1: #ffe9a0; --gold2: #e6b13a; --gold3: #9a6512; --ink: #1a1210; font-family: var(--td-font-title, 'Baloo 2'), Georgia, serif; -webkit-tap-highlight-color: transparent; }

/* app.css styles every <button> (pill, border, shadow, :active nudge); the menu buttons reset that first */
.tdm-btn, .tdm-seg-btn, .tdc-node, .tdc-close, .tdc-play { border-radius: 0; box-shadow: none; padding: 0; min-width: 0; gap: 0; }
.tdm-btn:active, .tdm-seg-btn:active, .tdc-node:active, .tdc-close:active { transform: none; box-shadow: none; }
.tdm-btn { display: block; border: 0; }
.tdm-seg-btn { border: 0; display: block; }
.tdc-node { border: 0; display: block; }

/* ---------- main menu ---------- */
.tdm { position: absolute; inset: 0; z-index: 200; overflow: hidden; color: #f6e7c1; pointer-events: auto; background: #150f1c;
  transition: opacity .7s ease, transform .8s ease; animation: tdm-in 1s ease both; }
.tdm.leaving { opacity: 0; transform: scale(1.06); pointer-events: none; }
@keyframes tdm-in { from { opacity: 0; } to { opacity: 1; } }
.tdm-art { position: absolute; inset: -3%; background-size: cover; background-position: center; transform: translate(var(--px, 0), var(--py, 0)) scale(1.04); transition: transform .35s ease-out; animation: tdm-drift 30s ease-in-out infinite alternate; }
@keyframes tdm-drift { from { background-position: 46% 50%; } to { background-position: 54% 48%; } }
.tdm-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(10,6,20,0) 35%, rgba(10,6,20,.6) 100%), linear-gradient(180deg, rgba(10,6,20,.5) 0, rgba(10,6,20,0) 28%, rgba(10,6,20,.05) 50%, rgba(10,6,20,.8) 100%); }
.tdm-fog { position: absolute; left: -20%; right: -20%; bottom: 0; height: 40%; background: radial-gradient(ellipse at 30% 100%, rgba(255,170,110,.25), transparent 60%), radial-gradient(ellipse at 75% 100%, rgba(150,110,190,.22), transparent 60%); animation: tdm-fog 14s ease-in-out infinite alternate; }
@keyframes tdm-fog { from { transform: translateX(-4%); opacity: .7; } to { transform: translateX(4%); opacity: 1; } }
.tdm-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.tdm-logo { position: absolute; left: 50%; top: 5%; width: min(76vw, 860px); max-height: 30vh; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 10px 22px rgba(0,0,0,.65)); animation: tdm-logo 1.3s cubic-bezier(.2,.8,.2,1) .15s both; }
@keyframes tdm-logo { from { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(.93); } to { opacity: 1; transform: translateX(-50%); } }
.tdm-tagline { position: absolute; left: 0; right: 0; top: calc(5% + min(30vh, 22vw)); text-align: center; font-size: clamp(.95rem, 2vw, 1.4rem); letter-spacing: .16em; text-transform: uppercase; color: #ffe1a8; text-shadow: 0 2px 8px #000; animation: tdm-rise 1s ease .7s both; }
.tdm-list { position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(78vw, 400px); }
.tdm-legal { position: absolute; left: 0; right: 0; bottom: 2.2%; text-align: center; font-size: .8rem; letter-spacing: .05em; opacity: .65; text-shadow: 0 1px 3px #000; }
@keyframes tdm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* stone slab button with a gold rim: hover lifts and glows, press sinks */
.tdm-btn { position: relative; width: 100%; min-height: 54px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: #fbeec9; animation: tdm-rise .8s ease both; outline: none; }
.tdm-btn:nth-child(1) { animation-delay: .9s; } .tdm-btn:nth-child(2) { animation-delay: 1.02s; } .tdm-btn:nth-child(3) { animation-delay: 1.14s; } .tdm-btn:nth-child(4) { animation-delay: 1.26s; }
.tdm-card .tdm-btn { animation: none; }
.tdm-btn-face { position: relative; display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 8px 22px; border-radius: 10px; font-size: 1.35rem; font-weight: 700; letter-spacing: .06em; text-shadow: 0 2px 0 #1a1008, 0 0 10px rgba(0,0,0,.6);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%), linear-gradient(180deg, #7a7367 0%, #5b564d 55%, #45413a 100%);
  border: 3px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 3px #2a1c08, 0 6px 0 #1f1a14, 0 12px 18px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.28), inset 0 -3px 6px rgba(0,0,0,.35); transition: transform .12s ease, box-shadow .12s ease, filter .15s; }
.tdm-btn-face::before { content: ''; position: absolute; inset: -6px; z-index: -1; border-radius: 13px; background: linear-gradient(180deg, var(--gold1), var(--gold2) 45%, var(--gold3)); }
.tdm-btn-face::after { content: ''; position: absolute; inset: 0; border-radius: 8px; opacity: .35; mix-blend-mode: overlay; background: repeating-linear-gradient(97deg, rgba(0,0,0,.35) 0 2px, transparent 2px 9px), radial-gradient(circle at 20% 30%, rgba(255,255,255,.4), transparent 40%); pointer-events: none; }
.tdm-btn:hover .tdm-btn-face, .tdm-btn:focus-visible .tdm-btn-face { transform: translateY(-3px); filter: brightness(1.16); box-shadow: 0 0 0 3px #2a1c08, 0 9px 0 #1f1a14, 0 16px 22px rgba(0,0,0,.55), 0 0 28px rgba(255,190,70,.45), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.3); }
.tdm-btn:active .tdm-btn-face { transform: translateY(4px); filter: brightness(.94); box-shadow: 0 0 0 3px #2a1c08, 0 2px 0 #1f1a14, 0 4px 8px rgba(0,0,0,.5), inset 0 3px 8px rgba(0,0,0,.5); }
.tdm-primary .tdm-btn-face { min-height: 64px; font-size: 1.65rem; color: #fff6d8; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%), linear-gradient(180deg, #d9902c 0%, #b1601c 55%, #8a4213 100%); }
.tdm-primary::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -12px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,170,60,.55), transparent); filter: blur(6px); pointer-events: none; }

/* settings / credits card */
.tdm-panel { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 14px; background: radial-gradient(ellipse at center, rgba(10,6,20,.55), rgba(10,6,20,.82)); animation: tdm-in .22s ease both; }
.tdm-panel.out { opacity: 0; transition: opacity .2s; }
.tdm-card { position: relative; width: min(92vw, 560px); max-height: 92%; display: flex; flex-direction: column; gap: 14px; padding: 22px 26px 20px; border-radius: 16px; overflow: hidden; color: #f6e7c1;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 30%), linear-gradient(180deg, #5a5348, #3a352e 60%, #2c2823); border: 4px solid var(--gold2); box-shadow: 0 0 0 3px #2a1c08, 0 22px 60px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.2), inset 0 0 40px rgba(0,0,0,.4); animation: tdm-pop .3s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes tdm-pop { from { transform: scale(.9) translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.tdm-card-title { margin: 0; text-align: center; font-size: 2rem; letter-spacing: .08em; color: var(--gold1); text-shadow: 0 2px 0 #3a2408, 0 0 16px rgba(255,190,70,.4); }
.tdm-card .tdm-back { width: 60%; align-self: center; flex: none; }
.tdm-card .tdm-back .tdm-btn-face { min-height: 46px; font-size: 1.15rem; }
.tdm-row { display: grid; grid-template-columns: 6.5em 1fr 2.6em; align-items: center; gap: 14px; font-size: 1.15rem; }
.tdm-row-label { letter-spacing: .04em; } .tdm-row-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--gold1); }
.tdm-range { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 8px; background: linear-gradient(90deg, #f3b73f var(--fill, 50%), #17110d var(--fill, 50%)); border: 2px solid #8a5d16; box-shadow: inset 0 2px 4px rgba(0,0,0,.7), 0 0 0 2px #21170b; outline: none; cursor: pointer; }
.tdm-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4c4, #e6b13a 55%, #8a5a12); border: 2px solid #3a2408; box-shadow: 0 3px 6px rgba(0,0,0,.6); }
.tdm-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4c4, #e6b13a 55%, #8a5a12); border: 2px solid #3a2408; }
.tdm-seg { grid-column: 2 / 4; display: flex; border-radius: 10px; overflow: hidden; border: 2px solid #8a5d16; box-shadow: 0 0 0 2px #21170b; }
.tdm-seg-btn { padding: 0 8px; flex: 1; min-height: 40px; font: inherit; font-size: 1.05rem; font-weight: 700; color: #d9cba6; background: #2a251f; border: 0; cursor: pointer; }
.tdm-seg-btn + .tdm-seg-btn { border-left: 2px solid #8a5d16; }
.tdm-seg-btn[aria-pressed=true] { color: #2a1c08; background: linear-gradient(180deg, #ffe08a, #e0a52c); }
.tdm-credits { overflow-y: auto; max-height: 52vh; padding-right: 8px; font-size: .95rem; line-height: 1.35; scrollbar-color: #b8861f #211b15; }
.tdm-credits p { margin: 0 0 6px; } .tdm-cr-lead { font-size: 1.1rem; color: var(--gold1); }
.tdm-cr-head { margin-top: 10px !important; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold2); }
.tdm-cr-item { font-size: .85rem; opacity: .85; padding-left: 10px; border-left: 2px solid #8a5d16; }

@media (max-height: 460px) {
  .tdm-logo { top: 3%; max-height: 36vh; width: min(52vw, 560px); left: 30%; }
  .tdm-tagline { display: none; }
  .tdm-list { left: auto; right: 5%; bottom: 8%; transform: none; width: min(44vw, 340px); gap: 8px; }
  .tdm-btn, .tdm-btn-face { min-height: 42px; } .tdm-btn-face { font-size: 1.05rem; padding: 4px 14px; } .tdm-primary .tdm-btn-face { min-height: 48px; font-size: 1.25rem; }
  .tdm-legal { left: 0; right: auto; width: 60%; bottom: 3%; text-align: left; padding-left: 4%; font-size: .68rem; }
  .tdm-card { padding: 10px 18px 12px; gap: 8px; } .tdm-card-title { font-size: 1.4rem; } .tdm-row { font-size: .95rem; gap: 10px; }
  .tdm-card .tdm-back .tdm-btn-face { min-height: 36px; font-size: .95rem; } .tdm-credits { max-height: 44vh; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .tdm *, .tdm { animation: none !important; } }

/* ---------- campaign map: painted parchment ---------- */
.tdc { position: absolute; inset: 0; z-index: 210; overflow: hidden; pointer-events: auto; color: #3a2711; background: #211810; animation: tdm-in .5s ease both; }
.tdc-bg { position: absolute; inset: -2%; background-size: cover; background-position: center; filter: sepia(.8) saturate(.7) brightness(.55) blur(2px); }
.tdc-paper { position: absolute; inset: 3.5% 2.5% 3.5% 2.5%; border-radius: 14px; box-shadow: 0 0 0 4px #5b3a14, 0 0 0 7px #d8ad55, 0 0 0 9px #2b1b08, 0 24px 60px rgba(0,0,0,.75);
  background: radial-gradient(ellipse at 30% 20%, rgba(255,246,214,.9), rgba(255,246,214,0) 60%), radial-gradient(ellipse at 80% 90%, rgba(120,70,20,.35), rgba(120,70,20,0) 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .22  0 0 0 0 .08  0 0 0 .55 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>"), #e9d5a3; overflow: hidden; }
.tdc-paper::after { content: ''; position: absolute; inset: 0; border-radius: 14px; box-shadow: inset 0 0 70px 10px rgba(90,50,10,.55), inset 0 0 12px rgba(60,30,5,.6); pointer-events: none; }
.tdc-head { position: absolute; left: 0; right: 0; top: 2.5%; text-align: center; z-index: 3; }
.tdc-head small { display: block; letter-spacing: .3em; text-transform: uppercase; font-size: .8rem; color: #7a5424; }
.tdc-head h1 { margin: 0; font-size: clamp(1.7rem, 4.4vw, 3rem); line-height: 1; color: #4a2c0c; text-shadow: 0 1px 0 rgba(255,240,200,.8), 0 3px 6px rgba(80,40,10,.3); }
.tdc-close { border-radius: 50%; padding: 0; position: absolute; right: 22px; top: 18px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #e6b13a; background: radial-gradient(circle at 35% 30%, #86502a, #4a2b14); color: #ffe4a6; font: 700 1.4rem/1 inherit; cursor: pointer; box-shadow: 0 0 0 2px #2a1c08, 0 4px 8px rgba(0,0,0,.5); }
.tdc-close:hover { filter: brightness(1.2); }
.tdc-stage { position: absolute; left: 3%; right: 3%; top: 17%; bottom: 40%; }
.tdc-decor { position: absolute; inset: -9% -2% -14% -2%; width: 104%; height: 123%; pointer-events: none; }
.tdc-road { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tdc-act { position: absolute; transform: translate(-50%, 0); padding: 2px 14px; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: #5b3a14; border-top: 2px solid #8a6220; border-bottom: 2px solid #8a6220; white-space: nowrap; z-index: 1; }
.tdc-node { position: absolute; width: clamp(50px, 7vw, 72px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; padding: 0; background: none; cursor: pointer; font: inherit; z-index: 2; transition: transform .15s; }
.tdc-node:hover { transform: translate(-50%, -54%) scale(1.06); }
.tdc-node-disc { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; font-size: 1.6rem; font-weight: 800; color: #fff3cf; text-shadow: 0 2px 0 #3a2408;
  background: radial-gradient(circle at 35% 28%, #f5c15a, #c37a1c 60%, #7d4510); border: 4px solid #f3d27a; box-shadow: 0 0 0 3px #3a2408, 0 6px 10px rgba(50,25,5,.55), inset 0 -4px 8px rgba(60,30,5,.5); }
.tdc-node[data-state=done] .tdc-node-disc { background: radial-gradient(circle at 35% 28%, #9fd06a, #4f8f2e 60%, #2f5f1c); }
.tdc-node[data-state=locked] { cursor: not-allowed; }
.tdc-node[data-state=locked] .tdc-node-disc { background: radial-gradient(circle at 35% 28%, #a29a8b, #6d675c 60%, #453f37); border-color: #b9ad94; color: #d8cfb9; }
.tdc-node[aria-current=true]::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 3px dashed #7a3a10; animation: tdc-spin 14s linear infinite; }
.tdc-node[aria-current=true] .tdc-node-disc { box-shadow: 0 0 0 3px #3a2408, 0 0 26px 6px rgba(255,190,60,.85), inset 0 -4px 8px rgba(60,30,5,.5); }
@keyframes tdc-spin { to { transform: rotate(360deg); } }
.tdc-node-stars { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); white-space: nowrap; font-size: 1.3rem; font-weight: 700; -webkit-text-stroke: .6px #7a4a10; letter-spacing: .04em; color: #b8730f; text-shadow: 0 1px 0 rgba(255,240,200,.9); }
.tdc-lock { width: 46%; height: 46%; }
.tdc-panel { position: absolute; left: 3%; right: 3%; bottom: 5%; height: 33%; z-index: 3; }
.tdc-card { display: none; height: 100%; grid-template-columns: minmax(150px, 30%) 1fr auto; gap: 18px; padding: 12px 16px; border-radius: 12px; border: 3px solid #a26f2a; background: linear-gradient(180deg, rgba(255,250,230,.8), rgba(240,222,176,.85)); box-shadow: 0 6px 14px rgba(60,30,5,.4), inset 0 0 22px rgba(150,100,40,.25); }
.tdc-card.on { display: grid; animation: tdc-card .3s ease both; }
@keyframes tdc-card { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tdc-plan { background: #b9b587; border: 2px solid #836541; border-radius: 6px; overflow: hidden; min-height: 0; box-shadow: inset 0 0 12px rgba(60,40,10,.4); }
.tdc-plan svg { width: 100%; height: 100%; display: block; }
.tdc-info { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.tdc-info .chapter { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: #7a5424; }
.tdc-info h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.05; color: #452a0b; }
.tdc-info p { margin: 4px 0 2px; font: 500 clamp(.8rem, 1.5vw, .98rem)/1.3 system-ui, sans-serif; color: #4a3a22; }
.tdc-info .lesson { font: 700 .72rem system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #7a5a30; }
.tdc-earned { color: #b8730f; font-size: 1.5rem; letter-spacing: .1em; text-shadow: 0 1px 0 rgba(255,240,200,.9); }
.tdc-side { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 8px; min-width: 190px; }
.tdc-side select { font: 700 .95rem system-ui, sans-serif; padding: 8px; border: 2px solid #7a4d18; border-radius: 8px; color: #fff1c7; background: #6b4520; }
.tdc-play { font: inherit; font-size: 1.5rem; font-weight: 800; letter-spacing: .06em; padding: 8px 18px; min-height: 52px; border-radius: 10px; border: 3px solid #f3d27a; cursor: pointer; color: #fff6d8; text-shadow: 0 2px 0 #4a2408;
  background: linear-gradient(180deg, #e8a43a, #b1601c 60%, #8a4213); box-shadow: 0 0 0 3px #3a2408, 0 5px 0 #3a2408, 0 9px 14px rgba(60,30,5,.5); transition: transform .1s, filter .15s; }
.tdc-play:hover { filter: brightness(1.15); transform: translateY(-2px); } .tdc-play:active { transform: translateY(3px); box-shadow: 0 0 0 3px #3a2408, 0 1px 0 #3a2408; }
.tdc-locked { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6d513c; border: 3px dashed #a48a63; border-radius: 10px; }

@media (max-width: 760px), (max-height: 460px) {
  .tdc-card { grid-template-columns: minmax(96px, 24%) 1fr auto; gap: 10px; padding: 8px 10px; }
  .tdc-side { min-width: 132px; gap: 6px; } .tdc-play { font-size: 1.15rem; min-height: 40px; padding: 4px 12px; } .tdc-side select { padding: 5px; font-size: .8rem; }
  .tdc-info p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-height: 460px) {
  .tdc-paper { inset: 2% 1.5%; } .tdc-head { top: 1.5%; } .tdc-head small { display: none; } .tdc-head h1 { font-size: 1.3rem; } .tdc-close { width: 34px; height: 34px; right: 14px; top: 10px; font-size: 1.1rem; }
  .tdc-stage { top: 14%; bottom: 47%; } .tdc-panel { height: 40%; bottom: 4%; } .tdc-node { width: 44px; } .tdc-node-disc { font-size: 1.1rem; border-width: 3px; } .tdc-node-stars { font-size: .8rem; bottom: -24px; }
  .tdc-info h2 { font-size: 1.15rem; } .tdc-info .chapter, .tdc-info .lesson { font-size: .6rem; } .tdc-earned { font-size: 1rem; } .tdc-act { font-size: .65rem; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) { .tdc *, .tdc { animation: none !important; } }

/* ---------- in-game menu (Escape): the main-menu skin over the frozen, dimmed game ---------- */
.tdm.tdm-game { z-index: 160; background: radial-gradient(ellipse at center, rgba(10,6,20,.45), rgba(10,6,20,.8)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 14px; animation: tdm-in .2s ease both; }
.tdm.tdm-game[hidden] { display: none; }
.tdm-gm-card { width: min(92vw, 460px); max-height: 94%; overflow-y: auto; }
.tdm-gm-list { display: flex; flex-direction: column; gap: 12px; padding: 4px 6px 6px; }
.tdm-gm-card .tdm-btn-face { min-height: 48px; font-size: 1.2rem; }
.tdm-gm-card .tdm-primary .tdm-btn-face { min-height: 54px; font-size: 1.35rem; }
.tdm-gm-card .tdm-primary::after { display: none; }
.tdm-gm-card .tdm-row { grid-template-columns: 5.5em 1fr 2.6em; }
.tdm-gm-keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 1rem; line-height: 1.25; }
.tdm-gm-what { color: var(--gold1); letter-spacing: .03em; } .tdm-gm-how { color: #e9dcbc; font-family: system-ui, sans-serif; font-size: .92rem; }
.tdm-gm-ask { margin: 0; text-align: center; font-size: 1.1rem; line-height: 1.35; }
.tdm-gm-yesno { display: flex; gap: 14px; } .tdm-gm-yesno .tdm-btn { flex: 1; }
@media (max-height: 460px) {
  .tdm-gm-card { padding: 8px 16px 10px; gap: 6px; width: min(92vw, 520px); }
  .tdm-gm-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 2px 4px 4px; }
  .tdm-gm-list .tdm-btn:first-child { grid-column: 1 / 3; }
  .tdm-gm-card .tdm-btn, .tdm-gm-card .tdm-btn-face { min-height: 36px; } .tdm-gm-card .tdm-btn-face { font-size: .98rem; padding: 3px 10px; }
  .tdm-gm-card .tdm-primary .tdm-btn-face { min-height: 40px; font-size: 1.1rem; }
  .tdm-gm-keys { font-size: .82rem; gap: 4px 12px; } .tdm-gm-how { font-size: .78rem; } .tdm-gm-ask { font-size: .95rem; }
}