/* Lobby styling is isolated from the fixed gameplay scene. */
body:not(.in-room){background:#f4f4e8;overflow:hidden}
body:not(.in-room) #app{height:100dvh;overflow:hidden}
body:not(.in-room) .app-header{height:78px;padding:0 max(24px,calc((100vw - 1320px)/2));gap:24px;background:#fffcef;border-bottom:2px solid #e0d9bc;box-shadow:0 3px 0 #c9c79b24}
.brand-name{display:flex;flex-direction:column;line-height:1.05;gap:5px}
.brand-name small{font:800 9px/1 system-ui;letter-spacing:2.1px;color:#80917d}
body.in-room .brand-name small{display:none}
body:not(.in-room) .brand{font-size:27px;letter-spacing:-1px}
body:not(.in-room) .brand-mark{width:43px;height:46px;border-radius:15px;background:linear-gradient(#36c4c5,#0b8b99);box-shadow:0 4px 0 #066c773d}
.lobby-nav{display:flex;align-items:center;gap:7px;flex:1;justify-content:center}
.lobby-nav a,.lobby-nav button{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#587069;border:0;background:none;text-decoration:none;padding:11px 16px;border-radius:13px;font-size:15px;font-weight:800;min-height:44px}
.lobby-nav .icon{width:20px;height:20px}
.lobby-nav a:hover,.lobby-nav button:hover{background:#e9efdc}
.lobby-nav .nav-current{background:#dff1e6;color:#087a7c;box-shadow:inset 0 -3px #1c9d8a20}
body:not(.in-room) .header-tools{gap:8px}
.header-profile{width:43px;height:44px;border:2px solid #f8eed4;border-bottom:4px solid #bfa575;border-radius:15px;background:linear-gradient(#fff6ce,#e4c98f);color:#947040;display:grid;place-items:center;box-shadow:0 0 0 1px #d7c18f;flex-shrink:0}
.header-profile .icon{width:24px;height:24px}
.lobby{height:calc(100dvh - 78px);min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:30px 24px 36px;scrollbar-color:#bdcbb3 #f4f4e8;scrollbar-width:thin;background:radial-gradient(ellipse at 20% 0,#d8efe35e,transparent 50%),radial-gradient(ellipse at 95% 25%,#f6e6b869,transparent 45%),#f4f4e8;scroll-behavior:smooth}
.lobby-inner{display:block;max-width:1280px;margin:auto}
.lobby-top{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:stretch}
.lobby .card{border:2px solid #d9d5b5;border-bottom:5px solid #bdb98c;border-radius:24px;background:#fffdf3;box-shadow:0 8px 0 #c4c4a315,0 15px 35px #6c82650c;padding:24px}
.lobby .card:before{inset:5px;border-radius:18px;opacity:.85;pointer-events:none}
.lobby .eyebrow{font-size:11px;letter-spacing:1.25px;line-height:1.5;color:#67764a;margin:0 0 10px;overflow-wrap:anywhere}
.profile-card{text-align:center;display:flex;flex-direction:column;align-items:stretch;justify-content:center;position:relative}
.profile-avatar{width:86px;height:86px;margin:0 auto 15px;border:4px solid #fff8de;border-radius:27px;background:#d4eee1 url('/watercity/art/town-scene.png') -21px -29px/960px auto;box-shadow:0 4px 0 #bdc39a,0 0 0 2px #c6d1ae}
.profile-card .eyebrow{color:#0d9190;letter-spacing:1.3px;margin-bottom:14px}
.profile-card .field-label{text-align:left;color:#65796b;font-size:12px;margin:0 0 6px}
.profile-card .name-row{margin:0;gap:6px;align-items:stretch}
.profile-card .name-row input{min-height:42px;border-radius:12px;font-weight:800;font-size:15px;padding:8px 10px;border-color:#ddd6b7}
.profile-card .name-row .icon-button{height:43px;width:42px;border-radius:12px;flex-shrink:0}
.name-hint{text-align:left;font-size:11px;color:#65775d;margin:5px 0 15px}
.profile-card .stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:14px 0;border-top:1px solid #e7e4d0;border-bottom:1px solid #e7e4d0}
.profile-card .stat-grid>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.profile-card .stat-grid strong{font-size:22px;line-height:1.1;color:#078a8a;font-weight:900}
.profile-card .stat-grid span{font-size:10px;color:#819078;overflow-wrap:anywhere}
.journey-progress{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 6px;text-align:left;margin-top:17px;color:#71836c;font-size:11px}
.journey-progress strong{font-size:13px;color:#3d745c}
.journey-progress progress{appearance:none;grid-column:1/-1;width:100%;height:9px;border:0;border-radius:9px;overflow:hidden;background:#e6e9d5;color:#24aba1}
.journey-progress progress::-webkit-progress-bar{background:#e6e9d5;border-radius:9px}
.journey-progress progress::-webkit-progress-value{background:linear-gradient(90deg,#51cbb4,#139d9e);border-radius:9px}
.journey-progress progress::-moz-progress-bar{background:#24aba1;border-radius:9px}
.profile-note{font-size:11px;line-height:1.55;color:#61765b;margin:13px 0 0}
.lobby .hero-card{min-height:430px;overflow:hidden;isolation:isolate;padding:36px 32px;display:flex;align-items:center;background:#fffbed;border-color:#dfd1a1;border-bottom-color:#c5ae72}
.hero-copy{position:relative;z-index:2;max-width:57%;min-width:0}
.hero-copy .eyebrow{color:#9f8a4f;font-size:10px}
.hero-copy h1{font-size:clamp(29px,2.85vw,43px);line-height:1.08;letter-spacing:-1.3px;color:#205e5d;margin:0 0 18px;max-width:15ch;text-wrap:balance}
.hero-copy .intro{font-size:15px;line-height:1.65;color:#526f5d;margin:0 0 17px;max-width:38ch}
.hero-tags{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 20px;max-width:420px}
.hero-tags>span{display:flex;gap:5px;align-items:center;padding:6px 8px;border:1px solid #dedfc5;background:#f9fae9db;color:#65795f;border-radius:8px;font-size:10px;font-weight:800;white-space:nowrap}
.hero-tags .icon{width:15px;height:15px;color:#76a988}
.lobby .play-actions{display:flex;flex-wrap:wrap;gap:9px;margin:0}
.lobby .play-actions .button{min-height:49px;padding:11px 15px;font-size:14px;flex:none;grid-column:auto;border-radius:13px;white-space:normal;text-align:center}
.lobby .button.primary{background:linear-gradient(#35c4b4,#079c9e);border-color:#159793;border-bottom:5px solid #057079;box-shadow:inset 0 2px 0 #a0efcf9e,0 4px 0 #087d7920;color:#fffdef;text-shadow:0 1px #0a838080}
.lobby .button.secondary{background:linear-gradient(#fff9db,#f0e1b1);border-color:#dbcc9a;border-bottom:5px solid #b9a46f;color:#758264;box-shadow:inset 0 2px 0 #fffefa}
.lobby .button:hover:not(:disabled){filter:brightness(1.025);transform:translateY(-1px)}
.play-note{display:block;max-width:39ch;font-size:10px;line-height:1.5;margin-top:12px;color:#63734c}
.lobby .mini-town.hero-visual{position:absolute;z-index:0;right:0;top:0;bottom:0;width:47%;height:auto;margin:0;border:0;border-radius:0;background:#dbedd5;overflow:hidden}
.lobby .mini-town.hero-visual img{display:block;position:absolute;width:100%;height:100%;left:0;top:0;object-fit:cover;object-position:50% 64%;max-width:none;transform:none}
.lobby .mini-town.hero-visual:after{content:'';position:absolute;inset:0;box-shadow:none;background:linear-gradient(90deg,#fffbed 0%,#fffbedaa 6%,transparent 29%),linear-gradient(0deg,#9c824b21,transparent 30%);pointer-events:none}
.hero-sticker{position:absolute;z-index:2;right:17px;bottom:20px;max-width:190px;display:flex;gap:9px;align-items:center;padding:11px 13px;background:#fff5ce;border:3px solid #fffbde;border-radius:16px;box-shadow:0 4px 0 #b7a568,0 6px 17px #39531d33;color:#487655;transform:rotate(-4deg)}
.hero-sticker .icon{width:29px;height:29px;color:#0ca2b0;flex-shrink:0}
.hero-sticker b{font-size:12px;line-height:1.3;text-align:left}
.welcome>.difficulty{display:none}
.how-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:25px 0;padding:20px 24px;border:1px solid #dadfc1;border-radius:19px;background:#fdfdf1}
.how-strip>div{display:flex;align-items:center;gap:12px;min-width:0}
.step-number{font-size:11px;font-weight:800;color:#bfc5a0;align-self:flex-start;padding-top:5px}
.how-icon{color:#55a69a;flex-shrink:0;width:34px;height:39px;display:flex;align-items:center}
.how-icon .icon{width:32px;height:32px;stroke-width:1.6}
.how-strip p{margin:0;min-width:0}
.how-strip p strong{display:block;font-size:13px;color:#5c795f;margin-bottom:4px}
.how-strip p span{display:block;font-size:11px;line-height:1.5;color:#65795e}
.room-section{scroll-margin-top:18px}
.room-section .section-heading{margin-bottom:20px;gap:20px;align-items:center}
.room-section .eyebrow{margin-bottom:4px;color:#a2ab7b}
.room-section h2{font-size:25px;color:#49715c;letter-spacing:-.7px;margin-bottom:6px}
.rooms-note{font-size:13px;line-height:1.6;color:#61775f;margin:0}
.rooms-count{display:flex;align-items:center;gap:7px;flex-shrink:0;color:#839678;background:#f4f8e8;border:1px solid #dde6c9;border-radius:11px;padding:9px 11px;font-size:11px}
.rooms-count .icon{width:18px;height:18px;color:#75a98c}
.rooms-count b{color:#348772}
.room-section .join-row{max-width:470px;margin-bottom:18px;gap:8px}
.room-section .join-row input{border-color:#ddd9bd;background:#fffef7;font-size:14px;min-height:46px;letter-spacing:1.3px}
.room-section .join-row .button{min-height:46px;padding:9px 15px;font-size:13px;white-space:nowrap}
.room-section .empty-rooms{background:#f8faed;border:1.5px dashed #d1debd;padding:22px;text-align:center}
.room-section .empty-rooms .icon{width:30px;height:30px;color:#a6c5a4;margin-bottom:6px}
.room-section .empty-rooms h3{font-size:17px;color:#79916d}
.room-section .empty-rooms p{font-size:12px;color:#6b805f;margin-top:5px;max-width:48ch}
.room-section .room-row{background:#fdfdf3;border-color:#dce3c9}
.room-section .room-info small{font-size:12px}
.game-editorial{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:65px;padding:43px 4px 28px;scroll-margin-top:22px}
.game-editorial h2{font-size:23px;line-height:1.25;letter-spacing:-.6px;color:#426f5c;margin:0 0 16px;text-wrap:balance}
.game-editorial .eyebrow{color:#9eab8a;margin-bottom:7px}
.editorial-copy>p{color:#536b5d;font-size:14px;line-height:1.9;margin-bottom:15px}
.editorial-copy>h2:not(:first-of-type){margin-top:30px;font-size:20px}
.control-list{display:grid;gap:12px;margin:0}
.control-list>div{padding-left:13px;border-left:3px solid #d3e4c5}
.control-list dt{font-weight:800;color:#698467;font-size:13px;margin-bottom:4px}
.control-list dd{color:#5e755a;font-size:13px;line-height:1.7;margin:0}
.game-faq{border-bottom:1px solid #dce2cb;padding:0}
.game-faq summary{font-size:13px;color:#698667;font-weight:800;line-height:1.6;min-height:52px;cursor:pointer;padding:14px 18px 14px 0;list-style-position:inside}
.game-faq[open] summary{color:#168b85}
.game-faq p{color:#5a7358;font-size:13px;line-height:1.8;margin:0 0 17px}
.related-games{margin-top:25px;padding:20px;border:1px solid #dbe4c5;border-radius:17px;background:#f9fbee}
.related-games h2{font-size:17px;margin:0 0 10px}
.related-games a{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:#6e8f6e;font-weight:700;font-size:13px;padding:9px 0}
.related-games a:hover{color:#048d91}
.related-games .icon{width:17px;height:17px}
.lobby-footer{padding-top:24px;margin:0;text-align:center;color:#647b55;border-top:1px solid #dfe4cf;font-size:11px}
.lobby-footer p{margin:0 0 10px}
.lobby-footer nav{display:flex;justify-content:center;gap:19px}
.lobby-footer a{font-size:11px;color:#627752;text-decoration:none;padding:5px}
.lobby-footer a[aria-current]{color:#258f80;font-weight:800}
.build-label{display:block;text-align:center;color:#adb69d;font-size:10px;margin-top:13px}
@media(min-width:1700px){.hero-copy h1{font-size:44px}.lobby{padding-top:37px}}
@media(max-width:1120px){body:not(.in-room) .app-header{padding-inline:20px;gap:16px}.lobby-nav{gap:2px}.lobby-nav a,.lobby-nav button{padding:10px 11px;font-size:14px}.lobby-top{grid-template-columns:225px minmax(0,1fr);gap:17px}.lobby .hero-card{padding:29px 25px}.hero-copy{max-width:62%}.hero-copy h1{font-size:32px}.hero-copy .intro{font-size:14px;max-width:31ch}.hero-copy .eyebrow{font-size:9px}.lobby .mini-town.hero-visual{width:45%}.hero-sticker{right:11px;bottom:16px;max-width:150px}.hero-sticker b{font-size:10px}.hero-sticker .icon{width:23px;height:23px}.game-editorial{gap:38px}.lobby .card{padding:21px}.lobby .hero-card{padding:29px 25px}.how-strip{padding:19px;gap:17px}.step-number{display:none}}
@media(max-width:850px){body:not(.in-room) .app-header{height:114px;flex-wrap:wrap;align-content:center;justify-content:space-between;gap:10px;padding:12px 20px}.lobby-nav{order:3;flex-basis:100%;height:36px;justify-content:center}.lobby-nav a,.lobby-nav button{min-height:36px;padding:8px 18px;font-size:13px}.lobby{height:calc(100dvh - 114px);padding:22px 18px 30px}.lobby-top{grid-template-columns:200px minmax(0,1fr);gap:15px}.lobby .hero-card{min-height:420px;padding:25px 22px}.hero-copy{max-width:76%}.hero-copy h1{font-size:30px}.hero-copy .intro{font-size:13px;max-width:27ch}.lobby .mini-town.hero-visual{width:42%;opacity:.64}.lobby .mini-town.hero-visual:after{background:linear-gradient(90deg,#fffbed,transparent)}.hero-sticker{display:none}.hero-tags>span{font-size:9px}.lobby .play-actions{max-width:210px}.lobby .play-actions .button{font-size:13px;min-height:45px}.lobby .card{padding:18px}.lobby .hero-card{padding:25px 22px}.profile-card .stat-grid strong{font-size:19px}.profile-card .stat-grid span{font-size:9px}.profile-note{font-size:10px}.journey-progress{font-size:10px}.how-strip{gap:16px;padding:18px}.how-strip>div{gap:8px}.how-icon{width:25px}.how-icon .icon{width:24px}.how-strip p strong{font-size:12px}.how-strip p span{font-size:10px}.rooms-count{display:none}.game-editorial{gap:27px}.game-editorial h2{font-size:21px}.editorial-copy>p{font-size:13px}}
@media(max-width:620px){body:not(.in-room) .app-header{height:111px;padding:10px 13px;gap:9px}.lobby-nav{justify-content:space-around;gap:4px}.lobby-nav a,.lobby-nav button{font-size:12px;flex:1;padding:8px 4px;gap:5px}.lobby-nav .icon{width:17px;height:17px}body:not(.in-room) .brand{font-size:22px;gap:8px}body:not(.in-room) .brand-mark{width:36px;height:39px;border-radius:13px}.brand-name small{font-size:8px;letter-spacing:1.7px}.brand-name{gap:4px}body:not(.in-room) .header-tools{gap:5px}body:not(.in-room) .header-tools .icon-button,body:not(.in-room) .language-picker select{height:37px;min-height:37px;width:36px;border-radius:11px;padding:5px}body:not(.in-room) .language-picker select{width:auto;font-size:11px}body:not(.in-room) .header-tools .icon-button .icon{width:18px;height:18px}.header-profile{width:36px;height:37px;border-radius:12px}.header-profile .icon{width:20px;height:20px}.lobby{height:calc(100dvh - 111px);padding:15px 12px 27px}.lobby-top{display:flex;flex-direction:column-reverse;gap:15px}.lobby .hero-card{min-height:385px;padding:25px 20px;border-radius:23px}.hero-copy{max-width:75%}.hero-copy h1{font-size:31px;letter-spacing:-.9px;max-width:13ch;margin-bottom:13px}.hero-copy .eyebrow{font-size:8px;letter-spacing:1px;max-width:28ch}.hero-copy .intro{font-size:13px;line-height:1.65;max-width:29ch;margin-bottom:13px}.hero-tags{gap:4px;margin-bottom:15px;max-width:250px}.hero-tags>span{font-size:9px;padding:5px 6px;gap:4px}.hero-tags .icon{width:13px;height:13px}.lobby .play-actions{max-width:235px;gap:7px;flex-direction:column;align-items:flex-start}.lobby .play-actions .button{min-height:44px;font-size:13px;padding:10px 13px}.lobby .mini-town.hero-visual{width:42%;opacity:.7}.play-note{font-size:9px;max-width:25ch}.profile-card{display:grid;grid-template-columns:70px minmax(0,1fr);gap:0 15px;text-align:left;padding:17px!important;justify-content:normal}.profile-avatar{grid-column:1;grid-row:1/5;align-self:center;width:65px;height:70px;margin:0;background-size:760px auto;background-position:-17px -22px;border-radius:21px;border-width:3px}.profile-card .eyebrow{font-size:10px;margin-bottom:8px}.profile-card .field-label{display:none}.profile-card .name-row{grid-column:2}.profile-card .name-row input{font-size:14px;min-height:37px}.profile-card .name-row .icon-button{height:38px;min-height:38px;width:37px}.name-hint{margin:4px 0 8px;font-size:9px}.profile-card .stat-grid{grid-column:1/-1;padding:13px 0;margin-top:10px}.profile-card .stat-grid strong{font-size:21px}.profile-card .stat-grid span{font-size:11px}.journey-progress{grid-column:1/-1;margin-top:13px;font-size:11px;gap:8px}.profile-note{grid-column:1/-1;font-size:10px;line-height:1.5;margin-top:10px}.how-strip{grid-template-columns:1fr;margin:18px 0;gap:17px;padding:18px}.how-strip>div{gap:13px}.how-icon{width:32px;height:32px}.how-icon .icon{width:30px;height:30px}.how-strip p strong{font-size:13px}.how-strip p span{font-size:12px;max-width:37ch;line-height:1.55}.room-section h2{font-size:23px}.room-section .section-heading{margin-bottom:15px}.room-section .eyebrow{font-size:9px}.rooms-note{font-size:12px}.room-section .join-row{gap:6px}.room-section .join-row input{font-size:12px;padding:9px;min-height:44px}.room-section .join-row .button{font-size:11px;padding:9px 11px;min-height:44px;gap:6px}.room-section .join-row .button .icon{width:16px;height:16px}.room-section .empty-rooms{padding:20px 14px}.room-section .empty-rooms h3{font-size:16px}.room-section .room-row{flex-wrap:wrap}.room-info{min-width:100px}.game-editorial{grid-template-columns:1fr;gap:32px;padding:32px 5px 25px}.game-editorial h2{font-size:23px}.editorial-copy>p{font-size:14px;line-height:1.85}.game-faq summary{font-size:14px;min-height:55px}.game-faq p{font-size:14px}.control-list dt,.control-list dd{font-size:13px}.lobby-footer{font-size:10px;line-height:1.6}.lobby-footer nav{gap:15px}}
@media(max-width:359px){body:not(.in-room) .app-header{padding-inline:10px}body:not(.in-room) .brand{font-size:19px}body:not(.in-room) .brand-mark{width:31px;height:35px}.header-tools{gap:4px!important}body:not(.in-room) .header-tools .icon-button,.header-profile{width:32px!important}.lobby .hero-card{padding:23px 17px;min-height:405px}.hero-copy{max-width:82%}.hero-copy h1{font-size:29px}.hero-copy .intro{max-width:26ch}.lobby .mini-town.hero-visual{width:37%;opacity:.58}.hero-tags>span{font-size:8px}.hero-tags .icon{width:12px;height:12px}.profile-card{grid-template-columns:58px minmax(0,1fr);gap:0 11px}.profile-avatar{width:54px;height:62px;background-size:650px auto;background-position:-14px -19px}}
@media(prefers-reduced-motion:reduce){.lobby{scroll-behavior:auto}.lobby .button{transition:none}}

.hero-copy h1{max-width:none}.hero-copy h1>span{display:block}.hero-copy h1>small{display:block;font-size:21px;line-height:1.25;letter-spacing:-.4px;margin-top:8px;max-width:26ch;font-weight:800;color:#52816e}@media(max-width:850px){.hero-copy h1>small{font-size:18px;max-width:24ch}}@media(max-width:620px){.hero-copy h1{font-size:37px}.hero-copy h1>small{font-size:19px;line-height:1.3}.hero-copy .intro{max-width:27ch}.lobby .hero-card{min-height:405px}}

/* Keep the HTML description visible while the game connects, including failed startup. */
body:not(.in-room) .loading{inset:auto 18px 18px auto;max-width:min(380px,calc(100vw - 28px));padding:13px 16px;flex-direction:row;flex-wrap:wrap;gap:12px;border:2px solid #d0d7b6;border-bottom:4px solid #b0bc91;border-radius:17px;background:#fffbed;box-shadow:0 10px 30px #375b3920}
body:not(.in-room) .loading-drop{width:32px;height:35px;border-radius:11px;border-width:2px;box-shadow:0 3px 0 #13757c22;animation:none;flex-shrink:0}
body:not(.in-room) .loading-drop .icon{width:22px;height:22px}
body:not(.in-room) .loading p{font-size:13px;margin:0;max-width:26ch;text-align:left;line-height:1.5}
body:not(.in-room) .loading .button{font-size:12px;min-height:38px;margin:0;padding:8px 12px}
.lobby .play-actions .button{font-size:15px}
@media(max-width:620px){.lobby .play-actions .button{font-size:15px;min-height:49px}.profile-card .name-row input,.profile-card .name-row .icon-button{min-height:44px;height:44px}.profile-card .name-row .icon-button{width:43px}}
.lobby .room-section{min-height:0}
.lobby .room-section .room-list{min-height:120px}