/* HappyMeat visual fidelity pass — November 2026. Uses original supplied art. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=DM+Serif+Display:ital@0;1&display=swap');
:root{--paper:#f9efd9;--paper2:#fff9e9;--red:#b22a21;--burg:#421923;--wine:#702c32;--ink:#3b211c;--gold:#d29c60;--border:#d0ae86;--muted:#8c6a58}
html{scroll-behavior:smooth}body{background:#2e151b;color:var(--ink)}#shell{background:var(--paper);max-width:485px;min-height:100dvh;box-shadow:0 0 35px #16080c77}
#shell:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");z-index:1}
header{position:sticky;height:62px;background:#fff2d9;border-bottom:1px solid #cfad83;box-shadow:0 2px 7px #34191b13;padding:8px 16px}header img{width:154px;max-height:46px;z-index:1}header .topright{z-index:1;gap:6px}.counterchip{color:#9d291f;border:1px solid #bf8d67;background:#f2dbb8;font-size:11px;padding:7px 9px;white-space:nowrap}#backend-status{border:1px solid #cfaa85;background:#f6e6c8;color:#885b4b;font-size:9px;letter-spacing:.5px}
main{position:relative;z-index:2;min-height:calc(100dvh - 135px);padding:22px 18px calc(112px + env(safe-area-inset-bottom))}main section{position:relative}h1,h2,h3{font-family:'DM Serif Display',Georgia,serif;color:#983027;letter-spacing:-.55px}h1{font-size:clamp(36px,8.5vw,45px);line-height:1.08;margin:8px 0 13px}h2{font-size:28px}.eyebrow{color:#ab3228;letter-spacing:1.8px}.btn{border-radius:100px;box-shadow:none;font-size:13px;letter-spacing:.2px}.btn-primary{background:#af2c21;color:#fff6dc;border:1px solid #91261f;box-shadow:0 3px 0 #7c201b}.btn-ghost{background:transparent;border:1.5px solid #a7372c;color:#9f2922}.btn:hover:not(:disabled){filter:brightness(1.035)}.btn:active:not(:disabled){transform:translateY(1px)}.card{background:#fff4df;border-color:#d8b992;box-shadow:0 3px 10px #87482c0c}.field{margin:13px 0}.field input,.field select,.chatinput{background:#fff9ec;border-color:#c9a98b;border-radius:9px}.field label{color:#963128;font-weight:800}.seg button{background:#fff8e7;border:1px solid #c79c7e}.seg button.active{background:#af2a21}.muted{color:#96745e}.notice{background:#f8e1bc;color:#693625}.status{background:#f2ddbd}.pill{border:1px solid #d3b28c;background:#f6dfb5;color:#913b30}.footnote{line-height:1.5}
.tabbar{max-width:485px;height:calc(70px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#aa3027,#8e231e);border-top:2px solid #d69b78;padding:7px 3px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -3px 15px #35131730}.tabbar button{min-width:0;min-height:52px;font-size:10px;gap:4px;opacity:.83;position:relative}.tabbar button.active{opacity:1;color:#fff7de}.tabbar button.active:before{content:"";position:absolute;top:0;left:calc(50% - 19px);width:38px;height:2px;background:#ffe6a4;border-radius:8px}.tabbar svg{width:25px;height:25px;stroke-width:1.7}.tabbar button:focus-visible{outline:2px solid #fff5de;outline-offset:-2px}
/* Entry visual: actual approved illustrated front door */
.entry-page{margin:-22px -18px 0}.entry-art{height:clamp(380px,61dvh,620px);background:#482028 url('assets/entrance-illustrated.webp') center 27%/cover no-repeat;position:relative;border-bottom:5px solid #9a3a30}.entry-art:after{content:"";position:absolute;bottom:0;left:0;right:0;height:24%;background:linear-gradient(transparent,#4a1b23cc)}.entry-copy{position:relative;text-align:center;background:#fbf0d8;padding:20px 23px 35px}.entry-copy h1{font-size:32px;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 5px}.entry-copy p{font-size:12px;font-weight:600;letter-spacing:1.4px;line-height:1.45;margin:4px 0 17px}.entry-copy .btn{margin:5px 0;width:100%;min-height:48px}.entry-note{color:#ae4d3c;font-size:11px;margin-top:14px;text-align:center}
/* Create account: original hand-cut avatars in proper UI */
.signup-title{text-align:center}.signup-banner{text-align:center;background:#af2a23;color:#fff4d8;font-weight:800;font-size:11px;letter-spacing:1px;border-radius:4px;padding:10px;margin:14px 0;box-shadow:0 3px 0 #8e2b25}.avatar-strip{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 12px;margin:5px -2px 8px;scrollbar-width:thin}.avatar-strip::-webkit-scrollbar{height:4px}.avatar-strip::-webkit-scrollbar-thumb{background:#b97955}.meatoption{flex:0 0 83px;scroll-snap-align:center;padding:6px 3px 7px;border-radius:10px;background:#f7e7cc;border-color:#d7b692;box-shadow:0 2px 0 #d3b48b;min-height:134px}.meatoption.active{border:2px solid #a8221d;box-shadow:0 0 0 1px #a8221d,0 4px 0 #c99875;background:#ffefd3}.meatoption img{height:92px;width:100%;object-fit:contain;mix-blend-mode:normal}.meatoption b{font-size:9px;line-height:1.12;min-height:20px}.meatoption small{font-size:8px}.selected-showcase{display:flex;align-items:center;gap:14px;padding:10px 14px;background:#f3e1c2;border:1px solid #d5b68f;border-radius:14px}.selected-showcase img{height:104px;width:79px;object-fit:contain}.selected-showcase h3{font-size:23px;margin:0}.selected-showcase p{margin:4px 0 0;font-size:11px}.name-status{font-size:11px;color:#8d554a;font-style:italic}.form-tip{background:#f8e7c9;border:1px dashed #c6946c;padding:10px 12px;font-size:11px;color:#7b4639;border-radius:8px}
/* Bar: approved illustrated lounge, overlaid genuine interactivity */
.bar-page{margin:-22px -18px 0;background:#391724;padding-bottom:10px;color:#ffedd4;min-height:calc(100dvh - 122px)}
.bar-hud{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:linear-gradient(180deg,#471b26,#52232b);gap:9px}.bar-hud-left{display:flex;align-items:center;gap:10px;min-width:0}.bar-hud-left img{width:43px;height:43px;object-fit:contain;border:2px solid #e7b77a;border-radius:50%;background:#5a2731;padding:3px}.bar-hud strong{font-size:14px;color:#fff1d8;white-space:nowrap;max-width:155px;overflow:hidden;text-overflow:ellipsis}.bar-hud small{font-size:10px;color:#dda87d;display:block;line-height:1.5}.bar-hud .btn{min-height:35px;padding:5px 10px;font-size:10px;white-space:nowrap;border-color:#d69c6b;color:#fff0d7}.illustrated-room{position:relative;background:#331622 url('assets/bar-illustrated.webp') center center/cover no-repeat;width:100%;height:min(61dvh,640px);min-height:390px;overflow:hidden;border-top:1px solid #a56e4a;border-bottom:4px solid #b77b57}.illustrated-room:after{content:"";position:absolute;pointer-events:none;bottom:0;left:0;right:0;height:20%;background:linear-gradient(transparent,#321621ab)}
.room-hotspot{position:absolute;z-index:2;background:#62242abf;color:#fff0cd;border:1.5px solid #dd9e60;border-radius:9px;font-size:10px;font-weight:800;letter-spacing:.2px;padding:7px 9px;box-shadow:0 0 15px #f08d576b;text-shadow:0 1px 3px #2d1212;backdrop-filter:blur(2px)}.room-hotspot:focus-visible{outline:3px solid #fff}.room-hotspot span{display:block;font-size:8px;color:#f2be9a}.hot-bar{left:5%;bottom:11%}.hot-chat{right:5%;bottom:11%}.hot-wardrobe{right:4%;top:12%}.hot-social{left:6%;top:15%}.bar-action-deck{padding:12px 13px 5px;display:grid;grid-template-columns:1fr 1fr;gap:9px}.bar-action-deck button{font-weight:800;letter-spacing:.2px;border:1px solid #ba8056;border-radius:10px;background:#6d2f37;color:#fff0d1;padding:12px 9px;text-align:left;min-height:57px;font-size:12px}.bar-action-deck small{display:block;color:#e9b596;font-size:10px;margin-top:4px;font-weight:500}.bar-tagline{text-align:center;color:#ddb78b;font-size:10px;letter-spacing:1.4px;padding:11px}
/* Social, play and profile */
.section-head{text-align:center;margin:3px 0 15px}.section-head h1{margin:2px 0 7px}.section-head p{max-width:340px;margin:auto}.social-feature{background:#fbefd8;border-radius:15px;border:1px solid #cdaa84;overflow:hidden;margin-bottom:15px}.social-cover{height:155px;background:url('assets/bar-illustrated.webp') center 40%/cover no-repeat;position:relative}.social-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#3b1523b0,transparent)}.social-cover b{position:absolute;z-index:1;bottom:12px;left:15px;font:italic 29px 'DM Serif Display',Georgia,serif;color:#fff2d8}.social-content{padding:15px}.social-content p{margin:0 0 10px}.coming-list{display:grid;gap:9px}.coming-item{border:1px solid #d8b894;border-radius:11px;padding:13px;background:#fff6e5;display:flex;justify-content:space-between;align-items:center;gap:8px}.coming-item strong{font-size:13px}.coming-item small{display:block;color:#96745e;font-size:10px;margin-top:5px}.coming-item .pill{white-space:nowrap}
.profile-card{background:#fff3d9;border:1px solid #d5b48c;border-radius:18px;overflow:hidden;margin-bottom:13px}.profile-top{background:linear-gradient(145deg,#f3d9b7,#fff3dc);padding:17px 15px 10px;display:flex;gap:14px;align-items:center}.profile-top img{height:230px;max-width:51%;object-fit:contain;filter:drop-shadow(0 6px 2px #8a4c3b22)}.profile-top h2{font-size:29px;line-height:1.02;margin:0 0 5px;word-break:break-word}.profile-top .identity-tag{font-size:10px;color:#98422e;display:block}.profile-meta{padding:12px 15px;border-top:1px solid #d9b692}.profile-meta .stat{display:grid;grid-template-columns:1fr 1fr;gap:8px}.profile-meta .stat .card{padding:12px 6px;border-radius:8px}.profile-meta .stat strong{font-family:'DM Serif Display';font-size:26px;color:#a32d26}.profile-meta .stat .footnote{font-size:9px}.profile-meta .stat .card span{display:block}.profile-banner{font-size:10px;letter-spacing:.7px;color:#ae342a;text-align:center;border-top:1px solid #d6b48b;padding:10px}.selectedMeat{mix-blend-mode:normal}.skin img{mix-blend-mode:normal}.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.skin{padding:15px 8px}.skin img{height:140px}
/* Coming soon should be graceful, not dead buttons */
.coming{min-height:53dvh}.coming .symbol{font-size:70px;line-height:1}.soon-art{width:130px;height:170px;object-fit:contain;filter:drop-shadow(0 7px 5px #59332b22)}.coming h1{font-size:42px}.preview-ribbon{font-size:10px;line-height:1.5;color:#7e4c3d;background:#f4dfc0;border:1px solid #d3b18b;border-radius:10px;margin-top:12px;padding:11px}.modal{border:3px solid #bb3126;border-radius:16px;background:#fbefd9;box-shadow:0 24px 80px #1207099e}.modal .reward{font-family:'DM Serif Display',Georgia,serif}.overlay{backdrop-filter:blur(3px)}.chatbox{background:#fff6e3;min-height:270px}.drinkrow strong{font-size:14px}.drinkrow button{flex:0 0 auto}.sharebox{grid-template-columns:1fr 1fr}
/* Relative scrolling and small-device fixes */
@media (max-width:359px){header img{width:122px}.counterchip{font-size:9px;padding:5px}#backend-status{font-size:8px}.meatoption{flex-basis:74px}.bar-hud strong{max-width:120px}}
@media (min-width:750px){.illustrated-room{height:640px}.entry-art{height:610px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* All six canonical avatars visible at once on mobile. */
.avatar-strip{gap:3px;overflow-x:visible;justify-content:space-between}
.meatoption{flex:1 1 0;min-width:0;min-height:121px;padding:4px 1px}
.meatoption img{height:80px}
.meatoption b{font-size:8px;overflow-wrap:anywhere;line-height:1.1}
@media(max-width:360px){.meatoption img{height:67px}.meatoption{min-height:110px}.avatar-strip{gap:2px}}