html,body{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:#05060f;height:100%;margin:0;overflow:hidden}body{box-sizing:border-box;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#game{width:100%;height:100%}.rotate-advice{display:none}@media (orientation:portrait) and (pointer:coarse){.rotate-advice{z-index:10;color:#fff;text-align:center;background:#05060feb;flex-direction:column;justify-content:center;align-items:center;padding:24px;font:700 26px/1.4 Segoe UI,Trebuchet MS,system-ui,sans-serif;display:flex;position:fixed;inset:0}.rotate-advice:before{content:"⟳";color:#4fd8ff;margin-bottom:16px;font-size:64px;display:block}}.name-entry{z-index:20;box-sizing:border-box;-webkit-user-select:text;user-select:text;touch-action:manipulation;background:#05060fb8;padding:12px;font-family:Segoe UI,Trebuchet MS,system-ui,sans-serif;font-size:clamp(14px,2.2vmin,24px);display:flex;position:fixed;inset:0;overflow-y:auto}.name-entry__form{box-sizing:border-box;isolation:isolate;background:#070b1c;border:2px solid #4fd8ff;flex-direction:column;gap:.55em;width:min(30em,100%);margin:auto;padding:1.7em 2.4em 2.1em;animation:.22s ease-out name-entry-open;display:flex;position:relative}.name-entry__form--framed{background:0 0;border:none}@keyframes name-entry-open{0%{opacity:0;transform:translateY(-1em)}}@media (prefers-reduced-motion:reduce){.name-entry__form{animation:none}}.name-entry__frame{z-index:-1;border-style:solid;border-width:2.7em 5.3em 2.5em;border-image-slice:90 178 84 176 fill;border-image-width:2.7em 5.3em 2.5em;position:absolute;inset:0}.name-entry__crest{pointer-events:none;width:7.4em;position:absolute;bottom:.1em;left:50%;transform:translate(-50%)}.name-entry__title{color:#fff;text-align:center;text-shadow:0 0 .5em #4fd8ff;font-size:1.7em;font-weight:700}.name-entry__plate{--cut:.6em;--line:#3a4370;--fill:#05060f;z-index:0;background:var(--line);clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));transition:background-color .12s;position:relative}.name-entry__plate:before{content:"";z-index:-1;background:var(--fill);clip-path:inherit;position:absolute;inset:2px}.name-entry__field:focus-within{--line:#4fd8ff}.name-entry__input{box-sizing:border-box;width:100%;font:inherit;color:#fff;background:0 0;border:none;outline:none;padding:.5em .8em;font-size:max(16px,1.25em);display:block}.name-entry__input::placeholder{color:#7d87b3}.name-entry__hint{color:#8f9bc4;text-align:center;margin:0;font-size:.85em}.name-entry__gender{border:none;min-width:0;margin:0;padding:0}.name-entry__gender legend{color:#c8d3f5;text-align:center;width:100%;padding:0 0 .3em;font-size:.95em}.name-entry__choices{gap:.8em;display:flex}.name-entry__choice{cursor:pointer;flex:1;min-width:0}.name-entry__choice input{opacity:0;position:absolute}.name-entry__tile{color:#8f9bc4;flex-direction:column;align-items:center;gap:.25em;padding:.5em;font-size:1.05em;display:flex}.name-entry__portrait{object-fit:cover;opacity:.55;width:5.6em;height:5.6em;transition:opacity .12s}.name-entry__choice:hover .name-entry__tile{--line:#6a78b0}.name-entry__choice input:checked+.name-entry__tile{--line:#4fd8ff;--fill:#0c2233;color:#fff;font-weight:700}.name-entry__choice input:checked+.name-entry__tile .name-entry__portrait{opacity:1}.name-entry__choice input:focus-visible+.name-entry__tile{--line:#ff8a3d}.name-entry__error{color:#ff8a3d;text-align:center;min-height:1.35em;margin:0;font-size:.95em}.name-entry__buttons{justify-content:center;gap:.8em;display:flex}.name-entry__button{--line:#4fd8ff;--fill:#4fd8ff;max-width:11em;font:inherit;color:#05060f;cursor:pointer;border:none;outline:none;flex:1;padding:.5em 1em;font-size:1.1em;font-weight:700}.name-entry__button--secondary{--line:#3a4370;--fill:#070b1c;color:#c8d3f5}.name-entry__button:hover,.name-entry__button:focus-visible{--line:#fff}.name-entry__button--secondary:hover,.name-entry__button--secondary:focus-visible{--line:#4fd8ff}@media (height<=480px){.name-entry{padding:4px 12px}.name-entry__form{grid-template-columns:minmax(0,1fr) 15em;grid-template-areas:"title gender""field gender""hint gender""error gender""buttons buttons";gap:.35em 1.4em;width:min(46em,100%);padding:1.3em 2.2em 1.7em;display:grid}.name-entry__title{grid-area:title;font-size:1.4em}.name-entry__field{grid-area:field}.name-entry__hint{grid-area:hint}.name-entry__error{grid-area:error}.name-entry__gender{grid-area:gender}.name-entry__buttons{grid-area:buttons}.name-entry__portrait{width:4.2em;height:4.2em}}
