/* DRINKOUNTER · estilos */
:root{--bg:#fbf6ea;--fg:#2b2418;--card:#fff;--ac:#d98e04;--mut:#8a7f6a;--bd:#e6dcc4}
@media (prefers-color-scheme:dark){:root{--bg:#1d1a14;--fg:#f3ead6;--card:#2a261d;--ac:#f0b23a;--mut:#a89d86;--bd:#3d372a}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
main{max-width:480px;margin:0 auto;padding:16px}
button,input,textarea{font:inherit;-webkit-appearance:none;appearance:none}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.top{display:flex;align-items:center;justify-content:space-between}
h1{font-size:24px;letter-spacing:.06em;margin:4px 0 12px}
.sub{color:var(--mut);font-size:16px;margin:0}.subrow{display:flex;align-items:center;gap:8px;margin:-8px 0 12px;position:relative}#menubtn,#ticketbtn{background:none;border:1px solid var(--bd);border-radius:14px;color:var(--fg);padding:2px 10px;font-size:14px}.menu{position:absolute;top:100%;left:0;right:0;margin-top:6px;z-index:20;background:var(--card);border:1px solid var(--bd);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.2);padding:6px;max-height:60vh;overflow:auto}.pop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.62);overflow:hidden;animation:pfade .25s}.pop.out{opacity:0;transition:opacity .3s}.popcard{position:relative;z-index:1;width:82vw;max-width:420px;border-radius:20px;overflow:hidden;background:#0f3331;box-shadow:0 20px 60px rgba(0,0,0,.55);animation:popin .6s cubic-bezier(.2,1.4,.4,1),wob 1.4s ease-in-out .6s infinite}.popcard img{display:block;width:100%;height:auto}.popcap{color:#ffd21f;text-align:center;padding:14px;font-weight:800;font-size:20px}.cf{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;opacity:.95;animation:cfall 3s linear forwards}@keyframes pfade{from{opacity:0}to{opacity:1}}@keyframes popin{0%{transform:scale(.3) rotate(-8deg);opacity:0}60%{transform:scale(1.08) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0)}}@keyframes wob{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}@keyframes cfall{from{transform:translateY(0) rotate(0)}to{transform:translateY(110vh) rotate(720deg)}}.uro{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}.uro .undo{margin-top:0}.helpcard{max-height:86vh;overflow:auto}.tk{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;background:var(--bg);border:1px dashed var(--bd);border-radius:8px;padding:12px;margin:8px 0}.tr{display:flex;justify-content:space-between;gap:10px}.tr.h1{justify-content:center;font-size:18px;font-weight:700}.tr.h2,.tr.sm{justify-content:center;color:var(--mut)}.tr.name{font-weight:700;margin-top:4px}.tr.item{padding-left:12px}.tr.total{font-weight:700;font-size:16px}.tsep{border-top:1px dashed var(--bd);margin:6px 0}.hrow{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--bd);border-radius:0}.hl b{display:block}.tot2{font-weight:700}.mirow{display:flex;align-items:center}.mirow .mi{flex:1}.del{background:none;border:0;padding:10px 12px;font-size:17px;opacity:.75}.inst{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:50;background:var(--card);color:var(--fg);border:1px solid var(--bd);border-radius:14px;padding:12px 40px 12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:14px}.inst b{display:block;font-size:15px;margin-bottom:2px}.inst .x{position:absolute;top:4px;right:6px;background:none;border:0;color:var(--mut);font-size:24px;line-height:1;padding:6px 10px}.inst svg{vertical-align:-3px}.inst:after{content:'';position:absolute;bottom:-8px;left:50%;margin-left:-8px;border:8px solid transparent;border-bottom:0;border-top-color:var(--card)}.mi{display:block;width:100%;text-align:left;background:none;border:0;padding:12px;color:var(--fg);border-radius:8px}.mi.cur{font-weight:700}.mt{color:var(--mut);font-size:13px;padding:6px 12px}#splash{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;background:#0f3331 url(/splash.jpg) center/cover no-repeat;transition:opacity .4s}#splash.hide{opacity:0;pointer-events:none}
h2{font-size:14px;color:var(--mut);margin:20px 0 8px;text-transform:uppercase;letter-spacing:.05em}
#gear,#instbtn{background:none;border:0;font-size:24px;padding:6px;line-height:1;color:var(--fg)}.tools{display:flex;gap:2px}.help{position:fixed;top:0;left:0;right:0;bottom:0;z-index:150;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);padding:16px}.helpcard{background:var(--card);color:var(--fg);border:1px solid var(--bd);border-radius:16px;padding:18px;max-width:420px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.4)}.helpcard h3{margin:0 0 10px;font-size:18px}.helpcard ol{margin:8px 0 12px;padding-left:22px}.helpcard li{margin:6px 0}.helpcard svg{vertical-align:-3px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px;margin-bottom:12px}
input,textarea{width:100%;padding:12px;border-radius:10px;border:1px solid var(--bd);background:var(--bg);color:var(--fg)}
textarea{height:70px;font-size:13px}
.go{margin-top:10px;width:100%;padding:12px;border:0;border-radius:10px;background:var(--ac);color:#fff;font-weight:600}
.sec{margin-top:10px;width:100%;padding:11px;border:1px solid var(--bd);border-radius:10px;background:none;color:var(--fg)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chip{padding:8px 14px;border-radius:20px;border:1px solid var(--bd);background:var(--card);color:var(--fg)}
.chip.on{background:var(--ac);color:#fff;border-color:var(--ac);font-weight:600}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.drink{background:var(--card);color:var(--fg);border:1px solid var(--bd);border-radius:14px;text-align:center;position:relative}
.tapbtn{display:block;width:100%;background:none;border:0;padding:14px 8px;color:inherit;text-align:center;border-radius:14px}.tapbtn:active{transform:scale(.96)}
.im{position:relative;width:100%;max-width:130px;margin:0 auto 6px;transform-origin:70% 92%}.im img{width:100%;height:auto;display:block;border-radius:10px}.im img.empty{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;-webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0)}.im.play img.empty{animation:wipe 1.1s ease-in-out}.im.pop{animation:pop .3s ease-out}@keyframes wipe{0%{opacity:1;-webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0)}45%{opacity:1;-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}72%{opacity:1;-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}100%{opacity:0;-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}@keyframes pop{0%{transform:scale(.9)}100%{transform:scale(1)}}.red{background:#c62828;color:#fff;border:0;font-weight:700;letter-spacing:.02em}.drink.shake{animation:shake .45s ease-in-out}@keyframes shake{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-5px) rotate(-2deg)}30%{transform:translateX(5px) rotate(2deg)}45%{transform:translateX(-4px) rotate(-1.5deg)}60%{transform:translateX(4px) rotate(1.5deg)}75%{transform:translateX(-2px) rotate(-.5deg)}90%{transform:translateX(2px) rotate(.5deg)}}.mhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.mhd .stt{margin:0}.add{padding:6px 14px;border-radius:16px;border:1px solid var(--ac);background:none;color:var(--ac);font-weight:600}.donate{display:block;text-align:center;margin:14px 0 6px;padding:12px;border-radius:12px;border:1px dashed var(--bd);color:var(--mut);text-decoration:none;font-size:15px}.mrow{padding:10px 0;border-bottom:1px solid var(--bd)}.mrow:last-child{border:0}.rm{margin-top:6px;padding:6px 14px;border-radius:16px;border:1px solid var(--bd);background:none;color:#c62828;font-weight:600}.minus{position:absolute;top:38px;right:6px;z-index:2;width:30px;height:30px;padding:0;border-radius:15px;background:var(--card);color:var(--fg);border:2px solid var(--bd);font-size:20px;line-height:24px;text-align:center}.minus:disabled{opacity:.3}
.drink .n{font-size:14px;color:var(--mut)}
.drink .c{pointer-events:none;position:absolute;top:6px;right:6px;z-index:1;min-width:28px;height:28px;line-height:24px;padding:0 7px;border-radius:14px;background:#2b2418;color:#fff;border:2px solid #fff;font-weight:700;font-size:15px;text-align:center}
.undo{background:none;border:0;color:var(--mut);text-decoration:underline;margin-top:10px;padding:0}
.row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--bd)}
.row:last-child{border:0}
.who{font-weight:600}.det{color:var(--mut);font-size:14px}.tot{font-size:20px;font-weight:700}.rt{text-align:right}
.srow{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--bd)}
.pw{display:flex;align-items:center}.pw input{width:84px;text-align:right;padding:8px;margin-right:4px}
.ok{color:#2e7d32}.stt{font-weight:600;margin-bottom:6px}.msg{color:var(--mut);font-size:14px}
.upd:after{display:none}.upd .go{margin-top:8px}
/* Iconos (icons.js) y nombre con «INK» en tipografía de rotulador */
.ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;flex:none}.ic svg{display:block;width:100%;height:100%}
.mi .ic,.sec .ic,.add .ic,.rm .ic,.donate .ic{margin-right:.45em}.mi.cur .ic{color:var(--ac)}
#gear .ic,#instbtn .ic{width:24px;height:24px}#menubtn .ic,#ticketbtn .ic{width:16px;height:16px;vertical-align:-3px}
.inst .x .ic,.del .ic{width:20px;height:20px}.minus .ic{width:16px;height:16px;vertical-align:-2px}
.medal{width:1.25em;height:1.25em;vertical-align:-.25em}
.hrow.now{justify-content:flex-start;gap:.5em}.hrow.now .ic{width:.9em;height:.9em;color:var(--ac)}
.dico{width:22px;height:22px;border-radius:6px;object-fit:cover;vertical-align:-6px;margin-right:6px}
.dlab{display:inline-flex;align-items:center}.dets{display:flex;flex-wrap:wrap;gap:4px 12px}.dk{display:inline-flex;align-items:center}.dk .dico{width:18px;height:18px;margin-right:4px}
h1{text-transform:none;letter-spacing:.01em;font-weight:800}
.ink{font-family:'Permanent Marker',cursive;font-weight:400;color:var(--ac);display:inline-block;font-size:1.18em;letter-spacing:.03em;transform:rotate(-4deg) translateY(1px);margin:0 .04em;text-shadow:0 1px 0 rgba(0,0,0,.12)}
.tr.h1 .ink{font-size:1.25em}