*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:-apple-system,"Segoe UI",Roboto,sans-serif;color:#3b3355;background:linear-gradient(160deg,#f7f0ff,#eef6ff 55%,#fff0f7);-webkit-user-select:none;user-select:none;overscroll-behavior:none}
header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px}.logo{height:46px}
#roomTag{font-weight:700;color:#7a6b95}
.screen{max-width:900px;margin:0 auto;padding:6px 12px 20px}.hidden{display:none!important}
.panel{background:#fff;border-radius:22px;box-shadow:0 8px 30px #7a6b9522;padding:22px;max-width:440px;margin:18px auto;text-align:center}
h1{margin:.2em 0;font-size:1.7em}.sub{color:#6b6280;margin-top:0}
label{display:block;text-align:left;font-weight:600;margin:12px 0 6px}
input,select{width:100%;font-size:18px;padding:12px;border:2px solid #e3d9f5;border-radius:12px;margin-top:4px;background:#fff}
.btn{width:100%;font-size:18px;font-weight:700;padding:14px;border:0;border-radius:14px;background:#7eb8ff;color:#fff;margin-top:12px;cursor:pointer}
.btn.alt{background:#ff9ec8}.btn.small{width:auto;font-size:15px;padding:10px 14px;margin:0}
.or{margin:14px 0 0;color:#a99cc2}.share{display:flex;gap:8px;align-items:center}.share input{margin:0;font-size:14px}
#codeBig{letter-spacing:4px;color:#7eb8ff}#plist{list-style:none;padding:0}#plist li{padding:8px;border-radius:10px;background:#f7f0ff;margin:6px 0;font-weight:600}
#opps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.opp{background:#fff;border-radius:14px;padding:6px 12px;box-shadow:0 3px 12px #7a6b9522;font-weight:600}.opp b{color:#ff6fae;font-size:1.2em}.opp.me{outline:2px solid #7eb8ff}.opp.off{opacity:.5}
#table{display:flex;justify-content:center;align-items:center;gap:22px;margin:12px 0 6px}
#drawPile{position:relative;text-align:center;font-weight:700;color:#7a6b95}
.back{width:64px;height:100px;border-radius:10px;background:repeating-linear-gradient(45deg,#7eb8ff,#7eb8ff 6px,#a9d0ff 6px,#a9d0ff 12px);border:4px solid #fff;box-shadow:0 4px 14px #0002}
#center{text-align:center;border-radius:18px;padding:6px;transition:.15s}
#center img{height:min(36vh,300px);border-radius:14px;box-shadow:0 8px 26px #3b335533;display:block}
#center.hot{background:#ff9ec855;transform:scale(1.04)}
#centerName{font-weight:700;margin-top:4px}
.why{text-align:center;min-height:1.4em;color:#5a3f8a;font-weight:600}
.controls{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:6px 0}
#timer{width:90px;height:8px;background:#e3d9f5;border-radius:9px;overflow:hidden}#timer div{height:100%;background:#ff9ec8;width:0}
#hand{display:flex;gap:8px;overflow-x:auto;padding:10px 4px 14px;touch-action:pan-x;-webkit-overflow-scrolling:touch}
.card{flex:0 0 auto;width:92px;touch-action:pan-x;position:relative;transition:transform .15s}
.card img{width:100%;border-radius:9px;box-shadow:0 3px 10px #3b335533;display:block;pointer-events:none}
.card.sel{transform:translateY(-12px)}.card.sel img{outline:3px solid #ff9ec8}.card.hint img{outline:4px solid #ffd54a}
.card.drag{position:fixed;z-index:50;pointer-events:none;transform:rotate(-4deg) scale(1.1)}.card.ghost{opacity:.3}
.card.shake{animation:sh .4s}@keyframes sh{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.help{text-align:center;font-size:14px}
#over{position:fixed;inset:0;background:#3b335555;display:flex;align-items:center;justify-content:center;z-index:60}
#toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{background:#fff;padding:10px 16px;border-radius:14px;box-shadow:0 6px 20px #3b335533;font-weight:600;animation:fi .2s;max-width:90vw;text-align:center}
.toast.bad{background:#fff0f7;color:#c2185b}@keyframes fi{from{opacity:0;transform:translateY(-8px)}}
@media (min-width:700px){.card{width:118px}}

.hdr{display:flex;gap:10px;align-items:center}.btn.alt2{background:#fff;color:#7a6b95;box-shadow:0 2px 8px #7a6b9533}
.pile{text-align:center;font-weight:700;color:#7a6b95;display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:14px;padding:6px;transition:.2s}
.pile img,.pile .back{width:70px;height:100px;object-fit:cover;border-radius:10px;border:3px solid #fff;box-shadow:0 4px 14px #0002}
.pile small{font-size:12px}.pile.glow{background:#fff;box-shadow:0 0 0 4px #ffd54a,0 0 26px #ffd54a;cursor:pointer;animation:pulse 1s infinite alternate}
@keyframes pulse{to{transform:scale(1.07)}}
.riddle{height:min(44vh,400px);aspect-ratio:3/4;border-radius:14px;box-shadow:0 8px 26px #3b335533;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:14px;font-family:Papyrus,"Herculanum","Palatino Linotype",Palatino,serif;color:#222;text-align:center}
.riddle p{margin:0;font-size:clamp(10px,1.55vh,14px);line-height:1.35;overflow:auto}
#riddleQ{font-size:clamp(16px,2.6vh,24px);margin-top:10px}.q-pink{color:#ff9ec8}.q-blue{color:#7eb8ff}.q-purple{color:#9a5bd1}
#riddleAns{margin-top:6px;font-weight:700;font-family:-apple-system,sans-serif;color:#c2185b;font-size:15px}
.banner{text-align:center;font-weight:700;font-size:17px;color:#fff;background:#ff9ec8;border-radius:14px;padding:8px 12px;margin:4px auto;max-width:560px}

/* --- video chat strip --- */
#vchat{max-width:900px;margin:0 auto;padding:4px 12px 0}
.vbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.vbtn{font-size:15px;font-weight:700;padding:8px 14px;border:2px solid #e3d9f5;border-radius:999px;background:#fff;color:#7a6b95;cursor:pointer;box-shadow:0 2px 8px #7a6b9522}
.vbtn.on{background:#7eb8ff;border-color:#7eb8ff;color:#fff}.vbtn.ghostb{box-shadow:none;background:transparent;border-color:transparent}
#vtiles{display:flex;gap:8px;overflow-x:auto;padding:8px 2px;justify-content:center;-webkit-overflow-scrolling:touch}
.vtile{position:relative;flex:0 0 auto;width:132px;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#f7f0ff,#e8f2ff);box-shadow:0 3px 12px #7a6b9533}
.vtile.me{outline:2px solid #7eb8ff}
.vtile video{width:100%;height:100%;object-fit:cover;display:block}.vtile.me video{transform:scaleX(-1)}
.vtile .avatar{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;background:#ff9ec8;color:#fff;font-weight:800;font-size:22px;display:none;align-items:center;justify-content:center}
.vtile.nocam video{visibility:hidden}.vtile.nocam .avatar{display:flex}
.vlabel{position:absolute;left:4px;right:4px;bottom:4px;background:#ffffffdd;border-radius:8px;font-size:12px;font-weight:700;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#3b3355}
.vhint{text-align:center;font-size:13px;color:#8a7fa3;margin:0 0 4px}
#vchat.collapsed #vtiles,#vchat.collapsed .vhint{display:none}
@media (max-width:600px){.vtile{width:92px}.vtile .avatar{width:40px;height:40px;font-size:16px}.vbtn{font-size:13px;padding:6px 10px}#vtiles{justify-content:flex-start}}
@media (min-width:900px){.vtile{width:170px}}

/* official card backs, natural aspect ratio */
.pile img.cardback{height:104px;width:auto;object-fit:contain;border-radius:8px;border:1px solid #e3d9f5;background:#fff;box-shadow:0 4px 14px #3b335522}
.opp{display:inline-flex;align-items:center;gap:5px}.minib{height:26px;width:auto;border-radius:3px;border:1px solid #e3d9f5;box-shadow:0 1px 4px #3b335522;vertical-align:middle}
@media (max-width:500px){#table{gap:8px}#center img{height:min(30vh,250px)}.pile img.cardback{height:84px}}

/* ===== Landscape-only layout ===== */
#rotate{display:none}
@media (orientation:portrait){
  #rotate{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;background:linear-gradient(160deg,#fff0f7,#eef6ff 55%,#f7f0ff);color:#3b3355}
  #rotate h2{font-size:26px;margin:22px 0 8px}#rotate p{color:#6b6280;max-width:320px;margin:0 0 16px}#rotate .btn{max-width:260px}
  .rot-icon{position:relative;width:130px;height:130px}
  .rot-icon .phone{position:absolute;left:40px;top:10px;width:50px;height:90px;border:5px solid #7eb8ff;border-radius:12px;background:#fff;animation:rot 2.2s ease-in-out infinite}
  .rot-icon .phone span{position:absolute;left:50%;bottom:5px;width:10px;height:4px;margin-left:-5px;border-radius:2px;background:#ff9ec8}
  .rot-icon .arrow{position:absolute;right:0;top:0;font-size:40px;color:#ff9ec8;font-weight:800}
  @keyframes rot{0%,20%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
}
@media (orientation:landscape){
  html,body{height:100%;overflow:hidden}
  body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);height:100dvh}
  header{grid-column:1/-1;padding:4px 12px}.logo{height:34px}
  .screen{grid-column:1;grid-row:2;max-width:none;width:100%;margin:0;padding:0 10px 6px;min-height:0}
  #lobby{overflow:auto}#lobby .panel{margin:6px auto;padding:14px 20px}
  #game{display:flex;flex-direction:column;min-height:0;height:100%}
  #opps{flex:0 0 auto;gap:6px}.opp{padding:3px 10px;font-size:14px}
  #table{flex:1 1 0;min-height:0;margin:4px 0;gap:3vw;align-items:stretch;position:relative}
  .pile{justify-content:center}
  #center{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;min-height:0;padding:3px}
  #center img{height:100%;width:auto;max-height:100%;min-height:0}
  .riddle{height:100%;max-height:100%;min-height:0}
  .banner{position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:5;margin:0;max-width:70%;font-size:15px;box-shadow:0 4px 14px #3b335533}
  #banner{position:relative;top:auto;left:auto;transform:none}
  .why{min-height:1.2em;font-size:14px}.controls{margin:2px 0}
  #hand{flex:0 0 auto;padding:6px 4px 4px}
  .help{display:none}
  /* video: side column */
  #vchat{grid-column:2;grid-row:2;display:flex;flex-direction:column;width:clamp(110px,15vw,210px);padding:0 8px 6px 0;margin:0;min-height:0}
  #vchat.hidden{display:none}
  #vchat.collapsed{width:auto}
  .vbar{flex-direction:column;align-items:stretch;gap:5px}.vbtn{font-size:13px;padding:6px 8px}
  #vtiles{flex-direction:column;overflow-y:auto;overflow-x:hidden;justify-content:flex-start;padding:6px 0;min-height:0}
  .vtile{width:100%}
  .vhint{font-size:11px}
}
@media (orientation:landscape) and (max-height:500px){
  header{padding:2px 10px}.logo{height:26px}#roomTag{font-size:13px}.hdr .btn.small{padding:4px 8px;font-size:13px}
  .card{width:62px}.pile img.cardback{height:70px}.pile{padding:2px;font-size:12px}.pile small{display:none}
  #centerName{font-size:13px;margin-top:2px}.btn.small{font-size:13px;padding:5px 10px}
  .opp{padding:2px 8px;font-size:12px}.minib{height:18px}
  #vchat{width:112px}.vtile .avatar{width:34px;height:34px;font-size:14px}.vlabel{font-size:10px}.vhint{display:none}
  .why{font-size:12px}
}
@media (orientation:landscape) and (min-height:501px){ .card{width:clamp(80px,8.5vw,112px)} }
@media (orientation:landscape) and (max-height:500px){#vchat{width:120px}.vbar{gap:3px}.vbtn{font-size:11px;padding:3px 4px;white-space:nowrap}.vtile{aspect-ratio:4/3;flex:0 0 auto}#vtiles{gap:5px;padding:4px 0}}

/* big piles: fill table height like the center card */
@media (orientation:landscape){
  #table .pile{align-self:stretch;display:grid;grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;align-items:end;gap:1px;min-height:0;padding:4px 6px}
  #table .pile img.cardback{height:88%;width:auto;max-height:100%;min-height:0;align-self:center}
  #table .pile span,#table .pile small{line-height:1.15;white-space:nowrap}
  #table .pile small{display:block;font-size:12px}
}
@media (orientation:landscape) and (max-height:500px){#table .pile span{font-size:12px}#table .pile small{font-size:10px}#table{gap:2vw}}
@media (orientation:landscape){#table .pile img.cardback{height:100%;width:auto;aspect-ratio:3/4;max-width:24vw;object-fit:contain;justify-self:center}#table #factsPile img.cardback{aspect-ratio:360/497}#table .pile{grid-template-rows:minmax(0,1fr) auto auto;padding-top:5%}}
@media (orientation:landscape){#table .pile img.cardback{max-width:none;height:min(100%,24vw);width:auto}#table #factsPile img.cardback{height:min(100%,22vw)}#table .pile{align-items:center}}
@media (orientation:landscape){#table .pile img.cardback,#table #factsPile img.cardback{height:min(100%,30vw)}#table{gap:2.5vw}}

.hostopts{text-align:left;border-top:1px solid #e3dcef;margin-top:10px;padding-top:6px}.hostopts .chk{display:flex;gap:8px;align-items:center;font-weight:600}.hostopts .chk input{width:auto}.sub.small{font-size:12px;margin:2px 0 8px}
.readaloud{background:#ffe9a8;color:#5a3d00;font:700 14px -apple-system,sans-serif;border-radius:8px;padding:5px 10px;margin-bottom:8px}
.riddle.flip{animation:ffflip .9s ease-out}@keyframes ffflip{0%{transform:perspective(800px) rotateY(180deg);background:#5b3d8a}49%{background:#5b3d8a;color:transparent}50%{transform:perspective(800px) rotateY(90deg)}100%{transform:perspective(800px) rotateY(0)}}
#factsPile.off{opacity:.35;pointer-events:none}

/* Jensen public build: Fun Fact card image + iPad/iOS Safari touch polish */
.riddle-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;-webkit-user-drag:none;pointer-events:none}
.riddle:has(.riddle-img:not(.hidden)){padding:6px}
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%;overscroll-behavior:none}
button,.btn,.card,.pile,select,input{-webkit-tap-highlight-color:transparent}
.card,.card img,.pile,img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
input,select{font-size:16px} /* stops iOS zoom-on-focus */

/* --- shuffle & deal animation (deal.js) --- */
#dealFx{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(circle,#ffffffee 0,#ffffffcc 45%,#ffffff55 100%);animation:fi .25s;-webkit-tap-highlight-color:transparent}
#dealFx.out{opacity:0;transition:opacity .3s}
#dealFx.calm .ddeck{animation:dpulse 1s ease-in-out infinite alternate}
.dmsg{font-weight:800;font-size:22px;color:#7a6b95}
.ddeck{position:relative;width:110px;height:158px}
.dcard{position:absolute;inset:0;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:opacity .3s}
.dcard img{width:100%;height:100%;object-fit:cover;border-radius:10px;border:3px solid #fff;box-shadow:0 3px 10px #3b335540;display:block;pointer-events:none}
.dskip{font-size:15px;font-weight:700;padding:10px 16px;border:0;border-radius:999px;background:#fff;color:#7a6b95;box-shadow:0 2px 10px #7a6b9540;cursor:pointer}
body.dealing #hand{visibility:hidden}
body:not(.dealing) #hand{animation:fi .35s}
.opp.bump{animation:bump .25s}@keyframes bump{50%{transform:scale(1.12)}}
@keyframes dpulse{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#dealFx,#dealFx.out{animation:none;transition:opacity .4s}.opp.bump{animation:none}}
.botrow{margin:6px 0 8px}#plist .btn.small{font-size:12px;padding:3px 8px;margin-left:6px;background:#ff9ec8}
#centerName:empty{display:none}

/* Fun Fact countdown */
#ffClock{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:6px}#ffSecs{font:800 clamp(34px,7vh,64px)/1 -apple-system,sans-serif;color:#9a5bd1;min-width:2.2em;text-align:center;background:#fff;border-radius:16px;padding:4px 14px;box-shadow:0 3px 12px #3b335522}#ffClock.low #ffSecs{color:#e53935}#ffClock.ans #ffSecs{font-size:clamp(18px,3.2vh,28px);color:#c2185b;min-width:0}
/* Logo centered at top; deck title + sound buttons stay at the right */
header{display:grid!important;grid-template-columns:1fr auto 1fr;gap:10px}header .logo{grid-column:2;justify-self:center}header .hdr{grid-column:3;justify-self:end;min-width:0;flex-wrap:wrap;justify-content:flex-end}#roomTag{text-align:right}

/* digital Fun Facts: Answer button */
#ansBar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:6px auto;max-width:640px}
#answerBtn{font-size:20px;padding:10px 26px;background:#9a5bd1;color:#fff;animation:ansPulse 1.4s infinite}@keyframes ansPulse{50%{transform:scale(1.06)}}
#ansMsg{font-weight:700;color:#7a6b95}#ansForm{display:flex;gap:6px;align-items:center;flex:1 1 100%;justify-content:center}#ansInput{max-width:280px;margin:0;font-size:17px}
#ansSecs{font:800 22px -apple-system,sans-serif;color:#e53935;min-width:2ch}#ansMicBtn.on{background:#e53935;color:#fff}
/* win celebration */
#fwCanvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:59;pointer-events:none;background:radial-gradient(circle at 50% 30%,#120c2cf2,#030210f5)}
#over.party .panel{background:transparent;box-shadow:none;max-width:92vw}#over.party{background:transparent}
#over.party #winText{font-size:clamp(34px,7vw,72px);color:#fff;text-shadow:0 0 18px #ff9ec8,0 0 34px #9a5bd1;animation:winPop .8s cubic-bezier(.2,1.6,.4,1)}@keyframes winPop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){#answerBtn{animation:none}#over.party #winText{animation:none}}

/* ===== Larry 10/15: big readable center card; clock + Answer in the right column; 9-card hand across the full width ===== */
#side{display:contents}
#dock{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:8px 0}
#dock:not(:has(> :not(.hidden))){display:none}
#dock #ffClock{flex-direction:column;margin:0;gap:8px}
#dock #ffSecs{font-size:clamp(34px,7vh,60px)}
#dock #ansBar{flex-direction:column;margin:0;max-width:none;gap:8px}
#dock #answerBtn{width:100%;margin:0;font-size:19px;padding:12px 8px}
#dock #revealNowBtn{width:100%}
#dock #ansForm{flex-direction:column;align-items:stretch}#dock #ansInput{max-width:none}
#dock #ansForm .btn{width:100%}
#ansMsg{text-align:center;font-size:14px}
@media (orientation:landscape){
  #side{display:flex;flex-direction:column;grid-column:2;grid-row:2;width:clamp(140px,17vw,230px);min-height:0;padding:0 8px 6px 0;gap:6px;overflow-y:auto}
  #side #vchat{grid-column:auto;grid-row:auto;width:auto;padding:0;flex:0 1 auto}
  #side #vchat.collapsed{width:auto}
  #side:not(:has(#vchat:not(.hidden))):not(:has(#dock > :not(.hidden))){display:none}
  /* center pile gets the room: smaller side piles, card uses the full table height */
  #table{gap:1.5vw;margin:2px 0}
  #table .pile img.cardback,#table #factsPile img.cardback{height:min(62%,16vw)}
  #center{padding:0}
  .riddle{display:flex;flex-direction:column;align-items:center;justify-content:center}
  .riddle-img{flex:1 1 0;min-height:0;height:auto;width:auto;max-width:100%}
  #banner{font-size:14px;padding:6px 12px;max-width:90%}
}
/* hand: 9 cards spread across the full width, no horizontal scroll */
#hand{overflow-x:hidden;justify-content:center;gap:clamp(4px,0.8vw,10px)}
#hand .card{flex:1 1 0;min-width:0;width:auto;max-width:min(150px,19vh)}
#dock{padding:8px 6px}#dock #answerBtn{transform-origin:center}
.riddle:has(.riddle-img:not(.hidden)) #riddleQ{display:none}
@media (orientation:landscape) and (max-height:500px){
  #hand .card{max-width:min(110px,14vh)}#hand{padding:2px 4px}
  #banner{font-size:11px;padding:3px 10px;line-height:1.2}.why{min-height:0;font-size:11px}
  .controls{margin:0}.controls .btn.small{padding:3px 8px;font-size:12px}
  #centerName{display:none}#opps{gap:4px}
  #dock #ffSecs{font-size:30px}#dock #answerBtn{font-size:15px;padding:8px 4px}
}
/* all-time results */
.resultsBtn{margin-top:10px}
#results{position:fixed;inset:0;z-index:80;background:#3b335566;display:flex;align-items:center;justify-content:center;padding:12px}
.rpanel{position:relative;max-width:640px;width:100%;max-height:92dvh;overflow:auto;margin:0;-webkit-user-select:text;user-select:text}
.rclose{position:absolute;right:12px;top:10px;border:0;background:#f7f0ff;color:#7a6b95;font-size:18px;width:36px;height:36px;border-radius:50%;cursor:pointer}
.rtable{width:100%;border-collapse:collapse;font-size:16px}.rtable th{color:#7a6b95;font-size:13px;text-transform:uppercase;letter-spacing:.04em;padding:6px;border-bottom:2px solid #e3d9f5}
.rtable td{padding:7px 6px;border-bottom:1px solid #f0eaf9}.rtable td:nth-child(2){text-align:left}.rtable th:nth-child(2){text-align:left}
.rtable tr:first-child td b{color:#ff6fae}.rtable tr.isbot{color:#8a82a0}.rbot{font-size:12px;background:#eef6ff;color:#5a7fb0;border-radius:8px;padding:1px 6px;white-space:nowrap}
.rrecent{list-style:none;padding:0;margin:0;text-align:left;font-size:14px}.rrecent li{padding:6px 4px;border-bottom:1px solid #f0eaf9}.rdate{color:#8a82a0;margin-right:4px}
#over .resultsBtn{max-width:300px}
/* Larry 10/16: play recaps in a one-line strip under the score pills, never over the hand / center card / right column */
#recap{flex:0 0 auto;height:26px;display:flex;justify-content:center;align-items:center;margin:2px 0 0;min-width:0;overflow:hidden;pointer-events:none}
#recap .toast{font-size:14px;line-height:1.2;padding:3px 12px;border-radius:10px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 8px #3b335522;animation:fi .2s}
@media (orientation:landscape) and (max-height:500px){#recap{height:18px;margin:0}#recap .toast{font-size:11px;padding:1px 8px}}
/* Larry 10/16: both piles are fixed, identical boxes. Card size comes from explicit math on the pile's own
   size (container units), never from the image's intrinsic size (iPad Safari let %-height + width:auto
   grow the BEGAT pile to the image's 360px). Glow is drawn on the card itself; labels always fit; the
   table clips so the banner can never sit on the piles. */
@media (orientation:landscape){
  #table{display:grid!important;grid-template-columns:var(--pw) minmax(0,auto) var(--pw);justify-content:center;align-items:stretch;overflow:hidden;--pw:clamp(84px,14vw,170px)}
  #table .pile{width:var(--pw);min-width:0;height:100%;min-height:0;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 0 2px!important;background:none!important;box-shadow:none!important;animation:none!important;container-type:size}
  #table .pile img.cardback,#table #factsPile img.cardback{width:min(calc(100cqw - 16px),calc((100cqh - 46px) * 0.724));height:auto!important;max-width:none;max-height:none;aspect-ratio:360/497;object-fit:cover;flex:0 0 auto;align-self:center;justify-self:auto;transition:box-shadow .2s}
  #table .pile span,#table .pile small{flex:0 0 auto;display:block;line-height:1.15;white-space:nowrap}
  #table .pile.glow{cursor:pointer}
  #table .pile.glow img.cardback{box-shadow:0 0 0 4px #ffd54a,0 0 22px #ffd54a;animation:pulse 1s infinite alternate}
  #center{min-width:0}
}
@media (orientation:landscape){
  #table .pile{gap:12px}
  #table .pile img.cardback,#table #factsPile img.cardback{width:min(calc(100cqw - 20px),calc((100cqh - 66px) * 0.724))}
  #table .pile.glow img.cardback{animation:pileGlow 1s infinite alternate}
  @keyframes pileGlow{from{box-shadow:0 0 0 3px #ffd54a,0 0 8px #ffd54a}to{box-shadow:0 0 0 5px #ffd54a,0 0 18px #ffd54a}}
}
/* table screen: the bottom toast area is never shown (all notices go to the top recap strip) */
body:has(#game:not(.hidden)) #toasts{display:none!important}
/* Larry 10/16 (iPad Safari): the highlight hugs the card. A shrink-wrapping wrapper around the image carries
   the outline; the image has an explicit width AND height (no aspect-ratio / object-fit / %-height reliance),
   identical for both piles. First width/height lines are fallbacks for browsers without container units. */
#table .pile .pcard{display:inline-block;width:-webkit-fit-content;width:fit-content;height:-webkit-fit-content;height:fit-content;line-height:0;border-radius:10px;flex:0 0 auto;align-self:center;transition:box-shadow .2s}
#table .pile img.cardback,#table #factsPile img.cardback{display:block;width:min(12vw,17vh)!important;height:calc(min(12vw,17vh) * 1.38)!important;max-width:none;max-height:none;aspect-ratio:auto;object-fit:fill;box-shadow:0 3px 10px #3b335522!important;animation:none!important;border-radius:10px}
@supports (width:1cqw){
  #table .pile img.cardback,#table #factsPile img.cardback{width:min(calc(100cqw - 20px),calc((100cqh - 66px) * 0.724));height:calc(min(calc(100cqw - 20px),calc((100cqh - 66px) * 0.724)) * 1.38)!important}
}
#table .pile.glow .pcard{animation:pileGlow 1s infinite alternate}
@media (orientation:landscape) and (max-height:500px){#table .pile img.cardback,#table #factsPile img.cardback{width:min(11vw,24vh);height:calc(min(11vw,24vh) * 1.38)!important}}
@supports (width:1cqw){@media (orientation:landscape) and (max-height:500px){#table .pile img.cardback,#table #factsPile img.cardback{width:min(calc(100cqw - 12px),calc((100cqh - 40px) * 0.724));height:calc(min(calc(100cqw - 12px),calc((100cqh - 40px) * 0.724)) * 1.38)!important}}}
/* header toggles: clear text labels with state */
.hdr #sfxBtn,.hdr #muteBtn{font-size:14px;padding:7px 11px;white-space:nowrap;border-radius:12px}
.hdr #sfxBtn.off,.hdr #muteBtn.off{color:#a39bb5;background:#f3f0f8}
@media (orientation:landscape) and (max-height:500px){.hdr #sfxBtn,.hdr #muteBtn{font-size:11px;padding:3px 7px}}
@media (max-width:1100px){#roomTag{font-size:14px}}
#dealFx.tablefx{background:radial-gradient(ellipse at 50% 48%,#e9f6ee 0,#e3f1e8cc 40%,#ffffff88 75%)}

/* loading bar: every card image is fetched + decoded before play (10/16) */
.loading{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#ffffffe6}
.loading .lbox{background:#FFFFFF;border-radius:18px;box-shadow:0 10px 30px #3b335533;padding:22px 28px;text-align:center;width:min(420px,80vw);font-family:Papyrus,fantasy}
.loading .llogo{height:54px;margin-bottom:6px}.loading p{margin:6px 0 12px;font-size:1.15rem;color:#3b3355}
.loading .lbar{height:14px;border-radius:9px;background:#ece6f7;overflow:hidden}
#loadFill{height:100%;width:0;background:linear-gradient(90deg,#7eb8ff,#ff9ec8);transition:width .2s}
#centerImg.cflip{animation:cflip .5s ease-out}@keyframes cflip{0%{transform:perspective(800px) rotateY(90deg)}100%{transform:perspective(800px) rotateY(0)}}

/* hand: touch-and-drag to rearrange / play, double-tap to play (10/16). Cards take every touch (no pan, no double-tap zoom). */
#hand{touch-action:manipulation}
#hand .card{touch-action:none;-webkit-user-drag:none;cursor:grab}
#hand .card.slot{opacity:.35;outline:2px dashed #b9a6e0;outline-offset:-2px;border-radius:9px}
.card.drag{cursor:grabbing;transition:none}

/* ===== Oct 18 playtest ===== */
/* play timer (everyone sees it) */
.pclock{display:inline-flex;align-items:center;gap:4px;padding:3px 12px;border-radius:999px;background:#FFFFFF;box-shadow:0 2px 8px #3b335522;font:700 14px -apple-system,system-ui,sans-serif;color:#3b3355;white-space:nowrap}
.pclock b{font-size:17px;min-width:2ch;text-align:right;color:#7c4dce}.pclock.low{background:#fff0f3}.pclock.low b{color:#e53935}
.controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
/* Leave game */
.btn.leave{background:#fff0f3;color:#c62828;border:1px solid #f4b6c2;box-shadow:none}
.hdr .btn.leave{width:auto;margin:0 0 0 10px;padding:4px 10px;font-size:13px}
#leaveAsk{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:#3b335555;padding:16px}
#leaveAsk.hidden{display:none}#leaveAsk .panel{max-width:380px;text-align:center;background:#FFFFFF}
#leaveAsk .row2{display:flex;gap:10px}#leaveAsk .row2 .btn{flex:1}
/* full-size card */
#zoom{position:fixed;inset:0;z-index:130;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#3b3355d9;padding:12px}
#zoom.hidden{display:none}#zoom img{max-width:94vw;max-height:86vh;max-height:86dvh;border-radius:14px;background:#FFFFFF;box-shadow:0 10px 40px #0006}
#zoom p{color:#fff;margin:0;font:600 14px -apple-system,system-ui,sans-serif}
.zoombtn{display:none}
/* hear others */
#vaudio{position:fixed;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;left:0;bottom:0}
#hearBtn{position:fixed;z-index:110;left:50%;bottom:14px;transform:translateX(-50%);width:auto;padding:12px 22px;font-size:18px;box-shadow:0 6px 22px #3b335566;animation:pulse 1s infinite alternate}
#hearBtn.hidden{display:none}

/* ---------- PHONES (shorter side <= 500px), portrait AND landscape. iPad / desktop untouched. ---------- */
html.phone #rotate{display:none!important}
html.phone .zoombtn{display:inline-flex}
html.phone #hand{overflow-x:auto!important;overflow-y:hidden;justify-content:flex-start!important;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;touch-action:pan-x;gap:8px!important;padding:6px 8px 8px!important;scrollbar-width:thin}
html.phone #hand .card{flex:0 0 auto!important;max-width:none!important;scroll-snap-align:center;touch-action:pan-x}
html.phone .help{display:none}
html.phone .hdr .btn.leave{font-size:12px;padding:3px 8px}
html.phone #roomTag{font-size:12px}
/* portrait phone: one column, big hand */
html.phone.portrait,html.phone.portrait body{height:100%;overflow:hidden}
html.phone.portrait body{display:flex!important;flex-direction:column;height:100dvh}
html.phone.portrait header{order:0;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:4px 8px}
html.phone.portrait .logo{height:26px;position:static;transform:none}
html.phone.portrait .screen{order:1;flex:1 1 auto;min-height:0;margin:0;padding:0 6px;max-width:none;width:auto}
html.phone.portrait #lobby{overflow:auto}
html.phone.portrait #game{display:flex;flex-direction:column;min-height:0;height:100%}
html.phone.portrait #game.hidden{display:none}
html.phone.portrait #opps{flex:0 0 auto;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;justify-content:flex-start}
html.phone.portrait .opp{font-size:12px;padding:2px 8px;white-space:nowrap}
html.phone.portrait #recap{flex:0 0 auto;min-height:18px}
html.phone.portrait #recap .toast{font-size:12px;padding:2px 8px}
html.phone.portrait #table{flex:1 1 0;min-height:0;display:grid!important;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center;gap:6px;margin:2px 0}
html.phone.portrait #table .pile{width:64px;padding:0!important;font-size:11px;background:none!important;box-shadow:none!important}
html.phone.portrait #table .pile img.cardback{width:60px!important;height:auto!important;aspect-ratio:360/497}
html.phone.portrait #table .pile small{display:block;font-size:10px}
html.phone.portrait #center{min-height:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0}
html.phone.portrait #center img#centerImg{height:auto!important;max-height:100%;width:auto;max-width:100%;min-height:0}
html.phone.portrait .riddle{height:100%;max-height:100%}
html.phone.portrait #banner{font-size:12px;padding:4px 10px;margin:2px auto;max-width:96%}
html.phone.portrait .why{font-size:12px;min-height:0;margin:0}
html.phone.portrait .controls{flex:0 0 auto;margin:2px 0}
html.phone.portrait #hand{flex:0 0 auto}
html.phone.portrait #hand .card{width:40vw!important}
html.phone.portrait #side{order:2;flex:0 0 auto;display:flex;flex-direction:column;gap:4px;padding:0 6px 4px;width:auto;max-height:34vh;overflow-y:auto}
html.phone.portrait #vchat{width:auto;padding:0;margin:0}
html.phone.portrait #vchat .vbar{flex-direction:row;gap:4px}
html.phone.portrait #vchat .vbtn{flex:1;font-size:12px;padding:5px 4px}
html.phone.portrait #vtiles{flex-direction:row;overflow-x:auto;gap:4px;padding:4px 0}
html.phone.portrait .vtile{width:84px;flex:0 0 auto}
html.phone.portrait .vhint{display:none}
html.phone.portrait #dock{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
html.phone.portrait #dock:not(:has(> :not(.hidden))){display:none}
html.phone.portrait #ffClock{flex-direction:row;gap:6px}
/* landscape phone: keep the side column but slim; hand cards much bigger, compact middle */
html.phone:not(.portrait) #side{width:118px!important;padding:0 4px 4px 0!important}
html.phone:not(.portrait) .vbtn{font-size:11px!important;padding:3px 4px!important}
html.phone:not(.portrait) #hand .card{width:clamp(78px,11vw,104px)!important}
html.phone:not(.portrait) #table{--pw:72px}
html.phone:not(.portrait) .controls{margin:0}
html.phone:not(.portrait) #why{display:none}
html.phone.portrait #table{align-items:stretch}
html.phone.portrait #table .pile{align-self:center}
html.phone.portrait #table #factsPile img.cardback,html.phone.portrait #table .pile img.cardback{width:60px!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain}
html.phone.portrait #center{height:auto;min-height:0;overflow:hidden}
html.phone.portrait #center img#centerImg{flex:1 1 0;min-height:0;height:auto!important;max-height:none;width:100%;object-fit:contain;box-shadow:none;border-radius:0;filter:none}
html.phone.portrait #center .riddle{flex:1 1 0;min-height:0}
html.phone.portrait #centerName:empty{display:none}
/* Fun Fact answer reveal: white patch over the printed prompt, live prompt letters blow away, then 'I am' + answer are typed */
.riddle{position:relative}
#riddleCover{position:absolute;inset:0;pointer-events:none;z-index:2}
.rv-patch{position:absolute;background:#fff}.rv-union{opacity:0;transition:opacity .3s}.rv-union.on{opacity:1}
.rv-prompt{position:absolute;white-space:nowrap;font-family:"Papyrus","Papyrus Std","Papyrus Condensed",fantasy,serif}
.rv-prompt span{display:inline-block;transition:transform .9s cubic-bezier(.3,.1,.6,1),opacity .9s ease-in}
.rv-line,.rv-ans{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center}
.rv-ans{align-items:flex-start}
.rv-tw{display:inline-block;font-family:"Papyrus","Papyrus Std","Papyrus Condensed",fantasy,serif;color:#222;line-height:1.08;overflow-wrap:break-word}
.rv-tw span{visibility:hidden;position:relative}.rv-tw span.on{visibility:visible}
.rv-tw span.cur::after{content:"";position:absolute;right:-.07em;top:.12em;bottom:.08em;width:.06em;background:var(--rv-ink,#222);animation:rvblink .7s steps(1) infinite}
@keyframes rvblink{50%{opacity:0}}
#riddleQ{transition:opacity 1s ease}#riddleQ.gone{opacity:0}
#riddleAns{font-family:Papyrus,"Papyrus Std",fantasy,serif;color:#222;font-size:22px;animation:fi 1s ease}
@media (prefers-reduced-motion: reduce){.rv-prompt span,.rv-union,#riddleQ{transition:none}#riddleAns{animation:none}.rv-tw span.cur::after{animation:none}}

.popflip{display:inline-block;-webkit-transform:scaleX(-1);transform:scaleX(-1)}
.cardDancer{position:fixed;z-index:60;pointer-events:none;will-change:transform;-webkit-transform-origin:50% 90%;transform-origin:50% 90%;-webkit-animation:cardDance 1.6s ease-in-out infinite;animation:cardDance 1.6s ease-in-out infinite}
.cardDancer img{width:100%;height:100%;object-fit:contain;border-radius:14px;background:#fff;box-shadow:0 0 0 3px #fff,0 0 28px #ffd54a,0 0 60px #ff9ec8aa}
.cardDancer.still{-webkit-animation:none;animation:none}
@-webkit-keyframes cardDance{0%,100%{-webkit-transform:translateY(0) rotate(0) scale(1,1)}10%{-webkit-transform:translateY(0) rotate(0) scale(1.06,.92)}22%{-webkit-transform:translateY(-9%) rotate(-6deg) scale(.96,1.05)}34%{-webkit-transform:translateY(0) rotate(-3deg) scale(1.05,.94)}46%{-webkit-transform:translateY(-4%) rotate(5deg) scale(1,1)}58%{-webkit-transform:translateY(0) rotate(7deg) scale(1.04,.95)}70%{-webkit-transform:translateY(-9%) rotate(3deg) scale(.96,1.05)}82%{-webkit-transform:translateY(-3%) rotate(-4deg) scale(1,1)}92%{-webkit-transform:translateY(0) rotate(0) scale(1.05,.94)}}
@keyframes cardDance{0%,100%{transform:translateY(0) rotate(0) scale(1,1)}10%{transform:translateY(0) rotate(0) scale(1.06,.92)}22%{transform:translateY(-9%) rotate(-6deg) scale(.96,1.05)}34%{transform:translateY(0) rotate(-3deg) scale(1.05,.94)}46%{transform:translateY(-4%) rotate(5deg) scale(1,1)}58%{transform:translateY(0) rotate(7deg) scale(1.04,.95)}70%{transform:translateY(-9%) rotate(3deg) scale(.96,1.05)}82%{transform:translateY(-3%) rotate(-4deg) scale(1,1)}92%{transform:translateY(0) rotate(0) scale(1.05,.94)}}
.nowrap{white-space:nowrap}
.mycardrow{display:flex;gap:12px;align-items:center;background:#f7f0ff;border-radius:14px;padding:8px 10px;margin:8px 0}.mycardrow img{height:84px;width:auto;border-radius:6px;background:#fff;box-shadow:0 2px 8px #3b335522}#myCardName{font-weight:700;margin:2px 0 6px}
#cardPick{position:fixed;inset:0;z-index:80;background:#3b335566;display:flex;align-items:center;justify-content:center;padding:12px}#cardSearch{width:100%;font-size:17px;padding:10px 12px;border-radius:10px;border:1px solid #d9cdee;margin:6px 0 10px;box-sizing:border-box}
#cardList{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}#cardList li{cursor:pointer;text-align:center;font-size:13px;font-weight:600;border-radius:10px;padding:6px;border:2px solid transparent}#cardList li.sel{border-color:#7EB8FF;background:#DDE9F5}#cardList img{width:100%;height:auto;border-radius:6px;background:#fff;box-shadow:0 2px 8px #3b335522;display:block;margin-bottom:4px}
.pthumb{height:28px;width:auto;border-radius:3px;vertical-align:middle;margin-right:6px;box-shadow:0 1px 4px #3b335533;background:#fff}
#over.party .panel{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2.5vh 12px;box-sizing:border-box}#over.party #winText{margin:0 0 auto}#over.party .btn{position:relative;z-index:1}
.cardDancer.big{left:50%!important;top:50%!important;margin:0}.cardDancer.big .cdin{width:100%;height:100%;-webkit-animation:cardDance 1.6s ease-in-out infinite;animation:cardDance 1.6s ease-in-out infinite;-webkit-transform-origin:50% 90%;transform-origin:50% 90%}
.cardDancer.big{-webkit-animation:none;animation:none;-webkit-transform:translate(-50%,-44%);transform:translate(-50%,-44%)}.cardDancer.big.still .cdin{-webkit-animation:none;animation:none}
#over.party .panel{max-width:none!important}#over.party .btn{max-width:320px;width:100%}#over.party #winText{white-space:normal;max-width:96vw}

/* 10/31 (Larry): end screen. The game's hint line (#why), controls and hand used to show through under Play again /
   All-time results. Hide them while the game is over; the overlay starts below the header so Leave game stays clear. */
body.gameover #why,body.gameover .controls,body.gameover #hand,body.gameover .help,body.gameover #banner,body.gameover #dock,body.gameover #recap{visibility:hidden}
#over.party .panel{padding-bottom:max(14px,env(safe-area-inset-bottom));gap:8px;overflow:auto}#over.party .btn{margin:0}
#over .roombtn,#leaveAsk .roombtn{display:block;width:100%;margin-top:8px}

/* seat rings (Larry 10/31): blue = men, pink = women (player's own card); bright green pulsing ring = whoever must act now */
.opp.sexB{border:4px solid #2f86ff}.opp.sexP{border:4px solid #ff4fa3}
.opp.turn{box-shadow:0 0 0 3px #fff,0 0 0 8px #19e64b,0 0 18px 6px #2bff5fb0;animation:oppTurn 1.3s ease-in-out infinite}
@keyframes oppTurn{50%{box-shadow:0 0 0 3px #fff,0 0 0 10px #3dff6a,0 0 28px 10px #2bff5fd0}}
@media (prefers-reduced-motion:reduce){.opp.turn{animation:none}}