* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #07060a; user-select: none; -webkit-user-select: none; }
body { font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; color: #e8d9b0; }

#stage {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #1a1510 0%, #07060a 75%);
}
#frame {
  position: relative;
  width: min(calc(100vw - 16px), calc((100vh - 16px) * 16 / 9));
  aspect-ratio: 16 / 9;
  padding: clamp(6px, 1.1vmin, 14px);
  border-radius: 10px;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.18) 0 2px, transparent 2px 5px),
    linear-gradient(135deg, #5b4a34 0%, #2d261d 22%, #6d5b3c 45%, #2a231a 62%, #5a4a30 82%, #2b241b 100%);
  box-shadow:
    0 0 0 1px #0b0906,
    0 0 0 3px #a8833f,
    0 0 0 4px #20190f,
    0 18px 60px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(255,220,140,.35),
    inset 0 0 12px rgba(0,0,0,.8);
}
#viewport {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 4px;
  background: #000;
  box-shadow: inset 0 0 0 1px #000, 0 0 0 2px #7a6134, 0 0 0 3px #15100a;
  font-size: clamp(12px, 2vmin, 22px);
}
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#gl.dragging { cursor: grabbing; }
#gl.hover { cursor: pointer; }

.hidden { display: none !important; }

/* ----- Screens ----- */
.screen { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; }

