/* Between Trades (/trading/games/): hub + shared game chrome. Sits on top of ../trading.css (fonts, colors, tiles, #foot). */
/* ---------- hub ---------- */
html,body.gh-body{height:100%}
body.gh-body{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
#ghbg{position:fixed;inset:-4%;z-index:0;background:#04060a url(../art/floor-m.webp?v=20261021g1) center/cover no-repeat;opacity:.5;animation:kb 60s ease-in-out infinite alternate}
@media (min-aspect-ratio:1/1){#ghbg{background-image:url(../art/floor.webp?v=20261021g1)}}
#ghsky{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#ghshade{position:fixed;inset:0;z-index:2;pointer-events:none;background:linear-gradient(rgba(3,4,7,.35),rgba(3,4,7,.62) 40%,rgba(3,4,7,.9))}
.gh-body #hud{z-index:8}
.htitle{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8d8a82}
#ghclock{font-variant-numeric:tabular-nums;color:#e6dcc4}
#gh{position:relative;z-index:5;max-width:560px;margin:0 auto;padding:calc(70px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));text-align:center;animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
#gh h1{font-size:clamp(44px,12.5vw,72px)}
#gh .sub{margin:4px 0 16px}
.gtiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 10px}
.gt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:142px;padding:14px 10px 12px;border-radius:18px;border:1px solid rgba(236,232,222,.16);background:rgba(8,10,14,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f4efe5;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .2s,border-color .2s,transform .1s;overflow:hidden}
.gt:hover{background:rgba(24,30,36,.75);border-color:rgba(79,209,139,.4)}.gt:active{transform:scale(.97)}
.gt:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.gt svg{width:62px;height:62px;flex:none}
.gt b{font:500 21px/1.1 var(--serif);letter-spacing:.01em}
.gt small{font-size:12px;line-height:1.3;color:#a9a396;min-height:16px}
.gt .rs{position:absolute;top:9px;right:9px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#03140b;background:var(--g);border-radius:999px;padding:2px 7px 1px;box-shadow:0 0 10px rgba(79,209,139,.5)}
.gt.wide{grid-column:1/-1;flex-direction:row;min-height:66px;gap:14px;justify-content:flex-start;text-align:left;padding:10px 16px}
.gt.wide svg{width:40px;height:40px}.gt.wide span{flex:1}.gt.wide b{display:block;font-size:19px}.gt.wide small{display:block}
.gt.wide i{font-style:normal;color:#9fe6bd}
.gt .ic-a{transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){.gt:hover .ic-a,.gt:focus-visible .ic-a{animation:wig .6s ease-in-out}}
@keyframes wig{30%{transform:rotate(-8deg)}70%{transform:rotate(6deg)}}
.ghnote{font-size:12.5px;color:#8f8a7f;margin:12px 0 0}
#gh .lnks{justify-content:center}
@media (prefers-reduced-motion:reduce){#ghbg{animation:none}}
/* ---------- game pages ---------- */
html,body.gm-body{height:100%;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
body.gm-body{background:#04060a}
#gbg{position:fixed;inset:0;z-index:0;background:radial-gradient(120% 80% at 50% 30%,#0d1a16,#04060a 70%)}
#game{position:fixed;inset:0;width:100%;height:100%;z-index:1;display:block;touch-action:none}
.gm-body #foot{z-index:2;pointer-events:none;font-size:9.5px;color:#6f6b62;background:none}
.bthud{position:fixed;z-index:10;top:calc(6px + env(safe-area-inset-top));left:calc(6px + env(safe-area-inset-left));right:calc(44px + env(safe-area-inset-right));display:flex;align-items:center;gap:8px;height:34px;pointer-events:none;color:#d8d3c6;font-size:12px}
.bthud>*{pointer-events:auto}
.btback{display:flex;align-items:center;gap:2px;height:34px;padding:0 10px 0 4px;border-radius:999px;color:#e9e3d6;text-decoration:none;background:rgba(8,10,14,.55);border:1px solid rgba(236,232,222,.14);font-size:12.5px;letter-spacing:.04em;-webkit-tap-highlight-color:transparent}
.btback svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.btback:focus-visible{outline:2px solid var(--g)}
.bttitle{font:500 17px/1 var(--serif);letter-spacing:.08em;color:#f0ebe0;white-space:nowrap}
.btstat{flex:1;min-width:0;text-align:center;font-variant-numeric:tabular-nums;font-size:12px;line-height:1.25;color:#cfc8b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btstat b{color:#fff;font-weight:600}.btstat i{font-style:normal;color:#8d8a82}
.btbtns{display:flex;gap:4px}
.btbtn{appearance:none;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid rgba(236,232,222,.14);background:rgba(8,10,14,.55);color:#e9e3d6;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btbtn svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.btbtn[data-btsnd][aria-pressed="true"]{color:var(--g);border-color:rgba(79,209,139,.45)}
.btbtn:focus-visible{outline:2px solid var(--g)}
.btover{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(2,3,5,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.btover[hidden]{display:none}
.btcard{width:min(360px,100%);max-height:calc(100dvh - 40px);overflow:auto;text-align:center;padding:22px 20px 18px;border-radius:20px;background:rgba(10,13,17,.94);border:1px solid rgba(236,232,222,.16);box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 0 1px rgba(79,209,139,.08);animation:btin .22s cubic-bezier(.2,.9,.3,1)}
@keyframes btin{from{opacity:0;transform:translateY(8px) scale(.98)}}
.btcard h2{font:500 32px/1.1 var(--serif);margin:0 0 8px;color:#f4efe5}
.btbody{font-size:14.5px;color:#cfc8b8;margin:0 0 14px}.btbody p{margin:0 0 8px}
.btbody .big{display:block;font:500 46px/1 var(--serif);color:#fff;margin:4px 0 6px;font-variant-numeric:tabular-nums}
.btbody .nb{display:inline-block;margin:2px 0 8px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g)}
.btq{font:italic 18px/1.35 var(--serif);color:#cfc6b4;margin:0 0 14px}
.btcol{display:flex;flex-direction:column;gap:8px}
.btb{display:block;min-height:46px;padding:12px 16px;border-radius:999px;border:1px solid rgba(236,232,222,.25);background:rgba(255,255,255,.04);color:#f4efe5;font:500 15px var(--sans);letter-spacing:.02em;cursor:pointer;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btb:hover,.btb:focus-visible{background:rgba(255,255,255,.09);outline:none;border-color:rgba(236,232,222,.45)}
.btb1{border-color:rgba(79,209,139,.7);background:rgba(20,60,40,.55)}
.btb1:hover,.btb1:focus-visible{background:rgba(28,84,56,.7);border-color:var(--g)}
.btbl{color:#bdb7aa}
.bthelp{font-size:12.5px;line-height:1.45;color:#8f8a7f;margin:14px 0 0}
.bttoast{position:fixed;z-index:15;left:50%;top:calc(50px + env(safe-area-inset-top));transform:translate(-50%,-6px);max-width:calc(100% - 30px);padding:7px 15px;border-radius:999px;background:rgba(10,12,16,.88);border:1px solid rgba(236,232,222,.18);font:600 13.5px/1.3 var(--sans);color:#f4efe5;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.bttoast.on{opacity:1;transform:translate(-50%,0)}
.btseg{display:flex;justify-content:center;gap:6px;margin:0 0 12px}
.btseg button{appearance:none;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(236,232,222,.2);background:transparent;color:#bdb7aa;font:500 13.5px var(--sans);cursor:pointer;touch-action:manipulation}
.btseg button[aria-pressed="true"]{border-color:var(--g);color:#fff;background:rgba(30,90,60,.5)}
.gm-cta{position:fixed;z-index:6;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translateX(-50%);font-size:12.5px;letter-spacing:.04em;color:#cfc8b8;background:rgba(8,10,14,.6);border:1px solid rgba(236,232,222,.12);border-radius:999px;padding:6px 14px;pointer-events:none;white-space:nowrap;transition:opacity .4s}
.gm-cta.off{opacity:0}
@media (max-width:430px){.bthud .bttitle{display:none}}