/* Classic fantasy HUD: dark metal, warm parchment, brass edges. */
:root{--ink:#f6edcf;--muted:#c4b89b;--gold:#e5bd65;--edge:#afa17e;--panel:#282923}body{background:#827c46;font-family:'Gulim','Malgun Gothic',sans-serif;color:var(--ink)}#game:after{content:'';position:absolute;inset:0;pointer-events:none;border:4px ridge #b5aa8d;box-shadow:inset 0 0 0 1px #302d23;z-index:18}.brand{display:none}.panel{background:linear-gradient(110deg,#34362eed,#1c211eed);border:3px ridge #b2a483;box-shadow:inset 0 0 0 1px #161c1c,0 2px 3px #28241580;border-radius:1px}.panel:before{content:'';position:absolute;width:7px;height:7px;background:radial-gradient(#f2df99,#78633d);border:1px solid #392c19;border-radius:50%;top:2px;left:2px;pointer-events:none}.status{top:12px;left:12px;width:217px;padding:9px;gap:8px;min-height:78px;background:linear-gradient(120deg,#6e6548e8,#242922ed)}.portrait{border-radius:50%;width:54px;height:54px;flex-shrink:0;border:3px ridge #c8c3ac;background:radial-gradient(#696b55,#1d221d);box-shadow:0 0 0 2px #30251a;color:#eed89b;font-size:25px}.name{font-size:12px;line-height:21px;color:#fff5ce;text-shadow:1px 1px #000}.name span{display:block;float:none;font-size:10px;color:#e7c670;margin:1px 0}.status .bar{position:fixed;left:calc(50% - 182px);width:364px;height:13px;margin:0;border:2px ridge #b1aa8d;border-radius:0;background:#211e1a;box-shadow:0 1px 1px #0c1011}.status .hp{top:12px}.status .mp{top:28px}.hp i{background:linear-gradient(#ff8a69 0%,#d12826 42%,#831411 85%,#ed6e4f 100%)}.mp i{background:linear-gradient(#8ae8f9,#167bc1 42%,#194e8b 85%,#57cbeb)}.bar span{font-size:10px;top:-1px;color:white}.bar b{font-size:8px;top:-1px;color:#fff}.right{right:12px;top:78px;width:195px}.map{position:fixed;left:12px;bottom:152px;width:173px;padding:7px;background:linear-gradient(#535b46ee,#302f24f5);border-color:#b9bda7}.maptitle{font-size:11px;padding-bottom:6px;color:#f6eac7}.maptitle small{display:none}#minimap{height:100px;border:1px solid #ebe1ba;background:#c1b27d;image-rendering:auto}.mapfooter{font-size:9px;color:#f0e0b0;padding-top:5px}.live-dot{background:#45ee71}.quest{margin:0;padding:12px;background:linear-gradient(#272d24dd,#20251ddd);border-width:2px;border-color:#9a8f67}.quest h2{font:700 15px 'Gulim',sans-serif;color:#f4db88;margin:9px 0}.eyebrow{font:9px 'Gulim',sans-serif;letter-spacing:1px;color:#cbb97e}.quest p{font-size:11px;color:#e1dfcb;line-height:1.65}.quest-progress{font-size:10px;margin-top:12px}.quest-track{background:#121710;height:5px;border:1px solid #85764f;margin:8px 0 10px}.quest-track i{background:linear-gradient(#e5d27a,#9a7b25)}.reward{color:#a8a48c;font-size:9px;gap:7px}.reward span{color:#f2d78c}.location{top:65px;color:#fff4c8;text-shadow:1px 1px #171a15,0 1px 3px #201d17}.location small,.location p{display:none}.location h2{font:700 19px 'Gulim',sans-serif;letter-spacing:2px;margin:8px}.bottom{bottom:23px;left:12px;right:12px;height:114px;gap:12px;align-items:flex-end}.bottom:before{content:'';position:absolute;z-index:-1;left:-12px;right:-12px;bottom:-7px;height:110px;border-top:5px ridge #afa88e;background:repeating-linear-gradient(100deg,#3c3b33 0,#35372e 3px,#3b3a30 5px);box-shadow:0 -2px #3b3221,0 -5px #d1bf89}.log{position:relative;width:285px;height:104px;padding:7px;background:#101916e8;border:3px ridge #999783;box-shadow:inset 0 0 10px #000}.log nav{font-size:10px;border-bottom:1px solid #686346;padding-bottom:5px;color:#e3d5a3}.log nav span{color:#9baf9a;letter-spacing:0;font-size:8px}#messages{height:72px;font-size:11px;line-height:1.65;color:#dcdac1}#messages div:first-child{color:#f9e78e}.actionbar{left:56%;bottom:2px}.actions{gap:3px;padding:6px;background:linear-gradient(#79776a,#33362e 20%,#22251e 70%,#777260);border:4px ridge #c2b995;box-shadow:0 0 0 1px #30271b}.actions button{width:54px;height:57px;border:2px ridge #b5a16c;border-radius:0;background:radial-gradient(ellipse at 35% 20%,#5c5842,#1c251f 80%);box-shadow:inset 0 0 0 1px #181a10}.actions button:hover{background:radial-gradient(#827448,#35483a);border-color:#ffe28c}.actions button>span{color:#ffe6a2;line-height:33px;font-size:26px;text-shadow:1px 2px #0a110e}.actions #magic>span{color:#8be9ff}.actions button small{font-size:9px;color:#f2e7c2}.actions kbd{top:2px;left:3px;color:#f3d87f;font:8px Arial,sans-serif}.actions #magic small{font-size:8px;letter-spacing:-1px}.bottle{color:#ff7474!important}.divider{background:#ab9d6a;margin:2px}.actionbar p{color:#c9bfa2;font-size:9px;text-shadow:1px 1px #111;margin:6px 0 0}.utilities{padding:0 3px 7px 0}.utilities button{background:linear-gradient(#777b71,#373f38 45%,#242c25);border:2px ridge #bab7a0;border-radius:2px;color:#e8dcb5;height:30px}.coins{font-size:14px;color:#ffda65;text-shadow:1px 1px #080c09;margin-bottom:10px}.xp{height:16px;background:#1a211d;border-top:2px ridge #c0b28d;z-index:2}.xp i{height:4px;background:linear-gradient(#d5f364,#5da51e)}.xp span{font:8px Arial,sans-serif;letter-spacing:1px;color:#dfd8ac}.zoomtools{right:12px;top:312px;padding:3px;gap:8px;border-width:2px;background:#30392c}.zoomtools button{width:25px;height:25px;font-size:16px;border:1px ridge #c3b68a;background:linear-gradient(#77775d,#3b4336);color:#f5e5b0}.zoomtools span{font-size:10px}#toast{background:#1a241ce6;color:#ffe899;border:2px ridge #b7a66f;border-radius:0;font-size:12px}#dialog,.modal{border:4px ridge #b7a788;background:linear-gradient(125deg,#454637,#242b24);box-shadow:inset 0 0 0 1px #151b15,0 7px 24px #0009}#dialog h2,.modal h2{font:700 21px 'Gulim',sans-serif;color:#eed58c}#dialog p,.modal>p,dd{color:#e6e1cb}#dialog button,.itemrow button{background:linear-gradient(#968056,#574d34);border:2px ridge #d8c38d;border-radius:1px;color:#fff0c8}.itemrow{border-color:#797452}.itemrow p{color:#c5bda5}.itemrow em{color:#ead87d}.modal footer{color:#d9cba9;border-color:#807249}.close{color:#f2dcaa}.modal>small,#dialog small{color:#bfa876}.modal footer strong{color:#f8d362}#loading{background:#292e25}#loading h1{color:#edda9d}.sigil{color:#c8a566}#creation{background:radial-gradient(ellipse at 50% 45%,#514a2740,#111a18cc);backdrop-filter:blur(2px)}.createcard{background:linear-gradient(125deg,#e5d8b5f7,#c4af7cf7);color:#3a3020;border:6px ridge #ab9160;box-shadow:inset 0 0 0 2px #f0e6c4,0 20px 65px #141b15cc;border-radius:2px}.createcard>small{color:#75603b;letter-spacing:2px}.createcard h1{font:bold 28px 'Gulim',sans-serif;color:#45331e;text-shadow:0 1px #f9edc7}.createcard p{color:#6b5e40}.createbody canvas{background:radial-gradient(ellipse,#f9f1d077,#b0a07911 67%);border-color:#98824e}.createfields label{color:#62502c;font-weight:bold}.createfields input,.createfields select{background:#f5ebd0;color:#403722;border:2px inset #b5a475;border-radius:1px;font:13px 'Gulim',sans-serif}.createfields button{background:linear-gradient(#7c7350,#3c4933);color:#fff0bc;border:3px ridge #c7b27b;border-radius:1px}.createfields button:hover{background:linear-gradient(#958254,#52613a)}
@media(max-width:1050px){.log{width:230px}.actionbar{left:57%}.status{width:195px}.status .bar{width:280px;left:calc(50% - 140px)}}
@media(max-width:760px){.status{top:10px;left:10px;width:160px;padding:5px;min-height:56px}.portrait{display:grid;width:36px;height:36px;font-size:18px}.name{font-size:10px;line-height:15px}.name span{font-size:8px}.status .bar{left:180px;width:calc(100vw - 195px);max-width:250px}.right{top:62px;right:10px;width:145px}.map{left:10px;bottom:105px;width:126px;padding:5px}.map #minimap{height:76px}.maptitle{font-size:9px}.quest{padding:7px}.quest h2{font-size:12px}.quest p{font-size:9px}.zoomtools{top:245px;right:10px}.bottom{bottom:23px;left:10px;right:10px;height:73px}.bottom:before{height:77px}.log{display:none}.actionbar{position:relative;left:0;bottom:0;transform:none}.actions{padding:3px;border-width:3px}.actions button{width:44px;height:51px}.actions button small{font-size:8px}.actions #magic small{font-size:7px}.actionbar p{display:none}.utilities{padding-bottom:0}.coins{margin-bottom:4px}.location{top:57px;left:42%}.location h2{font-size:14px}.createcard{padding:20px}.createcard h1{font-size:21px}}
.bottom:before{z-index:0}.bottom .log,.bottom .utilities{position:relative;z-index:1}.bottom .actionbar{z-index:1}.bottom .coins{position:relative;z-index:1}.panel{background-color:#242820}.actionbar p{color:#ddd3b0}