#preloader {
  background:
    radial-gradient(ellipse at center, rgba(90,60,25,.35), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #1c150e, #0b0805);
  transition: opacity .8s ease;
}
#preloader.fade { opacity: 0; pointer-events: none; }
.pre-inner { text-align: center; width: 46%; }
.pre-title {
  font-size: 2.6em; letter-spacing: .05em; font-weight: bold; color: #e9c77a; white-space: nowrap;
  text-shadow: 0 1px 0 #fff3c8, 0 2px 0 #8a6424, 0 3px 0 #5b3f12, 0 6px 14px rgba(0,0,0,.9);
  margin-bottom: 1.2em;
}
.pre-title span { display: block; font-size: .42em; letter-spacing: .6em; color: #bba678; font-style: italic; text-shadow: 0 2px 4px #000; margin-top: .3em; }
.bar { height: 1em; border-radius: 1em; padding: 2px; background: #120d07; box-shadow: 0 0 0 1px #8b6c35, inset 0 2px 5px #000; }
#barFill { height: 100%; width: 0%; border-radius: 1em; background: linear-gradient(180deg, #ffe39a, #c28b2c 55%, #7a5215); box-shadow: 0 0 10px rgba(255,190,80,.6); transition: width .15s linear; }
#preText { margin-top: .9em; font-style: italic; color: #9d8a64; font-size: .9em; }

#menu {
  flex-direction: column;
  background: radial-gradient(ellipse at center, rgba(10,8,5,.35) 0%, rgba(5,4,2,.85) 80%);
}
.menu-inner { text-align: center; }
#menu h1 {
  font-size: 4.4em; line-height: 1.02; letter-spacing: .03em; font-variant: small-caps;
  background: linear-gradient(180deg, #fff4c4 0%, #f0c96a 35%, #b07a22 60%, #f3d489 80%, #8e5f19 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #4a3108) drop-shadow(0 4px 0 #2a1b04) drop-shadow(0 8px 14px rgba(0,0,0,.9));
}
#menu h2 { margin-top: .6em; font-size: 1.35em; font-weight: normal; font-style: italic; color: #d8c49a; text-shadow: 0 2px 6px #000; letter-spacing: .08em; }
.menu-btns { margin-top: 2em; display: flex; flex-direction: column; gap: .7em; align-items: center; }
.mbtn {
  font-family: inherit; font-size: 1.1em; color: #f5e3b5; cursor: pointer; min-width: 15em;
  padding: .6em 1.6em; border-radius: 4px; letter-spacing: .05em;
  background: linear-gradient(180deg, #5d4527 0%, #3a2a16 50%, #2a1e0f 100%);
  border: 1px solid #0e0a05;
  box-shadow: 0 0 0 2px #9c783a, 0 0 0 3px #1c140a, inset 0 1px 0 rgba(255,230,170,.35), 0 5px 12px rgba(0,0,0,.7);
  text-shadow: 0 1px 2px #000; transition: transform .12s, filter .12s;
}
.mbtn:hover { filter: brightness(1.25); transform: translateY(-1px); }
.mbtn:active { transform: translateY(1px); }
#btnStart { font-size: 1.3em; color: #ffe9a8; }

/* ----- Level selector ----- */
.lvl-box { position: relative; z-index: 3; }
.lvl-btn { display: flex; align-items: center; justify-content: center; gap: .8em; }
.lvl-btn .caret { font-size: .8em; opacity: .8; transition: transform .2s; }
.lvl-box.open .lvl-btn .caret { transform: rotate(180deg); }
.lvl-list {
  position: absolute; left: 50%; top: calc(100% + .5em); transform: translate(-50%, -.4em);
  min-width: 100%; display: flex; flex-direction: column; padding: .35em; border-radius: 4px;
  background: linear-gradient(180deg, #2e2213, #1a120a);
  box-shadow: 0 0 0 2px #9c783a, 0 0 0 3px #1c140a, 0 10px 24px rgba(0,0,0,.85);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.lvl-box.open .lvl-list { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.lvl-item {
  font-family: inherit; font-size: 1em; color: #f0dfb2; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: .7em; padding: .45em .8em; border-radius: 3px; text-align: left; white-space: nowrap;
}
.lvl-item:hover:not(:disabled) { background: rgba(240,201,106,.14); }
.lvl-item.cur { color: #ffe9a8; background: rgba(240,201,106,.1); box-shadow: inset 2px 0 0 #f0c96a; }
.lvl-item.locked { color: #7a6a4c; cursor: not-allowed; }
.lvl-item .ico { width: 1.3em; text-align: center; }
.lvl-item .nm { flex: 1; }
.hud-lvl { pointer-events: auto; }
.hud-lvl .lvl-btn { min-width: 0; font-size: .95em; padding: .4em 1em; }
.hud-lvl .lvl-list { left: auto; right: 0; transform: translateY(-.4em); font-size: .95em; }
.hud-lvl.open .lvl-list { transform: translateY(0); }
.menu-lvl { position: absolute; top: 1.2em; right: 1.4em; }
.menu-lvl .lvl-btn { min-width: 0; }
.menu-lvl .lvl-list { left: auto; right: 0; transform: translateY(-.4em); }
.menu-lvl.open .lvl-list { transform: translateY(0); }
.lvl-item .soon { font-size: .75em; font-style: italic; color: #c9a45a; border: 1px solid rgba(201,164,90,.5); border-radius: 3px; padding: .05em .4em; }
.credit {
  position: absolute; left: 1.6em; bottom: 3.1em; font-size: 1em; color: #b9a57a; letter-spacing: .12em; font-style: italic;
  padding: .45em 1em; border-radius: 3px; background: rgba(12,8,4,.55); box-shadow: 0 0 0 1px rgba(168,131,63,.55);
  text-shadow: 0 2px 4px #000;
}
.credit b { font-style: normal; color: #f0c96a; letter-spacing: .08em; }

.weg-link { position: absolute; right: 1.6em; bottom: 1.2em; display: block; transform-origin: 100% 100%; transition: transform .2s, filter .2s; }
.weg-link img { display: block; width: 18em; height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.95)) drop-shadow(0 0 14px rgba(120,190,255,.25)); }
.weg-link:hover { transform: scale(1.06); filter: brightness(1.15); }

/* ----- Animation logo Slyness ----- */
#intro { background: radial-gradient(ellipse at center, #1c140c 0%, #000 75%); cursor: pointer; z-index: 25; }
#intro.out { animation: introOut .9s ease forwards; }
@keyframes introOut { to { opacity: 0; } }
.intro-logo {
  position: relative; height: 72%; aspect-ratio: 791 / 590; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 2px #a8833f, 0 0 0 4px #1b140a, 0 20px 60px rgba(0,0,0,.9), 0 0 80px rgba(255,170,70,.25);
  animation: introIn 1.4s cubic-bezier(.2,.9,.25,1.15) both, introFloat 3s ease-in-out 1.4s infinite alternate;
}
.intro-logo img { width: 100%; height: 100%; display: block; animation: introReveal 1.6s ease both; }
@keyframes introIn { from { transform: scale(.55) rotate(-4deg); opacity: 0; filter: blur(12px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes introReveal { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes introFloat { to { transform: scale(1.03); } }
.shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,245,210,.55) 50%, transparent 65%);
  transform: translateX(-120%); animation: shine 1.1s ease-in-out 1.3s both;
}
@keyframes shine { to { transform: translateX(120%); } }

/* ----- HUD ----- */
#hud { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: .7em .9em; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.6), transparent); }
.hud-left { display: flex; gap: .45em; pointer-events: auto; }
.hbtn {
  width: 2.3em; height: 2.3em; font-size: 1.05em; border-radius: 50%; cursor: pointer; color: #f1dca4; font-family: inherit;
  background: radial-gradient(circle at 40% 35%, #6a5230, #2b1f10 75%);
  border: 1px solid #0c0804; box-shadow: 0 0 0 2px #8e6d35, 0 3px 8px rgba(0,0,0,.7);
}
.hbtn:hover { filter: brightness(1.3); }
.hbtn.off { opacity: .45; }
#timer {
  position: absolute; left: 50%; transform: translateX(-50%); font-size: 1.5em; letter-spacing: .12em; color: #ffe2a0;
  padding: .15em .9em; border-radius: 3px; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #2d2213, #150f07); box-shadow: 0 0 0 1px #000, 0 0 0 2px #8e6d35, 0 3px 8px #000;
  text-shadow: 0 0 6px rgba(255,190,80,.6);
}

#btnView {
  position: absolute; left: .9em; bottom: 2.3em; z-index: 10; font-family: inherit; font-size: .95em; cursor: pointer;
  color: #f1dca4; padding: .4em .9em; border-radius: 3px;
  background: linear-gradient(180deg, #4d3a20, #22180b); border: 1px solid #000; box-shadow: 0 0 0 2px #8e6d35, 0 3px 8px #000;
}
#btnView:hover { filter: brightness(1.3); }
#wegHud { position: absolute; right: .9em; bottom: .8em; z-index: 10; display: block; transform-origin: 100% 100%; transition: transform .2s, filter .2s; }
#wegHud img { display: block; height: 5em; width: auto; filter: drop-shadow(0 3px 8px rgba(0,0,0,.95)); }
#wegHud:hover { transform: scale(1.05); filter: brightness(1.15); }

#toast {
  position: absolute; left: 50%; bottom: 6.2em; transform: translate(-50%, 10px); z-index: 11; opacity: 0; pointer-events: none;
  max-width: 75%; text-align: center; font-style: italic; font-size: 1.6em; line-height: 1.35; color: #f6e6bd; padding: .5em 1.2em; border-radius: 3px;
  background: rgba(18,12,6,.85); box-shadow: 0 0 0 1px #6f5429, 0 4px 14px #000; transition: opacity .3s, transform .3s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ----- Inventaire ----- */
#inventory {
  position: absolute; left: 50%; bottom: .8em; transform: translateX(-50%); z-index: 10;
  display: flex; gap: .7em; padding: .5em .8em; border-radius: 6px;
  background: linear-gradient(180deg, rgba(40,28,14,.92), rgba(15,10,5,.95));
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #6d5429, 0 6px 16px rgba(0,0,0,.8);
}
.slot, .vslot {
  position: relative; width: 4em; height: 4em; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #2c2419, #0d0a06 75%);
  box-shadow: 0 0 0 2px #1a130a, 0 0 0 4px #7b6a55, 0 0 0 5px #231a0e, inset 0 3px 8px #000;
  transition: box-shadow .2s, transform .15s;
}
.slot::before, .vslot::before { /* clous tribaux */
  content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, #cfb88a 2px, transparent 3px),
    radial-gradient(circle at 50% 100%, #cfb88a 2px, transparent 3px),
    radial-gradient(circle at 0% 50%, #cfb88a 2px, transparent 3px),
    radial-gradient(circle at 100% 50%, #cfb88a 2px, transparent 3px);
}
.slot img, .vslot img { position: absolute; inset: 8%; width: 84%; height: 84%; pointer-events: none; filter: drop-shadow(0 2px 3px #000); }
.slot:hover { transform: translateY(-2px); }
.slot.sel { box-shadow: 0 0 0 2px #1a130a, 0 0 0 4px #ffd36a, 0 0 0 5px #231a0e, 0 0 18px 6px rgba(255,200,90,.75), inset 0 0 14px rgba(255,200,90,.45); }
.slot.pop { animation: pop .5s ease; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ----- Victoire ----- */
#victory { background: rgba(0,0,0,.45); animation: fadein .8s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.parchment {
  position: relative; width: 52%; padding: 2.2em 2.4em 2em; text-align: center; color: #3b240d;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(120,70,20,.35), transparent 55%),
    radial-gradient(ellipse at center, #eed9a6 0%, #d9b877 65%, #a57a3d 100%);
  border-radius: 6px 10px 8px 12px / 12px 6px 10px 8px;
  box-shadow: 0 0 0 2px #5a3a17, 0 0 0 5px rgba(0,0,0,.2), 0 20px 50px rgba(0,0,0,.9), inset 0 0 40px rgba(110,60,15,.55);
  animation: unroll .9s cubic-bezier(.2,.9,.3,1.2);
}
.parchment::before, .parchment::after {
  content: ""; position: absolute; left: -3%; right: -3%; height: 1.3em; border-radius: 1em;
  background: linear-gradient(180deg, #8b5d2a, #d1a764 40%, #6d451b); box-shadow: 0 3px 6px rgba(0,0,0,.6);
}
.parchment::before { top: -.65em; } .parchment::after { bottom: -.65em; }
@keyframes unroll { from { transform: scaleY(.05); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.parchment h3 { font-size: 1.7em; line-height: 1.2; color: #5a2a08; text-shadow: 0 1px 0 rgba(255,240,200,.7); }
.vtime { margin: .7em 0 1em; font-size: 1.2em; font-style: italic; }
#vSlots { display: flex; justify-content: center; gap: 1em; margin-bottom: 1.4em; }
.vslot { cursor: default; }
.vslot.keep { box-shadow: 0 0 0 2px #1a130a, 0 0 0 4px #e7ecf2, 0 0 0 5px #231a0e, 0 0 16px 4px rgba(220,235,255,.7), inset 0 3px 8px #000; }
.parchment .mbtn { min-width: 0; font-size: 1em; }
#btnToMenu { display: block; margin: .9em auto 0; font-size: .85em; padding: .4em 1.2em; }
#vNote { margin-top: 1em; font-style: italic; font-size: .95em; min-height: 1.2em; }

/* ----- Triomphe final ----- */
#finale { z-index: 25; background: radial-gradient(ellipse at center, rgba(255,210,140,.25), rgba(20,8,0,.7)); animation: fadein 1.4s ease; }
#rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.parchment.grand { width: 58%; max-width: 46em; padding: 2em 2.6em 1.8em; }
.f-sun {
  width: 3.4em; height: 3.4em; margin: -.4em auto .5em; border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 0 22%, #ffc640 40%, rgba(255,160,40,0) 70%);
  box-shadow: 0 0 24px 8px rgba(255,190,70,.6); animation: sunpulse 2.4s ease-in-out infinite;
}
@keyframes sunpulse { 50% { transform: scale(1.12) rotate(20deg); box-shadow: 0 0 34px 14px rgba(255,190,70,.75); } }
.parchment.grand h3 { font-size: 1.75em; letter-spacing: .06em; }
.f-msg { margin: .7em auto 1em; max-width: 34em; font-size: 1.05em; font-style: italic; line-height: 1.4; }
#fTimes { margin: 0 auto 1em; border-collapse: collapse; min-width: 70%; font-size: .98em; }
#fTimes td { padding: .22em .8em; border-bottom: 1px solid rgba(90,58,23,.35); text-align: left; }
#fTimes td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: bold; }
#fTimes tr.total td { border-bottom: 0; border-top: 2px solid #7a4a10; font-size: 1.12em; color: #5a2a08; padding-top: .45em; }
.f-credit { margin: .2em 0 1.1em; font-size: .95em; letter-spacing: .03em; }
.mbtn.gold {
  color: #3a2004; text-shadow: 0 1px 0 rgba(255,245,200,.7);
  background: linear-gradient(180deg, #fff0b0 0%, #e8b440 45%, #b07818 100%);
  box-shadow: 0 0 0 2px #7a4a10, 0 0 0 3px #2a1804, inset 0 1px 0 rgba(255,255,255,.7), 0 0 18px rgba(255,200,80,.6), 0 5px 12px rgba(0,0,0,.6);
  animation: goldglow 2.2s ease-in-out infinite;
}
@keyframes goldglow { 50% { box-shadow: 0 0 0 2px #7a4a10, 0 0 0 3px #2a1804, inset 0 1px 0 rgba(255,255,255,.7), 0 0 30px rgba(255,210,90,.95), 0 5px 12px rgba(0,0,0,.6); } }
@media (max-width: 760px) { .parchment.grand { width: 88%; padding: 1.4em 1.2em; font-size: .85em; } }

/* ----- Transition entre niveaux ----- */
#fader { z-index: 30; background: #000; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
#fader.on { opacity: 1; pointer-events: auto; }
.fader-t {
  text-align: center; font-size: 2.6em; letter-spacing: .12em; font-variant: small-caps; color: #cfdcff;
  text-shadow: 0 0 18px rgba(140,170,255,.7), 0 3px 6px #000;
}
.fader-t span { display: block; margin-top: .3em; font-size: .6em; font-style: italic; letter-spacing: .08em; color: #aebbe0; font-variant: normal; }

@media (max-width: 760px) {
  #wegHud img { height: auto; width: 7.5em; }
  #btnView { font-size: .85em; padding: .35em .6em; }
}

/* ----- Settings ----- */
#settings { z-index: 30; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .3s ease; }
#settings.show { opacity: 1; }
#menu .menu-inner, #menu .credit, #menu .weg-link, #menu .menu-lvl { transition: opacity .3s ease; }
#menu.dim .menu-inner, #menu.dim .credit, #menu.dim .weg-link, #menu.dim .menu-lvl { opacity: 0; pointer-events: none; }
.set-panel {
  position: relative; width: min(30em, 88%); padding: 1.8em 2.2em 1.6em; border-radius: 6px;
  background: rgba(12,10,8,.88); backdrop-filter: blur(4px);
  box-shadow: 0 0 0 1px #6f5428, 0 0 0 4px rgba(12,10,8,.9), 0 0 0 5px #3a2b14, 0 18px 50px rgba(0,0,0,.85);
  transform: translateY(10px) scale(.98); transition: transform .3s ease;
}
#settings.show .set-panel { transform: none; }
.set-panel h3 {
  text-align: center; font-size: 2.1em; font-weight: normal; font-variant: small-caps; letter-spacing: .08em; margin-bottom: .9em;
  background: linear-gradient(180deg, #fff1c6 0%, #e7c57a 50%, #b58a3c 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.9));
}
.set-row { display: grid; grid-template-columns: 10em 1fr 2.6em; align-items: center; gap: .9em; padding: .55em 0; border-bottom: 1px solid rgba(200,160,90,.12); }
.set-row label { color: #e8dcc0; letter-spacing: .03em; }
.set-row output { color: #d9b86c; text-align: right; font-variant-numeric: tabular-nums; font-size: .9em; }
.set-row input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; cursor: pointer; outline: none;
  background: linear-gradient(90deg, #e0b457 0%, #b8862f var(--p, 50%), #2a2216 var(--p, 50%));
  box-shadow: inset 0 1px 2px #000, 0 0 0 1px #3d2f18;
}
.set-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c0, #e2b04e 55%, #8a5f1a); box-shadow: 0 0 0 1px #2a1c08, 0 2px 5px rgba(0,0,0,.8);
}
.set-row input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c0, #e2b04e 55%, #8a5f1a); box-shadow: 0 0 0 1px #2a1c08, 0 2px 5px rgba(0,0,0,.8);
}
.set-row select {
  grid-column: 2 / 4; font-family: inherit; font-size: 1em; color: #f0dfb2; cursor: pointer;
  padding: .35em 2em .35em .7em; border-radius: 3px; border: 1px solid #6f5428; outline: none;
  -webkit-appearance: none; appearance: none;
  background: #1a140c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23d9b86c'/%3E%3C/svg%3E") no-repeat right .7em center;
}
.set-row select:focus { border-color: #d9b86c; }
.set-row select option { background: #1a140c; color: #f0dfb2; }
.set-actions { display: flex; gap: .8em; justify-content: center; margin-top: 1.4em; }
.sbtn {
  font-family: inherit; font-size: 1em; letter-spacing: .04em; color: #f1e2bd; cursor: pointer; padding: .55em 1.3em; border-radius: 4px;
  background: linear-gradient(180deg, #4a3d30, #2c241b); border: 1px solid #120d08;
  box-shadow: 0 0 0 1px #6b5a44, inset 0 1px 0 rgba(255,230,190,.15), 0 4px 10px rgba(0,0,0,.6);
  text-shadow: 0 1px 2px #000; transition: filter .12s, transform .12s;
}
.sbtn:hover { filter: brightness(1.2); transform: translateY(-1px); }
.sbtn.danger { background: linear-gradient(180deg, #7a1d17, #45100c); box-shadow: 0 0 0 1px #9c3a2c, inset 0 1px 0 rgba(255,190,170,.18), 0 4px 10px rgba(0,0,0,.6); }
.set-confirm {
  position: absolute; inset: 0; border-radius: 6px; background: rgba(8,6,4,.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2em; text-align: center;
}
.set-confirm p { font-size: 1.15em; color: #efe0bc; }

.menu-inner h1 .h1-sub { display: block; font-size: 0.48em; letter-spacing: 0.12em; margin-top: 0.35em; opacity: 0.9; }