:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,sans-serif}*,:before,:after{box-sizing:border-box}body{color:#e8e8f0;background:#1a1a2e;place-items:center;min-height:100svh;margin:0;display:grid}#game{aspect-ratio:1;height:min(80svh,92vw);position:relative}#game canvas{display:block}#login:not([hidden]),#request-access:not([hidden]){text-align:center;align-content:center;place-items:center;gap:1rem;padding:1rem;display:grid;position:fixed;inset:0}#request-access p{max-width:26rem;margin:0}#login button,#request-access button,#menu button{cursor:pointer;padding:.6rem 1.4rem;font-size:1rem}#dialog:not([hidden]){z-index:5;background:#0c0c1ceb;border:2px solid #e8e8f0;border-radius:.5rem;padding:.75rem 1rem;position:absolute;inset:auto 3% 3%}#dialog p{margin:0}#dialog-more{opacity:.75;font-size:.8rem;position:absolute;bottom:.6rem;right:.9rem}#dialog-question:not([hidden]){gap:.6rem;margin-top:.6rem;display:flex}#dialog-question button{cursor:pointer;color:inherit;background:#ffffff14;border:2px solid #0000;border-radius:.4rem;flex:1;padding:.5rem .75rem;font-size:.95rem}#dialog-question button.selected{border-color:#f8fafc}#menu:not([hidden]){z-index:10;background:#0000008c;place-items:center;gap:.75rem;display:grid;position:fixed;inset:0}#bag:not([hidden]),#dragons:not([hidden]),#naming:not([hidden]),#characters:not([hidden]){z-index:11;background:#000000a6;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.panel{text-align:left;background:#15152a;border:1px solid #2e2e4a;border-radius:.75rem;gap:1rem;width:min(28rem,100%);max-height:90%;padding:1.25rem;display:grid;overflow-y:auto}.panel h2,.panel h3{margin:0}.panel button{cursor:pointer;padding:.5rem 1rem;font-size:.95rem}.panel p{margin:0}.panel .note{opacity:.7;font-size:.9rem}#bag-list,#dragon-list{gap:.5rem;margin:0;padding:0;list-style:none;display:grid}#bag-list li{background:#ffffff0f;border-radius:.5rem;grid-template-columns:1fr auto;gap:.25rem .75rem;padding:.5rem .75rem;display:grid}#bag-list .count{opacity:.8}#bag-list .description{opacity:.75;grid-column:1/-1;font-size:.9rem}#dragon-list li{background:#ffffff0f;border-radius:.5rem;grid-template-columns:auto 1fr;align-items:center;gap:.75rem;padding:.5rem .75rem;display:grid}#dragon-list .portrait{width:2rem;height:2rem;display:block}#dragon-list .detail{opacity:.75;font-size:.9rem}#naming-form{gap:.6rem;display:grid}#naming-input{color:inherit;background:#0f0f20;border:1px solid #2e2e4a;border-radius:.4rem;padding:.5rem .6rem;font-size:1rem}#character-list{gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.character-row{background:#ffffff0f;border-radius:.5rem;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.75rem;padding:.5rem .75rem;display:grid}.character-row .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.character-row button{padding:.35rem .7rem;font-size:.85rem}.character-row .active-tag{opacity:.7;font-size:.85rem}.shape-preview{width:2rem;height:2rem;display:block}#character-create{border-top:1px solid #2e2e4a;gap:.6rem;padding-top:1rem;display:grid}#character-name{color:inherit;background:#0f0f20;border:1px solid #2e2e4a;border-radius:.4rem;padding:.5rem .6rem;font-size:1rem}.option-row{flex-wrap:wrap;gap:.5rem;display:flex}.swatch,.shape-option{cursor:pointer;background:#ffffff0f;border:2px solid #0000;border-radius:.5rem;width:2.25rem;height:2.25rem;padding:0}.swatch.selected,.shape-option.selected{border-color:#f8fafc}#controls:not([hidden]){touch-action:manipulation;background:#15152a;border-top:1px solid #2e2e4a;grid-template-columns:1fr 1fr;align-items:center;gap:1rem;padding:1rem;display:grid;position:relative}#controls button{color:#e8e8f0;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none;background:#ffffff1f;border:none;border-radius:.5rem;outline:none;width:3.25rem;height:3.25rem;font-size:1.25rem;transition:transform 60ms,box-shadow 60ms;box-shadow:0 3px #00000073}#controls button[data-pressed]{transform:translateY(3px);box-shadow:0 0 #00000073}#dpad{grid-template-areas:".up.""left.right"".down.";justify-self:start;gap:.4rem;display:grid}#dpad .up{grid-area:up}#dpad .left{grid-area:left}#dpad .right{grid-area:right}#dpad .down{grid-area:down}#actions{grid-auto-flow:column;justify-self:end;gap:1.3rem;display:grid}#actions button{border-radius:50%}#actions .a{translate:0 -.9rem}#actions .b{translate:0 .9rem}#menu-toggle{width:auto;height:auto;padding:.55rem 1rem;position:absolute;bottom:1.5rem;left:50%;translate:-50%}@media (pointer:coarse) and (orientation:portrait){body{grid-template-rows:auto 1fr;justify-items:stretch;padding-top:12svh}#game{width:100vw;height:auto}#controls:not([hidden]){align-content:center;align-self:stretch}}@media (pointer:coarse) and (orientation:landscape){#game{height:min(90svh,100vw)}#controls:not([hidden]){background:0 0;border-top:none;padding:1rem 1.5rem;position:fixed;inset:auto 0 0}}