/* ميم الجلسة: the site's paper, brown controls, and Sadu; captions are the focus. */
.g-meme-jalsah{--game:var(--teal)}
body.mm-playing #app{max-width:1120px;padding-block:22px 32px}
.mm-page{display:flex;flex-direction:column;gap:18px;min-width:0}
.mm-pill{display:inline-block;padding:5px 13px;border-radius:99px;background:var(--sunk);color:var(--auth);font-size:12px;font-weight:700}
.mm-lobby{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.mm-room{text-align:center}.mm-room .joinQr{margin-inline:auto}.mm-room .joinQr svg{max-width:180px}
.mm-room-code{font-family:var(--display);font-size:32px;letter-spacing:6px;color:var(--auth)}
.mm-code-input{text-align:center;letter-spacing:5px;text-transform:uppercase}
.mm-roster{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;text-align:right}
.mm-roster li{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--sunk);border-radius:10px}
.mm-avatar{width:29px;height:29px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--auth);color:var(--clarity);font-size:12px}
.mm-roster li>b{flex:1;overflow-wrap:anywhere;font-size:14px}.mm-roster small{font-size:11px;font-weight:400;color:var(--muted)}
.mm-roster strong{font-variant-numeric:tabular-nums;font-size:17px}.mm-roster em{font-size:12px;font-style:normal;color:#45623A;margin-inline-start:9px}
.mm-setting{border:0;padding:0;margin:5px 0 16px;min-width:0}.mm-setting legend{font-size:14px;font-weight:700;margin-bottom:9px}
.mm-setting>div{display:flex;gap:6px;flex-wrap:wrap}.mm-choice{font:inherit;flex:1;min-height:42px;border-radius:9px;background:var(--sunk);color:var(--auth);border:1px solid var(--line);padding:7px 10px;font-weight:700;white-space:nowrap}
.mm-choice[aria-pressed=true]{background:var(--auth);color:var(--clarity)}
.mm-round-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.mm-round-heading h2{font-family:var(--kufi);font-size:32px;margin-top:10px;color:var(--auth)}
.mm-clock{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:88px}
.mm-clock>span{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--auth)}.mm-clock small{font-size:10px;color:var(--muted)}.mm-clock .urgent{color:var(--red)}
.mm-progress{color:var(--muted);font-size:13px;margin:0;border-bottom:1px solid var(--line);padding-bottom:10px}
.mm-compose{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:start}
.mm-meme{margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 4px 14px #49352F0C;min-width:0}
.mm-image{position:relative;display:grid;place-items:center;min-height:130px;background:#E9E0D1}
.mm-image img{width:100%;height:auto;max-height:55dvh;object-fit:contain;display:block}
.mm-caption{font-family:var(--body);font-weight:700;font-size:clamp(17px,2vw,27px);line-height:1.55;text-align:center;color:#231F20;background:#fff;padding:13px 16px;overflow-wrap:anywhere;white-space:pre-wrap;min-height:0}
.mm-caption:empty{display:none}
.mm-image-error{padding:20px;text-align:center;font-size:14px;line-height:1.6}.mm-image-error .btn{margin-top:10px;display:block;margin-inline:auto}
.mm-editor{position:sticky;top:20px}.mm-editor h3{font-family:var(--kufi);font-size:25px;color:var(--auth)}
#mm-caption-form{display:flex;flex-direction:column;gap:10px}#mm-caption-form label{font-size:14px;font-weight:500}#mm-caption-form label small{font-size:11px;color:var(--muted)}
#mm-caption-form textarea{font-family:var(--body);font-size:17px;line-height:1.6;min-height:86px;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff;color:var(--resolve);width:100%}
.mm-hint{font-size:12px;color:var(--muted);line-height:1.8;margin:0}.mm-success{text-align:center;padding:22px 4px;display:flex;flex-direction:column;gap:12px}.mm-success>span{font-size:38px;color:#45623A}.mm-success p{color:var(--muted);font-size:14px;line-height:1.8}
.mm-vote-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.mm-option{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:12px;display:flex;flex-direction:column;gap:12px;min-width:0}
.mm-option .mm-meme{flex:1;display:flex;flex-direction:column;border-radius:8px}.mm-option .mm-image{flex:1}.mm-option .mm-image img{max-height:320px}
.mm-option .mm-caption{font-size:clamp(17px,1.8vw,23px);padding:11px}
.mm-option.selected{outline:3px solid var(--teal);outline-offset:1px}.mm-option.winner{border:2px solid #AC8033;background:#F5E8C9}
.mm-option-label{font-size:13px;font-weight:700;color:var(--auth);display:flex;justify-content:space-between;gap:10px}.mm-option-label span{font-size:11px;color:var(--muted);font-weight:400}
.mm-result-by{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}.mm-result-by span{font-size:12px;color:var(--auth)}
.mm-notice{padding:15px 18px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:14px;line-height:1.8}
.mm-final{text-align:center;gap:16px;padding:32px}.mm-final>span{font-size:45px}.mm-final h2{font-family:var(--kufi);font-size:36px;color:var(--auth)}.mm-final p{font-size:23px;font-weight:700}.mm-final strong{font-size:18px;color:var(--muted)}
.mm-page button:focus-visible,.mm-page textarea:focus-visible{outline:3px solid var(--teal);outline-offset:3px}.mm-page .btn:disabled{cursor:default}
@media(min-width:1400px){body.tv.mm-playing #app{max-width:1440px}.tv .mm-vote-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){body.mm-playing #app{padding-block:16px 28px}.mm-page{gap:14px}.mm-lobby,.mm-compose{grid-template-columns:1fr;gap:16px}.mm-editor{position:static}.mm-round-heading h2{font-size:28px}.mm-clock{padding:8px 12px;min-width:75px}.mm-clock>span{font-size:22px}.mm-vote-grid{grid-template-columns:1fr}.mm-caption{font-size:20px}.mm-option .mm-caption{font-size:19px}.mm-image img{max-height:40dvh}.mm-roster li{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.mm-page *{transition:none!important;animation:none!important}}
.mm-image-source{display:block;text-align:center;font-size:10px;line-height:1.6;padding:7px 9px;color:var(--muted);background:var(--surface);text-decoration:underline;text-underline-offset:2px}
.mm-mode>div{display:grid;grid-template-columns:1fr 1fr}.mm-mode .mm-choice{white-space:normal;line-height:1.6;min-height:56px}
.mm-change{margin-bottom:4px}.mm-secret-images{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;min-height:260px}
.mm-secret-images h3{font-family:var(--kufi);font-size:28px;color:var(--auth)}
/* Captions belong to the image canvas, never to white bars outside it. */
.mm-meme .mm-image{min-height:0;display:flex;align-items:center;justify-content:center}
.mm-canvas{position:relative;container-type:inline-size;width:min(100%,calc(var(--mm-image-height,55dvh) * var(--mm-ratio)));flex:none;overflow:hidden;isolation:isolate}
.mm-meme .mm-canvas img{display:block;width:100%;height:100%;max-height:none;object-fit:contain;user-select:none;pointer-events:none}
.mm-text{position:absolute;z-index:1;transform:translateX(-50%);font-family:var(--body);font-weight:700;font-size:calc(var(--mm-font) * 1cqw);line-height:1.2;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;overflow:hidden;min-height:0;padding:0 1px;cursor:default;user-select:none;paint-order:stroke fill;-webkit-text-stroke:.045em var(--mm-stroke);text-shadow:0 1px 2px var(--mm-stroke)}
.mm-text:empty{display:none}
[data-mm-editable] .mm-text{cursor:grab;touch-action:none;border:1px dashed transparent;border-radius:3px}
[data-mm-editable] .mm-text:hover,[data-mm-editable] .mm-text:focus-visible,[data-mm-editable] .mm-text.is-dragging{border-color:var(--teal);outline:1px solid #FBF6EE;outline-offset:1px}
[data-mm-editable] .mm-text.is-dragging{cursor:grabbing}
[data-mm-editable] .mm-text:empty{display:block;min-height:1.4em;border:1px dashed #629BA6;background:#FBF6EE55}
[data-mm-editable] .mm-text:empty:before{content:attr(data-placeholder);opacity:.75}
.mm-option .mm-canvas{--mm-image-height:320px}.mm-option .mm-image{flex:0}
.mm-option .mm-meme{justify-content:center}
.mm-text-controls{border:1px solid var(--line);border-radius:9px;padding:9px 10px;margin:0 0 9px;min-width:0;background:var(--bg)}
.mm-text-controls legend{font-size:11px;padding-inline:5px;color:var(--muted)}
.mm-text-ranges{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#mm-caption-form .mm-text-controls label{font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:7px}
.mm-text-ranges input[type=range]{padding:0;width:100%;min-width:0;height:25px;accent-color:var(--auth);direction:ltr}
.mm-color-choices{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.mm-color-choice,.mm-reset-text{font:inherit;font-size:11px;border-radius:6px;min-height:30px;padding:4px 9px;background:var(--surface);color:var(--auth);border:1px solid var(--line)}
.mm-color-choice[aria-pressed=true]{background:var(--auth);color:var(--clarity)}
.mm-reset-text{margin-inline-start:auto}
@media(max-width:700px){.mm-canvas{--mm-image-height:40dvh}.mm-option .mm-canvas{--mm-image-height:40dvh}.mm-editor .mm-text-controls{padding:7px 9px}.mm-text-ranges{gap:10px}}
.mm-example{margin:14px auto 0;width:min(100%,400px)}.mm-example .mm-canvas{--mm-image-height:360px}
.mm-image.is-failed .mm-canvas{display:none}
.mm-text{line-height:1.4}