/* DUBBELSPEL official visual identity: two-tone wordmark and original mask. */
.brand-masked{display:inline-flex;align-items:center;gap:0;white-space:nowrap;line-height:1.1;letter-spacing:-.055em}
.brand-masked img{width:clamp(26px,4.5vw,43px);height:clamp(31px,5.2vw,49px);object-fit:contain;margin-right:7px;filter:drop-shadow(0 2px 7px #0009)}
.brand-light{color:#f1d5c3!important}.brand-red{color:#b74c51!important}
.forest-brand-logo{display:block;width:100%;max-width:465px;height:auto;margin:0 auto 19px;object-fit:contain;mix-blend-mode:lighten}
.forest-main:has(.forest-brand-logo){padding-top:17px}
.forest-main:has(.forest-brand-logo) .forest-menu{margin-top:6px}
.forest-modal-dialog .ritual-form h2 .brand-light,.forest-modal-dialog .ritual-form h2 .brand-red{white-space:nowrap}
@media(max-width:600px){.forest-brand-logo{margin-bottom:13px}.forest-main:has(.forest-brand-logo){padding:14px 13px 24px}.brand-masked img{width:26px;height:32px;margin-right:5px}}

/* Start screen: let the red haze dissolve into the surrounding dark surface.
   Keep the approved mask, wordmark and tagline image unchanged. */
.forest-main:has(.forest-brand-logo){isolation:isolate;background:linear-gradient(180deg,#10090df5 0%,#100a0ff5 58%,#100b10fa 100%)}
.forest-main:has(.forest-brand-logo)::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-12%;right:-12%;top:-5%;height:78%;width:auto;bottom:auto;background:radial-gradient(ellipse at 50% 37%,#a5232730 0%,#781a2021 34%,transparent 74%);filter:blur(15px)}
.forest-brand-logo{-webkit-mask-image:radial-gradient(ellipse 78% 75% at 50% 48%,#000 55%,#000d 68%,transparent 100%);mask-image:radial-gradient(ellipse 78% 75% at 50% 48%,#000 55%,#000d 68%,transparent 100%);mix-blend-mode:screen}
@media(max-width:600px){.forest-main:has(.forest-brand-logo)::before{top:0;height:65%;filter:blur(10px)}}

/* Transparent artwork: no rectangular JPG backdrop or hard CSS masking. */
.forest-brand-logo{mix-blend-mode:normal!important;mask-image:none!important;-webkit-mask-image:none!important;position:relative;z-index:1}
.forest-main:has(.forest-brand-logo){background:radial-gradient(ellipse 88% 56% at 50% 23%,rgba(105,17,29,.20),transparent 82%),linear-gradient(180deg,#160d12,#100b10)!important}
.forest-main:has(.forest-brand-logo)::before{background:radial-gradient(ellipse at 50% 38%,rgba(138,21,31,.16),transparent 75%);filter:blur(24px)}


/* Landing screen: integrated artwork from the approved mockup.
   Do not use the old rectangular JPG or the previous alpha-extracted logo. */
.forest-main:has(.forest-brand-logo){
  width:min(94vw, 680px)!important;
  padding:18px 16px 30px!important;
  background:radial-gradient(ellipse 95% 58% at 50% 27%,rgba(103,14,24,.19),transparent 78%),#0b0508!important;
  overflow:visible!important;
  isolation:isolate;
}
.forest-main:has(.forest-brand-logo)::before{
  content:""!important;position:absolute!important;inset:-15% -5% auto!important;
  height:83%!important;width:auto!important;z-index:-1!important;
  background:radial-gradient(ellipse at center,rgba(121,14,25,.32),transparent 72%)!important;
  filter:blur(28px)!important;pointer-events:none!important;
}
.forest-brand-logo{
  display:block!important;width:100%!important;max-width:none!important;
  height:auto!important;margin:0 auto 8px!important;
  object-fit:contain!important;mix-blend-mode:normal!important;
  mask-image:none!important;-webkit-mask-image:none!important;
}
.forest-main:has(.forest-brand-logo) .forest-menu{
  max-width:430px!important;width:79%!important;gap:13px!important;margin:0 auto!important;
}
.forest-main:has(.forest-brand-logo) .forest-menu button{
  background:linear-gradient(180deg,#351419,#180a0e)!important;
  border:1px solid #a65e43!important;
  box-shadow:inset 0 0 0 2px #13080b,0 3px 16px #000a!important;
  font-weight:bold!important;
}
.forest-main:has(.forest-brand-logo) .forest-menu button:first-child{
  background:linear-gradient(180deg,#9e3337,#421016)!important;
}
.forest-main:has(.forest-brand-logo) .forest-menu button:hover{
  filter:brightness(1.2)!important;
}
@media(max-width:600px){
 .forest-main:has(.forest-brand-logo){width:94vw!important;padding:12px 10px 22px!important}
 .forest-main:has(.forest-brand-logo) .forest-menu{width:76%!important;gap:10px!important}
 .forest-main:has(.forest-brand-logo) .forest-menu button{font-size:18px!important;padding:13px 8px!important}
}

/* v6: one symmetric frame, responsive centered create-game modal */
.forest-main:has(.forest-brand-logo)::after{content:none!important;display:none!important}
.forest-main:has(.forest-brand-logo)::before{left:-5%!important;right:-5%!important;width:auto!important}
.forest-main:has(.forest-brand-logo){box-sizing:border-box!important}
@media(max-width:600px){
.forest-main:has(.forest-brand-logo){width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;margin:0!important;padding:12px 10px 22px!important;border:1px solid #98664f!important}
.forest-modal{box-sizing:border-box!important;width:100vw!important;max-width:100vw!important;padding:12px!important;left:0!important;right:0!important}
.forest-modal-dialog:has(.ritual-form){box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0 auto!important;overflow-x:hidden!important}
.forest-modal-dialog .ritual-form{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;padding:24px 18px!important}
.forest-modal-dialog .ritual-form h2{font-size:clamp(23px,5.8vw,36px)!important;line-height:1.18!important;max-width:100%!important;overflow-wrap:break-word!important;text-align:center!important;padding:0 12px!important}
.forest-modal-dialog .ritual-form h2 .brand-light,.forest-modal-dialog .ritual-form h2 .brand-red{white-space:normal!important}
}

/* BTDlayout v1: only the visual theme changes; standard game controls remain interactive. */
.forest-main:has(.forest-brand-logo){
 background:radial-gradient(ellipse 105% 80% at 50% 38%,#5c101c88 0%,#210a10 62%,#0b0508 100%)!important;
 border-color:#a87740!important;
 box-shadow:inset 0 0 0 3px #12080b,0 0 28px #080204aa!important;
}
.forest-main:has(.forest-brand-logo)::after{display:none!important;content:none!important}
.forest-main:has(.forest-brand-logo) .forest-menu{width:79%!important;max-width:430px!important;gap:13px!important;margin:2px auto 0!important}
.forest-main:has(.forest-brand-logo) .forest-menu button{
 border:1px solid #c28c4b!important;
 box-shadow:inset 0 0 0 2px #18090d,0 5px 15px #0009!important;
 color:#f5dcc1!important;
 background:linear-gradient(180deg,#43171b,#18080c)!important;
}
.forest-main:has(.forest-brand-logo) .forest-menu button:first-child{
 background:linear-gradient(180deg,#a4272d,#4c0b13)!important;
}
.forest-brand-logo{width:100%!important;max-width:none!important;margin:0 auto 2px!important}
@media(max-width:600px){
 .forest-main:has(.forest-brand-logo){width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;margin:0!important;padding:12px 10px 22px!important}
 .forest-main:has(.forest-brand-logo) .forest-menu{width:76%!important;gap:10px!important}
 .forest-main:has(.forest-brand-logo) .forest-menu button{font-size:18px!important;padding:13px 8px!important}
}

/* BTDlayout v2: dark, integrated background, consistent with Standardlayout. */
.forest-main:has(.forest-brand-logo){background:radial-gradient(ellipse 82% 47% at 50% 26%,rgba(95,13,22,.19),transparent 85%),#0b0609!important;border-color:#aa7948!important;box-shadow:inset 0 0 0 2px #10090a,0 0 18px #050203a6!important}
.forest-main:has(.forest-brand-logo)::before{background:radial-gradient(ellipse at center,rgba(90,10,21,.15),transparent 72%)!important;filter:blur(34px)!important}
.forest-brand-logo{margin-bottom:7px!important}