/* MOMENTO — approved game-night look. Pure presentation: game code and rules untouched. */
:root{--fire:#ff6a00;--fire-light:#ffac45;--cream:#fffaf2;--raised:#191b1f;--muted:#c9cbd0;--line:rgba(255,137,41,.36)}
html{background:#08080a}
body{background:#09090b;color:#fff8f1}
body::before{opacity:.75;filter:saturate(1.35) contrast(1.09)}
body::after{background:linear-gradient(90deg,rgba(5,6,9,.20),rgba(8,8,10,.40) 22%,rgba(8,8,11,.53) 50%,rgba(8,8,10,.40) 78%,rgba(5,6,9,.15)),linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.09) 65%,rgba(0,0,0,.16))}
.shell{isolation:isolate;overflow:visible}
.shell::before{content:"";position:absolute;pointer-events:none;z-index:-1;inset:0 -4vw 0;
 background:radial-gradient(ellipse 40% 8% at 4% 8%,rgba(255,153,50,.13),transparent),radial-gradient(ellipse 34% 12% at 92% 19%,rgba(255,124,0,.11),transparent),radial-gradient(ellipse 70% 20% at 50% 100%,rgba(89,39,15,.21),transparent)}
.scene-decor{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2;user-select:none}
.scene-decor .prop{position:absolute;display:block;object-fit:contain;user-select:none;pointer-events:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.20))}
.scene-decor .prop-crt{top:290px;left:-55px;width:123px;opacity:.78}
.scene-decor .prop-lamp{top:160px;right:-52px;width:130px;opacity:.82}
.scene-decor .prop-polaroids{top:85px;right:-54px;width:126px;opacity:.9}
.scene-decor .prop-popcorn{bottom:86px;left:-42px;width:112px;opacity:.99;transform:rotate(-2deg)}
.scene-decor .prop-dice{bottom:40px;right:-28px;width:112px;opacity:.98}
.nav,main,footer{position:relative;z-index:1}
.nav{border-bottom:1px solid rgba(255,157,61,.48)}
.brand-nav{filter:drop-shadow(0 4px 19px rgba(255,102,0,.24))}
.brand-nav img{filter:drop-shadow(0 0 12px rgba(255,105,0,.43));object-fit:contain}
.panel{background:linear-gradient(154deg,rgba(31,33,38,.98),rgba(16,17,21,.98) 80%);border:1px solid rgba(228,224,222,.32);box-shadow:0 15px 42px rgba(0,0,0,.5),0 0 22px rgba(255,112,0,.12),inset 0 1px 0 rgba(255,255,255,.10)}
.panel-soft{background:linear-gradient(160deg,rgba(33,35,40,.98),rgba(14,15,18,.98))}
.scorechip{background:rgba(8,9,11,.85);border-color:rgba(221,218,213,.33);color:#f7f7f7}
.scorechip strong{color:#ff9a24}
.scorechip.active{border-color:#ff8c19;box-shadow:0 0 13px rgba(255,105,0,.47),inset 0 0 12px rgba(255,120,0,.10)}
.role-box{background:linear-gradient(180deg,rgba(25,26,31,.97),rgba(11,12,15,.97));border:1px solid rgba(223,218,208,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.role-box small{color:#ffac44}
.card{background:radial-gradient(ellipse at 50% -13%,rgba(255,106,0,.18),transparent 59%),repeating-radial-gradient(circle at 60% 35%,transparent 0 12px,rgba(255,160,57,.035) 13px 14px),linear-gradient(160deg,#161719,#0b0c10);border:3px solid #ff851f;box-shadow:0 0 0 1px rgba(255,184,64,.6),0 0 17px rgba(255,112,0,.35),0 16px 34px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,202,130,.3)}
.card:before{height:9px;background:repeating-linear-gradient(115deg,#ffbb49 0 23px,#211717 24px 31px);box-shadow:0 1px 0 rgba(255,255,255,.15)}
.card h2{color:#fffdfb;text-shadow:0 2px 5px rgba(0,0,0,.48)}
.card p{color:#f1ece6}
.card-type{color:#ffba71}
.card-foot{color:#b5b6b8}
.timer-panel{background:linear-gradient(165deg,#23242a,#101114);border:1px solid rgba(221,220,218,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 25px rgba(0,0,0,.25)}
.timer-value{color:#ff9818;text-shadow:0 0 28px rgba(255,106,0,.31)}
.btn{background:linear-gradient(180deg,#ffd279,#ff8c12 47%,#ef5c00);box-shadow:0 4px 0 rgba(126,44,1,.84),0 8px 22px rgba(255,106,0,.22),inset 0 1px 0 rgba(255,255,255,.24)}
.btn-secondary{background:linear-gradient(180deg,#44444a,#16171c);color:#fafafa;border:1px solid rgba(227,225,220,.47);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 15px rgba(0,0,0,.25)}
.btn-outline,.btn-quiet{background:rgba(17,18,21,.84)}
.lang-tile{background:linear-gradient(155deg,rgba(38,39,42,.98),rgba(16,16,20,.98))}
.metric{background:linear-gradient(165deg,rgba(38,39,42,.98),rgba(14,15,19,.98))}
.hero-message{background:rgba(14,15,17,.90);border-color:rgba(255,131,42,.23)}
footer{text-shadow:0 1px 6px rgba(0,0,0,.9);color:#e4ded8}
@media(max-width:420px){
 .scene-decor .prop-crt{top:275px;left:-64px;width:116px}
 .scene-decor .prop-lamp{top:158px;right:-57px;width:128px}
 .scene-decor .prop-polaroids{top:82px;right:-46px;width:113px}
 .scene-decor .prop-popcorn{bottom:76px;left:-37px;width:102px}
 .scene-decor .prop-dice{bottom:45px;right:-30px;width:107px}
}
@media(min-width:650px){
 .scene-decor .prop-crt{left:-110px;width:205px;top:350px}
 .scene-decor .prop-lamp{right:-105px;width:180px;top:150px}
 .scene-decor .prop-polaroids{right:-85px;width:172px}
 .scene-decor .prop-popcorn{left:-95px;width:177px;bottom:75px}
 .scene-decor .prop-dice{right:-85px;width:160px;bottom:28px}
}
@media(prefers-reduced-motion:reduce){.scene-decor .prop{transform:none}}

/* === MOMENTO V4 / visual correction: quieter ambience, clear gameplay === */
:root{--fire:#ff6a00;--fire-light:#ffa94e;--cream:#fffaf4;--muted:#cfd0d3;--raised:#202127}
body{background:#09090b;color:#fffaf4}
body::before{
  opacity:.47;
  background-image:url('./room-ambience.webp');
  background-position:center top;
  background-repeat:no-repeat;
  background-size:cover;
  filter:saturate(.94) contrast(1.05);
}
body::after{
  background:
   linear-gradient(90deg,rgba(8,9,11,.15) 0%,rgba(8,9,11,.64) 20%,rgba(8,9,11,.78) 50%,rgba(8,9,11,.64) 80%,rgba(8,9,11,.15) 100%),
   linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.10) 50%,rgba(0,0,0,.38));
}
/* All props behind panels and buttons, never covering interactions */
.scene-decor{z-index:0;overflow:visible;inset:0;}
.scene-decor .prop{opacity:.56!important;filter:drop-shadow(0 3px 12px rgba(0,0,0,.55));}
.scene-decor .prop-crt{left:-63px;top:300px;width:92px;}
.scene-decor .prop-lamp{right:-68px;top:170px;width:100px;}
.scene-decor .prop-polaroids{right:-29px;top:95px;width:92px;opacity:.72!important;}
.scene-decor .prop-popcorn{left:-55px;bottom:105px;width:77px;opacity:.77!important;}
.scene-decor .prop-dice{right:-48px;bottom:86px;width:77px;opacity:.81!important;}
.nav,main,footer{position:relative;z-index:2}
.nav{background:linear-gradient(180deg,rgba(10,10,12,.64),rgba(10,10,12,.02));}
.brand-nav img{filter:drop-shadow(0 0 12px rgba(255,108,0,.28));}
/* Legibility comes first; ambience belongs outside of content */
.panel,.panel-soft,.entry-hero{
 background:linear-gradient(165deg,rgba(35,36,41,.985),rgba(15,16,20,.995) 73%,rgba(13,14,17,.995));
 border:1px solid rgba(211,212,215,.31);
 box-shadow:0 15px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,132,32,.06), inset 0 1px 0 rgba(255,255,255,.08);
}
.panel{border-radius:20px}
.scorechip{background:#0d0f12;border:1px solid rgba(209,210,214,.40);box-shadow:none}
.scorechip.active{border-color:#ff901e;background:rgba(255,109,0,.10);box-shadow:0 0 0 1px rgba(255,131,15,.20)}
.role-box{background:#15161b;border:1px solid rgba(211,211,213,.32);box-shadow:none}
.role-box small{color:#ffae4c}
.card{
 background:radial-gradient(ellipse at 80% -12%,rgba(122,54,18,.31),transparent 55%),
  repeating-radial-gradient(circle at 60% 35%,transparent 0 13px,rgba(255,125,43,.021) 14px 15px),
  linear-gradient(155deg,#1d1e23,#0c0d11 70%);
 border:2px solid #ff8e25;
 box-shadow:0 16px 32px rgba(0,0,0,.55),0 0 0 1px rgba(255,161,76,.20),0 0 12px rgba(255,111,0,.20);
}
.card:before{height:9px}
.card p{color:#f6f4f0}
.card-foot{border-top-color:rgba(255,170,74,.23)}
.timer-panel{background:linear-gradient(155deg,rgba(38,40,47,.99),rgba(14,15,19,.995));border:1px solid rgba(222,220,217,.40);box-shadow:0 10px 22px rgba(0,0,0,.33)}
.timer-value{text-shadow:0 0 10px rgba(255,106,0,.18)}
.btn{box-shadow:0 3px 0 #84300c,0 7px 20px rgba(255,100,0,.20),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-secondary{box-shadow:0 5px 12px rgba(0,0,0,.26)}
#toast{bottom:calc(22px + env(safe-area-inset-bottom));max-width:330px;left:0;right:0;padding:11px 13px;font-size:13px}
@media(max-width:420px){
 .shell{padding-inline:14px}
 .scene-decor .prop-crt{left:-57px;top:300px;width:84px}
 .scene-decor .prop-lamp{right:-61px;top:190px;width:92px}
 .scene-decor .prop-polaroids{right:-33px;top:91px;width:85px}
 .scene-decor .prop-popcorn{left:-51px;bottom:110px;width:76px}
 .scene-decor .prop-dice{right:-51px;bottom:100px;width:78px}
 .card{padding:23px 17px 19px;min-height:284px}
 .timer-panel{padding:12px;margin:14px 0}
 .panel{padding:17px}
 .nav{margin-bottom:4px}
}
/* Last pass: tiny edge-only props, clear footer and button margins */
body::before{opacity:.40}
.scene-decor .prop-popcorn{left:-40px;bottom:84px;width:48px;opacity:.52!important}
.scene-decor .prop-dice{right:-39px;bottom:72px;width:50px;opacity:.58!important}
.scene-decor .prop-crt{left:-70px;width:78px;opacity:.5!important}
.scene-decor .prop-lamp{right:-72px;width:82px;opacity:.5!important}
@media(max-width:420px){
 .scene-decor .prop-popcorn{left:-40px;bottom:84px;width:48px}
 .scene-decor .prop-dice{right:-39px;bottom:72px;width:50px}
 .scene-decor .prop-crt{left:-70px;width:78px}
 .scene-decor .prop-lamp{right:-72px;width:82px}
}