/* Head-to-head surfaces, in the same ink/parchment language as the rest of the trial. */
#vs-open{pointer-events:auto;font-family:ui-monospace,'Courier New',monospace;font-size:10px;letter-spacing:1.6px;color:#e3d8bd;background:none;border:0;margin:12px auto 0;min-height:40px;text-shadow:1px 2px 3px #11131d}
#vs-open:hover{color:#f3e3b6}
#vs-open span{color:#e5c581}

.vs-panel{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:430px;max-width:calc(100% - 32px);z-index:7;text-align:center;padding:38px 34px;background:transparent url('./assets/ink-panel.webp') center/106% 104% no-repeat;box-shadow:0 20px 70px #0a0b16cc}
.vs-panel:before{content:'';position:absolute;inset:8%;background:#121421c4;z-index:-1}
.vs-panel h2{font-family:Hound,Georgia,serif;font-size:30px;font-weight:400;line-height:1.15;margin:16px 0 12px;color:#eee2b8;text-shadow:2px 3px 0 #141523}
#vs-status{font-style:italic;font-size:15px;line-height:1.5;color:#ded4bc;margin:0 0 20px;min-height:44px}
.vs-field{display:block;text-align:left;margin:0 0 14px}
.vs-field span{display:block;font-family:ui-monospace,'Courier New',monospace;font-size:9px;letter-spacing:2px;color:#cfc3a6;margin-bottom:6px}
.vs-field input{width:100%;background:#0d0f1ab8;border:1px solid #d6ba7366;color:#f0e6c8;font:17px Hound,Georgia,serif;letter-spacing:1px;padding:12px 14px;min-height:46px}
.vs-field input:focus-visible{outline:2px solid #f1d98d;outline-offset:2px}
#vs-join-code{text-transform:uppercase;letter-spacing:8px;text-align:center;font-size:22px}
.vs-or{font-family:ui-monospace,'Courier New',monospace;font-size:9px;letter-spacing:2px;color:#bdb198;margin:16px 0 14px}
.vs-panel .primary{min-width:0;width:100%}
#vs-codeline{font-family:ui-monospace,'Courier New',monospace;font-size:10px;letter-spacing:2px;color:#cfc3a6;margin:6px 0 18px}
#vs-codeline b{display:block;font:44px Hound,Georgia,serif;letter-spacing:9px;color:#e5c581;margin-top:8px;text-shadow:2px 3px 0 #141523}
#vs-leave{margin-top:6px}
.vs-panel .prototype-note{margin-top:14px}

/* Rival column: a cheap, always-legible mirror of the other spire. */
#vs-rival{position:absolute;right:5%;top:42%;width:96px;z-index:4;pointer-events:none;text-align:right}
.vs-rival-label{display:block;font-family:ui-monospace,'Courier New',monospace;font-size:8px;letter-spacing:1.6px;color:#d8cdb2;text-shadow:1px 2px 3px #11131d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vs-rival-floors{display:block;font:34px Hound,Georgia,serif;font-weight:400;color:#eee2b8;line-height:1.3;text-shadow:2px 3px 0 #141624;font-variant-numeric:tabular-nums}
#vs-rival-stack{display:flex;flex-direction:column;align-items:flex-end;height:132px;overflow:hidden;margin-top:6px}
#vs-rival-stack i{display:block;flex:0 0 auto;height:5px;margin-bottom:1px;background:#93a3c4;border:1px solid #171525;box-shadow:0 0 0 1px #11131d55}
#vs-rival-stack i[data-perfect=true]{background:var(--jade)}

#vs-count{position:absolute;left:35%;right:15%;top:26%;text-align:center;font:clamp(80px,11vw,150px) Hound,Georgia,serif;color:#f0e4c4;text-shadow:4px 6px 0 #141526,0 0 40px #11131d;z-index:8;pointer-events:none;line-height:1}

#result-versus{border-top:1px solid #d6ba7355;margin-top:16px;padding-top:16px}
#result-verdict{font-family:Hound,Georgia,serif;font-size:21px;line-height:1.25;margin:0 0 10px;color:#eee2b8}
#result-versus[data-outcome=win] #result-verdict{color:#cfef9f}
#result-versus[data-outcome=loss] #result-verdict{color:#e8c39a}
#result-tally{display:block;font:34px Hound,Georgia,serif;font-weight:400;color:#e6cf98;letter-spacing:3px}
#result-tally-names,#result-record{display:block;font-family:ui-monospace,'Courier New',monospace;font-size:9px;letter-spacing:1.4px;color:#cfc3a6;margin-top:5px}
#result-record{margin-top:12px;font-size:11px;letter-spacing:2.2px;color:#e5c581}
#result-record:before{content:'RECORD ';color:#cfc3a6}

@media(max-width:760px){
  .vs-panel{padding:30px 24px;top:47%}
  .vs-panel h2{font-size:25px}
  #vs-status{font-size:13px;margin-bottom:15px;min-height:38px}
  #vs-codeline b{font-size:36px}
  #vs-rival{right:24px;top:auto;bottom:198px;width:74px}
  #vs-rival-floors{font-size:26px}
  #vs-rival-stack{height:84px}
  #vs-count{left:10%;right:10%;top:30%}
}
@media(orientation:landscape) and (max-height:550px){
  .vs-panel{padding:18px 24px;top:49%}
  .vs-panel h2{font-size:21px;margin:8px 0}
  #vs-status{min-height:0;margin-bottom:10px;font-size:12px}
  .vs-field{margin-bottom:8px}
  .vs-field input{min-height:38px;padding:8px 12px}
  #vs-join-code{font-size:18px}
  .vs-or{margin:8px 0}
  #vs-codeline b{font-size:30px;margin-top:4px}
  /* A 52px mini tower is unreadable and there is no room for it between the
     scoreboard and the beacon meter; landscape keeps the name and the count. */
  #vs-rival{top:auto;bottom:24%;width:82px}
  #vs-rival-floors{font-size:22px}
  #vs-rival-stack{display:none}
  #vs-count{top:8%}
}