/* A warm illustrated game frame. UI text keeps a complete Vietnamese font. */
:root{--ink:#4c3d2a;--cream:#f8e5bd;--paper:#fff3d6;--orange:#7a9b64;--orange-dark:#55784c;--green:#55784c;--line:#83603d;--shadow:#674a31;--yellow:#e9bb65;color:var(--ink);background:#d6dfbd;font-family:"Segoe UI",Arial,sans-serif}
body{background:radial-gradient(ellipse at top,#edf0d5 0,#d4deb9 75%);color:var(--ink)}
[hidden]{display:none!important}
button{transition:background .15s,transform .12s;touch-action:manipulation}
button:disabled{cursor:not-allowed;opacity:.5}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #52744d;outline-offset:3px}
.topbar{height:74px;border-bottom:4px solid #7b5836;background:repeating-linear-gradient(0deg,#9c7046 0 19px,#946840 20px,#b48b57 22px);box-shadow:0 3px 0 #dac28f;color:#fff0cb;padding:0 max(22px,calc((100vw - 1440px)/2 + 22px))}
.brand{grid-template-columns:46px auto;grid-template-rows:27px 18px;letter-spacing:1.5px;text-shadow:2px 2px #77522e}
.brand>span:nth-child(2){font-size:25px}.brand>span span{color:#f6cf87}.brand small{color:#f8deb0;font-family:inherit;font-size:9px;letter-spacing:2px}
.brand-cup{width:34px;height:31px;border:2px solid #755032;background:#f2db9e;box-shadow:3px 3px #755032;color:#658350;text-shadow:none}
.online-pill{background:#725d3f;border:1px solid #cda06a;border-radius:3px;color:#f6ebcb;font-family:inherit;font-size:12px;padding:8px 12px}.online-pill i{background:#bfd291;box-shadow:none}
.top-actions button{height:36px;min-width:36px;background:#e8c98c;color:#69503a;border:2px solid #795537;box-shadow:2px 2px #775030;border-radius:3px}.top-actions button:hover{background:#ffe5ac}
.cafe-shell{grid-template-columns:minmax(0,1fr) 350px;gap:20px;padding:24px 22px;align-items:start;max-width:1440px}
.world-card{border:6px solid #8b633e;outline:2px solid #62472f;box-shadow:inset 0 0 0 2px #d2a36b,5px 6px 0 #b9c598;max-height:none;aspect-ratio:3/2;border-radius:2px;background:#d3ba86}
#cafe-canvas{background:#d4bf8e}.world-status{top:12px;left:12px;background:#fff1cded;color:#665139;border:2px solid #aa8252;box-shadow:2px 2px #8f704a;font:600 11px/1.3 "Segoe UI",sans-serif;padding:7px 9px}
.world-status span:first-child{background:#ddad55}.world-status span:first-child.live{background:#719760}
.world-caption{position:absolute;top:12px;right:12px;display:grid;text-align:right;color:#fbe6bb;background:#725638e8;border:2px solid #b18751;padding:7px 10px;pointer-events:none}.world-caption b{font-size:11px}.world-caption span{font-size:8px;letter-spacing:.8px;margin-top:3px;color:#eac996}
.controls-hint{background:#faf0cce8;border:2px solid #a68557;color:#766044;font:600 10px/1.3 "Segoe UI",sans-serif;bottom:12px;gap:8px}
.interact-button{background:#d8e4b2;color:#48683b;border:3px solid #708354;box-shadow:3px 3px #4d603a;font-size:13px;bottom:22px;padding:10px 20px}.interact-button span{color:#6e9959}.interact-button:active{transform:translate(calc(-50% + 2px),2px);box-shadow:1px 1px #4d603a}
.side-panel{border:4px solid #956d44;outline:2px solid #694c33;box-shadow:5px 6px 0 #b8c398;min-height:590px;max-height:calc(100dvh - 118px);background:#fff1d3;border-radius:2px}
.panel-tabs{background:#e8d3a5;border-bottom:2px solid #ae8756}.panel-tabs button{color:#987b54;border-right:1px solid #c4a577;padding:13px 4px 10px}.panel-tabs button.active{color:#4c6e42;background:#fff1d3}.panel-tabs b{font:700 11px/1.5 "Segoe UI",sans-serif;letter-spacing:.3px;text-transform:none}.panel-tabs span{font-size:20px;margin-bottom:2px}
.panel-view{padding:22px 20px}.panel-heading small,.modal small,.table-header small{font:700 9px/1.4 "Segoe UI",sans-serif;letter-spacing:1.6px;color:#8a714f}.panel-heading h1{font-size:25px;line-height:1.2;margin:6px 0 10px;color:#51402e;letter-spacing:-.6px}.pixel-steam{color:#98ac73;font-size:38px}.panel-copy{font-size:12px;color:#897458;line-height:1.65;margin-bottom:19px}
.menu-grid{gap:12px}.menu-item{grid-template-columns:62px 1fr auto;padding:10px 12px;min-height:79px;background:#fffae9;border:2px solid #cfb48b;box-shadow:2px 3px #dfc596;border-radius:2px}.menu-item:hover:not(:disabled){border-color:#8aa56b;box-shadow:3px 4px #c1ca96}.menu-item b{font-size:14px;color:#5c4931}.menu-item small{font-size:11px;margin-top:4px;color:#9b815f}.menu-item strong{font:700 13px/1.3 "Segoe UI",sans-serif;color:#66864f}
.menu-art{border:0;box-shadow:none;width:52px;height:52px;background:#eff0d5;position:relative;border-radius:3px;padding:0}.menu-art canvas{width:52px;height:52px;image-rendering:pixelated}.snack-art{background:#f6e4bc;letter-spacing:0}.menu-item:disabled{opacity:.78}
.empty-state{margin:17px 0;color:#9c8565;border-color:#d6bf95;padding:12px;background:#f7eacb;font-size:11px}.empty-state span{font-size:23px;color:#91a876}.payment-note{color:#9d8869;border-color:#ddcba5;font-size:10px;line-height:1.5;margin:18px 0 0}
.table-header{border-color:#c5a473;align-items:center}.table-header h2{font-size:21px;color:#5a4833}.table-tools button{background:#f9e6c4;border-color:#c5a577;color:#856444;padding:8px;min-height:35px;font-size:11px}.table-tools .danger{color:#ab6348}
.brawl-box{background:#ede7c9;border:1px solid #c4b083;box-shadow:2px 2px #dfcca6;margin:12px 0 8px;padding:10px;gap:8px}.brawl-box b{font-size:12px;color:#6c6850}.brawl-box small{color:#a18c68;font-size:10px;line-height:1.4}.brawl-box select{border:1px solid #bba179;font-size:12px;background:#fff8e3;min-height:34px}.bonk-small,.rude-button{background:#a88b63;border:2px solid #7d5e3d;box-shadow:2px 2px #92754f;color:#fff6da;font-size:11px}.rude-button{background:#bb7654}
.chat-list{height:260px}.message b{font-size:10px;color:#6f8e55}.message p{background:#f0e3c0;border-color:#d1b891;color:#715b3f;font-size:12px}.message.mine p{background:#e2e9c4;border-color:#c2cf9c}.emoji-row button{background:#fff8e4;border-color:#d5bd90;min-width:35px;min-height:35px}.chat-form input{border:1px solid #c6a87a;border-radius:2px;background:#fffbed;padding:10px;color:#5c4933;min-height:40px}.primary,.chat-form button{background:#7c9b62;border:2px solid #557346;color:#fff7dc;box-shadow:2px 3px #566f41;border-radius:2px;font-size:12px;font-weight:700;min-height:39px}.primary:hover,.chat-form button:hover{background:#91aa73}
.big-empty{min-height:340px;color:#9a8565}.big-empty h2{color:#69583d;font-size:22px}.big-empty>span{color:#98ac78}.big-empty p{font-size:12px;line-height:1.6}.playing-card{outline-color:#7a6041;box-shadow:3px 4px #c9b58b}.card-player{background:#f0e3bf;border-color:#c4ab82;color:#786244;font-size:11px}.card-player.turn{outline:2px solid #8ea46d}.cards-view label{font-size:12px}.cards-view select{background:#fff8e2;border:1px solid #bca179}
.order-card,.item-card{background:#f5e7c5;border:2px solid #b4996b;box-shadow:2px 3px #d6bf95;color:#796140}.item-card{background:#e5edce;border-color:#a4bb7d}.status-label{color:#89704c;font:600 10px "Segoe UI",sans-serif}.progress{background:#dfc99e}.progress i{background:#8aaa69}.portions{color:#708e57}.order-card button{display:block;margin-top:10px}.status-row b{font-size:12px}
.ticker{color:#8b754f;background:#c6d3a5;border-color:#aebc8b;font:600 9px "Segoe UI",sans-serif;letter-spacing:1px;height:34px}.ticker i{color:#91a16e}
.modal{border:4px solid #9c744b;outline:2px solid #6a4f34;background:#fff1d3;color:#5f4b33;box-shadow:6px 7px #6f573b70;border-radius:3px;padding:24px;min-width:0}.modal::backdrop{background:#34452fc4;backdrop-filter:blur(2px)}.modal h2{font-size:25px;color:#635135;line-height:1.2}.modal p{font-size:13px;line-height:1.65;color:#8f7858}.modal label>span{color:#80694b}.modal input,.modal textarea{border:2px solid #d2b488;color:#655137;background:#fffaeb;border-radius:2px;font-size:14px}.modal button:not(.primary):not(.swatches button):not(.bonk-button):not(.close-modal){border:1px solid #c7a674;background:#f2dfb7;color:#846b49;padding:10px}.modal button.rude-button{background:#bb7654;color:#fff4cf}.close-modal{color:#a58b66}.avatar-preview{border:3px solid #c7ab75;background:#dccea5}.modal legend{font:700 11px "Segoe UI",sans-serif;color:#8a7152}.swatches button{border-color:#fff3d6;outline-color:#c5ae7b}.swatches button.active{outline-color:#7f9b5c}.choice-grid{gap:10px}.wait-note{background:#e9edcf;border-color:#9cab75}.fight-bars>div{grid-template-columns:95px 1fr 45px}.fight-bars b{font-size:12px;overflow-wrap:anywhere}.fight-bars span{background:#e8d7b0;border:1px solid #c0a272}.fight-bars i{background:#bd8b5e}.fight-bars strong{font-family:inherit;font-size:10px}.bonk-button{background:#e5bd70;border-color:#a47b44;color:#79562e;box-shadow:6px 6px #aa8550;font:900 26px "Segoe UI",sans-serif;border-radius:4px}.bonk-button:active{box-shadow:2px 2px #aa8550}.qr-wrap{border-color:#c9ad7d}.qr-modal dl{font-size:12px}.qr-modal dl div{border-color:#d6bd8f}.payment-status{background:#f1deb4;color:#8e7147;font-family:inherit}.qr-modal code{background:#ebd5a4}.qr-modal dd button{color:#6c8a53}
#toast{background:#5f714b;color:#fff6dc;border:2px solid #405535;box-shadow:3px 4px #405535;font-size:12px;max-width:min(90vw,420px);text-align:center;bottom:30px}
@media(min-width:901px) and (max-width:1150px){.cafe-shell{grid-template-columns:minmax(0,1fr) 310px;gap:15px;padding:20px 16px}.panel-view{padding:18px 15px}.world-caption{display:none}.controls-hint{font-size:9px}.side-panel{min-height:580px}}
@media(max-width:900px){.topbar{height:58px;padding:0 14px;box-shadow:none}.brand{grid-template-columns:38px auto;grid-template-rows:24px 13px}.brand>span:nth-child(2){font-size:20px}.brand small{font-size:7px}.brand-cup{width:28px;height:27px}.online-pill{font-size:11px;padding:6px 8px;margin-right:8px}.top-actions{gap:5px}.top-actions button{height:32px;min-width:32px}.cafe-shell{display:block;padding:0;height:calc(100dvh - 58px)}.world-card{height:calc(58dvh - 58px);border:0;border-bottom:4px solid #9e784d;outline:0;box-shadow:none;max-height:none;aspect-ratio:auto}.world-caption{display:none}.world-status{top:10px;left:10px}.controls-hint{top:48px;bottom:auto;left:10px;font-size:9px;padding:6px 8px}.side-panel{position:fixed;bottom:0;left:0;right:0;height:42dvh;min-height:245px;max-height:72%;border:0;border-top:4px solid #aa8454;outline:0;box-shadow:0 -3px 0 #d7c69f;border-radius:0}.panel-tabs button{padding:7px 4px 6px}.panel-tabs span{font-size:17px;margin:0}.panel-tabs b{font-size:10px}.panel-view{padding:14px 16px}.panel-heading h1{font-size:22px;margin:4px 0 12px}.panel-copy{display:none}.menu-grid{grid-template-columns:1fr 1fr;gap:9px}.menu-item{grid-template-columns:44px 1fr;padding:8px;min-height:73px}.menu-item strong{grid-column:2;font-size:12px}.menu-item b{font-size:12px}.menu-item small{font-size:9px}.menu-art,.menu-art canvas{width:38px;height:38px}.empty-state{padding:9px;margin:12px 0}.payment-note{display:flex;margin:14px 0 0}.dpad{gap:5px;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,42px);right:12px;bottom:12px}.dpad button{background:#fff2d1e8;color:#8e734f;border:2px solid #b69663;box-shadow:2px 2px #9d8259;border-radius:2px;touch-action:none}.interact-button{bottom:20px;left:33%;padding:10px 17px;min-height:43px}.chat-list{height:150px;min-height:100px}.table-header h2{font-size:18px}.brawl-box{margin-top:9px;padding:8px}.big-empty{min-height:180px}.modal{max-height:88dvh;overflow:auto;max-width:92vw}.ticker{display:none}.fight-modal{width:90vw}.fight-bars>div{grid-template-columns:80px 1fr 38px}}
@media(max-width:520px){.world-card{height:calc(57dvh - 58px)}.side-panel{height:43dvh}.menu-grid{grid-template-columns:1fr 1fr}.menu-item strong{grid-column:2}.top-actions{gap:4px}.choice-grid{grid-template-columns:1fr}.modal{padding:19px}.modal h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}