/* Freddy's Barcade Club: sign-up sheet, coupon ticket, thermal receipt (v11) */
.club-sheet{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9000;width:min(420px,calc(100vw - 20px));
  background:#1d1418;color:#f6ece2;border:2px solid #E3A21A;border-radius:14px;padding:14px 16px 12px;box-shadow:0 10px 40px rgba(0,0,0,.55);font:15px/1.35 "Source Sans 3",system-ui,sans-serif;animation:clubUp .25s ease-out}
@keyframes clubUp{from{transform:translate(-50%,30px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.club-x{position:absolute;top:4px;right:8px;background:none;border:0;color:#d9c7b5;font-size:26px;line-height:1;cursor:pointer;padding:4px}
.club-h{font:600 19px/1.2 Oswald,sans-serif;letter-spacing:.02em;color:#ffcf5a;margin:0 26px 6px 0}
.club-p{margin:0 0 10px}.club-p.small{font-size:13px;opacity:.85;margin:10px 0}
.club-p a,.club-fine a{color:#ffcf5a}
.club-email{width:100%;box-sizing:border-box;font:16px "Source Sans 3",sans-serif;padding:10px 12px;border-radius:9px;border:1px solid #6b5560;background:#0f0a0c;color:#fff}
.club-ck{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:10px 0;cursor:pointer}.club-ck input{margin-top:3px;width:18px;height:18px;flex:none}
.club-row{display:flex;gap:8px}
.club-go,.club-no{font:600 16px Oswald,sans-serif;letter-spacing:.03em;border-radius:9px;padding:9px 16px;cursor:pointer;border:0}
.club-go{background:#E3A21A;color:#1a1013;flex:1}.club-no{background:transparent;color:#d9c7b5;border:1px solid #6b5560}
.club-msg{min-height:1.2em;font-size:14px;margin-top:8px;color:#ffcf5a}
.club-fine{font-size:11.5px;opacity:.7;margin-top:4px}
.club-overlay{position:fixed;inset:0;z-index:9100;background:rgba(10,6,8,.78);display:flex;align-items:center;justify-content:center;padding:16px}
.club-card{background:#1d1418;color:#f6ece2;border:2px solid #E3A21A;border-radius:16px;padding:16px;width:min(380px,100%);text-align:center;font-family:"Source Sans 3",sans-serif}
.club-card .club-h{margin:0 0 10px}
.club-close{width:100%}
.club-coupon{position:relative;background:#fff7e6;color:#2a1a12;border-radius:10px;padding:14px 12px;border:2px dashed #CB333B;font-family:ui-monospace,"Courier New",monospace}
.club-coupon::before,.club-coupon::after{content:"";position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:#1d1418}
.club-coupon::before{left:-11px}.club-coupon::after{right:-11px}
.cc-top{font:700 13px Oswald,sans-serif;letter-spacing:.18em;color:#CB333B}
.cc-big{font:700 46px/1 Oswald,sans-serif;color:#CB333B;margin-top:4px}.cc-sub{font-size:13px;margin-bottom:8px}
.cc-code{font:700 26px ui-monospace,"Courier New",monospace;letter-spacing:.08em;background:#2a1a12;color:#ffcf5a;border-radius:6px;padding:6px 4px;margin:6px 0 8px;user-select:all}
.cc-line{font-size:13px}.cc-fine{font-size:11px;opacity:.75;margin-top:8px}
/* thermal paper receipt */
.receipt{--paper:#fbfaf5;width:min(300px,92%);margin:0 auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));font:13px/1.35 ui-monospace,"Courier New",Courier,monospace;color:#232323;text-align:left}
.rc-body{background:var(--paper);padding:12px 16px 10px;background-image:linear-gradient(180deg,rgba(0,0,0,.025),rgba(0,0,0,0) 30%,rgba(0,0,0,.03))}
.rc-edge{height:10px;background:var(--paper);-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%}
.rc-edge.top{-webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%;mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%}
.rc-c{text-align:center}.rc-name{font-weight:700;font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.rc-game{font-weight:700;margin-top:4px;text-transform:uppercase}
.rc-rule{border-top:1px dashed #555;margin:7px 0}.rc-rule.thin{border-top-style:dotted}
.rc-row{display:flex;justify-content:space-between;gap:10px}.rc-row span:last-child{text-align:right;white-space:nowrap}
.rc-item span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-total{font-weight:700;font-size:16px}
.rc-foot{font-size:12px;margin-top:2px}
.rc-bars{height:26px;margin:8px auto 0;width:70%;background:repeating-linear-gradient(90deg,#222 0 2px,transparent 2px 3px,#222 3px 4px,transparent 4px 7px,#222 7px 10px,transparent 10px 11px)}
/* How to play: compact button + overlay. Each game sets --ht-bg / --ht-ink / --ht-accent / --ht-font. */
.howto-btn{flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;white-space:nowrap}
.howto-ov{position:fixed;inset:0;z-index:9200;background:rgba(8,5,6,.72);display:flex;align-items:center;justify-content:center;padding:14px;animation:htIn .15s ease-out}
@keyframes htIn{from{opacity:0}to{opacity:1}}
.howto-box{position:relative;width:min(520px,100%);max-height:min(86vh,640px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:var(--ht-bg,#1d1418);color:var(--ht-ink,#f6ece2);border:3px solid var(--ht-accent,#E3A21A);border-radius:14px;padding:16px 18px 14px;
  box-shadow:0 14px 40px rgba(0,0,0,.6);font:15px/1.42 var(--ht-font,"Source Sans 3",system-ui,sans-serif);text-align:left}
.howto-h{margin:0 34px 10px 0;font:700 20px/1.15 var(--ht-head,Oswald,sans-serif);text-transform:uppercase;letter-spacing:.06em;color:var(--ht-accent,#E3A21A)}
.howto-x{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:9px;border:2px solid var(--ht-accent,#E3A21A);background:transparent;color:var(--ht-ink,#fff);font-size:22px;line-height:1;cursor:pointer}
.howto-body ul{margin:0;padding-left:20px}.howto-body li{margin:0 0 7px}.howto-body b{color:var(--ht-accent,#E3A21A)}
.howto-body p{margin:8px 0 0}.howto-body .small{font-size:13px;opacity:.8}

/* receipt-fix: overlays never trap the player on a small phone. Tall content scrolls inside the overlay,
   centring is "safe" (never pushes the top or the buttons off-screen), and action bars stay pinned. */
.club-overlay{align-items:flex-start;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom))}
.club-overlay>*{margin:auto 0}
.club-card .club-close{position:sticky;bottom:0;box-shadow:0 -8px 12px -4px #1d1418}
.club-go,.club-no,.club-x{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.club-sheet{max-height:calc(100% - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box}
.rc-overlay{align-items:center;overflow:hidden}
.rc-overlay .rc-wrap{width:min(340px,100%);max-height:100%;display:flex;flex-direction:column;margin:0}
.rc-overlay .rc-scroll{flex:0 1 auto;min-height:80px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:2px 0 6px}
.club-acts{flex:none;display:flex;gap:8px;margin-top:10px}
.club-acts>*{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box;padding:9px 6px;font-size:15px}

/* tidy: email sign-up printed on the game-over receipt (Perfect Pour, Wonky Ball, Bar Run) */
.club-inline{box-sizing:border-box;margin:10px 0 0;background:#fff7e6;color:#2a1a12;border:2px dashed #CB333B;border-radius:8px;padding:8px 10px 7px;
  font:13px/1.3 "Source Sans 3",system-ui,sans-serif;text-align:left;scroll-margin:10px}
.club-inline[hidden]{display:none}
.club-inline .ci-h{font:700 15px/1.15 Oswald,sans-serif;letter-spacing:.02em;color:#CB333B;margin:0 0 3px}
.club-inline .ci-p{margin:0 0 6px;font-size:12.5px}
.club-inline .ci-row{display:flex;gap:6px;scroll-margin:12px}
.club-inline .club-email{flex:1;min-width:0;height:42px;padding:8px 10px;border:2px solid #2a1a12;background:#fff;color:#1b1b1b;border-radius:6px}
.club-inline .ci-go{flex:none;width:84px;min-height:42px;padding:0 8px;background:#CB333B;color:#fff7e6;border-radius:6px}
.club-inline .ci-ck{margin:6px 0 2px;font-size:12px}
.club-inline .ci-msg{min-height:0;margin:2px 0 0;font-size:13px;color:#a3242c;font-weight:600}
.club-inline .ci-msg:empty{display:none}
.club-inline .ci-fine{font-size:10.5px;opacity:.8;margin-top:3px}
.club-inline a{color:#a3242c}
body .rc-overlay .club-inline{flex:none;margin:8px 0 0}
@media (max-height:700px){.club-inline .ci-p{display:none}}

/* tidy: receipts on a sideways phone: receipt on the left (scrolls inside), signing + email + buttons on the right.
   Only while the phone is physically sideways; upright phones keep the stacked portrait receipt. */
@media (orientation:landscape) and (max-height:500px){
  body #panel .panel-slip{display:grid;grid-template-columns:minmax(0,300px) minmax(0,360px);grid-template-rows:minmax(0,1fr);column-gap:12px;
    width:min(690px,100%);height:100%;max-height:100%;align-items:center;justify-content:center}
  body #panel .panel-final{max-height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;align-self:stretch;display:flex;flex-direction:column}
  body #panel .panel-final .receipt{margin:auto;width:100%}
  body #panel .receipt .rc-edge.bottom{display:block}
  body #panel .panel-sign{max-height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin:0;border-radius:6px;padding:10px 12px;box-sizing:border-box;box-shadow:none}
  body #panel .panel-sign .panel-acts{position:static;margin:8px 0 0;padding:0;box-shadow:none}
  body #panel .panel-sign .club-inline{margin-top:8px}
  body #panel .club-inline .ci-p{display:none}
  /* compact signing column so the save line, email box and every button fit without scrolling */
  body #panel .panel-slip{grid-template-columns:minmax(0,280px) minmax(0,400px);width:min(692px,100%)}
  body #panel .panel-sign{padding:8px 10px}
  body #panel .panel-sign .panel-row input,body #panel .panel-sign .panel-row button{height:36px;min-height:36px}
  body #panel .panel-sign .panel-note{margin-top:2px;font-size:11px;line-height:1.25}
  body #panel .panel-sign .club-inline{margin-top:6px;padding:6px 9px}
  body #panel .club-inline .ci-h{margin-bottom:4px}
  body #panel .club-inline .club-email,body #panel .club-inline .ci-go{height:36px;min-height:36px}
  body #panel .club-inline .ci-ck{margin-top:4px}
  body #panel .club-inline .ci-fine{margin-top:3px}
  body #panel .panel-sign .panel-acts{display:flex;flex-wrap:nowrap;gap:6px;margin-top:6px}
  body #panel .panel-sign .panel-acts button,body #panel .panel-sign .panel-acts .panel-home,body #panel .panel-sign .panel-acts .home-btn{flex:1 1 0;min-width:0;height:36px;min-height:36px;font-size:12px;letter-spacing:.5px;padding:0 4px;white-space:nowrap}
  body .rc-overlay .rc-wrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,340px);grid-template-rows:minmax(0,1fr) auto;column-gap:12px;
    width:min(660px,100%);height:100%;max-height:100%;align-content:center}
  body .rc-overlay .rc-scroll{grid-column:1;grid-row:1/3;max-height:100%;min-height:0;align-self:stretch}
  body .rc-overlay .club-inline{grid-column:2;grid-row:1;align-self:end;margin:0;max-height:100%;overflow-y:auto}
  body .rc-overlay .club-inline .ci-p{display:none}
  body .rc-overlay .club-acts{grid-column:2;grid-row:2}
  body .rc-overlay .rc-wrap:not(:has(.club-inline:not([hidden]))) .club-acts{grid-row:1/3;align-self:center}
}
/* tidy: portrait receipts with the email box: the paper scrolls first, the signing area only if it must (keyboard open) */
body #panel .panel-sign{flex:0 0 auto;max-height:calc(100% - 72px);min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* tidy: on a sideways phone the paper prints tighter so the whole receipt (TOTAL included) fits next to the email box */
@media (orientation:landscape) and (max-height:500px){
  body .rc-overlay .receipt,body #panel .receipt{font-size:11.5px;line-height:1.2}
  body .rc-overlay .rc-body,body #panel .rc-body{padding:8px 12px 7px}
  body .rc-overlay .rc-name,body #panel .rc-name,body .rc-overlay .rc-total,body #panel .rc-total{font-size:13.5px}
  body .rc-overlay .rc-rule,body #panel .rc-rule{margin:4px 0}
  body .rc-overlay .rc-foot,body #panel .rc-foot{font-size:10.5px}
  body .rc-overlay .rc-bars,body #panel .rc-bars{height:16px;margin-top:5px}
  body .rc-overlay .rc-game,body #panel .rc-game{margin-top:2px}
}