:root {
  --ink:#120b07;
  --wood:#24150b;
  --wood2:#3a210f;
  --gold:#d9a43c;
  --gold2:#f0c66a;
  --cream:#f4e2b4;
  --parch:#ead29b;
  --green:#5aa937;
  --red:#7d1d12;
  --line:#7c4b1e;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#080503;color:#f7ebcf;font-family:Georgia,'Times New Roman',serif}
body{overflow-x:hidden}
button,input{font:inherit}
.desktop-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#2a1609 0,#0c0704 55%,#050302 100%);padding:0}
.design-stage{position:relative;width:min(100vw,calc(100vh * 1.5));aspect-ratio:3/2;overflow:hidden;background:#120b07;box-shadow:0 0 60px #000}
.master-design{display:block;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
.hotspot,.m-hotspot{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);border:0;background:transparent;cursor:pointer;border-radius:8px;z-index:20}
.hotspot:hover,.hotspot:focus-visible,.m-hotspot:hover,.m-hotspot:focus-visible{outline:2px solid rgba(240,198,106,.82);outline-offset:-2px;background:rgba(238,177,49,.07);box-shadow:0 0 16px rgba(236,168,34,.22)}
.live-number,.mobile-live{position:absolute;z-index:15;display:flex;align-items:baseline;justify-content:center;gap:.35em;background:linear-gradient(90deg,rgba(18,11,7,.96),rgba(23,14,8,.98));color:#f7f0df;font-weight:700;text-shadow:0 2px 2px #000;letter-spacing:.01em;pointer-events:none}
.live-number small,.mobile-live small{font-size:.35em;font-weight:400;color:#f2e2bb}
.desktop-avail{left:66.0%;top:20.5%;width:12.7%;height:4.5%;font-size:clamp(12px,2.2vw,31px);color:#fff}
.desktop-pending{left:66.0%;top:29.8%;width:12.7%;height:4.2%;font-size:clamp(11px,1.85vw,27px);color:#eeb43d}
.desktop-total{left:66.0%;top:37.5%;width:12.7%;height:3.5%;font-size:clamp(10px,1.45vw,23px)}
.mobile-preview-avail{left:84.5%;top:15.6%;width:13.5%;height:2.7%;font-size:clamp(7px,.9vw,15px);color:#6fbc46}
.mobile-preview-pending{left:84.5%;top:20.3%;width:13.5%;height:2.7%;font-size:clamp(7px,.9vw,15px);color:#eeb43d}
.mobile-preview-total{left:84.5%;top:24.8%;width:13.5%;height:2.7%;font-size:clamp(7px,.9vw,15px)}
.mobile-wrap{display:none;min-height:100vh;background:#090503;justify-content:center}
.mobile-stage{position:relative;width:min(100vw,430px);aspect-ratio:306/700;background:#120b07;overflow:hidden}
.master-mobile{display:block;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
.mobile-live{font-size:clamp(14px,5.2vw,23px)}
.mobile-avail{left:44%;top:21.1%;width:46%;height:5%;color:#6fbc46}
.mobile-pending{left:44%;top:28.3%;width:46%;height:5%;color:#eeb43d}
.mobile-total{left:44%;top:35.5%;width:46%;height:5%}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:1000;background:#17100a;border:1px solid #a87326;color:#f6e5ba;padding:10px 16px;border-radius:8px;box-shadow:0 12px 35px #000b;opacity:0;pointer-events:none;transition:.22s;max-width:min(92vw,560px);text-align:center;font-family:system-ui,sans-serif;font-size:13px}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal-backdrop{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.74);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:18px}
.modal{width:min(760px,96vw);max-height:92vh;overflow:auto;background:
linear-gradient(135deg,#2c1a0e,#130c07 70%);border:2px solid #9e6422;box-shadow:0 20px 70px #000, inset 0 0 0 4px #2f1b0b;border-radius:10px;color:#f4e6c6;position:relative}
.modal.parchment{background:linear-gradient(rgba(238,216,166,.97),rgba(220,188,125,.98));color:#241408;border-color:#6e4317}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 14px;border-bottom:1px solid #71471f}
.modal.parchment .modal-header{border-color:#8b673b}
.eyebrow{margin:0 0 4px;color:#d9a43c;text-transform:uppercase;letter-spacing:.18em;font:700 10px system-ui,sans-serif}
.modal.parchment .eyebrow{color:#7e291a}
.modal h2{margin:0;font-size:28px;line-height:1.05;color:#f5dfab;text-shadow:0 1px #000}
.modal.parchment h2{color:#3b1c0c;text-shadow:none}
.close{border:1px solid #81501e;background:#22140a;color:#f6d892;width:36px;height:36px;border-radius:4px;cursor:pointer;font:700 18px system-ui,sans-serif}
.modal.parchment .close{background:#6b2a16;color:#ffe1a1;border-color:#4d170d}
.modal-body{padding:20px}
.muted{color:#cbb98f;font-family:system-ui,sans-serif;font-size:13px;line-height:1.55}
.modal.parchment .muted{color:#624c32}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.card{border:1px solid #6f451d;background:rgba(8,6,4,.55);padding:14px;border-radius:5px;box-shadow:inset 0 0 18px #0005}
.parchment .card{background:rgba(255,248,221,.44);border-color:#9f7849;box-shadow:none}
.metric-label{font:700 10px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:#c79635}
.metric-value{font-size:30px;font-weight:700;margin-top:4px;color:#f6e5ba}
.metric-value.green{color:#75bd4e}.metric-value.amber{color:#efb73d}
.metric-note{font:11px system-ui,sans-serif;color:#b9aa86;margin-top:4px}
.offer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:13px 0;border-bottom:1px dashed #6e451d;cursor:pointer}
.offer:last-child{border-bottom:0}
.offer:hover .offer-title{color:#f2c66a}
.offer-title{font-size:17px;font-weight:700}.offer-meta{font:11px system-ui,sans-serif;color:#c3ae7f;margin-top:4px}.reward{color:#efb642;font-weight:700;font-size:18px;white-space:nowrap}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn{min-height:42px;padding:9px 16px;border:1px solid #a26c23;border-radius:4px;background:linear-gradient(#466f20,#234410);color:#f7e6bd;font-weight:700;cursor:pointer;box-shadow:inset 0 1px #ffffff24,0 3px 8px #0008;text-transform:uppercase;letter-spacing:.02em}
.btn.secondary{background:linear-gradient(#4b2811,#281306);border-color:#89551c}.btn.red{background:linear-gradient(#8e2a17,#4f1009);border-color:#a54e2b}.btn.ghost{background:transparent}.btn:disabled{opacity:.45;cursor:not-allowed}
.stepbar{display:flex;gap:5px;margin:14px 0}.stepdot{height:5px;flex:1;background:#5b3b1b}.stepdot.done{background:#d99f31}
.option{display:flex;align-items:center;gap:10px;width:100%;padding:11px;border:1px solid #a38153;background:#f2dfb2;color:#241408;text-align:left;cursor:pointer;margin-top:8px;border-radius:3px}.option.selected{outline:2px solid #7a2715;background:#e7c98d}
.entry{display:grid;grid-template-columns:1fr auto;gap:12px;padding:11px 0;border-bottom:1px dashed #70461c}.entry:last-child{border:0}.entry-title{font-weight:700}.entry-meta{font:11px system-ui,sans-serif;color:#bca77c;margin-top:3px}.status{font:700 10px system-ui,sans-serif;text-transform:uppercase;padding:3px 6px;border:1px solid #8e672c;border-radius:999px;color:#edc765}.amount{text-align:right;font-weight:700}.amount.pos{color:#7fc153}.amount.pending{color:#efb73d}.amount.neg{color:#f19a7d}
.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}.journey div{border:1px solid #7a4c1d;background:#190f08;padding:10px 6px;text-align:center;font:700 10px system-ui,sans-serif;text-transform:uppercase;color:#e5c47c}.journey .active{border-color:#d39b35;color:#ffd98e;box-shadow:inset 0 0 14px #9b5d1d55}
.method{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid #9a7445;background:#f0ddb0;color:#251409;cursor:pointer;margin-top:8px;border-radius:3px;font-weight:700}.method.selected{outline:2px solid #7c2415}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}.filter{border:1px solid #6e451d;background:#1a1009;color:#d8c494;padding:6px 10px;border-radius:999px;cursor:pointer;font:11px system-ui,sans-serif}.filter.active{background:#654015;color:#ffe19f}
.demo-strip{padding:10px 20px;border-top:1px solid #5e3817;background:#0e0906;color:#c9b38a;font:11px system-ui,sans-serif;text-align:center}
@media(max-width:1024px){
  .desktop-wrap{display:none}.mobile-wrap{display:flex}
  .modal-backdrop{padding:8px;align-items:flex-end}.modal{width:100%;max-height:92vh;border-radius:12px 12px 0 0}.modal-header{padding:15px}.modal-body{padding:15px}.modal h2{font-size:23px}.grid3,.grid2{grid-template-columns:1fr}.journey{grid-template-columns:1fr 1fr}.actions .btn{flex:1 1 auto}
}

/* v6.1 real responsive mobile UI — no stretched screenshot */
@media(max-width:1024px){
  html,body{background:#080503}
  .mobile-wrap{display:flex;min-height:100svh;background:#080503;justify-content:center;align-items:flex-start}
  .mobile-app{position:relative;width:min(100%,900px);min-height:100vh;min-height:100svh;padding-bottom:calc(76px + env(safe-area-inset-bottom));overflow:hidden;color:#f5e1b2;background:
    radial-gradient(circle at 50% -15%,rgba(125,70,20,.26),transparent 38%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px),
    linear-gradient(90deg,#0d0805,#231306 20%,#130b06 50%,#251507 80%,#0d0805);
    border-left:1px solid #6f451d;border-right:1px solid #6f451d;box-shadow:0 0 28px #000}
  .m-header{height:calc(74px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);display:grid;grid-template-columns:64px 1fr 64px;align-items:center;border-bottom:1px solid #7a4b1c;background:linear-gradient(#160d07,#241307 52%,#120a05);box-shadow:inset 0 -5px 12px #0008,0 5px 14px #0008;position:sticky;top:0;z-index:80}
  .m-icon-btn{height:100%;border:0;background:transparent;color:#e5ad48;display:grid;place-items:center;position:relative;cursor:pointer}
  .hamb{width:28px;display:grid;gap:6px}.hamb i{display:block;height:3px;border-radius:3px;background:#d9a43c;box-shadow:0 1px 1px #000}
  .m-brand{text-align:center;display:flex;align-items:center;gap:8px;min-width:0}.m-brand strong{font-size:clamp(23px,7vw,31px);letter-spacing:.025em;color:#efbd59;text-shadow:0 2px 2px #000,0 0 8px #aa5a15}.m-brand-rule{height:1px;flex:1;max-width:22px;background:#8a571e}
  .bell-btn .bell{font-size:25px;transform:rotate(180deg);color:#efbd59}.bell-btn b{position:absolute;top:12px;right:13px;min-width:20px;height:20px;border-radius:20px;background:#a8170d;color:#fff;display:grid;place-items:center;border:1px solid #f1c262;font:700 11px system-ui,sans-serif}
  .m-drawer{position:fixed;z-index:100;top:calc(74px + env(safe-area-inset-top));left:50%;width:min(100%,900px);transform:translate(-50%,-125%);transition:transform .2s ease;background:linear-gradient(#1e1108,#0d0704);border:1px solid #82501c;border-top:0;padding:8px 12px 14px;box-shadow:0 18px 28px #000d}
  .m-drawer.open{transform:translate(-50%,0)}
  .m-drawer button{width:100%;min-height:48px;padding:8px 10px;border:0;border-bottom:1px solid #5c3718;background:transparent;color:#f2d99e;text-align:left;font-weight:700;font-size:17px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.m-drawer button:last-child{border-bottom:0}.m-drawer small{font:11px system-ui,sans-serif;color:#ae956d}
  .demo-ribbon{display:flex;justify-content:center;padding:12px 12px 3px}.demo-ribbon span{position:relative;display:block;min-width:210px;padding:8px 28px;text-align:center;background:linear-gradient(#8d291b,#5d130c);border:1px solid #be6b31;box-shadow:inset 0 1px #e39255,0 3px 7px #0009;color:#f3d8a1;font-weight:700;letter-spacing:.06em;text-shadow:0 1px #000}
  .m-content{padding:10px 14px 22px;display:grid;gap:18px}
  .pub-panel{border:2px solid #8a571f;outline:1px solid #34200e;outline-offset:-6px;background:linear-gradient(rgba(7,5,4,.76),rgba(20,12,7,.94));box-shadow:inset 0 0 30px #000c,0 7px 18px #0008;padding:15px 13px;border-radius:3px}
  .pub-panel h2,.pub-panel h3{margin:0 0 13px;text-align:center;color:#e9bb62;text-shadow:0 1px #000}.pub-panel h2{font-size:21px;letter-spacing:.025em}.pub-panel h2 span{color:#9c6425;font-weight:400}.pub-panel h3{font-size:17px;letter-spacing:.04em;border-bottom:1px solid #694018;padding-bottom:9px}
  .pint-row{min-height:55px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:7px;padding:8px 12px;border:1px solid #2d1d11;border-radius:4px;background:linear-gradient(90deg,#070605,#120c08);box-shadow:inset 0 1px 0 #352414,0 2px 5px #0008;font-size:18px}.pint-row strong{font-size:22px;white-space:nowrap;color:#f3ead7}.pint-row strong.green{color:#69b846}.pint-row strong.amber{color:#f0b43c}.pint-row small{font-size:12px;font-weight:400;color:#ead9b4}
  .parchment-card{position:relative;margin-top:5px;padding:26px 16px 14px;background:
    radial-gradient(circle at 25% 15%,rgba(255,255,255,.17),transparent 28%),
    repeating-linear-gradient(0deg,rgba(86,50,15,.035) 0 1px,transparent 1px 4px),
    #e3c68a;color:#281708;border:2px solid #6c4217;outline:1px solid #b98945;outline-offset:-6px;box-shadow:0 7px 18px #0009,inset 0 0 25px #6a3e1430;border-radius:3px}
  .red-banner{position:absolute;left:9%;right:9%;top:-15px;height:40px;display:grid;place-items:center;background:linear-gradient(#8c291b,#5d140c);color:#f2d8a1;border:1px solid #a75928;box-shadow:0 3px 7px #0008,inset 0 1px #d9854e;font-weight:700;text-shadow:0 1px #000}
  .special-row{width:100%;display:grid;grid-template-columns:28px 1fr auto;gap:9px;align-items:center;padding:13px 0;border:0;border-bottom:1px solid rgba(83,48,14,.2);background:transparent;color:#261507;text-align:left;cursor:pointer}.special-row:last-of-type{border-bottom:0}.special-row .special-icon{font-size:20px;color:#6c330d}.special-row span:nth-child(2){display:grid}.special-row b{font-size:17px}.special-row small{font-size:13px;font-weight:700}.special-row strong{font-size:18px;white-space:nowrap}.redtext{color:#7d170d}.special-row strong.green{color:#366e21}
  .view-offers{width:88%;min-height:42px;margin:10px 6% 0;border:1px solid #8b581d;background:linear-gradient(#4a2911,#2b1408);color:#f0d7a0;box-shadow:inset 0 1px #8d6233,0 3px 6px #0007;font-weight:700;cursor:pointer}
  .activity-card{padding-bottom:7px}.activity-item{width:100%;min-height:58px;display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;border:0;border-bottom:1px solid #4f3117;background:transparent;color:#f1e2c2;text-align:left;cursor:pointer}.activity-item:last-child{border-bottom:0}.avatar{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#b98a59;border:2px solid #d8b482;color:#2b1609;font-weight:700}.activity-item small{color:#c9b68f}.activity-item em{font-size:11px;color:#e0b763;font-style:normal;align-self:start;padding-top:12px}
  .m-bottom{position:fixed;z-index:90;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,900px);height:calc(72px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,1fr);background:linear-gradient(#291507,#130b06 60%,#0c0704);border-top:2px solid #80501c;box-shadow:0 -5px 14px #000b}.m-bottom button{border:0;border-right:1px solid #5d3817;background:transparent;color:#f2d99f;display:grid;place-items:center;align-content:center;gap:2px;cursor:pointer}.m-bottom button:last-child{border-right:0}.m-bottom span{font-size:25px;line-height:1;color:#e7b655}.m-bottom b{font-size:12px}
  .master-mobile,.mobile-live,.m-hotspot{display:none!important}
  .toast{bottom:84px}
  .modal{background:linear-gradient(rgba(25,14,7,.99),rgba(13,8,5,.99)),radial-gradient(circle at 50% 10%,#563016 0,transparent 45%)}
}
\n/* Universal phone/tablet refinements */
@media (max-width:1024px) and (min-width:600px){
  .mobile-app{width:min(100%,900px)}
  .m-content{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:18px 22px 28px}
  .activity-card{grid-column:1/-1}
  .m-brand strong{font-size:32px}
  .m-drawer{width:min(100%,900px);display:grid;grid-template-columns:1fr 1fr;padding:12px 18px 18px}
  .m-drawer button:nth-child(odd){border-right:1px solid #5c3718}
  .m-bottom{width:min(100%,900px)}
  .pub-panel h2{font-size:24px}.pub-panel h3{font-size:19px}
  .pint-row{font-size:19px}.pint-row strong{font-size:24px}
}
@media (max-width:599px){
  .mobile-app,.m-drawer,.m-bottom{width:100%;max-width:430px}
}
@media (max-width:360px){
  .m-header{grid-template-columns:52px minmax(0,1fr) 52px}
  .m-brand strong{font-size:clamp(19px,6.8vw,25px)}
  .m-brand-rule{display:none}
  .m-content{padding-left:9px;padding-right:9px}
  .pint-row{padding-left:9px;padding-right:9px;font-size:16px}.pint-row strong{font-size:19px}
  .special-row{grid-template-columns:24px 1fr auto;gap:6px}.special-row b{font-size:15px}.special-row strong{font-size:15px}
  .m-bottom b{font-size:10px}.m-bottom span{font-size:22px}
}
@media (max-width:1024px) and (orientation:landscape) and (max-height:600px){
  .m-header{position:sticky}
  .m-bottom{height:calc(60px + env(safe-area-inset-bottom))}
  .m-content{padding-bottom:18px}
  .toast{bottom:72px}
}


/* v6.2 Beerlicity mobile dressings — lightweight CSS/SVG only */
@media(max-width:1024px){
  .mobile-app:before,.mobile-app:after{content:"";position:fixed;z-index:2;top:0;bottom:0;width:4px;pointer-events:none;background:linear-gradient(90deg,#3b210c,#d19a37 45%,#5b3313 55%,#1c0f07);opacity:.62}
  .mobile-app:before{left:max(0px,calc(50% - min(50vw,450px)))}
  .mobile-app:after{right:max(0px,calc(50% - min(50vw,450px)))}

  .m-header{border-bottom:2px solid #8c571d;box-shadow:inset 0 -1px 0 #d09b3e55,inset 0 -8px 18px #0009,0 5px 14px #0009}
  .m-header:after{content:"";position:absolute;left:12%;right:12%;bottom:-2px;height:1px;background:linear-gradient(90deg,transparent,#d7a245,#8a5318,#d7a245,transparent)}
  .m-brand{position:relative}
  .m-brand:before,.m-brand:after{content:"◇";color:#9d671f;font-size:14px;text-shadow:0 1px #000}
  .m-brand-rule{background:linear-gradient(90deg,transparent,#b87b2a,#e0ac49)}
  .m-brand-rule:last-of-type{background:linear-gradient(90deg,#e0ac49,#b87b2a,transparent)}

  .bell-btn .bell{width:30px;height:30px;display:grid;place-items:center;transform:none!important;color:#efbd59;filter:drop-shadow(0 1px 1px #000)}
  .bell-btn .bell svg{width:27px;height:27px;display:block;fill:currentColor}
  .bell-btn b{top:10px;right:11px}

  .demo-ribbon span{clip-path:polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,0 50%);padding-left:38px;padding-right:38px}
  .demo-ribbon span:before,.demo-ribbon span:after{content:"◆";position:absolute;top:50%;transform:translateY(-50%);font-size:8px;color:#dda957}.demo-ribbon span:before{left:18px}.demo-ribbon span:after{right:18px}

  .pub-panel,.parchment-card{position:relative}
  .pub-panel:before,.pub-panel:after,.parchment-card:before,.parchment-card:after{content:"";position:absolute;width:12px;height:12px;pointer-events:none}
  .pub-panel:before{left:5px;top:5px;border-left:2px solid #b87a29;border-top:2px solid #b87a29}
  .pub-panel:after{right:5px;bottom:5px;border-right:2px solid #b87a29;border-bottom:2px solid #b87a29}
  .parchment-card:before{left:7px;top:7px;border-left:2px solid #8a5a20;border-top:2px solid #8a5a20}
  .parchment-card:after{right:7px;bottom:7px;border-right:2px solid #8a5a20;border-bottom:2px solid #8a5a20}
  .pub-panel{background:
    radial-gradient(circle at 8px 8px,#c78f35 0 1px,#4b2a10 2px 3px,transparent 4px),
    radial-gradient(circle at calc(100% - 8px) 8px,#c78f35 0 1px,#4b2a10 2px 3px,transparent 4px),
    linear-gradient(rgba(7,5,4,.76),rgba(20,12,7,.94));
  }
  .ornate-title{display:flex!important;align-items:center;justify-content:center;gap:10px}
  .ornate-title .ornament{font-size:10px;color:#a96c25;position:relative}
  .ornate-title .ornament:before{content:"";position:absolute;top:50%;width:34px;height:1px;background:linear-gradient(90deg,transparent,#9c6525)}
  .ornate-title .ornament:first-child:before{right:12px}
  .ornate-title .ornament:last-child:before{left:12px;transform:scaleX(-1)}

  .pint-row{border-color:#382315;box-shadow:inset 0 1px 0 #4a2e19,0 2px 5px #0008}
  .pint-row:before{content:"";width:4px;height:22px;border-radius:4px;background:linear-gradient(#c58b31,#6c3c12);box-shadow:0 0 0 1px #1f1108;flex:0 0 4px}
  .pint-row>span:first-of-type{margin-left:-2px;margin-right:auto}

  .red-banner{left:8%;right:8%;clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%);letter-spacing:.025em}
  .special-row{position:relative;padding-left:2px;padding-right:2px}
  .special-row:after{content:"";position:absolute;left:36px;right:0;bottom:0;height:1px;background:linear-gradient(90deg,#865e2c33,#865e2c77,#865e2c22)}
  .special-row:last-of-type:after{display:none}
  .special-icon{width:27px;height:27px;border:1px solid #7a4a17;display:grid;place-items:center;box-shadow:inset 0 0 0 2px #d8b87366;background:#e4c98b55;font-size:16px!important}
  .view-offers{position:relative;letter-spacing:.04em}
  .view-offers:before,.view-offers:after{content:"◆";position:absolute;top:50%;transform:translateY(-50%);font-size:8px;color:#c28b36}.view-offers:before{left:13px}.view-offers:after{right:13px}

  .activity-card h3{border-bottom:0;padding-bottom:6px}
  .activity-card h3:after{content:"";display:block;width:70%;height:1px;margin:7px auto 0;background:linear-gradient(90deg,transparent,#8a571f,#d09a38,#8a571f,transparent)}

  .m-bottom{border-top:2px solid #8d581f;box-shadow:inset 0 1px 0 #d0a14a44,0 -5px 14px #000b}
  .m-bottom button{position:relative}
  .m-bottom button:before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:24px;height:1px;background:#9b6424;opacity:.45}

  .m-drawer{background:
    radial-gradient(circle at 50% 0,#4a290f44,transparent 45%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    linear-gradient(#1e1108,#0d0704)}
  .m-drawer:before{content:"BEERLICITY";display:block;grid-column:1/-1;text-align:center;padding:7px 0 13px;color:#e7b554;font-size:20px;font-weight:700;letter-spacing:.08em;border-bottom:1px solid #6e4219;text-shadow:0 1px #000}
  .m-drawer button:after{content:"›";color:#d8a34a;font-size:25px;line-height:1;margin-left:9px}
  .m-drawer small{margin-left:auto;margin-right:10px}
}

@media(max-width:360px){
  .m-brand:before,.m-brand:after{display:none}
  .ornate-title{gap:6px}.ornate-title .ornament:before{width:22px}
}

/* v6.3 closer-to-master mobile character + fully scrollable drawer */
@media(max-width:1024px){
  .mobile-app{overflow:visible}
  .m-drawer{
    max-height:calc(100svh - 74px - env(safe-area-inset-top));
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:calc(18px + env(safe-area-inset-bottom));
    scrollbar-width:thin;
  }
  .m-drawer:before{
    content:"";
    height:74px;
    background:url('assets/mobile-logo-sign.webp') center/auto 68px no-repeat;
    padding:0;
  }
  .m-drawer button{flex:0 0 auto}

  .mobile-pub-atmosphere{
    position:relative;
    height:clamp(112px,28vw,190px);
    margin:6px 14px 2px;
    overflow:hidden;
    border:2px solid #87521c;
    outline:1px solid #3b230f;
    outline-offset:-6px;
    background:
      linear-gradient(90deg,rgba(8,5,3,.55),rgba(8,5,3,.12) 48%,rgba(8,5,3,.48)),
      url('assets/mobile-pub-atmosphere.webp') center 22%/cover no-repeat;
    box-shadow:inset 0 0 25px #0009,0 6px 16px #0008;
  }
  .mobile-pub-atmosphere:before,.mobile-pub-atmosphere:after{
    content:"";position:absolute;width:18px;height:18px;top:6px;border-top:2px solid #c58a31;pointer-events:none
  }
  .mobile-pub-atmosphere:before{left:6px;border-left:2px solid #c58a31}
  .mobile-pub-atmosphere:after{right:6px;border-right:2px solid #c58a31}
  .pub-atmo-copy{
    position:absolute;left:10px;right:10px;bottom:8px;text-align:center;
    padding:5px 8px;background:linear-gradient(90deg,transparent,#120a05cc 18%,#120a05e8 50%,#120a05cc 82%,transparent);
    color:#f3d38a;text-shadow:0 2px 3px #000;
  }
  .pub-atmo-copy strong{display:block;font-size:clamp(15px,4.8vw,24px);letter-spacing:.06em}
  .pub-atmo-copy span{display:block;margin-top:1px;font-size:clamp(11px,3.2vw,15px);color:#f5e5bf}
}

@media(max-width:599px){
  .m-drawer{left:0;right:0;width:100%;max-width:none;transform:translateY(-125%)}
  .m-drawer.open{transform:translateY(0)}
  .mobile-pub-atmosphere{margin-left:9px;margin-right:9px}
}

@media(max-width:1024px) and (orientation:landscape) and (max-height:600px){
  .m-drawer{
    top:calc(60px + env(safe-area-inset-top));
    max-height:calc(100svh - 60px - env(safe-area-inset-top));
    grid-template-columns:1fr 1fr;
    padding:4px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .m-drawer:before{height:48px;background-size:auto 44px}
  .m-drawer button{min-height:40px;padding:5px 9px;font-size:15px}
  .m-drawer small{font-size:10px}
  .mobile-pub-atmosphere{height:118px}
}
@media(max-width:1024px) and (orientation:landscape) and (max-height:600px){
  .m-header{height:calc(60px + env(safe-area-inset-top))}
}

/* v6.4 persistent mobile quick navigation inside all Beerlicity screens */
.modal-mobile-nav{display:none}
@media(max-width:1024px){
  .modal{padding-bottom:0;scrollbar-gutter:stable}
  .modal-mobile-nav{
    display:grid;grid-template-columns:repeat(5,1fr);position:sticky;bottom:0;z-index:40;
    min-height:calc(62px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    border-top:2px solid #8d581f;background:linear-gradient(#1a1008f5,#0b0704 70%);
    box-shadow:inset 0 1px 0 #d0a14a44,0 -6px 18px #000c;
    backdrop-filter:blur(8px);
  }
  .modal-mobile-nav button{border:0;border-right:1px solid #5e3918;background:transparent;color:#ead39d;display:flex;min-width:0;align-items:center;justify-content:center;flex-direction:column;gap:2px;padding:7px 2px 6px;cursor:pointer;font-family:Georgia,'Times New Roman',serif}
  .modal-mobile-nav button:last-child{border-right:0}
  .modal-mobile-nav span{font-size:21px;line-height:1;color:#d8a13c;text-shadow:0 1px #000}
  .modal-mobile-nav b{font-size:10px;line-height:1.05;white-space:nowrap;color:#f0ddb0}
  .modal-mobile-nav button:active{background:#4b2c103d}
  .modal-body{padding-bottom:18px}
  .demo-strip{margin-bottom:0}
}
@media(max-width:360px){
  .modal-mobile-nav span{font-size:19px}.modal-mobile-nav b{font-size:9px}
}
@media(max-width:1024px) and (orientation:landscape) and (max-height:600px){
  .modal-mobile-nav{min-height:calc(52px + env(safe-area-inset-bottom))}
  .modal-mobile-nav span{font-size:18px}.modal-mobile-nav b{font-size:9px}
}

/* v6.5 stability fixes: persistent modal nav, drawer scroll lock, dynamic viewport */
@media(max-width:1024px){
  html.menu-open,html.menu-open body{overflow:hidden;overscroll-behavior:none}
  .modal-backdrop{height:100dvh;min-height:100svh}
  .modal{
    max-height:92dvh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .modal-header{flex:0 0 auto}
  .modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .demo-strip{flex:0 0 auto}
  .modal-mobile-nav{position:relative;bottom:auto;flex:0 0 auto}
}
@media(max-width:1024px) and (orientation:landscape) and (max-height:600px){
  .modal{max-height:96dvh}
}

/* v6.6 mobile polish: consistent pub frame, compact landscape, bar-specific nav icons */
@media(max-width:1024px){
  /* Keep the same outer Beerlicity frame on every screen, including parchment flows. */
  .modal,.modal.parchment{
    border:2px solid #9e6422;
    box-shadow:0 20px 70px #000, inset 0 0 0 4px #2f1b0b;
  }
  .modal.parchment{border-color:#9e6422}

  .pub-nav button{position:relative;transition:background .16s ease,color .16s ease}
  .pub-nav button:active{background:linear-gradient(#4a2b10aa,#241307aa)}
  .pub-nav-icon{width:28px;height:28px;display:grid!important;place-items:center;color:#e7b655}
  .pub-nav-icon svg{width:27px;height:27px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 #000)}
  .m-bottom b,.modal-mobile-nav b{letter-spacing:.02em}
  .m-bottom{border-top:1px solid #bb7b29;box-shadow:inset 0 1px 0 #e1b55a44,0 -6px 18px #000b}
  .modal-mobile-nav{border-top:1px solid #bb7b29;box-shadow:inset 0 1px 0 #e1b55a44,0 -6px 18px #000b}
}

@media(max-width:1024px) and (orientation:landscape) and (max-height:600px){
  /* On a short landscape phone, use essentially the whole web viewport. */
  .modal-backdrop{padding:0;align-items:stretch;justify-content:stretch}
  .modal,.modal.parchment{
    width:100%;height:100dvh;max-height:100dvh;border-radius:0;
    border-left:2px solid #9e6422;border-right:2px solid #9e6422;
  }
  .modal-header{padding:8px 14px 7px;min-height:54px;align-items:center}
  .modal h2{font-size:clamp(20px,4.5vw,28px)}
  .eyebrow{margin-bottom:2px;font-size:9px}
  .close{width:34px;height:34px;flex:0 0 34px}
  .modal-body{padding:11px 15px 12px}
  .demo-strip{padding:6px 12px;font-size:10px;line-height:1.2}
  .modal-mobile-nav{min-height:46px!important;padding-bottom:env(safe-area-inset-bottom)}
  .modal-mobile-nav button{padding:3px 2px 2px;gap:0}
  .modal-mobile-nav .pub-nav-icon{width:23px;height:23px}
  .modal-mobile-nav .pub-nav-icon svg{width:22px;height:22px}
  .modal-mobile-nav b{font-size:9px}
}

/* v7.0 — TRUE uniform screens. Taproom itself is untouched and remains the etalon. */
@media(max-width:1024px){
  /* All four principal screens use exactly the same Beerlicity outer frame language. */
  .screen-earn,.screen-pints,.screen-ledger,.screen-till{
    border:2px solid #9e6422!important;
    outline:1px solid #3b230f;
    outline-offset:-7px;
    box-shadow:0 20px 70px #000,inset 0 0 0 4px #2f1b0b,inset 0 0 28px #0009!important;
    background-color:#120b07;
  }
  .screen-till.parchment{
    background:linear-gradient(rgba(238,216,166,.97),rgba(220,188,125,.98));
    color:#241408;
  }
  .screen-earn .modal-header,.screen-pints .modal-header,.screen-ledger .modal-header,.screen-till .modal-header{
    border-bottom:2px solid #87521c!important;
    box-shadow:inset 0 -1px 0 #d0a14a55;
  }
  .screen-earn .modal-body,.screen-pints .modal-body,.screen-ledger .modal-body,.screen-till .modal-body{
    border-left:1px solid #3b230f;
    border-right:1px solid #3b230f;
  }
  .screen-earn .card,.screen-pints .card,.screen-ledger .card,.screen-till .card,
  .screen-till .method{
    border:1px solid #71471f;
  }
}

/* Landscape: use horizontal real estate instead of squeezing everything vertically. */
@media(max-width:1024px) and (orientation:landscape) and (max-height:650px){
  .modal-backdrop{padding:8px 12px;align-items:center;justify-content:center}
  .screen-earn,.screen-pints,.screen-ledger,.screen-till{
    width:min(96vw,980px)!important;
    height:calc(100dvh - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:8px!important;
  }
  .screen-earn .modal-header,.screen-pints .modal-header,.screen-ledger .modal-header,.screen-till .modal-header{
    min-height:56px;padding:9px 18px 8px;
  }
  .screen-earn .modal-body,.screen-pints .modal-body,.screen-ledger .modal-body,.screen-till .modal-body{
    padding:15px 20px 17px;
  }
  .screen-earn .modal-mobile-nav,.screen-pints .modal-mobile-nav,.screen-ledger .modal-mobile-nav,.screen-till .modal-mobile-nav{
    min-height:50px!important;
  }

  /* Earn: offers become two breathing columns. */
  .screen-earn .modal-body{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:28px;
    align-content:start;
  }
  .screen-earn .modal-body>.muted{grid-column:1/-1;margin:0 0 8px}
  .screen-earn .offer{padding:12px 4px;min-height:62px}
  .screen-earn .offer:nth-of-type(odd){border-right:0}

  /* Pints: three balances across the width, with supporting content below. */
  .screen-pints .grid3{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .screen-pints .journey{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .screen-pints .card{padding:13px 15px}
  .screen-pints .metric-value{font-size:clamp(27px,4vw,34px)}
  .screen-pints .actions{justify-content:flex-start;gap:12px}
  .screen-pints .actions .btn{flex:0 0 auto;min-width:150px}

  /* Ledger: two columns of activity instead of one long compressed stack. */
  .screen-ledger .modal-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;align-content:start}
  .screen-ledger .filters{grid-column:1/-1;margin-bottom:8px}
  .screen-ledger .entry{padding:12px 4px;min-height:62px}
  .screen-ledger .actions{grid-column:1/-1;margin-top:14px}

  /* Till: balance at left, methods/actions at right. */
  .screen-till .modal-body{
    display:grid;
    grid-template-columns:minmax(230px,.8fr) minmax(330px,1.2fr);
    grid-template-rows:auto auto auto;
    column-gap:26px;
    align-content:start;
  }
  .screen-till .modal-body>.card{grid-column:1;grid-row:1/4;align-self:start;min-height:155px;padding:18px}
  .screen-till .modal-body>p.muted{grid-column:2;margin:0 0 6px}
  .screen-till .method{grid-column:2;margin-top:7px;padding:11px 15px}
  .screen-till .actions{grid-column:2;margin-top:12px}
  .screen-till .actions .btn{flex:0 0 auto;min-width:150px}
}

@media(max-width:740px) and (orientation:landscape) and (max-height:500px){
  .modal-backdrop{padding:5px 7px}
  .screen-earn,.screen-pints,.screen-ledger,.screen-till{
    width:calc(100vw - 14px)!important;
    height:calc(100dvh - 10px)!important;
    max-height:calc(100dvh - 10px)!important;
  }
  .screen-earn .modal-body,.screen-pints .modal-body,.screen-ledger .modal-body,.screen-till .modal-body{padding:11px 14px 13px}
  .screen-earn .offer,.screen-ledger .entry{min-height:54px;padding:9px 3px}
  .screen-pints .card{padding:10px 12px}
  .screen-pints .metric-value{font-size:26px}
  .screen-till .modal-body{grid-template-columns:minmax(190px,.78fr) minmax(290px,1.22fr);column-gap:18px}
  .screen-till .modal-body>.card{min-height:132px;padding:13px}
  .screen-till .method{padding:9px 12px}
}


/* v7.2 prestige audit — behavior/accessibility polish only; Taproom geometry remains untouched. */
@media(max-width:1024px){
  html.modal-open,html.modal-open body{overflow:hidden;overscroll-behavior:none}
  .screen-flow{
    border:2px solid #9e6422!important;
    outline:1px solid #3b230f;
    outline-offset:-7px;
    box-shadow:0 20px 70px #000,inset 0 0 0 4px #2f1b0b,inset 0 0 28px #0009!important;
  }
  .m-icon-btn:focus-visible,.m-drawer button:focus-visible,.m-bottom button:focus-visible,
  .modal-mobile-nav button:focus-visible,.btn:focus-visible,.close:focus-visible,.option:focus-visible,
  .method:focus-visible,.filter:focus-visible,.special-row:focus-visible,.view-offers:focus-visible,
  .activity-item:focus-visible{outline:2px solid #f0c66a;outline-offset:-3px}
}
@media(max-width:1024px) and (orientation:landscape) and (max-height:650px){
  .screen-flow{width:min(96vw,900px)!important;height:calc(100dvh - 16px)!important;max-height:calc(100dvh - 16px)!important;border-radius:8px!important}
  .screen-flow .modal-body{padding:15px 20px 17px}
}

/* v8.0 — ONE PUB, ONE ROOM SHELL.
   Taproom remains the etalon. Every mobile Beerlicity room now uses the same
   viewport width, side rails, header depth and bottom-navigation depth.
   Only the furniture/content inside the room changes. */
@media(max-width:1024px){
  html.modal-open,html.modal-open body{overflow:hidden;overscroll-behavior:none}
  .modal-backdrop{
    padding:0!important;
    align-items:stretch!important;
    justify-content:center!important;
    background:#080503!important;
    backdrop-filter:none!important;
  }
  .modal,.modal.parchment,
  .screen-earn,.screen-pints,.screen-ledger,.screen-till,.screen-flow{
    width:min(100%,900px)!important;
    height:100dvh!important;
    min-height:100svh!important;
    max-height:100dvh!important;
    margin:0 auto!important;
    border-radius:0!important;
    border-top:0!important;
    border-bottom:0!important;
    border-left:1px solid #6f451d!important;
    border-right:1px solid #6f451d!important;
    outline:0!important;
    box-shadow:0 0 28px #000,inset 4px 0 0 #2a1709,inset -4px 0 0 #2a1709!important;
  }
  .modal-header{
    min-height:calc(74px + env(safe-area-inset-top))!important;
    padding:calc(10px + env(safe-area-inset-top)) 18px 10px!important;
    align-items:center!important;
    border-bottom:2px solid #8c571d!important;
    box-shadow:inset 0 -1px 0 #d09b3e55,inset 0 -8px 18px #0008!important;
    background:linear-gradient(#160d07,#241307 52%,#120a05)!important;
  }
  .modal.parchment .modal-header{background:linear-gradient(#160d07,#241307 52%,#120a05)!important}
  .modal.parchment .eyebrow{color:#d5a34a!important}
  .modal.parchment h2{color:#f5dfab!important;text-shadow:0 1px #000!important}
  .modal-header>div{min-width:0}
  .modal h2{font-size:clamp(22px,6.2vw,29px)!important;white-space:normal}
  .modal-body{
    padding:18px 18px 22px!important;
    border:0!important;
    background:transparent;
  }
  .modal-mobile-nav{
    min-height:calc(72px + env(safe-area-inset-bottom))!important;
    height:calc(72px + env(safe-area-inset-bottom))!important;
    border-top:2px solid #80501c!important;
    background:linear-gradient(#291507,#130b06 60%,#0c0704)!important;
    box-shadow:0 -5px 14px #000b,inset 0 1px 0 #d0a14a44!important;
  }
  .modal-mobile-nav button{padding:5px 2px 4px!important}
  .modal-mobile-nav .pub-nav-icon{width:28px;height:28px}
  .modal-mobile-nav .pub-nav-icon svg{width:27px;height:27px}
  .modal-mobile-nav b{font-size:10px}

  /* Same inner furniture language in every room. */
  .screen-earn .card,.screen-pints .card,.screen-ledger .card,.screen-till .card,
  .screen-till .method,.screen-flow .card{
    border:1px solid #71471f!important;
    box-shadow:inset 0 1px 0 #3a2412,0 2px 7px #0007;
  }
}

/* Landscape room plan: same shell, wider furniture placement, no squeezed centre column. */
@media(max-width:1024px) and (orientation:landscape) and (max-height:650px){
  .modal,.modal.parchment,
  .screen-earn,.screen-pints,.screen-ledger,.screen-till,.screen-flow{
    width:min(100%,900px)!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    border-radius:0!important;
  }
  .modal-header{
    min-height:calc(60px + env(safe-area-inset-top))!important;
    padding:calc(6px + env(safe-area-inset-top)) 18px 6px!important;
  }
  .modal h2{font-size:clamp(20px,3.4vw,27px)!important}
  .eyebrow{font-size:9px!important;margin-bottom:2px!important}
  .close{width:36px!important;height:36px!important;flex:0 0 36px!important}
  .modal-body{padding:14px 24px 16px!important}
  .modal-mobile-nav{
    min-height:calc(60px + env(safe-area-inset-bottom))!important;
    height:calc(60px + env(safe-area-inset-bottom))!important;
  }
  .modal-mobile-nav button{padding:2px!important;gap:0!important}
  .modal-mobile-nav .pub-nav-icon{width:24px;height:24px}
  .modal-mobile-nav .pub-nav-icon svg{width:23px;height:23px}
  .modal-mobile-nav b{font-size:9px!important}

  /* Earn — two calm columns with a generous gutter. */
  .screen-earn .modal-body{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:34px!important;
    row-gap:0!important;
    align-content:start!important;
  }
  .screen-earn .modal-body>.muted{grid-column:1/-1;margin:0 0 9px!important;max-width:78ch}
  .screen-earn .offer{min-height:58px!important;padding:10px 5px!important}
  .screen-earn .offer-title{font-size:16px}
  .screen-earn .reward{font-size:17px}
  .screen-earn .demo-strip{padding:5px 16px!important;font-size:9px!important}

  /* Pints — primary numbers live in one row; secondary information breathes below. */
  .screen-pints .grid3{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
  .screen-pints .grid3 .card{min-height:112px;padding:14px 16px!important}
  .screen-pints .metric-value{font-size:clamp(27px,4vw,35px)!important}
  .screen-pints .journey{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin:12px 0!important}
  .screen-pints .modal-body>p.muted{margin:8px 0 12px!important;max-width:90ch}
  .screen-pints .modal-body>.card{padding:11px 14px!important}
  .screen-pints .actions{gap:12px!important;margin-top:12px!important;flex-wrap:wrap}
  .screen-pints .actions .btn{flex:0 1 auto!important;min-width:145px!important}

  /* Ledger — true two-column activity board with consistent row rhythm. */
  .screen-ledger .modal-body{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:34px!important;
    row-gap:0!important;
    align-content:start!important;
  }
  .screen-ledger .filters{grid-column:1/-1!important;margin-bottom:10px!important}
  .screen-ledger .entry{min-height:58px!important;padding:10px 5px!important}
  .screen-ledger .actions{grid-column:1/-1!important;margin-top:12px!important}

  /* Till — balance is the signboard at left; choices/actions are the counter at right. */
  .screen-till .modal-body{
    display:grid!important;
    grid-template-columns:minmax(240px,.82fr) minmax(330px,1.18fr)!important;
    grid-template-rows:auto auto auto auto!important;
    column-gap:34px!important;
    row-gap:8px!important;
    align-content:start!important;
  }
  .screen-till .modal-body>.card{grid-column:1!important;grid-row:1/5!important;align-self:start!important;min-height:170px!important;padding:20px!important}
  .screen-till .modal-body>p.muted{grid-column:2!important;margin:0 0 3px!important}
  .screen-till .method{grid-column:2!important;margin:0!important;padding:11px 15px!important;min-height:44px}
  .screen-till .actions{grid-column:2!important;margin-top:5px!important;gap:12px!important}
  .screen-till .actions .btn{flex:0 1 auto!important;min-width:145px!important}

  /* Survey/task flows remain isolated from Till's grid and use the room width naturally. */
  .screen-flow .modal-body{display:block!important;max-width:820px;margin:0 auto;width:100%}
}

/* Compact landscape phones: preserve breathing room by scrolling the furniture, not shrinking the room. */
@media(max-width:740px) and (orientation:landscape) and (max-height:500px){
  .modal-body{padding:11px 18px 13px!important}
  .screen-earn .modal-body,.screen-ledger .modal-body{column-gap:24px!important}
  .screen-earn .offer,.screen-ledger .entry{min-height:52px!important;padding:8px 4px!important}
  .screen-pints .grid3{gap:12px!important}
  .screen-pints .grid3 .card{min-height:96px!important;padding:10px 12px!important}
  .screen-pints .metric-value{font-size:25px!important}
  .screen-till .modal-body{grid-template-columns:minmax(205px,.8fr) minmax(285px,1.2fr)!important;column-gap:24px!important}
  .screen-till .modal-body>.card{min-height:145px!important;padding:14px!important}
}
@media(max-width:599px){
  .modal,.modal.parchment,
  .screen-earn,.screen-pints,.screen-ledger,.screen-till,.screen-flow{
    width:100%!important;
    max-width:430px!important;
  }
}


/* v9 — LOCKED DUAL-ORIENTATION REFERENCE
   Portrait remains unchanged. Landscape is a true wide room: permanent left pub rail,
   full-height room shell, and furniture reflowed across the available width. */
@media(max-width:1024px) and (orientation:landscape) and (max-height:650px){
  :root{--beer-rail:58px}

  /* Taproom: same character and frame, but navigation becomes a left pub rail. */
  .mobile-app{
    width:min(100%,900px)!important;
    padding-left:var(--beer-rail)!important;
    padding-bottom:0!important;
    min-height:100dvh!important;
  }
  .m-header{
    height:58px!important;
    min-height:58px!important;
    padding-top:0!important;
    grid-template-columns:54px 1fr 54px!important;
  }
  .m-brand strong{font-size:clamp(22px,4vw,30px)!important}
  .demo-ribbon{padding:7px 10px 2px!important}
  .demo-ribbon span{min-width:180px;padding-top:6px!important;padding-bottom:6px!important}
  .m-content{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:14px!important;
    padding:10px 16px 16px!important;
    align-items:start!important;
  }
  .m-content>.hero-card{grid-column:1/-1!important}
  .activity-card{grid-column:1/-1!important}

  .m-bottom{
    position:fixed!important;
    z-index:92!important;
    left:max(0px,calc(50% - min(50vw,450px)))!important;
    top:0!important;
    bottom:0!important;
    transform:none!important;
    width:var(--beer-rail)!important;
    height:100dvh!important;
    min-height:100dvh!important;
    padding:0!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(5,1fr)!important;
    border-top:0!important;
    border-right:2px solid #80501c!important;
    background:linear-gradient(90deg,#160d07,#291507 60%,#100904)!important;
    box-shadow:4px 0 14px #000b,inset -1px 0 0 #d0a14a44!important;
  }
  .m-bottom button{
    border-right:0!important;
    border-bottom:1px solid #5d3817!important;
    padding:3px 1px!important;
    gap:1px!important;
  }
  .m-bottom button:last-child{border-bottom:0!important}
  .m-bottom .pub-nav-icon{width:24px!important;height:24px!important}
  .m-bottom .pub-nav-icon svg{width:23px!important;height:23px!important}
  .m-bottom b{font-size:8px!important}
  .toast{bottom:12px!important;left:calc(50% + var(--beer-rail)/2)!important}

  /* All rooms: identical wide shell with the same left pub rail. */
  .modal-backdrop{padding:0!important;align-items:stretch!important}
  .modal,.modal.parchment,.screen-earn,.screen-pints,.screen-ledger,.screen-till,.screen-flow{
    position:relative!important;
    width:min(100%,900px)!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    padding-left:var(--beer-rail)!important;
    overflow:hidden!important;
  }
  .modal-header{
    min-height:58px!important;
    height:58px!important;
    padding:6px 16px!important;
  }
  .modal h2{font-size:clamp(20px,3.2vw,26px)!important}
  .modal-body{padding:12px 18px 14px!important}

  .modal-mobile-nav{
    position:absolute!important;
    z-index:5!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:var(--beer-rail)!important;
    height:100%!important;
    min-height:100%!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(5,1fr)!important;
    border-top:0!important;
    border-right:2px solid #80501c!important;
    background:linear-gradient(90deg,#160d07,#291507 60%,#100904)!important;
    box-shadow:4px 0 14px #000b,inset -1px 0 0 #d0a14a44!important;
  }
  .modal-mobile-nav button{
    border-right:0!important;
    border-bottom:1px solid #5d3817!important;
    padding:3px 1px!important;
    gap:1px!important;
  }
  .modal-mobile-nav button:last-child{border-bottom:0!important}
  .modal-mobile-nav .pub-nav-icon{width:24px!important;height:24px!important}
  .modal-mobile-nav .pub-nav-icon svg{width:23px!important;height:23px!important}
  .modal-mobile-nav b{font-size:8px!important}

  /* Landscape furniture: intentionally wide, not a stretched portrait stack. */
  .screen-earn .modal-body{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:24px!important}
  .screen-pints .grid3{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  .screen-pints .grid3 .card{min-height:94px!important;padding:10px 12px!important}
  .screen-pints .journey{grid-template-columns:repeat(4,minmax(0,1fr))!important;margin:8px 0!important}
  .screen-ledger .modal-body{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:24px!important}
  .screen-till .modal-body{grid-template-columns:minmax(210px,.82fr) minmax(300px,1.18fr)!important;column-gap:24px!important}
  .screen-till .modal-body>.card{min-height:140px!important;padding:14px!important}

  /* Flows keep the rail but remain single-focus rooms. */
  .screen-flow .modal-body{display:block!important;max-width:760px!important;margin:0 auto!important}
}

/* v9.2 legal/help integration — preserves approved artwork; legal surfaces appear only on request. */
.legal-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.legal-links a{display:flex;flex-direction:column;gap:3px;padding:14px 15px;border:1px solid #76501f;background:linear-gradient(#2c190d,#180e08);border-radius:7px;color:#f1d08b;text-decoration:none;box-shadow:inset 0 0 0 1px #d5a74d18}.legal-links a:hover{border-color:#c08a38;background:linear-gradient(#3a210f,#1b0f08)}.legal-links b{font-size:16px}.legal-links small{color:#cbb993;font-size:12px;line-height:1.35}.screen-legal{max-width:820px}
@media(max-width:600px){.legal-links{grid-template-columns:1fr}.screen-legal .modal-body{padding-bottom:88px}}

/* v10 pre-backend maturity layer; approved master artwork untouched. */
.maturity-grid{display:grid;gap:14px}.maturity-row,.legal-action{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;padding:13px 14px;margin:7px 0;border:1px solid #76501f;border-radius:7px;background:linear-gradient(#2c190d,#180e08);color:#f1d08b;font:inherit;cursor:pointer}.maturity-row:hover,.legal-action:hover{border-color:#c08a38}.maturity-row span:first-child{flex:1}.maturity-row b,.legal-action b{display:block;font-size:15px}.maturity-row small,.legal-action small{display:block;color:#cbb993;margin-top:3px;line-height:1.35}.maturity-chip{display:inline-block;padding:3px 7px;border:1px solid #95703c;border-radius:999px;color:#e9cb8d;font-size:11px;white-space:nowrap}.field{display:grid;gap:6px;margin:12px 0;color:#3b2315;font-weight:700}.field input,.field textarea{width:100%;box-sizing:border-box;padding:10px;border:1px solid #80552a;border-radius:5px;background:#fff8e5;color:#29170d;font:inherit}.setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid #825b2c55}.setting span{display:grid;gap:3px}.setting small{color:#7b6650}.setting input{width:20px;height:20px}.state-banner{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;margin:10px 0;border:1px solid #82632e;background:#efe0b8;color:#33200f}.state-banner.ok{border-color:#627d3a}.state-banner.warn{border-color:#a66a2d}.empty-state{text-align:center;padding:28px 18px;border:1px dashed #8b6336;margin:14px 0;color:#6b543d}.empty-state b{font-size:18px}.legal-links .legal-action{margin:0}.screen-maturity{max-width:820px}@media(max-width:600px){.screen-maturity .modal-body{padding-bottom:88px}.state-banner{flex-direction:column}}


/* v11 structural rooms — inherit Beerlicity's existing pub language; no redesign */
.front-door{display:grid;gap:14px}.front-door-scene{min-height:160px;border:8px ridge #5a3822;border-radius:10px;padding:18px;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 50% 20%,rgba(245,158,11,.20),transparent 40%),linear-gradient(135deg,#342217,#1c1917 68%);box-shadow:inset 0 0 35px rgba(0,0,0,.45)}
.door-plaque{max-width:520px;padding:16px 20px;border:1px solid rgba(208,161,83,.55);background:rgba(22,14,10,.82);box-shadow:inset 0 0 0 3px rgba(94,58,31,.35)}.door-plaque span,.door-plaque strong,.door-plaque p{display:block}.door-plaque span{font:700 10px/1.3 system-ui,sans-serif;letter-spacing:.22em;color:#d6a552}.door-plaque strong{margin-top:8px;font:600 clamp(24px,5vw,34px)/1.08 Georgia,serif;color:#f3e4c2}.door-plaque p{margin:9px auto 0;max-width:460px;color:#c9b99d;font:13px/1.55 system-ui,sans-serif}
.auth-card{padding:16px;border:1px solid rgba(208,161,83,.32);background:linear-gradient(180deg,rgba(46,31,22,.95),rgba(28,20,15,.97));border-radius:8px}.auth-links{display:flex;justify-content:flex-end;margin-top:-3px}.text-action{border:0;background:none;color:#d6a552;text-decoration:underline;cursor:pointer;font:12px system-ui,sans-serif}.auth-footnote{margin:0;color:#8f806e;font:10px/1.45 system-ui,sans-serif}.setting.compact{margin:10px 0}
.xp-room{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:18px;padding:18px;border:7px ridge #5a3822;border-radius:10px;background:linear-gradient(180deg,#2d1d14,#1b120d)}.xp-mug{position:relative;width:70px;height:92px;margin:auto;border:5px solid #c89a50;border-top-width:3px;border-radius:5px 5px 12px 12px;overflow:hidden;background:rgba(255,255,255,.04);box-shadow:inset 0 0 18px rgba(0,0,0,.5)}.xp-mug:after{content:"";position:absolute;right:-25px;top:22px;width:25px;height:43px;border:5px solid #c89a50;border-left:0;border-radius:0 18px 18px 0}.xp-beer{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(#d99a27,#9b5b12)}.xp-foam{position:absolute;left:2px;right:2px;bottom:72%;height:7px;background:#f0dec0;border-radius:50%;opacity:.9}.future-room{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;margin:9px 0;border:1px solid rgba(208,161,83,.3);border-left:5px solid #8a5a2f;border-radius:6px;background:linear-gradient(90deg,rgba(76,48,30,.7),rgba(31,22,16,.9))}.future-room h3{margin:3px 0 0;color:#f0dfbd;font-family:Georgia,serif}.future-room .muted{margin:5px 0 0;font-size:11px}.room-auth .modal,.room-cellar .modal,.room-progression .modal{background-image:linear-gradient(rgba(26,17,12,.92),rgba(26,17,12,.96))}
@media (max-width:520px){.xp-room{grid-template-columns:72px 1fr;gap:12px}.xp-mug{width:54px;height:76px}.xp-mug:after{right:-20px;width:20px;height:34px}.front-door-scene{min-height:140px;padding:12px}.door-plaque{padding:14px}}
@media (prefers-reduced-motion:reduce){.xp-beer,.xp-foam{transition:none!important;animation:none!important}}


/* v11.2 finishing pass — adds website polish without altering the approved room artwork. */
.house-footer{padding:14px 12px 78px;text-align:center;border-top:1px solid #6b431d;background:linear-gradient(180deg,#1b1009,#100905);color:#bda985;font:11px/1.4 system-ui,sans-serif}.house-footer>span{display:block;color:#d6a552;font-family:Georgia,serif;font-size:13px;margin-bottom:8px}.house-footer nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 12px}.house-footer a,.house-footer button{border:0;background:none;padding:0;color:#c7b58f;text-decoration:none;font:inherit;cursor:pointer}.house-footer a:hover,.house-footer button:hover{text-decoration:underline;color:#f0d08d}
@media (orientation:landscape) and (max-height:620px){.house-footer{padding-left:calc(var(--beer-rail) + 12px);padding-bottom:16px}}

/* Skeptical-visitor trust pass (v11.3): keep demo/sample status explicit without changing the locked pub identity. */
.desktop-demo-note{position:absolute;z-index:19;right:2.1%;top:1.4%;padding:5px 9px;border:1px solid rgba(214,165,82,.72);background:rgba(34,16,8,.90);color:#edc778;font:700 clamp(8px,.72vw,12px)/1.2 system-ui,sans-serif;letter-spacing:.08em;box-shadow:0 2px 8px #0008;pointer-events:none}
.pub-atmo-copy small{display:block;margin:5px auto 0;max-width:34em;color:#d8c29a;font:500 clamp(9px,2.5vw,12px)/1.35 system-ui,sans-serif;letter-spacing:0}
.sample-activity-label{margin:-2px 0 5px;text-align:center;color:#c7a46b;font:700 9px/1.2 system-ui,sans-serif;letter-spacing:.10em}
.auth-purpose{margin:0 2px 12px;padding:8px 10px;border-left:2px solid #b77a27;background:rgba(92,53,21,.18);color:#cdbb9c;font:12px/1.5 system-ui,sans-serif}
@media (max-width:760px){.desktop-demo-note{display:none}}


/* v11.9 accessibility pass — preserve the pub; strengthen operability. */
.offer{width:100%;font:inherit;color:inherit;text-align:left;background:transparent;border-left:0;border-right:0;border-top:0}
.offer:disabled{cursor:default;opacity:.46}
:where(button,a,input,textarea,select,[tabindex]):focus-visible{outline:3px solid #f0c66a;outline-offset:3px;box-shadow:0 0 0 2px #2b1809,0 0 0 5px rgba(240,198,106,.28)}
.auth-footnote{color:#b8a991}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* v11.10 mobile-first pass — small-device polish without changing the locked pub identity. */
@media(max-width:1024px){
  /* Keep the bell easy to tap while making the notification count visually quieter. */
  .m-icon-btn{min-width:44px;min-height:44px}
  .bell-btn b{min-width:17px;height:17px;top:10px;right:12px;border-radius:17px;font-size:10px;line-height:1}
  /* Prevent long provider / transaction references from pushing Ledger rows off-screen. */
  .entry,.entry>div{min-width:0}
  .entry-meta{overflow-wrap:anywhere;word-break:break-word}
  /* Mobile form controls should remain legible and avoid platform zoom surprises. */
  .field input,.field textarea,.field select{font-size:16px}
  /* Small utility controls retain comfortable touch targets even when their artwork is compact. */
  .filter,.modal-close,.legal-action,.maturity-row{min-height:44px}
}
@media(max-width:360px){
  .entry{gap:8px}
  .entry-meta{font-size:11px;line-height:1.35}
}

/* v11.13: real desktop controls; original pub assets retained. */
::selection{background:#bb873a;color:#120b07}
.modal,.modal-body,.pub-desktop{user-select:text;-webkit-user-select:text}
.modal{background:linear-gradient(135deg,#2c1a0e,#130c07 70%)}
.offer-title,.offer-meta{display:block}
.offer>span:first-child,.entry>div,.setting>span,.maturity-row>span{min-width:0;overflow-wrap:anywhere}
.offer-meta{margin-top:6px;line-height:1.5}
.offer{gap:20px}
.close{flex:0 0 40px;width:40px;height:40px}
.modal-header>div{min-width:0}.modal h2{overflow-wrap:anywhere}
.modal button{max-width:100%}
.modal .field{color:#ecd6ab}.modal.parchment .field{color:#39200f}
.modal .auth-card .field,.modal .auth-card .setting{color:#f4dfb9}
.modal .auth-card .setting small{color:#dac39b}
.modal .auth-card a{color:#f3cf86}
.modal .setting small{color:#cdb991}.modal.parchment .setting small{color:#604324}
.conversion-rate{display:block;font:700 clamp(22px,4vw,30px)/1.4 Georgia,serif;color:#f2ce87;margin:10px 0 0}
.conversion-note{display:block;font-size:13px;margin-bottom:10px}
.modal.parchment .metric-value{color:#4c2b13}.modal.parchment .metric-label{color:#64401c}.modal.parchment .metric-note{color:#624725}
.modal.parchment .metric-value.green{color:#604018}
.modal.parchment .metric-value.amber{color:#794618}
.modal.parchment .conversion-rate{color:#573411}
.modal.parchment .empty-state{color:#654728}.modal:not(.parchment) .empty-state{color:#dbc497}
.modal .auth-purpose{color:#ead6b0;background:#25180f;padding:12px 16px}
.btn{background:linear-gradient(#81541e,#48270e);border-color:#b88a43}
.btn:hover:not(:disabled){filter:brightness(1.14)}
:where(button,a,input,textarea,select,[tabindex]):focus-visible{outline:2px solid #f0c66a;outline-offset:2px;box-shadow:none}
.option.selected,.method.selected{outline-offset:-3px}
.modal .field input,.modal .field textarea{user-select:text;-webkit-user-select:text}
@media(min-width:1025px){
.desktop-wrap{padding:24px;align-items:flex-start}
.pub-desktop{width:min(1480px,100%);display:grid;grid-template-columns:218px minmax(0,1fr);background:#1e1008;border:3px ridge #805220;box-shadow:0 18px 65px #000;border-radius:8px;overflow:hidden}
.desktop-sidebar{background:linear-gradient(90deg,#180d07,#35200f 50%,#1a0d06);border-right:5px ridge #704517;padding:14px 12px;display:flex;flex-direction:column}
.desktop-logo{width:100%;height:105px;object-fit:contain}
.house-ribbon{text-align:center;background:linear-gradient(#5a1e0e,#301006);border-block:1px solid #a77a35;color:#ebc780;padding:8px;margin:8px 0 12px;font-weight:bold}
.desktop-sidebar nav{display:grid;gap:4px}
.desktop-sidebar nav button{border:1px solid #704c29;padding:13px 12px;text-align:left;background:linear-gradient(#33200f,#211208);color:#f3ddb0;cursor:pointer;min-height:63px;box-shadow:inset 0 1px #d6aa5120}
.desktop-sidebar nav b{display:block;font-size:19px;font-variant:small-caps}.desktop-sidebar nav small{display:block;font-size:14px;margin-top:3px;color:#d2bb8d}
.desktop-sidebar nav button:hover{background:#4d3016;border-color:#d3a053}
.desktop-demo{margin-top:24px;padding:16px 10px;border:1px solid #93682d;text-align:center;color:#ddc48d;line-height:1.5;font-size:14px}.desktop-demo b{font-size:19px}.desktop-demo p{margin:8px 0}
.desktop-main{min-width:0}.desktop-header{display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:center;gap:14px;padding:16px 20px;background:linear-gradient(#201208,#100905);border-bottom:3px ridge #86581f}
.patron-entry{display:grid;gap:5px;text-align:left;background:transparent;border:1px solid #72501e;border-radius:5px;color:#e5cea0;padding:12px;cursor:pointer}.patron-entry small{font:11px system-ui;letter-spacing:.06em}.patron-entry b{font-size:20px}.patron-entry span{font-size:12px}
.desktop-wordmark{text-align:center;color:#ddb366;letter-spacing:.12em;font-size:13px}.desktop-wordmark strong{display:block;font-size:clamp(26px,2.5vw,40px);letter-spacing:.015em;text-shadow:0 2px #000}.desktop-wordmark span{display:block}
.desktop-header-actions{display:flex;gap:8px;justify-content:flex-end}.desktop-header-actions .btn{font-size:12px;padding:10px}.notice-count{background:#832f1a;border:1px solid #cda252;border-radius:50%;padding:2px 5px}
.desktop-auth-bar{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:10px 20px;background:#25160c;border-bottom:1px solid #6b451d}.desktop-auth-bar>span{margin-right:auto;color:#d7bb86;font-style:italic}.desktop-auth-bar .btn{min-height:40px;font-size:13px}
.desktop-hero-row{display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:12px;padding:14px 16px;background:#211107}
.desktop-hero{min-height:365px;position:relative;background:url('assets/mobile-pub-atmosphere.webp') center/100% 100% no-repeat;border:2px ridge #956129;display:flex;align-items:center;padding:18px 16% 18px 21%}
.hero-copy{background:linear-gradient(#1c110bf9,#1c110bf9);box-shadow:0 0 18px 14px #1c110b;padding:16px 0;text-align:center;width:100%;position:relative}
.hero-copy h1{font-size:clamp(25px,2.3vw,37px);color:#f8e7c1;margin:0 0 14px;line-height:1.15}.desktop-slogan{font-size:clamp(19px,1.55vw,25px);color:#edbf67;line-height:1.35;margin:0 0 14px}.hero-copy>p:not(.desktop-slogan){font:14px/1.6 system-ui;color:#e5d5b8}.hero-copy .actions{justify-content:center}.hero-copy .btn{font-size:12px;padding:10px 12px}
.wood-panel{background:linear-gradient(115deg,#31200f,#150e08 70%);border:3px ridge #986529;box-shadow:inset 0 0 0 3px #140b06,inset 0 0 28px #0009;padding:17px;border-radius:6px}
.pub-desktop h2{font-size:21px;text-align:center;margin:0 0 12px;font-variant:small-caps;color:#edc77e;padding-bottom:10px;border-bottom:1px solid #95682e}
.desktop-balance dl{margin:0}.desktop-balance dl>div{padding:10px 0;border-bottom:1px solid #705025}.desktop-balance dt{font-size:14px;color:#d9b16b}.desktop-balance dd{margin:4px 0;color:#f5dfaf;font-size:28px;font-weight:bold}.desktop-balance dd small{font-size:12px}.desktop-balance dl span{font:12px system-ui;color:#cbb993}.desktop-balance .btn{font-size:12px;margin-top:12px;width:100%}
.desktop-boards{padding:0 16px 16px;display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:12px}
.paper-panel{background:radial-gradient(ellipse at 40% 25%,#ecd9aa,#d4b273 85%);border:5px ridge #8c5c29;border-radius:8px;padding:16px;color:#3d220f;box-shadow:inset 0 0 22px #75401660,0 4px 12px #0008}
.paper-panel h2{color:#47270f;border-color:#a3793c}.paper-panel button:not(.btn){width:100%;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 3px;background:transparent;color:#3c230f;border:0;border-bottom:1px solid #a78147;cursor:pointer;text-align:left;min-height:57px}.paper-panel button:not(.btn):hover{background:#98602420}.paper-panel button b,.paper-panel button small{display:block}.paper-panel button small{font-size:12px;margin:3px 0}.paper-panel button b{font-size:16px}.paper-panel button strong{font-size:14px;white-space:nowrap}.paper-panel p{font-size:14px;line-height:1.5;text-align:center}.desktop-picks .btn{width:100%;margin-top:13px;font-size:12px}
.desktop-activity ul{list-style:none;margin:0;padding:0}.desktop-activity li{font:14px/1.5 system-ui;color:#e4d2ae;border-bottom:1px solid #6d4826;padding:9px 0}.desktop-activity .btn{width:100%;font-size:12px;margin-top:12px}
.desktop-help{margin:0 16px 16px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:18px;align-items:center}.desktop-help h2{margin:0;border:0;padding:0}.desktop-help p{margin:4px 0 0}.desktop-help button:not(.btn){justify-content:center;text-align:center;border:1px solid #94703e;border-radius:4px;background:#f0deb060;font-weight:bold}
.desktop-footer{padding:12px 20px 20px;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;color:#c8ad7e;font:12px/1.5 system-ui}.desktop-footer nav{display:flex;gap:13px;flex-wrap:wrap}.desktop-footer a,.desktop-footer button{color:#e0c290;background:none;border:0;font:inherit;padding:0;cursor:pointer}
.modal{width:min(860px,94vw);max-height:90dvh}.modal-header{background:linear-gradient(#3b2512,#1c1008);padding:22px 26px;border-bottom:3px ridge #956831}.modal.parchment .modal-header{background:linear-gradient(#3b2512,#1c1008)}.modal.parchment h2{color:#f5dfab;text-shadow:0 1px #000}.modal.parchment .eyebrow{color:#dcbb78}.modal-body{padding:24px 26px}.modal .muted{font-size:16px}.modal .metric-label{font-size:12px}.modal .metric-note,.modal .offer-meta,.modal .entry-meta{font-size:14px;line-height:1.5}.modal .metric-value.green{color:#e3bd73}.modal.parchment .metric-value.green{color:#604018}.modal .offer-title{font-size:20px}.modal .offer{padding:18px 0}.modal .card+.card{margin-top:12px}
.modal.parchment{background:radial-gradient(ellipse at 30% 20%,#e8d2a0,#cda769);border:5px ridge #92602b;box-shadow:0 20px 70px #000,inset 0 0 30px #8b54235c}
.modal.room-auth{background:linear-gradient(#24180f,#140c07);color:#f2dfb8;border:5px ridge #805423}.room-auth .front-door-scene{min-height:260px;background:url('assets/mobile-pub-atmosphere.webp') center/100% 100%;padding:20px 18% 20px 21%;border:0;border-radius:0}.room-auth .door-plaque{background:#1d120c;box-shadow:0 0 15px 15px #1d120c;border:0;padding:15px 0}.room-auth .door-plaque strong{font-size:34px}.room-auth .door-plaque p{font-size:15px}.room-auth .auth-card{border:0;border-top:1px solid #8c6834;border-radius:0;padding:20px 0 0;background:transparent}.room-auth .auth-card .field{color:#f4dfb9}.room-auth .auth-purpose{font-size:14px;color:#e4cfa9;background:#382512;border-color:#b7873d}.room-auth .auth-links .text-action{font-size:14px}.room-auth .state-banner{background:#e0c38b;border-color:#a37534;color:#3b230e;line-height:1.5}.room-auth .setting.compact{color:#ecd7b2}.room-auth .setting small{color:#d7bf97}.room-auth .field input{padding:13px;font-size:16px}
}
@media(min-width:1025px){
/* Mask the lettering baked into the retained scene; all displayed copy is HTML. */
.desktop-hero::before{content:"";position:absolute;left:20%;right:0;top:0;height:78%;background:linear-gradient(90deg,#1c110b,#1c110b 90%,#1c110bee);pointer-events:none}
.room-auth .front-door-scene{position:relative;overflow:hidden}.room-auth .front-door-scene::before{content:"";position:absolute;left:20%;right:0;top:0;height:78%;background:#1d120c;pointer-events:none}.room-auth .door-plaque{position:relative}
.pub-desktop :where(button,a){touch-action:manipulation}.pub-desktop button{white-space:normal;overflow-wrap:break-word}
.desktop-balance dd.balance-note{font:12px/1.5 system-ui,sans-serif;color:#cbb993;margin:4px 0 0}
}