#tileHud{position:fixed;inset:0;z-index:65;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;background:radial-gradient(ellipse at top,#f7f3d9,#d9e5ba);color:#43583c;overflow:auto;box-sizing:border-box;touch-action:manipulation;user-select:none;cursor:default}
#tileHud[hidden]{display:none}#tileHud header{display:flex;width:min(100%,1000px);justify-content:space-between;align-items:center}#tileHud h2{margin:0;font-size:25px}#tileHud button{background:#fff8e8;border:1px solid #b6bf92;border-radius:12px;padding:10px 18px;color:#46573a;font:inherit;cursor:pointer}
#tileHud .tile-status{font-weight:800;background:#fff9e9;border:1px solid #ccc29b;padding:9px 22px;border-radius:30px;text-align:center}#tileHud .tile-stage{position:relative;width:min(100%,740px,calc((100dvh - 230px)*1.125));aspect-ratio:900/800;border:2px solid #fff9e3;border-radius:24px;overflow:hidden;box-shadow:0 6px 0 #80966c40,0 15px 50px #4b6c4325;flex-shrink:0}#tileHud canvas{display:block;width:100%;height:100%;touch-action:none}
#tileHud .tile-banner{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;padding:10px 18px;text-align:center;white-space:pre-line;border:2px solid #c7bd8c;border-radius:16px;background:#fff9e9f2;font-weight:bold;font-size:18px;pointer-events:none}#tileHud .tile-banner.danger{color:#b3292f;border-color:#c84c42;background:#fff0e9}#tileHud .tile-help{font-size:13px;text-align:center;line-height:1.6;margin:0}#tileHud .tile-roster{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-height:70px;overflow:auto;width:min(100%,850px)}#tileHud .tile-roster span{font-size:11px;background:#fff8e5;padding:4px 8px;border-radius:8px;border:1px solid #c6ccaa}#tileHud .tile-roster .out{opacity:.4;text-decoration:line-through}
@media(max-width:600px){#tileHud{padding:10px;gap:8px}#tileHud .tile-stage{width:100%}#tileHud h2{font-size:21px}#tileHud .tile-banner{font-size:14px}#tileHud .tile-status{font-size:13px;padding:8px 12px}}
@media(max-height:500px){#tileHud{padding:6px;gap:4px}#tileHud header{position:absolute;top:8px;left:12px;width:calc(100% - 24px);pointer-events:none}#tileHud header button{pointer-events:auto}#tileHud h2{font-size:18px}#tileHud .tile-stage{width:min(70%,calc((100dvh - 95px)*1.125))}#tileHud .tile-roster{max-height:24px}#tileHud .tile-help{display:none}#tileHud .tile-status{font-size:12px;padding:4px 16px}}
#tileHud .tile-controls{display:flex;align-items:center;justify-content:center;gap:24px;flex-shrink:0}
#tileHud .tile-stick{display:none;position:relative;width:112px;height:112px;flex-shrink:0;border:3px solid #9aaf77;border-radius:50%;background:radial-gradient(circle,#eef0ce,#c2d5a4);box-shadow:inset 0 3px 9px #647b4030,0 3px 0 #8b9f6533;touch-action:none;user-select:none;cursor:grab}
#tileHud .tile-stick-arrows{position:absolute;inset:0;display:grid;place-items:center;color:#81976c;font-size:80px;line-height:1;opacity:.5;pointer-events:none}
#tileHud .tile-stick-knob{position:absolute;width:48px;height:48px;left:32px;top:32px;border-radius:50%;background:linear-gradient(#fffbea,#dce6bc);outline:2px solid #899d64;box-shadow:0 4px 8px #566b4945;pointer-events:none}
#tileHud .tile-stick.held{border-color:#5e8b5b;cursor:grabbing}
@media(any-pointer:coarse),(max-width:700px){#tileHud .tile-stick{display:block}#tileHud .tile-help{font-size:11px;text-align:left}#tileHud .tile-stage{width:min(100%,calc((100dvh - 310px)*1.125));min-width:260px}#tileHud .tile-roster{max-height:44px}}
@media(max-height:500px) and (any-pointer:coarse){#tileHud .tile-controls{position:absolute;bottom:25px;left:18px}#tileHud .tile-stage{width:min(70%,calc((100dvh - 95px)*1.125));min-width:0}#tileHud .tile-help{display:none}#tileHud .tile-stick{width:112px;height:112px}}
#tileHud .tile-play-area{display:flex;align-items:flex-start;justify-content:center;gap:16px;width:100%;flex-shrink:0}
#tileHud .tile-ranking{width:190px;flex-shrink:0;padding:14px 12px;box-sizing:border-box;border:2px solid #c5cba5;border-radius:18px;background:#fff9e9ed;box-shadow:0 4px 0 #8e9d6b25}
#tileHud .tile-ranking h3{margin:0 0 5px;font-size:16px}#tileHud .tile-goal{font-size:10px;color:#7b7956;margin-bottom:10px}#tileHud .tile-ranking ol{list-style:none;margin:0;padding:0;display:grid;gap:5px}#tileHud .tile-ranking li{display:flex;align-items:center;gap:7px;padding:7px 5px;border-radius:8px;background:#e9edd67a;font-size:11px}#tileHud .tile-ranking li.me{background:#c9e4b7;outline:1px solid #86ad72}#tileHud .tile-ranking li.out{opacity:.55}#tileHud .tile-ranking b{color:#8f7941;min-width:16px}#tileHud .tile-ranking span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}#tileHud .tile-ranking strong{white-space:nowrap;color:#966b2c}
@media(min-width:701px){#tileHud .tile-stage{width:min(calc(100vw - 270px),740px,calc((100dvh - 230px)*1.125))}}
@media(max-width:700px){#tileHud .tile-play-area{flex-direction:column;align-items:center;gap:8px}#tileHud .tile-ranking{width:100%;padding:8px 10px}#tileHud .tile-ranking h3{font-size:12px;display:inline;margin-right:8px}#tileHud .tile-goal{display:inline;font-size:10px}#tileHud .tile-ranking ol{grid-template-columns:1fr 1fr;gap:3px 8px;margin-top:6px}#tileHud .tile-ranking li{padding:3px 5px;font-size:10px;min-width:0}#tileHud .tile-stage{width:min(100%,calc((100dvh - 420px)*1.125));min-width:260px}#tileHud .tile-roster{display:none}}
@media(max-height:500px) and (min-width:701px){#tileHud .tile-stage{width:min(60%,calc((100dvh - 105px)*1.125))}#tileHud .tile-ranking{padding:8px;width:155px}#tileHud .tile-ranking li{padding:3px;font-size:10px}}

/* Right-hand joystick; instructions stay to its left. */
#tileHud .tile-controls .tile-help{order:1}
#tileHud .tile-controls .tile-stick{order:2}
@media(max-height:500px) and (any-pointer:coarse){#tileHud .tile-controls{left:auto;right:18px}}

#tileHud .tile-ranking h3 .tile-rank-mobile{display:none}
@media(any-pointer:coarse),(max-width:700px){
 #tileHud .tile-ranking li:nth-child(n+4){display:none}
 #tileHud .tile-ranking h3 .tile-rank-desktop{display:none}
 #tileHud .tile-ranking h3 .tile-rank-mobile{display:inline}
 #tileHud .tile-ranking ol{grid-template-columns:1fr;gap:3px}
 #tileHud .tile-ranking li{padding:3px 5px}
}