html,body{color:#e0d6c0;background:#0c0a0e;height:100%;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden}canvas{display:block}#intro{pointer-events:none;background:#0009;border:1px solid #5a4a30;max-width:min(420px,100vw - 32px);padding:12px 16px;font-size:13px;line-height:1.5;position:absolute;top:16px;left:16px}#intro h1{letter-spacing:.1em;color:#e0b060;margin:0 0 6px;font-size:18px}#intro ul{margin:6px 0 0;padding-left:18px}#intro a{color:#e0b060;pointer-events:auto}#intro>section{display:none}#intro:not([data-game])>section[data-game=adventure],#intro[data-game=adventure]>section[data-game=adventure],#intro[data-game=arena]>section[data-game=arena]{margin-bottom:8px;display:block}#intro .loading{color:#e0b060;margin:6px 0 0}#intro .save-note{color:#f08060;margin:6px 0 0}#characters{pointer-events:auto;margin-top:10px}#characters h2{letter-spacing:.05em;color:#e0b060;margin:0 0 6px;font-size:14px}#characters .slot{align-items:stretch;gap:6px;margin-top:6px;display:flex}#characters button,.page-dialog button{font:inherit;color:#e8dcc0;cursor:pointer;background:#3a2e1e;border:1px solid #8a7040;padding:6px 10px}#characters .card,#characters .make{text-align:left;flex:1}#characters .card b,#characters .card span{display:block}#characters .card span{color:#b8ab90}#characters .slot[data-picked] .card{background:#5a4424;border-color:#e0b060}#characters .slot[data-picked] .card b:before{content:"▶ ";color:#e0b060}#characters .slot[data-kind] .card{cursor:default;color:#b8ab90}#characters .make{color:#b8ab90;border-style:dashed}#characters .delete,.page-dialog button[value=yes]{color:#ffd0b0;border-color:#b05a3a}#first-character{background:#14100c99;border:1px solid #5a4a30;margin:6px 0 0;padding:8px 10px}#first-character .buttons{justify-content:flex-end;margin-top:10px;display:flex}.page-dialog{max-width:min(400px,100vw - 32px);color:inherit;font:inherit;background:#14100cf2;border:1px solid #5a4a30;padding:14px 18px;font-size:14px;line-height:1.5}.page-dialog::backdrop{background:#00000080}.page-dialog h2{letter-spacing:.05em;color:#e0b060;margin:0 0 6px;font-size:16px}.page-dialog form>button,.page-dialog .buttons{justify-content:flex-end;gap:10px;margin-top:12px;display:flex}.page-dialog form>button{margin-left:auto}:is(.page-dialog,#first-character) fieldset{border:0;margin:0;padding:0}:is(.page-dialog,#first-character) legend,:is(.page-dialog,#first-character) label.name{color:#b8ab90}:is(.page-dialog,#first-character) .class-card{cursor:pointer;border:1px solid #5a4a30;margin-top:6px;padding:8px 10px;display:block}:is(.page-dialog,#first-character) .class-card:has(input:checked){background:#3a2e1e;border-color:#e0b060}:is(.page-dialog,#first-character) .class-card input{margin:0 6px 0 0}:is(.page-dialog,#first-character) .class-card span{color:#b8ab90;display:block}:is(.page-dialog,#first-character) label.name{margin-top:10px;display:block}:is(.page-dialog,#first-character) input[name=name]{box-sizing:border-box;width:100%;font:inherit;color:#e8dcc0;background:#1a140e;border:1px solid #8a7040;margin-top:4px;padding:6px 8px;display:block}#viewer-hud{white-space:pre;pointer-events:none;background:#0009;border:1px solid #5a4a30;max-width:calc(100vw - 32px);padding:12px 16px;font-size:13px;line-height:1.5;position:absolute;top:16px;left:16px;overflow:hidden}#viewer-hud b{color:#e0b060}.touch-buttons,.touch-pad{display:none}body.touch #viewer-hud{padding:8px 10px;font-size:12px;line-height:1.4}body.touch .touch-buttons{white-space:normal;flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}body.touch .touch-pad{display:block}body.touch canvas,.touch-buttons,.touch-pad{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.touch-buttons button,.touch-rise button{pointer-events:auto;font:inherit;color:#e0d6c0;background:#0000008c;border:1px solid #5a4a30;border-radius:6px}.touch-buttons button{min-width:52px;padding:8px 10px}.touch-buttons button[aria-pressed=true]{color:#16131a;background:#e0b060;border-color:#e0b060}.touch-stick{background:#0000004d;border:2px solid #e0d6c073;border-radius:50%;width:120px;height:120px;position:fixed;bottom:24px;left:20px}.touch-stick div{background:#e0b060cc;border-radius:50%;width:50px;height:50px;position:absolute;top:35px;left:35px}.touch-rise{flex-direction:column;gap:12px;display:flex;position:fixed;bottom:24px;right:20px}.touch-rise button{width:60px;height:54px;font-size:22px}@media (orientation:portrait){.touch-stick,.touch-rise{bottom:88px}}