/* Go Fish — page styles. Base frame styles stay inline in index.html. */
#gf-table,#gf-hand,.gf-seats{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:.5;cursor:default}
.btn:focus-visible,.gf-seg button:focus-visible,.gf-seat:focus-visible,.gf-group:focus-visible,.gf-rules summary:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.gf-howto{text-align:center;font-size:.8rem;color:#64748b;margin:.25rem 0 .5rem;line-height:1.4}
.gf-bar{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin:.25rem 0}
.gf-seg{display:flex;background:#e2e8f0;border-radius:10px;padding:3px;gap:2px}
.gf-seg button{border:0;background:transparent;border-radius:8px;padding:.3rem .5rem;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}
.gf-seg button[aria-pressed="true"]{background:#fff;color:#0E7490;box-shadow:0 1px 3px #0002;text-decoration:underline;text-underline-offset:3px}
#gf-bots button{min-width:44px}
#gf-bots::before{content:'🤖';align-self:center;padding:0 2px 0 4px;font-size:.85rem}
.gf-foot{display:flex;justify-content:center;margin:.6rem 0 0}.gf-new{padding:.55rem 1.4rem}
.gf-note{min-height:0;text-align:center;font-size:.75rem;color:#0E7490;font-weight:700}
.gf-note:empty{display:none}

/* The table: a pond-blue felt with the bot seats on top. */
#gf-table{position:relative;margin-top:.4rem;background:radial-gradient(circle at 50% 35%,#1a7f99,#0b4f63 75%);border-radius:16px;padding:.5rem .45rem .5rem;color:#e6f7fb;box-shadow:inset 0 2px 10px #0005}
.gf-seats{display:grid;grid-template-columns:repeat(var(--n,2),1fr);gap:.4rem;padding-top:1.4rem}
.gf-seats[data-count="1"]{--n:1}.gf-seats[data-count="2"]{--n:2}.gf-seats[data-count="3"]{--n:3}
.gf-seats[data-count="1"] .gf-seat{max-width:220px;justify-self:center;width:100%}
.gf-seat{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;min-height:44px;padding:.35rem .25rem .3rem;border-radius:12px;border:2px solid #ffffff33;background:#ffffff14;color:#e6f7fb;font-family:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:border-color .15s,background .15s,transform .15s}
.gf-seat:disabled{cursor:default}
.gf-seat.turn{border-color:#fbbf24;background:#fbbf2422;box-shadow:0 0 0 2px #fbbf2455}
.gf-seat.target{border-color:#fff;border-style:dashed;background:#ffffff2e;animation:gf-beckon 1.3s ease-in-out infinite}
.gf-seat.target::after{content:'Tap to ask';position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);background:#fff;color:#0b4f63;font-size:.6rem;font-weight:800;border-radius:99px;padding:1px 6px;white-space:nowrap}
.gf-who{display:flex;align-items:center;justify-content:center;gap:4px;max-width:100%}.gf-face{font-size:1.35rem;line-height:1.1}
.gf-name{font-weight:800;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gf-cards{font-family:'JetBrains Mono',monospace;font-size:.68rem;opacity:.9}
.gf-fan{display:flex;justify-content:center;height:22px;margin:2px 0}
.gf-fan .back{width:15px;height:21px;border-radius:3px;margin-left:-8px;border:1px solid #fff;background:repeating-linear-gradient(45deg,#0E7490 0 3px,#155e75 3px 6px);box-shadow:0 1px 2px #0005}
.gf-fan .back:first-child{margin-left:0}
.gf-fan .none{font-style:normal;opacity:.6;font-size:.8rem}
.gf-seat-books{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.66rem;font-weight:700}
.gf-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:100%}
.gf-book{display:inline-block;min-width:17px;padding:0 3px;height:17px;line-height:15px;border-radius:4px;background:#fff;color:#0b4f63;border:1px solid #fbbf24;font:800 .62rem 'JetBrains Mono',monospace;box-shadow:1px 1px 0 #fbbf24,2px 2px 0 #fff}
.gf-tag{font-size:.62rem;font-weight:800;color:#fde68a;min-height:.8rem}
.gf-say{position:absolute;left:50%;top:-1.35rem;transform:translate(-50%,4px);background:#fff;color:#1e293b;border-radius:10px;padding:.15rem .45rem;font-size:.7rem;font-weight:800;box-shadow:0 2px 6px #0004;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap;z-index:3;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.gf-say::after{content:'';position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:#fff}
.gf-say.on{opacity:1;transform:translate(-50%,0)}
.gf-seats[data-count="3"] .gf-seat:first-child .gf-say{left:0;transform:translate(0,4px)}
.gf-seats[data-count="3"] .gf-seat:first-child .gf-say.on{transform:none}
.gf-seats[data-count="3"] .gf-seat:first-child .gf-say::after{left:24px}
.gf-seats[data-count="3"] .gf-seat:last-child .gf-say{left:auto;right:0;transform:translate(0,4px)}
.gf-seats[data-count="3"] .gf-seat:last-child .gf-say.on{transform:none}
.gf-seats[data-count="3"] .gf-seat:last-child .gf-say::after{left:auto;right:18px}

.gf-mid{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:.6rem 0 .3rem}
.gf-pond{display:flex;align-items:center;gap:.45rem}
.gf-pond-cards{position:relative;width:40px;height:52px}
.gf-pond-cards i{position:absolute;width:34px;height:48px;border-radius:5px;border:1.5px solid #fff;background:repeating-linear-gradient(45deg,#0E7490 0 4px,#155e75 4px 8px);box-shadow:0 2px 4px #0006}
.gf-pond-cards i:nth-child(1){left:0;top:4px;transform:rotate(-8deg)}
.gf-pond-cards i:nth-child(2){left:3px;top:2px;transform:rotate(4deg)}
.gf-pond-cards i:nth-child(3){left:6px;top:0}
.gf-pond.empty .gf-pond-cards i{opacity:.2}
.gf-pond-label{font-size:.72rem;font-weight:700;line-height:1.2}
.gf-pond-label b{display:block;font:800 1.1rem 'JetBrains Mono',monospace}
.gf-turn{background:#0b3b4a;border:2px solid #ffffff44;border-radius:99px;padding:.35rem .8rem;font-weight:800;font-size:.85rem}
.gf-turn.mine{background:#fbbf24;border-color:#fff;color:#1e293b}
.gf-turn.mine::before{content:'▶ '}
.gf-log{list-style:none;margin:0;padding:.3rem .45rem;background:#00000026;border-radius:10px;font-size:.72rem;line-height:1.35;min-height:2.9em}
.gf-log li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.62}
.gf-log li:first-child{opacity:1;font-weight:700}
.gf-log li.hit::before{content:'✓ ';color:#86efac}
.gf-log li.miss::before{content:'🎣 '}
.gf-log li.book::before{content:'📚 '}

#status{text-align:center;font-weight:700;font-size:.88rem;min-height:2.5em;margin:.45rem 0 .1rem;line-height:1.35;color:#0f172a}

/* Your area */
.gf-me{position:relative;border-radius:14px;border:2px solid #e2e8f0;background:#fff;padding:.45rem .4rem .5rem;transition:border-color .15s}
.gf-me.turn{border-color:#0E7490;box-shadow:0 0 0 3px #0E749022}
.gf-me .gf-say{top:-1.1rem;left:50%}
.gf-me-head{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.8rem}
.gf-me-books{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:#475569}
.gf-shelf{display:flex;flex-wrap:wrap;gap:3px}
#gf-hand{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:.45rem 0 .2rem;min-height:84px}
.gf-group{position:relative;display:flex;flex-direction:column;align-items:center;min-width:48px;min-height:84px;padding:3px 2px 2px;border-radius:10px;border:2px solid transparent;background:transparent;cursor:pointer;font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .14s,border-color .14s,background .14s}
.gf-group:disabled{cursor:default}
.gf-group:disabled .gf-stack{filter:saturate(.7);opacity:.8}
.gf-group[aria-pressed="true"]{border-color:#0E7490;background:#0E749014;transform:translateY(-5px)}
.gf-group[aria-pressed="true"] .gf-count{background:#0E7490;color:#fff}
.gf-group.new .gf-stack{animation:gf-new .6s ease}
.gf-group:active:not(:disabled){transform:scale(.95)}
.gf-stack{position:relative;display:block;height:62px}
.gf-group .gf-stack{width:40px}
.gf-card{position:absolute;top:0;left:calc(var(--k) * 11px);width:40px;height:60px;border-radius:6px;border:1.5px solid #cbd5e1;background:#fff;color:#1e293b;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 1px 3px #0003;font-weight:800}
.gf-card b{position:absolute;left:4px;top:2px;font-size:.78rem;line-height:1}
.gf-card i{font-style:normal;font-size:1.3rem;line-height:1;margin-top:8px}
.gf-card.red{color:#dc2626}
.gf-group .gf-stack:has(.gf-card:nth-child(2)){width:51px}
.gf-group .gf-stack:has(.gf-card:nth-child(3)){width:62px}
.gf-count{margin-top:2px;font:800 .7rem 'JetBrains Mono',monospace;color:#334155;background:#e2e8f0;border-radius:99px;padding:0 6px;line-height:1.4}
#gf-hand.many .gf-group{min-width:44px}
#gf-hand.many .gf-card{width:34px;height:52px}
#gf-hand.many .gf-card i{font-size:1.1rem}
#gf-hand.many .gf-stack{height:54px}
#gf-hand.many .gf-card{left:calc(var(--k) * 8px)}
#gf-hand.many .gf-group .gf-stack{width:34px}
#gf-hand.many .gf-group .gf-stack:has(.gf-card:nth-child(2)){width:42px}
#gf-hand.many .gf-group .gf-stack:has(.gf-card:nth-child(3)){width:50px}
.gf-empty{font-size:.8rem;color:#64748b;align-self:center}
.gf-ask{min-height:2.2em;text-align:center}
.gf-hint{font-size:.8rem;font-weight:700;color:#334155;margin:.15rem 0 .3rem}
.gf-ask-row{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.gf-ask-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.5rem .8rem;font-size:.85rem}
.gf-ask-face{font-size:1.1rem}
.gf-stats{text-align:center;font-family:'JetBrains Mono',monospace;font-size:.68rem;color:#64748b;margin:.5rem 0 .4rem}
.gf-rules{margin:.4rem 0 .6rem;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:.1rem .8rem;font-size:.8rem;color:#334155}
.gf-rules summary{cursor:pointer;font-weight:800;min-height:44px;display:flex;align-items:center}
.gf-rules ul{margin:0 0 .6rem 1rem;line-height:1.45}
.gf-rules li{margin:.15rem 0}

/* Flying cards + toasts */
.gf-fly{position:fixed;z-index:50;width:42px;height:60px;border-radius:6px;border:1.5px solid #fff;background:repeating-linear-gradient(45deg,#0E7490 0 4px,#155e75 4px 8px);box-shadow:0 4px 10px #0006;pointer-events:none;display:flex;align-items:center;justify-content:center;font-weight:800;color:#1e293b}
.gf-fly.face{background:#fff;border-color:#cbd5e1}
.gf-fly.red{color:#dc2626}
.gf-fly b{position:absolute;left:4px;top:2px;font-size:.78rem}
.gf-fly i{font-style:normal;font-size:1.3rem;margin-top:8px}
.gf-toast{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);background:#fbbf24;color:#1e293b;font-weight:800;border-radius:99px;padding:.3rem .8rem;font-size:.85rem;pointer-events:none;animation:gf-toast 1.2s ease forwards;white-space:nowrap;z-index:4;box-shadow:0 3px 10px #0005}
@keyframes gf-toast{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%)}}
@keyframes gf-beckon{0%,100%{transform:none}50%{transform:translateY(-2px)}}
@keyframes gf-new{0%{transform:translateY(-8px)}60%{transform:translateY(2px)}100%{transform:none}}
@keyframes pip-pop{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.pop{animation:pip-pop .35s ease}

#overlay{position:fixed;inset:0;background:#0f172acc;display:flex;align-items:center;justify-content:center;z-index:60;padding:1rem;overflow:hidden}
#overlay[hidden]{display:none}
#overlay .panel{position:relative;background:#fff;border-radius:16px;padding:1.5rem;text-align:center;max-width:330px;width:100%;box-shadow:0 10px 40px #0006}
#overlay h2{font-size:1.6rem;margin-bottom:.5rem}
#overlay p{color:#64748b;margin-bottom:.75rem;font-family:'JetBrains Mono',monospace;font-size:.82rem;line-height:1.45}
#overlay .ov-score{font-size:1.05rem;color:#1e293b;font-weight:700}
#overlay .btn{width:100%;font-size:1.05rem;padding:.85rem 1.2rem}
#overlay .btn.alt{background:#e2e8f0;color:#1e293b;margin-top:.5rem}
.gf-confetti{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;animation:gf-fall 1.6s linear forwards}
@keyframes gf-fall{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}
@media (max-width:360px){.gf-seg button{padding:.3rem .35rem;min-width:44px}.gf-name{font-size:.75rem}}
@media (prefers-reduced-motion:reduce){.pop,.gf-seat.target,.gf-group.new .gf-stack,.gf-toast,.gf-confetti{animation:none!important}.gf-seat,.gf-group,.gf-say,.gf-me{transition:none!important}.gf-confetti{display:none}}