/* Buzzies readable-text CSS — 2026-09-13
   Main text controls:
   --font-card controls the card/slot font family.
   .card controls buzzword size.
   .slot controls played-card/phrase size.
   The laptop media rule intentionally does NOT override font-size.
*/

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Courier+Prime:wght@400;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --page-bg:#efe6d5;
  --page-paper:#fffdf8;
  --page-ink:#24221d;
  --page-muted:#746d61;
  --page-line:#d9cfbe;
  --teal:#0e626c;
  --teal-deep:#053e46;
  --teal-dark:#07343b;
  --teal-soft:#2c7d83;
  --stone:#e7e9e2;
  --stone-light:#f7f7f1;
  --stone-edge:#91a5a2;
  --ink-teal:#073d4b;
  --cream-text:#f1f8f5;
  --gold:#d2ad4f;
  --cat-a:#cf6d66;
  --cat-a-line:#a8534e;
  --cat-a-soft:rgba(207,109,102,.24);
  --cat-b:#4d9ab0;
  --cat-b-line:#2f7286;
  --cat-b-soft:rgba(77,154,176,.24);
  --cat-c:#d3a545;
  --cat-c-line:#9f7830;
  --cat-c-soft:rgba(211,165,69,.25);
  --cat-d:#a482bc;
  --cat-d-line:#7f6195;
  --cat-d-soft:rgba(164,130,188,.24);
  --shadow:0 7px 20px rgba(7,41,44,.24);
  --font-display:'Archivo Black','Inter',sans-serif;
  --font-body:'Inter',Arial,sans-serif;
  --font-card:'Courier Prime','Courier New',monospace;
  --font-data:'IBM Plex Mono','Courier New',monospace;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;}
