:root{--ink:#263e34;--muted:#788174;--cream:#f0ebdc;--paper:#f5f1e7;--line:#dedbcb;--gold:#d9b978;--green:#416955;--glass:rgba(30,51,42,.9);--safe-bottom:env(safe-area-inset-bottom,0px);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#809b89;touch-action:none}button,input,select{font:inherit}button{cursor:pointer;border:0}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.4;cursor:not-allowed}button,svg{-webkit-tap-highlight-color:transparent}button{transition:background .16s,transform .16s}button:active{transform:translateY(1px)}[hidden]{display:none!important}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}#world{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}#vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(26,47,39,.20),transparent 23%,transparent 70%,rgba(25,44,35,.24))}#labels,#floats{position:fixed;inset:0;pointer-events:none;overflow:hidden}.glass{background:var(--glass);border:1px solid rgba(235,235,208,.17);box-shadow:0 6px 22px #1323191a;backdrop-filter:blur(14px);color:var(--cream)}
#header{position:fixed;top:max(24px,env(safe-area-inset-top));left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none;color:#f5f0dd;text-shadow:0 1px 12px #19342566}.brand{display:flex;align-items:center;gap:12px}.brand h1{font-family:Georgia,serif;font-size:25px;font-weight:400;letter-spacing:4.5px;margin:0 0 5px}.brand small{font-size:8px;font-weight:600;letter-spacing:2.5px;opacity:.78}.brand-mark{display:block;width:42px;height:48px;color:#f5ebcf}.brand-mark svg{height:100%;width:100%;stroke-width:1.1}#clock{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;border-radius:30px;padding:10px 18px;font-size:10px;letter-spacing:1.4px;white-space:nowrap}#clock svg{width:17px;height:17px;color:var(--gold)}.header-actions{display:flex;align-items:center;gap:10px;pointer-events:auto}.icon-button{width:42px;height:42px;border-radius:50%;display:grid;place-items:center}#connection{font-size:9px;letter-spacing:1.2px;border-radius:30px;padding:10px 13px;display:flex;align-items:center;gap:7px}#connection:before{content:'';width:5px;height:5px;border-radius:50%;background:#cbb97f}#connection.shared:before{background:#a7cd9d}#connection.offline:before{background:#d19379}#place{position:fixed;top:119px;left:36px;color:#fff6dc;display:flex;gap:13px;align-items:center;pointer-events:none;text-shadow:0 2px 16px #14332277}#place small{font-size:8px;letter-spacing:2px;opacity:.85}#place h2{font-family:Georgia,serif;font-size:21px;font-weight:400;margin:5px 0}.location-line{width:1px;height:41px;background:#e7d39e8a}#saved{position:fixed;right:38px;top:84px;color:#f4ebd2;font-size:10px;opacity:.8;pointer-events:none}
#quest{position:fixed;bottom:140px;left:30px;width:248px;border-radius:13px;padding:18px 18px 15px}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:600;color:var(--muted)}#quest .eyebrow{color:#c7d0bc;display:flex;justify-content:space-between;align-items:center;font-size:8px}#quest h3{font-family:Georgia,serif;font-weight:400;font-size:21px;margin:11px 0 8px}#quest p{font-size:11px;line-height:1.65;color:#d1d5c4;margin:0 0 11px}#quest button{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;color:var(--gold);padding:0;font-size:11px;text-align:left;min-height:30px}.quest-dots{display:flex;gap:5px;margin-top:13px}.quest-dots i{width:23px;height:2px;background:#a3b19b33}.quest-dots i.done{background:var(--gold)}
#toolbar{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);border-radius:16px;display:flex;padding:9px 11px;gap:3px;z-index:3}#toolbar button{background:transparent;color:#e7e7d5;min-width:81px;height:64px;border-radius:9px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:2px 8px;position:relative}#toolbar button:hover,#toolbar button.active{background:#b4c2a523}#toolbar button>span:first-child{height:24px;color:#d9c697}#toolbar button>span:nth-child(2){font-size:10px;letter-spacing:.4px}#toolbar small{font-size:6.5px;letter-spacing:1px;opacity:.7}#controls-hint{position:fixed;bottom:11px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:8px;color:#f3edd8;letter-spacing:.2px;opacity:.8}#controls-hint i{padding:0 7px}
#context{position:fixed;right:30px;bottom:140px;width:239px;padding:17px;border-radius:13px}#context .eyebrow{font-size:8px;color:#bfc9b5;display:flex;align-items:center;gap:6px}#context .eyebrow svg{height:13px;width:13px}#context h3{margin:8px 0 4px;font-family:Georgia,serif;font-weight:400;font-size:21px}#context p{font-size:10px;line-height:1.6;color:#cbd3c2;margin:0 0 12px}#context button{width:100%;min-height:42px;font-size:11px;border-radius:6px;background:var(--gold);color:#2e4335;font-weight:600;display:flex;align-items:center;justify-content:space-between;padding:0 13px}#context button.secondary{background:#b5c4ae15;color:#e8ead8;margin-top:7px;border:1px solid #c6d1b92b}#context .progress{height:3px;background:#b7c3aa33;margin:10px 0 8px;border-radius:2px}#context .progress i{display:block;height:100%;background:var(--gold);width:0;border-radius:2px}#context .small-row{display:flex;justify-content:space-between;font-size:9px;color:#cbd3c2}#rest-banner{position:fixed;top:105px;left:50%;transform:translateX(-50%);width:min(410px,90vw);border-radius:12px;padding:13px 17px;font-size:11px;z-index:2;line-height:1.6;display:flex;gap:16px;align-items:center}#rest-banner strong{color:var(--gold)}#rest-banner button{background:var(--gold);border-radius:6px;padding:10px 16px;font-size:11px;white-space:nowrap}#duel-hud{position:fixed;top:104px;left:50%;transform:translateX(-50%);padding:13px 20px;border-radius:12px;min-width:260px;text-align:center}#duel-hud .score{font-family:Georgia,serif;font-size:22px;margin:6px}#duel-hud small{font-size:9px;letter-spacing:1.1px;color:var(--gold)}
.world-label{position:absolute;left:0;top:0;transform:translate(-50%,-50%);border:0;color:#f4efdc;background:#334c3bd9;padding:5px 9px;border-radius:4px;white-space:nowrap;font-size:8px;font-weight:600;letter-spacing:1.0px;box-shadow:0 2px 8px #192a2422;pointer-events:auto;max-width:185px;overflow:hidden;text-overflow:ellipsis}.world-label.service:before{content:'';position:absolute;left:50%;bottom:-4px;width:5px;height:5px;background:#334c3bd9;transform:rotate(45deg)}.world-label.resource,.world-label.place{background:#f0e6ccee;color:#47563d;border:1px solid #e8ddb89c;font-size:8px;letter-spacing:.5px;padding:5px 8px}.world-label.npc,.world-label.resident{background:transparent;font-weight:500;box-shadow:none;color:#fffae7;text-shadow:0 1px 4px #143626;font-size:9px;letter-spacing:.4px;padding:2px}.world-label.npc small,.world-label.resident small{font-size:7px;color:#e0dfbb;display:block;margin-top:3px;letter-spacing:1px}.world-label.monster{background:#71493dde;letter-spacing:.4px}.floating{position:absolute;left:0;top:0;white-space:nowrap;color:#fff3c4;font-weight:600;font-size:12px;text-shadow:0 2px 5px #233a26;animation:float-up 1.6s ease-out forwards}@keyframes float-up{0%{opacity:0;translate:0 0}15%{opacity:1}100%{opacity:0;translate:0 -65px}}
#scrim{position:fixed;inset:0;z-index:9;background:#0e211c3b;backdrop-filter:blur(2px)}#panel{position:fixed;z-index:10;top:20px;right:20px;bottom:20px;width:424px;background:var(--paper);border:1px solid #fff6;border-radius:19px;box-shadow:0 20px 70px #10251e55;display:flex;flex-direction:column;touch-action:pan-y;overflow:hidden}#panel-heading{flex-shrink:0;padding:28px 27px 20px;background:linear-gradient(135deg,#e7e5d6,#f2eee2);border-bottom:1px solid var(--line);position:relative}#panel-heading .eyebrow{margin-bottom:9px;font-size:8px;letter-spacing:1.9px}#panel-heading h2{margin:0;font:30px Georgia,serif;font-weight:400;display:flex;align-items:center;gap:12px}#panel-heading h2 svg{width:27px;height:27px;color:#788e6d}#panel-heading p{font-size:11px;line-height:1.7;color:#747e6e;margin:10px 0 0;max-width:326px}.close-button{position:absolute;right:16px;top:15px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#5365450c;color:#677760}.close-button svg{width:17px;height:17px}#panel-content{overflow-y:auto;padding:23px 27px 27px;flex:1;scrollbar-width:thin;scrollbar-color:#b7c1aa transparent}.section-title{font-size:9px;font-weight:650;letter-spacing:1.5px;display:flex;justify-content:space-between;align-items:center;margin:3px 0 13px;color:#6b7764}.section-title.spaced{margin-top:26px}.subtext{font-size:11px;color:#7c8474;line-height:1.8;margin:10px 0}.item-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.item{position:relative;background:#e9e7d8;border:1px solid #dcdcc8;border-radius:9px;min-height:79px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px 4px 6px;color:var(--ink);gap:4px}.item svg{width:27px;height:27px;stroke-width:1.45}.item .item-name{font-size:8px;line-height:1.3;text-align:center}.item .item-count{position:absolute;right:5px;top:4px;font-size:9px;min-width:14px;background:#f4f0dd;border-radius:3px}.item.empty{opacity:.28;border-style:dashed;min-height:74px;background:transparent}.item.empty span{font-size:18px;color:#8d997d}.primary{min-height:47px;border-radius:8px;background:var(--green);color:#f5f1df;padding:13px 17px;font-size:12px;font-weight:550;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}.primary:hover{background:#365944}.primary.gold{background:#d6ba7f;color:#334735}.secondary-button{min-height:42px;border:1px solid #cfd2bf;border-radius:7px;background:transparent;padding:10px 13px;color:#56694e;font-size:11px;width:100%}.primary+.secondary-button{margin-top:8px}.text-button{background:none;color:#7f886e;padding:11px 0;text-align:center;font-size:10px;width:100%;min-height:38px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.gap{margin-top:19px}.inventory-footer{display:flex;gap:9px;margin-top:18px}.inventory-footer>div{flex:1;border:1px solid var(--line);border-radius:8px;padding:13px}.inventory-footer small{font-size:8px;letter-spacing:1px;color:var(--muted)}.inventory-footer strong{display:block;font:20px Georgia,serif;margin-top:7px}.equipment{display:grid;grid-template-columns:1fr 1fr;gap:8px}.equipment>div{background:#e7e9db;border-radius:8px;padding:12px 10px;font-size:10px;display:flex;gap:8px;align-items:center}.equipment small{display:block;font-size:7px;letter-spacing:1px;color:#818977;margin-bottom:4px}.equipment svg{width:20px;height:20px;color:#7c9169}.item-detail{border-radius:12px;padding:20px;background:#e6e8d8;border:1px solid #d5dac4;margin-bottom:20px}.item-detail h3{font:22px Georgia,serif;margin:10px 0 3px}.item-detail>svg{height:39px;width:39px}.item-detail p{font-size:11px;color:#79846d;line-height:1.6}.recipe{border-bottom:1px solid var(--line);padding:15px 0;display:flex;align-items:center;gap:12px}.recipe:first-of-type{padding-top:0}.recipe-icon{border-radius:10px;background:#e5e6d6;width:45px;height:48px;display:grid;place-items:center;flex-shrink:0}.recipe-main{flex:1}.recipe h3{font:17px Georgia,serif;margin:0 0 7px}.recipe p{font-size:8px;line-height:1.7;color:#7a846e;margin:0}.recipe button{font-size:9px;min-height:38px;padding:9px 11px;border-radius:6px;background:#446c56;color:#f2eedb}.missing{color:#a37560}.recipe .xp{font-size:8px;color:#829172;margin-top:5px}.skill-row{padding:15px 0;border-bottom:1px solid var(--line)}.skill-row h3{font:19px Georgia,serif;margin:0 0 8px;text-transform:capitalize}.skill-row .level{font:23px Georgia,serif;color:#64815d}.bar{height:5px;background:#dbdfcc;border-radius:9px;overflow:hidden}.bar>i{display:block;height:100%;background:#82956d}.skill-row small{display:block;margin-top:7px;color:#8b9380;font-size:8px;letter-spacing:.4px}.echo-row{background:#e9eadc;border:1px solid #d9decb;padding:17px;margin-bottom:11px;border-radius:11px}.echo-row h3{font:19px Georgia,serif;margin:0 0 5px}.echo-row .amount{font:27px Georgia,serif;color:#738764}.echo-row .bar{margin-top:12px}.echo-row p{font-size:9px;color:#7b866f;line-height:1.7;margin:7px 0 12px}.echo-row button{font-size:10px;padding:10px 12px;min-height:39px;border-radius:6px;background:#d4dbc3;color:#4a6144;width:100%;text-align:left}.note{display:flex;gap:10px;padding:15px;border-radius:9px;background:#e6eadb;color:#6a795e;font-size:10px;line-height:1.75;margin:16px 0}.note svg{width:19px;height:19px;margin-top:2px}.empty-state{text-align:center;padding:27px 15px;color:#7e8b72;font-size:12px;line-height:1.8}.empty-state>svg{width:40px;height:40px;display:block;margin:0 auto 16px;color:#95a185}.empty-state h3{font:23px Georgia,serif;margin:0 0 9px}.pavilion-art{width:100%;height:144px;background:#e3e6d5;border-radius:12px;display:block;margin-bottom:19px}.pavilion-art svg{height:100%;width:100%;stroke:none}.stage-dots{display:flex;gap:6px;margin:10px 0 17px}.stage-dots span{flex:1;background:#dbe0cc;height:4px;border-radius:4px}.stage-dots span.done{background:#899d70}.project-title{font:23px Georgia,serif;margin:0 0 8px}.cost-row{display:flex;align-items:center;gap:10px;font-size:11px;padding:11px 0;border-bottom:1px solid var(--line)}.cost-row>span:nth-child(2){flex:1}.cost-row strong{font-weight:500;color:#667b57}.contributor{display:flex;justify-content:space-between;font-size:10px;margin:12px 0;color:#66795c}.contributor small{font-size:9px;color:#8a937d}.vote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.vote-grid button{background:#e6e8d7;border:1px solid #d5dcc5;border-radius:7px;min-height:62px;font-size:9px;padding:7px;color:#667758}.vote-grid button.selected{background:#d1ddc0;border-color:#94a77e}.vote-grid small{display:block;margin-top:6px;opacity:.7}.map-wrap{background:#dce3ce;border:1px solid #cbd7bd;border-radius:13px;overflow:hidden;position:relative}.map-wrap canvas{display:block;width:100%;height:275px}.destinations{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:17px}.destinations button{background:#e4e8d8;border:1px solid #d5ddc8;border-radius:7px;padding:12px 10px;color:#586c4d;font-size:10px;text-align:left;min-height:43px;display:flex;align-items:center;gap:7px}.destinations svg{width:16px;height:16px}.resident{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}.resident>span:first-child{background:#dce4cd;border-radius:50%;width:31px;height:31px;display:grid;place-items:center;color:#789264}.resident .person-info{flex:1;font-size:11px}.resident small{display:block;font-size:8px;color:#8c9782;margin-top:4px}.resident button{font-size:9px;background:#e5e9d9;color:#6b8159;border-radius:5px;padding:9px}.setting{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 0;border-bottom:1px solid var(--line);font-size:11px}.setting label{flex:1;line-height:1.6}.setting small{display:block;color:#939b87;font-size:9px}.setting select{background:#e5e9d8;border:1px solid #d0d8c0;border-radius:6px;padding:8px;color:#617452;font-size:10px;max-width:130px}.setting input[type=checkbox]{accent-color:#6d8758;width:18px;height:18px}.setting input[type=range]{width:110px;accent-color:#6d8758}.key-note{font-size:10px;line-height:1.8;color:#8b927f;padding:12px 0}.danger{color:#a16e5a}.shop-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;border-bottom:1px solid var(--line);padding:14px 0}.shop-row span{flex:1;margin-left:10px}.shop-row small{display:block;font-size:8px;color:#8a9480;margin-top:4px}.shop-row button{border-radius:6px;background:#dce3ce;padding:10px;font-size:10px;color:#577047}.action-split{display:flex;gap:8px}.action-split>*{flex:1}
#welcome{position:fixed;inset:0;background:linear-gradient(90deg,#20382e2e,transparent 53%,#172e2530);z-index:6;display:flex;align-items:center;justify-content:flex-end;padding:60px 8vw}.welcome-card{width:370px;padding:32px 33px 20px;background:#f1eddfef;backdrop-filter:blur(20px);border:1px solid #fff8;box-shadow:0 25px 70px #223c3038;border-radius:4px}.welcome-card .eyebrow{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.5px}.welcome-leaf{display:block;margin:23px 0 19px;color:#698466}.welcome-leaf svg{height:37px;width:37px;stroke-width:1.1}.welcome-card h2{font:43px/1.1 Georgia,serif;letter-spacing:-1.6px;color:#344d3e;font-weight:400;margin:0 0 19px}.welcome-card p{font-size:11px;line-height:1.9;color:#7d8976;margin:0 0 25px}#join-form label{display:block;font-size:8px;letter-spacing:1.3px;color:#89937e;margin-bottom:8px}#character-name{width:100%;background:#e6e7d6;border:1px solid #d7dcc7;border-radius:6px;min-height:43px;font-size:13px;color:#4e6246;padding:10px 12px}.coat-row{display:flex;justify-content:space-between;align-items:center;margin:16px 0 23px}.coat-row>span{font-size:7px;color:#8a957e;letter-spacing:.8px}.coat-row>div{display:flex;gap:9px}.coat{width:19px;height:19px;border-radius:50%;background:#81977c;position:relative}.coat[data-coat=clay]{background:#ba8a70}.coat[data-coat=blue]{background:#809ba7}.coat.selected:after{content:'';position:absolute;inset:-4px;border:1px solid #8c9a7f;border-radius:50%}.welcome-foot{font-size:8px;line-height:1.8;color:#98a08b;text-align:center;margin-top:13px}.welcome-caption{position:absolute;bottom:65px;left:65px;color:#f3efd9;text-shadow:0 2px 15px #1b332433}.welcome-caption>span{font-size:10px;letter-spacing:3px}.welcome-caption p{font:27px/1.45 Georgia,serif;margin:14px 0 0}#loading{position:fixed;inset:0;background:#354f3f;z-index:30;color:#ede7d1;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .4s}#loading h1{font:42px Georgia,serif;margin:20px 0 8px}#loading p{font-size:11px;letter-spacing:.5px;color:#bdc5ad}.loading-line{margin-top:20px;height:2px;width:110px;background:linear-gradient(90deg,transparent,#c0c696,transparent);animation:breathe 1.2s infinite}@keyframes breathe{50%{opacity:.2}}#toasts{position:fixed;top:170px;left:50%;transform:translateX(-50%);z-index:22;display:flex;flex-direction:column;gap:8px;width:max-content;max-width:90vw;pointer-events:none}.toast{background:#f2eddaed;color:#4c6344;border:1px solid #f8f3da;border-radius:8px;box-shadow:0 8px 24px #172a2720;padding:12px 18px;font-size:11px;line-height:1.5;animation:toast-in .2s ease-out}.toast.error{background:#f0e2d8;color:#885c45}@keyframes toast-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}#fatal{position:fixed;inset:20%;padding:30px;background:var(--paper);z-index:50;color:var(--ink);font-size:15px;line-height:1.8;border-radius:12px}#joystick{position:fixed;width:110px;height:110px;pointer-events:none;z-index:5;transform:translate(-50%,-50%)}.stick-ring{position:absolute;inset:0;border-radius:50%;background:#304b354a;border:1px solid #e9efc944;backdrop-filter:blur(3px)}.stick-thumb{position:absolute;width:42px;height:42px;border-radius:50%;background:#e8e7d3bb;border:1px solid #fff9;left:34px;top:34px;box-shadow:0 3px 10px #21352a33}.compact-label{font-size:9px;color:#849077}.divider{height:1px;background:var(--line);margin:20px 0}.return-count{font:46px Georgia,serif;color:#6a825c;margin:8px 0}.health-bar{height:4px;background:#ffffff22;border-radius:3px;margin:8px 0}.health-bar i{display:block;height:100%;background:#d9a679;border-radius:3px}.contrast #context,.contrast #quest,.contrast #toolbar{background:#20382af5}.contrast .world-label{background:#193b25;color:#fff}.reduced *{animation:none!important;transition:none!important}
@media(max-width:1050px){#clock{display:none}#quest{width:220px;left:20px}#context{right:20px;width:210px}#toolbar button{min-width:72px}.welcome-card{width:345px}.welcome-caption{left:35px}}
@media(max-width:700px){#header{left:17px;right:15px;top:max(17px,env(safe-area-inset-top));gap:6px}.brand{gap:7px}.brand-mark{height:34px;width:28px}.brand h1{font-size:18px;letter-spacing:2.7px;margin-bottom:4px}.brand small{font-size:5.4px;letter-spacing:1.55px}.header-actions{gap:6px}.icon-button{width:35px;height:35px}.icon-button svg{width:17px;height:17px}#connection{font-size:6.5px;padding:8px;letter-spacing:.5px}#connection:before{width:4px;height:4px}#saved{top:68px;right:19px;font-size:8px}#place{top:91px;left:19px;gap:10px}#place small{font-size:6px;letter-spacing:1.3px}#place h2{font-size:17px;margin:4px 0}.location-line{height:32px}#quest{top:150px;left:17px;bottom:auto;width:203px;padding:12px 14px;border-radius:10px;background:#263e32d9}#quest h3{font-size:17px;margin:8px 0 5px}#quest p{font-size:9px;line-height:1.55;margin-bottom:5px}#quest .eyebrow{font-size:6.5px;letter-spacing:1px}#quest button{font-size:9px;min-height:25px}.quest-dots{margin-top:8px;gap:4px}.quest-dots i{width:19px}#toolbar{bottom:calc(15px + var(--safe-bottom));width:calc(100% - 28px);max-width:432px;gap:0;justify-content:space-around;padding:9px 6px 7px;border-radius:13px}#toolbar button{min-width:0;flex:1;padding:2px 0;height:58px;gap:5px}#toolbar button>span:nth-child(2){font-size:9px}#toolbar small{font-size:6px;letter-spacing:.6px}#toolbar button svg{width:21px;height:21px}#controls-hint{display:none!important}#context{bottom:calc(108px + var(--safe-bottom));right:15px;width:180px;padding:13px;border-radius:11px;background:#233e31e8}#context .eyebrow{font-size:6.5px}#context h3{font-size:18px;margin-top:7px}#context p{font-size:9px;line-height:1.5;margin-bottom:10px}#context button{min-height:44px;font-size:10px;padding:0 10px}#context .small-row{font-size:8px}#context .secondary{margin-top:6px;min-height:40px}#rest-banner{top:147px;padding:12px 14px;font-size:10px;gap:12px}#duel-hud{top:130px;min-width:240px}#toasts{top:91px;max-width:calc(100vw - 35px)}.toast{font-size:10px;padding:11px 14px}#panel{top:auto;left:0;right:0;bottom:0;width:100%;height:min(86dvh,780px);border-radius:20px 20px 0 0;padding-bottom:var(--safe-bottom);border:0}#panel-heading{padding:25px 24px 18px}#panel-heading h2{font-size:27px}#panel-heading p{font-size:10px;line-height:1.65;margin-top:9px;padding-right:15px}#panel-content{padding:21px 23px 25px}#panel-heading .eyebrow{font-size:7px}#welcome{padding:85px 23px 30px;align-items:center;justify-content:center;background:#20382730}.welcome-card{width:320px;max-width:100%;padding:25px 26px 14px}.welcome-card h2{font-size:37px;margin-bottom:17px}.welcome-card p{font-size:10px;margin-bottom:21px}.welcome-leaf{margin:19px 0 17px}.welcome-leaf svg{height:30px;width:30px}.welcome-caption{display:none}.world-label{font-size:6px;padding:4px 7px;letter-spacing:.8px}.world-label.resource,.world-label.place{font-size:7px}.world-label.npc{font-size:8px}.world-label.npc small{font-size:6px}.floating{font-size:11px}.primary{min-height:48px}#fatal{inset:15% 7%;padding:25px;font-size:13px}.setting{padding:16px 0}.item{min-height:82px}.recipe button{min-height:42px}.shop-row button{min-height:42px}}
@media(max-height:670px) and (min-width:701px){#quest,#context{bottom:120px}#toolbar{bottom:18px}#controls-hint{bottom:2px}.welcome-card{padding:20px 28px 10px}.welcome-leaf{margin:14px 0}.welcome-card h2{font-size:35px}.welcome-card p{margin-bottom:16px}.coat-row{margin:12px 0 17px}#place{top:95px}#panel{top:12px;bottom:12px}}
/* Kout at the Lantern Court: the table overlay (any KoutTable view mounts in #kout-view), the Sit prompt, and the Grove UI hidden while seated. */
#kout-overlay{position:fixed;inset:0;z-index:26;background:#1b3027}#kout-view{position:absolute;inset:0}#kout-bar{position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;max-width:calc(100vw - 24px);background:#f2eddaf2;color:#4c6344;border-radius:10px;padding:8px 12px;font-size:12px;box-shadow:0 8px 24px #0004;z-index:2}#kout-bar button{min-height:40px;padding:0 14px;border-radius:7px;border:1px solid #c9c0a0;background:#fff8e6;color:#3f5538;font-weight:600}#kout-bar button.primary{background:#5d7c56;color:#fff;border-color:#5d7c56}#kout-conn{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:#71493dde;color:#fff;border-radius:6px;padding:6px 12px;font-size:12px;z-index:2}
#kout-sit{position:fixed;right:30px;bottom:140px;width:250px;padding:16px;border-radius:13px;z-index:8;color:#f3ecd6}#kout-sit h3{font:20px Georgia,serif;margin:6px 0 8px}#kout-sit ul{list-style:none;margin:0 0 10px;padding:0;font-size:11px;line-height:1.7}#kout-sit li.A:before{content:'● ';color:#c07a66}#kout-sit li.B:before{content:'● ';color:#7f9bb0}#kout-sit p{font-size:11px}#kout-sit button{width:100%;margin-top:6px;min-height:44px}
body.kout-open #header,body.kout-open #place,body.kout-open #toolbar,body.kout-open #quest,body.kout-open #context,body.kout-open #controls-hint,body.kout-open #labels,body.kout-open #duel-hud,body.kout-open #rest-banner,body.kout-open #joystick,body.kout-open #saved,body.kout-open #kout-sit{display:none!important}
.world-label.resident.kout small{color:#f2d58f}
@media(max-width:700px){#kout-sit{right:15px;bottom:calc(108px + var(--safe-bottom));width:200px}}
/* Town chat: a speech button left of the toolbar opens a one-line input and a small town log; bubbles float over speakers. */
#chat{position:fixed;left:30px;bottom:30px;z-index:4;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 28px));pointer-events:none}#chat>*{pointer-events:auto}
#chat-row{display:flex;gap:8px;align-items:center}#chat-button{position:relative;width:48px;height:48px;flex:none;border-radius:50%;color:#e8d9a8;display:grid;place-items:center}#chat.open #chat-button{background:#2f4a3d;box-shadow:0 0 0 2px var(--gold)}
#chat-dot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px #1e332a}
#chat-form{flex:1;display:flex;align-items:center;gap:6px;height:48px;border-radius:24px;padding:0 5px 0 15px;min-width:0}#chat-input{flex:1;min-width:0;border:0;background:transparent;color:#f5f0dd;font-size:16px;outline:none}#chat-input::placeholder{color:#b9c2ae}
#chat-count{font-size:10px;color:#e3c98d}#chat-send{height:38px;border-radius:19px;padding:0 15px;background:var(--gold);color:#2e4335;font-weight:600;font-size:13px}
#chat-log{border-radius:13px;padding:8px 10px 6px;color:#eeeadb}#chat-log header{display:flex;align-items:center;justify-content:space-between;gap:6px}#chat-log [role=tablist]{display:flex;gap:4px;flex-wrap:wrap}
#chat-log [data-chat-tab]{background:transparent;color:#c9cfbd;font-size:11px;padding:5px 9px;border-radius:12px;min-height:30px}#chat-log [data-chat-tab].active{background:#f0e6cc;color:#2e4335;font-weight:600}
#chat-fold{background:transparent;color:#e3c98d;width:32px;height:30px;font-size:14px}
#chat-lines{list-style:none;margin:6px 0 0;padding:0;max-height:118px;overflow-y:auto;touch-action:pan-y;font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}#chat-lines li{padding:2px 0}#chat-lines time{font-size:10px;color:#98a592;font-variant-numeric:tabular-nums}#chat-lines b{color:#f2d58f;font-weight:600}#chat-lines .mine b{color:#bfe0c6}
.chat-ch{font-style:normal;font-size:8px;letter-spacing:1px;color:#2e4335;background:#d9c697;border-radius:3px;padding:1px 3px;margin-right:2px;vertical-align:1px}#chat-empty{margin:6px 0 2px;font-size:11px;color:#aab4a2}
#bubbles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}.chat-bubble{position:absolute;transform:translate(-50%,calc(-100% - 24px));max-width:min(220px,62vw);width:max-content;background:#fbf7ea;color:#2c3f33;border-radius:12px;padding:6px 10px;font-size:12.5px;line-height:1.35;box-shadow:0 3px 12px #1a302544;overflow-wrap:anywhere;white-space:pre-wrap}
.chat-bubble:after{content:'';position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:#fbf7ea;transform:translateX(-50%) rotate(45deg)}
#chat-person{position:fixed;right:30px;bottom:140px;width:230px;padding:16px;border-radius:13px;z-index:8;color:#f3ecd6}#chat-person h3{font:20px Georgia,serif;margin:6px 0 6px}#chat-person p{font-size:11px;line-height:1.5;color:#cbd3c2;margin:0 0 8px}#chat-person button{width:100%;margin-top:6px;min-height:44px}
@media(min-width:701px){body.chat-open #quest{display:none}#chat.open{bottom:124px}}
@media(max-width:700px){#chat{left:14px;bottom:calc(100px + var(--safe-bottom))}#chat-button{width:44px;height:44px}#chat-form{height:44px}#chat-lines{max-height:96px}#chat-person{right:15px;bottom:calc(108px + var(--safe-bottom));width:200px}body.chat-open #context{display:none}}
body.kout-open #bubbles{display:none}body.kout-open #chat{z-index:27;top:max(10px,env(safe-area-inset-top));bottom:auto;left:10px;flex-direction:column-reverse;width:min(330px,calc(100vw - 150px))}body.kout-open #chat-lines{max-height:76px}body.kout-open #chat-person{display:none}body.kout-open #chat-log [data-chat-tab]{font-size:10px;padding:4px 8px;min-height:28px}body.kout-open .tab-long{display:none}body.kout-open #chat-log{padding:6px 8px 5px}
#chat-person .secondary-button{background:transparent;color:#ece5cf;border:1px solid #ffffff55;border-radius:8px}
/* Tier 2: locked forge and kitchen rows are greyed with their gate ("Crafting 33"); worn armour shows its block; a resting creature's Engage counts down. */
.recipe.locked{opacity:.55;filter:grayscale(.85)}.recipe.locked h3{color:#7d8274}.recipe .lock{color:#9a7a5e}.recipe button.gate{background:#d9dccb;color:#6d7564;letter-spacing:.3px;white-space:nowrap}
.equipment em{font-style:normal;color:#829172;font-size:8px}.equipment>div.empty{opacity:.7}
#context button.resting{opacity:.75;cursor:default}#context button.locked{opacity:.55}
/* The chat row spans the phone's width; only its button and form take taps, so the Engage and Strike buttons under its empty part stay reachable. */
#chat-row{pointer-events:none}#chat-row>*{pointer-events:auto}
/* Welcome creator: two body tiles, Randomize, and the turntable preview in the world behind the card. */
.body-row{margin:16px 0 20px}.body-row>span{display:block;font-size:8px;letter-spacing:1.3px;color:#89937e;margin-bottom:8px}.body-row>div[role=group]{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.body-tile{min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#e6e7d6;border:1px solid #d7dcc7;border-radius:8px;color:#4e6246;font-size:13px;letter-spacing:.3px;cursor:pointer;touch-action:manipulation}
.body-tile[aria-pressed=true]{background:#dfe6cf;border-color:#6f8a64;box-shadow:inset 0 0 0 1px #6f8a64;color:#2f4a33}.body-tile:disabled{opacity:.6}
.body-tile .glyph{display:block;width:14px;height:22px;position:relative}.body-tile .glyph:before{content:'';position:absolute;left:3px;top:0;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.7}.body-tile .glyph:after{content:'';position:absolute;left:1px;top:10px;width:12px;height:12px;border-radius:3px 3px 1px 1px;background:currentColor;opacity:.7}.body-tile .glyph.female:after{left:2px;width:10px;border-radius:5px 5px 1px 1px}
.look-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}.look-row[hidden]{display:none}.look-buttons{display:flex;gap:8px}.look-roll{min-height:44px;padding:0 16px;border-radius:22px;background:#fff9;border:1px solid #cfd6bd;color:#4e6246;font-size:12px;cursor:pointer;touch-action:manipulation}.look-roll i{font-style:normal;font-size:17px;vertical-align:-2px;margin-right:3px}.look-row small{font-size:9px;color:#98a08b}
/* Creator sheet: one compact row per part, arrows plus swatch strips. */
#creator-sheet{margin:6px 0 12px;border-top:1px solid #d7dcc7;padding-top:10px;max-height:34dvh;overflow-y:auto;scrollbar-width:thin}
#creator-sheet[hidden]{display:none}
.look-part{display:flex;align-items:center;gap:6px;margin:2px 0}
.look-arrow{flex:none;width:44px;min-height:44px;border-radius:10px;background:#e6e7d6;border:1px solid #d7dcc7;color:#4e6246;font-size:20px;line-height:1;touch-action:manipulation}
.look-name{flex:1;font-size:11px;color:#4e6246;text-align:center;line-height:1.35}
.look-name b{display:block;font-family:Georgia,serif;font-weight:400;font-size:14px;color:#344d3e}
.look-name i{font-style:normal;font-size:9px;color:#98a08b}
.look-swatches{display:flex;gap:7px;overflow-x:auto;padding:6px 2px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.look-swatch{flex:none;width:44px;height:44px;border-radius:50%;background:var(--sw);border:2px solid #fff8;box-shadow:0 0 0 1px #b9c2a8;touch-action:manipulation}
.look-swatch[aria-pressed=true]{box-shadow:0 0 0 2px #f1eddf,0 0 0 4px #6f8a64}
/* Looking glass + migration card: the same sheet in a bottom sheet. */
#mirror-sheet,#migrate-card{position:fixed;inset:0;z-index:14;display:flex;align-items:flex-end;justify-content:center;background:#0e211c3b;pointer-events:auto}
#mirror-sheet[hidden],#migrate-card[hidden]{display:none}
.mirror-card{width:min(480px,100%);max-height:min(72dvh,640px);overflow-y:auto;background:var(--paper);border-radius:20px 20px 0 0;padding:24px 24px calc(20px + var(--safe-bottom));box-shadow:0 20px 70px #10251e55;touch-action:pan-y}
.mirror-card .eyebrow{font-size:8px;letter-spacing:1.9px;margin-bottom:8px}
.mirror-card h2{margin:0;font:30px Georgia,serif;font-weight:400;color:#344d3e}
.mirror-card p{font-size:11px;line-height:1.7;color:#747e6e;margin:10px 0 14px}
.mirror-card .look-part{margin:4px 0}
.mirror-card .look-arrow{background:#e9e7d8;border-color:#dcdcc8}
.mirror-tools{display:flex;gap:8px;margin-bottom:12px}
.mirror-rows{border-top:1px solid var(--line);padding-top:10px;margin-bottom:6px}
.mirror-actions{margin-top:14px}
.mirror-actions .primary.gold{background:#d6ba7f;color:#334735}
.mirror-actions .text-button{margin-top:4px}
@media(min-width:701px){#mirror-sheet,#migrate-card{align-items:center;padding:20px}.mirror-card{border-radius:19px;padding:28px 28px 24px}}
#welcome.creating{cursor:grab}#welcome.creating .welcome-card{cursor:auto}
@media(max-width:700px){#welcome.creating{align-items:flex-end;padding:0 12px max(12px,env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent 40%,#20382740)}#welcome.creating .welcome-card{width:100%;max-width:420px;max-height:56dvh;overflow:auto;padding:18px 20px 10px}#welcome.creating .welcome-leaf,#welcome.creating .welcome-card p,#welcome.creating .eyebrow{display:none}#welcome.creating .welcome-card h2{font-size:24px;margin:0 0 12px}#welcome.creating .body-row{margin:12px 0 14px}.body-tile{min-height:58px}}

/* Trading (docs/trading-plan.md §4): player card actions, the 30 s ask banner, the bottom sheet, TRADING labels, the parcel. Saffron marks the other side's changes. */
:root{--saffron:#e8a33a}
#chat-person .card-actions{display:flex;gap:6px}
#chat-person .card-actions button{flex:1;min-height:44px;border-radius:8px;background:#b5c4ae1c;color:#ece5cf;border:1px solid #c6d1b93b;font-size:12px}
#chat-person .card-trade{margin:6px 0 10px;min-height:46px;font-size:12px}
#chat-person .card-trade svg{width:18px;height:18px}
.resident .trade-row{background:var(--gold);color:#2e4335;font-weight:600;min-height:44px}
.world-label.resident.trading small{color:var(--saffron);font-weight:700;letter-spacing:1.4px}
.equipment>div{flex-wrap:wrap}
.equipment .slot-off{margin-left:auto;background:#d9dccb;color:#56694e;border-radius:6px;padding:0 10px;min-height:34px;font-size:9px;font-weight:600;letter-spacing:.3px}
#trade-banner{position:fixed;z-index:12;left:50%;bottom:calc(118px + var(--safe-bottom));transform:translateX(-50%);width:min(440px,calc(100vw - 24px));border-radius:14px;padding:10px 10px 10px 16px;display:flex;align-items:center;gap:8px;overflow:hidden;font-size:12px}
#trade-banner .tb-text{flex:1;line-height:1.4}
#trade-banner strong{color:var(--gold);font-weight:600}
#trade-banner button{min-height:44px;border-radius:8px;padding:0 14px;font-size:12px;font-weight:600;white-space:nowrap}
#trade-banner .tb-open{background:var(--gold);color:#2e4335}
#trade-banner .tb-no{background:transparent;color:#ece5cf;border:1px solid #ffffff55}
#trade-banner .tb-clock{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--gold);transform-origin:left;animation:trade-clock 30s linear forwards}
@keyframes trade-clock{from{transform:scaleX(1)}to{transform:scaleX(0)}}
#trade-sheet{position:fixed;z-index:12;left:50%;bottom:0;transform:translateX(-50%);width:min(560px,100vw);height:60vh;height:60dvh;min-height:420px;background:var(--paper);border-radius:20px 20px 0 0;box-shadow:0 -12px 50px #10251e55;display:flex;flex-direction:column;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;padding-bottom:var(--safe-bottom)}
#trade-sheet header{flex-shrink:0;position:relative;padding:14px 60px 10px 20px;background:linear-gradient(135deg,#e7e5d6,#f2eee2);border-bottom:1px solid var(--line)}
#trade-sheet header .eyebrow{font-size:8px}
#trade-sheet h2{margin:4px 0 2px;font:22px Georgia,serif;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#trade-sheet h2 .tplace{font-size:15px;color:#79846d}
#trade-sheet .close-button{width:44px;height:44px;top:12px;right:12px}
#trade-sheet .tbody{flex:1;overflow-y:auto;padding:10px 16px 8px}
#trade-sheet .section-title{margin:6px 0 6px}
#trade-sheet .section-title span{font-weight:500;letter-spacing:.8px;color:#98a38b}
.trow{display:flex;gap:6px;overflow-x:auto;min-height:56px;padding:2px 0 4px;align-items:center;scrollbar-width:thin}
.trow.theirs{background:#ece6cf66;border-radius:9px;padding:3px 4px 5px}
.tempty{margin:0;font-size:11px;color:#8d977f;padding:0 4px}
.tpack{display:grid;grid-template-columns:repeat(7,minmax(44px,1fr));gap:5px}
.ttile{position:relative;flex:none;min-width:48px;width:56px;height:52px;border-radius:8px;background:#e9e7d8;border:1px solid #dcdcc8;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px 2px;color:var(--ink);gap:1px}
.tpack .ttile{width:auto;min-width:44px;height:50px}
.ttile svg{width:21px;height:21px;stroke-width:1.45}
.ttile .ttile-name{font-size:7px;line-height:1.1;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ttile b{position:absolute;right:3px;top:2px;font-size:9px;font-weight:600;background:#f4f0dd;border-radius:3px;padding:0 2px}
.ttile.mine{background:#dfe8d2;border-color:#bccaa9}
.ttile.theirs{cursor:default}
.ttile.flash{animation:trade-flash 3s ease-out}
@keyframes trade-flash{0%,35%{background:var(--saffron);border-color:#c9851f;box-shadow:0 0 0 3px #e8a33a66}100%{background:#e9e7d8;border-color:#dcdcc8;box-shadow:none}}
.ttile.locked{opacity:.38;filter:grayscale(.8)}
.ttile.spent{opacity:.45}
.ttile.empty{border-style:dashed;background:transparent;opacity:.35}
#trade-sheet footer{flex-shrink:0;padding:10px 16px 14px;border-top:1px solid var(--line);background:#efeadb}
.tstatus{display:flex;align-items:center;gap:6px;font-size:12px;color:#6b7764;margin-bottom:8px}
.tstatus .ok{color:var(--green);font-weight:650}
.tstatus .tafter{margin-left:auto;font-size:11px}
.tstatus .tafter.over{color:#a4553b;font-weight:650}
#trade-accept{min-height:50px;justify-content:center;font-size:14px;font-weight:650}
#trade-accept.counting{font-variant-numeric:tabular-nums}
#trade-pop{position:fixed;z-index:14;display:flex;align-items:center;gap:6px;padding:8px;border-radius:12px}
#trade-pop small{font-size:10px;color:#d6dccb;max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#trade-pop button{min-width:52px;min-height:44px;border-radius:8px;background:var(--gold);color:#2e4335;font-weight:650;font-size:13px;padding:0 10px}
.trade-parcel{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:6px;background:var(--saffron);color:#5b3a12;display:grid;place-items:center;box-shadow:0 3px 10px #1a302555}
.trade-parcel svg{width:18px;height:18px}
body.trading #context,body.trading #quest,body.trading #chat-person{display:none}
@media(min-width:701px){#trade-sheet{left:auto;right:20px;top:20px;bottom:20px;transform:none;width:480px;height:auto;border-radius:19px;border:1px solid #fff6}
#trade-banner{bottom:118px}}
@media(max-width:700px){#trade-sheet h2{font-size:20px}
#trade-sheet header{padding:12px 60px 9px 18px}
#trade-sheet .tbody{padding:6px 14px 6px}
.tpack{gap:4px}
.tpack .ttile{height:46px}
.trow{min-height:54px}
.ttile{height:50px}
#trade-sheet footer{padding:8px 14px 12px}
body.trading #toolbar,body.trading #chat{display:none}}
#chat-lines .system .chat-text{color:#e8d9a8;font-style:italic}
/* The town-chat button sits top-left over the Kout table; the table's wordmark steps right of it. */
body.kout-open #kout-view .wordmark{margin-left:52px}
/* Banana Protocol uses the same full-screen seat convention as Kout. */
#protocol-overlay{position:fixed;inset:0;z-index:30;background:var(--cream)}#protocol-frame{border:0;width:100%;height:100%;display:block}
.protocol-open>#world,.protocol-open>#vignette,.protocol-open>#labels,.protocol-open>#header,.protocol-open>#toolbar,.protocol-open>#place,.protocol-open>#quest,.protocol-open>#context,.protocol-open>#controls-hint,.protocol-open>#saved,.protocol-open>#chat{display:none!important}
#protocol-sit{position:fixed;z-index:12;left:50%;bottom:120px;transform:translateX(-50%);width:min(330px,calc(100vw - 32px));padding:22px;border-radius:13px;color:var(--cream)}#protocol-sit h3{font:28px Georgia,serif;margin:10px 0}#protocol-sit .eyebrow{color:var(--gold);font-size:9px;line-height:1.7}#protocol-sit p{font-size:12px;line-height:1.6}#protocol-sit ul{list-style:none;padding:0;margin:20px 0}#protocol-sit li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f0ebdc25;font-size:12px}#protocol-sit button{width:100%;min-height:44px;margin-top:6px;border-radius:8px}#protocol-sit .primary{background:var(--gold);color:var(--ink)}

/* Phone polish: explicit tutorial controls and measurable, non-overlapping place targets. */
#quest .quest-toggle{min-height:44px;margin:0 0 8px;background:transparent;color:inherit;justify-content:space-between;font-size:11px}
#quest.collapsed{padding:8px 12px;width:auto;max-width:230px}
#quest.collapsed button{min-height:44px;margin:0;font-size:11px}
#context button:disabled{opacity:.65;cursor:default}
@media(max-width:700px){
 .world-label,.world-label.resource,.world-label.place,.world-label.npc{font-size:11px;min-height:44px;min-width:44px;padding:8px 10px;letter-spacing:.4px}
 .world-label small,.world-label.npc small{font-size:9px}
 #quest{max-width:210px}#quest.collapsed{max-width:210px}
 #context .eyebrow{font-size:9px;line-height:1.4}#context p{font-size:11px}
 .recipe button{white-space:normal;max-width:125px}
}

@media(max-width:700px){#panel[data-kind="examine"]{height:auto;max-height:80dvh}#panel[data-kind="examine"] #panel-content:empty{display:none}}
/* Game records inherit the Grove's paper ledger and dark player card. */
.record-owner{font:22px Georgia,serif;margin:0 0 18px;overflow-wrap:anywhere}.record-owner span{display:block;font:11px Inter,sans-serif;color:var(--muted);margin-top:5px}
.record-game{margin:0 0 28px}.record-game h3{font:24px Georgia,serif;margin:0 0 12px}.record-game+.record-game{padding-top:22px;border-top:1px solid var(--line)}
.record-score{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;font-variant-numeric:tabular-nums}.record-score>strong{font:30px Georgia,serif;color:var(--green)}.record-score small{font:13px Inter,sans-serif}.record-score>span{font-size:12px;color:var(--green)}
.record-ledger{margin:0;font-size:13px;font-variant-numeric:tabular-nums}.record-ledger>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}.record-ledger dt{color:var(--ink)}.record-ledger dd{margin:0;font-weight:600;text-align:right}
.record-honours{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0 0 24px}.record-honours li{padding:7px 10px;border:1px solid #baa16c;border-radius:6px;color:#705523;font-size:11px;background:#d9b97822}
.record-ranks{list-style:none;padding:0;margin:0}.record-ranks button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--line);min-height:64px}.record-ranks button:hover{background:#d9b97822}.record-rank{font:22px Georgia,serif;color:var(--green);width:18px;flex-shrink:0}.record-name{flex:1;min-width:0;font-size:15px;overflow-wrap:anywhere}.record-ranks small{display:block;font-size:10px;color:#586850;font-weight:400;margin-top:5px}.record-ranks strong{text-align:right;font-size:22px;font-variant-numeric:tabular-nums;flex-shrink:0}
.records-link{min-height:44px;width:100%;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);padding:10px;font-size:13px}
#chat-person{width:280px;max-height:calc(100dvh - 160px);overflow:auto;touch-action:pan-y}#chat-person .record-strip{border-top:1px solid #c6d1b93b;border-bottom:1px solid #c6d1b93b;padding:10px 0 2px;margin:10px 0 4px}#chat-person .record-strip strong{display:flex;justify-content:space-between;font-size:12px;color:var(--gold)}#chat-person .record-strip p{font-size:11px;margin:5px 0 9px;color:var(--cream)}.world-label.records{font-size:10px;min-height:36px;background:var(--glass);color:var(--cream);border:1px solid var(--gold)}
@media(max-width:700px){#chat-person{width:min(280px,calc(100vw - 30px));max-height:calc(100dvh - 150px)}#toolbar button{min-width:44px}#panel[data-kind=games] #panel-heading p,#panel[data-kind=records] #panel-heading p{font-size:12px}}

#panel[data-kind=games] .subtext,#panel[data-kind=records] .subtext,#panel[data-kind=games] #panel-heading p,#panel[data-kind=records] #panel-heading p,.record-owner span{color:#586850}
/* Touch screens: the narrow layout's 35px Settings control and the 34px panel close need a 44px target. Fine pointers keep those sizes. */
@media (hover: none) and (pointer: coarse){
 #settings{width:44px;height:44px;min-width:44px;min-height:44px}
 #panel .close-button,#trade-sheet .close-button{width:44px;height:44px;min-width:44px;min-height:44px}
}
/* Fight-card key names (Space, E) only where a keyboard is the way you play. The button words stay. */
#context button[data-dodge]>span.key-hint,#context button[data-attack]>span.key-hint{display:none}
@media (hover: hover) and (pointer: fine){
 #context button[data-dodge]>span.key-hint,#context button[data-attack]>span.key-hint{display:inline}
}
.welcome-return{display:flex;align-items:center;justify-content:center;gap:4px}
.welcome-return .text-button{width:auto;flex:1;padding:11px 4px}
#sign-in-form,#password-form{margin-top:4px}
#sign-in-form label,#password-form label{display:block;font-size:8px;letter-spacing:1.3px;color:#89937e;margin:10px 0 8px}
#sign-in-name,#sign-in-password,#account-password{width:100%;background:#e6e7d6;border:1px solid #d7dcc7;border-radius:6px;min-height:43px;font-size:13px;color:#4e6246;padding:10px 12px}
#sign-in-form .primary,#password-form .secondary-button{margin-top:12px}