:root{font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;background:#f7f4e8;color:#193b40;--lime:#d6f477;--ink:#193b40}*{box-sizing:border-box}body{margin:0}header,footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:auto;padding:25px 6vw;max-width:1280px}header{border-bottom:1px solid #193b401a}header>span,.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800}.brand{font-size:20px;text-decoration:none;color:var(--ink)}.brand strong{background:var(--lime);padding:3px 6px;border-radius:6px}main{max-width:1120px;min-height:72vh;margin:auto;padding:45px 30px 70px}.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center}.hero img{width:100%;max-width:390px;transform:rotate(-5deg);filter:drop-shadow(0 20px 20px #193b4026)}h1{font-size:clamp(42px,7vw,86px);line-height:.97;letter-spacing:-3px;margin:23px 0 28px;font-weight:900}p{font:16px/1.7 system-ui;max-width:510px;color:#52716c}.eyebrow{color:#477a5a}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.button{display:inline-flex;justify-content:center;align-items:center;min-height:52px;padding:15px 23px;border:0;border-radius:15px;text-decoration:none;color:var(--ink);font:800 15px system-ui;cursor:pointer}.primary{background:var(--lime);box-shadow:0 4px 0 #9ab94a}.light{background:#e2e9d9}.text{display:inline-block;background:none;border:0;color:#52716c;font:700 13px system-ui;padding:18px 0;cursor:pointer}a{color:#366d55}button:disabled{opacity:.45;cursor:default}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #e8a95f;outline-offset:4px}.how{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid #193b401a;margin-top:65px;padding-top:30px}.how p{font-size:13px}.card{background:#fffdf5;border:1px solid #193b401a;border-radius:24px;padding:25px;max-width:480px;display:grid;gap:18px;box-shadow:0 15px 45px #193b4008}.card label{display:grid;gap:9px;font:700 13px system-ui}input{font:16px system-ui;min-height:47px;max-width:100%;border:1px solid #193b4038;border-radius:10px;background:white;padding:11px;color:#193b40}.card .check{display:flex;align-items:center;gap:10px}.check input{width:20px;min-height:20px;accent-color:#688b3b}.card>small{font:11px/1.5 system-ui;color:#71877c}.roster{display:grid;gap:10px;max-width:480px;margin:20px 0}.person{border-radius:14px;padding:15px 18px;background:#e2e9d9;display:flex;justify-content:space-between;gap:15px;font:700 14px system-ui}.person.ready{background:#d6efaa}.person span{font-size:12px;color:#52716c}.directory{display:grid;gap:14px;max-width:600px}.directory a{padding:20px;background:#e2e9d9;border-radius:14px;text-decoration:none;display:flex;justify-content:space-between}#error{background:#ffe1cc;border:1px solid #d89568;padding:15px 20px;border-radius:13px;color:#7c4427}footer{font:12px system-ui;border-top:1px solid #193b401a;color:#52716c}#back{display:inline-block;margin-bottom:15px;font:700 13px system-ui}[hidden]{display:none!important}@media(max-width:650px){main{padding:30px 22px 50px}.hero{grid-template-columns:1fr}.hero img{max-width:210px;grid-row:1;margin:0 auto}.hero h1{margin-top:15px}.how{grid-template-columns:1fr;gap:10px;margin-top:35px}.card{padding:20px}.actions{flex-direction:column}header,footer{padding:20px 22px;flex-wrap:wrap}header>span{font-size:9px}h1{letter-spacing:-2px}}@media(prefers-reduced-motion:no-preference){.button{transition:transform .15s}.button:hover{transform:translateY(-2px)}}

header nav{display:flex;gap:18px;align-items:center;font:700 13px system-ui}header nav a{text-decoration:none;min-height:40px;display:flex;align-items:center}
#site-language{max-width:155px;min-height:40px;padding:6px 8px;border:1px solid #193b4026;border-radius:10px;background:#fffdf5;color:var(--ink);font:700 12px system-ui}
html[dir=rtl] h1{letter-spacing:0}html[dir=rtl] .play-option{text-align:right}
@media(max-width:1000px){header>span{display:none}header{gap:12px}header nav{gap:12px}}
.card .profile-picker{display:grid;grid-template-columns:42px minmax(0,1fr);gap:5px 8px;align-items:center}
.profile-picker>span{grid-column:1 / -1}.profile-picker img{object-fit:contain;max-width:100%}
.profile-picker select{width:100%;min-width:0;min-height:44px;border:1px solid #193b4038;border-radius:10px;background:white;color:var(--ink);font:16px system-ui;padding:8px}
.person-portrait{object-fit:contain;flex-shrink:0}.person strong{align-self:center;overflow-wrap:anywhere}.person>span{align-self:center;margin-left:auto;white-space:nowrap}
.person-choice{width:48px;height:48px;flex-shrink:0;padding:3px;display:grid;place-items:center;border:0;border-radius:12px;background:#ffffff80;cursor:pointer}
.person-choice:disabled{cursor:default;opacity:1}

@media (min-width:650px) and (max-height:550px){
 header{padding:9px 22px;gap:12px}header .brand{font-size:17px}header nav{gap:15px}header nav a{min-height:34px}
 main{padding:12px 22px 24px}#back{margin-bottom:9px}h1{font-size:38px;letter-spacing:-1.5px;margin:10px 0 14px}
 #room{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,1fr);column-gap:22px;row-gap:6px;align-items:start}
 #room>.eyebrow{grid-column:1;grid-row:1}#room>h1{grid-column:1;grid-row:2;margin:2px 0 4px;font-size:34px;overflow-wrap:anywhere}
 #room-detail{grid-column:1;grid-row:3;margin:0;font-size:13px;line-height:1.4}
 #room-roster{grid-column:1;grid-row:4;margin:3px 0 0;gap:6px}.person{padding:10px 12px;font-size:12px}
 #join-form,#room-controls{grid-column:2;grid-row:1 / span 5;max-width:none;width:100%;padding:12px;gap:8px}
 #room-controls{grid-template-columns:repeat(2,minmax(0,1fr))}#room-controls>*{grid-column:1 / -1}
 #room-controls .button,#join-form .button{min-height:44px;padding:10px 14px}
 #room-controls .check{min-height:40px;cursor:pointer}
 #room-note{font-size:12px;line-height:1.4;margin:2px 0}
 #room-controls #leave,#room-controls #close{grid-column:auto;min-height:40px;padding:8px 0}
 #join-form label{gap:5px}#join-form input{min-height:42px;padding:8px}
}

.play-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0 10px}.play-option{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:26px;border:1px solid #193b401a;border-radius:24px;background:#fffdf5;text-align:left;text-decoration:none;color:var(--ink);font:inherit;cursor:pointer}.play-option:first-child{background:var(--lime)}.play-option strong{font:800 21px system-ui}.play-option span{font:14px/1.65 system-ui;color:#45635c}.play-help{font-size:13px;max-width:750px}@media(max-width:750px){.play-options{grid-template-columns:1fr;gap:12px}.play-option{padding:22px;gap:8px}}

/* A landscape phone has desktop width but very little height. Keep the
   complete form and its primary action on screen, with a separate keyboard
   fallback below instead of scaling the whole page or clipping the controls. */
@media (min-width:650px) and (max-height:550px) {
 body{min-height:100svh;min-height:100dvh;display:flex;flex-direction:column}
 header,footer{width:100%;flex-shrink:0}
 header{height:50px;padding:4px max(22px,env(safe-area-inset-right)) 4px max(22px,env(safe-area-inset-left))}
 footer{min-height:34px;padding:6px 22px;font-size:11px}
 main{width:100%;flex:1;min-height:0;padding:8px 22px 12px}
 #back{margin:0 0 8px;min-height:24px;display:inline-flex;align-items:center}
 #new{display:grid;grid-template-columns:minmax(155px,.65fr) minmax(0,1.7fr);gap:6px 22px;align-items:start}
 #new>.eyebrow{grid-column:1;grid-row:1}
 #new>h1{grid-column:1;grid-row:2;font-size:clamp(26px,4vw,38px);margin:4px 0;letter-spacing:-1px;overflow-wrap:anywhere}
 #create-form{grid-column:2;grid-row:1 / span 3;max-width:none;width:100%;padding:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
 #create-form label{gap:5px;font-size:12px;min-width:0}
 #create-form input:not([type=checkbox]){width:100%;min-height:44px;padding:9px;font-size:16px}
 #create-form label small{display:inline;font-size:10px;font-weight:400}
 #create-form .check{align-self:center;min-height:44px;font-size:11px;line-height:1.3}
 #create-form .check input{flex-shrink:0;width:22px;height:22px}
 #create-form>.button{grid-column:2;min-height:48px;padding:11px 16px}
 #create-form>small{grid-column:1 / -1;font-size:10px;line-height:1.4}
 #directory>h1,#queue>h1,#play>h1{font-size:30px;margin:6px 0 12px;line-height:1.05}
 #directory>h1 br,#queue>h1 br,#play>h1 br{display:none}
 #invitation-form{max-width:none;padding:12px;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px}
 #invitation-form label{gap:5px;font-size:12px}
 #invitation-form input{width:100%;min-height:44px;padding:9px}
 #invitation-form button{align-self:end;min-height:48px;padding:10px 16px}
 #invitation-form small{grid-column:1 / -1}
 .directory{max-width:none;max-height:110px;overflow:auto;margin-top:10px;overscroll-behavior:contain}
 .directory a{min-height:48px;padding:12px}
 #directory>.text{padding:8px 0;min-height:36px}
 #queue{display:grid;grid-template-columns:1fr 1.4fr;gap:6px 20px;align-items:start}
 #queue>.eyebrow,#queue>h1,#queue>p{grid-column:1;margin:0 0 6px}
 #queue>p{font-size:12px;line-height:1.5}
 #queue-form,#queue-active{grid-column:2;grid-row:1 / span 4;width:100%;max-width:none;padding:12px;gap:10px}
 #queue-roster{margin:0;gap:5px}
 #queue-active #queue-roster{grid-template-columns:repeat(2,minmax(0,1fr))}
 #queue-roster .person{min-width:0;padding:9px;gap:5px}
 #queue-roster .person strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #queue-note{margin:0;font-size:12px;line-height:1.4}
 #queue-active .text{padding:6px;min-height:36px}
 #home .hero{gap:20px;grid-template-columns:1.5fr .7fr;align-items:center}
 #home h1{font-size:36px;margin:8px 0 10px}
 #home .hero p{font-size:13px;line-height:1.5;margin:8px 0}
 #home .hero img{max-height:180px;object-fit:contain}
 #home .actions{margin-top:12px;gap:8px}
 #home .button{min-height:48px;padding:10px 14px;font-size:13px}
 #home .text{min-height:36px;padding:8px 0}
 #home .how{display:none}
 #play{display:grid;grid-template-columns:minmax(170px,.75fr) minmax(0,1.65fr);gap:4px 18px}
 #play>.eyebrow,#play>h1,#play>p:not(.play-help),#play>.text{grid-column:1;margin:0 0 6px}
 #play>p{font-size:12px;line-height:1.45}
 #play>.text{padding:6px 0;min-height:36px;font-size:12px}
 #play .play-options{grid-column:2;grid-row:1 / span 4;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;gap:8px}
 .play-option{padding:12px;gap:8px;min-height:150px}
 .play-option strong{font-size:16px}.play-option span{font-size:11px;line-height:1.45}
 #play>.play-help{grid-column:1 / -1;font-size:11px;max-width:none;margin:4px 0 0}
}

@media (min-width:650px) and (max-height:400px) {
 header{height:44px}footer{min-height:30px;padding-top:4px;padding-bottom:4px}
 main{padding-top:6px;padding-bottom:8px}#back{min-height:22px;margin-bottom:4px}
 #create-form{padding:10px;gap:8px 12px}
 #create-form label{gap:4px}
 #create-form input:not([type=checkbox]){min-height:42px;padding:8px}
 #create-form>small{font-size:9px}
 #room-controls,#join-form{padding:10px;gap:6px}
 #room-controls .button,#join-form .button{min-height:48px}
 #room-controls .check{min-height:36px}
 #room-controls #leave,#room-controls #close{min-height:36px;padding:6px 0}
 #room-note{margin:0;font-size:11px;line-height:1.35}
}

/* With an on-screen keyboard or a very short browser viewport, preserve
   readable text and allow the focused form to scroll rather than hiding it. */
@media (min-width:650px) and (max-height:300px) {
 body{min-height:100dvh}
 header{height:42px}main{padding-top:6px}
 #new>h1{font-size:24px}
 #create-form{padding:10px;gap:8px}
}