.modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:#0009}.modal-overlay[hidden]{display:none!important}.game-dialog{position:relative;max-height:90dvh;overflow-y:auto;width:min(94vw,550px);padding:28px;border:1px solid #d8b66d;border-radius:20px;background:linear-gradient(115deg,#0b1a25,#050d13 75%);color:#f6ead1}.game-dialog .close{position:absolute;top:10px;right:10px;padding:0;background:none;border:0;color:#f2d7a1;font:34px Georgia;min-width:44px;min-height:44px}.game-dialog .primary{background:linear-gradient(#ffefb8,#e8bd68);color:#172434;border:1px solid #ffe2a0;border-radius:14px;min-height:44px;padding:12px 20px}.game-dialog h2{font:26px Georgia}.game-dialog p{font:16px/1.6 Georgia}#voice-preview-status:empty{display:none}
#modal:is([data-screen=settings],[data-screen=actions]){--panel-gold:#eac477;--gold:#eac477;justify-content:flex-end;padding:0;background:#020b1255;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#modal:is([data-screen=settings],[data-screen=actions]) .game-dialog{width:min(78vw,560px);height:100dvh;max-height:100dvh;margin:0;border:0;border-left:1px solid #efd28f;border-radius:0;background:linear-gradient(115deg,#0b1a25,#050d13 75%);color:#f6ead1;padding:calc(20px + env(safe-area-inset-top)) clamp(14px,3vw,28px) calc(20px + env(safe-area-inset-bottom));box-shadow:-14px 0 38px #0008,inset 2px 0 12px #f4c36312;animation:settings-slide .28s cubic-bezier(.16,1,.3,1) both;scrollbar-width:thin;scrollbar-color:#ba9b58 transparent}
#modal:is([data-screen=settings],[data-screen=actions]) .close{position:fixed;top:calc(14px + env(safe-area-inset-top));right:12px;z-index:10;color:#f2d7a1;font:400 34px Georgia,serif;min-height:44px;min-width:44px}
.settings-header{padding:0 35px 16px 0}.game-dialog .settings-header h2{font:700 clamp(28px,4.7vw,42px)/1.1 Georgia,serif;margin:0;color:#fff0d0;letter-spacing:-.8px}
#modal:is([data-screen=settings],[data-screen=actions]) section{padding:14px 0;border-top:1px solid #cab58b42}#modal:is([data-screen=settings],[data-screen=actions]) h3{display:flex;align-items:center;gap:9px;font:400 clamp(16px,2.3vh,22px)/1.2 Georgia,serif;margin:0 0 13px;color:#f4e6cc}#modal:is([data-screen=settings],[data-screen=actions]) svg{width:23px;height:23px;flex:none;color:var(--panel-gold)}
.settings-switches{display:grid}.settings-switch{display:grid;grid-template-columns:23px minmax(0,1fr) 42px;align-items:center;gap:10px;width:100%;min-height:44px;padding:9px 0;color:inherit;background:none;border:0;border-bottom:1px solid #cab58b30;text-align:left;font:400 clamp(16px,2.2vh,21px) Georgia,serif}.settings-switch:last-child{border-bottom:0}.switch-track{display:block;width:42px;height:24px;position:relative;border-radius:20px;background:#31404b;box-shadow:inset 0 0 0 1px #fff2;transition:background .18s}.switch-track:after{content:'';position:absolute;width:20px;height:20px;top:2px;left:2px;border-radius:50%;background:#fff9e8;box-shadow:0 2px 3px #0005;transition:transform .18s}.settings-switch.active .switch-track{background:linear-gradient(90deg,#b47c28,#f0cd7b)}.settings-switch.active .switch-track:after{transform:translateX(18px)}
.settings-levels{display:grid;gap:8px;margin-top:13px}.settings-levels label{display:grid;grid-template-columns:22px 52px minmax(40px,1fr) 35px;gap:7px;align-items:center;font:400 clamp(14px,1.9vh,18px) Georgia,serif}.settings-levels output{text-align:right;font-size:14px;font-variant-numeric:tabular-nums}.settings-levels input[type=range]{appearance:none;-webkit-appearance:none;padding:0;border:0;border-radius:0;background:transparent;width:100%;min-width:0;height:36px;min-height:36px;margin:0;cursor:pointer}.settings-levels input::-webkit-slider-runnable-track{height:6px;border-radius:8px;background:linear-gradient(to right,#efd088 0,var(--level),#253948 var(--level),#253948 100%)}.settings-levels input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;margin-top:-7px;height:20px;width:20px;border-radius:50%;background:#fff4d4;border:1px solid #e8bd65;box-shadow:0 0 6px #e8bd6555}.settings-levels input::-moz-range-track{height:6px;border-radius:8px;background:#253948}.settings-levels input::-moz-range-progress{height:6px;border-radius:8px;background:#efd088}.settings-levels input::-moz-range-thumb{height:20px;width:20px;border-radius:50%;background:#fff4d4;border:1px solid #e8bd65}
#modal:is([data-screen=settings],[data-screen=actions]) .settings-preview h3{font-size:15px}.settings-playbacks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.settings-playbacks button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:6px 3px;color:inherit;background:linear-gradient(#ffffff04,#ffffff00);border:1px solid #bfae8955;border-radius:12px;font:400 14px Georgia,serif}.settings-playbacks i{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--panel-gold);flex:none}.settings-playbacks i svg{color:#11202a!important;width:13px!important;height:13px!important;fill:currentColor;stroke-width:1}
#modal:is([data-screen=settings],[data-screen=actions]) .sound-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0}.game-dialog .sound-styles button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:67px;padding:9px 2px;background:linear-gradient(#13253088,#07141b88);border:1px solid #bfae8940;border-radius:14px;color:#f4e6cc;font:400 14px Georgia,serif;box-shadow:none}.game-dialog .sound-styles button.active{background:linear-gradient(#ffefb8,#e8bd68);border-color:#ffe2a0;color:#172434;box-shadow:0 0 8px #f6c86b5c,inset 0 0 0 1px #fff4d880}.ambience-wave{display:flex;gap:3px;align-items:center;height:27px;color:#e4b46b}.ambience-wave i{display:block;width:3px;max-height:27px;background:currentColor;border-radius:3px}[data-sound-style=arcade] .ambience-wave{color:#2e95ee}[data-sound-style=relax] .ambience-wave{color:#46d8c7}[data-sound-style=benskin] .ambience-wave{color:#f79b52}[data-sound-style=afrobeats] .ambience-wave{color:#b978df}[data-sound-style=bikutsi] .ambience-wave{color:#eb6670}.sound-styles button.active .ambience-wave{color:#b47b2d}
.settings-theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.settings-theme-grid button{min-width:0;padding:0;background:none;border:0;display:grid;gap:8px;color:inherit;font:400 14px/1.2 Georgia,serif;text-align:center}.theme-preview{display:block;aspect-ratio:1.5;border:1px solid #bfae8980;border-radius:12px;background-position:center;background-size:cover;background-image:url('assets/card-back-ndop.webp');box-shadow:inset 0 0 15px #0004}.settings-theme-grid [data-theme=green] .theme-preview{background-image:url('assets/card-back-green.webp')}.settings-theme-grid [data-theme=wine] .theme-preview{background-image:url('assets/card-back-wine.webp')}.settings-theme-grid button.active .theme-preview{border:2px solid #ffe0a0;box-shadow:0 0 9px #eabb5955}.settings-theme-grid button.active{color:#ffe1a1}
@keyframes settings-slide{from{transform:translateX(100%);opacity:.5}to{transform:translateX(0);opacity:1}}@media(max-width:360px){#modal:is([data-screen=settings],[data-screen=actions]) .game-dialog{width:84vw}.settings-playbacks button{font-size:14px;gap:3px}.settings-levels label{grid-template-columns:18px 47px minmax(35px,1fr) 34px;gap:5px}}@media(min-width:800px){#modal:is([data-screen=settings],[data-screen=actions]) .game-dialog{padding-left:32px;padding-right:32px}.settings-playbacks button{gap:10px}.settings-theme-grid{gap:14px}.settings-switch{min-height:52px}}@media(prefers-reduced-motion:reduce){#modal:is([data-screen=settings],[data-screen=actions]) .game-dialog{animation:none}}
/* Gameplay remains draggable without Safari selecting text or artwork. */
main,main *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
main :is(input,textarea,select,[contenteditable]:not([contenteditable="false"]),[data-allow-selection]),main [data-allow-selection] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
main :is(img,svg,canvas){-webkit-user-drag:none}
/* Keep the last settings row accessible above the phone's bottom edge. */
#modal:is([data-screen=settings],[data-screen=actions]) .game-dialog{overflow:hidden;padding-bottom:calc(30px + env(safe-area-inset-bottom))}
#modal:is([data-screen=settings],[data-screen=actions]) #modalbody{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.settings-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#b69a65 transparent;padding-right:2px}
#modal:is([data-screen=settings],[data-screen=actions]) .settings-themes{position:relative;background:#071119;padding-top:12px;padding-bottom:8px;margin-top:8px}
.settings-theme-grid button{min-height:76px;padding-bottom:5px}.settings-theme-grid button>span:last-child{padding:3px 0;line-height:1.35}
#modal:is([data-screen=online],[data-screen=restart],[data-screen=guide]){background:#020b1280;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#modal:is([data-screen=online],[data-screen=restart],[data-screen=guide]) .game-dialog{background:linear-gradient(115deg,#0b1a25,#050d13 75%);color:#f6ead1;border:1px solid #d8b66d;border-radius:20px;padding:28px 26px calc(28px + env(safe-area-inset-bottom));box-shadow:0 24px 80px #000a,inset 0 0 24px #eac47708;scrollbar-color:#ba9b58 transparent;scrollbar-width:thin}
#modal:is([data-screen=online],[data-screen=restart],[data-screen=guide]) h2{color:#fff0d0;font:700 clamp(26px,6vw,36px)/1.15 Georgia,serif;letter-spacing:-.5px;margin:0 40px 24px 0}
#modal:is([data-screen=online],[data-screen=restart],[data-screen=guide]) .close{background:none;border:0;box-shadow:none;border-radius:0;color:#f2d7a1;font:400 34px Georgia,serif;min-width:44px;min-height:44px}
#modal:is([data-screen=online],[data-screen=restart],[data-screen=guide]) button:focus-visible{outline:2px solid #eac477;outline-offset:3px}
#modal:is([data-screen=online],[data-screen=restart]) .primary{background:linear-gradient(#ffefb8,#e8bd68);color:#172434;border:1px solid #ffe2a0;border-radius:14px;box-shadow:inset 0 0 0 1px #fff4d850,0 4px 14px #0004;font:700 18px/1.2 Georgia,serif;min-width:0;max-width:100%;min-height:48px;padding:12px 20px;white-space:normal}
#modal[data-screen=online] :is(input,select){background:#10232f;color:#f6ead1;border:1px solid #bfae8966;border-radius:12px;min-height:46px;font-size:16px;accent-color:#eac477}
#modal[data-screen=online] :is(input,select):focus{outline:2px solid #eac477;outline-offset:2px}
#modal[data-screen=online] label{color:#f4e6cc}
#modal[data-screen=online] :is(.room-code,.room-members){background:#ffffff04;border-color:#cab58b42;color:#f6ead1}
#modal[data-screen=online] :is(.room-link,.waiting-label){color:#eac477}
#modal[data-screen=guide] h3{color:#eac477;font:700 20px/1.3 Georgia,serif;margin:24px 0 8px;padding-top:15px;border-top:1px solid #cab58b42}
#modal[data-screen=guide] p{color:#f4e6cc;font:400 16px/1.6 Georgia,serif;margin:0 0 12px}
@media(max-width:380px){#modal:is([data-screen=online],[data-screen=restart],[data-screen=guide]) .game-dialog{padding-left:20px;padding-right:20px}}
.plush-icon{display:block;width:100%;height:100%;background-image:url('assets/reactions-plush.png');background-repeat:no-repeat;background-size:200% 200%;background-position:0 0;pointer-events:none}.plush-fire{background-position:100% 0}.plush-cry{background-position:0 100%}.plush-clap{background-position:100% 100%}
.action-menu-list{display:grid;align-content:start;gap:0;border-top:1px solid #cab58b42}.action-menu-row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:center;width:100%;min-height:64px;padding:16px 0;border:0;border-bottom:1px solid #cab58b30;background:none;color:#f6ead1;text-align:left;font:20px/1.3 Georgia,serif}.action-menu-row svg{width:24px;height:24px;color:#eac477}.action-menu-row:hover{color:#ffe2a0}.action-menu-row:focus-visible{outline:2px solid #eac477;outline-offset:3px}
/* The game menu rises from its button's side, at the bottom left. */
#modal[data-screen=actions]{justify-content:flex-start;align-items:flex-end}
#modal[data-screen=actions] .game-dialog{position:relative;width:min(78vw,440px);height:auto;max-height:calc(90dvh - env(safe-area-inset-top));border-left:0;border-top:1px solid #efd28f;border-right:1px solid #efd28f;border-radius:0 20px 0 0;padding:28px 26px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;box-shadow:12px -12px 38px #0008;animation:actions-rise .28s cubic-bezier(.16,1,.3,1) both}
#modal[data-screen=actions] .close{position:absolute;top:12px;right:12px}
@keyframes actions-rise{from{transform:translateY(100%);opacity:.5}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){#modal[data-screen=actions] .game-dialog{animation:none}}
.plush-pray,.plush-no,.plush-shock,.plush-cool,.plush-party{background-image:url('assets/reactions-extra.png');background-size:300% 200%}
.plush-pray{background-position:0 0}.plush-no{background-position:50% 0}.plush-shock{background-position:100% 0}.plush-cool{background-position:0 100%}.plush-party{background-position:50% 100%}
.settings-reactions{padding:20px 0;border-top:1px solid #d9bd8233}.settings-reactions>p{font-size:13px;line-height:1.5}.reaction-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.reaction-choices button{min-height:92px;padding:8px 4px;border:1px solid #d9bd8233;border-radius:12px;background:#071c3266;color:inherit;display:grid;justify-items:center;gap:5px;font-size:11px}.reaction-choices button.active{border-color:#e8c67d;background:#c9a44c22;box-shadow:inset 0 0 0 1px #e8c67d55}.reaction-choices .plush-icon{width:52px;height:52px}.settings-reactions .primary{width:100%;font-size:14px;padding:12px;min-height:44px}.settings-reactions .primary:disabled{opacity:.45;cursor:default}#reaction-choice-status{min-height:20px}
.reaction-choices button{font-family:Georgia,serif;cursor:pointer}.reaction-choices button:focus-visible,.settings-reactions .primary:focus-visible{outline:2px solid #eac477;outline-offset:3px}
.settings-theme-grid [data-theme=money-beac] .theme-preview{background-image:url("assets/table-money-beac-v2.webp")}