*{box-sizing:border-box}html,body{margin:0;height:100%;width:100%;overflow:hidden}body{height:100dvh;background:#91d7d4;color:#344d45;font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;font-size:15px;user-select:none}button,input{font:inherit}button{cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{opacity:.55;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #327f79;outline-offset:4px}#world{position:absolute;inset:0;touch-action:none}canvas{display:block;width:100%;height:100%}header{position:absolute;z-index:3;top:calc(24px + env(safe-area-inset-top));left:calc(30px + env(safe-area-inset-left));right:calc(30px + env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:center;pointer-events:none}.wordmark{display:flex;gap:12px;align-items:center;line-height:1.05;font-size:20px;font-weight:800;letter-spacing:1px;text-shadow:0 1px #fff9}.wordmark b{display:block;font-size:24px;letter-spacing:2.6px}.wordmark small{display:block;margin-top:8px;letter-spacing:1.5px;font-size:8px}.brand-face{position:relative;display:grid;place-items:center;background:#f6eed7;border:5px solid #fff7e0;box-shadow:0 4px 0 #3e736321;border-radius:17px;width:55px;height:47px;color:#427871;font-size:25px;letter-spacing:0;transform:rotate(-7deg)}.round{width:48px;height:48px;border:1px solid #fff9;background:#fff8e9ed;border-radius:17px;box-shadow:0 4px 0 #44655018;font-size:21px;pointer-events:auto}#hud{position:absolute;top:calc(33px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;font-size:10px;font-weight:800;letter-spacing:1.4px;white-space:nowrap}#area i{color:#ba8650;margin:0 9px}#wallet{background:#fff5d9;border:1px solid #fff7;padding:11px 16px;border-radius:25px;color:#876a39;font-size:12px;letter-spacing:.3px}#wallet b{font-size:18px;margin:0 5px}#quest{position:absolute;top:calc(112px + env(safe-area-inset-top));left:30px;display:flex;text-align:left;align-items:center;gap:12px;max-width:345px;border:1px solid #fff9;border-radius:18px;padding:13px 16px;background:#fffbedeb;box-shadow:0 4px 0 #365b4712}#quest small{display:block;font-size:8px;letter-spacing:1.3px;color:#8c9c7c;margin-bottom:5px}#quest strong{font-size:13px}.quest-icon{font-size:26px;color:#8fa864}#quest>span:last-child{font-size:23px;margin-left:10px;color:#91a28a}#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.label{position:absolute;transform:translate(-50%,-100%);font-size:10px;font-weight:bold;white-space:nowrap;background:#fff9e9ed;border-radius:12px;padding:5px 10px;box-shadow:0 2px 0 #53735221}.label span{color:#a6b27b;margin-right:5px}.label.player-label{background:#386c60e8;color:white}.label.bubble{white-space:normal;max-width:190px;min-width:90px;font-size:12px;text-align:center;padding:10px;overflow-wrap:anywhere}#toast{position:absolute;z-index:15;top:calc(180px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:#355f53f2;color:#fffaf0;max-width:90%;padding:13px 20px;border-radius:16px;text-align:center;display:none;font-size:13px;box-shadow:0 4px 15px #335a5422}#controls{position:absolute;inset:0;pointer-events:none}#pad{position:absolute;bottom:calc(50px + env(safe-area-inset-bottom));left:calc(36px + env(safe-area-inset-left));width:110px;height:110px;border:2px solid #fff7;border-radius:50%;background:#fff8df55;color:#517963;pointer-events:auto;touch-action:none;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px;box-shadow:inset 0 0 0 7px #fff3}#pad>span{font-size:15px;opacity:.6}#pad small{font-size:8px;letter-spacing:2px}#pad i{position:absolute;top:32px;left:32px;width:42px;height:42px;border:2px solid #fff9;background:#fdf5dfca;border-radius:50%;box-shadow:0 4px 0 #4d675d16;pointer-events:none}#action-wrap{position:absolute;right:calc(36px + env(safe-area-inset-right));bottom:calc(70px + env(safe-area-inset-bottom));text-align:center}#interact{pointer-events:auto;border:3px solid #fff9;background:#fff6dd;border-radius:25px;min-height:63px;min-width:156px;padding:0 22px;box-shadow:0 5px 0 #657b4d36;display:flex;align-items:center;justify-content:center;gap:12px}#interact span{font-size:25px;color:#be9050}#interact b{font-size:15px}#interact:enabled:active{transform:translateY(3px);box-shadow:0 2px 0 #657b4d36}#target{margin-bottom:10px;font-size:11px;background:#fff7e5d9;border-radius:13px;padding:7px 12px;max-width:230px}#bag{position:absolute;bottom:calc(77px + env(safe-area-inset-bottom));left:calc(169px + env(safe-area-inset-left))}footer{position:absolute;left:30px;right:30px;bottom:calc(17px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;color:#37685f;font-size:9px;font-weight:700;letter-spacing:.5px;pointer-events:none}dialog{width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 32px);border:1px solid #fffdf2;border-radius:27px;padding:32px;background:#fffbef;color:#3f584e;box-shadow:0 20px 90px #14393233;overflow:auto;overscroll-behavior:contain}dialog::backdrop{background:#294d4544;backdrop-filter:blur(3px)}dialog h1{font-size:34px;letter-spacing:-1px;margin:12px 0}dialog h2{font-size:27px;margin:12px 0 18px;letter-spacing:-.8px}dialog p{font-size:14px;line-height:1.7;color:#708072}dialog small.hint{display:block;color:#8b9a84;font-size:10px;line-height:1.7;margin-top:18px;text-align:center}.eyebrow{font-size:9px;font-weight:bold;letter-spacing:2px;color:#869872}.close{position:absolute;right:14px;top:12px;background:#edf0df;border:0;border-radius:50%;width:36px;height:36px;font-size:24px}#welcome{text-align:center}#welcome label,#panel-body form label{display:block;text-align:left;font-size:9px;letter-spacing:1px;font-weight:bold;margin:15px 0 7px}input{width:100%;padding:12px 14px;color:#344f45;background:#f0f1e3;border:1px solid #dbe2cb;border-radius:12px;user-select:text}input[type=color]{height:44px;padding:5px}button.primary{width:100%;background:#567b59;color:#fffbed;border:1px solid #46734b;padding:14px 18px;border-radius:14px;margin-top:16px;font-weight:700;min-height:48px}.primary span{float:right}.secondary{display:block;width:100%;border:1px solid #dce4ce;background:#f0f2e3;padding:12px;border-radius:12px;margin-top:10px;min-height:46px}.welcome-robot{position:relative;display:grid;place-items:center;margin:26px auto 24px;width:92px;height:70px;border:9px solid #e8d8b6;border-radius:24px;background:#28443e;color:#9fe0c0;font-size:41px;box-shadow:0 6px 0 #c5cba3}.welcome-robot i{position:absolute;top:-40px;right:-9px;font-size:35px;color:#8dac59;font-style:normal}.dialog-reward{background:#f2ead2;padding:12px;border-radius:12px;color:#967d46;font-weight:700;font-size:12px}.puzzle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.pipe{height:72px;background:#e4ede2;color:#548e82;border:2px solid #c9dacc;border-radius:13px;position:relative}.pipe svg{display:block;width:100%;height:100%}.pipe.active{background:#d3ebd7;border-color:#6d9e75}.pipe:active{background:#bcd9c7}.puzzle-flow{display:flex;justify-content:space-between;font-size:10px;font-weight:800;letter-spacing:1px;color:#61968c}.placement-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:15px 0}.placement-grid button{aspect-ratio:1;border:1px solid #d2ddc4;border-radius:8px;background:#e7e6cc;font-size:20px}.placement-grid button:disabled{background:#f6f2e4;opacity:.65}.placement-grid .selected{border:3px solid #4a8267;background:#d0dfbc}.item-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.item-row button{padding:12px;border:1px solid #d8dfc6;border-radius:10px;background:#edf0df}.item-row button.selected{background:#ccdec1;border-color:#6d9367}.save-detail{font-size:12px!important;overflow-wrap:anywhere}.rcRoomQrCodeLink{display:block;background:white;color:#456151;padding:14px;text-align:center;text-decoration:none;border-radius:14px}.rcTechLabel{font-size:12px;font-weight:bold;margin-bottom:8px}.rcRoomQrCode{display:block;margin:auto;width:150px;height:150px}.rcRoomId{font-size:17px;margin-top:8px;letter-spacing:3px}.menu-links{display:flex;justify-content:center;gap:20px;margin-top:20px;font-size:12px}.menu-links a{color:#698566}body.lean dialog::backdrop{backdrop-filter:none}body.lean *{box-shadow:none!important}
@media(orientation:portrait){#world{bottom:calc(136px + env(safe-area-inset-bottom))}header{top:calc(18px + env(safe-area-inset-top));left:18px;right:18px}.wordmark{font-size:16px;gap:8px}.wordmark b{font-size:19px;letter-spacing:1.8px}.wordmark small{font-size:6px;letter-spacing:1px}.brand-face{width:43px;height:39px;font-size:20px;border-width:4px;border-radius:12px}#hud{top:calc(92px + env(safe-area-inset-top));left:18px;right:18px;transform:none;justify-content:space-between;font-size:8px;gap:7px}#area i{margin:0 4px}#wallet{padding:7px 10px;font-size:10px}#wallet b{font-size:14px}#quest{top:calc(145px + env(safe-area-inset-top));left:18px;max-width:calc(100% - 36px);padding:10px 12px;border-radius:15px}#quest strong{font-size:12px}#quest small{font-size:7px}#toast{top:calc(220px + env(safe-area-inset-top));width:calc(100% - 40px);font-size:12px}#controls{top:auto;height:calc(136px + env(safe-area-inset-bottom));background:#edf0dc;border-top:1px solid #fff8}#pad{width:88px;height:88px;left:25px;bottom:calc(27px + env(safe-area-inset-bottom));background:#dbe4c9;border-color:#f9fbea}#pad i{left:24px;top:24px;width:36px;height:36px;background:#fffbea}#bag{left:131px;bottom:calc(51px + env(safe-area-inset-bottom));width:42px;height:42px;border-radius:14px}#action-wrap{right:20px;bottom:calc(39px + env(safe-area-inset-bottom))}#interact{min-width:146px;min-height:54px;padding:0 14px;border-radius:20px}#target{font-size:9px;padding:5px 8px;max-width:160px;margin-bottom:6px;background:transparent}footer{bottom:calc(8px + env(safe-area-inset-bottom));left:18px;right:18px;font-size:7px}.label{font-size:9px}dialog{padding:27px}#panel{margin:auto auto calc(15px + env(safe-area-inset-bottom))}}
@media(orientation:landscape) and (max-height:540px){header{top:12px;left:18px;right:18px}.wordmark{font-size:13px}.wordmark b{font-size:16px}.wordmark small{display:none}.brand-face{width:40px;height:35px;font-size:19px;border-width:3px}.round{width:42px;height:42px}#hud{top:13px;font-size:8px}#area{display:none}#wallet{padding:7px 12px}#quest{top:69px;left:18px;padding:9px 13px}#quest small{display:none}#quest strong{font-size:11px}.quest-icon{font-size:19px}#pad{left:22px;bottom:28px;width:86px;height:86px}#pad i{left:24px;top:24px;width:34px;height:34px}#bag{left:125px;bottom:48px}#action-wrap{right:23px;bottom:42px}#interact{min-height:52px;min-width:145px}#toast{top:120px}footer{bottom:10px;font-size:8px}dialog{padding:22px 28px}dialog h1{font-size:26px}dialog h2{margin:7px 0 12px}.welcome-robot{display:none}#welcome p{margin:8px 0}#welcome label{margin-top:8px}.pipe{height:52px}#welcome .hint{display:none}}
@media(max-width:360px){#bag{left:118px;width:36px;height:40px}#action-wrap{right:12px}#interact{min-width:130px}#pad{left:17px}.wordmark small{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}dialog::backdrop{backdrop-filter:none}}
#labels{z-index:1}#hud,#quest,#controls,footer{z-index:3}
#map-toggle{position:absolute;z-index:4;left:30px;top:180px;width:66px;height:40px;font-size:12px;font-weight:bold}
.island-map{border:4px solid #fff8e6;border-radius:23px;overflow:hidden;margin:12px 0}.island-map svg{display:block;width:100%;height:auto;max-height:290px}
.journal-card{padding:14px;margin:12px 0;background:#eef0dd;border:1px solid #d6dfc9;border-radius:15px}.journal-card p{font-size:13px;margin:7px 0}.journal-card button{margin:0}.activity-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.activity-buttons button{flex:1;min-width:90px;min-height:60px;margin:0!important}.activity-status{padding:10px 12px;min-height:40px;border-radius:12px;background:#e4edd9;font-size:13px;line-height:1.5}
@media(orientation:portrait){#map-toggle{left:18px;top:204px}}
@media(orientation:landscape) and (max-height:540px){#map-toggle{left:18px;top:116px;height:35px}.island-map svg{max-height:175px}.activity-buttons button{min-height:48px}}
#panel.chat-dialog{position:fixed;top:var(--chat-top,12px);bottom:auto;width:min(600px,calc(100vw - 24px));height:min(650px,var(--chat-height,calc(100dvh - 24px)));max-height:var(--chat-height,calc(100dvh - 24px));margin:0 auto;padding:24px}
.chat-dialog #panel-body{display:flex;flex-direction:column;overflow:hidden;flex:1;gap:8px}
.chat-audience{font-size:12px;line-height:1.4;color:#57735f;max-height:52px;overflow-y:auto;flex-shrink:0}
.chat-log{flex:1;min-height:65px;overflow-y:auto;overscroll-behavior:contain;padding:12px;background:#edf0df;border:1px solid #d8e0cd;border-radius:16px;user-select:text}
.chat-message{max-width:88%;width:fit-content;margin:0 0 12px;padding:10px 13px;border-radius:14px 14px 14px 3px;background:#fffdf2;overflow-wrap:anywhere;color:#344d45}
.chat-message.chat-own{margin-left:auto;background:#d1e5ce;border-radius:14px 14px 3px 14px}
.chat-meta{display:flex;justify-content:space-between;gap:18px;font-size:10px;margin-bottom:5px;color:#597760}.chat-meta time{white-space:nowrap}.chat-text{white-space:pre-wrap;font-size:14px;line-height:1.5}
.chat-empty{font-size:14px!important;line-height:1.6;text-align:center;padding:20px 10px;color:#617a65}
.chat-typing{min-height:16px;font-size:11px;color:#57735f}.chat-error{font-size:12px;padding:8px;background:#f4e0c8;border-radius:9px;flex-shrink:0}
.chat-composer{display:flex;gap:8px;align-items:stretch;flex-shrink:0}.chat-composer textarea{flex:1;min-width:0;resize:none;max-height:90px;border:1px solid #c5d5bc;border-radius:12px;padding:10px;font:inherit;font-size:14px;color:#344d45;background:#fffdf6;user-select:text}
.chat-composer .primary{width:auto;min-width:70px;margin:0;padding:10px 15px}.chat-shortcuts{display:flex;gap:6px;flex-shrink:0}.chat-shortcuts button{flex:1;border:1px solid #d3dec9;background:#eef1e1;border-radius:10px;padding:8px 4px;font-size:11px;min-height:36px}.chat-count{font-size:10px;color:#6c7f69;flex-shrink:0}.chat-newer{border:0;border-radius:8px;background:#d1e5ce;padding:6px;font-size:12px}.chat-newer[hidden],.chat-error[hidden]{display:none}
@media(orientation:portrait){.chat-dialog h2{font-size:25px;margin:8px 0 12px}}
@media(max-height:540px){#panel.chat-dialog{padding:14px 20px}.chat-dialog h2{font-size:23px;margin:4px 0 8px}.chat-dialog #panel-body{gap:4px}.chat-shortcuts{display:none}.chat-composer textarea{max-height:54px}.chat-audience{max-height:34px}}
/* Dialog feedback belongs in the browser's modal top layer. */
#panel[open]{display:flex;flex-direction:column;overflow:hidden}#panel-body{min-height:0;overflow-y:auto;overscroll-behavior:contain}#panel>h2,#panel>.eyebrow,#panel>.dialog-feedback{flex-shrink:0}
.dialog-feedback{position:sticky;top:0;z-index:5;background:#e1efdc;color:#294b3d;padding:12px 14px;border:2px solid #719d80;border-radius:12px;margin:0 0 12px;font-size:14px;line-height:1.4;box-shadow:0 3px 0 #fff8eb}.dialog-feedback[hidden]{display:none}
.puzzle-board{position:relative;padding:0 35px}.puzzle-board .puzzle-grid{gap:6px;margin:16px 0}.pipe-in,.pipe-out{position:absolute;font-weight:bold;font-size:11px;color:#326c79}.pipe-in{left:0;top:12%}.pipe-out{right:0;bottom:12%}.puzzle-progress{font-size:13px;line-height:1.4;color:#326c79}.pipe.active{color:#227b96;background:#d5eff0}
@media(max-height:540px){.dialog-feedback{font-size:12px;padding:8px 10px}.puzzle-board .pipe{height:48px}}
@media(orientation:landscape) and (max-height:540px){
#panel.puzzle-dialog{width:min(740px,calc(100vw - 28px));padding:18px 24px}
.puzzle-dialog #panel-body{display:grid;grid-template-columns:minmax(190px,1fr) minmax(220px,1.3fr);gap:6px 18px;align-items:center}
.puzzle-dialog .puzzle-board{grid-column:1;grid-row:1 / span 4;padding:0 32px}
.puzzle-dialog #panel-body>p,.puzzle-dialog #panel-body>button{grid-column:2;margin:0;font-size:12px;line-height:1.35}
.puzzle-dialog #panel-body>button{min-height:40px;padding:8px 12px}
.puzzle-dialog .dialog-feedback{padding:6px 10px;margin-bottom:8px}
}
@media(orientation:landscape) and (max-height:540px){.profile-form{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}#panel-body .profile-form label{margin:0}.profile-form label[for=profile-color]{grid-column:2;grid-row:1}.profile-form input{grid-row:2}.profile-form .hint{grid-column:1 / -1;margin:3px 0}.profile-form button{margin:0;padding:10px}}
.map-destinations{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.map-destinations .secondary{margin:0;padding:10px;font-size:12px}.island-map a:focus{outline:none}.island-map a:focus circle,.island-map a:focus rect{stroke:#314e43;stroke-width:3}
@media(orientation:landscape) and (max-height:540px){#panel.map-dialog{width:min(760px,calc(100% - 24px))}.map-dialog #panel-body{display:grid;grid-template-columns:minmax(240px,1.2fr) minmax(220px,1fr);gap:8px 14px;align-items:start}.map-dialog .island-map{grid-column:1;grid-row:1;margin:0}.map-dialog .island-map svg{max-height:190px}.map-dialog #panel-body>.hint{grid-column:1;grid-row:2;margin:0;font-size:9px;line-height:1.3}.map-dialog .map-destinations{grid-column:2;grid-row:1;margin:0;gap:5px}.map-dialog .map-destinations button{font-size:11px;padding:9px 6px}.map-dialog #panel-body>.primary{grid-column:2;grid-row:2;margin:0;padding:8px}}
.nature-card{padding:18px;background:#e4edce;border-radius:14px;text-align:center;font-weight:bold}#panel progress{width:100%;height:18px;accent-color:#729c70}.mowing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;touch-action:none;margin:14px 0}.grass-tuft{min-height:60px;border:1px solid #96b776;background:#c1d78f;border-radius:12px;font-size:28px;color:#648a50}.grass-tuft.mown{background:#e3edc9;color:#547453}.fishing-water{position:relative;height:110px;background:#a2d4d0;border-radius:18px;display:grid;place-items:center;overflow:hidden}.fishing-water:after{content:"";position:absolute;width:70px;height:25px;border:2px solid #dbefdf;border-radius:50%;top:53px}.fishing-bobber{font-size:26px;color:#d4876d;animation:bobber 1.4s ease-in-out infinite;z-index:1}.fishing-water.bite .fishing-bobber{animation-duration:.25s}.fish-illustration{padding:18px;text-align:center;font-size:36px;color:#6f9c92}.nature-entry{margin:6px 0;font-size:13px}@keyframes bobber{50%{transform:translateY(8px)}}@media(prefers-reduced-motion:reduce){.fishing-bobber{animation:none}}@media(orientation:landscape) and (max-height:540px){.mowing-grid .grass-tuft{min-height:40px;font-size:22px}.fishing-water{height:65px}.fishing-water:after{top:31px}}
@media(orientation:landscape) and (max-height:540px){#panel.mowing-dialog,#panel.fishing-dialog{width:min(760px,calc(100% - 24px))}.mowing-dialog #panel-body,.fishing-dialog #panel-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 18px;align-items:start}.mowing-dialog #panel-body>p,.fishing-dialog #panel-body>p{font-size:12px;line-height:1.4;margin:0}.mowing-dialog #panel-body>button,.fishing-dialog #panel-body>button{font-size:13px;padding:9px;margin:0;grid-column:2}.mowing-dialog #panel-body>p:first-child{grid-column:2;grid-row:1}.mowing-dialog .activity-status{grid-column:2;grid-row:2}.mowing-dialog .mowing-grid{grid-column:1;grid-row:1 / 4;margin:0}.fishing-dialog #panel-body>p:first-child{grid-column:1;grid-row:1}.fishing-dialog .fishing-water{grid-column:1;grid-row:2 / 5;height:80px}.fishing-dialog .activity-status{grid-column:2;grid-row:1}}
@media(orientation:landscape) and (max-height:540px){.fishing-dialog .fishing-water{grid-row:2}.fishing-dialog #panel-body>button:nth-of-type(1){grid-row:2}.fishing-dialog #panel-body>button:nth-of-type(2){grid-row:3}.fishing-dialog #panel-body>button:nth-of-type(3){grid-column:1;grid-row:3}}@media(orientation:landscape) and (max-height:350px){.fishing-dialog .fishing-water{height:50px}.fishing-dialog #panel-body>button{min-height:38px;padding:7px}.fishing-dialog #panel-body>p{font-size:11px;line-height:1.35}}
#panel-body select{display:block;width:100%;min-height:44px;margin:8px 0;padding:10px 12px;border:1px solid #c5d5bc;border-radius:12px;background:#fffdf6;color:#344d45;font:inherit}#panel-body select:focus-visible{outline:3px solid #327f79;outline-offset:3px}
/* Quiet world labels and a readable, compact village badge. */
.label{background:#fff9e9bd;padding:4px 8px;box-shadow:none;opacity:.1;transition:opacity .2s linear}
.label.player-label{background:#386c60c2}
.wordmark{gap:11px;padding:10px 14px;background:#fff8e8f7;border:1px solid #fffef5;border-radius:18px;color:#254d43;font-size:15px;font-weight:900;line-height:1.06;letter-spacing:1.4px;text-shadow:none;box-shadow:0 3px 0 #355e4520}
.wordmark b{font-size:21px;letter-spacing:1.7px}.wordmark small{margin-top:5px;font-size:7px;letter-spacing:.8px;color:#59715b}
.brand-face{flex-shrink:0;width:46px;height:42px;border:3px solid #e1c795;border-radius:13px;background:#ffedc8;box-shadow:0 3px 0 #bfa677;transform:rotate(-5deg)}
.brand-face:before{content:"";position:absolute;top:-9px;left:18px;width:3px;height:7px;background:#688f79}.brand-face:after{content:"";position:absolute;top:-12px;left:16px;width:7px;height:7px;border-radius:50%;background:#d6aa59;border:1px solid #fff5d8}
.brand-screen{display:block;width:32px;height:25px;border-radius:7px;background:#315b51;color:#d2f2d4;font-size:19px;line-height:23px;text-align:center;letter-spacing:-1px}
#menu{position:relative}#menu[data-chat-unread]:not([data-chat-unread=""]):after{content:attr(data-chat-unread);position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 4px;border-radius:12px;background:#b66e48;color:#fffbed;border:2px solid #fffbed;font-size:10px;font-weight:bold;line-height:16px}
@media(orientation:portrait){.wordmark{padding:9px 11px;gap:9px;font-size:13px;border-radius:16px}.wordmark b{font-size:18px;letter-spacing:1.3px}.wordmark small{font-size:6px;letter-spacing:.6px}.brand-face{width:42px;height:39px}.brand-face:before{left:16px}.brand-face:after{left:14px}.brand-screen{width:29px;height:23px;font-size:18px;line-height:21px}}
@media(orientation:landscape) and (max-height:540px){.wordmark{padding:6px 10px;gap:8px;font-size:11px;border-radius:13px}.wordmark b{font-size:16px;letter-spacing:1px}.wordmark small{display:none}.brand-face{width:36px;height:32px;border-radius:10px;border-width:2px}.brand-face:before{left:15px;top:-6px;height:5px}.brand-face:after{left:13px;top:-9px;width:6px;height:6px}.brand-screen{width:27px;height:22px;font-size:17px;line-height:20px}}
@media(prefers-reduced-motion:reduce){.label{transition:none}}
.frontier-diagram{background:#e0ebe1;border-radius:16px;padding:10px;margin:12px 0}.frontier-diagram svg{display:block;width:100%;max-height:190px}.frontier-controls{display:flex;gap:8px}.frontier-controls button{flex:1;min-width:0;padding:12px 6px;font-size:13px}.frontier-hint{padding:12px 15px;border-radius:12px;background:#eee6cc;color:#435d52;margin:12px 0}.frontier-hint p{margin:6px 0 0}.crane-weights{display:flex;justify-content:space-around;gap:20px;padding:12px 0 30px;border-top:7px solid #c6a85c}.crane-weight{background:#739c96;color:#fffbed;font-size:23px;font-weight:bold;border-radius:8px;padding:20px 12px;position:relative}.crane-weight:before{content:"";position:absolute;left:50%;bottom:100%;height:28px;border-left:3px solid #577b77}@media(max-width:400px){.frontier-controls{gap:5px}.frontier-controls button{font-size:11px}.crane-weight{font-size:18px;padding:16px 10px}}
/* One header row, one message card; the action caption owns the location. */
header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px}.wordmark{justify-self:start;min-width:0}.wordmark>div{min-width:0;overflow:hidden}#wallet{display:flex;align-items:center;gap:5px;max-width:160px;min-width:0;white-space:nowrap;padding:9px 12px;letter-spacing:0;font-variant-numeric:tabular-nums}#wallet b{min-width:0;overflow:hidden;text-overflow:ellipsis;margin:0;font-size:16px}#quest{width:345px;max-width:calc(100% - 60px);min-height:66px;max-height:150px;overflow-y:auto}#quest .quest-copy{min-width:0;flex:1}#quest strong{display:block;line-height:1.4}#quest>span:last-child{flex-shrink:0;margin-left:0}#quest.showing-tip{background:#355f53f5;color:#fffaf0}#quest.showing-tip .quest-icon,#quest.showing-tip>span:last-child{color:#d1deaf}#toast{position:static;display:block;transform:none;width:auto;max-width:none;padding:0;margin:0;border-radius:0;background:none;color:inherit;box-shadow:none;text-align:left;font-size:13px;line-height:1.5;overflow-wrap:anywhere}#toast[hidden],#quest-summary[hidden],#area[hidden],#nearby[hidden]{display:none!important}#area{display:inline;font-size:10px;font-weight:700;letter-spacing:.5px}#target{overflow-wrap:anywhere}#interact{margin-left:auto}
@media(orientation:portrait){header{top:calc(16px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));gap:8px}#quest{top:calc(91px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));width:calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:none;min-height:62px;max-height:150px}#toast{font-size:12px}#wallet{max-width:110px;padding:8px 9px}#wallet b{font-size:14px}}
@media(max-width:600px){header{gap:6px}.wordmark{gap:7px;padding:8px 9px;font-size:11px}.wordmark b{font-size:15px;letter-spacing:1px}.wordmark small{display:none}.brand-face{width:32px;height:32px;border-radius:10px;border-width:2px}.brand-screen{width:25px;height:22px;font-size:17px;line-height:20px}.brand-face:before{left:13px}.brand-face:after{left:11px}#wallet{max-width:90px;font-size:11px;gap:4px;padding:8px}#wallet .wallet-unit{display:none}header .round{width:40px;height:40px;border-radius:14px}}
@media(orientation:landscape) and (max-height:540px){header{gap:10px}#quest{top:calc(69px + env(safe-area-inset-top));width:min(345px,calc(100% - 220px));min-height:46px;max-height:100px}#toast{font-size:12px}#area{display:inline}#quest-summary small{display:none}}
.challenge-steps{padding-left:23px;margin:14px 0;color:#526b5d;font-size:14px;line-height:1.55}.challenge-steps li{padding-left:3px;margin-bottom:10px}.bag-gift{padding:12px 0;border-bottom:1px solid #dce4ce}.bag-gift strong{display:block;font-size:14px}.bag-gift button{margin-top:7px}
@media(orientation:landscape) and (max-height:540px){.puzzle-dialog .challenge-steps,.puzzle-dialog #panel-body>.dialog-reward{grid-column:2;font-size:12px;line-height:1.45}.puzzle-dialog .puzzle-board{grid-row:1 / span 5}.challenge-steps li{margin-bottom:7px}}
.activity-buttons.parts-matching{display:block}.parts-matching button{width:100%;min-height:46px;margin:8px 0!important;text-align:left}
@media(orientation:landscape) and (max-height:540px){.puzzle-dialog .puzzle-board{position:sticky;top:0;align-self:start}.puzzle-dialog .pipe{height:clamp(32px,calc((100dvh - 210px)/3),52px)}}
/* Short screens use the width for tasks, leaving instructions and controls together. */
.challenge-copy,.challenge-play{min-width:0}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.dialog-actions button{margin:0}
.dialog-more{margin-top:12px}.dialog-more summary,.frontier-hint summary{cursor:pointer;font-weight:bold;padding:8px 0;min-height:40px}
@media(orientation:landscape) and (max-height:540px){
#panel:not(.chat-dialog),#welcome{width:min(920px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:14px 18px;border-radius:20px}
#panel>h2{font-size:22px;line-height:1.15;margin:4px 38px 10px 0}#panel>.eyebrow{font-size:9px;letter-spacing:1.4px;margin-right:38px}
#panel .close{top:8px;right:8px;width:40px;height:40px}#panel p{font-size:13px;line-height:1.4;margin:0 0 8px}
#panel h3{font-size:15px;margin:4px 0 6px}#panel button.primary,#panel button.secondary{font-size:13px;line-height:1.25;padding:8px 10px;min-height:42px;margin-top:0}
#panel .dialog-reward{padding:8px;font-size:12px;line-height:1.35}#panel .hint{font-size:11px;line-height:1.35;margin:6px 0}
#panel>.dialog-feedback{font-size:12px;line-height:1.3;padding:7px 10px;margin-bottom:7px;max-height:70px;overflow:auto}
#panel[data-kind=text]:not(.chat-dialog):not(.map-dialog):not(.fishing-dialog):not(.mowing-dialog) #panel-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-auto-flow:dense;gap:8px 18px;align-items:start}
#panel[data-kind=text] #panel-body>p,#panel[data-kind=text] #panel-body>.dialog-reward,#panel[data-kind=text] #panel-body>.frontier-hint{grid-column:1}
#panel[data-kind=text] #panel-body>button{grid-column:2}#panel[data-kind=text] .profile-form{grid-column:1/-1}
#panel[data-kind=menu] #panel-body,#panel[data-kind=collection] #panel-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:max-content;gap:8px;align-items:start}
#panel[data-kind=menu] #panel-body>label{margin:0;font-size:10px}#panel[data-kind=menu] select{min-height:34px;padding:5px;margin:3px 0 0;font-size:12px}
#panel[data-kind=menu] .dialog-more{grid-column:1/-1;margin:0}.dialog-more summary{font-size:12px;min-height:32px;padding:6px 0}
#panel[data-kind=collection] #panel-body>p,#panel[data-kind=collection] #panel-body>h3,#panel[data-kind=collection] #panel-body>.hint,#panel[data-kind=collection] .map-destinations{grid-column:1/-1}
#panel[data-kind=collection] #panel-body>.nature-entry{grid-column:auto}#panel .bag-gift,#panel .journal-card{padding:8px;margin:0;border:1px solid #dce4ce;border-radius:12px}
#panel .bag-gift strong,#panel .journal-card strong{font-size:12px;line-height:1.3}#panel .bag-gift button{margin-top:6px}
#panel.challenge-dialog #panel-body{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.5fr);gap:16px;overflow:hidden;min-height:0}
.challenge-copy,.challenge-play{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:1px 3px 3px}
.challenge-play{display:flex;flex-direction:column;gap:6px}.challenge-play>*{flex-shrink:0}
#panel .challenge-steps{font-size:13px;line-height:1.35;margin:10px 0 0;padding-left:20px}#panel .challenge-steps li{margin-bottom:7px;padding-left:0}
.challenge-play .puzzle-board{width:230px;max-width:100%;align-self:center;padding:0 25px}.challenge-play .puzzle-grid{margin:0;gap:4px}.challenge-play .pipe{height:44px;min-height:44px}
#panel .challenge-play .puzzle-progress,#panel .challenge-play .activity-status{margin:0;padding:6px 8px;min-height:0;font-size:12px;line-height:1.3}
#panel .challenge-play .activity-buttons{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.challenge-play .activity-buttons button{min-width:0;flex:none;margin:0!important}
.challenge-play .dialog-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0}.challenge-play .dialog-actions:has(>button:nth-child(2):last-child){grid-template-columns:1fr 1fr}
.challenge-play .frontier-diagram{margin:0;padding:0}.challenge-play .frontier-diagram svg{height:78px;width:100%}.challenge-play .frontier-controls{margin:0;gap:6px}.challenge-play .crane-weights{height:76px;padding:0 8px 20px}.challenge-play .crane-weight{padding:8px}
#panel .frontier-hint{margin:8px 0 0;padding:6px 8px;font-size:12px}#panel .frontier-hint p{margin:4px 0;font-size:12px}
#panel .frontier-hint summary{min-height:28px;padding:3px 0}
#panel[data-kind=decorate] #panel-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:6px 16px;align-items:start}
#panel[data-kind=decorate] #panel-body>p{grid-column:1;grid-row:1}.item-row{margin:0;gap:5px}#panel[data-kind=decorate] .item-row{grid-column:1;grid-row:2/5;max-height:180px;overflow:auto}.item-row button{padding:7px;font-size:12px;min-height:40px}
#panel[data-kind=decorate] .placement-grid{grid-column:2;grid-row:1/3;margin:0;gap:4px}#panel[data-kind=decorate] .placement-grid button{aspect-ratio:auto;height:44px}
#panel[data-kind=decorate] #panel-body>.hint{grid-column:2;grid-row:3;margin:0}#panel[data-kind=decorate] #panel-body>.primary{grid-column:2;grid-row:4}#panel[data-kind=decorate] #panel-body>.secondary{grid-column:2;grid-row:5}
#panel[data-kind=decorate] .dialog-actions{grid-column:2;grid-row:4;margin:0;grid-template-columns:1.4fr 1fr}
#panel[data-kind=decorate] .item-row{max-height:calc(100dvh - 190px);align-content:start}
#panel.map-dialog .map-destinations{max-height:calc(100dvh - 210px);overflow-y:auto;padding:2px}
#panel.map-dialog .island-map svg{max-height:calc(100dvh - 175px)}
#panel[data-kind=garden] #panel-body{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}#panel[data-kind=garden] #panel-body>p:first-child{grid-column:1;grid-row:1/3}#panel[data-kind=garden] #panel-body>button{grid-column:2}#panel[data-kind=garden] .nature-card{padding:8px}
#panel[data-kind=invite] #panel-body{display:grid;grid-template-columns:1fr 1.2fr;gap:8px 16px}#panel[data-kind=invite] .rcRoomQrCodeLink{grid-column:1;grid-row:1/4;padding:8px}#panel[data-kind=invite] #panel-body>p,#panel[data-kind=invite] input,#panel[data-kind=invite] button{grid-column:2}.rcRoomQrCode{width:130px;height:130px}.rcRoomId{margin-top:3px;font-size:13px}
#welcome[open]{display:grid;grid-template-columns:1fr 1.2fr;gap:8px 22px;align-items:center}#welcome>.eyebrow{grid-column:1;grid-row:1}#welcome h1{grid-column:1;grid-row:2;margin:0;font-size:27px}#welcome>p{grid-column:1;grid-row:3;margin:0;font-size:13px;line-height:1.4}#welcome>form{grid-column:2;grid-row:1/5}#welcome .welcome-robot{display:none}#welcome>small.hint{display:block;grid-column:1;grid-row:4;font-size:11px;margin:0}#welcome form label{margin:5px 0}#welcome form input{min-height:42px;padding:8px 12px}#welcome form button{margin-top:10px;min-height:42px;padding:10px}
}
@media(orientation:landscape) and (max-height:350px){
#panel:not(.chat-dialog){padding:10px 14px}#panel>h2{font-size:20px;margin-bottom:8px}
#panel.challenge-dialog #panel-body{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:12px}
#panel .challenge-steps{font-size:12px;line-height:1.3;margin-top:7px}#panel .challenge-steps li{margin-bottom:5px}
#panel .challenge-copy .dialog-reward{font-size:11px;padding:6px}#panel .frontier-hint{margin-top:4px;padding:2px 6px}
#panel .challenge-play .dialog-actions button{font-size:12px;padding:6px;min-height:42px}
.challenge-play .frontier-diagram svg{height:68px}.challenge-play .crane-weights{height:66px}
#panel .challenge-play .frontier-controls button{font-size:12px;padding:6px;min-height:42px}
.challenge-play .dialog-actions{gap:4px}.challenge-play{gap:4px}
#panel.challenge-dialog:has(>.dialog-feedback:not([hidden])) .pipe{height:36px;min-height:36px}
}