/* The feel test page. Deliberately plain: the arena is the thing being judged, not this. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b1024;color:#e9f6ff;font-family:Nunito,system-ui,sans-serif;overflow:hidden}
#view,#hud{position:fixed;inset:0;width:100%;height:100%;display:block}
#hud{pointer-events:none}
.panel{position:fixed;z-index:3;background:linear-gradient(160deg,#2c4079,#1f2350);border:3px solid #87a9ec;border-radius:22px;box-shadow:0 12px 0 #0e1b40aa,0 30px 90px #000a}
#start{left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 32px));padding:26px}
#start h1{margin:0 0 8px;font:400 44px/1 'Lilita One',Nunito,sans-serif;letter-spacing:.02em;color:#fff}
.lead{margin:0 0 16px;font-size:15px;line-height:1.5;color:#c0cfe9}
.keys{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0}
.keys li{padding:7px 11px;border-radius:999px;background:#101a3d;border:2px solid #3d5591;font-size:13px;color:#c0cfe9}
.keys b{color:#7de7ff}
button{padding:13px 20px;border-radius:13px;border:2px solid #386446;background:#baff38;color:#163626;font:1000 16px Nunito,sans-serif;cursor:pointer;box-shadow:0 4px 0 #386446}
button:active{transform:translateY(2px);box-shadow:0 2px 0 #386446}
button:disabled{opacity:.5;cursor:progress}
.note{margin:12px 0 0;font-size:12.5px;color:#8ea3cf}
.tune{right:16px;top:16px;width:270px;padding:16px}
.tune h2{margin:0 0 10px;font:400 20px/1 'Lilita One',Nunito,sans-serif}
.tune label{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;margin-bottom:9px;font:800 11px Nunito,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8ea3cf}
.tune input{grid-column:1/2;width:100%}
.tune output{font:900 13px ui-monospace,monospace;color:#baff38}
@media (max-width:700px){.tune{display:none}}

/* The greeting for someone who walked in through the plaza door: the world is already running behind it. */
#hint{position:fixed;left:50%;bottom:16%;transform:translateX(-50%);z-index:4;margin:0;padding:11px 20px;border-radius:999px;
 background:#101a3dcc;border:2px solid #3d5591;font:900 13px Nunito,sans-serif;letter-spacing:.14em;color:#baff38;
 animation:hintPulse 2.2s ease-in-out infinite;pointer-events:none;backdrop-filter:blur(6px)}
@keyframes hintPulse{0%,100%{opacity:.75}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){#hint{animation:none}}

/* ---- touch controls ---- */
/* Thumb-sized, out of the way of the middle of the screen, and clear of the notch and the home bar. */
.atouch{position:fixed;inset:0;z-index:5;pointer-events:none}
.atouch button{position:absolute;pointer-events:auto;border-radius:50%;border:2px solid #4a63a5;
 background:#101a3d99;color:#c0cfe9;font:900 12px Nunito,sans-serif;letter-spacing:.08em;
 backdrop-filter:blur(6px);-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none}
.atouch button:active,.atouch button.on{background:#1d2f66cc;border-color:#7de7ff;color:#e9f6ff}
.atouch-fire{right:max(22px,env(safe-area-inset-right));bottom:max(26px,env(safe-area-inset-bottom));
 width:96px;height:96px;border-color:#baff38;background:#2a3f16aa}
.atouch-fire::after{content:"";position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
 width:26px;height:26px;border-radius:50%;background:#baff38;box-shadow:0 0 18px #baff3899}
.atouch-fire.on{background:#4a6b1fcc;border-color:#e6ff9a}
/* Jump is small and sits up and to the left of fire, where the thumb rolls to it without leaving the trigger.
   An arrow, not a word: two buttons need no labels. */
.atouch-jump{right:max(128px,calc(env(safe-area-inset-right) + 106px));bottom:max(104px,calc(env(safe-area-inset-bottom) + 78px));width:58px;height:58px}
.atouch-jump::after{content:"";position:absolute;left:50%;top:54%;width:14px;height:14px;border-left:3px solid #c0cfe9;border-top:3px solid #c0cfe9;transform:translate(-50%,-50%) rotate(45deg)}
.atouch-stick{position:absolute;width:0;height:0;pointer-events:none}
.atouch-stick::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 width:148px;height:148px;border-radius:50%;border:2px solid #3d559188;background:#0d162f66}
.atouch-stick.run::before{border-color:#baff3899}
.atouch-stick i{position:absolute;left:50%;top:50%;width:62px;height:62px;border-radius:50%;
 background:#7de7ffcc;box-shadow:0 0 22px #7de7ff66;transform:translate(-50%,-50%)}
.atouch-stick.run i{background:#baff38cc;box-shadow:0 0 22px #baff3866}
/* Portrait is unplayable for this, so say so rather than letting somebody try. */
#rotate{position:fixed;inset:0;z-index:20;display:none;place-items:center;text-align:center;
 background:#080c1cf2;color:#e9f6ff;font:800 15px Nunito,sans-serif;padding:32px;line-height:1.6}
@media (hover:none) and (pointer:coarse) and (orientation:portrait){#rotate{display:grid}}
@media (hover:none) and (pointer:coarse){
  /* The entrance card is a phone card on a phone. */
  #start{width:calc(100% - 24px);padding:20px}
  #start h1{font-size:34px}
  .keys{display:none}
}

/* After a match: the results are drawn on the HUD, and the next match is this one button under them. */
#after{position:fixed;left:50%;bottom:max(28px,6vh);transform:translateX(-50%);z-index:6;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100vw - 32px)}
#after button{font-size:18px;padding:15px 30px;letter-spacing:.06em}
/* display:flex above would otherwise beat the hidden attribute, and the buttons would sit over a match in progress. */
#after[hidden]{display:none}
/* The way out is always there, and always second: a quiet button next to the one that keeps you playing. */
button.quiet{background:#1f2a55;color:#e9f0ff;border-color:#87a9ec;box-shadow:0 4px 0 #0e1b40}
button.quiet:active{box-shadow:0 2px 0 #0e1b40}
.start-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}