/* Gin Rummy page styles (the page's base frame styles stay inline). */
#gr-table,#hand{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.btn{min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn:disabled{opacity:.45;cursor:default}
.btn.alt{background:#e2e8f0;color:#1e293b}
.btn:focus-visible,.card:focus-visible,.gr-stock:focus-visible,.gr-pile:focus-visible,.gr-seg button:focus-visible,.gr-opts select:focus-visible,.gr-opts input:focus-visible,.gr-rules summary:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.gr-howto{text-align:center;font-size:.8rem;color:#64748b;margin:.25rem 0 .5rem;line-height:1.4}
.gr-bar{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin:.25rem 0}
.gr-seg{display:flex;background:#e2e8f0;border-radius:10px;padding:3px;gap:2px}
.gr-seg button{border:0;background:transparent;border-radius:8px;padding:.45rem .6rem;min-height:44px;min-width:44px;font:700 .78rem 'Plus Jakarta Sans',system-ui,sans-serif;color:#475569;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.gr-seg button[aria-pressed="true"]{background:#fff;color:#047857;box-shadow:0 1px 3px #0002;text-decoration:underline;text-underline-offset:3px}
.gr-score{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:.8rem;color:#475569;margin:.4rem 0 .2rem}
.gr-score b{font-size:1.05rem;color:#1e293b}
.gr-meter{position:relative;height:6px;border-radius:9px;background:#e2e8f0;overflow:hidden;margin-bottom:.4rem}
.gr-meter i{position:absolute;top:0;bottom:0;border-radius:9px;transition:width .5s ease}
.gr-meter .mp{left:0;background:#047857}.gr-meter .mb{right:0;background:#94a3b8}
#gr-table{background:radial-gradient(circle at 50% 40%,#1e7a4a,#115c36);border-radius:16px;padding:.55rem .5rem .6rem;color:#e2f5ea;box-shadow:inset 0 2px 10px #0004;position:relative}
.gr-bot{text-align:center;position:relative;min-height:56px}
.gr-bot-label{display:block;font-size:.78rem;font-weight:700;opacity:.92}
.gr-fan{display:flex;justify-content:center;margin-top:4px;height:36px}
.gr-fan .back{width:24px;height:34px;border-radius:4px;margin-left:-11px;border:1.5px solid #fff;background:repeating-linear-gradient(45deg,#b91c1c 0 4px,#991b1b 4px 8px);box-shadow:0 1px 3px #0005}
.gr-fan .back:first-child{margin-left:0}
.gr-say{position:absolute;right:2px;top:0;background:#fff;color:#1e293b;border-radius:10px;padding:.2rem .5rem;font-size:.72rem;font-weight:800;box-shadow:0 2px 6px #0004;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.gr-say.on{opacity:1;transform:none}
.gr-center{display:flex;justify-content:center;align-items:center;gap:.9rem;margin:.5rem 0 .2rem}
.gr-stock,.gr-pile{position:relative;width:64px;height:90px;border-radius:9px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.gr-stock{border:2px solid #fff;background:repeating-linear-gradient(45deg,#b91c1c 0 6px,#991b1b 6px 12px);box-shadow:3px 3px 0 #0b3d24,0 3px 8px #0006;color:#fff}
.gr-stock b{display:block;font:800 1rem 'JetBrains Mono',monospace;text-shadow:0 1px 2px #000}
.gr-stock .pl{position:absolute;left:0;right:0;top:5px;font-size:.62rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 1px 2px #000}
.gr-pile{border:1.5px solid #cbd5e1;background:#fff;color:#1e293b;font-weight:800;box-shadow:0 3px 8px #0006;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gr-pile.red{color:#dc2626}
.gr-pile .ck{position:absolute;left:6px;top:4px;font-size:1rem;line-height:1}
.gr-pile .cs{font-size:2.1rem;line-height:1}
.gr-pile .pl{position:absolute;left:0;right:0;bottom:-17px;color:#e2f5ea;font-size:.62rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.gr-stock:disabled,.gr-pile:disabled{cursor:default;filter:saturate(.6) brightness(.9)}
.gr-stock.hint,.gr-pile.hint{animation:gr-glow 1.2s ease-in-out infinite}
.gr-stock:active:not(:disabled),.gr-pile:active:not(:disabled){transform:scale(.95)}
.gr-act{display:flex;flex-direction:column;gap:6px;min-width:84px}
.gr-act .btn{padding:.5rem .7rem;font-size:.9rem}
.gr-knock.gin{background:#f59e0b;color:#1e293b}
#status{text-align:center;font-weight:700;font-size:.95rem;min-height:2.6em;margin:.45rem 0 .1rem;line-height:1.3}
.gr-handbar{display:flex;justify-content:space-between;align-items:center;gap:.4rem;margin:.2rem 0}
.gr-dw{font-size:.82rem;color:#475569;font-weight:700;line-height:1.2}
.gr-dw b{font:800 1.15rem 'JetBrains Mono',monospace;color:#1e293b}
.gr-dw small{display:block;font-weight:600;font-size:.7rem;color:#64748b}
.gr-seg.small button{padding:.3rem .45rem;font-size:.72rem}
#hand{display:flex;flex-wrap:wrap;gap:12px 3px;justify-content:center;margin:.6rem 0 .4rem;min-height:84px;padding-top:4px}
.card{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:45px;height:66px;border-radius:7px;border:1.5px solid #cbd5e1;background:#fff;color:#1e293b;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;padding:0;box-shadow:0 1px 3px #0002;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .14s,box-shadow .14s,opacity .14s;cursor:default}
.card .ck{position:absolute;left:4px;top:3px;font-size:.85rem;line-height:1}
.card .cs{font-size:1.45rem;line-height:1;margin-top:6px}
.card.red{color:#dc2626}
.card.gap{margin-left:9px}
#hand.active .card{cursor:pointer}
#hand.active .card:active{transform:scale(.94)}
.card.m{border-bottom-width:5px}
.card.g0{border-bottom-color:#047857}.card.g1{border-bottom-color:#2563eb}.card.g2{border-bottom-color:#9333ea}.card.g3{border-bottom-color:#c2410c}
.card .tag{position:absolute;top:-11px;left:2px;font:800 .56rem 'Plus Jakarta Sans',system-ui,sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.04em;background:#1e293b;color:#fff;border-radius:4px;padding:1px 4px;line-height:1.2}
.card .dot{position:absolute;right:4px;top:1px;font-style:normal;color:#047857;font-size:.9rem}
.card.new{box-shadow:0 0 0 3px #f59e0b,0 3px 6px #0003;transform:translateY(-3px)}
.card.locked{background:#f1f5f9}
.card.locked::after{content:'kept';position:absolute;bottom:2px;font-size:.5rem;color:#64748b;text-transform:uppercase}
.card.ok{box-shadow:0 0 0 3px #047857,0 3px 6px #0003;transform:translateY(-3px)}
.card.no{opacity:.4}
.card .knk{position:absolute;right:-6px;top:-9px;min-width:22px;height:20px;padding:0 4px;border-radius:10px;z-index:1;background:#047857;color:#fff;font:800 .66rem/20px 'JetBrains Mono',monospace;font-style:normal;text-align:center}
.gr-opts{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;font-size:.78rem;color:#475569;font-weight:600;margin:.4rem 0}
.gr-opts label{display:flex;align-items:center;gap:.35rem;min-height:44px}
.gr-opts select{min-height:36px;border-radius:8px;border:1px solid #cbd5e1;padding:0 .4rem;font:600 .8rem 'Plus Jakarta Sans',system-ui,sans-serif;background:#fff}
.gr-opts input{width:20px;height:20px;accent-color:#047857}
.gr-rules{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:.2rem .8rem;margin:.4rem 0;font-size:.8rem;color:#334155}
.gr-rules summary{cursor:pointer;font-weight:800;min-height:44px;display:flex;align-items:center}
.gr-rules ul{padding:0 0 .6rem 1rem;line-height:1.45}
.gr-rules li{margin:.25rem 0}
.gr-stats{text-align:center;font-family:'JetBrains Mono',monospace;font-size:.7rem;color:#64748b;margin:.25rem 0 .5rem}
#overlay{position:fixed;inset:0;background:#0f172acc;display:flex;align-items:center;justify-content:center;z-index:60;padding:.75rem}
#overlay[hidden]{display:none}
#overlay .panel{position:relative;background:#fff;border-radius:16px;padding:1rem;text-align:center;max-width:380px;width:100%;max-height:92vh;overflow-y:auto;box-shadow:0 10px 40px #0006}
#overlay h2{font-size:1.3rem;margin-bottom:.5rem}
#overlay .btn{width:100%;font-size:1rem;padding:.75rem 1rem;margin-top:.5rem}
#overlay .btn[hidden]{display:none}
.side{text-align:left;border:1px solid #e2e8f0;border-radius:10px;padding:.45rem .55rem;margin-bottom:.45rem}
.side h3{font-size:.9rem}
.side h3 small{font-weight:600;color:#64748b}
.groups{display:flex;flex-wrap:wrap;gap:.35rem .5rem;margin:.3rem 0}
.grp{display:inline-flex;align-items:flex-end;gap:2px;flex-wrap:wrap}
.grp b{font-size:.6rem;text-transform:uppercase;color:#64748b;margin-left:3px;align-self:center}
.grp.lay b{text-transform:none}
.mini{display:inline-block;min-width:27px;padding:.2rem .15rem;border:1px solid #cbd5e1;border-radius:4px;background:#fff;color:#1e293b;font:800 .72rem 'Plus Jakarta Sans',system-ui,sans-serif;text-align:center}
.mini.red{color:#dc2626}
.mini.laid{border:2px dashed #047857}
.dead{font-size:.72rem;color:#475569;font-weight:600}
.dead .mini{margin-right:2px}
.calc{font-size:.8rem;color:#1e293b;line-height:1.45;margin:.4rem 0;text-align:left}
.ov-score{font:700 .95rem 'JetBrains Mono',monospace;color:#1e293b;margin:.3rem 0}
.final{width:100%;border-collapse:collapse;font-size:.78rem;margin:.4rem 0}
.final th,.final td{border-bottom:1px solid #e2e8f0;padding:.25rem;text-align:right}
.final th:first-child,.final td:first-child{text-align:left}
@keyframes gr-glow{0%,100%{box-shadow:3px 3px 0 #0b3d24,0 0 0 0 #f59e0b}50%{box-shadow:3px 3px 0 #0b3d24,0 0 0 5px #f59e0baa}}
@keyframes pip-pop{0%{transform:scale(.7)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
.pop{animation:pip-pop .3s ease}
@keyframes pip-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.shake{animation:pip-shake .25s ease}
@media (max-width:360px){.card{width:44px}.gr-center{gap:.6rem}}
@media (prefers-reduced-motion:reduce){.pop,.shake,.gr-stock.hint,.gr-pile.hint{animation:none!important}.card,.gr-meter i,.gr-say,.gr-stock,.gr-pile{transition:none!important}}