/* Shared celebration/score layer. It never changes the Zoom video or leaderboard points. */
/* One line, not three: the action, the mute toggle and the hint sit side by side, and the animal
   chooser is the only thing allowed to take a row of its own — and only while it is open. */
.wp-celebration-controls {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 8px;
  padding:2px 10px; color:var(--ink,#1a1c1a); background:var(--surface,#fff);
}
.wp-celebration-controls .btn { min-height:44px; padding:8px 11px; font-size:12px; }
.wp-celebration-actions { display:flex; align-items:center; justify-content:center; gap:6px; flex:0 1 auto; min-width:0; }
.wp-celebration-actions [data-celebrate] { flex:0 1 auto; min-width:0; min-height:32px; padding-inline:12px; font-size:12px; background:#0bd5c8; color:#1a1c1a; border-color:#0bd5c8; font-size:14px; }
.wp-celebration-actions [data-celebrate]:disabled { background:#edf3ee; border-color:#edf3ee; color:#657369; }
.wp-sound-toggle {
  flex:none; width:38px; min-height:32px; padding:0; font-size:16px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line,#dfe6e0); border-radius:12px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.wp-sound-toggle:hover { background:var(--bg,#f4f7f4); }
.wp-celebration-controls p { display:none; flex:0 1 auto; min-width:0; font-size:10px; line-height:1.2; margin:0; text-align:center; color:var(--ink-muted,#657369); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#class.is-choosing-celebration #dock > .problem-entry { display:none; }
#class.is-choosing-celebration [data-celebration-note] { display:none; }
.wp-celebration-toggle { display:flex; align-items:center; gap:8px; min-height:44px; font-size:14px; }
.wp-celebration-toggle input { width:22px; height:22px; accent-color:#7a47ae; }
.wp-animal-chooser { flex:1 0 100%; order:3; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; max-width:570px; margin:8px auto 0; }
.wp-animal-chooser[hidden] { display:none; }
.wp-animal-chooser button { min-width:0; min-height:82px; padding:5px 2px; background:#fff; border:1px solid #d6e5dc; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font:500 11px/1.2 Rubik,Arial,sans-serif; color:#1a1c1a; cursor:pointer; }
.wp-animal-chooser button:hover:not(:disabled) { border-color:#0bd5c8; background:#f4fff9; }
.wp-animal-chooser button:disabled { cursor:default; border-color:#e3e9e5; color:#657369; }
.wp-animal-chooser button:focus-visible { outline:3px solid #7a47ae; outline-offset:2px; }
.wp-animal-chooser img { width:48px; height:48px; object-fit:contain; mix-blend-mode:normal; }
.wp-celebrations { position:absolute; left:8px; right:8px; top:0; height:0; z-index:8; display:flex; align-items:center; justify-content:center; gap:10px; pointer-events:none; overflow:hidden; direction:ltr; }
.wp-celebration { position:relative; flex:0 1 180px; min-width:0; max-width:180px; height:var(--wp-celebration-h,190px); background:none; border:0; box-shadow:none; overflow:visible; animation:none; opacity:1; }
.wp-animal-motion { position:absolute; inset:0 0 43px; display:flex; align-items:center; justify-content:center; perspective:500px; overflow:visible; }
.wp-animal-sprite { display:block; flex:none; width:var(--wp-animal-size,145px); height:var(--wp-animal-size,145px); object-fit:contain; border:0; background:none;   opacity:1; position:relative; z-index:1; will-change:transform; transform-origin:50% 80%; }
.wp-animal-air { position:absolute; z-index:0; width:68%; height:27%; bottom:0; border-radius:14px; opacity:0; transform:perspective(350px) rotateX(48deg); background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.82),rgba(11,213,200,.24) 42%,transparent 74%); animation:wp-animal-base 5s var(--wp-elapsed,0ms) both; }
.wp-celebration[data-animal="dragon"] .wp-animal-air { background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.82),rgba(255,123,61,.20) 42%,transparent 74%); }
.wp-celebration[data-animal="flamingo"] .wp-animal-air { background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.82),rgba(122,71,174,.18) 42%,transparent 74%); }
.wp-celebration-name { position:absolute; bottom:2px; left:0; right:0; z-index:2; padding:3px 5px; text-align:center; direction:rtl; color:#1a1c1a; background:radial-gradient(ellipse at center,rgba(255,255,255,.98) 0%,rgba(255,255,255,.82) 38%,rgba(255,255,255,0) 74%); text-shadow:0 1px 2px #fff,0 0 4px #fff; }
.wp-celebration-name bdi { display:block; max-width:100%; font-size:16px; font-weight:700; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wp-celebration-name > span { display:block; font-size:10px; font-weight:500; line-height:1.4; margin-top:1px; }
.wp-celebration[data-tier="ping"] { max-width:200px; height:48px; animation:wp-ping-presence 5s var(--wp-elapsed,0ms) both; }
.wp-celebration[data-tier="ping"] .wp-celebration-name { top:50%; bottom:auto; transform:translateY(-50%); }
.wp-celebration[data-tier="ping"] .wp-celebration-name bdi { font-size:15px; }
.wp-celebrations[data-compact="true"] .wp-animal-motion { bottom:28px; }
.wp-celebrations[data-compact="true"] .wp-celebration-name bdi { font-size:14px; }
.wp-celebrations[data-compact="true"] .wp-celebration-name > span { display:none; }
.wp-celebrations[data-tiny="true"] .wp-animal-motion { display:none; }
.wp-celebrations[data-tiny="true"] .wp-celebration-name { top:50%; bottom:auto; transform:translateY(-50%); }
.wp-celebrations[data-shared="true"] { flex-direction:column; gap:1px; }
.wp-celebrations[data-shared="true"] .wp-celebration { width:100%; max-width:none; flex:1 1 0; min-height:0; }
.wp-celebrations[data-shared="true"] .wp-animal-motion { display:none; }
.wp-celebrations[data-shared="true"] .wp-celebration-name { top:50%; bottom:auto; transform:translateY(-50%); }
.wp-celebrations[data-shared="true"] .wp-celebration-name bdi { font-size:13px; }
.wp-celebrations[data-shared="true"] .wp-celebration-name > span { display:none; }
.wp-celebration[data-animal="panda"] .wp-animal-sprite { animation:wp-panda 5s var(--wp-elapsed,0ms) both cubic-bezier(.2,.75,.2,1); }
.wp-celebration[data-animal="dolphin"] .wp-animal-sprite { animation:wp-dolphin 5s var(--wp-elapsed,0ms) both cubic-bezier(.25,.75,.3,1); }
.wp-celebration[data-animal="falcon"] .wp-animal-sprite { animation:wp-falcon 5s var(--wp-elapsed,0ms) both cubic-bezier(.18,.7,.3,1); }
.wp-celebration[data-animal="dragon"] .wp-animal-sprite { animation:wp-dragon 5s var(--wp-elapsed,0ms) both cubic-bezier(.2,.75,.2,1); }
.wp-celebration[data-animal="flamingo"] .wp-animal-sprite { animation:wp-flamingo 5s var(--wp-elapsed,0ms) both cubic-bezier(.3,.8,.3,1); }
@keyframes wp-ping-presence {0%{opacity:0}12%,86%{opacity:1}100%{opacity:0}}
@keyframes wp-animal-base {0%,8%{opacity:0}25%,84%{opacity:1}100%{opacity:0}}
@keyframes wp-panda {0%{transform:translateY(var(--wp-travel-y,400px)) rotate(-45deg) scale(.62)}25%{transform:translateY(0) rotate(6deg) scale(1.02)}39%{transform:translateY(-5%) rotate(-4deg)}53%{transform:translateY(1%) rotate(3deg)}72%{transform:translateY(-2%) rotate(-1deg)}85%{transform:translateY(0) scale(1)}100%{transform:translateX(calc(-1 * var(--wp-travel-x,500px))) rotate(-50deg) scale(.78)}}
@keyframes wp-dolphin {0%{transform:translate(calc(-1 * var(--wp-travel-x,500px)),56%) rotate(-32deg) scale(.68)}25%{transform:translate(-3%,-6%) rotate(-8deg) scale(1.02)}41%{transform:translate(0,1%) rotate(6deg)}60%{transform:translate(0,-3%) rotate(-2deg)}83%{transform:translate(0,0) scale(1)}100%{transform:translate(var(--wp-travel-x,500px),52%) rotate(32deg) scale(.7)}}
@keyframes wp-falcon {0%{transform:translate(var(--wp-travel-x,500px),-25%) rotate(-18deg) scale(.55)}27%{transform:translate(-4%,2%) rotate(7deg) scale(1.04)}42%{transform:translate(0,-2%) rotate(-3deg)}61%{transform:translate(0,1%) rotate(2deg)}83%{transform:translate(0,0) scale(1)}100%{transform:translate(calc(-1 * var(--wp-travel-x,500px)),-32%) rotate(13deg) scale(.63)}}
@keyframes wp-dragon {0%{transform:translateY(var(--wp-travel-y,400px)) rotate(-6deg) scale(.57)}25%{transform:translateY(-6%) rotate(-4deg) scale(1.03)}40%{transform:translateY(2%) rotate(3deg)}57%{transform:translateY(-3%) rotate(-2deg)}73%,83%{transform:translateY(0) scale(1)}100%{transform:translateY(calc(-1 * var(--wp-travel-y,400px))) rotate(-7deg) scale(.66)}}
@keyframes wp-flamingo {0%{transform:translateY(var(--wp-travel-y,400px)) rotate(-8deg) scale(.72)}25%{transform:translateY(0) rotate(3deg) scale(1)}38%{transform:translateY(-3%) rotate(-4deg)}51%{transform:translateY(1%) rotate(3deg)}66%{transform:translateY(-2%) rotate(-2deg)}84%{transform:translateY(0)}100%{transform:translate(var(--wp-travel-x,500px),25%) rotate(7deg) scale(.8)}}
.wp-leaderboard { position:absolute; z-index:9; left:5%; right:5%; bottom:0; width:90%; max-width:480px; margin-inline:auto; padding:10px 12px; border-radius:16px; background:#fff; color:#1a1c1a; border:1px solid #d3e4da; border-top:4px solid #0bd5c8; box-shadow:0 4px 15px rgba(26,28,26,.1); direction:rtl; font-size:14px; overflow:hidden; pointer-events:auto; }
.wp-leaderboard[hidden] { display:none; }
.wp-leaderboard-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; line-height:20px; }
.wp-leaderboard-heading strong { font-size:14px; font-weight:700; color:#1a1c1a; }
.wp-leaderboard-heading > span { font-size:10px; color:#617267; }
.wp-leaderboard-list { display:grid; gap:3px; }
.wp-leaderboard-row { min-width:0; display:grid; grid-template-columns:24px minmax(0,1fr) 38px; align-items:center; gap:8px; min-height:25px; line-height:1.4; }
.wp-leaderboard-rank { color:#7a47ae; font-weight:700; text-align:center; }
.wp-leaderboard-row bdi { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.wp-leaderboard-points { font-weight:700; text-align:center; }
.wp-leaderboard-row[data-rank="1"] { background:#e7faf3; border-radius:6px; }
.wp-leaderboard[data-compact="true"] { padding:6px 8px; border-top-width:3px; }
.wp-leaderboard[data-compact="true"] .wp-leaderboard-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 8px; }
.wp-leaderboard[data-compact="true"] .wp-leaderboard-row { grid-template-columns:17px minmax(0,1fr) 26px; gap:3px; min-height:21px; font-size:13px; }
.wp-leaderboard[data-tight="true"] { padding:3px 5px; border-top-width:2px; border-radius:10px; }
.wp-leaderboard[data-tight="true"] .wp-leaderboard-heading { margin-bottom:2px; line-height:15px; }
.wp-leaderboard[data-tight="true"] .wp-leaderboard-heading strong { font-size:12px; }
.wp-leaderboard[data-tight="true"] .wp-leaderboard-heading > span { font-size:9px; }
.wp-leaderboard[data-tight="true"] .wp-leaderboard-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px 5px; }
.wp-leaderboard[data-tight="true"] .wp-leaderboard-row { grid-template-columns:13px minmax(0,1fr) 18px; gap:2px; min-height:17px; line-height:17px; font-size:13px; }
.wp-leaderboard[data-micro="true"] .wp-leaderboard-heading { display:flex; }
.wp-leaderboard[data-shared="true"] { left:8px; right:auto; width:75%; max-width:none; margin:0; padding:1px 3px; border-top-width:1px; border-radius:8px; }
.wp-leaderboard[data-shared="true"] .wp-leaderboard-heading { display:flex; line-height:15px; margin-bottom:2px; }
.wp-leaderboard[data-shared="true"] .wp-leaderboard-heading strong { font-size:12px; }
.wp-leaderboard[data-shared="true"] .wp-leaderboard-heading > span { font-size:10px; }
.wp-leaderboard[data-shared="true"] .wp-leaderboard-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 4px; }
.wp-leaderboard[data-shared="true"] .wp-leaderboard-row { grid-template-columns:12px minmax(0,1fr) 18px; gap:1px; min-height:15px; line-height:15px; font-size:13px; }
.col--video .wp-celebration-controls { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding-inline:0; }
.col--video .wp-celebration-controls p { width:100%; text-align:start; }
@media(max-width:380px) { .wp-celebration-controls { padding-inline:5px; } .wp-animal-chooser { flex:1 0 100%; order:3; gap:4px; } .wp-animal-chooser button { min-height:74px; font-size:10px; } .wp-animal-chooser img { width:39px; height:39px; } .wp-celebration-actions [data-celebrate] { font-size:13px; } }
/* The side rail is a column, not a squeezed row: sound on top, the red button in the middle where
   the thumb lands, the hand below it, then the celebration controls. Stacking is what lets the rail
   be genuinely narrow instead of three items fighting over one line. */
@media(orientation:landscape) and (max-height:500px) {
  #class #dock { width:min(96px,17vw); justify-content:center; overflow-y:auto; }
  #class #dock .bar__row { flex-direction:column; align-items:center; gap:2px; }
  #class #dock .baritem { width:100%; flex:none; min-height:40px; padding:2px; gap:1px; }
  #class #dock .baritem__ic { font-size:18px; }
  #class #dock .baritem__label { font-size:8px; line-height:1.15; }
  #class #dock #talk { width:56px; height:56px; margin:2px 0; }
  /* The red circle explains itself in a rail this narrow; its caption was the thing colliding. */
  #class #dock .talk__ar, #class #dock #timer { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  /* No room for a hint here, and the bar is a control strip, not a place to read. */
  #class .wp-celebration-controls { flex:none; padding:2px 0; gap:2px; }
  #class .wp-celebration-controls p { display:none; }
  #class .wp-celebration-actions { flex-direction:column; gap:3px; width:100%; }
  #class .wp-celebration-actions .btn { padding-inline:4px; font-size:10px; min-height:32px; width:100%; }
  #class .wp-sound-toggle { width:100%; min-height:32px; font-size:15px; }
  #class .bar .problem-entry .btn { font-size:8px; min-height:20px; }
  #class .wp-animal-chooser { flex:1 0 100%; order:3; gap:3px; }
  #class .wp-animal-chooser button { min-height:56px; font-size:8px; }
  #class .wp-animal-chooser img { width:26px; height:26px; }
}
@media(orientation:portrait) and (max-height:650px) { #class:has(#tfPanel:not([hidden])) #talkStatus { display:none; } #class #tfPanel { bottom:calc(var(--talk-raise) + 8px); } }
@media(prefers-reduced-motion:reduce) { .wp-celebration { animation:none; opacity:1; } .wp-animal-sprite { animation:none !important; } .wp-animal-air { display:none; } }