:root{--room-cream:#fff8e9;--room-ink:#3c4937;--room-green:#42694a;--room-muted:#7e856d;--room-line:#e0ddc9}
#room-interface{font-family:"Trebuchet MS",Arial,sans-serif;color:var(--room-ink)}
#room-interface *{box-sizing:border-box}#room-interface [hidden]{display:none!important}
.room-page{position:fixed;inset:0;z-index:5;overflow:auto;background:#354d3c35;padding:27px max(25px,calc((100vw - 1160px)/2));backdrop-filter:blur(2px);touch-action:pan-y}
.room-brand{display:flex;align-items:center;gap:12px;color:#fff8e9;font-size:12px;font-weight:bold;letter-spacing:1.3px;text-shadow:0 1px 5px #293e39}
.room-compass{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid #e0d4a6;background:#fff8e9;border-radius:50%;color:#b27d3e;font-size:33px;text-shadow:none}
.room-brand small{display:block;font-size:11px;letter-spacing:0;font-weight:normal;margin-top:4px}.room-edition{margin-left:auto;font-size:10px;letter-spacing:.5px;background:#fff8e9eb;color:var(--room-green);padding:10px 16px;border-radius:22px;text-shadow:none}
.room-book{display:grid;grid-template-columns:1fr 1fr;gap:46px;max-width:1060px;margin:35px auto 0;background:var(--room-cream);padding:14px 42px 14px 14px;border:1px solid #e9e2c7;border-radius:27px;box-shadow:0 25px 80px #203b3045}
.room-story{background:#e9edd7;border-radius:19px;padding:35px 25px 23px;overflow:hidden}.room-eyebrow{display:block;font-size:10px;letter-spacing:1.5px;font-weight:bold;color:var(--room-green)}
.room-story h1{font:normal 47px/1.1 Georgia,serif;letter-spacing:-1.5px;margin:19px 0;color:var(--room-ink)}.room-story>p{font-size:13px;line-height:1.8;color:#68765b;margin:0}.room-portraits{width:100%;height:auto;margin:3px 0 -6px;filter:drop-shadow(0 5px 2px #8f9f6320)}
.room-route{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:8px;letter-spacing:.4px;font-weight:bold;color:#647c51;border-top:1px solid #cdd5b7;padding-top:17px}.room-route i{font-style:normal;color:#aebc8d}.room-story .room-note{font-size:10px;line-height:1.7;margin-top:22px;color:var(--room-muted)}
.room-form{align-self:center;padding:22px 0 16px;min-width:0}.room-form h2{font:normal 31px Georgia,serif;margin:13px 0 10px}.room-subtitle{font-size:12px;color:var(--room-muted);line-height:1.5;margin:0 0 24px}
.room-form label{display:block;font-size:9px;letter-spacing:1.1px;font-weight:bold;color:var(--room-muted);margin:16px 0 8px}
.room-form input,.room-form select{width:100%;font:14px "Trebuchet MS",Arial,sans-serif;color:var(--room-ink);padding:13px 14px;border:1.5px solid #dfdfca;border-radius:10px;background:#fffdf5;outline:none;min-width:0;transition:border-color .15s,box-shadow .15s}
.room-form input:focus,.room-form select:focus{border-color:#76915f;box-shadow:0 0 0 3px #a3b68030}.room-form select{font-size:12px}.room-form input::placeholder{color:#a1a48d}
.room-primary,.room-secondary,.room-text,.lobby-code{font-family:inherit;cursor:pointer;border:none;transition:background .15s,transform .15s}.room-primary:active,.room-secondary:active{transform:translateY(1px)}
.room-primary{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:16px 18px;margin-top:18px;background:var(--room-green);color:var(--room-cream);font-size:13px;font-weight:bold;border-radius:11px;box-shadow:0 3px 0 #304b35}.room-primary:hover{background:#355c3d}.room-primary span{font-size:19px}.room-primary:disabled,.room-secondary:disabled{opacity:.6;cursor:wait;box-shadow:none}.room-create-fields>small{display:block;font-size:9px;color:var(--room-muted);text-align:center;margin-top:12px}
.room-divider{display:flex;align-items:center;gap:9px;margin:24px 0 18px;font-size:8px;letter-spacing:.5px;color:#999e84}.room-divider:before,.room-divider:after{content:"";height:1px;background:var(--room-line);flex:1}.room-divider span{white-space:nowrap}.room-join-row{display:flex;gap:9px}.room-join-row input{text-transform:uppercase;letter-spacing:1.3px;font-size:12px;width:100%}.room-secondary{border:1px solid #d7dac2;background:#e9edd7;color:var(--room-green);border-radius:10px;padding:11px 15px;font-size:11px;font-weight:bold;white-space:nowrap}.room-secondary:hover{background:#dbe4c4}.room-feedback{font-size:11px;color:#aa6246;line-height:1.5;min-height:17px;margin:13px 0 0}.room-text{background:transparent;color:var(--room-muted);padding:10px 0;font-size:10px;text-decoration:underline;text-underline-offset:3px}.room-text:hover{color:var(--room-green)}
.room-page-footer{text-align:center;font-size:10px;color:#fff8e9;margin:20px 0;text-shadow:0 1px 4px #304534}.room-invitation{margin:28px 0 8px;padding:20px;background:#e9edd7;border:1px dashed #b7c397;border-radius:12px;text-align:center;font-size:9px;letter-spacing:1px;color:var(--room-muted)}.room-invitation strong{display:block;font-size:30px;letter-spacing:5px;margin:12px 0;color:var(--room-green)}.room-invitation span{display:block;font-size:11px;letter-spacing:0}.room-entry-fields>.room-text{width:100%;margin-top:12px}
.lobby-overlay{position:fixed;inset:0;z-index:4;pointer-events:none;padding:22px}.lobby-overlay button,.lobby-code{pointer-events:auto}.lobby-top{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.lobby-title{display:flex;min-width:0;gap:13px;align-items:center;background:#fff8e9ed;border:1px solid #e1d9ba;border-radius:17px;padding:16px 21px;box-shadow:0 5px 20px #33483015}.lobby-title h1{font:normal 26px Georgia,serif;margin:7px 0}.lobby-title p{font-size:10px;color:var(--room-muted);margin:0}.lobby-title .room-compass{width:48px;height:48px}.lobby-room-card{pointer-events:auto;background:#fff8e9f5;border:1px solid #e1d9ba;padding:14px 18px;border-radius:16px;text-align:center;min-width:210px;box-shadow:0 5px 20px #33483015}.lobby-room-card .room-eyebrow{font-size:8px}.lobby-code{display:block;font-size:27px;letter-spacing:5px;font-weight:bold;background:none;color:var(--room-ink);padding:10px 0 12px;width:100%;user-select:text}.lobby-copy{width:100%;padding:9px 12px;font-size:10px}
.lobby-roster{position:absolute;right:22px;bottom:160px;width:235px;background:#fff8e9e8;border:1px solid #e1d9ba;padding:17px;border-radius:14px}.lobby-roster>span{font-size:9px}.lobby-roster ul{list-style:none;padding:0;margin:13px 0 0;max-height:210px;overflow:auto;pointer-events:auto;touch-action:pan-y}.lobby-roster li{display:flex;gap:8px;align-items:center;border-top:1px solid #e4e2cf;padding:10px 0;font-size:11px}.lobby-roster li i{width:7px;height:7px;border-radius:50%;flex:none}.lobby-roster li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px}.lobby-roster li small{font-size:7px;margin-left:auto;color:var(--room-muted)}
.lobby-you{position:absolute;left:22px;bottom:132px;background:#fff8e9eb;border:1px solid #e1d9ba;padding:16px 19px;border-radius:15px}.lobby-you .room-eyebrow{font-size:8px}.lobby-avatar{display:block;font:normal 24px Georgia,serif;margin-top:7px}.lobby-controls{display:block;font-size:10px;color:var(--room-muted);margin-top:8px}.lobby-leave{display:block;padding-bottom:0}
.lobby-bottom{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:min(780px,calc(100% - 44px));display:flex;align-items:center;gap:25px;background:#fff8e9f5;border:1px solid #e1d9ba;border-radius:17px;padding:17px 22px;box-shadow:0 7px 25px #33483020}.lobby-bottom>div{flex:1}.lobby-bottom p{font-size:12px;line-height:1.5;margin:8px 0 0;color:var(--room-muted)}.lobby-start{width:210px;flex:none;margin:0}.lobby-feedback{position:absolute;left:50%;bottom:130px;transform:translateX(-50%);font-size:12px;background:#38513af5;color:var(--room-cream);border-radius:12px;padding:15px 22px;text-align:center;max-width:90%}
@media(min-width:1500px){.room-page{padding-top:45px}.room-book{margin-top:55px}.room-story{padding-top:45px;padding-bottom:35px}.room-story h1{font-size:53px}}
@media(max-height:760px) and (min-width:741px){.room-page{padding-top:16px}.room-book{margin-top:18px}.room-story h1{font-size:40px}.room-story{padding:25px 22px 20px}.room-portraits{max-height:145px}.room-story .room-note{margin-top:14px}.room-form{padding-top:12px;padding-bottom:4px}.room-subtitle{margin-bottom:15px}.room-form label{margin-top:12px}.room-divider{margin-top:18px;margin-bottom:12px}.room-page-footer{margin:12px 0}}
@media(max-width:740px){.room-page{padding:16px 14px}.room-brand{font-size:10px;letter-spacing:.8px}.room-brand small{font-size:9px}.room-brand .room-compass{width:35px;height:35px;font-size:26px}.room-edition{display:none}.room-book{display:block;padding:10px;margin-top:19px;border-radius:21px}.room-story{padding:23px 20px 17px;border-radius:14px}.room-story h1{font-size:35px;line-height:1.13;margin:11px 0 9px}.room-story h1 br{display:none}.room-story>p{font-size:11px}.room-story>p br{display:none}.room-story .room-note{display:none}.room-portraits{height:110px;object-fit:contain;margin:-22px 0 -5px}.room-route{padding-top:11px;font-size:7px}.room-form{padding:24px 16px 9px}.room-form h2{font-size:29px;margin-top:10px}.room-form-eyebrow{font-size:8px}.room-subtitle{font-size:11px;margin-bottom:19px}.room-page-footer{font-size:9px;padding:0 9px}.room-invitation{margin-top:20px}.lobby-overlay{padding:11px}.lobby-top{gap:8px}.lobby-title{padding:12px;gap:9px;flex:1}.lobby-title .room-compass{display:none}.lobby-title h1{font-size:20px;margin:7px 0}.lobby-title .room-eyebrow{font-size:7px;letter-spacing:.9px}.lobby-title p{font-size:8px;line-height:1.5}.lobby-room-card{min-width:132px;width:132px;padding:12px 10px}.lobby-room-card .room-eyebrow{font-size:6px;letter-spacing:.7px}.lobby-code{font-size:17px;letter-spacing:2px;padding:9px 0}.lobby-copy{font-size:8px;padding:8px 4px}.lobby-roster{top:auto;bottom:185px;right:11px;width:155px;padding:11px}.lobby-roster .room-eyebrow{font-size:7px}.lobby-roster ul{max-height:110px;margin-top:8px}.lobby-roster li{font-size:9px;gap:5px;padding:8px 0}.lobby-roster li small{font-size:5px}.lobby-roster li span{max-width:73px}.lobby-you{bottom:154px;left:auto;right:11px;padding:12px;width:155px}.lobby-you .room-eyebrow{font-size:6px;letter-spacing:.6px}.lobby-avatar{font-size:20px}.lobby-controls{font-size:8px;line-height:1.5}.lobby-leave{font-size:8px}.lobby-bottom{bottom:11px;width:calc(100% - 22px);padding:13px;gap:12px}.lobby-bottom .room-eyebrow{font-size:7px;letter-spacing:.8px}.lobby-bottom p{font-size:9px;margin-top:6px}.lobby-start{width:145px;padding:12px;font-size:11px}.lobby-start span{font-size:17px}.lobby-feedback{bottom:132px;font-size:10px;width:85%;padding:12px}.room-feedback{font-size:10px}}

.room-random{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:12px;padding:13px 15px;font-size:12px;background:#e8ecd6;border-style:dashed}.room-random span{font-size:20px;line-height:1}.room-join-row input{letter-spacing:5px;font-size:16px}.lobby-code{letter-spacing:9px;font-size:31px}
@media(max-width:740px){.lobby-code{font-size:24px;letter-spacing:7px;padding:6px 0 9px}.room-random{font-size:11px}}

/* Entry: the original Kuni Animals logo, two fields and no decorative panels. */
#room-interface .room-entry{display:grid;place-items:center;position:fixed;inset:0;padding:36px 24px;overflow:auto;background:#f6f4eb;backdrop-filter:none;touch-action:pan-y}
#room-interface .entry-content{width:min(100%,330px);margin:auto;transform:translateY(-18px)}
#room-interface .entry-logo{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:39px;color:#37553e}
#room-interface .entry-logo svg{width:43px;height:43px}
#room-interface .entry-logo span{font:400 36px/1.15 "Bree Serif",Georgia,serif;letter-spacing:-.9px;white-space:nowrap}
#room-interface .entry-form{display:flex;flex-direction:column;width:100%;margin:0;padding:0;gap:0}
#room-interface .entry-form label{font-size:13px;font-weight:700;letter-spacing:0;margin:0 0 8px;color:#49604a}
#room-interface .entry-form input{display:block;width:100%;height:49px;border:1px solid #d7ddcd;border-radius:9px;padding:12px 14px;background:#fdfcf7;color:#334e39;font:500 15px "Nunito",sans-serif;outline:none;box-shadow:none;transition:border-color .15s,box-shadow .15s}
#room-interface .entry-form input::placeholder{color:#9ba693;font-size:13px;letter-spacing:0}
#room-interface .entry-form input:focus{border-color:#78966d;box-shadow:0 0 0 3px #8caa6c1c}
#room-interface .entry-form input+label{margin-top:21px}
#room-interface .entry-form input[name=code]{letter-spacing:4px;font-variant-numeric:tabular-nums}
#room-interface .entry-submit{display:block;width:100%;height:49px;margin-top:25px;border:0;border-radius:9px;box-shadow:none;background:#42694a;color:#fffaf0;font:800 15px "Nunito",sans-serif;cursor:pointer;transition:background .15s}
#room-interface .entry-submit:hover{background:#365c3e}
#room-interface .entry-random{display:block;align-self:center;padding:7px 0;margin-top:16px;border:0;border-radius:4px;background:none;color:#73836a;font:500 12px "Nunito",sans-serif;cursor:pointer;text-underline-offset:4px}
#room-interface .entry-random:hover{color:#37553e;text-decoration:underline}
#room-interface .entry-submit:disabled,#room-interface .entry-random:disabled{opacity:.55;cursor:wait}
#room-interface .entry-submit:focus-visible,#room-interface .entry-random:focus-visible{outline:2px solid #78966d;outline-offset:4px}
#room-interface .entry-form .room-feedback{margin:15px 0 0;min-height:0;font-size:12px;line-height:1.5;text-align:center;color:#a2644b}
@media(max-width:480px){#room-interface .entry-content{transform:none}#room-interface .entry-logo{margin-bottom:34px}#room-interface .entry-logo span{font-size:33px}}
@media(max-height:570px){#room-interface .room-entry{padding-top:22px;padding-bottom:22px}#room-interface .entry-content{transform:none}#room-interface .entry-logo{gap:9px;margin-bottom:22px}#room-interface .entry-logo svg{width:32px;height:32px}}

/* Kuni Animals visual bible v05: cream, hero yellow and warm brown outlines. */
:root{--room-cream:#fff8e9;--room-ink:#642d16;--room-green:#5b8f4e;--room-muted:#887552;--room-line:#e4d5b4}
#room-interface .room-entry{background:#fff8e9}
#room-interface .entry-content{position:relative;z-index:1;transform:translateY(-10px)}
#room-interface .room-entry>.entry-leaves{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#room-interface .entry-logo{display:block;margin:0 auto 27px;width:min(100%,310px);color:#642d16}
#room-interface .entry-brand-image{display:block;width:100%;height:auto;object-fit:contain}
#room-interface .entry-form label{color:#642d16}
#room-interface .entry-form input{border:2px solid #642d163b;background:#fffdf7;color:#642d16;border-radius:12px}
#room-interface .entry-form input::placeholder{color:#a19172}
#room-interface .entry-form input:focus{border-color:#5b8f4e;box-shadow:0 0 0 3px #5b8f4e17}
#room-interface .entry-submit{background:#f8c83d;color:#642d16;border:2px solid #642d16;border-radius:12px;font-weight:900;box-shadow:0 2px 0 #642d16}
#room-interface .entry-submit:hover{background:#ffda59}
#room-interface .entry-random{color:#5b8f4e}
#room-interface .entry-random:hover{color:#642d16}
#room-interface .entry-submit:focus-visible,#room-interface .entry-random:focus-visible{outline-color:#5b8f4e}
.lobby-brand-image{width:103px;height:auto;flex:none;object-fit:contain}
@media(max-width:480px){#room-interface .entry-logo{width:265px;margin-bottom:25px}#room-interface .entry-content{transform:none}}
@media(max-width:740px){.lobby-brand-image{width:64px}.lobby-title{gap:9px}}
@media(max-height:650px){#room-interface .entry-logo{width:230px;margin-bottom:19px}#room-interface .entry-content{transform:none}}

.lobby-load-summary{margin-top:12px}.lobby-load-text{display:block;font-size:11px;line-height:1.4;color:#642d16;margin-bottom:7px}
.lobby-roster progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:9px;border:1px solid #642d16;border-radius:9px;overflow:hidden;background:#f1e4c8}
.lobby-roster progress::-webkit-progress-bar{background:#f1e4c8}.lobby-roster progress::-webkit-progress-value{background:#f8c83d}.lobby-roster progress::-moz-progress-bar{background:#f8c83d}
.lobby-roster li.has-loading{display:grid;grid-template-columns:7px minmax(0,1fr);gap:5px 8px;align-items:center}
.lobby-roster li.has-loading>span{max-width:none}.lobby-roster li.has-loading small{grid-column:2;margin:0;font-size:9px;line-height:1.4}
.lobby-roster li.has-loading progress{grid-column:2}.lobby-roster li[data-ready=true] progress::-webkit-progress-value{background:#5b8f4e}.lobby-roster li[data-ready=true] progress::-moz-progress-bar{background:#5b8f4e}
@media(max-width:740px){.lobby-load-text{font-size:10px}.lobby-roster li.has-loading small{font-size:8px}.lobby-roster li.has-loading{gap:4px 5px}}

/* The meeting glade uses the same warm outlined panels and yellow action as the game. */
#room-interface .lobby-title,#room-interface .lobby-room-card,#room-interface .lobby-roster,#room-interface .lobby-you,#room-interface .lobby-bottom{background:#fff8e9f2;border:2px solid #642d16;border-radius:18px;box-shadow:0 4px 0 #642d1640,0 12px 28px #3e341f20}
#room-interface .lobby-title h1,#room-interface .lobby-avatar{font-family:"Bree Serif",Georgia,serif;color:#642d16}
#room-interface .lobby-title p,#room-interface .lobby-controls,#room-interface .lobby-status{color:#6d5d43}
#room-interface .lobby-code{color:#642d16;font-family:"Bree Serif",Georgia,serif}
#room-interface .lobby-copy{background:#e4eed4;color:#315c37;border:2px solid #642d16;font-weight:800}
#room-interface .lobby-copy:hover{background:#d1e5bd}
#room-interface .lobby-start{background:#f8c83d;color:#642d16;border:2px solid #642d16;font-weight:900;box-shadow:0 4px 0 #642d16}
#room-interface .lobby-start:hover{background:#ffda59}
#room-interface .lobby-start:disabled{box-shadow:none;background:#e2d5ab;color:#73624d}
#room-interface .lobby-roster li{border-top-color:#d4c19e}