@font-face{font-family:"Cinzel";src:url("./assets/cinzel-beta.ttf") format("truetype");font-weight:400 900;font-style:normal;font-display:swap}
:root{color-scheme:dark;--title-ink:#fff1ce;--title-gold:#e5ca8b;--title-green:#142c22;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#14271f}
*{box-sizing:border-box}body{margin:0;min-width:320px}::selection{color:#17281e;background:#e5ca8b}
.title-screen{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:end;min-height:100svh;overflow:hidden;padding:40px 24px max(8svh,env(safe-area-inset-bottom))}
.title-landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.title-shade{position:absolute;inset:0;background:linear-gradient(transparent 35%,#06191018 48%,#061910a6 100%)}
.title-frame{position:absolute;inset:18px;border:1px solid #e5ca8ba3;outline:1px solid #e5ca8b40;outline-offset:5px;pointer-events:none}
.title-frame:before,.title-frame:after{content:"";position:absolute;width:14px;height:14px;border:1px solid #e5ca8b;background:#26432c;rotate:45deg}
.title-frame:before{left:-7px;top:-7px}.title-frame:after{right:-7px;bottom:-7px}
.title-menu{position:relative;min-width:0;width:min(490px,100%);text-align:center;z-index:1;animation:title-arrive 900ms cubic-bezier(.16,1,.3,1)}
.title-menu h1{margin:0 0 12px;font-size:1rem;line-height:1}
.title-menu h1 img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 8px #06140ccc)}
.title-menu nav{display:grid;gap:12px;width:min(290px,100%);margin:auto}
.title-action{display:grid;place-items:center;min-height:56px;padding:14px 24px;border-radius:12px;text-decoration:none;font-size:18px;font-weight:650;letter-spacing:.01em;transition:background 160ms,color 160ms;cursor:pointer}
.title-play{color:#172b21;background:#e3ca91;border:1px solid #fbe6b2}
.title-play:hover{background:#f3dda8}.title-tutorial{color:#f6e6c1;background:#142c22ed;border:1px solid #c0a774}
.title-tutorial:hover{background:#264434}.title-action:focus-visible{outline:3px solid #fff0bb;outline-offset:5px}
.title-action:active{background:#c7b27d;color:#15251d}
.title-screen.is-leaving{opacity:.7;transition:opacity 180ms ease}
@keyframes title-arrive{from{transform:translateY(16px);filter:blur(3px)}to{transform:none;filter:blur(0)}}
@media(max-width:600px){.title-screen{padding:28px 30px max(8svh,32px)}.title-frame{inset:12px}.title-landscape{object-position:58% center}.title-menu{width:400px;max-width:100%}.title-menu nav{width:270px;max-width:100%}.title-action{min-height:54px}.title-menu h1{margin-bottom:14px}.title-shade{background:linear-gradient(transparent 30%,#06191020 48%,#061910a6 100%)}}
@media(max-height:480px){.title-screen{padding-bottom:26px}.title-menu{width:320px}.title-menu nav{grid-template-columns:1fr 1fr;width:100%;gap:10px}.title-action{font-size:15px;min-height:46px;padding:10px}.title-menu h1{margin:0}}
@media(prefers-reduced-motion:reduce){.title-menu{animation:none}.title-action,.title-screen.is-leaving{transition:none}}
[hidden]{display:none!important}
.title-settings{position:absolute;z-index:2;top:max(24px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));left:24px;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px}
.title-settings .title-language{position:static;display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:0;padding:8px 12px}
.title-settings .title-language select{max-width:none;min-height:44px;width:100%;font-size:16px}
.title-screen:has(.title-settings){padding-top:140px}
@media(max-width:540px){.title-settings{left:20px;right:20px;display:grid;grid-template-columns:1fr 1fr}.title-settings .title-language{padding:7px 10px}.title-settings .title-language:last-child{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}.title-settings .title-language:last-child select{width:90px}.title-settings .title-language span{font-size:13px}.title-screen:has(.title-settings){padding-top:210px}}
.title-language{position:absolute;z-index:2;right:34px;top:32px;display:flex;align-items:center;gap:10px;padding:8px 12px;color:#fff1ce;background:#14271ff2;border:1px solid #b9a06a;border-radius:12px;font-size:14px}
.title-language select{min-height:36px;max-width:130px;background:#14271f;color:#fff1ce;border:0;font:inherit;cursor:pointer}
.title-menu h1.title-name{font-family:"Cinzel",serif;font-size:clamp(38px,5vw,66px);font-weight:700;line-height:1.05;letter-spacing:-.025em;color:#fff1ce;text-shadow:0 4px 14px #06140c;margin:0 0 16px;text-wrap:balance}
.title-phase{font-size:15px;color:#f3dda8;margin:0 0 22px}
.title-access{width:min(320px,100%);margin:auto;display:grid;gap:10px;text-align:left}
.title-access label{font-size:14px;color:#fff1ce}
.title-access input{width:100%;min-height:52px;padding:12px 14px;color:#fff1ce;background:#14271ff2;border:1px solid #b9a06a;border-radius:12px;font:inherit;caret-color:#e5ca8b}
.title-access input::placeholder{color:#d1c49d;font-size:14px}
.title-access .title-action{width:100%;font-family:inherit}
.title-access-message{margin:15px auto 0;max-width:340px;color:#f3e8ce;font-size:14px;line-height:1.5;background:#14271fe8;border-radius:8px;padding:7px 10px}
.title-access-message:empty{display:none}.title-access-message.has-error{color:#ffd5ba}
.title-demo{color:#f3e8ce;margin:18px 0 0;font-size:12px;text-shadow:0 2px 5px #06140c}
.title-retry{margin:10px auto 0;min-height:44px;padding:8px 18px;border:1px solid #b9a06a;border-radius:12px;color:#fff1ce;background:#14271f;font:inherit;cursor:pointer}
.title-action:disabled,.title-access input:disabled{opacity:.65;cursor:wait}
.title-language select:focus-visible,.title-access input:focus-visible,.title-retry:focus-visible{outline:3px solid #fff0bb;outline-offset:4px}
@media(max-width:600px){.title-language{right:24px;top:24px}.title-screen{padding-top:106px}.title-menu h1.title-name{font-size:42px}}
@media(max-height:560px){.title-screen{padding-top:90px;overflow:auto}.title-menu h1.title-name{font-size:36px}.title-phase{margin-bottom:12px}}
.title-action{font-size:22px;min-height:58px}
.title-settings .title-language span,.title-access label,.title-access-message,.title-access input::placeholder,.title-demo{font-size:16px;line-height:1.4}
.title-settings .title-language select,.title-access input{font-size:20px}
.title-settings{position:relative;top:auto;right:auto;left:auto;align-self:start;justify-self:end;max-width:100%}
.title-screen:has(.title-settings){grid-template-rows:auto 1fr;gap:30px;padding-top:max(24px,env(safe-area-inset-top))}
@media(max-width:540px){.title-settings{left:auto;right:auto;width:100%}.title-settings .title-language:nth-child(3){grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}.title-settings .title-language:nth-child(3) select{width:90px}.title-settings .title-language span{font-size:16px}.title-screen:has(.title-settings){padding-top:24px}.title-settings .title-language{padding:7px 10px}}