*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{font-family:Georgia,'Times New Roman',serif;color:#28180d;background:#6ea949 url('../assets/img/jungle-background-approved.png') center/cover no-repeat fixed}
button,input,select{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}

/* ---------- Shared ---------- */
.menu-page,.game-page{min-width:100vw;min-height:100vh;background:#6ea949 url('../assets/img/jungle-background-approved.png') center/cover no-repeat fixed}
.menu-stage{position:relative;width:100vw;height:100vh;overflow:hidden}
.overlay{position:fixed;z-index:20;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(25,17,7,.06)}
.overlay[hidden]{display:none!important}
body:has(.overlay:not([hidden])) .menu-title,body:has(.overlay:not([hidden])) .main-menu{visibility:hidden}
.parchment{position:relative;background:transparent url('../assets/img/paper-panel-crop.png') center/100% 100% no-repeat;filter:drop-shadow(0 8px 10px rgba(42,23,8,.34))}
.close-btn{position:absolute;z-index:50;width:46px;height:46px;border:0;background:transparent url('../assets/img/close.svg') center/contain no-repeat;color:transparent!important;font-size:0;text-decoration:none;cursor:pointer}
.close-btn:hover{filter:brightness(1.07);transform:scale(1.03)}

/* ---------- Main menu ---------- */
.menu-title{position:absolute;top:10%;left:50%;transform:translateX(-50%);width:min(700px,90vw);text-align:center;color:#fff;text-shadow:0 2px 4px #24150b,0 0 8px rgba(0,0,0,.55)}
.menu-title h1{margin:0;font-weight:400;font-size:clamp(42px,4.4vw,66px);line-height:1;letter-spacing:4px}
.menu-title p{margin:22px 0 0;font-size:clamp(20px,2.1vw,31px);letter-spacing:4px}
.main-menu{position:absolute;top:56%;left:50%;transform:translate(-50%,-50%);width:190px;display:flex!important;flex-direction:column;gap:10px}
.main-btn,.wood-btn,.setup-btn,.game-result-button{border:0;background-color:transparent;background-position:center;background-size:100% 100%;background-repeat:no-repeat;color:#fff;text-shadow:0 1px 2px #402516;padding:0;transition:filter .12s ease,transform .12s ease}
.main-btn:hover,.wood-btn:hover,.setup-btn:hover:not(:disabled),.game-result-button:hover{filter:brightness(1.07);transform:translateY(-1px)}
.main-btn{width:190px;height:48px;font-size:19px}
.main-btn.blue{background-image:url('../assets/img/button-blue-hq.svg')}
.main-btn.green{background-image:url('../assets/img/button-green-hq.svg')}
.main-btn.gold{background-image:url('../assets/img/button-gold-hq.svg')}

/* ---------- Choose level ---------- */
.choose-card{width:min(560px,76vw);height:min(610px,80vh);padding:96px 86px 70px;text-align:center}
.choose-card .close-btn{right:42px;top:42px}
.choose-card h2{margin:0;color:#3b210f;font-size:clamp(44px,4.4vw,62px);font-weight:400;line-height:1.02;letter-spacing:2px}
.choose-buttons{margin-top:70px;display:flex;flex-direction:column;align-items:center;gap:12px}
.wood-btn{width:190px;height:48px;background-image:url('../assets/img/button-wood-hq.svg');font-size:18px}

/* ---------- Leader board ---------- */
.leaderboard-card{width:min(760px,82vw);height:min(720px,84vh);padding:100px 92px 74px;text-align:center;overflow:hidden}
.leaderboard-card .close-btn{right:48px;top:42px}
.leaderboard-card h2{margin:0 0 40px;font-size:clamp(42px,4vw,58px);line-height:1;font-weight:400;letter-spacing:2px;color:#35200f}
.leaderboard-card select{display:block;width:150px;height:44px;margin:0 auto 28px;padding:4px 38px 4px 12px;color:#3b2819;background:#f1dbac;border:1px solid #9f754b;border-radius:7px;font-size:22px;box-shadow:inset 0 1px rgba(255,255,255,.65),0 2px 4px rgba(62,35,15,.14)}
.leaderboard-card table{width:82%;margin:0 auto;border-collapse:collapse;color:#2d1b0e;background:rgba(255,239,203,.10);font-size:clamp(20px,1.8vw,28px)}
.leaderboard-card th,.leaderboard-card td{height:58px;border:1px solid rgba(151,88,49,.54);padding:5px 12px;text-align:center;vertical-align:middle}
.leaderboard-card th{font-weight:700;background:rgba(175,111,58,.09)}
.backend-note{display:none}

/* ---------- How to play ---------- */
.help-card{width:min(1120px,94vw);height:min(880px,94vh);padding:112px 154px 96px;overflow:hidden;background-image:url('../assets/img/scroll-panel-crop.png');background-size:100% 100%}
.help-card .close-btn{right:78px;top:48px}
.help-card h2{margin:0 0 8px;font-size:clamp(28px,2vw,38px);line-height:1.05;font-weight:400;color:#35200f}
.help-card h2:not(:first-of-type){margin-top:18px}
.help-card ul{margin:0 0 8px 26px;padding:0;font-size:clamp(15px,1.02vw,18px);line-height:1.32}
.help-card li{margin:4px 0}

/* ---------- Dice / player setup ---------- */
.setup-overlay{background:rgba(25,17,7,.04)}
.setup-card{width:min(720px,78vw);height:min(650px,82vh);padding:82px 92px 68px;overflow:hidden}
.setup-card .close-btn{right:46px;top:38px}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;width:100%;margin:0 auto}
.setup-player{display:flex;flex-direction:column;align-items:center;min-width:0}
.setup-label{margin:0 0 10px;color:#3a2414;font-size:20px;font-weight:700;letter-spacing:.4px}
.setup-player input{width:100%;height:42px;border:1px solid #a7794e;border-radius:7px;background:#fff7e7;color:#2d1c10;padding:6px 12px;font:18px Arial,sans-serif;outline:0;box-shadow:inset 0 1px 2px rgba(71,39,14,.12)}
.setup-player input:focus{border-color:#7c5232;box-shadow:0 0 0 3px rgba(126,83,46,.14)}
.die{width:92px;height:92px;margin-top:76px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);place-items:center;padding:12px;border:5px solid #6c571d;border-radius:8px;background:#fff06a;box-shadow:0 5px 8px rgba(0,0,0,.25)}
.pip{width:15px;height:15px;border-radius:50%;background:#a80e32;border:2px solid #5a1020}
.setup-actions{width:220px;margin:74px auto 0;display:flex;flex-direction:column;gap:12px}
.setup-btn{width:220px;height:48px;font-size:18px}
#rollBtn{background-image:url('../assets/img/button-blue-hq.svg')}
#stopBtn{background-image:url('../assets/img/button-gold-hq.svg')}
#nextBtn{background-image:url('../assets/img/button-green-hq.svg')}
.setup-btn:disabled{cursor:default;filter:grayscale(.78) brightness(.76);opacity:.82;transform:none}

/* ---------- Gameplay ---------- */
.game-board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96vw;height:88vh;max-width:1840px;max-height:900px;background-image:url('../assets/img/paper-panel-crop.png');filter:drop-shadow(0 7px 9px rgba(35,18,7,.34))}
.game-close{right:6.4%;top:4.2%;width:48px;height:48px}
.board-grid{position:absolute;left:6.8%;right:7.2%;top:7.5%;bottom:8.2%;display:grid;grid-template-columns:minmax(0,42%) minmax(170px,16%) minmax(0,42%);overflow:visible}
.player-column{position:relative;min-width:0;overflow:visible}
.player-head{height:34%;text-align:center;padding-top:10px;font-size:clamp(20px,1.8vw,32px);line-height:1.62;color:#2d1b0e}
.player-name{min-height:42px;margin-bottom:14px;font-size:clamp(25px,2vw,36px);line-height:1.15;font-weight:400}
.player-column.is-active-player .player-name{font-weight:700;text-shadow:0 1px rgba(255,255,255,.45)}
.player-column.is-active-player .player-name:after{content:'';display:block;width:34%;height:2px;margin:5px auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(133,78,35,.72),transparent)}
.hint-btn{display:block;width:220px;height:56px;margin:14px auto 0;border:0;background:transparent url('../assets/img/hint-active-crop.png') center/100% 100% no-repeat;color:transparent!important;font-size:0!important;text-shadow:none!important;padding:0}
.hint-btn:disabled{background-image:url('../assets/img/hint-disabled-crop.png');color:transparent!important;cursor:default;opacity:.92}
.player-play-area{height:66%;padding:22px 10px 0;overflow:visible}
.clue-box{height:78px;display:flex;align-items:center;justify-content:center;gap:5px;overflow:visible}
.glyph-slot{display:inline-flex;flex:0 0 clamp(44px,3.35vw,64px);width:clamp(44px,3.35vw,64px);height:clamp(54px,3.75vw,72px);align-items:center;justify-content:center;background:transparent url('../assets/img/glyph-slot-hq.svg') center/100% 100% no-repeat;color:#25170d;font-family:Georgia,'Times New Roman',serif;font-size:clamp(24px,1.9vw,34px);font-weight:600;line-height:1;text-transform:uppercase;text-align:center;padding:0;font-kerning:normal;font-variant-ligatures:none}
.keyboard-box{--key-size:clamp(42px,2.95vw,58px);display:grid;grid-template-columns:repeat(7,var(--key-size));grid-auto-rows:var(--key-size);gap:7px;justify-content:center;margin:24px auto 0;visibility:hidden}
.keyboard-box.active{visibility:visible}
.keyboard-box button{width:var(--key-size);height:var(--key-size);border:0;background:transparent url('../assets/img/key-sand-crop.png') center/94% 94% no-repeat;color:#58301d;font-family:Georgia,'Times New Roman',serif;font-size:clamp(18px,1.35vw,25px);font-weight:500;line-height:1;text-align:center;padding:0;text-transform:uppercase;text-shadow:none;filter:none;transform:none;opacity:1}
.keyboard-box button.correct-key{background-image:url('../assets/img/key-correct-video.png');background-size:94% 94%;color:#61491f;font-size:clamp(18px,1.35vw,25px);font-weight:500;filter:none;transform:none;opacity:1}
.keyboard-box button.wrong{background-image:url('../assets/img/key-rock-crop.png');background-size:94% 94%;color:transparent!important;text-shadow:none!important;filter:brightness(.82) contrast(1.06);transform:none;opacity:1}
.keyboard-box button:disabled{cursor:default}
.center-column{min-width:0;text-align:center;padding-top:78px;color:#2d1b0e;font-size:clamp(25px,2vw,37px);line-height:2.1;overflow:visible}
#round-box,#timer-box{white-space:nowrap}

/* ---------- Non-blocking gameplay notices ---------- */
.game-toast{position:fixed;z-index:1085;left:50%;top:48%;bottom:auto;transform:translate(-50%,-50%);min-width:320px;max-width:min(620px,82vw);display:flex;align-items:center;justify-content:center;padding:13px 22px;border:1px solid rgba(102,61,28,.58);border-radius:12px;background:rgba(246,220,166,.97);color:#301e11;box-shadow:0 8px 24px rgba(31,18,8,.26),inset 0 1px rgba(255,255,255,.68);font:600 17px/1.3 Georgia,'Times New Roman',serif;pointer-events:none;text-align:center}
.game-toast.hide{display:none!important}.game-toast.show{display:flex!important}
.game-toast-text{width:100%;text-align:center}
.game-toast.tone-turn{background:rgba(232,215,159,.97)}
.game-toast.tone-hint{background:rgba(243,211,139,.98)}
.game-toast.tone-warning{background:rgba(246,193,128,.98)}

/* ---------- Round/game result modal ---------- */
.game-result-modal{background:rgba(26,18,8,.13)}
.game-result-modal .modal-dialog{display:flex!important;align-items:center!important;min-height:calc(100vh - 2rem)!important;max-width:520px!important;margin:1rem auto!important}
.game-result-modal .modal-content{border:0!important;background:transparent!important;box-shadow:none!important}
.game-result-paper{width:100%;min-height:330px!important;padding:82px 68px 58px!important;background:transparent url('../assets/img/paper-panel-crop.png') center/100% 100% no-repeat!important;filter:drop-shadow(0 10px 16px rgba(33,17,7,.38));color:#2c1a0e}
.game-result-kicker{font-size:13px;letter-spacing:3px;text-transform:uppercase;opacity:.66;margin-bottom:10px}
.game-result-title{font:400 38px/1.08 Georgia,'Times New Roman',serif;margin:0 0 14px;color:#2d180d}
.game-result-text{font:19px/1.35 Georgia,'Times New Roman',serif;margin:0 auto 26px;max-width:330px}
.game-result-button{min-width:180px;height:46px;background-image:url('../assets/img/button-green-hq.svg');font-size:18px}
.modal-backdrop.show{opacity:.12!important}

.ui-nudge{animation:jwNudge .34s ease-in-out}
@keyframes jwNudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* ---------- Responsive safeguards ---------- */
@media(max-width:1200px), (max-height:760px){
  .leaderboard-card{width:min(650px,82vw);height:min(620px,86vh);padding:82px 76px 56px}
  .leaderboard-card h2{margin-bottom:26px;font-size:40px}
  .leaderboard-card th,.leaderboard-card td{height:46px;font-size:20px}
  .help-card{width:min(980px,94vw);height:min(790px,94vh);padding:98px 132px 78px}
  .help-card h2{font-size:28px}.help-card ul{font-size:14px;line-height:1.28}
  .setup-card{width:min(620px,82vw);height:min(560px,86vh);padding:68px 78px 52px}
  .die{width:76px;height:76px;margin-top:48px;padding:10px}.pip{width:12px;height:12px}
  .setup-actions{margin-top:52px}
  .game-board{height:90vh}
  .player-head{font-size:22px}.player-name{font-size:26px;margin-bottom:8px}.hint-btn{width:180px;height:46px}
  .center-column{padding-top:54px;font-size:26px}
  .player-play-area{padding-top:14px}.keyboard-box{gap:5px;margin-top:16px}
}
@media(max-width:760px){
  .menu-title{top:7%}.main-menu{transform:translate(-50%,-50%) scale(1)}
  .leaderboard-card,.help-card,.setup-card,.choose-card{width:96vw}
  .help-card{height:min(820px,94vh);padding:90px 72px 68px}
  .board-grid{grid-template-columns:1fr;left:8%;right:8%;top:8%;bottom:8%;overflow:auto}
  .center-column{order:-1;padding-top:0;line-height:1.35}.player-head{height:auto}.player-play-area{height:auto}
}


/* ---------- Phone-first interaction layout ---------- */
@media (max-width:760px), (max-height:500px){
  html,body{width:100%;height:100%;min-height:100%;overflow:hidden;background:#17351f url('../assets/img/jungle-background-mobile.jpg') center/cover no-repeat fixed}
  .menu-page,.game-page{width:100%;height:100%;min-width:0;min-height:100dvh;background:#17351f url('../assets/img/jungle-background-mobile.jpg') center/cover no-repeat fixed}
  .menu-stage{width:100%;height:100dvh;min-height:0}
  .menu-title{top:max(5vh,22px);width:92vw}.menu-title h1{font-size:clamp(38px,12vw,56px);letter-spacing:2px}.menu-title p{margin-top:10px;font-size:clamp(16px,5.2vw,24px);letter-spacing:2px}
  .main-menu{top:56%;width:min(240px,72vw);gap:10px}.main-btn{width:100%;height:52px;font-size:18px}
  .overlay{padding:8px;overflow:auto;background:rgba(18,29,12,.24);align-items:center}
  .parchment{background-image:url('../assets/img/paper-panel-mobile.png')}
  .choose-card,.leaderboard-card,.help-card,.setup-card{width:min(100%,520px)!important;height:min(calc(100dvh - 16px),760px)!important;max-width:none;max-height:none;overflow:auto!important}
  .choose-card{padding:78px 34px 38px}.choose-card .close-btn{right:24px;top:24px}.choose-card h2{font-size:42px}.choose-buttons{margin-top:44px}.wood-btn{width:min(230px,72vw);height:52px}
  .leaderboard-card{padding:72px 22px 34px}.leaderboard-card .close-btn{right:20px;top:20px}.leaderboard-card h2{font-size:36px;margin-bottom:18px}.leaderboard-card select{width:min(180px,60vw);height:44px;margin-bottom:16px;font-size:17px}.leaderboard-card table{width:100%;font-size:15px}.leaderboard-card th,.leaderboard-card td{height:42px;padding:5px 6px}
  .help-card{padding:70px 34px 42px;background-image:url('../assets/img/scroll-panel-mobile.png');background-size:100% 100%;overscroll-behavior:contain}.help-card .close-btn{right:22px;top:20px}.help-card h2{font-size:25px;margin-bottom:8px}.help-card h2:not(:first-of-type){margin-top:16px}.help-card ul{margin-left:18px;font-size:15px;line-height:1.35}.help-card li{margin:7px 0}
  .setup-card{padding:68px 26px 28px}.setup-card .close-btn{right:20px;top:18px}.setup-grid{grid-template-columns:1fr 1fr;gap:12px}.setup-label{font-size:16px}.setup-player input{height:44px;padding:6px 8px;font-size:15px}.die{width:68px;height:68px;margin-top:22px;padding:8px;border-width:4px}.pip{width:10px;height:10px;border-width:1px}.setup-actions{width:min(230px,72vw);margin:24px auto 0;gap:8px}.setup-btn{width:100%;height:48px;font-size:17px}

  /* The phone game is one active player per screen. */
  .game-board{position:fixed;inset:0;left:0;top:0;transform:none;width:100vw;height:100dvh;max-width:none;max-height:none;background:#ead6a4 url('../assets/img/paper-panel-mobile.png') center/100% 100% no-repeat;filter:none;overflow:hidden}
  .game-close{right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));width:44px;height:44px}
  .board-grid{position:absolute;left:10px;right:10px;top:max(54px,calc(env(safe-area-inset-top) + 48px));bottom:max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:hidden}
  .center-column{order:-2;display:flex;flex:0 0 44px;align-items:center;justify-content:center;gap:18px;padding:0 58px 0 4px;font-size:clamp(19px,5.4vw,24px);line-height:1.1;white-space:nowrap}
  #round-box,#timer-box{white-space:nowrap}
  .player-column{display:none;min-width:0;min-height:0;height:calc(100% - 44px);overflow:hidden}
  .player-column.is-active-player{display:flex;flex-direction:column}
  .player-head{flex:0 0 auto;height:auto;padding:2px 4px 0;font-size:clamp(17px,4.8vw,21px);line-height:1.25;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4px 12px}
  .player-name{grid-column:1/-1;min-height:0;margin:0 0 2px;font-size:clamp(22px,6.2vw,28px);line-height:1.1}
  .player-column.is-active-player .player-name:after{width:24%;margin-top:4px}
  .hint-btn{grid-column:1/-1;width:min(210px,58vw);height:48px;margin:5px auto 2px;background-image:url('../assets/img/hint-active-mobile.png')}
  .hint-btn:disabled{background-image:url('../assets/img/hint-disabled-mobile.png')}
  .player-play-area{flex:1;min-height:0;height:auto;padding:4px 0 0;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden}
  .clue-box{flex:0 0 58px;height:58px;gap:3px;overflow:visible;padding:0 2px}
  .glyph-slot{flex-basis:min(10.5vw,42px);width:min(10.5vw,42px);height:min(13vw,52px);font-size:clamp(20px,6vw,26px)}
  .keyboard-box{--key-size:min(11.4vw,44px);flex:0 0 auto;display:grid;grid-template-columns:repeat(7,var(--key-size));grid-auto-rows:var(--key-size);gap:3px;justify-content:center;margin:6px auto 0;visibility:hidden;overflow:visible}
  .keyboard-box.active{visibility:visible}.keyboard-box button{width:var(--key-size);height:var(--key-size);font-size:clamp(16px,5vw,21px);background-image:url('../assets/img/key-sand-mobile.png')}.keyboard-box button.correct-key{background-image:url('../assets/img/key-correct-mobile.png');font-size:clamp(16px,5vw,21px)}.keyboard-box button.wrong{background-image:url('../assets/img/key-rock-mobile.png')}
  .game-toast{top:72px;bottom:auto;min-width:0;width:calc(100vw - 24px);max-width:520px;padding:10px 14px;font-size:14px}
  .game-result-modal{padding:8px!important}.game-result-modal .modal-dialog{min-height:calc(100dvh - 16px)!important;margin:8px auto!important;width:100%!important}.game-result-paper{width:min(100%,480px)!important;min-height:260px!important;padding:64px 30px 38px!important;margin:auto;background:transparent url('../assets/img/paper-panel-mobile.png') center/100% 100% no-repeat!important}.game-result-title{font-size:31px}.game-result-text{font-size:16px;margin-bottom:20px}.game-result-button{min-width:180px;height:48px}
}

/* Short phone landscape: keep the active player's whole turn on one screen. */
@media (max-height:500px){
  .menu-title{top:12px}.menu-title h1{font-size:34px}.menu-title p{font-size:15px;margin-top:6px}.main-menu{top:58%;width:200px}.main-btn{height:44px}
  .choose-card,.leaderboard-card,.help-card,.setup-card{height:calc(100dvh - 8px)!important;width:min(calc(100vw - 8px),760px)!important}
  .help-card{padding:54px 58px 26px}.help-card h2{font-size:20px}.help-card ul{font-size:12px;line-height:1.2}.help-card li{margin:3px 0}
  .setup-card{padding:48px 54px 18px}.setup-grid{gap:36px}.die{width:54px;height:54px;margin-top:8px}.setup-actions{margin-top:10px;flex-direction:row;width:100%;justify-content:center}.setup-btn{width:150px;height:40px}
  .game-close{width:38px;height:38px;top:6px;right:8px}.board-grid{top:38px;bottom:3px;left:14px;right:14px}.center-column{flex-basis:32px;font-size:17px;padding-right:48px}.player-column{height:calc(100% - 32px)}
  .player-head{grid-template-columns:auto auto auto auto;font-size:13px;gap:4px 12px;padding:0 50px 0 6px}.player-name{grid-column:auto;font-size:18px;margin:0}.player-column.is-active-player .player-name:after{display:none}.hint-btn{grid-column:auto;width:120px;height:31px;margin:0}
  .player-play-area{display:grid;grid-template-columns:minmax(250px,.75fr) minmax(360px,1.25fr);align-items:center;gap:8px;padding:0}.clue-box{height:auto;align-self:center}.glyph-slot{flex-basis:min(5.4vw,40px);width:min(5.4vw,40px);height:min(6.6vw,48px);font-size:20px}.keyboard-box{--key-size:min(5.45vw,39px);gap:2px;margin:0 auto;align-self:center}.keyboard-box button,.keyboard-box button.correct-key{font-size:16px}
  .game-toast{top:42px;width:auto;max-width:70vw;padding:7px 12px;font-size:12px}
}