/* Готика на ткани: бархат, дамаст, парча и мешковина со стёжкой. Шрифт — Cormorant SC (Google Fonts), запасной — засечки. */
body { background: #000; color: #f1e4cc; font-family: "Cormorant SC", "Cormorant Garamond", Georgia, "Times New Roman", serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
#scr-menu { background: #05020a; }
.dm { font-family: "Cormorant SC", Georgia, "Times New Roman", serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.dm-cv { position: absolute; left: 0; top: 0; display: block; }
#m-castle, #m-fg { pointer-events: none; }

/* название: «ПОБЕГ» костью и золотом, «ОТ ДРАКУЛЫ» — кровью, снизу стекают капли */
.dm-title { position: absolute; left: 0; right: 0; top: 16px; text-align: center; pointer-events: none; }
.dm-title .t1 { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 27px; font-weight: 700; letter-spacing: 9px; line-height: 1;
  color: #f3e3c0; text-shadow: 0 2px 0 #2b1406, 0 0 10px rgba(255, 210, 150, .35); padding-left: 9px; }
.orn { display: block; width: 52px; height: 9px; background:
  linear-gradient(90deg, rgba(201, 150, 70, 0), #d9a85a) 0 50% / 42px 1.5px no-repeat,
  linear-gradient(45deg, transparent 45%, #f0c27a 46% 54%, transparent 55%) 100% 50% / 9px 9px no-repeat,
  linear-gradient(-45deg, transparent 45%, #f0c27a 46% 54%, transparent 55%) 100% 50% / 9px 9px no-repeat; }
.orn.r { transform: scaleX(-1); }
.dm-title .t2 { margin-top: 2px; font-size: 50px; font-weight: 700; letter-spacing: 2px; line-height: 1.02;
  background: linear-gradient(#ff8d8d 0%, #ff2d45 28%, #c3001f 58%, #6e0010 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #2a0006) drop-shadow(0 4px 0 #120003) drop-shadow(0 0 16px rgba(255, 20, 50, .55)); }
.dm-title .drips { display: block; width: 286px; height: 22px; margin: -6px auto 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }

/* ---- ткани ---- */
.dm-btn, .fab, .panel, #toast { background-color: #2a0c22;
  background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 235, 255, .07) 45%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(rgba(255, 240, 230, .14), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, .4)), url(../img/damask.webp);
  background-size: 100% 100%, 100% 100%, 128px 128px; }
.fab-canvas { background-color: #241a22;
  background-image: linear-gradient(rgba(255, 240, 230, .12), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .45)), url(../img/canvas.webp);
  background-size: 100% 100%, 96px 96px; }

/* кнопки: ширина по тексту, стёжка золотой нитью, мягкий объём подушки */
.dm-btn { position: relative; width: auto; height: 44px; padding: 0 28px; display: flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-size: 20px; font-weight: 700; letter-spacing: 1px; color: #f6e8cc; white-space: nowrap; border: 0; border-radius: 10px;
  box-shadow: inset 0 2px 2px rgba(255, 235, 215, .3), inset 0 -3px 5px rgba(0, 0, 0, .5), 0 0 0 1.5px #12040c, 0 5px 0 #0a0306, 0 9px 16px rgba(0, 0, 0, .65);
  text-shadow: 0 2px 0 #12040c, 0 0 8px rgba(0, 0, 0, .5); }
.dm-btn::before { content: ""; position: absolute; inset: 4px; border: 1.5px dashed rgba(255, 214, 150, .62); border-radius: 7px; pointer-events: none; }
.dm-btn:active { transform: translateY(3px); box-shadow: inset 0 2px 2px rgba(255, 235, 215, .2), inset 0 -2px 4px rgba(0, 0, 0, .5), 0 0 0 1.5px #12040c, 0 2px 0 #0a0306; }
.dm-btn svg { flex-shrink: 0; filter: drop-shadow(0 1px 1px #000); }
.dm-btn span { pointer-events: none; }
.dm-sm { height: 38px; padding: 0 22px; font-size: 16px; letter-spacing: .3px; gap: 8px; }
.dm-sm::before { inset: 3px; }
.dm-all { color: #3a1606; text-shadow: 0 1px 0 rgba(255, 240, 200, .6);
  background-image: linear-gradient(rgba(255, 250, 230, .25), rgba(255, 255, 255, 0) 40%, rgba(80, 30, 0, .35)), url(../img/brocade.webp); background-size: 100% 100%, 128px 128px; }
.dm-all::before { border-color: rgba(110, 40, 10, .7); }
.dm-all svg { filter: drop-shadow(0 1px 0 rgba(255, 240, 200, .6)); }
.dm-reset { color: #ffa0a8; background-image: linear-gradient(rgba(255, 240, 230, .1), rgba(0, 0, 0, .45)), url(../img/canvas.webp); background-size: 100% 100%, 96px 96px; }
.dm-reset::before { border-color: rgba(255, 120, 130, .45); }
.dm-reset.dim { opacity: .55; }
.dm-danger, .dm-play { background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 220, 220, .12) 45%, rgba(255, 255, 255, 0) 60%),
  linear-gradient(rgba(255, 220, 220, .3), rgba(255, 255, 255, 0) 40%, rgba(40, 0, 6, .45)), url(../img/velvet.webp); background-size: 100% 100%, 100% 100%, 160px 160px; }

/* кнопка звука: круглая бархатная нашивка */
.dm-sound { position: absolute; right: 12px; top: 12px; width: 46px; height: 46px; border-radius: 50%; padding: 0; border: 0; display: flex; align-items: center; justify-content: center;
  background-image: radial-gradient(circle at 40% 30%, rgba(255, 220, 220, .3), rgba(0, 0, 0, .35) 75%), url(../img/velvet.webp); background-size: 100% 100%, 120px 120px;
  box-shadow: 0 0 0 1.5px #12040c, 0 4px 0 #0a0306, 0 0 14px rgba(255, 40, 80, .35); }
.dm-sound::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dashed rgba(255, 214, 150, .65); pointer-events: none; }
.dm-sound:active { transform: translateY(2px); }

/* колонна кнопок: все одной ширины — по самой широкой */
.dm-col { position: absolute; left: 0; right: 0; bottom: 16px; display: grid; grid-template-columns: max-content; justify-content: center; gap: 9px; }
.dm-playrow { position: relative; display: flex; margin-bottom: 3px; }
.dm-playrow .dm-play { flex: 1; }
.dm-play { background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 220, 220, .12) 45%, rgba(255, 255, 255, 0) 60%),
  linear-gradient(rgba(255, 220, 220, .3), rgba(255, 255, 255, 0) 40%, rgba(40, 0, 6, .45)), url(../img/velvet.webp); background-size: 100% 100%, 100% 100%, 160px 160px; }

.dm-play { min-width: 210px; height: 66px; padding: 0 34px; flex-direction: column; gap: 0; line-height: 1; border-radius: 12px; color: #fff; font-size: 30px; letter-spacing: 2px;
  text-shadow: 0 2px 0 #4a0008, 0 0 10px rgba(255, 220, 200, .4);
  box-shadow: inset 0 2px 2px rgba(255, 220, 220, .5), inset 0 -4px 6px rgba(40, 0, 6, .55), 0 0 0 1.5px #2a0006, 0 6px 0 #2a0006, 0 0 26px rgba(255, 30, 60, .55);
  animation: playPulse 2.2s ease-in-out infinite; }
.dm-play::before { border-color: rgba(255, 220, 160, .8); border-width: 2px; inset: 5px; border-radius: 8px; }
.dm-play small { margin-top: 4px; font-family: "Cormorant Garamond", Georgia, serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-style: italic; font-weight: 600; font-size: 14px; letter-spacing: .5px; color: #ffe2bf; text-shadow: 0 1px 0 #3a0008; pointer-events: none; }
.dm-play:active { transform: translateY(4px); }
@keyframes playPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
/* свечи: латунный подсвечник, оплывший воск, фитиль, живое пламя */
.candle { position: absolute; bottom: -10px; width: 30px; height: 86px; pointer-events: none; }
.dm-playrow .candle:first-child { left: -40px; } .dm-playrow .candle:last-child { right: -40px; }
.candle svg { display: block; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .7)); }
.candle::after { content: ""; position: absolute; left: -22px; top: -40px; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 200, 90, .5), rgba(255, 130, 30, .15) 55%, rgba(255, 120, 30, 0)); animation: glow 1.3s ease-in-out infinite alternate; }
.fl { position: absolute; left: 10px; top: -14px; width: 11px; height: 24px; transform-origin: 50% 100%; animation: flame .9s ease-in-out infinite alternate;
  border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%; background: radial-gradient(ellipse at 50% 80%, #fff 0, #fff2a8 25%, #ffb43a 55%, rgba(255, 90, 10, .85) 75%, rgba(255, 60, 0, 0) 100%);
  filter: drop-shadow(0 0 4px rgba(255, 170, 60, .9)); }
.fl b { position: absolute; left: 3.5px; bottom: 1px; width: 4px; height: 7px; border-radius: 50%; background: radial-gradient(ellipse at 50% 70%, #9ad8ff, rgba(60, 120, 255, .6) 60%, rgba(60, 120, 255, 0)); }
.dm-playrow .candle:last-child .fl { animation-delay: -.45s; animation-duration: 1.05s; }
@keyframes flame { 0% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(.92, 1.1) skewX(5deg); } 65% { transform: scale(1.04, .94) skewX(-4deg); } 100% { transform: scale(.97, 1.06) skewX(2deg); } }
@keyframes glow { from { opacity: .7; } to { opacity: 1; } }

/* игровой экран */
.g-cv { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
#cv { position: absolute; left: 0; top: 0; display: block; touch-action: none; }
.hud { pointer-events: none; }
.hud > button { pointer-events: auto; }
.hud-pause { position: absolute; right: 12px; top: 12px; width: 46px; height: 46px; border-radius: 50%; padding: 0; border: 0; display: flex; align-items: center; justify-content: center; color: #ffe9c8;
  background-image: radial-gradient(circle at 40% 30%, rgba(255, 220, 220, .3), rgba(0, 0, 0, .35) 75%), url(../img/velvet.webp); background-size: 100% 100%, 120px 120px;
  box-shadow: 0 0 0 1.5px #12040c, 0 4px 0 #0a0306; }
.hud-pause::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dashed rgba(255, 214, 150, .65); }
.hud-pause svg { position: relative; filter: drop-shadow(0 1px 1px #000); }
.hud-title { position: absolute; left: 50%; top: 74px; transform: translateX(-50%) translateY(-10px); padding: 12px 30px 14px; border-radius: 10px; text-align: center; white-space: nowrap;
  opacity: 0; transition: opacity .6s, transform .6s; box-shadow: inset 0 0 0 1.5px #12040c, 0 10px 24px rgba(0, 0, 0, .7); }
.hud-title::before { content: ""; position: absolute; inset: 5px; border: 1.5px dashed rgba(255, 214, 150, .6); border-radius: 7px; }
.hud-title.show { opacity: 1; transform: translateX(-50%); }
.hud-title b { display: block; font-size: 15px; letter-spacing: 4px; color: #e8c88a; }
.hud-title span { display: block; font-size: 34px; font-weight: 700; color: #ff5a6a; text-shadow: 0 2px 0 #2a0006, 0 0 14px rgba(255, 30, 60, .5); }
.hud-oil { position: absolute; left: 12px; top: 12px; height: 46px; padding: 0 14px 0 10px; border-radius: 10px; display: none; align-items: center; gap: 8px;
  box-shadow: inset 0 0 0 1.5px #12040c, inset 0 2px 2px rgba(255, 235, 215, .2), 0 6px 12px rgba(0, 0, 0, .6); }
.hud-oil::before { content: ""; position: absolute; inset: 4px; border: 1.5px dashed rgba(255, 214, 150, .5); border-radius: 7px; }
.hud-oil.show { display: flex; }
.hud-oil svg { position: relative; filter: drop-shadow(0 0 6px rgba(255, 170, 60, .7)); }
.oil-bar { position: relative; width: 132px; height: 14px; border-radius: 7px; background: #120406; box-shadow: inset 0 2px 3px #000, 0 1px 0 rgba(255, 220, 180, .2); overflow: hidden; }
#oil-fill { position: absolute; inset: 0; transform-origin: 0 50%; border-radius: 7px; transition: transform .3s linear;
  background: linear-gradient(#ffe7a0, #ffb43a 45%, #e06a10 80%, #8a3a06); box-shadow: 0 0 10px rgba(255, 160, 40, .7); }
.hud-oil.low #oil-fill { background: linear-gradient(#ff9a9a, #ff3a3a 45%, #a00010); animation: oilLow .5s ease-in-out infinite alternate; }
@keyframes oilLow { from { opacity: .55; } to { opacity: 1; } }
.hud-hint { position: absolute; left: 24px; right: 24px; top: 128px; text-align: center; font-family: "Cormorant Garamond", Georgia, serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-style: italic; font-weight: 600; font-size: 21px; line-height: 1.25; color: #fff2dc; text-shadow: 0 2px 4px #000, 0 0 12px #000; opacity: 0; transition: opacity .5s; }
.hud-hint.show { opacity: 1; }
.hud-take { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); display: none; flex-direction: row; height: 58px; font-size: 26px; gap: 10px; animation: takePulse 1s ease-in-out infinite; }
.hud-take.show { display: flex; }
.hud-take:active { transform: translateX(-50%) translateY(3px); }
@keyframes takePulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
.hud-skip { position: absolute; right: 14px; bottom: 22px; display: none; }
.hud-skip.show { display: flex; }
.hud-soon, .hud-menu { display: none; }
.soon .hud-soon { display: block; position: absolute; left: 30px; right: 30px; top: 170px; text-align: center; font-family: "Cormorant Garamond", Georgia, serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-style: italic; font-size: 19px; color: #d9c8e6; }
.soon .hud-menu { display: flex; position: absolute; left: 50%; top: 230px; transform: translateX(-50%); }
.soon .hud-menu:active { transform: translateX(-50%) translateY(3px); }
.soon .hud-title { opacity: 1; transform: translateX(-50%); }

/* окна: дамаст со стёжкой и золотым кантом */
.overlay { background: rgba(4, 0, 10, .74); }
.panel { width: 300px; padding: 24px 22px 22px; align-items: center; border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px #12040c, inset 0 2px 3px rgba(255, 235, 215, .25), inset 0 -4px 8px rgba(0, 0, 0, .5), 0 0 0 3px #8a6230, 0 0 40px rgba(200, 0, 40, .35), 0 16px 40px #000; }
.panel::before { content: ""; position: absolute; inset: 7px; border: 1.5px dashed rgba(255, 214, 150, .55); border-radius: 8px; pointer-events: none; }
.panel-title { font-size: 31px; font-weight: 700; text-align: center; line-height: 1.05; margin-bottom: 4px;
  background: linear-gradient(#ffe0b0, #ff4a5a 55%, #b0001c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #1a0004); }
.res-line { font-family: "Cormorant Garamond", Georgia, serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-style: italic; font-size: 18px;
  line-height: 1.3; text-align: center; color: #e2d4ea; margin-bottom: 6px; text-shadow: 0 1px 2px #000; }
.panel .dm-play { height: 56px; font-size: 26px; }
.lb-row { border-radius: 4px; background: rgba(255, 255, 255, .06); }
.lb-row.top-1 { background: #6a4a10; } .lb-row.top-2 { background: #4a4a5a; } .lb-row.top-3 { background: #5a2a10; }
.lb-row.me { outline: 1px solid #ffcf8a; }
.lb-avatar { background: #3a1a40; }
#toast { bottom: 26px; padding: 11px 20px; border-radius: 9px; box-shadow: inset 0 0 0 1.5px #12040c, 0 0 0 2px #8a6230, 0 8px 20px #000; font-size: 18px; color: #f3e3c0; text-shadow: 0 1px 2px #000; }

/* горизонтальный экран: замок слева, справа — тканевое знамя с названием и кнопками */
.dm-banner { display: none; }
.horiz .dm-banner { display: block; position: absolute; top: 0; right: 16px; width: 312px; height: 352px; pointer-events: none; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .8)); }
.dm-cloth { position: absolute; inset: 6px 0 0; clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
  background-color: #2a0c22; background-image: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(255, 230, 255, .06) 30%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .3)),
    linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .25)), url(../img/damask.webp); background-size: 100% 100%, 100% 100%, 120px 120px; }
.dm-stitch { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.dm-rod { position: absolute; left: -6px; right: -6px; top: 0; height: 11px; border-radius: 6px; background: linear-gradient(#fff0b8, #d9a24a 45%, #7a4a10);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .7); }
.dm-rod::before, .dm-rod::after { content: ""; position: absolute; top: -4px; width: 19px; height: 19px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4c8, #c98a2e 55%, #5a3008); }
.dm-rod::before { left: -4px; } .dm-rod::after { right: -4px; }
.dm-tassel { position: absolute; left: 50%; bottom: -26px; width: 14px; height: 30px; margin-left: -7px; border-radius: 6px 6px 3px 3px;
  background: repeating-linear-gradient(90deg, #c98a2e 0 2px, #ffe29a 2px 3px, #8a5a1a 3px 4px); box-shadow: 0 -6px 0 -2px #d9a24a; }
.horiz .dm-title { left: auto; right: 16px; width: 312px; top: 22px; }
.horiz .dm-title .t1 { font-size: 21px; letter-spacing: 7px; }
.horiz .dm-title .t2 { font-size: 39px; }
.horiz .dm-title .drips { width: 230px; height: 16px; }
.horiz .orn { width: 38px; }
.horiz .dm-sound { right: auto; left: 12px; }
.horiz .dm-col { left: auto; right: 16px; width: 312px; bottom: auto; top: 122px; grid-template-columns: 132px 132px; justify-content: center; column-gap: 12px; row-gap: 10px; }
.horiz .dm-playrow { grid-column: 1 / -1; justify-self: center; width: 224px; margin-bottom: 4px; }
.horiz .dm-play { height: 56px; font-size: 26px; }
.horiz .dm-play small { font-size: 12px; margin-top: 2px; }
.horiz .dm-col > .dm-btn { width: 132px; height: 44px; padding: 0 10px; font-size: 17px; gap: 6px; letter-spacing: 0; }
.horiz .dm-col > .dm-btn svg { width: 17px; height: 17px; }
.horiz .dm-col > .dm-btn span { min-width: 0; white-space: normal; text-align: center; line-height: 1.05; overflow-wrap: normal; }
.horiz .candle { transform: scale(.74); transform-origin: 50% 100%; }
.horiz .dm-playrow .candle:first-child { left: -36px; } .horiz .dm-playrow .candle:last-child { right: -36px; }
.horiz .hud-title { top: 34px; }
.horiz .hud-hint { top: 64px; font-size: 19px; left: 120px; right: 120px; }
.horiz .hud-take { bottom: 40px; }
.horiz .soon .hud-soon { top: 120px; }
.horiz .soon .hud-menu { top: 170px; }
.horiz .hud-skip { bottom: 16px; }