@font-face{font-family:"FallbackSans";src:local("Arial");}
:root{--fg:#ffffff;--accent:#ff6fa7;--accent2:#62c6ff;--accent3:#ffe97a;--shadow:rgba(30,30,30,.4);--playerSize:120px;--ringSize:140px}
*{box-sizing:border-box}
html,body{width:100%;height:100%;background:transparent}
body{margin:0;color:var(--fg);font-family:"Patrick Hand","Gloria Hallelujah","FallbackSans",sans-serif}
#overlay{position:relative;isolation:isolate;display:flex;align-items:center;gap:28px;padding:8px 12px}
.icon#icon-mouse{order:1}
#player-left{order:2}
#switch-control{order:3; margin:0 -40px}
#player-right{order:4}
.icon#icon-keyboard{order:5}
.icon svg{display:block;color:var(--fg);stroke:currentColor !important;filter:drop-shadow(2px 2px 0 var(--shadow))}
.icon svg *{stroke:currentColor !important}
.icon.mouse{transform:rotate(-4deg);margin-right:-44px}
.icon.keyboard{transform:rotate(2deg);margin-left:-30px}
.player{display:flex;flex-direction:column;align-items:center;gap:8px}
.player .img-wrap{width:var(--playerSize);height:var(--playerSize);border-radius:0;border:0;background:transparent;overflow:visible;position:relative;box-shadow:none}
.player img{width:100%;height:100%;object-fit:contain;transform-origin:50% 55%;will-change:transform;transition:none}
.player .img-wrap{will-change:transform}
.player .label{padding:2px 12px;border:3px solid var(--fg);border-radius:12px;background:var(--accent3);font-size:24px;line-height:1;letter-spacing:.5px;box-shadow:3px 3px 0 var(--shadow)}
.switch{display:flex;flex-direction:column;align-items:center}
#switch-control{position:relative}
.switch .timer{position:relative}
.time{position:static;display:block;font-size:28px;font-weight:700;text-shadow:2px 2px 0 var(--shadow);width:5ch;text-align:center;color:var(--fg);font-family:"Short Stack","Patrick Hand","Gloria Hallelujah","FallbackSans",sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.switch-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:999px;border:4px solid var(--fg);background:#fff;display:grid;place-items:center;box-shadow:4px 4px 0 var(--shadow);transition:transform .15s ease}
.switch-btn svg{color:var(--fg)}
.switch-btn svg *{stroke:currentColor !important}
.switch-btn:active{transform:translate(-50%,-50%) scale(.95) rotate(-5deg)}
body[data-debug="0"] .switch-btn{display:none}
/* Grain overlay + doodle emotes */
.grain{position:absolute;inset:0;z-index:10;pointer-events:none;mix-blend-mode:multiply;opacity:.5}
.emote{position:absolute;z-index:9;font-family:"Gloria Hallelujah","Patrick Hand",cursive;font-weight:700;color:var(--fg);text-shadow:2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 0 0 0 #fff;filter:drop-shadow(2px 2px 0 var(--shadow));animation:burst .8s ease-out forwards}
.emote.a{color:var(--accent)}
.emote.b{color:var(--accent2)}
.emote.c{color:#7ad96b}
.emote.d{color:#ffb86c}
.scrib{position:absolute;width:22px;height:22px;border:3px solid var(--fg);border-radius:60% 40% 60% 40% / 40% 60% 40% 60%;background:rgba(255,255,255,.7);box-shadow:2px 2px 0 var(--shadow);animation:burst .8s ease-out forwards}
.scrib.a{background:#ffe97a}
.scrib.b{background:#ffd6e6}
.scrib.c{background:#c5ff8a}
.scrib.d{background:#d9f1ff}
.wiggle{animation:wiggle 3.5s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:translateY(0) rotate(-1deg)}25%{transform:translateY(-1px) rotate(1deg)}50%{transform:translateY(1px) rotate(-2deg)}75%{transform:translateY(-.5px) rotate(2deg)}}
.swap-left{animation:flyLeft .7s cubic-bezier(.22,1,.36,1) both}
.swap-right{animation:flyRight .7s cubic-bezier(.22,1,.36,1) both}
@keyframes flyLeft{0%{transform:translateX(0) rotate(0)}50%{transform:translateX(100px) rotate(380deg)}100%{transform:translateX(0) rotate(720deg)}}
@keyframes flyRight{0%{transform:translateX(0) rotate(0)}50%{transform:translateX(-100px) rotate(-380deg)}100%{transform:translateX(0) rotate(-720deg)}}
.pulse{animation:pulse .8s ease-out 1}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.burst{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
/* burst variables (used by .emote / .scrib) */
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.6)}}
@keyframes spinLeft{from{transform:rotate(-20deg)}to{transform:rotate(340deg)}}
@keyframes spinRight{from{transform:rotate(20deg)}to{transform:rotate(-340deg)}}
@keyframes bob{0%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}100%{transform:translateY(0) rotate(-3deg)}}
@media (max-width:768px){
  :root{--playerSize:96px;--ringSize:120px}
  .time{font-size:24px}
  .player .label{font-size:20px}
  .switch-btn{width:64px;height:64px}
  .icon.mouse{margin-right:-32px}
  .icon.keyboard{margin-left:-32px}
  #switch-control{margin:0 -28px}
}