/* GUESSRD 15.0 RC8 — Motion Orange design layer.
   Visual only: existing Firebase, game state and LIVE commands remain untouched. */
:root{--ms-orange:#ff822f;--ms-coral:#ee622b;--ms-sand:#fff2d3;--ms-ink:#4b2919;}
.app-home{position:relative;overflow:hidden;background:#ff933e;min-height:100svh}
.app-home .topnav{height:78px;position:absolute;inset:0 0 auto;z-index:60;border:0;background:transparent!important;padding:0 clamp(18px,4.2vw,64px);display:flex;align-items:center;gap:20px;}
.app-home .topnav .brand{font-size:clamp(21px,2.4vw,30px);font-weight:950;letter-spacing:-.085em;color:white}
.app-home .desktop-nav{margin-left:auto;gap:5px;display:flex;align-items:center}
.app-home .desktop-nav button,.app-home .desktop-nav a{background:#fff8ef;color:#df662a;border:none;border-radius:999px;padding:10px 17px;font-size:12px;font-weight:850;line-height:1.15;transition:background .18s,transform .18s;box-shadow:0 3px 16px #ab552017}
.app-home .desktop-nav button:hover,.app-home .desktop-nav a:hover,.app-home .desktop-nav .is-active{background:#ffe0b3;color:#b8441b;border:none;transform:translateY(-1px)}
.app-home .nav-right{margin-left:16px}
.topnav .mobile-menu{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;white-space:nowrap;background:#db622e;color:white;border:0;border-radius:999px;padding:11px 18px;font-size:12px;font-weight:850;line-height:1.1;min-height:42px;box-shadow:0 4px 18px #9040121f}
.topnav .mobile-menu:hover{background:#c84f21}
.topnav .mobile-menu svg{width:17px;height:17px;stroke-width:2.5}
.ms-home{height:100svh;height:100dvh;min-height:560px;position:relative;isolation:isolate;overflow:hidden;display:block;background:linear-gradient(155deg,#ff832f 0%,#ff9e42 52%,#ffc67c 100%);color:#fff;text-align:center}
.ms-giant{position:absolute;z-index:0;top:46%;left:50%;transform:translate(-50%,-50%) scale(1.1,1.58);transform-origin:center;font-size:clamp(220px,37vw,640px);font-weight:1000;letter-spacing:-.115em;line-height:.78;white-space:nowrap;color:#fff;opacity:.45;user-select:none;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,black 32%,transparent 98%);mask-image:linear-gradient(to bottom,black 32%,transparent 98%)}
.ms-lightwash{position:absolute;z-index:0;top:10%;left:50%;transform:translateX(-50%);height:65%;width:clamp(180px,24vw,440px);background:#fff5e7;opacity:.12;border-radius:50%;filter:blur(1px);pointer-events:none}
.ms-home::after{content:'';position:absolute;z-index:0;inset:38% 0 0;background:linear-gradient(transparent 20%,rgba(227,102,46,.19) 100%);pointer-events:none}
.ms-stack-wrap{position:absolute;z-index:4;inset:15% 0 22%;display:flex;align-items:center;justify-content:center;perspective:1100px}
.ms-stack{position:relative;width:clamp(188px,25vw,315px);height:clamp(230px,30vw,335px);transform-style:preserve-3d;animation:ms-float 5s ease-in-out infinite}
.ms-card{position:absolute;inset:0;border-radius:clamp(22px,2.7vw,35px);border:3px solid rgba(255,255,255,.76);box-shadow:0 26px 40px #9c3d1b3d,inset 0 3px 3px #ffffffb9}
.ms-card-a{transform:translate(-36px,16px) rotate(-18deg) scale(.95);background:linear-gradient(142deg,#ffe39b 0%,#ffae51 88%)}
.ms-card-b{transform:translate(32px,-12px) rotate(16deg) scale(.95);background:linear-gradient(142deg,#fff5b8,#ffcc68)}
.ms-card-front{appearance:none;transform:rotate(-6deg);background:linear-gradient(142deg,#fff6df,#ffe3af 78%,#eec088);box-shadow:0 29px 58px #9239155b,inset 0 3px 3px #fff;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(15px,2vw,27px);color:#db7534;text-align:center;cursor:pointer;user-select:none;transition:filter .2s}
.ms-card-front:hover{filter:brightness(1.04)}.ms-card-front:focus-visible{outline:4px solid #fff;outline-offset:6px}
.ms-card-head{display:flex;justify-content:space-between;text-align:left;align-items:center;font-size:clamp(9px,.8vw,12px);letter-spacing:.095em;font-weight:950}
.ms-emblem{display:flex;align-items:center;justify-content:center;align-self:center;width:clamp(93px,11vw,132px);aspect-ratio:1;background:linear-gradient(145deg,#fffbe4,#ffb967);border-radius:24%;transform:rotate(9deg);box-shadow:inset 12px 12px 18px #fff6df,inset -12px -14px 21px #bd792e64,10px 14px 21px #a94b2833}
.ms-question{font-weight:1000;line-height:1;font-size:clamp(72px,9vw,102px);color:#fff9e6;text-shadow:1px 2px 0 #ecad6c,3px 5px 0 #cb843f,5px 8px 13px #994e2a80;transform:rotate(-9deg) translateY(-4px)}
.ms-card-message{font-size:clamp(19px,2.5vw,35px);font-weight:1000;line-height:1.08;letter-spacing:-.065em;white-space:nowrap}
.ms-card-foot{font-size:clamp(7px,.75vw,10px);letter-spacing:.11em;font-weight:850;opacity:.74;white-space:nowrap}
.ms-spark{position:absolute;z-index:3;width:28px;height:28px;animation:ms-twinkle 3s ease-in-out infinite;pointer-events:none}
.ms-spark::before,.ms-spark::after{position:absolute;content:'';background:#fff8d6;border-radius:100px;box-shadow:0 0 13px #fff0b4b5}
.ms-spark::before{height:28px;width:4px;top:0;left:12px}.ms-spark::after{height:4px;width:28px;top:12px;left:0}
.ms-spark-one{top:30%;left:21%;animation-delay:.3s}.ms-spark-two{top:27%;right:19%;animation-delay:1.1s}.ms-spark-three{bottom:27%;right:25%;animation-delay:1.9s}
.ms-bottom{position:absolute;z-index:6;bottom:max(20px,3.2vh);left:0;right:0;padding:0 16px;display:flex;align-items:center;flex-direction:column;gap:9px;text-align:center}
.ms-bottom h1{font-size:clamp(27px,3.8vw,42px);line-height:1.1;font-weight:1000;letter-spacing:-.075em;text-shadow:0 3px 18px #a3452259;margin:0}
.ms-bottom p{font-size:clamp(12px,1.1vw,14px);font-weight:650;color:#fffdf4;text-shadow:0 2px 12px #8a3e2033;margin:0}
.ms-start{display:inline-flex;align-items:center;justify-content:center;gap:34px;margin-top:3px;padding:14px 28px;border:0;border-radius:999px;background:#d95929;color:#fff;cursor:pointer;font-weight:900;font-size:14px;box-shadow:0 9px 18px #a8452455;transition:transform .18s,background .18s}
.ms-start:hover{transform:translateY(-3px) scale(1.03);background:#c84c20}.ms-start:active{transform:scale(.98)}
.ms-start>span:last-child{font-size:19px;line-height:1}
.ms-join{font-size:12px;color:#fff;opacity:.92;font-weight:750;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@keyframes ms-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-18px) rotate(2deg)}}
@keyframes ms-twinkle{0%,100%{opacity:.32;transform:scale(.75) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(25deg)}}
/* Slide-out menu used on all main pages; overlay is a real button so tapping outside closes it. */
.topnav{z-index:60}
.topnav .ms-menu-shade{position:fixed!important;inset:0!important;z-index:98!important;display:block!important;background:rgba(31,20,16,.47)!important;border:0!important;border-radius:0!important;padding:0!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);cursor:pointer;animation:ms-shade-in .35s ease both}
.topnav .mobile-nav{position:fixed!important;inset:0 0 0 auto!important;width:min(380px,100vw)!important;height:100dvh!important;max-height:none!important;z-index:99!important;background:linear-gradient(145deg,#ff6b22 0%,#ff9642 100%)!important;border:0!important;border-radius:0!important;box-shadow:-15px 0 60px #762e1b48!important;padding:25px 23px 24px!important;display:flex!important;flex-direction:column!important;gap:12px!important;overflow-y:auto!important;animation:ms-panel-in .47s cubic-bezier(.16,1,.3,1) both}
.topnav .mobile-nav>button:not(.ms-menu-head button),.topnav .mobile-nav>a{position:relative;flex:none;display:block;width:100%;background:#ffffff25!important;border:1px solid #ffffff22!important;border-radius:16px!important;color:white!important;font-size:clamp(16px,4.2vw,18px)!important;font-weight:850!important;line-height:1.25!important;text-align:left!important;padding:17px 19px!important;text-decoration:none!important;animation:ms-items-in .6s cubic-bezier(.16,1,.3,1) both}
.topnav .mobile-nav>button:nth-child(2){animation-delay:.1s}.topnav .mobile-nav>button:nth-child(3){animation-delay:.16s}.topnav .mobile-nav>a:nth-child(4){animation-delay:.22s}.topnav .mobile-nav>a:nth-child(5){animation-delay:.28s}
.topnav .mobile-nav>button:hover,.topnav .mobile-nav>a:hover{background:#ffffff3d!important}
.topnav .mobile-nav .ms-menu-head{display:flex;align-items:center;justify-content:space-between;color:white;gap:15px;margin-bottom:24px}
.topnav .ms-menu-head strong{font-size:23px;font-weight:950;letter-spacing:-.08em}
.topnav .ms-menu-head button{border:0;background:#ffffff38;color:#fff;font-size:30px;line-height:1;width:44px;height:44px;border-radius:50%;cursor:pointer}
.topnav .mobile-nav>button.ms-menu-start{margin-top:auto!important;background:#fff!important;color:#ce5b24!important;border:0!important;border-radius:999px!important;text-align:center!important;padding:19px 12px!important;animation-delay:.32s}
@keyframes ms-panel-in{from{transform:translateX(105%)}to{transform:translateX(0)}}
@keyframes ms-shade-in{from{opacity:0}to{opacity:1}}
@keyframes ms-items-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
/* Shared design language for the non-LIVE pages.  Preserve green/red answer meanings. */
.app:not(.app-home):not(.app-projector):not(.app-player){background:#fff8ec;min-height:100dvh}
.app:not(.app-home):not(.app-projector):not(.app-player) .topnav{background:#fff7eb;border-bottom:1px solid #f0dac0}
.app:not(.app-home):not(.app-projector):not(.app-player) .topnav .brand{color:#59301b;font-weight:950;letter-spacing:-.08em}
.app:not(.app-home):not(.app-projector):not(.app-player) .topnav .desktop-nav button,
.app:not(.app-home):not(.app-projector):not(.app-player) .topnav .desktop-nav a{color:#ab5326;border-bottom-color:transparent}
.app:not(.app-home):not(.app-projector):not(.app-player) .topnav .desktop-nav .is-active{color:#c85018;border-bottom-color:#f58a44}
.app:not(.app-home):not(.app-projector):not(.app-player) .mobile-menu{background:#de6c2a}
.app-choose .choose-screen{background:linear-gradient(160deg,#fff4df,#ffdaaa);min-height:calc(100svh - 67px);color:#4a281c}
.app-choose .choose-screen h1 em{color:#f18333}
.app-choose .choice-grid button{border-color:#eacb9f;background:#fff8ec;border-radius:24px;box-shadow:0 14px 35px #bb74441c;transition:transform .24s,box-shadow .24s}
.app-choose .choice-grid button:hover{transform:translateY(-5px);box-shadow:0 21px 45px #bb744433}
.app-choose .choice-grid button .choice-icon{color:#e9792e}
.app-choose .choice-grid button span{color:#c05b24}
.app-classic .rx-wrapper,.app-live-setup .rx-wrapper{--rx-lime:#ffd79d;--rx-line:#ebd8c1;--rx-muted:#836e5d;--rx-dark:#403021;--rx-ink:#422e24;--rx-green:#cb6b30;background:#fff9ef}
.app-classic .rx-stage-label,.app-live-setup .rx-stage-label{color:#c76c30}
.app-classic .rx-steps .selected,.app-live-setup .rx-steps .selected{border-bottom-color:#f68e45;color:#bb5520}
.app-classic .rx-three button.chosen,.app-live-setup .rx-three button.chosen{background:#fff0d9;border-color:#d48142;box-shadow:inset 0 0 0 1px #d48142}
.app-classic .rx-three button.chosen span,.app-live-setup .rx-three button.chosen span{color:#d77636}
.app-classic .rx-solid,.app-live-setup .rx-solid{background:#ce612a;color:white;border-color:#ce612a}
.app-classic .rx-solid:hover,.app-live-setup .rx-solid:hover{background:#ae4b1f}
.app-classic .rx-outline,.app-live-setup .rx-outline{background:#ffebd0;color:#9c4e29;border-color:#efbb8e}
.app-classic .rx-active-screen{background:#3e2c21;border-color:#533d30}
.app-classic .rx-play-buttons .rx-good{background:#ecc9a4;color:#38271c}
.app-classic .rx-play-buttons .rx-skip{background:#ffe7de;color:#963d27}
.app-classic .rx-play-buttons .rx-pause-visible{background:#ffcf4d!important}
.app-classic .rx-game-toolbar .rx-game-code{background:#fff0d4!important;border-color:#e6b87a!important;color:#6c381e!important}
@media(min-width:801px){.app-home .topnav .desktop-nav{display:flex}.app-home .topnav .mobile-menu{display:flex}.app-home .topnav .desktop-nav{margin-left:auto}}
@media(max-width:800px){.app-home .topnav{height:72px;padding:0 20px}.app-home .desktop-nav{display:none!important}.app-home .nav-right{margin-left:auto}.app-home .topnav .mobile-menu{padding:10px 14px}}
@media(max-width:600px){
 .ms-home{min-height:570px}
 .ms-giant{font-size:55vw;top:44%;transform:translate(-50%,-50%) scale(1.07,1.5)}
 .ms-stack-wrap{inset:16% 0 24%}
 .ms-stack{width:clamp(185px,51vw,245px);height:clamp(240px,62vw,285px)}
 .ms-card-front{padding:18px}.ms-card-a{transform:translate(-22px,14px) rotate(-17deg) scale(.95)}.ms-card-b{transform:translate(22px,-9px) rotate(15deg) scale(.95)}
 .ms-emblem{width:94px}.ms-question{font-size:76px}.ms-card-message{font-size:clamp(21px,6vw,28px)}.ms-card-head{font-size:10px}.ms-card-foot{font-size:8px}
 .ms-spark-one{left:8%}.ms-spark-two{right:8%}.ms-spark-three{right:14%;bottom:28%}
 .ms-bottom{bottom:max(20px,3.2vh)}.ms-bottom h1{font-size:clamp(27px,7.5vw,35px)}
 .app-home .topnav .brand{font-size:24px}
 .topnav .mobile-nav{width:100vw!important}
}
@media(max-height:670px){
 .ms-home{min-height:0;height:100dvh}
 .ms-stack-wrap{inset:13% 0 26%}
 .ms-stack{height:clamp(168px,31vh,236px);width:clamp(150px,32vh,219px)}
 .ms-card-front{padding:13px}
 .ms-emblem{width:clamp(68px,14vh,96px)}.ms-question{font-size:clamp(54px,12vh,76px)}
 .ms-card-message{font-size:clamp(18px,3.6vh,25px)}
 .ms-bottom{bottom:12px;gap:6px}.ms-bottom h1{font-size:clamp(23px,4.5vh,32px)}.ms-bottom p{font-size:11px}.ms-start{padding:11px 22px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.ms-stack,.ms-spark{animation:none}.topnav .mobile-nav,.topnav .ms-menu-shade,.topnav .mobile-nav>button,.topnav .mobile-nav>a{animation:none}}
/* Override the older square menu icon preset. */
.topnav .mobile-menu,.app-home .topnav .mobile-menu{width:auto!important;height:auto!important;min-width:101px!important;display:inline-flex!important;background:#d65b2b!important;color:#fff!important;border:0!important;border-radius:999px!important;box-shadow:0 7px 17px #8c451d22!important}
.topnav .mobile-menu span{display:inline!important;color:inherit!important;font-size:12px!important}
.topnav .mobile-menu svg{display:block!important;color:inherit!important;stroke:currentColor!important}
.app-home .brand-period{color:#fff7d8}
body .topnav .mobile-nav>button.ms-menu-start{background:#fff!important;color:#cf5b26!important;border-color:#fff!important;font-weight:900!important;border-radius:999px!important;text-align:center!important}
/* Small screens have room for two selectable mode cards if the dead space is removed. */
@media(max-width:600px){
 .app-choose .choose-screen{padding:24px 18px 20px;min-height:calc(100svh - 64px)}
 .app-choose .choose-screen h1{font-size:clamp(41px,10.5vw,53px);margin:11px 0 8px;line-height:1.04}
 .app-choose .choose-screen>p{font-size:13px;line-height:1.45}
 .app-choose .choice-grid{grid-template-columns:1fr;gap:12px;margin:18px 0 12px}
 .app-choose .choice-grid button{min-height:205px;padding:20px 20px 17px;border-radius:19px}
 .app-choose .choice-icon{width:44px;height:44px}
 .app-choose .choice-grid h2{font-size:25px;margin-top:8px}
 .app-choose .choice-grid p{font-size:12px;margin-top:5px;line-height:1.45}
 .app-choose .choice-grid button>span{margin-top:12px;font-size:10px}
}
@media(min-width:900px) and (max-height:820px){
 .app-classic .rx-setup-head:not(.rx-setup-compact),.app-live-setup .rx-setup-head:not(.rx-setup-compact){display:none}
 .rx-wrapper .rx-steps{margin-bottom:7px}
 .rx-wrapper .rx-setup-panel{min-height:0}
 .rx-wrapper .rx-recovery{margin-top:7px;padding:7px 11px}
 .rx-wrapper .rx-three button{min-height:70px;padding:7px 12px!important;gap:4px}
 .rx-wrapper .rx-slider{margin-top:10px;padding:8px 13px}
 .rx-wrapper .rx-slider input{margin:9px 0 5px}
 .rx-wrapper .rx-category-actions{margin-bottom:8px}
 .rx-wrapper .rx-bottom-steps{padding:5px 0;margin-top:7px}
}

/* RC8 review: keep the card label readable and place both mode choices in the
   visible phone viewport when there is enough space. */
.ms-card-message{max-width:100%;white-space:normal;text-wrap:balance;overflow-wrap:normal}
.ms-card-front{gap:4px}
@media(max-width:600px){
 .ms-card-message{font-size:clamp(16px,4.7vw,21px);line-height:1.04}
 .ms-card-foot{font-size:7px;letter-spacing:.07em;white-space:normal}
 .ms-card-head{font-size:9px}
 .app-choose .choose-screen{padding:clamp(18px,3vh,32px) 22px 22px;min-height:calc(100dvh - 70px)}
 .app-choose .choose-screen h1{font-size:clamp(42px,11vw,58px);line-height:1.03;margin:12px 0 14px}
 .app-choose .choose-screen>p{font-size:13px;line-height:1.5}
 .app-choose .choice-grid{gap:10px;margin:20px 0 10px}
 .app-choose .choice-grid button{min-height:170px;padding:17px 20px;border-radius:20px}
 .app-choose .choice-grid h2{font-size:24px}
 .app-choose .choice-grid p{margin-top:3px;line-height:1.35}
 .app-choose .choice-grid button>span{margin-top:12px}
 .app-choose .choice-icon{width:43px;height:43px}
}
@media (max-width:600px) and (max-height:700px){
 .app-choose .choose-screen{padding-top:14px}
 .app-choose .choose-screen h1{font-size:41px;margin:8px 0 10px}
 .app-choose .choice-grid{margin-top:12px}
 .app-choose .choice-grid button{min-height:155px;padding:14px 17px}
 .app-choose .choice-grid h2{font-size:22px}
}
body:has(.mobile-nav){overflow:hidden}