*,*::before,*::after{box-sizing:border-box}
:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#1f2a37;background:#eaf3fd;font-synthesis:none;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:linear-gradient(#cfe6fb 0,#eaf3fd 320px,#f5f8fb 100%)}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Login */
.site-gate{min-height:100dvh;display:grid;place-items:center;padding:24px}
.gate-card{width:100%;max-width:340px;border:1px solid #cfdcec;background:#fff;border-radius:14px;padding:30px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 30px #4a6f9c1a}
.gate-card h1{font-size:26px;margin:0}
.gate-card p{margin:-6px 0 4px;color:#61748f;font-size:13px}
.gate-card label{font-size:12px;color:#4b5d75}
.gate-card input{width:100%;padding:11px 12px;border:1px solid #cdd9e8;border-radius:8px;background:#fbfdff}
.gate-card input:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}
.error{margin:0;color:#c2410c;font-size:12px}
.error:empty{display:none}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:600;background:#3f7a2e;color:#fff}
.button:hover{background:#356826}

/* Page */
.app{max-width:1100px;margin:0 auto;padding:18px 16px 32px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.title{display:flex;align-items:center;gap:10px;margin:0;font-size:22px}
.title img{width:26px;height:26px;image-rendering:pixelated}
.topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.text-button{font-size:13px;color:#4b5d75;padding:7px 4px}
.text-button:hover{color:#1f2a37;text-decoration:underline}

/* Arena */
.minecraft-characters{--character-height:360px;--character-width:360px;position:relative;padding:0 0 16px;border:1px solid #c5d8ee;border-radius:16px;background:#fff;isolation:isolate;overflow:hidden}
.character-arena{position:relative;height:calc(var(--character-height) + 66px);overflow:hidden;background:linear-gradient(#bfe0fb,#e4f2fd 70%,#f2f8fd)}
/* Grass block ground: green top, dirt below. Characters stand at 66px. */
.character-arena::before{content:"";position:absolute;inset:auto 0 0;height:66px;background:linear-gradient(#6aa84f 0 9px,#5b9443 9px 13px,#8b5e3c 13px,#7a5234 100%);box-shadow:inset 0 1px #8fcf6c}
.character-arena::after{content:"";position:absolute;inset:auto 0 0;height:53px;background:repeating-linear-gradient(90deg,#0000 0 22px,#00000014 22px 26px),repeating-linear-gradient(#0000 0 14px,#00000010 14px 17px);pointer-events:none}
.minecraft-character{position:absolute;left:50%;bottom:66px;width:var(--character-width);height:var(--character-height);transform:translateX(-50%);text-align:center;z-index:2}
.minecraft-character button:focus-visible{outline:2px solid #2563eb;outline-offset:4px;border-radius:8px}
.minecraft-character:hover .character-caption{color:#fff}
.character-stage{position:relative;z-index:1;display:block;width:100%;height:100%;padding:0}
.character-canvas{position:relative;display:block;z-index:1;width:100%;height:100%;pointer-events:none}
.character-shadow{position:absolute;bottom:-3px;left:50%;width:32%;height:7px;border-radius:50%;background:#1e3a1240;filter:blur(4px);transform:translateX(-50%)}
.character-caption{position:absolute;z-index:4;left:50%;top:calc(100% + 18px);transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:32px;padding:0 8px;border-radius:8px;color:#f4f8ee;white-space:nowrap;text-shadow:0 1px 2px #0006}
.character-caption strong{font-size:14px;font-weight:650;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.character-arrow{font-size:12px;opacity:.75}
.character-tiny{width:calc(var(--character-height)*.1*var(--atk-scale,1));height:calc(var(--character-height)*.1*var(--atk-scale,1));z-index:3}
.character-tiny .character-shadow{bottom:-1px;height:2px;filter:blur(1px)}
.character-error{position:absolute;inset:auto 0 0;text-align:center;font-size:12px;color:#96a6bd}
.is-controlled .character-caption strong{text-decoration:underline;text-decoration-color:#ffffffa0;text-underline-offset:5px}
.character-health{display:flex;gap:1px;position:absolute;z-index:4;left:50%;top:calc(100% + 6px);transform:translateX(-50%);width:max-content;height:8px;pointer-events:none}
.minecraft-character:not(.character-tiny) .character-health{top:28px}
.character-hearts{display:flex;gap:1px}
.mc-heart{position:relative;width:8px;height:8px;flex-shrink:0}
.mc-heart svg{width:8px;height:8px;display:block}
.heart-fill{position:absolute;inset:0 auto 0 0;width:100%;overflow:hidden}
.character-health.hurt{filter:brightness(1.6)}
.character-hp-value,.character-deaths{font-size:9px;line-height:9px;color:#3d4f66;margin-left:5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.character-puff{position:absolute;bottom:0;left:50%;width:4px;height:4px;background:#dce1e8;box-shadow:-6px -4px #f1f3f6,6px -2px #c7d0dd,-3px -10px #dce1e8,5px -12px #f1f3f6;opacity:0;pointer-events:none;z-index:3}
.character-apple{position:absolute;z-index:3;left:50%;top:36%;width:max(10px,11%);image-rendering:pixelated;pointer-events:none;transform:translateX(-50%);animation:apple-bite .4s ease-in-out infinite alternate}
.character-tiny .character-apple{top:auto;bottom:calc(100% + 2px);width:12px}
@keyframes apple-bite{to{transform:translateX(-50%) translateY(-3px) rotate(-14deg)}}
/* Arrows fly above the ground, drawn from the Minecraft item texture. */
.arena-arrows{position:absolute;inset:0;pointer-events:none;z-index:5}
.arena-arrow{position:absolute;bottom:0;left:0;image-rendering:pixelated;transform-origin:50% 50%;will-change:transform}

/* Controls: a walking pad on the left, labelled actions on the right. */
.arena-note{margin:12px 16px 0;padding:9px 12px;border-radius:9px;background:#fff7e6;border:1px solid #f3dca8;color:#7a5418;font-size:13px;text-align:center}
.arena-controls{display:flex;align-items:stretch;justify-content:center;gap:14px;margin:14px 16px 0;padding:12px;border:1px solid #dbe6f2;border-radius:16px;background:linear-gradient(#fbfdff,#f1f6fb)}
.arena-controls button{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid #cfdcec;border-bottom-width:3px;border-radius:12px;background:#fff;color:#3d5a80;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .06s,background-color .15s}
.arena-controls button:hover{background:#f3f8ff;border-color:#a9c3e6}
.arena-controls button:active,.arena-controls button.held{transform:translateY(2px);border-bottom-width:1px;background:#eaf2fd}
.arena-controls button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.arena-controls button:disabled{opacity:.42;cursor:default;transform:none}
.arena-controls img,.arena-controls svg{image-rendering:pixelated;pointer-events:none}
.arena-controls kbd{position:absolute;top:4px;right:5px;padding:0 4px;border-radius:4px;background:#eef3f9;font:600 9px/14px Inter,"Segoe UI",sans-serif;color:#7186a3}
.dpad{display:flex;gap:6px;padding-right:14px;border-right:1px solid #dbe6f2}
.dpad button{width:66px;color:#2f4b70}
.dpad button.held{color:#2563eb}
.actions{display:flex;gap:8px}
.action{width:66px;height:66px}
.action-label{font-size:11px;font-weight:600;color:#53698a}
.action[aria-pressed=true],.action.active{background:#e6f3dd;border-color:#76b25a;color:#2e5d1c}
.action[aria-pressed=true] .action-label,.action.active .action-label{color:#2e5d1c}
/* Cooldown: a tint drains from the top as the action gets ready again. */
.arena-controls .cooldown{position:absolute;inset:auto 0 0;height:0;background:#3d5a8026;pointer-events:none}

/* Players */
.arena-roster{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px 16px 0;padding:0;list-style:none}
.arena-roster button{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:7px 12px 7px 8px;border:1px solid #dbe6f2;border-radius:12px;background:#fff;text-align:left}
.arena-roster button:hover{border-color:#a9c3e6}
.arena-roster button.me{border-color:#9ccc85;background:#f6fbf2}
.roster-face{grid-row:span 2;width:32px;height:32px;border-radius:6px;image-rendering:pixelated;background:#e5edf6}
.roster-name{font-size:13px;font-weight:650;color:#24364f}
.roster-name em{margin-left:6px;padding:1px 6px;border-radius:999px;background:#6aa84f;color:#fff;font:600 10px/16px Inter,"Segoe UI",sans-serif;font-style:normal;vertical-align:1px}
.roster-meta{font-size:11px;color:#7a8ba3}
.roster-state::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#c3ccd8;vertical-align:0}
[data-presence=active] .roster-state::before{background:#34b36b}
[data-presence=away] .roster-state::before{background:#e5a93a}

/* Who you are */
.me-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid #c9d8ea;border-radius:10px;background:#fff;font-size:13px;font-weight:650;color:#24364f}
.me-chip canvas{width:24px;height:24px;border-radius:5px;image-rendering:pixelated;background:#e5edf6}

/* Character card */
.info-dialog{width:min(360px,calc(100vw - 32px));border:1px solid #cfdcec;border-radius:14px;padding:0;box-shadow:0 20px 50px #1e3a5f33}
.info-dialog::backdrop{background:#0f1f3340}
.info-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #e6edf6}
.info-head h2{margin:0;font-size:18px}
.info-head span{font-size:12px;color:#7a8ba3}
.icon-button{width:34px;height:34px;border-radius:8px;font-size:20px;color:#5a6b82}
.icon-button:hover{background:#eef3f9}
.info-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px}
.info-stats span{display:block;font-size:11px;color:#7a8ba3;margin-bottom:4px}
.info-stats strong{font-size:22px;font-weight:650;color:#24364f;font-variant-numeric:tabular-nums}
.info-stats [data-stat=height] strong{color:#3f7a2e}

@media(max-width:600px){
  .app{padding:12px 12px 24px}
  .minecraft-characters{--character-height:300px;--character-width:300px;border-radius:12px}
  /* Phones: the actions in a row of five, the walking pad wide underneath for the thumbs. */
  .arena-controls{flex-direction:column-reverse;gap:10px;margin:12px 10px 0;padding:10px}
  .dpad{padding:0;border:0}
  .dpad button{flex:1;height:58px}
  .actions{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
  .action{width:auto;height:62px}
  .arena-controls kbd{display:none}
  .arena-roster{margin:10px 10px 0}
}
@media(max-width:360px){.minecraft-characters{--character-height:270px;--character-width:270px}}
@media(prefers-reduced-motion:reduce){.character-apple{animation:none}}
.character-tiny .character-hp-value,.character-tiny .character-deaths{color:#fff;text-shadow:0 1px 1px #0009}
/* Sayoniac is 163 cm to Minceley's 170: her box is that much shorter, so her model is drawn smaller. */
.minecraft-character[data-mc-player="1"]{width:calc(var(--character-width)*163/170);height:calc(var(--character-height)*163/170)}
/* Squeezed between both giants: a purple glow, rising sparks and the shrinking height above him. */
.minecraft-character{transform-origin:50% 100%}
.character-tiny.squeezed::before{content:"";position:absolute;left:50%;bottom:-6px;width:56px;height:56px;margin-left:-28px;border-radius:50%;background:radial-gradient(circle,#c084fc99,#a855f733 55%,#0000 70%);animation:squeeze-glow .45s ease-in-out infinite alternate;pointer-events:none;z-index:0}
.character-tiny.squeezed::after{content:"";position:absolute;left:50%;bottom:4px;width:3px;height:3px;background:#f5d0fe;box-shadow:-10px -6px #e9d5ff,9px -12px #f0abfc,-4px -20px #fae8ff,12px -26px #e9d5ff,-12px -32px #f5d0fe;animation:squeeze-sparks .9s linear infinite;pointer-events:none;z-index:4}
@keyframes squeeze-glow{from{transform:scale(.85);opacity:.7}to{transform:scale(1.15);opacity:1}}
@keyframes squeeze-sparks{from{transform:translateY(0);opacity:1}to{transform:translateY(-22px);opacity:0}}
/* Under atkw, in the ground strip, where his name usually is (the name steps aside while it shows). */
.squeeze-label{position:absolute;left:50%;top:calc(100% + 22px);transform:translateX(-50%);padding:3px 9px;border-radius:999px;background:#6b21a8;color:#fff;font:700 12px/18px Inter,"Segoe UI",sans-serif;white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:0 2px 8px #6b21a855;z-index:6;pointer-events:none}
@media(prefers-reduced-motion:reduce){.character-tiny.squeezed::before,.character-tiny.squeezed::after{animation:none}}
.info-stats [data-stat=kills] strong{color:#b91c1c}
.info-stats [data-stat=assists] strong{color:#a16207}
.character-tiny.label-shown .character-caption{visibility:hidden}