/* MOMENTO GAME NIGHT V5
   Presentation only. Game mechanics, scripts, and card data are unchanged.
   Live HTML controls remain accessible; decorative room objects are layered
   behind all cards/buttons and have pointer-events:none.
*/
:root {
  --fire:#ff6a00;
  --fire-light:#ffae4a;
  --cream:#fffbf4;
  --muted:#d1c8c1;
  --raised:#1c1b1d;
  --shadow:0 14px 35px #000a;
}
html,body {background:#0b0808;color:#fffaf3;overflow-x:hidden;}
body {isolation:isolate;min-height:100vh;}
body::before {
  content:"";z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 44% 19% at 5% 30%,rgba(223,87,13,.18),transparent 85%),
    radial-gradient(ellipse 55% 16% at 96% 26%,rgba(234,90,16,.18),transparent 88%),
    radial-gradient(ellipse 95% 22% at 48% 87%,rgba(187,67,10,.16),transparent 95%),
    linear-gradient(90deg,#190e0a 0%,#080707 18%,#0b0909 50%,#080707 82%,#190e0a 100%) !important;
  opacity:1!important;
  filter:none!important;
  background-size:cover;
}
body::after{content:"";z-index:0;pointer-events:none;inset:0;position:fixed;
  background:radial-gradient(ellipse at center,transparent 12%,rgba(0,0,0,.10) 78%);
}
.grain{z-index:0;opacity:.07}
.shell{
  position:relative;isolation:isolate;
  width:min(80vw,630px);
  max-width:630px;
  margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 6px) 0 calc(env(safe-area-inset-bottom) + 26px);
  z-index:1;
  overflow:visible;
}
.shell::before{opacity:.12;pointer-events:none}
.scene-decor{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none;user-select:none}
.scene-decor .prop,.scene-decor .room-wing{position:absolute;display:block;pointer-events:none;user-select:none;object-fit:contain;filter:none;}
.scene-decor .room-wing{opacity:.74;z-index:-1;object-fit:cover;mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 75%,transparent),linear-gradient(to right,#000,transparent);}
.scene-decor .wing-left{
 left:calc((80vw - 100vw)/2 - 7px);top:178px;width:83px;height:470px;object-position:12% 40%;
 mask-image:linear-gradient(90deg,#000 42%,transparent 100%);
}
.scene-decor .wing-right{
 right:calc((80vw - 100vw)/2 - 7px);top:188px;width:83px;height:470px;object-position:90% 50%;
 mask-image:linear-gradient(270deg,#000 42%,transparent 100%);
}
.scene-decor .prop{opacity:1!important;z-index:0;filter:drop-shadow(0 7px 8px #0007)}
.scene-decor .prop-crt{top:330px;left:-66px;width:82px;}
.scene-decor .prop-lamp{top:170px;right:-67px;width:80px;}
.scene-decor .prop-polaroids{top:50px;right:-55px;width:98px;}
.scene-decor .prop-popcorn{bottom:65px;left:-64px;width:87px;}
.scene-decor .prop-dice{bottom:25px;right:-65px;width:87px;}
.nav,main,footer{z-index:2;position:relative}
.nav{
 position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
 height:auto;min-height:134px;padding:5px 0 8px;margin:0 0 8px;
 border-bottom:1px solid rgba(255,156,49,.40);
 background:transparent!important;backdrop-filter:none!important;
}
.nav::after{content:"";position:absolute;bottom:-1px;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,#ff941a90,transparent)}
.brand-nav{
 align-self:center;order:2;background:transparent;display:flex;justify-content:center;
 padding:6px 0 1px;min-height:104px;max-width:none;width:100%;filter:none;
 border:0;box-shadow:none;
}
.brand-nav img{
 display:block;width:100%;max-width:315px;height:105px;object-fit:contain;
 mix-blend-mode:normal!important;
 filter:drop-shadow(0 0 13px #ff6a006c) drop-shadow(0 5px 15px #0008);
}
.nav-controls{
 position:absolute;top:6px;left:-4px;width:auto;display:flex;flex-direction:row;align-items:center;gap:7px;
 z-index:4;order:1;direction:ltr;
}
.language-button,.build-pill{
 padding:7px 11px!important;min-height:30px;font-size:11px;line-height:1.1;
 border:1px solid #ff8b23;border-radius:13px;
 box-shadow:inset 0 1px 0 #ffffff27,0 3px 10px #0006;
 background:linear-gradient(180deg,#30231e,#141213);color:#fff4e8;
}
.build-pill{background:#2a1713;color:#f9d8ba}
main{padding:5px 0 14px;overflow:visible}
.round-meta{align-items:center;min-height:43px;margin:4px 0 6px;padding:3px 0 7px;font-size:13px}
.round-meta .eyebrow{font-size:13px;letter-spacing:.3px;color:#ffb552}
.panel,.panel-soft,.entry-hero{
 background:linear-gradient(150deg,#2f2929 0%,#221f21 28%,#111115 100%)!important;
 border:1px solid #d9a67d8c!important;
 border-radius:21px;
 box-shadow:0 14px 32px #000b,0 0 0 1px #f9771319,inset 0 1px 0 #fff1!important;
}
.panel{padding:15px 15px 14px;margin:9px 0}
.panel-soft{background:linear-gradient(160deg,#2c292b,#121317)!important}
.scoreboard{display:flex;gap:6px;justify-content:space-between;flex-wrap:wrap}
.scorechip{
 padding:6px 8px;gap:6px;font-size:12px;line-height:1.2;
 border-radius:20px;background:#141316;border:1px solid #b4a5a099;
 box-shadow:inset 0 1px 0 #ffffff14;white-space:nowrap;
}
.scorechip strong{color:#ff9b1e}
.scorechip.active{border-color:#ff9400;box-shadow:0 0 10px #ff6a0061,inset 0 0 9px #ff6a001e;background:#261a14}
.roles{gap:8px;margin:12px 0}
.role-box{
 border:1px solid #cfb3a477;border-radius:14px;
 background:linear-gradient(155deg,#302b2c,#181719);
 min-height:71px;padding:10px;box-shadow:inset 0 1px 0 #ffffff0e;
}
.role-box small{color:#ff9f37;font-size:11px}
.role-box b{font-size:19px;color:#fff8f4}
.card{
 position:relative;min-height:256px;border-radius:22px;
 padding:24px 18px 17px;border:2px solid #ff8b17!important;
 background:
 radial-gradient(ellipse at 68% 0%,#77310d66,transparent 59%),
 repeating-radial-gradient(circle at 50% 50%,transparent 0 12px,#ff9d2510 13px 14px),
 linear-gradient(150deg,#291b19 0%,#151213 68%,#0d0e11 100%)!important;
 box-shadow:0 12px 30px #000b,0 0 0 1px #ffa0395c,0 0 17px #ff791a44,inset 0 1px 0 #ffd08d29;
 overflow:hidden;
}
.card:before{height:10px;background:repeating-linear-gradient(115deg,#ffc047 0 23px,#1b1514 23px 31px)}
.card h2{font-size:clamp(24px,7vw,35px);color:#fff9f1;line-height:1.24;margin:12px 0 8px;text-shadow:0 3px 9px #0006}
.card p{font-size:clamp(15px,4.5vw,19px);line-height:1.8;color:#fff1e2}
.card-type{font-weight:900;color:#ffad49;font-size:11px}
.card-foot{padding-top:9px;margin-top:16px;border-top:1px solid #ffad3c36;color:#ddd1c3}
.card-foot span:last-child{font-size:14px;color:#ffa222}
.timer-panel{
 text-align:center;padding:12px 13px 13px;margin:10px 0;
 border-radius:19px;border:1px solid #d8baa288;
 background:linear-gradient(165deg,#2f2827,#18171a 67%,#121317);
 box-shadow:0 11px 25px #0009,inset 0 1px 0 #ffffff10;
}
.timer-caption{font-size:12px;letter-spacing:.4px;color:#fff5ec}
.timer-value{font-weight:1000;font-size:clamp(58px,19vw,82px);line-height:1.05;color:#ff9c14;text-shadow:0 0 20px #ff7b0047}
.timer-buttons{gap:8px}
.btn{border-radius:15px;min-height:48px;padding:11px 12px;background:linear-gradient(180deg,#ffe08d 0%,#ffac2a 23%,#ff7309 69%,#ed5f00 100%);color:#150e0a;box-shadow:0 4px 0 #852f00,0 8px 16px #ff660039,inset 0 1px 0 #fff8;border:1px solid #ffdb84aa}
.btn-secondary{background:linear-gradient(180deg,#535055,#252429 55%,#151418);border:1px solid #c7bcb5a3;color:#fff7f2;box-shadow:inset 0 1px 0 #ffffff27,0 8px 15px #0006}
.btn-outline,.btn-quiet{background:#181719}
.section-note{font-size:11px;line-height:1.6;color:#e5d8cc;margin:8px 0}
.hero{min-height:205px}
.hero-inner{min-height:205px}
.hero-message{padding:11px 9px 9px}
.hero-message h1{font-size:27px}
.metrics{gap:6px}
.metric{padding:9px 5px}
.lang-tiles{gap:8px}
.lang-tile{padding:16px 8px;min-height:97px}
footer{border-top:1px solid #ff8d3b59;padding:13px 0 0;text-align:center;justify-content:center;}
footer>span:first-child,footer>span:last-child{display:none}
footer>span:nth-child(2){color:#ffead6;letter-spacing:2px;font-size:10px}
@media(max-width:390px){
 .shell{width:82vw;max-width:82vw;padding-top:calc(env(safe-area-inset-top) + 4px)}
 .scene-decor .wing-left{left:calc((82vw - 100vw)/2 - 5px)}
 .scene-decor .wing-right{right:calc((82vw - 100vw)/2 - 5px)}
 .nav{min-height:125px}
 .brand-nav{min-height:94px}
 .brand-nav img{height:95px}
 .nav-controls{left:-3px;gap:5px}
 .language-button,.build-pill{font-size:10px;padding:6px 8px!important}
 .card{padding:22px 13px 15px;min-height:246px}
 .panel{padding:12px}
 .role-box{padding:9px;min-height:65px}
 .role-box b{font-size:17px}
 .scorechip{padding:6px 7px;font-size:11px}
 .card h2{font-size:24px}
 .card p{font-size:15px}
 .btn{min-height:48px;padding:10px 11px}
 .scene-decor .prop-crt{left:-60px;width:76px}
 .scene-decor .prop-lamp{right:-62px;width:78px}
 .scene-decor .prop-popcorn{left:-60px;width:83px}
 .scene-decor .prop-dice{right:-61px;width:83px}
}
@media(min-width:630px){
 .shell{width:min(76vw,635px)}
 .scene-decor .wing-left{left:-148px;width:172px;height:560px}
 .scene-decor .wing-right{right:-148px;width:172px;height:560px}
 .scene-decor .prop-crt{left:-125px;width:140px}
 .scene-decor .prop-lamp{right:-120px;width:132px}
 .scene-decor .prop-polaroids{right:-110px;width:180px}
 .scene-decor .prop-popcorn{left:-121px;width:130px}
 .scene-decor .prop-dice{right:-115px;width:130px}
 .panel{padding:19px}
 .card{min-height:305px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Exact approved-room edge art: the reference supplies only background scenery,
   while the logo, score, cards, timer and controls are live HTML. */
body::before{
  position:absolute!important;inset:0!important;
  background:url('./approved-stage-wall.webp') center top/100% 100% no-repeat!important;
  opacity:1!important;
}
body::after{
  background:radial-gradient(ellipse 86% 60% at center,transparent 68%,rgba(0,0,0,.13) 100%);
}
.scene-decor .room-wing,.scene-decor .prop{display:none!important}
@media(max-width:390px){
 .shell{width:77vw;max-width:77vw}
 .nav{min-height:125px}
 .brand-nav img{width:100%;height:95px}
 .card h2{font-size:23px}
 .card p{font-size:14px}
 .scorechip{font-size:10px;padding:5px 6px}
 .panel{padding:12px}
 .timer-panel{padding:12px 9px}
}

/* FINAL: truthful full-edition totals + readable activation button */
.edition-count-title{font-size:12px!important;color:#ffbb73!important;text-align:center;letter-spacing:.3px;font-weight:800;margin:15px 0 6px!important}
.btn-outline,.btn-quiet{color:#fff7ee!important;border:1px solid #e79d5d!important;background:linear-gradient(180deg,#363034,#151418)!important;box-shadow:inset 0 1px 0 #ffffff20,0 4px 0 #7b390e,0 8px 20px #0008!important;text-shadow:0 1px 2px #000!important}
.btn-outline:focus-visible,.btn-quiet:focus-visible{outline:3px solid #ffb35a;outline-offset:3px}
.btn-outline:hover,.btn-quiet:hover{filter:brightness(1.18)}

/* V6: clear product totals and readable accessible activation action */
.deck-headline { margin:18px 0 5px; text-align:center; color:#ffb568; font-weight:900; font-size:12px; letter-spacing:.06em; }
.deck-total { font-size:13px; text-align:center; color:#f8d9b8; font-weight:800; margin:-3px 0 19px; }
.welcome-controls .btn-outline,
.btn.btn-outline { background:linear-gradient(180deg,#41302a 0%,#261c1c 48%,#18171b 100%) !important; color:#fff3df !important; border:2px solid #edab6e !important; text-shadow:0 1px 2px #0009; box-shadow:0 3px 0 #8b431d,0 7px 17px #000a,inset 0 1px 0 #ffffff24 !important; }
.welcome-controls .btn-outline:active,.btn.btn-outline:active { box-shadow:0 1px 0 #8b431d,0 3px 10px #0008 !important; }
.btn:disabled { opacity:.6; cursor:not-allowed; }

/* V6: clear product totals and readable accessible activation action */
.deck-headline { margin:18px 0 5px; text-align:center; color:#ffb568; font-weight:900; font-size:12px; letter-spacing:.06em; }
.deck-total { font-size:13px; text-align:center; color:#f8d9b8; font-weight:800; margin:-3px 0 19px; }
.welcome-controls .btn-outline,
.btn.btn-outline { background:linear-gradient(180deg,#41302a 0%,#261c1c 48%,#18171b 100%) !important; color:#fff3df !important; border:2px solid #edab6e !important; text-shadow:0 1px 2px #0009; box-shadow:0 3px 0 #8b431d,0 7px 17px #000a,inset 0 1px 0 #ffffff24 !important; }
.welcome-controls .btn-outline:active,.btn.btn-outline:active { box-shadow:0 1px 0 #8b431d,0 3px 10px #0008 !important; }
.btn:disabled { opacity:.6; cursor:not-allowed; }