/* Menu / lobby / settings / pause / end cards in the medieval "Night Watch" look of the HUD (Vinchi picked the BM1 banner
   buttons and asked to restyle the whole home page, keeping only the game scene image). Loaded after style.css + hud css. */
:root {
  --ui-ink:#24170b; --ui-silver:#cfd8e3; --ui-silver-dim:#9aa8b8; --ui-blue:#3f7ef2; --ui-blue-dk:#1c4ab8; --ui-red:#c84434; --ui-red-dk:#8a1c14;
  --ui-serif:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
  --ui-parch:repeating-linear-gradient(0deg, rgba(40,80,160,.13) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, rgba(40,80,160,.13) 0 1px, transparent 1px 10px), linear-gradient(#f3e8cd, #e2cfa8);
  --ui-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 46'%3E%3Cpath d='M3 3H37V20C37 32 27 40 20 43C13 40 3 32 3 20Z' fill='%23cfd8e3' stroke='rgba(0,0,0,.55)' stroke-width='1.5'/%3E%3Cpath d='M7 7H33V20C33 29.5 25.5 36 20 38.6C14.5 36 7 29.5 7 20Z' fill='%232f6fe8'/%3E%3Cpath d='M7 7H33V12H7Z' fill='rgba(255,255,255,.18)'/%3E%3Cg transform='translate(8 8)'%3E%3Cpath d='M12 3C10 6 10 9 12 12C14 9 14 6 12 3ZM12 12C9 9 5 9 5 13C5 15 7 16 8.5 15C7.5 14 8 12.5 9.5 12.8C10.5 13 11 14 12 15ZM12 12C15 9 19 9 19 13C19 15 17 16 15.5 15C16.5 14 16 12.5 14.5 12.8C13.5 13 13 14 12 15ZM8 15.5H16V17H8ZM11 17H13L12.6 21H11.4Z' fill='%23f6ecd2'/%3E%3C/g%3E%3C/svg%3E");
  --ui-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a2414' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---- page: dark slate instead of the navy gradient (the scene image on the right is unchanged) */
#menu { --mtext:#eef2f6; --muted:var(--ui-silver-dim); color:var(--mtext); }
.menu-bg { background:radial-gradient(ellipse at 28% 45%, rgba(16,24,38,.74), rgba(6,9,14,.95) 78%), url(/client/assets/tex/slate-dark.png) 0 0/260px; }
.menu-col { gap:20px; }

/* ---- title: fleur shield + serif wordmark, "Realms" in the HUD's silver-blue, an ornamental rule under the tagline */
.menu-col h1 { position:relative; padding-left:92px; font-family:var(--ui-serif); font-weight:700; font-size:74px; letter-spacing:.01em; line-height:.98; color:#f3f6fa; text-shadow:0 3px 0 rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.45); }
.menu-col h1::before { content:''; position:absolute; left:0; top:10px; width:74px; height:85px; background:var(--ui-shield) center/contain no-repeat; filter:drop-shadow(0 4px 4px rgba(0,0,0,.6)); }
.menu-col h1 em { color:#9cc2ff; font-style:normal; }
.menu-col .tag { font-family:var(--ui-serif); font-style:italic; font-size:17px; color:#c3cfdc; margin-top:-2px; padding-bottom:14px; background:linear-gradient(90deg, rgba(207,216,227,.55), rgba(207,216,227,0)) left bottom/100% 1px no-repeat; }

/* ---- fields: plan-paper inputs with a dark rim, labels in serif small caps */
.u { gap:6px; }
.u span, .room-head .lbl { font-family:var(--ui-serif); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:none; font-variant:small-caps; color:#b7c4d2; }
.u input, .u select { padding:10px 14px; border:2px solid #3a2414; border-radius:4px; background:var(--ui-parch); color:var(--ui-ink); font-size:18px; font-weight:700; box-shadow:inset 0 1px 3px rgba(60,40,20,.35), 0 2px 0 rgba(0,0,0,.45); }
.u input::placeholder { color:rgba(58,36,20,.4); }
.u select { appearance:none; -webkit-appearance:none; padding-right:38px; background:var(--ui-chevron) right 12px center/16px no-repeat, var(--ui-parch); cursor:pointer; }
.u select option { background:#f1e5c8; color:var(--ui-ink); }
.u input:focus, .u select:focus { border-color:#1c4ab8; box-shadow:inset 0 1px 3px rgba(60,40,20,.35), 0 0 0 3px rgba(90,150,255,.55); }
.row { gap:16px; }
#host-controls { display:flex; flex-direction:column; gap:16px; }
#menu .slot button.sm { font-family:var(--ui-serif); font-weight:700; letter-spacing:.07em; } /* style.css gives every #menu button font:inherit */

/* ---- small print */
.conn { font-family:var(--ui-serif); font-size:13px; color:var(--ui-silver-dim); display:flex; align-items:center; gap:8px; }
.conn::before { content:''; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #bfe0ff, #3f7ef2 60%, #173c8e); box-shadow:0 0 6px rgba(90,150,255,.8); }
.hint { font-size:12.5px; color:var(--ui-silver-dim); }
.help { font-size:11.5px; color:#8391a2; line-height:1.6; border-top:1px solid rgba(207,216,227,.15); padding-top:10px; }
.error { background:linear-gradient(rgba(200,68,52,.28), rgba(138,28,20,.36)); border:1px solid var(--ui-red); border-radius:3px; color:#ffd6cf; font-family:var(--ui-serif); font-weight:700; }

/* ---- room: code on a parchment plaque, players on slate plates, team tags as little cloth banners */
.room-head { align-items:center; }
.room-head b { font-family:var(--ui-serif); font-weight:700; font-size:30px; letter-spacing:.3em; padding:4px 10px 4px 18px; color:var(--ui-ink); background:var(--ui-parch); border:2px solid #3a2414; border-radius:4px; box-shadow:0 2px 0 rgba(0,0,0,.45); }
/* invite link row under the room code (version 3, Vinchi 2026-09-15): the link a friend opens to land straight in the room */
#menu .invite { display:flex; align-items:center; gap:12px; margin:12px 0 4px; }
#menu .invite .lbl { font-family:var(--ui-serif); font-weight:700; font-size:13px; letter-spacing:.1em; font-variant:small-caps; color:#dfe8f5; white-space:nowrap; }
#menu .invite .url { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:9px 12px; font:600 14px 'Segoe UI', system-ui, sans-serif; color:#e8eef7; background:#0d1830; border:1.5px solid #8aa4d0; border-radius:6px; box-shadow:inset 0 2px 4px rgba(0,0,0,.45); user-select:all; }
#menu .copylink { display:inline-flex; align-items:center; gap:8px; margin:0; font-family:var(--ui-serif); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:10px 16px; color:#14264e; background:linear-gradient(#f4f6f8, #c7ced8); border:2px solid #5a6472; border-radius:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 3px 0 rgba(0,0,0,.45), 0 6px 12px rgba(0,0,0,.3); }
#menu .copylink:hover { filter:brightness(1.06); }
#menu .copylink.done { color:#fff; background:linear-gradient(#3d8a4a, #23602e); border-color:#bfe6c4; }
#menu .copylink svg { width:17px; height:17px; }
/* Leave: small outlined plate with a door, right after Start game (version 3·A) */
#menu button.leave { display:inline-flex; align-items:center; gap:8px; margin:0; font-family:var(--ui-serif); font-weight:700; font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; padding:10px 18px; color:#f1d3cd; background:rgba(10,18,38,.55); border:2px solid #d98a7c; border-radius:3px; box-shadow:0 3px 0 rgba(0,0,0,.4); }
#menu button.leave:hover { color:#fff; background:rgba(120,36,26,.55); }
#menu button.leave svg { width:17px; height:17px; }
.slot { padding:10px 12px; border-radius:4px; border:1px solid #5a6472; background:linear-gradient(rgba(255,255,255,.05), rgba(0,0,0,.25)), url(/client/assets/tex/slate-dark.png) 0 0/180px; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.35); }
.slot.me { border-color:#9cc2ff; box-shadow:inset 0 0 0 1px rgba(156,194,255,.35), inset 0 0 14px rgba(90,150,255,.25), 0 2px 6px rgba(0,0,0,.35); }
.slot.empty { background:rgba(255,255,255,.03); border-style:dashed; border-color:#4a5462; }
.slot .tm { font-family:var(--ui-serif); font-size:11px; letter-spacing:.06em; padding:4px 14px; border-radius:0; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.4); clip-path:polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%, 6px 50%); }
.slot .t0 { background:linear-gradient(rgba(255,255,255,.2), rgba(0,0,0,.15)), linear-gradient(var(--ui-blue), var(--ui-blue-dk)); }
.slot .t1 { background:linear-gradient(rgba(255,255,255,.2), rgba(0,0,0,.15)), linear-gradient(var(--ui-red), var(--ui-red-dk)); }
.slot .nm { font-family:var(--ui-serif); font-weight:700; font-size:17px; color:#f1f4f8; } .slot .nm em { color:var(--ui-silver-dim); }
.slot .st { font-family:var(--ui-serif); font-variant:small-caps; font-size:13px; color:var(--ui-silver-dim); }

/* ---- in-game ⚙ settings panel: slate plate with a silver rim */
#settings { border-radius:6px; border:2px solid #7a8494; background:linear-gradient(rgba(10,14,22,.5), rgba(4,6,12,.72)), url(/client/assets/tex/slate-dark.png) 0 0/200px; box-shadow:0 0 0 1px #07090c, 0 20px 50px rgba(0,0,0,.55), inset 0 0 18px rgba(0,0,0,.45); backdrop-filter:none; }
#settings h3 { font-family:var(--ui-serif); font-weight:700; font-size:24px; letter-spacing:.03em; color:#f3f6fa; padding-bottom:8px; background:linear-gradient(90deg, rgba(207,216,227,.5), rgba(207,216,227,0)) left bottom/100% 1px no-repeat; }
#settings label { font-family:var(--ui-serif); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:none; font-variant:small-caps; color:#b7c4d2; }
#settings label.chk { font-family:Nunito, 'Segoe UI', sans-serif; font-variant:normal; font-weight:700; letter-spacing:0; font-size:14px; color:#eef2f6; }
#settings label.chk input { accent-color:var(--ui-blue); }
#settings select { padding:8px 36px 8px 12px; border:2px solid #3a2414; border-radius:4px; appearance:none; -webkit-appearance:none; background:var(--ui-chevron) right 10px center/14px no-repeat, var(--ui-parch); color:var(--ui-ink); font-weight:700; font-size:15px; }
#settings select:focus { border-color:#1c4ab8; }
#settings select option { background:#f1e5c8; color:var(--ui-ink); }
#settings .hint, #settings .diag { color:var(--ui-silver-dim); }

/* ---- pause / victory / defeat cards: framed slate plate, serif titles; victory in gold, defeat in red */
#pause, #endgame { background:radial-gradient(ellipse at center, rgba(6,9,14,.45), rgba(6,9,14,.85)); }
.end-card { border-radius:6px; border:2px solid #7a8494; background:linear-gradient(rgba(10,14,22,.45), rgba(4,6,12,.7)), url(/client/assets/tex/slate-dark.png) 0 0/220px; box-shadow:0 0 0 1px #07090c, 0 30px 80px rgba(0,0,0,.6), inset 0 0 22px rgba(0,0,0,.5); position:relative; }
.end-card::before { content:''; position:absolute; left:50%; top:-26px; transform:translateX(-50%); width:44px; height:50px; background:var(--ui-shield) center/contain no-repeat; filter:drop-shadow(0 3px 3px rgba(0,0,0,.6)); }
.end-card h1 { font-family:var(--ui-serif); font-weight:700; letter-spacing:.02em; text-shadow:0 3px 0 rgba(0,0,0,.55); }
.end-card h1.win { color:#f3d27c; text-shadow:0 0 18px rgba(243,210,124,.45), 0 3px 0 rgba(0,0,0,.55); }
.end-card h1.lose { color:#ff8a72; } .end-card h1.pause { color:#f3f6fa; }
.end-card p { font-family:var(--ui-serif); font-style:italic; color:#c3cfdc; }

/* ---- "new version" notice: a red cloth ribbon instead of the coral pill */
#stale { border-radius:0; font-family:var(--ui-serif); background:linear-gradient(rgba(255,255,255,.16), rgba(0,0,0,.2)), linear-gradient(var(--ui-red), var(--ui-red-dk)); color:#fff2ee; clip-path:polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%); padding:10px 30px; }

/* ---- controls (C3, Vinchi 2026-09-12): Mouse column with little mouse pictures | Keyboard column with key chips.
   The menu column is wider (600px) so the rows breathe; fitMenu still scales everything down on small screens. */
.menu-col { width:600px; }
.help { display:flex; flex-direction:column; gap:12px; font-size:14px; line-height:1.3; padding-top:14px; }
.help .help-title { font-family:var(--ui-serif); font-variant:small-caps; letter-spacing:.1em; font-size:15px; color:inherit; }
.help .kcols { display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
.help h4 { margin:0 0 8px; display:flex; align-items:center; gap:10px; font:700 12px var(--ui-serif); letter-spacing:.14em; text-transform:uppercase; color:rgba(223,232,245,.68); }
.help h4::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, rgba(207,216,227,.3), transparent); }
.help .r { display:flex; align-items:center; gap:12px; min-height:36px; color:#e6edf7; }
.help .r > b { flex:none; width:86px; font:800 13px Nunito, Segoe UI, sans-serif; color:#fff; letter-spacing:.01em; }
.help .r .k { flex:none; width:104px; display:flex; align-items:center; gap:4px; }
.help .r .k i { font-style:normal; font-size:12px; color:rgba(223,232,245,.6); }
.help .ms { flex:none; width:16px; height:23px; background:center/contain no-repeat; }
.help .ms.ms-l { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Cpath d='M8 1.6A6.4 6.4 0 0 0 1.7 8v1H8z' fill='%239fc2ff'/%3E%3Crect x='1' y='1' width='14' height='20' rx='7' fill='none' stroke='%23dfe8f5' stroke-width='1.4'/%3E%3Cline x1='8' y1='1.5' x2='8' y2='9' stroke='%23dfe8f5' stroke-width='1.2'/%3E%3C/svg%3E"); }
.help .ms.ms-r { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Cpath d='M8 1.6A6.4 6.4 0 0 1 14.3 8v1H8z' fill='%239fc2ff'/%3E%3Crect x='1' y='1' width='14' height='20' rx='7' fill='none' stroke='%23dfe8f5' stroke-width='1.4'/%3E%3Cline x1='8' y1='1.5' x2='8' y2='9' stroke='%23dfe8f5' stroke-width='1.2'/%3E%3C/svg%3E"); }
.help .ms.ms-w { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Crect x='6.6' y='3.5' width='2.8' height='5' rx='1.4' fill='%239fc2ff'/%3E%3Crect x='1' y='1' width='14' height='20' rx='7' fill='none' stroke='%23dfe8f5' stroke-width='1.4'/%3E%3Cline x1='8' y1='1.5' x2='8' y2='3' stroke='%23dfe8f5' stroke-width='1.2'/%3E%3Cline x1='8' y1='9' x2='8' y2='9.5' stroke='%23dfe8f5' stroke-width='1.2'/%3E%3C/svg%3E"); }
.help kbd { font:800 12px/1 Nunito, Segoe UI, sans-serif; color:#fff; min-width:26px; text-align:center; padding:6px 10px 7px; border-radius:5px; background:linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.07)); border:1px solid rgba(255,255,255,.42); border-bottom-width:2px; box-shadow:0 1px 0 rgba(0,0,0,.35); white-space:nowrap; }

/* ---- "follow us on X" badge, top-right over the menu scene (X4, Vinchi 2026-09-12). Link + handle live in main.js (X_ACCOUNT). */
#x-follow { position:absolute; top:22px; right:24px; z-index:5; display:flex; align-items:center; gap:11px; padding:7px 16px 7px 7px; color:#fff; text-decoration:none; background:rgba(10,18,36,.82); border:1px solid rgba(207,216,227,.45); border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.35); font-family:'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; transition:background .15s; } /* F1: a clean sans like X's own (Vinchi 2026-09-12) */
#x-follow i { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#000; }
#x-follow svg { width:16px; height:16px; }
#x-follow span { display:flex; flex-direction:column; line-height:1.15; }
#x-follow small { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#c9d6ea; }
#x-follow b { font-size:15.5px; font-weight:700; }
#x-follow:hover { background:rgba(20,32,60,.92); }