:root{
--bg:#fbf5ea; --ink:#2b1d16; --muted:#7a6a5e; --card:#ffffff; --line:#e6d9c6;
--accent:#c2410c; --accent-ink:#ffffff; --teal:#0f766e; --good:#15803d; --goodbg:#dcfce7;
--bad:#b91c1c; --badbg:#fee2e2; --chip:#f1e6d3;
}
@media (prefers-color-scheme: dark){
:root{ --bg:#1b1410; --ink:#f6eadb; --muted:#b9a794; --card:#2a1f19; --line:#43342a;
--accent:#f0743a; --accent-ink:#1b1410; --teal:#4fd1c5; --good:#4ade80; --goodbg:#14532d;
--bad:#f87171; --badbg:#5b1a1a; --chip:#3a2c22; }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
-webkit-text-size-adjust:100%}
#app{max-width:560px;margin:0 auto;padding:16px 16px 48px}
h1{font-size:22px;margin:4px 0 2px;letter-spacing:-.2px}
.sub{color:var(--muted);font-size:14px;margin:0 0 16px}
.section{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:18px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--chip);color:var(--ink);padding:9px 13px;border-radius:999px;
font-size:14px;cursor:pointer}
.chip.on{background:var(--teal);border-color:var(--teal);color:#fff}
@media (prefers-color-scheme: dark){ .chip.on{color:#0b1f1d} }
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.link{background:none;border:none;color:var(--accent);font-size:14px;cursor:pointer;padding:6px 2px}
select{font-size:16px;padding:9px 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
.btn{display:block;width:100%;border:none;border-radius:14px;padding:16px;font-size:17px;font-weight:600;cursor:pointer;
background:var(--accent);color:var(--accent-ink);margin-top:10px}
.btn.alt{background:var(--card);color:var(--ink);border:1.5px solid var(--line)}
.btn.good{background:var(--good);color:#fff}
.btn.bad{background:var(--bad);color:#fff}
.btn[disabled]{opacity:.45;cursor:default}
.bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:10px 0 14px}
.bar>div{height:100%;background:var(--teal);transition:width .2s}
.top{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted)}
.card{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:22px 18px;min-height:210px;
display:flex;flex-direction:column;justify-content:center;cursor:pointer;user-select:none;box-shadow:0 2px 0 var(--line)}
.card .tag{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--teal);margin-bottom:10px}
.card .q{font-size:21px;font-weight:650;line-height:1.3}
.card .a{font-size:19px;line-height:1.4}
.card .hint{margin-top:16px;color:var(--muted);font-size:13px}
.q-big{font-size:21px;font-weight:650;line-height:1.3;margin:10px 0 14px}
.opt{display:block;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--card);color:var(--ink);
border-radius:14px;padding:14px;font-size:16px;line-height:1.35;margin-bottom:10px;cursor:pointer}
.opt.right{border-color:var(--good);background:var(--goodbg)}
.opt.wrong{border-color:var(--bad);background:var(--badbg)}
.opt[disabled]{cursor:default}
.note{font-size:14px;color:var(--muted);margin:2px 0 8px}
.score{font-size:46px;font-weight:800;text-align:center;margin:18px 0 2px}
.center{text-align:center;color:var(--muted);margin:0 0 14px}
.miss{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px;font-size:15px;line-height:1.4}
.miss b{display:block;margin-bottom:3px}
.photo{background:#000;border-radius:16px;display:flex;justify-content:center;margin:8px 0 12px;overflow:hidden}
.photo img{width:100%;max-height:270px;object-fit:contain;display:block}
.gopts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.gopt{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:13px 8px;font-size:15px;cursor:pointer;text-align:center}
.gopt.sel{border-color:var(--teal);background:var(--chip);font-weight:600}
.gopt.right{border-color:var(--good);background:var(--goodbg)}
.gopt.missed{border:2px dashed var(--good)}
.gopt.wrong{border-color:var(--bad);background:var(--badbg)}
.gopt[disabled]{cursor:default}
.thumb{width:84px;height:62px;object-fit:cover;border-radius:8px;float:left;margin-right:10px;background:#000}
.miss:after{content:'';display:block;clear:both}
.fine{font-size:12px;color:var(--muted);margin-top:26px;line-height:1.5}
:root{
--bg:#0b0710; --ink:#fdf0fa; --muted:#b9a0c9; --card:#150c1d; --line:#3b2255;
--accent:#ff2fa0; --accent-ink:#14050f; --teal:#19e3d0; --good:#2ef0b8; --goodbg:#0b3a32;
--bad:#ff5c80; --badbg:#4a0f26; --chip:#22132f;
}
html,body{background:var(--bg);}
body{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27140%27 height=%27140%27 viewBox=%270 0 140 140%27%3E%0A%3Cg fill=%27none%27 stroke-width=%271.6%27%3E%0A%3Cpath d=%27M70 6 L134 70 L70 134 L6 70 Z%27 stroke=%27%2319e3d0%27 stroke-opacity=%27.30%27/%3E%0A%3Cpath d=%27M70 28 L112 70 L70 112 L28 70 Z%27 stroke=%27%23ff2fa0%27 stroke-opacity=%27.32%27/%3E%0A%3Cg stroke=%27%23ff2fa0%27 stroke-opacity=%27.38%27%3E%0A%3Cellipse cx=%2770%27 cy=%2770%27 rx=%275%27 ry=%2717%27/%3E%3Cellipse cx=%2770%27 cy=%2770%27 rx=%275%27 ry=%2717%27 transform=%27rotate(45 70 70)%27/%3E%0A%3Cellipse cx=%2770%27 cy=%2770%27 rx=%275%27 ry=%2717%27 transform=%27rotate(90 70 70)%27/%3E%3Cellipse cx=%2770%27 cy=%2770%27 rx=%275%27 ry=%2717%27 transform=%27rotate(135 70 70)%27/%3E%0A%3C/g%3E%0A%3Ccircle cx=%270%27 cy=%270%27 r=%279%27 stroke=%27%2319e3d0%27 stroke-opacity=%27.30%27/%3E%3Ccircle cx=%27140%27 cy=%270%27 r=%279%27 stroke=%27%2319e3d0%27 stroke-opacity=%27.30%27/%3E%0A%3Ccircle cx=%270%27 cy=%27140%27 r=%279%27 stroke=%27%2319e3d0%27 stroke-opacity=%27.30%27/%3E%3Ccircle cx=%27140%27 cy=%27140%27 r=%279%27 stroke=%27%2319e3d0%27 stroke-opacity=%27.30%27/%3E%0A%3Ccircle cx=%270%27 cy=%270%27 r=%273.5%27 stroke=%27%23ff2fa0%27 stroke-opacity=%27.4%27/%3E%3Ccircle cx=%27140%27 cy=%270%27 r=%273.5%27 stroke=%27%23ff2fa0%27 stroke-opacity=%27.4%27/%3E%0A%3Ccircle cx=%270%27 cy=%27140%27 r=%273.5%27 stroke=%27%23ff2fa0%27 stroke-opacity=%27.4%27/%3E%3Ccircle cx=%27140%27 cy=%27140%27 r=%273.5%27 stroke=%27%23ff2fa0%27 stroke-opacity=%27.4%27/%3E%0A%3C/g%3E%0A%3Ccircle cx=%2770%27 cy=%2770%27 r=%274%27 fill=%27%2319e3d0%27 fill-opacity=%27.45%27/%3E%0A%3Cg fill=%27%23ff2fa0%27 fill-opacity=%27.35%27%3E%3Ccircle cx=%2770%27 cy=%2718%27 r=%272.2%27/%3E%3Ccircle cx=%2770%27 cy=%27122%27 r=%272.2%27/%3E%3Ccircle cx=%2718%27 cy=%2770%27 r=%272.2%27/%3E%3Ccircle cx=%27122%27 cy=%2770%27 r=%272.2%27/%3E%3C/g%3E%0A%3C/svg%3E");background-size:140px 140px;background-attachment:fixed;position:relative;overflow-x:hidden}
body:before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,47,160,.16),transparent 55%),radial-gradient(ellipse at 50% 100%,rgba(25,227,208,.14),transparent 55%);pointer-events:none;z-index:0}
.banner{position:absolute;top:0;left:0;right:0;height:64px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27176%27 height=%2762%27 viewBox=%270 0 176 62%27%3E%0A%3Cpath d=%27M0 3 H176%27 stroke=%27%23ff2fa0%27 stroke-width=%272%27 stroke-opacity=%27.8%27/%3E%0A%3Cg id=%27f%27%3E%0A%3Cpath d=%27M6 3 H82 V40 q-6.3 12 -12.6 0 q-6.3 12 -12.6 0 q-6.3 12 -12.6 0 q-6.3 12 -12.6 0 q-6.3 12 -12.6 0 q-6.3 12 -12.6 0 Z%27 fill=%27%23ff2fa0%27 fill-opacity=%27.92%27/%3E%0A%3Ccircle cx=%2744%27 cy=%2722%27 r=%277%27 fill=%27%230b0710%27/%3E%3Ccircle cx=%2744%27 cy=%2722%27 r=%272.6%27 fill=%27%23ff2fa0%27/%3E%0A%3Cpath d=%27M44 8 l4 5 h-8z M24 22 l5 -4 v8z M64 22 l-5 -4 v8z%27 fill=%27%230b0710%27/%3E%0A%3Ccircle cx=%2720%27 cy=%2711%27 r=%272%27 fill=%27%230b0710%27/%3E%3Ccircle cx=%2768%27 cy=%2711%27 r=%272%27 fill=%27%230b0710%27/%3E%0A%3Ccircle cx=%2724%27 cy=%2736%27 r=%272%27 fill=%27%230b0710%27/%3E%3Ccircle cx=%2764%27 cy=%2736%27 r=%272%27 fill=%27%230b0710%27/%3E%0A%3C/g%3E%0A%3Cg transform=%27translate(88 0)%27%3E%0A%3Cpath d=%27M6 3 H82 V40 q-6.3 12 -12.6 0 q-6.3 12 -12.6 0 q-6.3 12 -12.6 0 q-6.3 12 -12.6 0 q-6.3 12 -12.6 0 q-6.3 12 -12.6 0 Z%27 fill=%27%2319e3d0%27 fill-opacity=%27.92%27/%3E%0A%3Cpath d=%27M44 10 l9 12 l-9 12 l-9 -12 z%27 fill=%27%230b0710%27/%3E%3Cpath d=%27M44 16 l4.5 6 l-4.5 6 l-4.5 -6 z%27 fill=%27%2319e3d0%27/%3E%0A%3Ccircle cx=%2720%27 cy=%2714%27 r=%273%27 fill=%27%230b0710%27/%3E%3Ccircle cx=%2768%27 cy=%2714%27 r=%273%27 fill=%27%230b0710%27/%3E%0A%3Ccircle cx=%2720%27 cy=%2730%27 r=%272%27 fill=%27%230b0710%27/%3E%3Ccircle cx=%2768%27 cy=%2730%27 r=%272%27 fill=%27%230b0710%27/%3E%0A%3C/g%3E%0A%3C/svg%3E");background-repeat:repeat-x;background-size:176px 62px;pointer-events:none;z-index:1}
#app{position:relative;z-index:2;padding-top:58px}
.foot{height:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2748%27 height=%2740%27 viewBox=%270 0 48 40%27%3E%0A%3Cpath d=%27M24 4 L44 20 L24 36 L4 20 Z%27 fill=%27none%27 stroke=%27%2319e3d0%27 stroke-width=%272%27/%3E%0A%3Cpath d=%27M24 12 L36 20 L24 28 L12 20 Z%27 fill=%27%23ff2fa0%27 fill-opacity=%27.85%27/%3E%0A%3Ccircle cx=%270%27 cy=%2720%27 r=%273%27 fill=%27%2319e3d0%27/%3E%3Ccircle cx=%2748%27 cy=%2720%27 r=%273%27 fill=%27%2319e3d0%27/%3E%0A%3C/svg%3E");background-repeat:repeat-x;background-position:center;background-size:48px 40px;position:relative;z-index:2;opacity:.9}
h1{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:46px;letter-spacing:2px;text-transform:uppercase;text-align:center;margin:4px 0 0;color:#fff;text-shadow:0 0 14px rgba(255,47,160,.7),3px 3px 0 #ff2fa0}
h1 + .orn{height:28px;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27260%27 height=%2728%27 viewBox=%270 0 260 28%27%3E%0A%3Cpath d=%27M6 14 H100 M160 14 H254%27 stroke=%27%23ff2fa0%27 stroke-opacity=%27.6%27 stroke-width=%271.5%27/%3E%0A%3Cg transform=%27translate(130 14)%27%3E%0A%3Cg fill=%27none%27 stroke=%27%2319e3d0%27 stroke-width=%271.8%27%3E%0A%3Cellipse rx=%273%27 ry=%2711%27/%3E%3Cellipse rx=%273%27 ry=%2711%27 transform=%27rotate(45)%27/%3E%3Cellipse rx=%273%27 ry=%2711%27 transform=%27rotate(90)%27/%3E%3Cellipse rx=%273%27 ry=%2711%27 transform=%27rotate(135)%27/%3E%0A%3C/g%3E%3Ccircle r=%273.4%27 fill=%27%23ff2fa0%27/%3E%3C/g%3E%0A%3Cpath d=%27M110 14 l5 -5 l5 5 l-5 5 z M140 14 l5 -5 l5 5 l-5 5 z%27 fill=%27%23ff2fa0%27 fill-opacity=%27.85%27/%3E%0A%3C/svg%3E") center/260px 28px no-repeat;margin:6px 0 4px}
.sub{text-align:center;color:var(--muted)}
.section{color:var(--teal);font-weight:700;letter-spacing:.14em;display:flex;align-items:center;gap:10px}
.section:after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#19e3d0,transparent)}
.chip{border-color:#4a2a68;color:var(--ink)}
.chip.on{background:var(--teal);border-color:var(--teal);color:#05211e;font-weight:700;box-shadow:0 0 12px rgba(25,227,208,.45)}
.btn{background:linear-gradient(180deg,#ff59b8,#ff2fa0);color:var(--accent-ink);box-shadow:0 0 0 1.5px #ff8fd0 inset,0 6px 18px rgba(255,47,160,.35);letter-spacing:.02em}
.btn.alt{background:var(--card);color:var(--ink);box-shadow:0 0 0 1.5px var(--teal) inset;border:none}
.btn.good{background:var(--good);color:#04251f;box-shadow:none}
.btn.bad{background:var(--bad);color:#2a0612;box-shadow:none}
.btn[disabled]{box-shadow:none}
.card,.opt,.miss,.gopt,.photo{box-shadow:0 0 0 1px rgba(255,47,160,.25),0 0 18px rgba(255,47,160,.10)}
.card{border:1.5px solid #7a2a8f;background:linear-gradient(180deg,#1d1030,#150c1d)}
.card .tag{color:var(--teal);font-weight:700}
.opt{border-color:#4a2a68;background:var(--card)}
.opt:hover:not([disabled]),.gopt:hover:not([disabled]){border-color:var(--teal)}
.opt.right{border-color:var(--good);background:var(--goodbg);box-shadow:0 0 14px rgba(46,240,184,.3)}
.opt.wrong{border-color:var(--bad);background:var(--badbg)}
.gopt{border-color:#4a2a68;background:var(--card)}
.gopt.sel{border-color:var(--teal);background:#0f3a40;color:#fff;box-shadow:0 0 12px rgba(25,227,208,.4)}
.photo{background:#000;border:1.5px solid #ff2fa0;box-shadow:0 0 22px rgba(255,47,160,.35)}
.bar{background:#2a1740}
.bar>div{background:linear-gradient(90deg,#ff2fa0,#19e3d0)}
.score{font-family:'Anton',Impact,sans-serif;font-weight:400;color:#fff;text-shadow:0 0 16px #ff2fa0,3px 3px 0 #19e3d0}
.q-big{color:#fff}
.link{color:var(--teal)}
select{background:var(--card);color:var(--ink);border-color:#4a2a68}
.fine{color:var(--muted)}
.split{display:flex;gap:10px;align-items:flex-start;margin:6px 0 10px}
.split .photo{flex:0 0 42%;margin:0;position:sticky;top:8px;align-self:flex-start}
.split .photo img{width:100%;height:auto;max-height:none;object-fit:contain}
.split .choices,.split .gopts{flex:1;min-width:0}
.split .opt{font-size:14px;line-height:1.3;padding:11px 10px;margin-bottom:8px}
.split .gopts{grid-template-columns:1fr;gap:7px;margin-bottom:0}
.split .gopt{font-size:14px;padding:10px 8px;text-align:left}
.opt{display:block;width:fit-content;max-width:100%;padding:11px 16px}
.split .opt{padding:10px 14px}
.gopts{display:flex;flex-wrap:wrap;gap:8px}
.gopt{width:auto;padding:10px 14px}
.split .gopts{gap:8px}
.split .gopt{padding:9px 13px}
.opt{width:100%}
.split{align-items:stretch}
.split .photo{position:static;align-self:stretch;display:flex;align-items:center;flex:0 0 42%}
.split .photo img{height:auto;max-height:100%;position:relative;z-index:1}
.split .photo{position:relative;overflow:hidden}
.split .photo:before{content:'';position:absolute;inset:-12px;background:var(--bg) center/cover;filter:blur(14px) brightness(.55) saturate(1.2)}
.split .choices{display:flex;flex-direction:column;gap:8px}
.split .choices .opt{width:100%;flex:1;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;min-height:50px;padding:8px 10px}
.split .gopts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.split .gopt{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;line-height:1.2;padding:6px}
.lb{border:1.5px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}.lbrow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line)}.lbrow:last-child{border:0}.lbrow:first-child .lbn{color:var(--teal)}.lbn{font-family:'Anton',Impact,sans-serif;font-size:20px;color:var(--accent);width:22px}.lbname{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lbname small{display:block;font-weight:400;font-size:11px;color:var(--muted)}.lbs{font-weight:600;font-size:14px}#pname{padding:11px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:16px}#gate{position:fixed;inset:0;z-index:99999;background:#0b0710 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 4l26 26-26 26L4 30z' fill='none' stroke='%23ff2fa0' stroke-opacity='.18' stroke-width='2'/%3E%3C/svg%3E");display:flex;align-items:center;justify-content:center;padding:24px}
#gate .gbox{width:100%;max-width:320px;text-align:center}
#gate h2{font-family:'Anton',Impact,sans-serif;font-size:44px;letter-spacing:2px;color:#fff;margin:0 0 4px;text-shadow:2px 2px 0 #ff2fa0}
#gate p{color:#b9a9c9;margin:0 0 18px;font-size:14px}
#gate input{width:100%;box-sizing:border-box;text-align:center;font-size:28px;letter-spacing:12px;padding:12px;border-radius:14px;border:2px solid #19e3d0;background:#150d1f;color:#fff;outline:none}
#gate button{margin-top:14px;width:100%;padding:14px;border:0;border-radius:14px;background:#ff2fa0;color:#fff;font-size:16px;font-weight:700;cursor:pointer}
#gate .err{color:#ff6b9a;height:20px;margin-top:10px;font-size:14px}
#gate.shake .gbox{animation:gs .35s}@keyframes gs{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
#ngate{position:fixed;inset:0;z-index:99998;background:#0b0710;align-items:center;justify-content:center;padding:24px}#ngate .gbox{width:100%;max-width:320px;text-align:center}#ngate h2{font-family:'Anton',Impact,sans-serif;font-size:44px;letter-spacing:2px;color:#fff;margin:0 0 4px;text-shadow:2px 2px 0 #ff2fa0}#ngate p{color:#b9a9c9;margin:0 0 18px;font-size:14px}#ngate input{width:100%;box-sizing:border-box;text-align:center;font-size:22px;padding:12px;border-radius:14px;border:2px solid #19e3d0;background:#150d1f;color:#fff;outline:none}#ngate button{margin-top:14px;width:100%;padding:14px;border:0;border-radius:14px;background:#ff2fa0;color:#fff;font-size:16px;font-weight:700;cursor:pointer}#ngate .err{color:#ff6b9a;height:20px;margin-top:10px;font-size:14px}#lbtab{position:fixed;left:0;top:42%;z-index:60;border:0;border-radius:0 12px 12px 0;background:#ff2fa0;color:#fff;font-size:20px;padding:10px 9px;cursor:pointer;box-shadow:2px 2px 10px rgba(0,0,0,.5)}#lbpanel{position:fixed;left:0;top:0;bottom:0;width:210px;z-index:59;background:rgba(11,7,16,.96);border-right:2px solid #19e3d0;padding:14px 10px;overflow-y:auto;transform:translateX(-100%);transition:transform .22s}#lbpanel.open{transform:none}#lbpanel .lbh{font-family:'Anton',Impact,sans-serif;font-size:26px;color:#fff;letter-spacing:1px;text-shadow:2px 2px 0 #ff2fa0;margin-bottom:10px}#lbpanel .lbh small{display:block;font-family:inherit;font-size:11px;color:#b9a9c9;text-shadow:none;letter-spacing:0}.lbr{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;margin-bottom:5px;background:#150d1f;font-size:14px;color:#fff}.lbr.me{outline:1.5px solid #19e3d0}.lbi{width:18px;color:#ff2fa0;font-weight:700}.lbm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lbr b{color:#19e3d0}.lbe{color:#b9a9c9;font-size:13px}@media(min-width:1000px){#lbpanel{transform:none}#lbtab{display:none}body{padding-left:220px}}
/* ---------- added with the refactor ---------- */
/* visually hidden, still read by screen readers */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* amber for the garnish game's "close" verdict */
:root{--warn:#ffc53d}
/* number badge on answer buttons, for the 1-4 keyboard shortcuts.
aria-hidden in the markup, so it is not read out as part of the answer. */
.opt{display:flex;align-items:center;gap:9px}
.opt .num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
border-radius:6px;background:var(--chip);color:var(--muted);
font-size:12px;font-weight:700;flex:0 0 auto}
.opt .otext{flex:1;min-width:0}
.opt.right .num,.opt.wrong .num{background:rgba(0,0,0,.25);color:#fff}
.split .choices .opt{justify-content:flex-start;text-align:left}
@media (max-width:520px){ .opt .num{display:none} }
/* secondary explanation line under an answer */
.spec{color:var(--muted);font-size:13px;line-height:1.45}
.card .why{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.45}
/* keep focus visible for keyboard users */
.btn:focus-visible,.opt:focus-visible,.chip:focus-visible,.gopt:focus-visible,
.link:focus-visible,.card:focus-visible,select:focus-visible{
outline:3px solid var(--teal);outline-offset:2px}
/* photos are real files now, so reserve their space while they load */
.photo img{background:#120a1a}
/* The leaderboard tab used to sit at the vertical middle of the screen, where
it covered whatever was behind it -- including answer buttons. Bottom-left
keeps it clear of the question and the full-width action buttons. */
#lbtab{top:auto;bottom:12px;left:12px;border-radius:12px;padding:9px 11px;font-size:18px;
box-shadow:0 4px 14px rgba(0,0,0,.6)}
/* ---------- "who's playing?" roster picker ---------- */
/* These need the #ngate prefix: a bare .nopt loses to the #ngate button rule
above, which would render every name as a full-width pink bar. */
/* The names orbit the title, so the list is a positioning layer rather than
a flow layout: orbit.js writes a transform onto each button. */
#ngate .norbit{position:relative;width:min(94vw,380px);height:min(94vw,380px);
max-height:58vh;margin:0 auto}
/* Only the title sits in the middle now. It is deliberately small and
allowed to wrap, which keeps the centre block roughly square -- a wide
one-line title would run straight into the names at 3 and 9 o'clock. */
#ngate .ncentre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
max-width:52%;text-align:center;pointer-events:none}
#ngate .ncentre h2{margin:0;font-size:30px;line-height:1.02}
#ngate .nlist{position:absolute;inset:0}
#ngate .nlist .nopt{position:absolute;left:0;top:0;will-change:transform;
font-size:15px;padding:9px 15px;max-width:150px}
#ngate #nsub{margin:10px 0 0}
#ngate .nopt{width:auto;margin:0;border:1.5px solid #4a2a68;background:#150d1f;
color:#fdf0fa;border-radius:999px;padding:11px 18px;font-size:16px;font-weight:600;
cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ngate .nopt:hover,#ngate .nopt:focus-visible{border-color:#19e3d0;
box-shadow:0 0 12px rgba(25,227,208,.45)}
#ngate .nlink{width:auto;margin:6px 0 0;padding:8px 6px;background:none;border:0;
color:#19e3d0;font-size:14px;font-weight:400;text-decoration:underline;cursor:pointer}
/* Same fallback chain as h1, so a blocked or slow Google Fonts request
degrades to a condensed face here too instead of plain sans. */
#ngate h2{font-size:38px;line-height:1.05;
font-family:'Anton',Impact,'Arial Narrow',sans-serif}
#ngate .gbox{max-width:360px}
/* Crowded roster: the orbit gives way to the wrapped list it replaced, which
stays readable at any number of names. */
#ngate .norbit.plain{height:auto;max-height:none;width:100%}
#ngate .norbit.plain .ncentre{position:static;transform:none;max-width:100%;
margin:0 0 12px}
#ngate .nlist.plain{position:static;display:flex;flex-wrap:wrap;gap:8px;
justify-content:center;max-height:46vh;overflow-y:auto;padding:2px}
#ngate .nlist.plain .nopt{position:static;transform:none;will-change:auto}
/* ============================================================
TEXTURE PASS
The layout got simpler, so the surface carries more of the
character. Three layers, cheapest first: a fine grain over
everything, a woven talavera weave behind the content, and
real depth on the cards themselves.
============================================================ */
/* 1. Film grain. One tiled SVG turbulence, fixed so it does not
swim when the page scrolls. Very low alpha: it should read as
paper, not as noise. */
body:after{
content:'';position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.055;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:160px 160px}
/* 2. A second, larger pattern layer woven under the existing diamonds,
so the backdrop has two scales instead of one flat repeat. */
body:before{
background-image:
radial-gradient(ellipse at 50% 0%,rgba(255,47,160,.18),transparent 55%),
radial-gradient(ellipse at 50% 100%,rgba(25,227,208,.15),transparent 55%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Cg fill='none' stroke='%23ff2fa0' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M44 2l42 42-42 42L2 44z'/%3E%3Ccircle cx='44' cy='44' r='13'/%3E%3C/g%3E%3Cg fill='none' stroke='%2319e3d0' stroke-opacity='.06' stroke-width='1.2'%3E%3Cpath d='M44 20l24 24-24 24-24-24z'/%3E%3C/g%3E%3C/svg%3E");
background-size:auto,auto,88px 88px}
/* 3. The hero, given a little ceremony of its own. */
.hero{text-align:center;padding:2px 0 6px;position:relative}
.hero h1{
/* a cut-paper look: ink, then a pink shadow, then a teal one further out */
text-shadow:
0 0 18px rgba(255,47,160,.55),
2px 2px 0 #ff2fa0,
4px 4px 0 rgba(25,227,208,.55),
0 6px 22px rgba(0,0,0,.6)}
.hero .sub{margin:2px 0 0;letter-spacing:.04em;font-size:13px;
text-transform:uppercase;color:var(--muted)}
/* ---------- leaderboard panel ---------- */
.lbtabs{display:flex;gap:6px;padding:10px 10px 4px}
.lbtab{flex:1;border:1.5px solid #3b2255;background:transparent;color:var(--muted);
border-radius:999px;padding:7px 4px;font-size:12px;cursor:pointer;font-weight:600}
.lbtab.on{background:var(--teal);border-color:var(--teal);color:#04211e}
.lbnote{margin:10px 10px 4px;font-size:11px;line-height:1.45;color:var(--muted);opacity:.8}
/* The personal stats block, given the same surface as the game cards so it
does not read as a leftover from the old layout. */
.lb{border-color:#4a2a68;
background:
linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%),
linear-gradient(180deg,#1b0f2c,#140b1e);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 16px rgba(0,0,0,.4)}
.lb .lbrow{border-bottom-color:#2e1b44}
/* Inline board on the home and results screens; the floating tab stands
down there, since it would only cover the page's own content. */
body.no-lbtab #lbtab{display:none}
.lb-inline .lbtabs{padding:10px 10px 6px}
.lb-inline .lbr{padding:9px 12px}
.lb-inline .lbe,.lb-inline .lbnote{padding:0 12px}
.lb-inline .lbe{margin:10px 0;font-size:14px;color:var(--muted)}
/* ---------- home: board left, modes right ---------- */
/* Side by side at every width, including phones. The board column is held
narrow so the mode buttons keep a tappable width on a small screen. */
.split-home{display:grid;grid-template-columns:minmax(118px,38%) 1fr;gap:10px;
align-items:start;margin:14px 0 0}
@media (min-width:620px){ .split-home{grid-template-columns:minmax(180px,30%) 1fr;gap:16px} }
.col-board{border:1.5px solid #4a2a68;border-radius:16px;overflow:hidden;
background:
linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 38%),
linear-gradient(180deg,#1b0f2c,#140b1e);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 16px rgba(0,0,0,.45)}
.col-board .lbh{padding:11px 12px 8px;border-bottom:1px solid #2e1b44}
.col-board .lb{border:0;background:none;box-shadow:none;border-radius:0}
.col-board .lbr{padding:9px 12px;gap:8px}
.col-board .lbe{padding:12px;margin:0;font-size:13px;color:var(--muted);line-height:1.4}
/* ---------- the three modes ---------- */
/* Equal-sized by construction: one column, equal rows, same min height. */
.col-modes{display:grid;grid-template-rows:repeat(3,1fr);gap:10px}
.mode{position:relative;overflow:hidden;display:flex;flex-direction:column;
justify-content:center;min-height:74px;width:100%;text-align:left;cursor:pointer;
border:1.5px solid #4a2a68;border-radius:16px;padding:12px 14px;color:var(--ink);
background:
linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 44%),
linear-gradient(180deg,#1d1030,#140b1e);
box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -2px 0 rgba(0,0,0,.45),
0 6px 18px rgba(0,0,0,.45);
transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
/* woven motif bleeding in from the right edge */
.mode:before{content:'';position:absolute;right:-24px;top:-24px;width:132px;height:132px;
opacity:.5;pointer-events:none;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='66'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='1.1'%3E%3Cpath d='M33 3l30 30-30 30L3 33z'/%3E%3Cpath d='M33 15l18 18-18 18-18-18z'/%3E%3Ccircle cx='33' cy='33' r='4'/%3E%3C/g%3E%3C/svg%3E") repeat;
mask-image:linear-gradient(225deg,#000,transparent 70%);
-webkit-mask-image:linear-gradient(225deg,#000,transparent 70%)}
.mode:after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px}
.mode.is-quiz:after{background:linear-gradient(180deg,#ff59b8,#ff2fa0);
box-shadow:0 0 14px rgba(255,47,160,.6)}
.mode.is-photo:after{background:linear-gradient(180deg,#3cf0de,#19e3d0);
box-shadow:0 0 14px rgba(25,227,208,.5)}
.mode.is-garnish:after{background:linear-gradient(180deg,#ffd76a,#ffc53d);
box-shadow:0 0 14px rgba(255,197,61,.45)}
.mode:hover:not([disabled]){transform:translateY(-2px);border-color:var(--teal)}
.mode.on{border-color:var(--teal);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),
0 0 0 1.5px rgba(25,227,208,.5),0 6px 18px rgba(0,0,0,.5)}
.mode-t{display:block;font-family:'Anton',Impact,'Arial Narrow',sans-serif;
font-size:27px;letter-spacing:1.5px;line-height:1;color:#fff;
text-shadow:0 2px 0 rgba(0,0,0,.5)}
.mode-m{display:block;margin-top:4px;font-size:11px;letter-spacing:.08em;
text-transform:uppercase;color:var(--muted)}
/* ---------- the panel a mode opens ---------- */
.mode-panel{margin:12px 0 0;padding:4px 15px 16px;
border:1.5px solid #3b2255;border-radius:16px;
background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.2))}
.mode-panel .section:first-child{margin-top:14px}
.chip i{font-style:normal;opacity:.6;font-size:12px;margin-left:3px}
/* The heading's small print was only styled inside #lbpanel, so in the
home column it ran straight on: "LeaderboardNovember". */
.col-board .lbh{display:block;font-family:'Anton',Impact,'Arial Narrow',sans-serif;
font-size:20px;letter-spacing:1.2px;color:#fff;line-height:1.1}
.col-board .lbh small{display:block;margin-top:2px;font-family:inherit;
font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.col-board .lbm{font-size:14px}
.col-board .lbr b{font-size:14px}
/* ============================================================
BRAND PASS — matched to agavebandido.com
Their site: near-black, hot pink and cyan, fully rounded pill
buttons, heavy condensed caps, Dia de Muertos murals painted
on brick. The palette already lined up; what changes here is
the surface (brick, not diamonds), the button shape (pills)
and the weight of the type.
============================================================ */
:root{
/* Grey stone rather than red clay, and darker, so the pink and cyan are
the only colour on the page. */
--brick:#17171a; --brick-dark:#101013; --mortar:#0a0a0c;
--bg:#08080a;
}
/* --- brick wall, lit from above like the murals --- */
body{background:var(--bg)}
body:before{
background-image:
/* pink and cyan wash, as if from the neon above */
radial-gradient(ellipse at 50% -5%,rgba(255,45,154,.13),transparent 58%),
radial-gradient(ellipse at 50% 105%,rgba(46,232,224,.09),transparent 58%),
/* staggered courses of grey stone */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Crect width='120' height='60' fill='%230a0a0c'/%3E%3Cg fill='%2317171a'%3E%3Crect x='1' y='1' width='56' height='27' rx='2'/%3E%3Crect x='61' y='1' width='56' height='27' rx='2'/%3E%3Crect x='-27' y='31' width='56' height='27' rx='2'/%3E%3Crect x='33' y='31' width='56' height='27' rx='2'/%3E%3Crect x='93' y='31' width='56' height='27' rx='2'/%3E%3C/g%3E%3Cg fill='%231f1f24' opacity='.5'%3E%3Crect x='1' y='1' width='56' height='8' rx='2'/%3E%3Crect x='61' y='1' width='56' height='8' rx='2'/%3E%3Crect x='33' y='31' width='56' height='8' rx='2'/%3E%3C/g%3E%3C/svg%3E");
background-size:auto,auto,120px 60px;
opacity:1}
/* Grain now reads as wall, so let it sit a touch stronger. */
body:after{opacity:.075}
/* --- pill buttons, the way the real site does them --- */
.btn,.chip,.nopt,.lbtab,.opt,.gopt{border-radius:999px}
.btn{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:15px}
.opt,.gopt{border-radius:14px} /* answers stay readable as blocks */
/* --- headings: heavier, with the pink rule their site uses --- */
h1,.gcard-t,.mode-t,.score,#ngate h2,.col-board .lbh{
font-family:'Anton',Impact,'Haettenschweiler','Arial Narrow',sans-serif}
.section{color:#ff6cc0;font-weight:800}
.section:after{background:linear-gradient(90deg,#ff2d9a,transparent)}
/* --- surfaces sit ON the wall: warmer, with a lit top edge --- */
.mode,.col-board,.lb,.mode-panel,.card,.opt,.gopt,.miss,.photo{
background-color:#131316}
.mode,.col-board{
background-image:
linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 42%),
linear-gradient(180deg,#1c1c21,#121215);
border-color:#33333c}
.mode-panel{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.26));
border-color:#2b2b33}
.lb{background-image:
linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 40%),
linear-gradient(180deg,#19191e,#121215);
border-color:#33333c}
.lb .lbrow,.col-board .lbh,.col-board .lbr{border-color:#26262d}
.chip{background:#19191e;border-color:#3a3a45}
.opt{background:#131316;border-color:#3a3a45}
/* the mural wash behind the hero, like paint on the wall */
/* No negative horizontal inset: it pushed past the viewport and gave the
whole page a sideways scroll. */
.hero:before{content:'';position:absolute;inset:-10px 0 0;z-index:-1;
background:radial-gradient(ellipse at 50% 40%,rgba(255,45,154,.2),transparent 68%);
pointer-events:none}
/* "BANDIDO ACADEMY" is nearly twice the length of "MENU QUIZ", so the title
scales with the viewport instead of sitting at a fixed 46px and wrapping
on a narrow phone. */
/* Sized against the Impact fallback, which is wider than Anton:
if Google Fonts is slow or blocked the title still has to clear the
edges rather than run off them. */
h1{font-size:clamp(24px,8.4vw,44px);white-space:nowrap;padding:0 8px}
/* ============================================================
SKULLS + GREY BUTTONS
The wall is gone from behind the content: what falls past the
buttons now is a field of skeleton heads, cousins of the ones
in the confetti. No two in the tile are alike -- different
sizes, tilts and colours. The buttons went plain grey so the
only colour on the page comes from the skulls behind them.
============================================================ */
/* Two layers at different speeds and scales, so the fall has depth.
Each is one composited background-position animation, which is cheap
enough to leave running on a phone. */
body:before{
background-image:
url("data:image/svg+xml,"),
url("data:image/svg+xml,");
background-size:300px 300px,200px 200px;
background-position:0 0,80px 40px;
/* One animation for both layers. Two animations on the same property do
not combine -- the later one wins outright -- so with separate ones the
big skulls never moved at all. Each layer travels exactly one tile per
cycle, so the loop is seamless, and the smaller layer covers less
ground in the same time, which reads as further away. */
animation:skullfall 34s linear infinite;
opacity:1}
@keyframes skullfall{ to{ background-position:0 300px,80px 240px } }
/* Drifting shapes behind text are a vestibular trigger, so they hold
still when the browser asks for less motion. */
@media (prefers-reduced-motion: reduce){
body:before{animation:none}
}
/* --- every button plain grey --- */
.btn{
background:linear-gradient(180deg,#3a3a42,#2a2a31);
color:#f2f2f5;
box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 14px rgba(0,0,0,.5);
border:1.5px solid #4a4a55}
.btn:hover:not([disabled]){background:linear-gradient(180deg,#45454e,#32323a)}
.btn.alt{background:linear-gradient(180deg,#26262c,#1c1c21);color:#e6e6ec;
box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.btn.good,.btn.bad{background:linear-gradient(180deg,#3a3a42,#2a2a31);color:#f2f2f5}
/* mode buttons: same grey, no coloured edge */
.mode:after{background:#4a4a55;box-shadow:none}
.mode.is-quiz:after,.mode.is-photo:after,.mode.is-garnish:after{
background:#4a4a55;box-shadow:none}
.mode.on:after{background:#8a8a99}
.mode.on{border-color:#8a8a99;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),
0 0 0 1.5px rgba(160,160,180,.45),0 6px 18px rgba(0,0,0,.5)}
.mode:hover:not([disabled]){border-color:#6c6c7a}
/* chips, including the selected state */
.chip{background:#1e1e24;border-color:#3c3c46;color:#dcdce4}
.chip.on{background:#4a4a55;border-color:#6c6c7a;color:#fff;box-shadow:none;font-weight:700}
.nopt:hover,.nopt:focus-visible{border-color:#6c6c7a;box-shadow:none}
/* Right and wrong keep their green and red: that is feedback, not
decoration, and greying it out would cost people the answer. */
/* the skulls want a darker, flatter stage than the lit brick did */
.mode,.col-board,.lb,.mode-panel{
background-image:
linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 40%),
linear-gradient(180deg,rgba(22,22,26,.93),rgba(14,14,17,.95))}
.opt,.gopt,.card,.miss{background-color:rgba(19,19,22,.94)}
/* The small print was the one block of text sitting straight on the skulls
with nothing behind it, which made it a struggle to read. */
.fine{background:rgba(10,10,13,.82);border-radius:14px;padding:12px 14px;
backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.hero .sub{text-shadow:0 2px 10px rgba(0,0,0,.9)}
/* ============================================================
FLAT GREY BRICK — final surface pass
No gradients anywhere: not on the buttons, the panels, the
page wash or the accent rules. Every surface is one flat grey
with a small brick texture tiled over it. Written with the
`background` shorthand on purpose, so it wipes the gradients
the earlier passes left behind rather than stacking on them.
============================================================ */
/* page: the falling skulls and nothing else behind them */
.hero:before{display:none}
/* the woven diamond motif on each mode would fight the brick */
.mode:before{display:none}
/* --- buttons --- */
.btn,.btn:hover:not([disabled]),.btn.alt,.btn.good,.btn.bad{
background:#33333a url("data:image/svg+xml,") repeat;
color:#f2f2f5;border:1.5px solid #4a4a55;box-shadow:none}
.btn:hover:not([disabled]){border-color:#6c6c7a}
.btn.alt{background-color:#26262c}
.btn[disabled]{opacity:.4}
/* --- the three modes --- */
.mode{background:#202025 url("data:image/svg+xml,") repeat;
border:1.5px solid #3a3a44;box-shadow:none}
.mode:hover:not([disabled]){border-color:#6c6c7a;transform:none}
.mode.on{border-color:#8a8a99;box-shadow:none}
.mode:after,.mode.is-quiz:after,.mode.is-photo:after,.mode.is-garnish:after{
background:#4a4a55;box-shadow:none}
.mode.on:after{background:#9a9aab}
/* --- panels --- */
.col-board,.lb,.mode-panel{
background:#1b1b20 url("data:image/svg+xml,") repeat;
border:1.5px solid #3a3a44;box-shadow:none}
.col-board .lb{background:none;border:0}
/* --- answers, cards, chips --- */
.opt,.gopt,.card,.miss{background:#1e1e23 url("data:image/svg+xml,") repeat;
border:1.5px solid #3a3a44;box-shadow:none}
.chip,.nopt{background:#27272d url("data:image/svg+xml,") repeat;
border:1.5px solid #3f3f4a;color:#dcdce4;box-shadow:none}
.chip.on{background:#4a4a55 url("data:image/svg+xml,") repeat;
border-color:#6c6c7a;color:#fff;box-shadow:none;font-weight:700}
.lbtab.on{background:#4a4a55;border-color:#6c6c7a;color:#fff}
/* --- flat rules and edges, no gradient fades --- */
.section:after{background:#ff2d9a;opacity:.45}
.bar>div{background:#8a8a99}
.photo{background:#0e0e11;border:1.5px solid #3a3a44;box-shadow:none}
.split .photo:before{display:none} /* that blur was a gradient mask */
/* right and wrong stay coloured: feedback, not decoration */
.opt.right{border-color:var(--good);background-color:#10281c}
.opt.wrong{border-color:var(--bad);background-color:#2a1016}
.gopt.right{border-color:var(--good);background-color:#10281c}
.gopt.wrong{border-color:var(--bad);background-color:#2a1016}
.gopt.sel{border-color:#9a9aab;background-color:#3a3a44;color:#fff}
.gopt.missed{border:2px dashed var(--good)}
/* Leaderboard rows kept a purple from the original stylesheet. Flat grey,
and no brick at row scale -- the texture turns to noise that small. */
.lbr{background:#202026;border-radius:10px}
.col-board .lbr{border-radius:0;background:transparent;border-bottom:1px solid #2b2b33}
.col-board .lbr:last-child{border-bottom:0}
.lbr.me{outline:1.5px solid var(--teal)} /* marks you, so it stays teal */
/* In the board column the row runs edge to edge, so an outline gets its
sides clipped and reads as two loose teal lines. Mark you with a tinted
row and a bar down the left instead. */
.col-board .lbr.me{outline:0;background:rgba(46,232,224,.1);
box-shadow:inset 3px 0 0 var(--teal)}
.col-board .lbr.me b{color:var(--teal)}
/* ============================================================
PLAIN + MODE COLOUR
No brick, no texture, no gradients: flat fills only. Colour
now comes from whichever mode is selected, read off the one
data-mode attribute on .
============================================================ */
/* --- strip every texture back off --- */
.btn,.btn:hover:not([disabled]),.btn.alt,.btn.good,.btn.bad,
.mode,.col-board,.lb,.mode-panel,.opt,.gopt,.card,.miss,.chip,.nopt,.chip.on{
background-image:none}
body:after{display:none} /* the film grain goes too */
/* --- one accent, set by the active mode --- */
body{--accent:#8a8a99; --accent-ink:#0d0d10}
body[data-active-mode="quiz"] {--accent:#ff2d9a; --accent-ink:#17000c}
body[data-active-mode="photo"] {--accent:#2ee8e0; --accent-ink:#00201f}
body[data-active-mode="garnish"]{--accent:#ffc53d; --accent-ink:#201700}
/* --- flat surfaces --- */
.btn{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
font-weight:800}
.btn:hover:not([disabled]){filter:brightness(1.08)}
.btn.alt{background:#26262c;color:#e9e9f0;border-color:#44444f}
.btn.good,.btn.bad{background:var(--accent);color:var(--accent-ink)}
.mode{background:#1e1e23;border-color:#35353f}
.mode:after{background:#3f3f49}
.mode.on{background:var(--accent);border-color:var(--accent)}
.mode.on:after{background:var(--accent-ink);opacity:.35}
.mode.on .mode-t{color:var(--accent-ink);text-shadow:none}
.mode.on .mode-m{color:var(--accent-ink);opacity:.72}
.col-board,.lb,.mode-panel{background:#1a1a1f;border-color:#35353f}
.col-board .lb{background:none}
.opt,.gopt,.card,.miss{background:#1c1c21;border-color:#35353f}
.chip,.nopt{background:#26262c;border-color:#3d3d47}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lbtab.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.section{color:var(--accent)}
.section:after{background:var(--accent);opacity:.4}
.bar>div{background:var(--accent)}
.col-board .lbr.me{background:rgba(255,255,255,.07);box-shadow:inset 3px 0 0 var(--accent)}
.col-board .lbr.me b{color:var(--accent)}
.lbr b{color:var(--accent)}
/* --- swipe affordance, phones only --- */
.swipe-hint{display:none}
@media (max-width:619px){
/* Gestures belong to this column; the rest of the page still scrolls. */
.col-modes{touch-action:none}
.swipe-hint{display:flex;align-items:center;justify-content:center;gap:5px;
padding:5px 0 0;flex-wrap:wrap}
.swipe-hint .dot{width:6px;height:6px;border-radius:50%;background:#44444f}
.swipe-hint .dot.on{background:var(--accent);transform:scale(1.25)}
/* Picks up the active mode's colour so it reads as part of the control
rather than grey chrome. */
/* Always dots on one line and the words beneath, rather than letting it
wrap wherever it lands (three ragged lines at 320px). Picks up the
active mode's colour so it reads as part of the control. */
.swipe-hint small{width:100%;margin:4px 0 0;text-align:center;
font-size:10px;letter-spacing:.08em;text-transform:uppercase;
color:var(--accent);font-weight:700}
}
/* "Leaderboard" filled the narrow column exactly edge to edge, which reads
as clipped even though nothing overflows. Scale it with the column and
ease the tracking so it has air around it. */
.col-board .lbh{font-size:clamp(13px,4.1vw,20px);letter-spacing:.3px}
/* "Garnish Test" and "Photo Test" wrapped to two lines on a 320px screen,
which left the three buttons visibly uneven. Scale the titles with the
viewport and hold them to one line. */
.mode-t{font-size:clamp(18px,6vw,27px);white-space:nowrap}
.mode-m{font-size:clamp(9px,2.8vw,11px);white-space:nowrap}
/* ---------- MOTION ---------- */
/* Screen slide */
@keyframes slide-fwd{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes slide-back{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
#app.slide-fwd{animation:slide-fwd .38s cubic-bezier(.2,.8,.2,1)}
#app.slide-back{animation:slide-back .38s cubic-bezier(.2,.8,.2,1)}
/* Cascade in */
@keyframes cascade-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.split-home.cascade .mode,.split-home.cascade .lbr{animation:cascade-in .42s cubic-bezier(.2,.8,.2,1) both}
.split-home.cascade .mode:nth-child(1){animation-delay:.05s}
.split-home.cascade .mode:nth-child(2){animation-delay:.14s}
.split-home.cascade .mode:nth-child(3){animation-delay:.23s}
.split-home.cascade .lbr:nth-child(1){animation-delay:.08s}
.split-home.cascade .lbr:nth-child(2){animation-delay:.14s}
.split-home.cascade .lbr:nth-child(3){animation-delay:.2s}
.split-home.cascade .lbr:nth-child(4){animation-delay:.26s}
.split-home.cascade .lbr:nth-child(5){animation-delay:.32s}
.split-home.cascade .lbr:nth-child(6){animation-delay:.38s}
.split-home.cascade .lbr:nth-child(7){animation-delay:.44s}
.split-home.cascade .lbr:nth-child(n+8){animation-delay:.5s}
/* hold the cascade until the loader has lifted */
#ldr:not(.gone) ~ #app .split-home.cascade .mode,
#ldr:not(.gone) ~ #app .split-home.cascade .lbr{animation-play-state:paused}
/* Progress glide */
.bar>div{transition:width .5s cubic-bezier(.2,.8,.2,1)}
/* Options unfold */
@keyframes unfold{from{opacity:0;transform:translateY(-10px) scaleY(.94)}to{opacity:1;transform:none}}
.mode-panel.unfold{animation:unfold .34s cubic-bezier(.2,.8,.2,1) both;transform-origin:top}
.mode-panel.unfold>*{animation:cascade-in .34s .08s cubic-bezier(.2,.8,.2,1) both}
/* Score count-up: numbers keep their width while ticking */
.lbr b{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
#app.slide-fwd,#app.slide-back,.split-home.cascade .mode,.split-home.cascade .lbr,
.mode-panel.unfold,.mode-panel.unfold>*{animation:none}
.bar>div{transition:none}
}
/* ---------- LOGO TITLE ---------- */
/* The Agave Bandido logo, with ACADEMY set under it in the same teal. */
h1.brand{white-space:normal;padding:0;text-shadow:none;margin:4px auto 0;
display:flex;flex-direction:column;align-items:center;gap:6px}
h1.brand img{display:block;width:min(62vw,260px);height:auto;
filter:drop-shadow(0 0 14px rgba(1,211,210,.35))}
h1.brand .brand-t{display:block;font-family:'Anton',Impact,'Arial Narrow',sans-serif;
font-weight:400;text-transform:uppercase;color:#01d3d2;line-height:1;
font-size:clamp(20px,6.4vw,32px);letter-spacing:.42em;margin-right:-.42em;
text-shadow:0 0 12px rgba(1,211,210,.45)}
/* ---------- BOARD MATCHES THE MODES ---------- */
/* The leaderboard is always exactly as tall as the three mode buttons.
contain:size stops its list from making the row taller, the row is then
sized by the buttons alone, and the board stretches to fill it. Names
that do not fit scroll inside the board. */
.split-home{align-items:stretch}
.col-board{contain:size;display:flex;flex-direction:column;min-height:0}
.col-board .lbh{flex:0 0 auto}
.col-board #lbinline{flex:1 1 auto;min-height:0;overflow-y:auto;
overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
scrollbar-color:#3a3a45 transparent;
/* a soft fade at the bottom hints there is more to scroll to */
-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent);
mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent)}
.col-board #lbinline::-webkit-scrollbar{width:4px}
.col-board #lbinline::-webkit-scrollbar-thumb{background:#3a3a45;border-radius:4px}
/* The swipe dots hang just under the buttons instead of adding a row, so
the board lines up with the three buttons exactly. */
@media (max-width:619px){
.col-modes{position:relative}
.swipe-hint{position:absolute;left:0;right:0;top:100%;padding-top:4px}
.split-home{margin-bottom:14px}
}
/* ============================================================
MOCK TABLE, LIVE BATTLE, MANAGER
These three draw in one full-screen layer over the home screen.
============================================================ */
.more-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}
.mode2{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
min-height:64px;text-align:left;cursor:pointer;color:var(--ink);padding:10px 14px;
border:1.5px solid #33333c;border-radius:16px;background:#19191e;
transition:transform .12s ease,border-color .12s ease}
.mode2:after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#b9a0ff}
.mode2.is-battle:after{background:#ff6a3d}
.mode2:hover{transform:translateY(-2px);border-color:#55555f}
.mode2 .mode-t{font-size:clamp(16px,5vw,22px)}
.split-home.cascade ~ .more-modes .mode2{animation:cascade-in .42s .3s cubic-bezier(.2,.8,.2,1) both}
.fine-link{font-size:12px;padding:0 2px;text-decoration:underline;color:var(--muted)}
body.ovl-open{overflow:hidden}
#ovl{position:fixed;inset:0;z-index:900;background:#08080a;overflow-y:auto;
-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#ovl.ovl-show .ovl-in{animation:slide-fwd .38s cubic-bezier(.2,.8,.2,1)}
.ovl-in{max-width:560px;margin:0 auto;padding:18px 16px 56px}
.ovl-h{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;text-transform:uppercase;
letter-spacing:1.5px;font-size:clamp(24px,7vw,34px);color:#fff;margin:14px 0 6px;line-height:1.05}
#ovl .btn{margin-top:12px}
/* --- mock table --- */
.tb{margin-top:14px}
.tb-guest{position:relative;background:#19191e;border:1.5px solid #33333c;border-radius:18px 18px 18px 4px;
padding:26px 16px 14px;font-size:18px;line-height:1.4;color:#fff;max-width:92%}
.tb-guest.tb-in{animation:cascade-in .4s cubic-bezier(.2,.8,.2,1) both}
.tb-who{position:absolute;left:14px;top:8px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#b9a0ff;font-weight:800}
.tb-you{margin:18px 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right}
.tb-opts .opt{border-radius:18px 18px 4px 18px;margin-left:auto;width:94%;line-height:1.4}
.tb-in ~ .tb-opts .opt{animation:cascade-in .36s cubic-bezier(.2,.8,.2,1) both}
.tb-in ~ .tb-opts .opt:nth-child(1){animation-delay:.25s}
.tb-in ~ .tb-opts .opt:nth-child(2){animation-delay:.33s}
.tb-in ~ .tb-opts .opt:nth-child(3){animation-delay:.41s}
.tb-fb{margin-top:6px;line-height:1.5}
/* --- battle --- */
.bt-score{display:flex;align-items:center;gap:10px;margin:14px 0 10px}
.bt-side{flex:1;min-width:0;background:#19191e;border:1.5px solid #33333c;border-radius:14px;padding:8px 12px;text-align:center}
.bt-side.me{border-color:#ff6a3d}
.bt-side span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-side b{display:block;font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:28px;color:#fff;
line-height:1.1;font-variant-numeric:tabular-nums}
.bt-vs{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bt-timer{height:8px;border-radius:99px;background:#26262d;overflow:hidden;margin:0 0 12px}
.bt-timer i{display:block;height:100%;background:#ff6a3d;border-radius:99px}
.bt-timer.off i{opacity:.25}
.bt-opts .opt{position:relative}
.bt-opts .opt.bt-picked{border-color:#ff6a3d;background:#2a1a14}
.bt-tag{flex:0 0 auto;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;
padding:3px 7px;border-radius:99px;background:#ff6a3d;color:#1a0c06;margin-left:6px;
max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-tag.them{background:#44444f;color:#fff}
.bt-line{min-height:22px;text-align:center}
.bt-count{text-align:center;margin:60px 0}
.bt-count span{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.bt-count b{display:block;font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:120px;line-height:1.1;color:#fff}
.bt-wait{display:flex;justify-content:center;gap:10px;margin:36px 0}
.bt-wait i{width:14px;height:14px;border-radius:50%;background:#ff6a3d;animation:bt-wait 1.2s ease-in-out infinite}
.bt-wait i:nth-child(2){animation-delay:.2s}.bt-wait i:nth-child(3){animation-delay:.4s}
@keyframes bt-wait{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1.15)}}
.bt-end{font-size:clamp(34px,11vw,52px);text-shadow:none;margin-top:26px}
.bt-end.won{color:#ffc53d}
.bt-msg{color:#ffc53d}
/* --- manager --- */
.mgr-gate input{width:100%;font-size:18px;padding:13px 14px;border-radius:12px;border:1.5px solid #3a3a45;
background:#131316;color:#fff;margin-top:8px}
.mgr-err{color:var(--bad);min-height:20px;font-size:14px;margin:10px 0 0}
.mgr-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
@media (max-width:480px){.mgr-tiles{grid-template-columns:repeat(2,1fr)}}
.mgr-tile{background:#19191e;border:1.5px solid #33333c;border-radius:14px;padding:10px 8px;text-align:center}
.mgr-tile b{display:block;font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:28px;color:#fff;line-height:1.1}
.mgr-tile span{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.mgr-tabs{display:flex;gap:8px;margin:14px 0 10px}
.mgr-row,.mgr-miss{background:#19191e;border:1.5px solid #33333c;border-radius:14px;margin-bottom:8px;overflow:hidden}
.mgr-miss{padding:12px 14px}
.mgr-miss b{display:block;color:#fff;font-size:15px;line-height:1.35}
.mgr-main{display:block;width:100%;text-align:left;background:none;border:0;color:var(--ink);padding:12px 14px;cursor:pointer}
.mgr-name{display:block;font-size:17px;font-weight:700;color:#fff}
.mgr-sub{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}
.mgr-badge{display:inline-block;vertical-align:middle;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
font-weight:800;padding:2px 7px;border-radius:99px;background:var(--good);color:#04251f;margin-left:4px}
.mgr-meter{display:block;height:6px;border-radius:99px;background:#26262d;margin-top:8px;overflow:hidden}
.mgr-meter i{display:block;height:100%;background:var(--good);border-radius:99px}
.mgr-meter.bad i{background:var(--bad)}
.mgr-detail{padding:0 14px 14px;border-top:1px solid #26262d}
.mgr-list{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:1.5}
.mgr-list .mgr-sub{display:inline}
@media (prefers-reduced-motion:reduce){
#ovl.ovl-show .ovl-in,.tb-guest.tb-in,.tb-in ~ .tb-opts .opt,.bt-wait i,
.split-home.cascade ~ .more-modes .mode2{animation:none}
}
/* ---------- HOLD TO START ---------- */
/* The fill is the progress of the hold: it runs left to right in exactly
the time the button takes to fire, and snaps back if you let go. */
.mode2{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;isolation:isolate}
.mode2:before{content:'';position:absolute;inset:0;z-index:-1;background:#b9a0ff;opacity:.9;
transform:scaleX(0);transform-origin:left center;transition:transform .18s ease-out}
.mode2.is-battle:before{background:#ff6a3d}
.mode2.holding:before{transform:scaleX(1);transition:transform .9s linear}
.mode2.held:before{transform:scaleX(1);transition:none}
.mode2.holding .mode-t,.mode2.held .mode-t{color:#0b0b0d;text-shadow:none;transition:color .5s linear .3s}
.mode2.holding .mode-m,.mode2.held .mode-m{color:#0b0b0d;transition:color .5s linear .3s}
.mode2:hover{transform:none}
/* ---------- FIRST PLACE IS ON FIRE ---------- */
#lbinline .lbr:first-child,#lbpanel .lbh + .lbr{position:relative;overflow:hidden;isolation:isolate}
#lbinline .lbr:first-child:before,#lbinline .lbr:first-child:after,
#lbpanel .lbh + .lbr:before,#lbpanel .lbh + .lbr:after{
content:'';position:absolute;left:-8%;right:-8%;bottom:-5px;height:105%;z-index:-1;pointer-events:none;
transform-origin:50% 100%;filter:blur(3px);
background:
radial-gradient(ellipse 9% 70% at 8% 100%,#ff3d00 0,rgba(255,61,0,0) 70%),
radial-gradient(ellipse 8% 95% at 22% 100%,#ff7a00 0,rgba(255,122,0,0) 70%),
radial-gradient(ellipse 10% 75% at 37% 100%,#ff3d00 0,rgba(255,61,0,0) 70%),
radial-gradient(ellipse 8% 100% at 52% 100%,#ff8a00 0,rgba(255,138,0,0) 70%),
radial-gradient(ellipse 10% 70% at 67% 100%,#ff3d00 0,rgba(255,61,0,0) 70%),
radial-gradient(ellipse 8% 90% at 82% 100%,#ff7a00 0,rgba(255,122,0,0) 70%),
radial-gradient(ellipse 9% 65% at 95% 100%,#ff3d00 0,rgba(255,61,0,0) 70%);
animation:flame-a 1.1s ease-in-out infinite alternate}
#lbinline .lbr:first-child:after,#lbpanel .lbh + .lbr:after{
height:72%;filter:blur(1.5px);left:-4%;right:-12%;
background:
radial-gradient(ellipse 6% 80% at 14% 100%,#ffd23d 0,rgba(255,210,61,0) 70%),
radial-gradient(ellipse 7% 100% at 30% 100%,#ffc53d 0,rgba(255,197,61,0) 70%),
radial-gradient(ellipse 6% 70% at 46% 100%,#ffe27a 0,rgba(255,226,122,0) 70%),
radial-gradient(ellipse 7% 95% at 61% 100%,#ffc53d 0,rgba(255,197,61,0) 70%),
radial-gradient(ellipse 6% 75% at 77% 100%,#ffd23d 0,rgba(255,210,61,0) 70%),
radial-gradient(ellipse 6% 90% at 90% 100%,#ffc53d 0,rgba(255,197,61,0) 70%);
animation:flame-b .8s ease-in-out infinite alternate}
@keyframes flame-a{0%{transform:scaleY(.82) translateX(-2%);opacity:.75}
50%{transform:scaleY(1.08) translateX(1.5%);opacity:.95}100%{transform:scaleY(.9) translateX(3%);opacity:.8}}
@keyframes flame-b{0%{transform:scaleY(1.1) translateX(2.5%);opacity:.85}
50%{transform:scaleY(.8) translateX(-1.5%);opacity:.65}100%{transform:scaleY(1.02) translateX(-3%);opacity:.9}}
#lbinline .lbr:first-child .lbm,#lbinline .lbr:first-child b,
#lbpanel .lbh + .lbr .lbm,#lbpanel .lbh + .lbr b{color:#fff;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.7)}
/* ---------- MOCK TABLE: the guest and her speech bubble ---------- */
.tb-scene{display:flex;align-items:flex-end;gap:14px;margin-top:6px}
.tb-person{flex:0 0 104px;text-align:center}
.tb-fig{display:block;width:104px;height:187px;transform-origin:50% 100%}
.tb-person .tb-who{position:static;display:block;margin-top:2px;font-size:9px}
.tb-angry .tb-who{color:#ffc53d}
.tb-bubbles{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding-bottom:46px}
.tb-scene .tb-guest{max-width:100%;padding:14px 16px;border-radius:18px;background:#f4f4f6;color:#111114;
border:0;font-size:17px;line-height:1.4;position:relative}
.tb-scene .tb-guest:first-child:before{content:'';position:absolute;left:-11px;bottom:16px;
border:8px solid transparent;border-right-color:#f4f4f6;border-left-width:4px}
.tb-angry .tb-guest{background:#ffe9a8}
.tb-angry .tb-guest:first-child:before{border-right-color:#ffe9a8}
.tb-scene .tb-react{font-style:italic;font-size:15px;padding:10px 14px;align-self:flex-start}
.tb-mood-good .tb-react{background:#c9f7df}
.tb-mood-bad .tb-react{background:#ffc9d2}
.tb-fresh .opt{animation:cascade-in .36s cubic-bezier(.2,.8,.2,1) both}
.tb-fresh .opt:nth-child(1){animation-delay:.25s}
.tb-fresh .opt:nth-child(2){animation-delay:.33s}
.tb-fresh .opt:nth-child(3){animation-delay:.41s}
@keyframes tb-shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(5deg)}}
@keyframes tb-hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-12px)}65%{transform:translateY(0)}80%{transform:translateY(-5px)}}
@keyframes tb-tap{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.5deg)}}
.tb-angry.tb-mood-idle .tb-fig{animation:tb-tap .9s ease-in-out infinite}
.tb-mood-bad .tb-fig{animation:tb-shake .5s ease-in-out 2}
.tb-mood-good .tb-fig{animation:tb-hop .7s ease-out 1}
.tb-end{display:flex;justify-content:center;margin-top:10px}
.tb-end .tb-fig{width:104px}
@media (prefers-reduced-motion:reduce){
#lbinline .lbr:first-child:before,#lbinline .lbr:first-child:after,
#lbpanel .lbh + .lbr:before,#lbpanel .lbh + .lbr:after,.tb-fig,.tb-fresh .opt{animation:none!important}
}
/* ---------- FIRST PLACE: A BUBBLE OF FIRE ---------- */
/* The row becomes a glowing pill around the name and score, with flames
licking up off its top edge. The first row is pushed down a little so
the flames have room inside the scrolling list. */
#lbinline .lbr:first-child,#lbpanel .lbh + .lbr{
overflow:visible;margin:20px 6px 8px;border-radius:999px;
border:2px solid #ff7a00;background:linear-gradient(180deg,#3a1606,#1d0b05);
box-shadow:0 0 10px rgba(255,106,0,.65),inset 0 0 12px rgba(255,90,0,.45);
animation:flame-glow 1.3s ease-in-out infinite alternate}
.col-board #lbinline .lbr:first-child{padding:8px 12px}
@keyframes flame-glow{
0%{box-shadow:0 0 8px rgba(255,106,0,.55),inset 0 0 10px rgba(255,90,0,.35);border-color:#ff6a00}
50%{box-shadow:0 0 16px rgba(255,140,0,.85),inset 0 0 14px rgba(255,120,0,.55);border-color:#ffa01a}
100%{box-shadow:0 0 11px rgba(255,90,0,.7),inset 0 0 11px rgba(255,90,0,.4);border-color:#ff7a00}}
/* flames: tongues of fire sitting on the top edge of the bubble */
#lbinline .lbr:first-child:before,#lbinline .lbr:first-child:after,
#lbpanel .lbh + .lbr:before,#lbpanel .lbh + .lbr:after{
left:8%;right:8%;top:auto;bottom:calc(100% - 4px);height:20px;z-index:1;filter:blur(1.2px);
transform-origin:50% 100%}
#lbinline .lbr:first-child:before,#lbpanel .lbh + .lbr:before{
background:
radial-gradient(ellipse 7% 100% at 6% 100%,#ff4800 0 30%,rgba(255,72,0,0) 72%),
radial-gradient(ellipse 6% 80% at 18% 100%,#ff7a00 0 30%,rgba(255,122,0,0) 72%),
radial-gradient(ellipse 8% 100% at 31% 100%,#ff4800 0 30%,rgba(255,72,0,0) 72%),
radial-gradient(ellipse 6% 75% at 44% 100%,#ff8a00 0 30%,rgba(255,138,0,0) 72%),
radial-gradient(ellipse 8% 100% at 57% 100%,#ff4800 0 30%,rgba(255,72,0,0) 72%),
radial-gradient(ellipse 6% 85% at 70% 100%,#ff7a00 0 30%,rgba(255,122,0,0) 72%),
radial-gradient(ellipse 8% 100% at 83% 100%,#ff4800 0 30%,rgba(255,72,0,0) 72%),
radial-gradient(ellipse 6% 80% at 95% 100%,#ff8a00 0 30%,rgba(255,138,0,0) 72%);
animation:flame-a .9s ease-in-out infinite alternate}
#lbinline .lbr:first-child:after,#lbpanel .lbh + .lbr:after{
height:13px;left:11%;right:11%;filter:blur(.8px);
background:
radial-gradient(ellipse 5% 100% at 10% 100%,#ffe27a 0 30%,rgba(255,226,122,0) 72%),
radial-gradient(ellipse 5% 80% at 25% 100%,#ffc53d 0 30%,rgba(255,197,61,0) 72%),
radial-gradient(ellipse 5% 100% at 40% 100%,#fff1b0 0 30%,rgba(255,241,176,0) 72%),
radial-gradient(ellipse 5% 85% at 55% 100%,#ffc53d 0 30%,rgba(255,197,61,0) 72%),
radial-gradient(ellipse 5% 100% at 70% 100%,#ffe27a 0 30%,rgba(255,226,122,0) 72%),
radial-gradient(ellipse 5% 80% at 85% 100%,#ffc53d 0 30%,rgba(255,197,61,0) 72%);
animation:flame-b .65s ease-in-out infinite alternate}
@keyframes flame-a{0%{transform:scaleY(.75) translateX(-1.5%);opacity:.85}
50%{transform:scaleY(1.15) translateX(1%);opacity:1}100%{transform:scaleY(.9) translateX(2%);opacity:.9}}
@keyframes flame-b{0%{transform:scaleY(1.15) translateX(2%);opacity:.95}
50%{transform:scaleY(.7) translateX(-1%);opacity:.75}100%{transform:scaleY(1) translateX(-2%);opacity:1}}
#lbinline .lbr:first-child .lbm,#lbinline .lbr:first-child b,
#lbpanel .lbh + .lbr .lbm,#lbpanel .lbh + .lbr b{color:#fff;text-shadow:0 0 6px rgba(255,120,0,.9)}
/* the cascade animation would otherwise replace the glow on the first row */
.split-home.cascade #lbinline .lbr:first-child{animation:cascade-in .42s .08s cubic-bezier(.2,.8,.2,1) both,flame-glow 1.3s .5s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){
#lbinline .lbr:first-child,#lbpanel .lbh + .lbr,.split-home.cascade #lbinline .lbr:first-child{animation:none!important}
}
/* taller, pointier tongues */
#lbinline .lbr:first-child,#lbpanel .lbh + .lbr{margin-top:28px}
#lbinline .lbr:first-child:before,#lbpanel .lbh + .lbr:before{height:30px;bottom:calc(100% - 6px);left:4%;right:4%;
background:
radial-gradient(ellipse 5% 100% at 5% 100%,#ff4800 0 35%,rgba(255,72,0,0) 75%),
radial-gradient(ellipse 4% 70% at 15% 100%,#ff7a00 0 35%,rgba(255,122,0,0) 75%),
radial-gradient(ellipse 5% 95% at 26% 100%,#ff4800 0 35%,rgba(255,72,0,0) 75%),
radial-gradient(ellipse 4% 65% at 37% 100%,#ff8a00 0 35%,rgba(255,138,0,0) 75%),
radial-gradient(ellipse 5% 100% at 48% 100%,#ff4800 0 35%,rgba(255,72,0,0) 75%),
radial-gradient(ellipse 4% 75% at 59% 100%,#ff7a00 0 35%,rgba(255,122,0,0) 75%),
radial-gradient(ellipse 5% 92% at 70% 100%,#ff4800 0 35%,rgba(255,72,0,0) 75%),
radial-gradient(ellipse 4% 70% at 81% 100%,#ff8a00 0 35%,rgba(255,138,0,0) 75%),
radial-gradient(ellipse 5% 100% at 93% 100%,#ff4800 0 35%,rgba(255,72,0,0) 75%),
linear-gradient(0deg,rgba(255,90,0,.85),rgba(255,90,0,0) 40%)}
#lbinline .lbr:first-child:after,#lbpanel .lbh + .lbr:after{height:19px;bottom:calc(100% - 5px);left:7%;right:7%;
background:
radial-gradient(ellipse 3.5% 100% at 9% 100%,#ffe27a 0 35%,rgba(255,226,122,0) 75%),
radial-gradient(ellipse 3.5% 75% at 22% 100%,#ffc53d 0 35%,rgba(255,197,61,0) 75%),
radial-gradient(ellipse 3.5% 100% at 35% 100%,#fff1b0 0 35%,rgba(255,241,176,0) 75%),
radial-gradient(ellipse 3.5% 80% at 49% 100%,#ffc53d 0 35%,rgba(255,197,61,0) 75%),
radial-gradient(ellipse 3.5% 100% at 63% 100%,#ffe27a 0 35%,rgba(255,226,122,0) 75%),
radial-gradient(ellipse 3.5% 75% at 77% 100%,#ffc53d 0 35%,rgba(255,197,61,0) 75%),
radial-gradient(ellipse 3.5% 95% at 91% 100%,#fff1b0 0 35%,rgba(255,241,176,0) 75%)}