body{
  background:var(--page-bg);
  color:var(--page-ink);
  font-family:var(--font-body);
}
body.dark{--page-bg:#171713;--page-paper:#26231f;--page-ink:#f2eee5;--page-muted:#c2baad;--page-line:#504b42;}
a{color:#126c83;text-decoration:none}
a:hover{text-decoration:underline}
button,input{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}

#dim-overlay{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:1000;transition:opacity .15s linear}

/* -------------------------- surrounding website -------------------------- */
.site-shell{
  width:min(1360px,calc(100% - 16px));
  margin:6px auto 10px;
  display:grid;
  grid-template-columns:205px minmax(0,1fr);
  gap:9px;
  align-items:start;
}
.site-sidebar{
  background:rgba(255,253,248,.68);
  border:1px solid var(--page-line);
  border-radius:11px;
  padding:10px;
  box-shadow:0 7px 22px rgba(57,45,30,.08);
  position:sticky;
  top:6px;
}
body.dark .site-sidebar{background:rgba(37,35,31,.85)}
.profile-block{text-align:center}
.profile-photo{width:76px;height:76px;object-fit:cover;margin:0 auto 6px;border:1px solid var(--page-line);background:var(--page-paper)}
.profile-name{font-family:Georgia,serif;font-style:italic;font-weight:700;color:#8d771c;font-size:.88rem;line-height:1.18}
.profile-contact{font-size:.64rem;font-weight:600;line-height:1.4;margin-top:5px;color:var(--page-ink)}
.site-controls{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:8px 0 10px}
.utility-btn{min-height:42px;padding:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid var(--page-line);border-radius:6px;background:var(--page-paper);color:var(--page-ink);font-size:.58rem;font-weight:700}
.utility-btn img{width:20px;height:20px;object-fit:contain}
.site-nav{display:flex;flex-direction:column;gap:5px;font-size:.66rem;border-top:1px solid var(--page-line);padding-top:9px}
.sidebar-badge{margin:9px 0 7px;padding:6px;text-align:center;background:#75a184;color:#fff;border-radius:5px;font-family:var(--font-display);font-size:.68rem;letter-spacing:.3px}
.sidebar-note{border-top:1px solid var(--page-line);padding-top:7px;margin-top:7px}
.sidebar-note strong{font-family:var(--font-data);font-size:.59rem;letter-spacing:.35px}
.sidebar-note p{margin:3px 0 0;font-size:.58rem;line-height:1.32;color:var(--page-muted)}
.site-copyright{border-top:1px solid var(--page-line);padding-top:7px;margin-top:8px;font-size:.48rem;line-height:1.35;color:var(--page-muted)}

.game-area{min-width:0}
.screen{display:none}
.screen.active{display:block}

/* ------------------------------ marble shell ----------------------------- */
.marble-console{
  position:relative;
  overflow:hidden;
  color:var(--cream-text);
  background-color:var(--teal);
  background-image:
    linear-gradient(110deg,rgba(2,42,47,.26),rgba(255,255,255,.05) 36%,rgba(2,42,47,.15) 72%),
    url('buzzies-marble.png');
  background-size:auto,520px 520px;
  border:2px solid #557f82;
  border-radius:13px;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.11),0 8px 22px rgba(8,43,47,.23);
}

.stone-panel,.stone-bar,.score-block,.round-pill,.goal-pill,.pill-btn,.mode-btn,.card,.slot,.modal-card{
  background-color:var(--stone);
  background-image:
    radial-gradient(circle at 16% 18%,rgba(255,255,255,.82),transparent 18%),
    radial-gradient(circle at 82% 76%,rgba(104,126,120,.12),transparent 25%),
    linear-gradient(145deg,#fafaf4,#e1e5df 67%,#ccd5cf);
  border:1px solid var(--stone-edge);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.82),inset -3px -3px 0 rgba(76,96,91,.14),0 3px 0 rgba(3,48,55,.32);
}

/* ------------------------------- landing -------------------------------- */
#splash-screen{
  min-height:min(590px,calc(100vh - 18px));
  padding:16px;
  display:none;
}
#splash-screen.active{display:flex;align-items:center;justify-content:center}
.splash-grid{width:min(900px,96%);display:grid;grid-template-columns:minmax(0,1fr) 205px;align-items:center;gap:14px}
.splash-card{padding:20px 22px;text-align:center;color:var(--ink-teal);border-radius:10px}
.splash-stamp{font-family:var(--font-display);font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:1px;color:#07606c;text-shadow:0 1px 0 #fff}
.splash-sub{margin:4px 0 11px;font-weight:800;color:#164d56;font-size:1rem}
.quick-play{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:6px 0 13px}
.quick-play span{padding:4px 7px;border-radius:999px;background:#d6e3df;border:1px solid #a5bbb6;font-family:var(--font-data);font-size:.61rem;color:#315d64}
.mode-select{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 auto 10px;max-width:470px}
.mode-btn{min-height:70px;padding:8px 10px;border-radius:7px;color:var(--ink-teal);transition:transform .12s ease,filter .12s ease}
.mode-btn:hover{transform:translateY(-2px);filter:brightness(1.03)}
.mode-btn img{max-height:44px;margin:auto}
.mode-fallback{display:none;flex-direction:column;gap:2px;align-items:center}
.mode-fallback strong{font-family:var(--font-display);font-size:1rem}
.mode-fallback small{font-size:.65rem;color:#567179}
.goal-note,.loading-note{margin:8px 0 0;font-family:var(--font-data);font-size:.64rem;color:#48676d}
.splash-mascot-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:280px}
.splash-mascot{width:190px;max-height:300px;object-fit:contain;filter:drop-shadow(0 7px 5px rgba(0,25,28,.25))}
.mascot-line{position:absolute;right:-8px;top:14px;text-align:center;font-family:'Comic Sans MS','Bradley Hand',cursive;font-weight:700;font-size:.83rem;line-height:1.05;color:#eef9f7;transform:rotate(-4deg);text-shadow:0 1px 2px #063d43}

/* ------------------------------ game board ------------------------------- */
#game-screen{
  min-height:0;
  padding:7px 140px 7px 7px;
  display:none;
}
#game-screen.active{display:flex;flex-direction:column;gap:5px}
.game-header{display:grid;grid-template-columns:minmax(190px,1fr) 66px minmax(175px,auto) 66px;gap:6px;align-items:center;min-height:45px;padding:5px 7px;border-radius:7px;color:var(--ink-teal)}
.game-brand{display:flex;flex-direction:column;min-width:0}
.game-brand strong{font-family:var(--font-display);font-size:1.35rem;color:#075d69;line-height:1}
.game-brand small{font-size:.70rem;color:#527077;margin-top:2px}
.score-block{text-align:center;border-radius:6px;padding:3px 5px;color:var(--ink-teal)}
.score-label{display:block;font-size:.60rem;text-transform:uppercase;letter-spacing:.4px;color:#5d7479}
.score-value{display:block;font-family:var(--font-data);font-size:1.10rem;font-weight:700;line-height:1;margin-top:1px;color:#075e6a}
.game-meta{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
.round-pill,.goal-pill,.pill-btn{border-radius:999px;padding:3px 6px;font-family:var(--font-data);font-size:.65rem;color:var(--ink-teal);white-space:nowrap}
.pill-btn{font-weight:800}

/* Right-side round controls: Bee -> Submit -> Next Round */
.round-side-rail{
  position:absolute;
  right:7px;
  top:54px;
  bottom:26px;
  width:124px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  z-index:3;
  pointer-events:auto;
}

.bee-mascot{
  width:112px;
  max-height:112px;
  object-fit:contain;
  filter:drop-shadow(0 4px 4px rgba(0,28,30,.25));
  pointer-events:none;
}

/* Submit and Next Round deliberately share the same button footprint. */
.round-side-rail .submit-art-btn,
.next-round-btn{
  width:120px;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  min-height:0;
  display:block;
  cursor:pointer;
  pointer-events:auto;
  border-radius:15px;
  transition:transform .12s ease,filter .12s ease,opacity .12s ease;
}

.round-side-rail .submit-art-btn img,
.next-round-btn img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  pointer-events:none;
}

.round-side-rail .submit-art-btn:disabled,
.next-round-btn:disabled{
  cursor:not-allowed;
  opacity:.48;
}

.round-side-rail .submit-art-btn:not(:disabled):hover,
.next-round-btn:not(:disabled):hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
}

.board-panel{position:relative;background:rgba(3,57,64,.72);border:1px solid rgba(203,228,222,.45);border-radius:7px;padding:5px 6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.board-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;min-height:15px}
.board-title{font-family:var(--font-data);font-size:.78rem;text-transform:uppercase;letter-spacing:.35px;font-weight:700;color:#eff9f7}
.board-title-row small,.board-help{font-size:.62rem;color:#cde1dd}
.muted-count{opacity:.82}

/* 12 visible cards: six across, two rows on a normal laptop. */
.hand{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.card{position:relative;min-width:0;min-height:78px;padding:5px 6px 6px;border-radius:5px;color:#0c2830;font-family:var(--font-card);font-weight:700;font-size:.85rem;line-height:1.10;display:flex;flex-direction:column;justify-content:center;text-align:center;cursor:grab;overflow-wrap:anywhere;transition:transform .1s ease,box-shadow .1s ease,border-color .1s ease;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;background-size:100% 12px,auto,auto,auto;background-position:0 100%,0 0,0 0,0 0}
.card:hover,.card.lifted{z-index:10;transform:translateY(-3px);box-shadow:inset 2px 2px 0 rgba(255,255,255,.82),inset -3px -3px 0 rgba(76,96,91,.14),0 7px 10px rgba(0,32,36,.28)}
.card.lifted{outline:2px solid #70c2c6}
.card.selected{outline:2px solid #f0c34d}
.card.discard-selected{outline:3px solid #c84945}
.card.staged-in-pitch{opacity:.55;cursor:not-allowed}
.card.dragging{opacity:.4}
.card .card-cat{position:absolute;left:5px;top:5px;font-family:var(--font-data);font-size:.55rem;text-transform:uppercase;letter-spacing:.25px;color:#fff;max-width:60%;padding:2px 5px;border-radius:999px;border:1px solid rgba(255,255,255,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.card .card-word{padding:17px 10px 9px}
.card .card-pts{position:absolute;right:5px;top:5px;font-family:var(--font-data);font-size:.68rem;color:#075f6c;background:rgba(244,246,240,.92);border-radius:4px;padding:2px 4px;line-height:1;border:1px solid rgba(115,138,135,.34)}
.card[data-cat="A"]{border-color:var(--cat-a-line);background-image:linear-gradient(to bottom,var(--cat-a),var(--cat-a)),radial-gradient(circle at 16% 18%,rgba(255,255,255,.82),transparent 18%),radial-gradient(circle at 82% 76%,rgba(104,126,120,.12),transparent 25%),linear-gradient(145deg,#fafaf4,#e1e5df 67%,#ccd5cf)}
.card[data-cat="B"]{border-color:var(--cat-b-line);background-image:linear-gradient(to bottom,var(--cat-b),var(--cat-b)),radial-gradient(circle at 16% 18%,rgba(255,255,255,.82),transparent 18%),radial-gradient(circle at 82% 76%,rgba(104,126,120,.12),transparent 25%),linear-gradient(145deg,#fafaf4,#e1e5df 67%,#ccd5cf)}
.card[data-cat="C"]{border-color:var(--cat-c-line);background-image:linear-gradient(to bottom,var(--cat-c),var(--cat-c)),radial-gradient(circle at 16% 18%,rgba(255,255,255,.82),transparent 18%),radial-gradient(circle at 82% 76%,rgba(104,126,120,.12),transparent 25%),linear-gradient(145deg,#fafaf4,#e1e5df 67%,#ccd5cf)}
.card[data-cat="D"]{border-color:var(--cat-d-line);background-image:linear-gradient(to bottom,var(--cat-d),var(--cat-d)),radial-gradient(circle at 16% 18%,rgba(255,255,255,.82),transparent 18%),radial-gradient(circle at 82% 76%,rgba(104,126,120,.12),transparent 25%),linear-gradient(145deg,#fafaf4,#e1e5df 67%,#ccd5cf)}
.card[data-cat="A"] .card-cat{background:var(--cat-a)}
.card[data-cat="B"] .card-cat{background:var(--cat-b)}
.card[data-cat="C"] .card-cat{background:var(--cat-c)}
.card[data-cat="D"] .card-cat{background:var(--cat-d)}
.card[data-cat="A"] .card-pts{color:var(--cat-a-line)}
.card[data-cat="B"] .card-pts{color:var(--cat-b-line)}
.card[data-cat="C"] .card-pts{color:var(--cat-c-line)}
.card[data-cat="D"] .card-pts{color:var(--cat-d-line)}

.target-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.slot{position:relative;min-height:54px;border-radius:5px;padding:5px 4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#15343b;font-family:var(--font-card);font-weight:700;font-size:.80rem;overflow-wrap:anywhere;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;background-size:100% 8px,auto,auto,auto;background-position:0 100%,0 0,0 0,0 0}
.slot-cat-label{font-family:var(--font-data);font-size:.52rem;color:#fff;text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px;padding:2px 5px;border-radius:999px;border:1px solid rgba(255,255,255,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.slot.empty{color:#6f878b;opacity:.97}
.slot.staged{outline:2px solid #f0c34d}
.slot.clickable{cursor:pointer}
.slot.drop-target{outline:3px solid #74b680}
.slot.drop-invalid{opacity:.5}
.staged-points{font-family:var(--font-data);font-size:.4rem;color:#846613;margin-top:2px;text-transform:uppercase}
.slot[data-cat="A"]{border-color:var(--cat-a-line);background-image:linear-gradient(to bottom,var(--cat-a),var(--cat-a)),radial-gradient(circle at 16% 18%,rgba(255,255,255,.82),transparent 18%),radial-gradient(circle at 82% 76%,rgba(104,126,120,.12),transparent 25%),linear-gradient(145deg,#fafaf4,#e1e5df 67%,#ccd5cf)}
.slot[data-cat="B"]{border-color:var(--cat-b-line);background-image:linear-gradient(to bottom,var(--cat-b),var(--cat-b)),radial-gradient(circle at 16% 18%,rgba(255,255,255,.82),transparent 18%),radial-gradient(circle at 82% 76%,rgba(104,126,120,.12),transparent 25%),linear-gradient(145deg,#fafaf4,#e1e5df 67%,#ccd5cf)}
.slot[data-cat="C"]{border-color:var(--cat-c-line);background-image:linear-gradient(to bottom,var(--cat-c),var(--cat-c)),radial-gradient(circle at 16% 18%,rgba(255,255,255,.82),transparent 18%),radial-gradient(circle at 82% 76%,rgba(104,126,120,.12),transparent 25%),linear-gradient(145deg,#fafaf4,#e1e5df 67%,#ccd5cf)}
.slot[data-cat="D"]{border-color:var(--cat-d-line);background-image:linear-gradient(to bottom,var(--cat-d),var(--cat-d)),radial-gradient(circle at 16% 18%,rgba(255,255,255,.82),transparent 18%),radial-gradient(circle at 82% 76%,rgba(104,126,120,.12),transparent 25%),linear-gradient(145deg,#fafaf4,#e1e5df 67%,#ccd5cf)}
.slot[data-cat="A"] .slot-cat-label{background:var(--cat-a)}
.slot[data-cat="B"] .slot-cat-label{background:var(--cat-b)}
.slot[data-cat="C"] .slot-cat-label{background:var(--cat-c)}
.slot[data-cat="D"] .slot-cat-label{background:var(--cat-d)}
.slot.empty[data-cat="A"]{box-shadow:inset 0 0 0 9999px var(--cat-a-soft),inset 2px 2px 0 rgba(255,255,255,.82),inset -3px -3px 0 rgba(76,96,91,.14),0 3px 0 rgba(3,48,55,.32)}
.slot.empty[data-cat="B"]{box-shadow:inset 0 0 0 9999px var(--cat-b-soft),inset 2px 2px 0 rgba(255,255,255,.82),inset -3px -3px 0 rgba(76,96,91,.14),0 3px 0 rgba(3,48,55,.32)}
.slot.empty[data-cat="C"]{box-shadow:inset 0 0 0 9999px var(--cat-c-soft),inset 2px 2px 0 rgba(255,255,255,.82),inset -3px -3px 0 rgba(76,96,91,.14),0 3px 0 rgba(3,48,55,.32)}
.slot.empty[data-cat="D"]{box-shadow:inset 0 0 0 9999px var(--cat-d-soft),inset 2px 2px 0 rgba(255,255,255,.82),inset -3px -3px 0 rgba(76,96,91,.14),0 3px 0 rgba(3,48,55,.32)}
.slot.filled[data-cat="A"]{box-shadow:inset 0 0 0 9999px rgba(207,109,102,.34),inset 2px 2px 0 rgba(255,255,255,.82),inset -3px -3px 0 rgba(76,96,91,.14),0 3px 0 rgba(3,48,55,.32)}
.slot.filled[data-cat="B"]{box-shadow:inset 0 0 0 9999px rgba(77,154,176,.34),inset 2px 2px 0 rgba(255,255,255,.82),inset -3px -3px 0 rgba(76,96,91,.14),0 3px 0 rgba(3,48,55,.32)}
.slot.filled[data-cat="C"]{box-shadow:inset 0 0 0 9999px rgba(211,165,69,.36),inset 2px 2px 0 rgba(255,255,255,.82),inset -3px -3px 0 rgba(76,96,91,.14),0 3px 0 rgba(3,48,55,.32)}
.slot.filled[data-cat="D"]{box-shadow:inset 0 0 0 9999px rgba(164,130,188,.34),inset 2px 2px 0 rgba(255,255,255,.82),inset -3px -3px 0 rgba(76,96,91,.14),0 3px 0 rgba(3,48,55,.32)}

.action-row{display:grid;grid-template-columns:150px 180px minmax(0,1fr);gap:6px;align-items:center;min-height:36px}

/* The center control row now contains only the 2-for-1 exchange control. */
.staging-controls{display:flex;align-items:center;justify-content:flex-start;gap:6px;min-height:36px}
.exchange-btn,.submit-btn,.ghost-btn{min-height:31px;border-radius:6px;border:1px solid rgba(36,34,29,.35);font-weight:800;font-size:.63rem}
.exchange-btn{background:#6d9892;color:#fff;border-color:#a7bbb7}
.exchange-btn:hover:not(:disabled){background:#587e79}
.exchange-btn.active-toggle{box-shadow:inset 0 0 0 2px rgba(255,255,255,.38)}
.submit-btn{background:#d94b48;color:#fff}
/* Generic Submit art fallback. The right-side rail rules above take precedence. */
.submit-art-btn{
  border:0;
  background:transparent;
  padding:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}
.submit-art-btn img{width:120px;height:auto;max-height:none;object-fit:contain;pointer-events:none}
.submit-art-btn:disabled{opacity:.48;cursor:not-allowed}
.exchange-btn:disabled,.ghost-btn:disabled{opacity:.42;cursor:not-allowed}
.exchange-status{font-family:var(--font-data);font-size:.62rem;color:#d7e8e5;text-align:left;line-height:1.20}

.opponent-section{background:rgba(3,53,60,.76)}
.opponent-board .slot{min-height:48px}
.turn-banner{padding:4px 7px;border:1px solid rgba(210,232,227,.42);border-radius:5px;background:rgba(2,45,51,.72);color:#edf8f6;text-align:center;font-family:var(--font-data);font-size:.68rem;font-weight:600}
.build-note{position:absolute;left:8px;bottom:2px;font-size:.39rem;color:rgba(222,239,235,.65)}

.speech-bubble{position:absolute;right:0;top:-2px;max-width:360px;padding:5px 7px;border:1px solid #8fa39f;border-radius:6px;background:linear-gradient(145deg,#fafaf4,#dfe4de);color:#17383f;box-shadow:0 4px 13px rgba(0,38,44,.23);z-index:15;font-size:.76rem}
.speech-label{font-family:var(--font-data);font-size:.56rem;color:#0f6872;margin-bottom:1px}
.typing-dots span{display:inline-block;width:4px;height:4px;border-radius:50%;background:#71827e;margin-right:2px}
#stamp-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:20}
.stamp{font-family:var(--font-display);color:#ba3f3b;border:3px double #ba3f3b;padding:4px 10px;background:rgba(255,253,248,.94);transform:rotate(-7deg);animation:stamp-down .5s ease forwards}
@keyframes stamp-down{0%{opacity:0;transform:rotate(-7deg) scale(1.6)}65%{opacity:1;transform:rotate(-7deg) scale(.95)}100%{opacity:1;transform:rotate(-7deg) scale(1)}}

/* -------------------------------- modals --------------------------------- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:18px;z-index:800}
.modal-overlay[hidden]{display:none}
.modal-card{width:min(390px,100%);max-height:86vh;display:flex;flex-direction:column;border-radius:9px;color:#17353b}
.modal-tall{max-height:80vh}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #b6c3bf;padding:11px 13px}
.modal-header h2{font-family:var(--font-display);font-size:.95rem;margin:0;color:#075f6b}
.close-btn{border:0;background:transparent;color:#17353b;font-size:1.3rem;line-height:1}
.modal-body{padding:13px;display:flex;flex-direction:column;gap:11px}
.modal-body.scrollable{overflow:auto}
.slider-row{display:flex;flex-direction:column;gap:5px;font-size:.78rem;font-weight:600}
.slider-row input{width:100%;accent-color:#0e6872}
.ghost-btn{background:#eef1ec;color:#17353b;padding:8px 10px}
.full-width{width:100%}
.playbook-entry{border-left:4px solid #2a8189;padding-left:9px;font-size:.78rem}
.playbook-entry small{color:#5d7479}
.history-entry{border:1px solid #b7c4c0;border-radius:6px;padding:8px;margin-bottom:7px;font-size:.76rem;background:#f2f3ee}
.history-author{font-family:var(--font-data);font-size:.58rem;text-transform:uppercase;margin-bottom:3px}
.history-bonus{color:#b33f3b;font-weight:700;margin-top:3px}
.empty-note{color:#6a7c7d;text-align:center;font-size:.76rem}

/* ---------------------------- laptop tightening --------------------------- */
@media (min-width:1000px) and (max-height:820px){
  .site-shell{margin-top:4px;margin-bottom:4px}
  .site-sidebar{padding:8px}
  .profile-photo{width:66px;height:66px}
  .site-controls{margin:6px 0 8px}.utility-btn{min-height:36px}
  .site-nav{gap:4px;padding-top:7px}.sidebar-note{padding-top:5px;margin-top:5px}.site-copyright{margin-top:5px;padding-top:5px}
  #game-screen{gap:4px;padding-top:5px;padding-bottom:5px}
  .game-header{min-height:39px;padding:4px 6px}
  .card{min-height:70px}
  .slot{min-height:47px}.opponent-board .slot{min-height:43px}
  .action-row{min-height:32px}
  #splash-screen{min-height:calc(100vh - 12px)}
}

/* When the full website column can no longer fit, keep controls readable and allow vertical scroll. */
@media (max-width:1100px){
  .site-shell{grid-template-columns:1fr;width:min(100% - 10px,900px)}
  .site-sidebar{position:static;display:grid;grid-template-columns:70px 1fr auto;gap:8px;align-items:center;padding:7px}
  .profile-block{display:contents}.profile-photo{width:58px;height:58px;margin:0}.profile-copy{text-align:left}.site-controls{margin:0;width:150px}
  .site-nav,.sidebar-badge,.sidebar-note,.site-copyright{display:none}
  #game-screen{padding-right:7px}
  .round-side-rail{position:static;width:100%;height:auto;flex-direction:row;justify-content:center;gap:12px;pointer-events:auto;order:2}
  .bee-mascot{width:112px;max-height:112px}.round-side-rail .submit-art-btn,.next-round-btn{width:120px}
}

@media (max-width:760px){
  .game-header{grid-template-columns:1fr 58px 58px}.game-brand{grid-column:1/-1;align-items:center}.game-meta{grid-column:1/2;justify-content:flex-start}.player-score{grid-column:2}.bot-score{grid-column:3}
  .hand{grid-template-columns:repeat(3,minmax(0,1fr))}
  .target-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .action-row{grid-template-columns:1fr 1fr}.exchange-status{grid-column:1/-1;text-align:center}
  .splash-grid{grid-template-columns:1fr}.splash-mascot-wrap{min-height:180px}.splash-mascot{width:150px}.mascot-line{right:9%;top:8px}
}

@media (max-width:520px){
  .site-sidebar{grid-template-columns:54px 1fr 118px}.profile-photo{width:48px;height:48px}.profile-name{font-size:.76rem}.profile-contact{font-size:.55rem}.site-controls{width:118px}.utility-btn{font-size:.5rem;min-height:35px}.utility-btn img{width:16px;height:16px}
  #splash-screen{padding:8px}.splash-card{padding:14px 10px}.mode-select{grid-template-columns:1fr}.splash-mascot-wrap{display:none}
  #game-screen{padding:5px;gap:4px}.hand{gap:4px}.card{min-height:74px;padding:4px;font-size:.70rem}.card .card-cat{font-size:.45rem}.card .card-pts{font-size:.58rem}
}


/* v7: make the Sales Rep side category tinting more pronounced */
.opponent-section{
  background:rgba(2,49,55,.84);
  border-color:rgba(210,233,227,.52);
}
.opponent-section .board-title,
.opponent-section .board-help,
.opponent-section .board-title-row small{
  color:#f2fbf8;
}
.opponent-board .slot{
  border-width:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78), inset -2px -2px 0 rgba(76,96,91,.12), 0 3px 0 rgba(3,48,55,.34);
}
.opponent-board .slot.empty[data-cat="A"]{box-shadow:inset 0 0 0 9999px rgba(207,109,102,.34), inset 0 1px 0 rgba(255,255,255,.78), inset -2px -2px 0 rgba(76,96,91,.12), 0 3px 0 rgba(3,48,55,.34)}
.opponent-board .slot.empty[data-cat="B"]{box-shadow:inset 0 0 0 9999px rgba(77,154,176,.34), inset 0 1px 0 rgba(255,255,255,.78), inset -2px -2px 0 rgba(76,96,91,.12), 0 3px 0 rgba(3,48,55,.34)}
.opponent-board .slot.empty[data-cat="C"]{box-shadow:inset 0 0 0 9999px rgba(211,165,69,.38), inset 0 1px 0 rgba(255,255,255,.78), inset -2px -2px 0 rgba(76,96,91,.12), 0 3px 0 rgba(3,48,55,.34)}
.opponent-board .slot.empty[data-cat="D"]{box-shadow:inset 0 0 0 9999px rgba(164,130,188,.34), inset 0 1px 0 rgba(255,255,255,.78), inset -2px -2px 0 rgba(76,96,91,.12), 0 3px 0 rgba(3,48,55,.34)}
.opponent-board .slot.filled[data-cat="A"]{box-shadow:inset 0 0 0 9999px rgba(207,109,102,.56), inset 0 1px 0 rgba(255,255,255,.78), inset -2px -2px 0 rgba(76,96,91,.12), 0 3px 0 rgba(3,48,55,.34)}
.opponent-board .slot.filled[data-cat="B"]{box-shadow:inset 0 0 0 9999px rgba(77,154,176,.56), inset 0 1px 0 rgba(255,255,255,.78), inset -2px -2px 0 rgba(76,96,91,.12), 0 3px 0 rgba(3,48,55,.34)}
.opponent-board .slot.filled[data-cat="C"]{box-shadow:inset 0 0 0 9999px rgba(211,165,69,.58), inset 0 1px 0 rgba(255,255,255,.78), inset -2px -2px 0 rgba(76,96,91,.12), 0 3px 0 rgba(3,48,55,.34)}
.opponent-board .slot.filled[data-cat="D"]{box-shadow:inset 0 0 0 9999px rgba(164,130,188,.56), inset 0 1px 0 rgba(255,255,255,.78), inset -2px -2px 0 rgba(76,96,91,.12), 0 3px 0 rgba(3,48,55,.34)}
.opponent-board .slot .slot-cat-label{
  font-weight:700;
}


/* v8 CATEGORY COLOR LOCK
   Deliberately structural: solid borders + pills + soft fills.
   These rules avoid layered-background interactions and are duplicated
   inline in buzzies.html so they survive external CSS caching. */
.card.cat-a,.card[data-cat="A"]{border-top:7px solid #c85f59 !important;border-left:2px solid #a84d48 !important}
.card.cat-b,.card[data-cat="B"]{border-top:7px solid #3f93aa !important;border-left:2px solid #2f7083 !important}
.card.cat-c,.card[data-cat="C"]{border-top:7px solid #d29d32 !important;border-left:2px solid #9c7228 !important}
.card.cat-d,.card[data-cat="D"]{border-top:7px solid #9b74b8 !important;border-left:2px solid #75558f !important}
.card.cat-a .card-cat,.card[data-cat="A"] .card-cat{background:#c85f59 !important;color:#fff !important}
.card.cat-b .card-cat,.card[data-cat="B"] .card-cat{background:#3f93aa !important;color:#fff !important}
.card.cat-c .card-cat,.card[data-cat="C"] .card-cat{background:#d29d32 !important;color:#fff !important}
.card.cat-d .card-cat,.card[data-cat="D"] .card-cat{background:#9b74b8 !important;color:#fff !important}
.card.cat-a .card-pts,.card[data-cat="A"] .card-pts{color:#8e3e3a !important;border-color:#c85f59 !important}
.card.cat-b .card-pts,.card[data-cat="B"] .card-pts{color:#275f70 !important;border-color:#3f93aa !important}
.card.cat-c .card-pts,.card[data-cat="C"] .card-pts{color:#7d581c !important;border-color:#d29d32 !important}
.card.cat-d .card-pts,.card[data-cat="D"] .card-pts{color:#64457d !important;border-color:#9b74b8 !important}

.slot.cat-a,.slot[data-cat="A"]{border-left:8px solid #c85f59 !important;border-top:2px solid #a84d48 !important}
.slot.cat-b,.slot[data-cat="B"]{border-left:8px solid #3f93aa !important;border-top:2px solid #2f7083 !important}
.slot.cat-c,.slot[data-cat="C"]{border-left:8px solid #d29d32 !important;border-top:2px solid #9c7228 !important}
.slot.cat-d,.slot[data-cat="D"]{border-left:8px solid #9b74b8 !important;border-top:2px solid #75558f !important}
.slot.cat-a .slot-cat-label,.slot[data-cat="A"] .slot-cat-label{background:#c85f59 !important;color:#fff !important}
.slot.cat-b .slot-cat-label,.slot[data-cat="B"] .slot-cat-label{background:#3f93aa !important;color:#fff !important}
.slot.cat-c .slot-cat-label,.slot[data-cat="C"] .slot-cat-label{background:#d29d32 !important;color:#fff !important}
.slot.cat-d .slot-cat-label,.slot[data-cat="D"] .slot-cat-label{background:#9b74b8 !important;color:#fff !important}
.slot.empty.cat-a,.slot.empty[data-cat="A"]{background-color:#f4dfdc !important;background-image:none !important}
.slot.empty.cat-b,.slot.empty[data-cat="B"]{background-color:#dcebf0 !important;background-image:none !important}
.slot.empty.cat-c,.slot.empty[data-cat="C"]{background-color:#f3e8cb !important;background-image:none !important}
.slot.empty.cat-d,.slot.empty[data-cat="D"]{background-color:#e9dff0 !important;background-image:none !important}
.slot.filled.cat-a,.slot.filled[data-cat="A"]{background-color:#ecc4c0 !important;background-image:none !important}
.slot.filled.cat-b,.slot.filled[data-cat="B"]{background-color:#c3dfe7 !important;background-image:none !important}
.slot.filled.cat-c,.slot.filled[data-cat="C"]{background-color:#ead7a5 !important;background-image:none !important}
.slot.filled.cat-d,.slot.filled[data-cat="D"]{background-color:#dac6e6 !important;background-image:none !important}
.opponent-board .slot{border-width:2px 1px 1px 8px !important}
.opponent-board .slot.cat-a,.opponent-board .slot[data-cat="A"]{border-left-color:#b9433e !important}
.opponent-board .slot.cat-b,.opponent-board .slot[data-cat="B"]{border-left-color:#247a91 !important}
.opponent-board .slot.cat-c,.opponent-board .slot[data-cat="C"]{border-left-color:#b77f15 !important}
.opponent-board .slot.cat-d,.opponent-board .slot[data-cat="D"]{border-left-color:#80549e !important}