/* Home page / room / in-game panels: generated by client/themes/menu20/gen.mjs (V19 · Hanging banner). Edit the generator, not this file. */
/* V19 · Hanging banner — a tall blue cloth banner hangs behind the menu (white text on it), dark fields, silver plate buttons */
.menu-bg { background:linear-gradient(160deg, #1a2230, #090c12); }
#menu { color:#eef2f6; }
.menu-col::before { content:''; position:absolute; inset:-34px -40px; z-index:-1; background:linear-gradient(90deg, rgba(0,0,0,.25), rgba(255,255,255,.06) 20%, rgba(0,0,0,.12) 45%, rgba(255,255,255,.05) 70%, rgba(0,0,0,.25)), linear-gradient(#24478e, #142a5a); clip-path:polygon(0 0, 100% 0, 100% 96%, 50% 100%, 0 96%); box-shadow:none; border-top:6px solid #2a2c30; }
.menu-col h1 { color:#eef2f6; text-shadow:0 3px 0 rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.4); }
.menu-col h1 em { color:#cfe0ff; }
.menu-col .tag { color:#c9d6ea; background:linear-gradient(90deg, rgba(207,216,227,.5), transparent) left bottom/100% 1px no-repeat; }
.u span, .room-head .lbl { color:#dfe8f5; }
.u input, .u select { background:#0d1830; border:1.5px solid #8aa4d0; border-radius:6px; color:#f4f7fa; box-shadow:inset 0 2px 4px rgba(0,0,0,.45); }
.u select { background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f4f7fa%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E") right 12px center/16px no-repeat, #0d1830; padding-right:38px; }
.u input::placeholder { color:rgba(255,255,255,.35); }
.u input:focus, .u select:focus { border-color:#6aa0ff; box-shadow:0 0 0 3px #6aa0ff55; outline:none; }
.u select option { background:#1a222c; color:#fff; }
.room-head b { background:#0d1830; border:1.5px solid #8aa4d0; border-radius:6px; color:#f4f7fa; box-shadow:inset 0 2px 4px rgba(0,0,0,.45); font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif; }
.slot { background:rgba(8,16,40,.55); border:1px solid rgba(207,216,227,.4); border-radius:4px; }
.slot.me { border-color:#ffffff; box-shadow:0 0 0 1px #ffffff88, 0 0 12px #ffffff44; }
.slot.empty { background:transparent; border:1px dashed #56606e; }
.slot .nm { color:#eef2f6; } .slot .nm em, .slot .st { color:#c9d6ea; }
.slot.empty .nm { color:#c9d6ea; }
.hint, .conn { color:#c9d6ea; } .help { color:#c9d6ea; border-top-color:rgba(207,216,227,.15); }
#menu button.primary, #menu button.ghost.on, #menu button.ghost:not(.on), #menu button.ghost.sm, #menu .slot button.sm, #menu button.link { clip-path:none; filter:none; transform:none; border:none; box-shadow:none; text-shadow:none; background:none; border-radius:0; margin:0; backdrop-filter:none; font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
#menu button.primary, #menu button.ghost:not(.sm) { font-size:16px; padding:13px 30px; }
#menu button.ghost.sm, #menu .slot button.sm { font-size:12.5px; padding:7px 16px; }
#menu button.primary, #menu button.ghost.on { 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 button.ghost:not(.on):not(.sm) { color:#fff; background:linear-gradient(#2c4a86, #1a3060); border:2px solid #cfd8e3; 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 button.ghost.sm, #menu .slot button.sm { color:#fff; background:linear-gradient(#2c4a86, #1a3060); border:2px solid #cfd8e3; 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 .slot button.sm.danger { color:#ffc2b8; }
#menu button.link { color:#c9d6ea; background:none; padding:12px; } #menu button.link:hover { color:#eef2f6; }
#menu button.primary:not(:disabled):hover, #menu button.ghost:not(:disabled):hover, #menu .slot button.sm:hover { filter:brightness(1.1); }
#menu button.primary:disabled, #menu button.ghost:disabled { opacity:1; cursor:not-allowed; filter:none; background:linear-gradient(#aab3bf, #8d97a4); color:#263352; border-color:#5a6472; box-shadow:none; opacity:.85; }


/* ---- a longer banner: more cloth under the Controls list, the pointed tail keeps its size (Vinchi, 2026-09-12).
   main.js fitMenu() reads these insets so the whole banner, tail included, always fits the screen. */
.menu-col::before { inset:-34px -40px -100px; clip-path:polygon(0 0, 100% 0, 100% calc(100% - 42px), 50% 100%, 0 calc(100% - 42px)); }
/* ---- in-game panels in the same cloth banner look (no stone textures behind text) */
#settings, .end-card { background:linear-gradient(90deg, rgba(0,0,0,.25), rgba(255,255,255,.06) 20%, rgba(0,0,0,.12) 45%, rgba(255,255,255,.05) 70%, rgba(0,0,0,.25)), linear-gradient(#24478e, #142a5a); border:1px solid rgba(207,216,227,.55); border-top:6px solid #2a2c30; border-radius:3px; box-shadow:0 0 0 1px #07090c, 0 20px 50px rgba(0,0,0,.55); }
#settings h3 { color:#fff; background:linear-gradient(90deg, rgba(207,216,227,.6), transparent) left bottom/100% 1px no-repeat; }
#settings label { color:#dfe8f5; } #settings label.chk { color:#fff; } #settings .hint, #settings .diag { color:#c9d6ea; }
#settings select { background:#0d1830; border:1.5px solid #8aa4d0; border-radius:6px; color:#f4f7fa; box-shadow:inset 0 2px 4px rgba(0,0,0,.45); background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f4f7fa%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E") right 10px center/14px no-repeat, #0d1830; padding:8px 34px 8px 12px; }
#settings select option { background:#1a222c; color:#fff; }
.end-card p { color:#dfe8f5; }
.end-card h1.pause { color:#fff; } .end-card h1.lose { color:#ffb2a6; }
/* ---- buttons there: silver plate = main, navy plate = the rest, red plate = give up / leave */
.end-card button:not(.danger) { clip-path:none; filter:none; transform:none; text-shadow:none; margin:0; backdrop-filter:none; 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); font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.end-card button.danger, #settings button.danger { clip-path:none; filter:none; transform:none; text-shadow:none; margin:0; backdrop-filter:none; color:#fff; background:linear-gradient(#c84434, #8a1c14); border:2px solid #f0b8ae; 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); font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
#settings button:not(.danger) { clip-path:none; filter:none; transform:none; text-shadow:none; margin:0; backdrop-filter:none; color:#fff; background:linear-gradient(#2c4a86, #1a3060); border:2px solid #cfd8e3; 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); font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.end-card button.danger:hover, #settings button.danger:hover { background:linear-gradient(#d85444, #9a241a); }
.end-card button:not(.danger):hover, #settings button:not(.danger):hover { filter:brightness(1.1); }
.pause-btns button { margin-top:0; } .end-card > button:not(.danger) { margin-top:26px; }