:root {
  --ink: #1b1612;
  --plate: #2e2822;
  --plate2: #3b332b;
  --paper: #d9cba8;
  --paper-d: #b9a77e;
  --brass: #b8893a;
  --rust: #a4492f;
  --moss: #5f7f45;
  --text: #e6dcc3;
  --muted: #a39679;
  --font: "Russo One", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--text); font-family: var(--font); overflow: hidden; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; background: var(--ink); }
#game { width: 100%; height: 100%; display: block; touch-action: none; }
#screens { position: absolute; inset: 0; pointer-events: none; }
.screen { position: absolute; inset: 0; display: none; pointer-events: auto; }
.screen.show { display: flex; }

/* меню */
#menu { background: #140d0a; align-items: center; justify-content: center; overflow: hidden; }
#menuArt { position: absolute; inset: 0; width: 100%; height: 100%; }
.menu-body { position: relative; z-index: 1; width: min(400px, 100%); max-height: 100%; padding: 20px 22px calc(70px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.logo { margin: 0; width: 100%; line-height: 1; text-transform: uppercase; font-weight: 400; text-align: center; filter: drop-shadow(0 6px 10px rgba(0,0,0,.65)); }
.logo .pre { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; font-family: "Philosopher", var(--font); }
.logo .pre em { font-style: normal; font-size: clamp(17px, 5vw, 22px); letter-spacing: .5em; margin-right: -.5em; color: #e9d2a0; text-shadow: 0 2px 4px #000; }
.logo .cog { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #1a0f07 0 3px, #d9a24c 4px 5px, transparent 6px), conic-gradient(#d9a24c 0 12%, transparent 0 25%, #d9a24c 0 37%, transparent 0 50%, #d9a24c 0 62%, transparent 0 75%, #d9a24c 0 87%, transparent 0); }
.logo .plate { display: block; padding: 4px; background: linear-gradient(#f4d88f, #8a5a22 60%, #5d3a14); clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.logo .plate u { display: block; text-decoration: none; padding: 8px 14px 12px; clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px); background: radial-gradient(ellipse at 50% 0, #3a2a1e, #130d09 75%); font-family: "Alfa Slab One", var(--font); font-weight: 400; font-size: clamp(40px, 12.5vw, 56px); letter-spacing: 1px; background-clip: padding-box; }
.logo .plate u { color: transparent; background: linear-gradient(#ffe7a6 0, #e3aa4c 45%, #8f5a1d 100%) text, radial-gradient(ellipse at 50% 0, #3a2a1e, #130d09 75%); -webkit-background-clip: text, border-box; background-clip: text, border-box; filter: drop-shadow(0 2px 0 #2a190b); }
.tagline { margin: 0; color: #eadbb8; font-size: 15px; font-family: "Philosopher", system-ui, sans-serif; text-shadow: 0 2px 6px #000; position: relative; padding-top: 12px; }
.tagline::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, transparent, #d9a24c 20%, #d9a24c 80%, transparent); }
.stack { display: flex; flex-direction: column; gap: 14px; width: 100%; margin-top: 4px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
.who { margin: 0; font-size: 12px; color: #d2bf92; font-family: "Philosopher", system-ui, sans-serif; letter-spacing: .12em; text-shadow: 0 2px 4px #000; }

/* кнопки меню: скошенные пластины с заклёпками */
.mbtn { --cut: 14px; --poly: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); position: relative; display: flex; align-items: center; gap: 14px; width: 100%; font: inherit; font-size: 22px; text-transform: uppercase; letter-spacing: 1px; color: #e9dcc0; padding: 4px; border: 0; cursor: pointer; background: linear-gradient(#e9bd6a, #8a5a22 55%, #5d3a14); clip-path: var(--poly); }
.mbtn > * { position: relative; z-index: 1; }
.mbtn::before { content: ""; position: absolute; inset: 3px; clip-path: var(--poly); background: linear-gradient(#34312f, #1f1d1c 60%, #2a2725); box-shadow: inset 0 0 18px rgba(0,0,0,.6); }
.mbtn::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 15px 50%, #f0c878 0 3px, #6b4418 4px, transparent 5px), radial-gradient(circle at calc(100% - 15px) 50%, #f0c878 0 3px, #6b4418 4px, transparent 5px); }
.mbtn { padding: 17px 36px; }
.mbtn .ic { width: 30px; height: 30px; flex: none; color: #d9a24c; }
.mbtn .lbl { flex: 1; text-align: left; text-shadow: 0 2px 3px #000; }
.mbtn small { font-size: 18px; color: #f2c25c; text-shadow: 0 2px 3px #000; }
.mbtn:hover::before { background: linear-gradient(#403c39, #272422 60%, #322e2b); }
.mbtn:active { transform: translateY(3px); }
.mbtn.gold { color: #2a1708; padding-block: 22px; background: linear-gradient(#ffe7a6, #c58a34 55%, #7a4c18); }
.mbtn.gold::before { background: linear-gradient(#fbd47a 0, #e0a248 45%, #b87a2a 100%); box-shadow: inset 0 0 22px rgba(255,235,170,.55), inset 0 -8px 14px rgba(110,60,10,.45); }
.mbtn.gold .lbl { text-shadow: 0 1px 0 rgba(255,236,180,.7); font-size: 26px; }
.mbtn.gold:hover::before { background: linear-gradient(#ffdc8a 0, #e8aa50 45%, #c0832f 100%); }
.stack .mbtn.gold { filter: drop-shadow(0 0 14px rgba(255,170,60,.45)); }

.toggles { display: flex; gap: 12px; justify-content: center; width: 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.tgl { --cut: 8px; flex: 1; max-width: 190px; display: flex; align-items: center; gap: 8px; position: relative; font: inherit; font-family: "Philosopher", var(--font); font-size: 15px; color: #e9dcc0; padding: 11px 12px; border: 0; cursor: pointer; background: linear-gradient(#d9a24c, #6b4418); clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%); }
.tgl::before { content: ""; position: absolute; inset: 2px; background: linear-gradient(#2c2927, #171514); clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%); }
.tgl > * { position: relative; z-index: 1; }
.tgl .ic { width: 24px; height: 24px; flex: none; padding: 3px; border: 2px solid #d9a24c; border-radius: 50%; color: #e6b25a; }
.tgl.off { opacity: .6; }
.tgl.off .lbl { text-decoration: line-through; }

.btn { font: inherit; font-size: 16px; text-transform: uppercase; letter-spacing: 1.5px; text-align: left; color: var(--text); padding: 14px 16px; border-radius: 3px; cursor: pointer; border: 3px solid var(--ink); background: var(--plate2); box-shadow: 0 4px 0 #0d0a08, inset 0 0 0 1px #5a4f42; }
.btn:hover { background: #473d33; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0d0a08, inset 0 0 0 1px #5a4f42; }
.btn.big { background: var(--brass); color: var(--ink); box-shadow: 0 4px 0 #0d0a08, inset 0 0 0 1px #d9ad5e; }
.btn.big:hover { background: #c79a4a; }
.btn.small { font-size: 13px; padding: 10px 12px; text-align: center; }
.btn.danger { color: #d98a76; }
.btn[disabled] { opacity: .4; cursor: default; }
.btn small { font-size: 13px; margin-left: 8px; color: var(--brass); }
.btn.big small { color: var(--ink); }

.toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font: inherit; font-size: 12px; color: var(--muted); padding: 7px 10px; border-radius: 2px; border: 2px solid #4a4036; background: transparent; cursor: pointer; }
.chip.off { text-decoration: line-through; opacity: .6; }

/* экраны со списками */
.panel-screen { flex-direction: column; background: var(--ink) repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.015) 14px 15px); padding-top: env(safe-area-inset-top); }
.panel-screen header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 10px 14px; background: var(--plate); border-bottom: 4px solid var(--brass); }
.panel-screen h2 { margin: 0; font-size: 18px; font-weight: 400; text-transform: uppercase; letter-spacing: 3px; color: var(--paper); }
.back { font: inherit; font-size: 13px; color: var(--text); background: transparent; border: 2px solid #5a4f42; border-radius: 2px; padding: 8px 10px; cursor: pointer; justify-self: start; }
.hstars { justify-self: end; color: var(--brass); font-size: 15px; }
.scroll { flex: 1; overflow-y: auto; padding: 14px; width: min(560px, 100%); margin: 0 auto; -webkit-overflow-scrolling: touch; }
.note { color: var(--muted); font-size: 13px; font-family: system-ui, sans-serif; line-height: 1.4; margin: 0 0 12px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lvl { position: relative; text-align: left; font: inherit; color: var(--text); border-radius: 3px; padding: 10px 10px 10px 50px; border: 3px solid var(--ink); background: var(--plate2); cursor: pointer; box-shadow: 0 4px 0 #0d0a08, inset 0 0 0 1px #5a4f42; min-height: 96px; display: flex; flex-direction: column; gap: 3px; }
.lvl:active { transform: translateY(3px); box-shadow: 0 1px 0 #0d0a08; }
.lvl .num { position: absolute; left: 0; top: 0; bottom: 0; width: 38px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--plate); color: var(--brass); border-right: 3px solid var(--ink); }
.lvl .name { font-size: 14px; line-height: 1.2; }
.lvl .meta { font-size: 12px; color: var(--muted); font-family: system-ui, sans-serif; }
.lvl .st { margin-top: auto; font-size: 18px; letter-spacing: 3px; color: #4f453a; }
.lvl .st i { font-style: normal; color: var(--brass); }
.lvl .best { font-size: 11px; color: var(--muted); font-family: system-ui, sans-serif; }
.lvl.locked { opacity: .45; cursor: default; }
.lvl.boss .num { background: var(--rust); color: var(--paper); }
.lvl .tag { font-size: 11px; color: #d98a76; font-family: system-ui, sans-serif; }

.arsenal { margin-top: 16px; padding: 10px; border: 2px dashed #5a4f42; }
.arsenal h3 { margin: 0 0 8px; font-size: 12px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.arsenal .row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.arsenal .t { text-align: center; font-size: 10px; color: var(--muted); font-family: system-ui, sans-serif; }
.arsenal .t img { width: 100%; max-width: 54px; display: block; margin: 0 auto 2px; }
.arsenal .t.lock img { filter: grayscale(1) brightness(.45); }

.list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.up { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 3px; background: var(--plate2); box-shadow: inset 0 0 0 1px #5a4f42; }
.up h3 { margin: 0; font-size: 15px; font-weight: 400; color: var(--paper); }
.up p { margin: 2px 0 6px; font-size: 12px; color: var(--muted); font-family: system-ui, sans-serif; }
.pips { display: flex; gap: 4px; }
.pips i { width: 20px; height: 7px; background: var(--ink); }
.pips i.on { background: var(--brass); }

.row-b { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 12px; border-left: 4px solid #5a4f42; background: var(--plate); font-size: 14px; }
.row-b.me { border-left-color: var(--brass); background: var(--plate2); }
.row-b .rk { color: var(--brass); }
.row-b .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-b .sc { color: var(--text); font-size: 13px; min-width: 52px; text-align: right; }
.row-b .ss { color: var(--muted); font-size: 12px; }

/* окна: «бумажный» бланк, чтобы отличались от интерфейса боя */
.modal { background: rgba(13,10,8,.8); align-items: center; justify-content: center; padding: 16px; }
.card { width: min(360px, 100%); padding: 20px; color: var(--ink); background: var(--paper); border: 4px solid var(--ink); box-shadow: 6px 6px 0 #0d0a08; display: flex; flex-direction: column; gap: 12px; max-height: 100%; overflow-y: auto; }
.card h2 { margin: 0; font-size: 26px; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; border-bottom: 3px solid var(--ink); padding-bottom: 8px; }
.card.lose h2 { color: var(--rust); }
.card .btn { background: var(--plate); color: var(--text); }
.card .btn.big { background: var(--brass); color: var(--ink); }
.card .chip { color: #4a4034; border-color: #8a7a58; }
.keys { margin: 0; font-size: 11.5px; line-height: 1.6; color: #5a4e38; font-family: system-ui, sans-serif; }
.keys b { color: var(--ink); }
body.touch .keys { display: none; }
.stars { font-size: 44px; letter-spacing: 6px; color: #b3a47c; }
.stars i { font-style: normal; display: inline-block; }
.stars i.on { color: var(--ink); }
.card .note { color: #5a4e38; margin: 0; }
.score { margin: 0; font-size: 20px; }
.extra { margin: 0; font-size: 13px; color: #3d5a2a; font-family: system-ui, sans-serif; min-height: 1em; }