/* Boards: text slides, menu / price boards and live widgets.
 * --u = 1% of the area's shorter side (set by the player, or 1cqmin in previews).
 * Written for older TV browsers too: no inset, no flex gap, no container units. */
.text-slide,.menu-board,.widget{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.deco{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}

/* ---------------------------------------------------------------- text slide */
.text-slide{--s:1;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--u) * 7) calc(var(--u) * 9);background-size:cover;background-position:center}
.text-slide.center{align-items:center;text-align:center}
.text-slide.left .ts-badge{align-self:flex-start}
.text-slide .accent{width:calc(var(--u) * 10);height:var(--u);border-radius:var(--u);margin-bottom:calc(var(--u) * 4);flex:none}
.text-slide h1{font-size:calc(var(--u) * 9 * var(--s));line-height:1.05;font-weight:800;letter-spacing:-.02em;margin:0;text-wrap:balance;max-width:92%}
.text-slide p{font-size:calc(var(--u) * 4.4 * var(--s));line-height:1.35;margin:calc(var(--u) * 3.5 * var(--s)) 0 0;opacity:.92;white-space:pre-line;max-width:88%;text-wrap:pretty}
.text-slide .foot{position:absolute;bottom:calc(var(--u) * 6);font-size:calc(var(--u) * 3);opacity:.75;letter-spacing:.04em}
.text-slide.center .foot{left:0;right:0}
.text-slide .ts-scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.6))}
.text-slide > *:not(.ts-scrim):not(.foot):not(.deco):not(.qr-box){position:relative}
.text-slide .ts-badge{display:inline-block;flex:none;align-self:center;font-size:calc(var(--u) * 2.8 * var(--s));font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:calc(var(--u) * 1) calc(var(--u) * 2.4);border-radius:99px;color:#111;margin-bottom:calc(var(--u) * 3.5)}
.text-slide.has-qr.qr-side{padding-right:calc(var(--u) * 44)}
.text-slide.has-qr.qr-side.center{align-items:center}
.text-slide.has-qr.qr-bottom{justify-content:flex-start;padding-top:calc(var(--u) * 12)}

/* QR code box (text slides, menus, review widget) */
.qr-box{position:absolute;background:#fff;color:#111;border-radius:calc(var(--u) * 2.4);padding:calc(var(--u) * 1.6);text-align:center;box-shadow:0 calc(var(--u) * 1.4) calc(var(--u) * 5) rgba(0,0,0,.35)}
.qr-box canvas{display:block;width:calc(var(--u) * 28);height:calc(var(--u) * 28);image-rendering:pixelated;image-rendering:crisp-edges}
.qr-label{font-size:calc(var(--u) * 2.6);font-weight:700;margin-top:calc(var(--u) * 1);max-width:calc(var(--u) * 28);line-height:1.2}
.text-slide.qr-side .qr-box{right:calc(var(--u) * 8);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.text-slide.qr-bottom .qr-box{left:50%;bottom:calc(var(--u) * 12);-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.text-slide.qr-bottom .qr-box canvas{width:calc(var(--u) * 34);height:calc(var(--u) * 34)}
.text-slide.qr-bottom .qr-label{max-width:calc(var(--u) * 34)}

/* ---------------------------------------------------------------- menu / price board */
.menu-board{--s:1;--mb-accent:#f59e0b;display:flex;flex-direction:column;padding:calc(var(--u) * 5) calc(var(--u) * 6) calc(var(--u) * 4);background:#0f172a;color:#f8fafc}
.menu-board > *{position:relative}
.menu-board .mb-photo{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center}
.menu-board .mb-scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.62)}
.menu-board .deco{position:absolute}
.mb-head{display:flex;align-items:center;justify-content:space-between;flex:none;margin-bottom:calc(var(--u) * 3 * var(--s))}
.mb-titles{min-width:0}
.mb-head h1{margin:0;font-size:calc(var(--u) * 7 * var(--s));line-height:1.05;font-weight:800;letter-spacing:-.01em;color:var(--mb-accent)}
.mb-sub{font-size:calc(var(--u) * 3 * var(--s));opacity:.8;margin-top:calc(var(--u) * .8 * var(--s))}
.mb-head .qr-box{position:relative;flex:none;margin-left:calc(var(--u) * 3);padding:calc(var(--u) * 1)}
.mb-head .qr-box canvas{width:calc(var(--u) * 14);height:calc(var(--u) * 14)}
.mb-head .qr-label{font-size:calc(var(--u) * 1.7);max-width:calc(var(--u) * 14)}
.mb-cols{flex:1;min-height:0;-webkit-column-gap:calc(var(--u) * 6);column-gap:calc(var(--u) * 6);-webkit-column-fill:balance;column-fill:balance;overflow:hidden}
.mb-sec{margin-bottom:calc(var(--u) * 2.4 * var(--s))}
.mb-sec h2{margin:0 0 calc(var(--u) * 1 * var(--s));font-size:calc(var(--u) * 3.6 * var(--s));font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--mb-accent);border-bottom:calc(var(--u) * .3) solid currentColor;padding-bottom:calc(var(--u) * .6 * var(--s));-webkit-column-break-after:avoid;break-after:avoid;break-inside:avoid}
.mb-item{-webkit-column-break-inside:avoid;break-inside:avoid;page-break-inside:avoid;padding:calc(var(--u) * .7 * var(--s)) 0}
.mb-row{display:flex;align-items:baseline;font-size:calc(var(--u) * 3.6 * var(--s));line-height:1.2}
.mb-name{font-weight:650}
.mb-dots{flex:1;min-width:calc(var(--u) * 2);border-bottom:calc(var(--u) * .25) dotted currentColor;opacity:.35;margin:0 calc(var(--u) * 1.2);-webkit-transform:translateY(-.25em);transform:translateY(-.25em)}
.mb-price{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.mb-desc{font-size:calc(var(--u) * 2.5 * var(--s));opacity:.72;margin-top:calc(var(--u) * .3 * var(--s));line-height:1.3}
.mb-tag{font-size:.52em;font-weight:800;letter-spacing:.06em;padding:.15em .55em;border-radius:99px;margin-left:.6em;background:var(--mb-accent);color:#111;white-space:nowrap;-webkit-transform:translateY(-.2em);transform:translateY(-.2em);display:inline-block}
.mb-tag.t-vegan,.mb-tag.t-veg{background:#22c55e;color:#04210f}
.mb-tag.t-gf{background:#a3e635;color:#1a2e05}
.mb-tag.t-hot{background:#ef4444;color:#fff}
.mb-tag.t-off{background:#64748b;color:#fff}
.mb-item.off .mb-name,.mb-item.off .mb-price{text-decoration:line-through;opacity:.5}
.mb-foot{flex:none;font-size:calc(var(--u) * 2.4 * var(--s));opacity:.75;text-align:center;margin-top:calc(var(--u) * 1.5 * var(--s))}
/* themes */
.mb-light{background:#fffbeb;color:#1c1917}
.mb-chalk{background:#1f2a24 radial-gradient(120% 90% at 50% 0%,#2f3d35,#18201b);color:#f1f5f0;font-family:"Chalkboard SE","Segoe Print","Bradley Hand",cursive}
.mb-chalk .mb-head h1{font-weight:700}
.mb-warm{background:linear-gradient(135deg,#7c2d12,#b45309);color:#fff7ed}
.mb-fresh{background:#ecfdf5;color:#064e3b}
.mb-bold{background:#111;color:#fff}
.mb-bold .mb-head h1,.mb-bold .mb-sec h2{text-transform:uppercase;letter-spacing:.04em}
.mb-elegant{background:#0b0b0b radial-gradient(100% 80% at 50% 0%,#1c1917,#0b0b0b);color:#f5f5f4;font-family:Georgia,"Times New Roman",serif}
.mb-elegant .mb-sec h2{font-weight:400;letter-spacing:.18em}
.mb-blue{background:linear-gradient(160deg,#0c4a6e,#082f49);color:#f0f9ff}

/* ---------------------------------------------------------------- widgets */
.widget{--s:1;--wu:calc(var(--u) * var(--s));--w-accent:#f59e0b;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--wu) * 6)}
.widget > *{position:relative}
.widget .deco{position:absolute}
.w-title{font-size:calc(var(--wu) * 6);font-weight:800;line-height:1.1;letter-spacing:-.01em}
.w-sub{font-size:calc(var(--wu) * 3.4);opacity:.8;margin-top:calc(var(--wu) * 2)}
.w-foot{position:absolute;bottom:calc(var(--wu) * 3);left:0;right:0;font-size:calc(var(--wu) * 2.2);opacity:.6}
/* countdown */
.cd-boxes{display:flex;margin-top:calc(var(--wu) * 5)}
.cd-box{background:rgba(255,255,255,.12);border-radius:calc(var(--wu) * 2);padding:calc(var(--wu) * 2.5) calc(var(--wu) * 2);margin:0 calc(var(--wu) * 1.2);min-width:calc(var(--wu) * 17)}
.cd-num{font-size:calc(var(--wu) * 11);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--w-accent)}
.cd-lab{font-size:calc(var(--wu) * 2.6);text-transform:uppercase;letter-spacing:.12em;opacity:.8;margin-top:calc(var(--wu) * 1.2)}
.cd-done{font-size:calc(var(--wu) * 8);font-weight:800;margin-top:calc(var(--wu) * 4);color:var(--w-accent)}
/* clock */
.ck-time{font-size:calc(var(--wu) * 26);font-weight:200;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ck-date{font-size:calc(var(--wu) * 5);opacity:.85;margin-top:calc(var(--wu) * 2)}
.w-clock .w-title{font-size:calc(var(--wu) * 4);opacity:.8;margin-bottom:calc(var(--wu) * 2)}
/* weather */
.wx-now{display:flex;align-items:center;margin-top:calc(var(--wu) * 3)}
.wx-now .wx-ico{width:calc(var(--wu) * 28);height:calc(var(--wu) * 28)}
.wx-temp{text-align:left;margin-left:calc(var(--wu) * 3)}
.wx-deg{font-size:calc(var(--wu) * 20);font-weight:700;line-height:1}
.wx-desc{font-size:calc(var(--wu) * 4.4);opacity:.85}
.wx-days{display:flex;margin-top:calc(var(--wu) * 4)}
.wx-day{background:rgba(255,255,255,.1);border-radius:calc(var(--wu) * 2);padding:calc(var(--wu) * 1.6) calc(var(--wu) * 2.6);margin:0 calc(var(--wu) * 1.2)}
.wx-day .wx-ico{width:calc(var(--wu) * 11);height:calc(var(--wu) * 11);display:block;margin:calc(var(--wu) * .6) auto}
.wx-dname{font-size:calc(var(--wu) * 3.2);font-weight:700}
.wx-range{font-size:calc(var(--wu) * 3);opacity:.9}
/* reviews */
.w-reviews.has-qr{flex-direction:row}
.rv-main{display:flex;flex-direction:column;align-items:center}
.rv-big{display:flex;align-items:center;margin-top:calc(var(--wu) * 3)}
.rv-num{font-size:calc(var(--wu) * 18);font-weight:800;line-height:1;margin-right:calc(var(--wu) * 3)}
.rv-stars{display:flex}
.rv-stars svg{width:calc(var(--wu) * 8);height:calc(var(--wu) * 8);margin-right:calc(var(--wu) * .6)}
.w-reviews .qr-box{position:relative;margin-left:calc(var(--wu) * 7);flex:none}
.w-reviews .qr-box canvas{width:calc(var(--wu) * 24);height:calc(var(--wu) * 24)}
/* football */
.w-football{justify-content:flex-start;padding-top:calc(var(--wu) * 5)}
.w-football .w-title{font-size:calc(var(--wu) * 5);margin-bottom:calc(var(--wu) * 2.5)}
.fb-list{width:100%;max-width:calc(var(--wu) * 150)}
.fb-match{display:flex;align-items:center;font-size:calc(var(--wu) * 3.6);padding:calc(var(--wu) * 1.1) calc(var(--wu) * 1.6);border-radius:calc(var(--wu) * 1.2);margin-bottom:calc(var(--wu) * .6);background:rgba(255,255,255,.07)}
.fb-match.fb-live{background:rgba(239,68,68,.25)}
.fb-when{width:24%;text-align:left;font-size:.75em;opacity:.8}
.fb-home{width:31%;text-align:right;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-score{width:14%;text-align:center;font-weight:800;color:var(--w-accent);font-variant-numeric:tabular-nums}
.fb-away{width:31%;text-align:left;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-row{display:flex;font-size:calc(var(--wu) * 3.2);padding:calc(var(--wu) * .7) calc(var(--wu) * 1.6);border-bottom:1px solid rgba(255,255,255,.1)}
.fb-row span{text-align:right}
.fb-row .c0{width:8%;text-align:left;opacity:.7}.fb-row .c1{flex:1;text-align:left;font-weight:700}.fb-row .c2,.fb-row .c3{width:12%}.fb-row .c4{width:12%;font-weight:800;color:var(--w-accent)}
.fb-th{font-size:calc(var(--wu) * 2.4);opacity:.6;text-transform:uppercase}
.fb-row.fb-mine{background:rgba(255,255,255,.14);border-radius:calc(var(--wu) * 1)}
/* tall, narrow areas: stack the review rating above its QR code */
.w-reviews.has-qr.tall{flex-direction:column}
.w-reviews.has-qr.tall .qr-box{margin:calc(var(--wu) * 4) 0 0}
/* thin banners: everything on one line */
.widget.strip{flex-direction:row;padding:0 calc(var(--wu) * 6)}
.widget.strip > *{margin-top:0;margin-bottom:0}
.widget.strip .w-title{margin-right:calc(var(--wu) * 5)}
.widget.strip .w-sub{margin:0 0 0 calc(var(--wu) * 4)}
.widget.strip .w-foot,.widget.strip .fb-th{display:none}
.widget.strip .cd-boxes,.widget.strip .wx-now,.widget.strip .wx-days,.widget.strip .rv-big{margin-top:0}
.widget.strip .wx-days{margin-left:calc(var(--wu) * 4)}
.widget.strip .ck-date{margin:0 0 0 calc(var(--wu) * 5)}
.widget.strip .rv-main{flex-direction:row;align-items:center}
.widget.strip .rv-big{margin:0 calc(var(--wu) * 3)}
.widget.strip .qr-box{position:relative;padding:calc(var(--wu) * .8)}
.widget.strip .qr-box canvas{width:calc(var(--wu) * 18);height:calc(var(--wu) * 18)}
.widget.strip .qr-label{display:none}
.w-football.strip{justify-content:center;padding-top:0}
.w-football.strip .w-title{margin-bottom:0}
.widget.strip .fb-list{display:flex;width:auto;max-width:none}
.widget.strip .fb-match,.widget.strip .fb-row{width:auto;margin:0 calc(var(--wu) * 1.2) 0 0;border:0;border-radius:calc(var(--wu) * 1.2);background:rgba(255,255,255,.08);white-space:nowrap}
.widget.strip .fb-match span,.widget.strip .fb-row span{width:auto;margin:0 calc(var(--wu) * .8)}
.widget.strip .fb-row .c2,.widget.strip .fb-row .c3{display:none}
.widget.tall .fb-row .c3{display:none}
.widget.tall .fb-row .c2{width:14%}
.widget.tall .fb-row .c4{width:16%}
.widget.tall .fb-when{width:30%}
.widget.tall .fb-home,.widget.tall .fb-away{width:28%}
