/* ===== template "fest": loud, saturated, real-scratch-card energy ===== */
:root{
  --f-pink:#E8197D; --f-pink-dk:#B3115E;
  --f-blue:#3B3FB6; --f-blue-dk:#221B6B; --f-navy:#17114D;
  --f-gold:#FFD233; --f-gold-dk:#F0A51E;
  --f-green:#1E8A4C; --f-cream:#FFF8E6;
}
body.fest{
  background:
    radial-gradient(1100px 520px at 50% -8%, #4A3FD0 0%, transparent 62%),
    linear-gradient(170deg,#2B2A8E 0%,#1B1660 55%,#140F45 100%);
  color:#fff;
}
body.fest .brand{color:#fff}
body.fest .brand i{background:var(--f-gold)}
body.fest .lang{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
body.fest .small,body.fest .lead,body.fest .tiny{color:#CFCBF2}
body.fest h1,body.fest h2{color:#fff}
body.fest h1.fest-title{color:var(--f-gold)}
body.fest .panel{background:#fff;color:var(--ink);border-color:transparent}

/* --- the ticket --- */
.fest{
  position:relative;border-radius:16px;overflow:hidden;
  border:5px solid var(--f-gold);
  box-shadow:0 0 0 3px var(--f-navy),0 18px 44px rgba(0,0,0,.5);
  background:
    url("money-bg.svg") repeat,
    linear-gradient(150deg,#4A41C8 0%,#6D2BA8 42%,#A81E7E 78%,#E8197D 100%);
  background-size:168px 168px,auto;
}
.fest-head{display:flex;align-items:flex-start;justify-content:space-between;padding:12px 12px 0}
.fest-tab{
  background:var(--f-pink);color:#fff;font-family:var(--ff);font-style:italic;
  font-size:17px;padding:5px 14px;border-radius:5px;letter-spacing:.01em;
  box-shadow:0 3px 0 var(--f-pink-dk);display:inline-flex;align-items:center;gap:6px;
}
.fest-tab i{width:6px;height:6px;border-radius:50%;background:var(--f-gold);display:block}
.fest-badge{
  width:62px;height:62px;border-radius:50%;background:var(--f-gold);
  border:3px solid #fff;box-shadow:0 3px 0 var(--f-gold-dk),0 6px 12px rgba(0,0,0,.3);
  display:grid;place-content:center;text-align:center;line-height:1;flex:0 0 62px;
}
.fest-badge b{display:block;font-size:19px;color:var(--f-navy);font-weight:900}
.fest-badge span{display:block;font-size:7.5px;letter-spacing:.07em;color:var(--f-navy);font-weight:800;margin-top:2px}

.fest-kicker{
  display:inline-block;margin:10px auto 0;background:var(--f-navy);color:var(--f-gold);
  font-size:11px;font-weight:800;letter-spacing:.17em;padding:4px 12px;border-radius:3px;
}
.fest-hero{text-align:center;padding:2px 14px 14px}
.fest-title{
  position:relative;display:inline-block;margin:6px 0 0;
  font-family:"Arial Black","Helvetica Neue",Impact,sans-serif;font-weight:900;
  font-size:clamp(38px,12.5vw,54px);line-height:.92;letter-spacing:-.015em;margin-bottom:4px;
  color:var(--f-gold);
  text-shadow:0 3px 0 var(--f-blue-dk),0 5px 0 var(--f-navy),0 11px 16px rgba(0,0,0,.45);
}
.fest-title::before{
  content:attr(data-text);position:absolute;left:0;top:0;z-index:-1;
  -webkit-text-stroke:10px var(--f-navy);color:var(--f-navy);
}
.fest-sub{
  display:inline-block;margin-top:12px;background:#fff;border:3px solid var(--f-navy);
  border-radius:999px;padding:6px 20px;box-shadow:0 4px 0 rgba(23,17,77,.5);
}
.fest-sub .l{display:block;font-size:9.5px;letter-spacing:.16em;color:var(--f-pink);font-weight:800}
.fest-sub .n{display:block;font-family:var(--ff);font-size:24px;color:var(--f-navy);font-weight:700;line-height:1.1}

/* rule banner */
.fest-rule{
  margin:0 12px;background:var(--f-gold);border:2px solid var(--f-navy);border-radius:7px;
  padding:9px 12px;text-align:center;color:var(--f-navy);
  font-size:12.5px;font-weight:800;line-height:1.35;box-shadow:0 3px 0 rgba(23,17,77,.45);
}

/* the panel holding the six fields */
.fest-panel{margin:13px 12px 0;background:rgba(255,255,255,.93);border:3px solid var(--f-navy);border-radius:10px;padding:11px 10px 12px}
.fest-panel-h{text-align:center;font-size:10px;font-weight:900;letter-spacing:.17em;color:var(--f-blue);margin:0 0 9px}
.grid6f{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.cellf{
  position:relative;aspect-ratio:1/.82;border-radius:6px;overflow:hidden;
  background:linear-gradient(#FFFDF4,#F4EEDC);border:2px solid var(--f-navy);
}
.cellf .v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px}
.cellf .v b{font-family:"Arial Black",Impact,sans-serif;font-size:min(6.6vw,23px);line-height:1;color:var(--f-navy)}
.cellf .v s{text-decoration:none;font-size:7px;letter-spacing:.04em;font-weight:800;color:#9A8F76;text-transform:uppercase;max-width:100%;overflow:hidden}
.cellf .v s.lng{font-size:5.6px;letter-spacing:0}
.cellf canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.cellf.hit{border-color:var(--f-pink);box-shadow:0 0 0 3px rgba(232,25,125,.45),inset 0 0 20px rgba(232,25,125,.14)}
.cellf.hit .v b{color:var(--f-pink)}
.cellf.hit::after{content:"★";position:absolute;top:1px;right:3px;font-size:10px;color:var(--f-gold);text-shadow:0 1px 0 var(--f-navy)}

/* match banner */
.fest-match{
  display:none;margin:11px 12px 0;background:var(--f-gold);border:3px solid var(--f-navy);
  border-radius:9px;padding:10px;text-align:center;box-shadow:0 4px 0 rgba(23,17,77,.45);
  animation:popf .45s cubic-bezier(.2,1.5,.4,1) both;
}
.fest-match.on{display:block}
@keyframes popf{from{opacity:0;transform:scale(.8) rotate(-2deg)}to{opacity:1;transform:none}}
.fest-match .a{font-size:10px;font-weight:900;letter-spacing:.16em;color:var(--f-pink)}
.fest-match .b{font-family:"Arial Black",Impact,sans-serif;font-size:27px;color:var(--f-navy);line-height:1.05}

/* bottom: code strip + serial */
.fest-foot{display:flex;gap:9px;align-items:stretch;margin:12px 12px 0}
.stripf{position:relative;flex:1;height:52px;border-radius:6px;overflow:hidden;
  background:linear-gradient(#FFFDF4,#F4EEDC);border:2px solid var(--f-navy)}
.stripf .inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 8px;text-align:center}
.stripf .gl{font-size:8px;letter-spacing:.14em;font-weight:900;color:var(--f-pink)}
.stripf .gn{font-family:var(--ff);font-size:16px;color:var(--f-navy);font-weight:700;line-height:1.15}
.stripf .gc{font-family:ui-monospace,Menlo,monospace;font-size:8px;color:#A79C91;letter-spacing:.11em}
.stripf canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.fest-serial{writing-mode:vertical-rl;font-family:ui-monospace,Menlo,monospace;font-size:8.5px;
  color:rgba(255,255,255,.75);letter-spacing:.12em;display:grid;place-items:center;padding:0 1px}
.fest-fine{margin:9px 12px 0;padding-bottom:12px;font-size:8.5px;line-height:1.45;color:rgba(255,255,255,.72);text-align:center}

body.fest .howto{color:#D9D4FF}
body.fest .demobar{background:#0E0A33}
body.fest .btn{background:var(--f-gold);color:var(--f-navy);font-weight:900;box-shadow:0 5px 0 var(--f-gold-dk)}
body.fest .btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--f-gold-dk)}
body.fest .btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.45);box-shadow:none}
body.fest .btn.quiet{background:transparent;color:#BDB7E8;box-shadow:none;font-weight:600}
body.fest .path{background:#fff;color:var(--ink)}
body.fest .msg{color:#F0ECFF}