html,body{margin:0;background:#D9361A}#high-five-phone{border-radius:0;min-height:100dvh}

#high-five-phone{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
#high-five-phone{margin:0;font-size:14px}
#high-five-phone img{max-width:100%}
#high-five-phone [hidden]{display:none!important}
#high-five-phone{
  --ember:#D9361A; --flame:#F2701D; --sun:#FFB627; --char:#5E1606;
  --paper:#FFF4E6; --paper-2:#FBE3C8; --ink:#2B0E06; --muted:#7D4A35;
  --good:#1F8A4C; --bad:#C2271A; --warn:#D98A0B;
  --f-script:"Yellowtail", "Brush Script MT", cursive;
  --f-display:"Anton", "Impact", "Arial Narrow", sans-serif;
  --f-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
#high-five-phone [hidden]{display:none!important}
#high-five-phone,#high-five-phone{min-height:100%}
#high-five-phone{
  margin:0; font-family:var(--f-body); color:var(--paper); font-size:15px;
  background:var(--ember);
  background-image:
    radial-gradient(60% 40% at 15% 10%, rgba(255,182,39,.55), transparent 70%),
    radial-gradient(50% 45% at 90% 30%, rgba(242,112,29,.7), transparent 70%),
    radial-gradient(70% 50% at 40% 100%, rgba(94,22,6,.55), transparent 70%);
  background-attachment:fixed;
}
#high-five-phone .wrap{max-width:460px; margin:0 auto; padding:16px; padding-block:14px 40px; display:flex; flex-direction:column; gap:14px}
#high-five-phone button{font:inherit; cursor:pointer}
#high-five-phone button:focus-visible,#high-five-phone input:focus-visible{outline:3px solid var(--sun); outline-offset:2px}
#high-five-phone .switch{display:flex; background:rgba(43,14,6,.28); border-radius:999px; padding:4px; gap:4px; align-self:center}
#high-five-phone .switch button{border:0; background:transparent; color:var(--paper); padding:7px 20px; border-radius:999px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:12px}
#high-five-phone .switch button[aria-pressed="true"]{background:var(--paper); color:var(--ember)}
#high-five-phone .logo{text-align:center; line-height:.8; padding-block:4px 2px; user-select:none}
#high-five-phone .logo .l{font-family:var(--f-script); font-size:44px; color:var(--paper); display:block; transform:rotate(-6deg) translateX(-84px); margin-bottom:6px}
#high-five-phone .logo .r{font-family:var(--f-display); font-size:64px; letter-spacing:.02em; color:transparent; -webkit-text-stroke:2px var(--paper)}
#high-five-phone .logo .n{font-family:var(--f-script); font-size:26px; color:var(--sun); margin:0 4px}
#high-five-phone .logo .o{font-family:var(--f-display); font-size:64px; color:var(--paper)}
#high-five-phone .logo .l{transform:rotate(-6deg) translateX(-62px)}
#high-five-phone .logo .five{display:inline-grid; place-items:center; width:62px; height:62px; margin-left:8px; vertical-align:12%; border-radius:14px; background:var(--sun); color:var(--char); font-family:var(--f-display); font-size:52px; line-height:1; box-shadow:0 4px 0 var(--char); transform:rotate(6deg)}
#high-five-phone .tag{text-align:center; font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase; opacity:.9}
#high-five-phone .hfCard{background:var(--paper); color:var(--ink); border-radius:14px; padding:18px; box-shadow:0 10px 30px rgba(60,10,0,.35), inset 0 0 0 1px rgba(94,22,6,.08); display:flex; flex-direction:column; gap:12px}
#high-five-phone .hfCard h2{font-family:var(--f-display); font-weight:400; font-size:26px; line-height:1.05; margin:0; text-wrap:balance; letter-spacing:.01em}
#high-five-phone .hfCard h3{margin:0; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ember)}
#high-five-phone .eyebrow{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ember)}
#high-five-phone .crit{font-size:13px; color:var(--muted)}
#high-five-phone .muted{color:var(--muted); font-size:13px}
#high-five-phone p{margin:0; line-height:1.45}
#high-five-phone .hfButton{border:0; border-radius:12px; padding:13px 16px; font-weight:800; font-size:16px; background:var(--ember); color:var(--paper); box-shadow:0 3px 0 var(--char)}
#high-five-phone .hfButton:active{transform:translateY(2px); box-shadow:0 1px 0 var(--char)}
#high-five-phone .hfButton.alt{background:var(--paper-2); color:var(--ink); box-shadow:0 3px 0 #D9B48F}
#high-five-phone .hfButton.big{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:16px 18px}
#high-five-phone .hfButton.big small{font-weight:600; font-size:13px; opacity:.85}
#high-five-phone .hfButton:disabled{opacity:.45; cursor:default}
#high-five-phone .row{display:flex; gap:8px; flex-wrap:wrap}
#high-five-phone .row > *{flex:1 1 0; min-width:0}
#high-five-phone .timer{height:8px; background:var(--paper-2); border-radius:8px; overflow:hidden}
#high-five-phone .timer i{display:block; height:100%; background:linear-gradient(90deg,var(--sun),var(--ember)); width:100%; transition:width 1s linear}
#high-five-phone .guessbar{display:flex; gap:8px}
#high-five-phone .guessbar input{flex:1; min-width:0; font:inherit; font-size:16px; padding:12px; border-radius:10px; border:2px solid var(--paper-2); background:#fff; color:var(--ink)}
#high-five-phone .slots{display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none}
#high-five-phone .slots li{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 12px; border-radius:10px; background:var(--paper-2); font-weight:600; min-height:20px}
#high-five-phone .slots li.empty{background:transparent; border:2px dashed #E7C7A5; color:#B98C70; font-weight:400}
#high-five-phone .verdict{font-size:12px; font-weight:800; letter-spacing:.08em; padding:3px 8px; border-radius:999px; color:#fff}
#high-five-phone .verdict.y{background:var(--good)}
#high-five-phone .verdict.n{background:var(--bad)}
#high-five-phone .rank{display:flex; flex-direction:column; gap:8px}
#high-five-phone .rank button{display:flex; align-items:center; gap:12px; text-align:left; border:2px solid var(--paper-2); background:#fff; color:var(--ink); padding:11px 12px; border-radius:12px; font-weight:600; font-size:15px}
#high-five-phone .rank button .num{width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--paper-2); color:var(--muted); font-family:var(--f-display); font-size:16px}
#high-five-phone .rank button.set{border-color:var(--ember)}
#high-five-phone .rank button.set .num{background:var(--ember); color:#fff}
#high-five-phone .reveal{display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none; counter-reset:r}
#high-five-phone .reveal li{display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:var(--paper-2)}
#high-five-phone .reveal li b{font-family:var(--f-display); font-weight:400; font-size:18px; color:var(--ember)}
#high-five-phone .reveal li .st{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
#high-five-phone .reveal li.hit{box-shadow:inset 3px 0 0 var(--good)}
#high-five-phone .reveal li .nm{min-width:0}
#high-five-phone .reveal li .crowd{grid-column:2 / -1; font-size:12px; color:var(--muted); margin-top:-4px}
#high-five-phone .reveal li.down{background:var(--char); color:var(--paper)}
#high-five-phone .reveal li.down b{color:var(--sun)}
#high-five-phone .reveal li.drum{animation:drum .5s ease-in-out infinite alternate}
#high-five-phone .reveal li.flip{animation:flip .4s ease-out}
#high-five-phone .reveal li.ok{background:#DDF2E3; box-shadow:inset 0 0 0 2px var(--good)}
#high-five-phone .reveal li.near{background:#FFF0D2; box-shadow:inset 0 0 0 2px var(--warn)}
#high-five-phone .reveal li.miss{background:#FBE3DF; box-shadow:inset 0 0 0 2px var(--bad)}
#high-five-phone .reveal li .nm{font-weight:800}
#high-five-phone .reveal li .badge{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:17px; font-weight:900; color:#fff}
#high-five-phone .reveal li.ok .badge{background:var(--good)}
#high-five-phone .reveal li.near .badge{background:var(--warn)}
#high-five-phone .reveal li.miss .badge{background:var(--bad)}
#high-five-phone .legend{display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; font-size:12px; color:var(--muted)}
#high-five-phone .legend span{display:inline-flex; align-items:center; gap:5px}
#high-five-phone .legend i{width:16px; height:16px; border-radius:50%; display:inline-grid; place-items:center; color:#fff; font-style:normal; font-size:10px; font-weight:900}
@keyframes flip{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
@keyframes drum{from{transform:scale(1)}to{transform:scale(1.03)}}
#high-five-phone .vsgrid{display:grid; grid-template-columns:28px minmax(0,1fr) minmax(0,1fr); gap:6px 10px; align-items:center; font-size:14px}
#high-five-phone .vsgrid .h{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
#high-five-phone .vsgrid b{font-family:var(--f-display); font-weight:400; color:var(--ember); font-size:18px}
#high-five-phone .intro{font-size:16px; line-height:1.5; text-align:center; text-wrap:pretty; margin:-6px 0 0}
#high-five-phone .lead{background:var(--paper-2); border-radius:12px; padding:12px 14px; font-weight:800; font-size:16px; text-align:center; text-wrap:balance}
#high-five-phone .lead span{display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ember); margin-bottom:3px}
#high-five-phone .theme{font-family:var(--f-display); font-size:34px; line-height:1.05; text-align:center; padding-block:10px; text-wrap:balance}
#high-five-phone .nearmiss{text-align:center; font-weight:800; color:var(--ember); margin-top:-4px}
#high-five-phone .linkish{border:0; background:none; color:var(--muted); font-weight:600; text-decoration:underline; padding:4px; align-self:center}
#high-five-phone .after{display:flex; flex-direction:column; gap:12px}
#high-five-phone .tierbox{display:flex; align-items:baseline; justify-content:center; gap:6px; flex-wrap:wrap}
#high-five-phone .tierbox .big{font-family:var(--f-display); font-size:60px; line-height:1; color:var(--ember); font-variant-numeric:tabular-nums}
#high-five-phone .tierbox .of{font-family:var(--f-display); font-size:24px; color:var(--muted)}
#high-five-phone .tierbox b{font-family:var(--f-script); font-weight:400; font-size:32px; color:var(--char); flex-basis:100%; text-align:center; line-height:1}
#high-five-phone .hfCard .score .nm{color:var(--ink)}
#high-five-phone .hfCard .stack i{background:var(--paper-2); border-color:#E0B990; width:18px; height:26px}
#high-five-phone .hfCard .stack i.won{background:var(--ember); border-color:var(--ember)}
#high-five-phone .history{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
#high-five-phone .history li{display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:8px 10px; background:var(--paper-2); border-radius:10px; font-size:14px; font-variant-numeric:tabular-nums}
#high-five-phone .history .tagr{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ember)}
#high-five-phone .statline{text-align:center; font-size:13px; font-weight:600; margin:0; opacity:.9}
#high-five-phone .fact{background:var(--ink); color:var(--paper); padding:12px 14px; border-radius:10px; font-size:14px}
#high-five-phone .fact b{color:var(--sun); font-size:11px; letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:3px}
#high-five-phone .score{display:flex; justify-content:space-between; align-items:center; gap:10px}
#high-five-phone .player{display:flex; flex-direction:column; gap:4px; align-items:flex-start}
#high-five-phone .player.r{align-items:flex-end}
#high-five-phone .player .nm{font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase}
#high-five-phone .stack{display:flex; gap:3px}
#high-five-phone .stack i{width:14px; height:20px; border-radius:3px; background:rgba(255,244,230,.25); border:1px solid rgba(255,244,230,.5)}
#high-five-phone .stack i.won{background:var(--paper); border-color:var(--paper)}
#high-five-phone .vs{font-family:var(--f-script); font-size:26px; color:var(--sun)}
#high-five-phone .banner{font-family:var(--f-display); font-size:22px; text-align:center; padding:10px; border-radius:10px; letter-spacing:.02em}
#high-five-phone .banner.win{background:var(--good); color:#fff}
#high-five-phone .banner.lose{background:var(--char); color:var(--paper)}
#high-five-phone .share{white-space:pre; font-family:ui-monospace, Menlo, monospace; font-size:13px; background:var(--paper-2); padding:10px; border-radius:10px; overflow-x:auto}
#high-five-phone .pillrow{display:flex; gap:6px; flex-wrap:wrap}
#high-five-phone .pill{background:var(--paper-2); color:var(--ink); border:0; padding:8px 14px; border-radius:999px; font-weight:800}
#high-five-phone .plan h2{font-size:30px}
#high-five-phone .plan h3{margin-top:4px}
#high-five-phone .plan ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; line-height:1.45}
#high-five-phone .tiers{display:grid; grid-template-columns:1fr 1fr; gap:8px}
#high-five-phone .tier{background:var(--paper-2); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:4px; min-width:0}
#high-five-phone .tier .price{font-family:var(--f-display); font-size:24px; color:var(--ember)}
#high-five-phone .tier.pro{background:var(--ink); color:var(--paper)}
#high-five-phone .tier.pro .price{color:var(--sun)}
#high-five-phone .stage{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start}
#high-five-phone .stage .k{font-family:var(--f-display); font-size:20px; color:var(--ember); width:26px}
#high-five-phone .gslots{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
#high-five-phone .gslots li{display:grid; grid-template-columns:34px 1fr; align-items:center; gap:10px; min-height:42px; padding:0 10px; border-radius:10px; border:2px dashed #E7C7A5; background:transparent; touch-action:none; user-select:none; -webkit-user-select:none}
#high-five-phone .gslots li b{font-family:var(--f-display); font-weight:400; font-size:20px; color:var(--ember)}
#high-five-phone .gslots li span{font-weight:700; min-width:0}
#high-five-phone .gslots li.empty span{font-weight:400; color:#B98C70; font-size:13px}
#high-five-phone .gslots li.full{border-style:solid; border-color:var(--ember); background:#fff; cursor:grab}
#high-five-phone .gslots li.over{background:var(--paper-2); border-color:var(--flame)}
#high-five-phone .gslots li.ok{border:2px solid var(--good); background:#E6F4EA}
#high-five-phone .gslots li.near{border:2px solid var(--warn); background:#FFF1D6}
#high-five-phone .gslots li.miss{border:2px solid var(--bad); background:#FBE4E1}
#high-five-phone .gslots li .tagr{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase}
#high-five-phone .gslots li.result{grid-template-columns:34px 1fr auto}
#high-five-phone.compact .logo,#high-five-phone.compact .tag{display:none}
#high-five-phone .ggrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
#high-five-phone .tile{border:0; border-radius:10px; background:var(--paper-2); color:var(--ink); font-weight:700; font-size:13px; line-height:1.15; padding:6px; min-height:50px; display:grid; place-items:center; text-align:center; box-shadow:0 2px 0 #D9B48F; touch-action:none; user-select:none; -webkit-user-select:none; overflow-wrap:anywhere}
#high-five-phone .tile.used{opacity:.3; box-shadow:none}
#high-five-phone .tile.sel{background:var(--ember); color:#fff; box-shadow:0 2px 0 var(--char)}
#high-five-phone .tile.dim{opacity:.35; box-shadow:none}
#high-five-phone .tile.hit{background:var(--good); color:#fff; box-shadow:none; animation:pop .3s ease-out}
#high-five-phone .tile.wrong{background:var(--bad); color:#fff; box-shadow:none; animation:pop .3s ease-out}
#high-five-phone .tile.missed{background:#FFF0D2; box-shadow:inset 0 0 0 2px var(--warn); animation:pop .3s ease-out}
#high-five-phone .tile.hit::before{content:"✓ "}
#high-five-phone .tile.wrong::before{content:"✗ "}
#high-five-phone .tile.missed::before{content:"★ "}
#high-five-phone #fm:not([hidden]){display:flex; flex-direction:column; gap:8px}
#high-five-phone #fm .tierbox{margin:0}
#high-five-phone .ggrid.few{grid-template-columns:repeat(2,minmax(0,1fr))}
#high-five-phone .ggrid.few .tile{min-height:56px; font-size:14px}
#high-five-phone .ghost{position:fixed; z-index:50; pointer-events:none; transform:translate(-50%,-50%) rotate(-3deg); box-shadow:0 10px 24px rgba(60,10,0,.35); background:#fff; width:120px}
@media (max-width:380px){#high-five-phone .tiers{grid-template-columns:1fr}
#high-five-phone .logo .r,#high-five-phone .logo .o{font-size:54px}
#high-five-phone .logo .five{width:54px; height:54px; font-size:44px}
}
@media (prefers-reduced-motion:reduce){#high-five-phone .rolling,#high-five-phone .reveal li.drum,#high-five-phone .reveal li.flip{animation:none}
#high-five-phone .timer i{transition:none}
}
#high-five-phone .teaser{text-align:center;font-weight:600;margin:12px 0 4px;color:var(--ember)}
#high-five-phone .minirow{display:flex; justify-content:center; gap:18px; margin-top:-4px}
#high-five-phone .minirow .linkish{color:#fff; opacity:.92}
#high-five-phone .rewards{display:flex; flex-wrap:wrap; justify-content:center; gap:6px}
#high-five-phone .rewards span{background:var(--paper-2); box-shadow:inset 0 0 0 2px var(--sun); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:800; animation:pop .4s ease-out both}
#high-five-phone .rewards span:nth-child(2){animation-delay:.12s}
#high-five-phone .rewards span:nth-child(3){animation-delay:.24s}
#high-five-phone .rewards span:nth-child(n+4){animation-delay:.36s}
@keyframes pop{from{transform:scale(.6); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion: reduce){#high-five-phone .rewards span{animation:none}
}
#high-five-phone .kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; text-align:center}
#high-five-phone .kpis b{display:block; font-family:var(--f-display); font-size:30px; color:var(--ember); line-height:1.1}
#high-five-phone .kpis span{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
#high-five-phone .dist{display:flex; flex-direction:column; gap:6px}
#high-five-phone .dist div{display:grid; grid-template-columns:110px 1fr 24px; gap:8px; align-items:center; font-size:13px; font-weight:600}
#high-five-phone .dist i{display:block; height:16px; border-radius:4px; background:var(--flame)}
#high-five-phone .dist b{text-align:right; font-variant-numeric:tabular-nums}
#high-five-phone .badges{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px}
#high-five-phone .bdg{display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 6px; border-radius:10px; background:var(--paper-2); font-size:12px; font-weight:700; text-align:center; opacity:.4; filter:grayscale(1)}
#high-five-phone .bdg.on{opacity:1; filter:none; box-shadow:inset 0 0 0 2px var(--sun)}
#high-five-phone .bdg span{font-size:24px}
#high-five-phone .howto{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; text-align:center; font-size:12px; font-weight:700}
#high-five-phone .howto b{display:grid; place-items:center; width:26px; height:26px; margin:0 auto 4px; border-radius:50%; background:var(--ember); color:#fff; font-size:13px}

#high-five-phone {position:relative; border-radius:16px; overflow:hidden; line-height:normal; text-align:left}
#high-five-phone *, #high-five-phone *::before, #high-five-phone *::after {box-sizing:border-box}
#high-five-phone .wrap {width:100%}
#high-five-phone button {min-height:44px}
#high-five-phone .gslots li button {border:0; background:transparent; color:inherit; text-align:left; padding:0; width:100%; min-height:32px}
#high-five-phone .ghost {position:absolute}
#high-five-phone .share {overflow-wrap:anywhere}
#high-five-phone textarea {width:100%; min-height:100px; font:inherit}

#high-five-phone{border-radius:0}
/* Beta leaderboard and player question submission */
.beta-shell{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,460px) minmax(275px,350px);align-items:start;justify-content:center;gap:24px;padding:16px}
.beta-shell #high-five-phone{min-width:0}
.beta-side{position:sticky;top:16px;color:#2B0E06;font-family:Figtree,system-ui,sans-serif;display:grid;gap:12px}
.beta-panel{background:#FFF4E6;border-radius:14px;padding:18px;box-shadow:0 6px 20px #5e160630}
.beta-panel h2{font:26px Anton,Impact,sans-serif;margin:0 0 10px;color:#D9361A}
.beta-panel label{font-size:13px;font-weight:700;display:block;margin:8px 0 4px}
.beta-panel input,.beta-panel textarea{width:100%;font:inherit;font-size:15px;padding:9px;border:1px solid #dcbca1;border-radius:8px;box-sizing:border-box}
.beta-panel button{background:#D9361A;color:white;font:inherit;font-weight:800;border:0;border-radius:9px;padding:10px;cursor:pointer}
.beta-panel button:focus-visible{outline:3px solid #FFB627}
.beta-inline{display:flex;gap:6px}.beta-inline input{min-width:0;flex:1}.beta-ranks{list-style:decimal;padding-left:27px;margin:12px 0}.beta-ranks li{padding:5px 0}.beta-ranks li strong{float:right}
.beta-meta{font-size:12px;opacity:.7}.beta-me{font-weight:800;color:#D9361A}.beta-hint{font-size:12px;opacity:.8;line-height:1.4}.beta-credit{font-size:12px;margin:8px 0;color:#7D4A35;font-style:italic}
#player-profile{font-size:14px}#player-profile button{font-size:12px;margin-left:8px;padding:6px}.beta-panel textarea{min-height:100px}
#beta-message{min-height:18px;font-size:13px}
@media(max-width:800px){.beta-shell{display:flex;flex-direction:column;padding:0;gap:0}.beta-shell #high-five-phone{width:100%}.beta-side{position:static;width:100%;padding:16px;box-sizing:border-box}}

/* Daily email subscription panel */
.beta-panel .beta-consent{display:flex;align-items:flex-start;gap:10px;font-weight:500;line-height:1.4;margin:12px 0}
.beta-panel .beta-consent input{width:auto;flex:none;margin:3px 0 0}
#email-status{font-size:13px;min-height:18px;color:#146d3d}

/* Center the daily game and supporting panels on desktop. */
@media(min-width:801px){.beta-shell{max-width:700px;display:flex;flex-direction:column;align-items:stretch;gap:16px}.beta-shell #high-five-phone{width:100%}.beta-shell #high-five-phone .wrap{max-width:600px}.beta-side{position:static;width:100%;max-width:600px;margin:0 auto;box-sizing:border-box}.beta-panel h2{text-align:center}}
.beta-ranks{max-width:420px;margin:12px auto;padding-left:30px}.beta-ranks li{clear:both;padding:7px 0;border-bottom:1px solid #e5c8b1}.beta-ranks li strong{float:right;font-variant-numeric:tabular-nums}

/* Optional actions stay available without dominating the daily game. */
.beta-panel details summary{font-family:Figtree,system-ui,sans-serif;font-weight:800;color:#D9361A;cursor:pointer;padding:2px 0;text-align:center;list-style:none}
.beta-panel details summary::-webkit-details-marker{display:none}
.beta-panel details summary::after{content:" +";font-size:1.2em}
.beta-panel details[open] summary::after{content:" −"}
.beta-panel details[open] summary{margin-bottom:14px}
.beta-panel details summary:focus-visible{outline:3px solid #FFB627;outline-offset:3px;border-radius:4px}


/* Free archive calendar — visible after optional free membership signup */
#archive-panel .archive-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0}
#archive-panel .archive-nav button{width:38px;min-height:38px;border-radius:9px;border:1px solid #e2c0a9;background:#fff4e6;color:#542719;font-size:24px;cursor:pointer}
#archive-panel .archive-nav button:disabled{opacity:.35;cursor:default}
#archive-panel .archive-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
#archive-panel .archive-grid>*{display:grid;place-items:center;min-width:0;min-height:34px;font:inherit}
#archive-panel .archive-weekday{font-weight:800;font-size:12px}
#archive-panel .archive-day{border:1px solid #e6b58d;border-radius:7px;background:#fff4e6;color:#50220f;font-weight:800;cursor:pointer;touch-action:manipulation}
#archive-panel .archive-day:hover,#archive-panel .archive-day:focus-visible{background:#ffb627;color:#2b0e06;outline:2px solid #f2701d}
#archive-panel .archive-no-day{opacity:.35;font-size:12px}
#archive-panel #archive-join{min-height:40px;padding:8px 12px;border-radius:9px;border:0;background:#ffb627;color:#2b0e06;font-weight:800;cursor:pointer}
#archive-panel #archive-join:disabled{opacity:.5}
@media(max-width:360px){#archive-panel .archive-grid{gap:2px}#archive-panel .archive-grid>*{min-height:30px}}