:root{--ink:#2b2118;--paper:#fbf6ec;--accent:#2f6b3a;--sign:#7a2e1c;--line:#e3d6bd;--card:#fffaf0;--shadow:0 10px 30px rgba(0,0,0,.28)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#1a1410;color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:.45rem .8rem;border-radius:10px}
button:hover{background:#fff}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.primary:hover{filter:brightness(1.1);background:var(--accent)}
button.big{padding:.7rem 1.2rem;font-size:1.05rem}
button.link{background:none;border:0;color:#fff;text-decoration:underline;padding:.4rem}
.hidden{display:none!important}
#bar{position:fixed;top:0;left:0;right:0;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;padding:.5rem .8rem;background:linear-gradient(#000a,#0000);color:#fff;z-index:5}
.brand{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand b{font-size:1.1rem}.brand span{font-size:.78rem;opacity:.85}
.chips{display:flex;gap:.4rem;flex:1;flex-wrap:wrap}
.chips button{background:#ffffff26;border-color:#ffffff40;color:#fff;backdrop-filter:blur(4px)}
.tools{display:flex;gap:.4rem}
.tools button{background:#ffffff26;border-color:#ffffff40;color:#fff}
.tools button.primary{background:var(--accent);border-color:#ffffff40}
#cnt{background:#fff;color:var(--accent);border-radius:999px;padding:0 .45rem;margin-left:.2rem;font-weight:700}
.hud{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);background:#000b;color:#fff;padding:.4rem .9rem;border-radius:999px;font-size:.85rem;z-index:4;text-align:center;max-width:94vw}
.pad{position:fixed;right:14px;bottom:70px;display:flex;flex-direction:column;gap:10px;z-index:4}
.pad button{width:58px;height:58px;border-radius:50%;background:#000a;color:#fff;border-color:#fff5;font-size:1.3rem;touch-action:none;user-select:none}
.tip{position:fixed;pointer-events:none;background:#000c;color:#fff;padding:.25rem .6rem;border-radius:8px;font-size:.85rem;z-index:6;transform:translate(-50%,-140%)}
.overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(20,14,8,.78);backdrop-filter:blur(3px)}
.card{background:var(--card);border-radius:18px;padding:1.5rem 1.6rem;max-width:520px;width:100%;box-shadow:var(--shadow);text-align:center}
#intro .card{background:#2a1f16;color:#fff}
.card h1{margin:.2rem 0;font-size:1.8rem}.card p{margin:.5rem 0}
.badge{display:inline-block;background:var(--sign);color:#fff;font-size:.72rem;letter-spacing:.12em;padding:.15rem .6rem;border-radius:999px}
.small{font-size:.85rem}.dim{opacity:.7}
.panel{position:relative;display:grid;grid-template-columns:minmax(300px,1fr) minmax(340px,1fr);gap:0;background:var(--paper);border-radius:18px;max-width:1040px;width:100%;max-height:94vh;overflow:hidden;box-shadow:var(--shadow)}
.panel .x{position:absolute;right:10px;top:8px;z-index:3;font-size:1.5rem;line-height:1;padding:.1rem .6rem}
.left{background:radial-gradient(circle at 50% 40%,#fffdf6,#e9dcc0);display:flex;flex-direction:column;min-height:300px}
#iv{flex:1;min-height:280px;position:relative}
#iv canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:none}
.hint{text-align:center;font-size:.8rem;opacity:.65;padding:.4rem}
.right{padding:1.1rem 1.3rem 1rem;overflow:auto;display:flex;flex-direction:column;gap:.5rem;max-height:94vh}
.right h2{margin:.2rem 2rem .1rem 0;font-family:Georgia,serif;font-size:1.6rem}
.priceline{display:flex;align-items:baseline;gap:.5rem}.price{font-size:1.5rem;font-weight:700;color:var(--accent)}.unit{opacity:.7}
.blurb{margin:.1rem 0 .3rem}
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line)}
.tabs button{border:0;border-radius:10px 10px 0 0;background:none;padding:.45rem .8rem}
.tabs button.on{background:var(--card);border:1px solid var(--line);border-bottom-color:var(--card);font-weight:600;margin-bottom:-1px}
.tabpane{min-height:150px}
.tabpane dl{margin:.4rem 0;display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem}
.tabpane dt{font-weight:600;opacity:.75}.tabpane dd{margin:0}
.stage{background:#000;border-radius:12px;overflow:hidden;display:flex;justify-content:center}
.stage img{max-width:100%;max-height:34vh;display:block;object-fit:contain}
.thumbs{display:flex;gap:.4rem;margin:.5rem 0;flex-wrap:wrap}
.thumbs img{width:68px;height:52px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer}
.thumbs img.on{border-color:var(--accent)}
.askbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.3rem 0}
.chat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.6rem;height:170px;overflow:auto;display:flex;flex-direction:column;gap:.45rem}
.msg{max-width:88%;padding:.4rem .7rem;border-radius:12px;font-size:.95rem}
.msg.u{align-self:flex-end;background:var(--accent);color:#fff}.msg.a{align-self:flex-start;background:#f1e8d4}
.msg.a button{margin-left:.4rem;padding:0 .4rem;font-size:.8rem}
.askform{display:flex;gap:.4rem;margin-top:.5rem}.askform input{flex:1;min-width:0;padding:.5rem .7rem;border:1px solid var(--line);border-radius:10px;font:inherit}
.buy{margin-top:auto;display:flex;gap:.7rem;align-items:center;padding-top:.6rem;border-top:1px solid var(--line)}
.qty{display:flex;align-items:center;gap:.2rem}.qty button{width:36px;height:36px;padding:0;font-size:1.2rem}.qty span{min-width:2rem;text-align:center;font-weight:700}
.buy .big{flex:1}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--paper);z-index:12;box-shadow:var(--shadow);display:flex;flex-direction:column}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;border-bottom:1px solid var(--line)}.dhead h2{margin:0}
#cartItems{flex:1;overflow:auto;padding:.5rem 1rem}
.line{display:grid;grid-template-columns:56px 1fr auto;gap:.6rem;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--line)}
.line img{width:56px;height:44px;object-fit:cover;border-radius:8px}
.line .nm{font-weight:600}.line .sub{font-size:.85rem;opacity:.7}
.line .q{display:flex;align-items:center;gap:.2rem}.line .q button{width:28px;height:28px;padding:0}
.dfoot{padding:1rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.5rem}
.total{display:flex;justify-content:space-between;font-size:1.2rem}
.listwrap{background:var(--paper);border-radius:18px;max-width:1100px;width:100%;max-height:94vh;overflow:auto;padding:1rem 1.2rem}
.listhead{display:flex;justify-content:space-between;align-items:center}.listhead h2{margin:.2rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.9rem;margin-top:.8rem}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.pcard img{width:100%;height:150px;object-fit:cover;display:block}
.pcard .bd{padding:.6rem .7rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
.pcard .nm{font-weight:700}.pcard .pr{color:var(--accent);font-weight:700}
.pcard .row{display:flex;gap:.4rem;margin-top:auto}.pcard .row button{flex:1;padding:.35rem}
@media(max-width:760px){
  .panel{grid-template-columns:1fr;overflow:auto;max-height:96vh}.left{min-height:240px}#iv{min-height:230px}.right{max-height:none;overflow:visible}
  .brand span{display:none}.tools button{padding:.35rem .55rem;font-size:.9rem}
}

.stick{position:fixed;left:20px;bottom:calc(28px + env(safe-area-inset-bottom));width:136px;height:136px;border-radius:50%;background:#0006;border:2px solid #fff5;z-index:4;touch-action:none;user-select:none}
#knob{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:#fffd;box-shadow:0 2px 10px #0009;pointer-events:none}
.act{position:fixed;right:24px;bottom:calc(34px + env(safe-area-inset-bottom));width:96px;height:96px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:.95rem;line-height:1.1;border:2px solid #fff8;z-index:4;touch-action:none;user-select:none;padding:.2rem;box-shadow:0 4px 14px #0007}
.ret{position:fixed;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid #fffd;border-radius:50%;pointer-events:none;z-index:3;box-shadow:0 0 0 1px #0007;transition:all .12s}
.ret.on{background:#ffd54a88;border-color:#ffd54a;transform:scale(1.5)}
body.touch #hud{bottom:190px}
body.touch #tip{z-index:6}