:root { color-scheme: dark; --cream:#f5e7bd; --ink:#18231f; --green:#6c9e61; }
* { box-sizing: border-box; }
body {
  margin: 0; width:100vw; height:100vh; padding:18px; overflow:hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 20%, #344d3c 0, #18231f 55%, #101713 100%);
  color: var(--cream); font-family: Georgia, 'Times New Roman', serif;
}
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.15; background-image:radial-gradient(#fff 0.7px,transparent .8px); background-size:7px 7px; }
main { width:min(calc(100vw - 36px),calc((100vh - 36px) * 16 / 9)); height:auto; aspect-ratio:16/9; padding:0; }
.titlebar { display:flex; align-items:end; justify-content:space-between; margin-bottom:12px; }
.eyebrow { color:#a9ce98; font:700 11px/1.2 system-ui; letter-spacing:.24em; }
h1 { margin:2px 0 0; font-size:clamp(28px,4vw,45px); font-weight:normal; letter-spacing:.02em; }
button { border:1px solid #8cb27d; border-radius:4px; background:#31513c; color:#f7ebca; padding:10px 17px; cursor:pointer; font:700 12px system-ui; letter-spacing:.05em; box-shadow:inset 0 1px #73916e; }
button:hover { background:#42664c; transform:translateY(-1px); }
.game-shell { position:relative; overflow:hidden; border:2px solid #7f704d; border-radius:5px; background:#111; box-shadow:0 12px 35px #0008; width:100%; height:100%; }
canvas { width:100%; height:100%; display:block; object-fit:fill; image-rendering:auto; outline:none; }
.inventory-button{position:absolute;right:14px;bottom:14px;width:48px;height:48px;padding:0;display:none;place-items:center;background:#222f2aee;border:2px solid #ad925a;z-index:3}.inventory-button.ready{display:grid}.inventory-button span{font-size:22px;color:#dfc27a}.inventory-button b{position:absolute;right:-5px;bottom:-5px;background:#d5ba76;color:#20261f;border:1px solid #fff1bd;border-radius:3px;padding:2px 5px;font:700 10px system-ui}
.overlay { position:absolute; inset:0; display:grid; place-items:center; background:#122018a8; backdrop-filter:blur(2px); transition:.3s; }
.overlay.hidden { opacity:0; pointer-events:none; }
.journey-loading{position:absolute;inset:0;z-index:30;overflow:hidden;background:linear-gradient(#08131f 0 54%,#172922 54% 100%);transition:opacity .55s;font-family:Georgia,serif}.journey-loading.hidden{opacity:0;pointer-events:none}.journey-loading::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 23%,#e9d99b28 0 3%,transparent 18%),linear-gradient(165deg,transparent 54%,#263e31 54.3% 61%,#0c1714 61.4%);opacity:.9}.loading-moon{position:absolute;right:14%;top:10%;width:72px;height:72px;border-radius:50%;background:#ebdfa8;box-shadow:0 0 35px #d5c88377}.loading-silhouette{position:absolute;left:0;right:0;bottom:22%;height:90px;border-bottom:18px solid #080f0d}.loading-silhouette i{position:absolute;bottom:0;width:8px;background:#08100d;transform-origin:bottom}.loading-silhouette i::before{content:"";position:absolute;width:42px;height:42px;left:-17px;top:-25px;border-radius:50%;background:#0a1612;box-shadow:-15px 10px 0 #0a1612,15px 9px 0 #0a1612}.loading-silhouette i:nth-child(1){left:14%;height:68px;transform:rotate(-3deg)}.loading-silhouette i:nth-child(2){left:34%;height:48px;transform:rotate(4deg)}.loading-silhouette i:nth-child(3){right:18%;height:78px;transform:rotate(2deg)}.loading-copy{position:absolute;left:8%;bottom:7%;width:46%;text-shadow:0 2px 3px #000}.loading-copy small{color:#d8bc65;font:700 8px system-ui;letter-spacing:.3em}.loading-copy h2{margin:2px 0;color:#fff0c5;font-size:25px;font-weight:normal}.loading-copy p{margin:0 0 9px;color:#aebcae;font:9px system-ui}.loading-copy em{display:block;margin-top:5px;color:#84988a;font:italic 8px Georgia}.loading-track{height:3px;background:#34443d;overflow:hidden}.loading-track span{display:block;width:45%;height:100%;background:linear-gradient(90deg,#8a6e35,#f1d171,#8a6e35);animation:journey-load 1.35s ease-in-out infinite}@keyframes journey-load{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
.consumable-actions{position:absolute;right:7px;bottom:6px;display:flex;gap:4px}.consumable-actions button{padding:4px 6px;font-size:7px}
.item.consumable-equipped{border-color:#e1c36e;box-shadow:inset 0 0 7px #0008,0 0 0 1px #8b7040}.action-equipped{position:absolute;left:-3px;top:-4px;min-width:13px;height:13px;padding:1px;border-radius:50%;background:#d7b65e;border:1px solid #fff0b5;color:#172019;font:700 8px/9px system-ui;font-style:normal}.equipped-consumable{display:block;margin-top:3px;color:#e4c66e;font:700 7px system-ui;letter-spacing:.06em}
.tutorial-callout{position:absolute;z-index:9;pointer-events:none}
.tutorial-click-arrow{position:absolute;z-index:26;width:104px;padding:3px 5px;text-align:center;pointer-events:none;color:#ffe58b;background:#172019b8;border:1px solid #d8bd6888;border-radius:4px;filter:drop-shadow(0 2px 3px #0009);animation:tutorial-arrow-bob .75s ease-in-out infinite alternate}.tutorial-click-arrow.hidden{display:none}.tutorial-click-arrow span{display:block;height:15px;color:#ffe477b8;font:18px/14px system-ui}.tutorial-click-arrow b{display:block;color:#fff0bccc;font:700 7px/10px system-ui;letter-spacing:.08em}.tutorial-click-arrow.below span{transform:rotate(180deg)}@keyframes tutorial-arrow-bob{from{transform:translateY(-2px)}to{transform:translateY(2px)}}
.skill-node.skill-equipped{box-shadow:inset 0 0 0 1px #e2c76b,0 0 9px #d4b65455}.skill-node.skill-equipped::after{content:'EQUIPPED';color:#ffe38a}.skill-node.skill-equipped em{color:#f4d570}
.inventory{position:absolute;inset:9% 11%;z-index:5;display:flex;flex-direction:column;color:#e9dfc3;background:linear-gradient(135deg,#17231fee,#202f29f5);border:2px solid #b99a5c;border-radius:7px;box-shadow:0 15px 50px #000c,inset 0 0 0 4px #2d4137;transition:opacity .18s,transform .18s;backdrop-filter:blur(5px);font-family:system-ui,sans-serif}
.inventory.hidden{opacity:0;transform:scale(.97);pointer-events:none}.inventory-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #796b49}.inventory-head small{color:#93b18e;font-size:9px;letter-spacing:.2em}.inventory-head h2{margin:1px 0 0;font:normal 22px Georgia,serif}.inventory-head button{font-size:23px;width:34px;height:34px;padding:0}.inventory-body{display:grid;grid-template-columns:35% 65%;min-height:0;flex:1}.equipment,.storage{padding:14px 17px;min-height:0}.equipment{border-right:1px solid #645d45}.inventory h3{margin:0 0 10px;color:#d8c58e;font:normal 15px Georgia,serif}.gear-slots{display:grid;grid-template-columns:1fr 1fr;gap:5px}.gear-slot{height:38px;display:flex;align-items:center;gap:7px;padding:5px 7px;text-align:left;background:#101a17;border:1px solid #536057;border-radius:3px;color:#c9c8b8;font:10px system-ui;box-shadow:none}.gear-slot:hover{transform:none;background:#263a31}.gear-slot .slot-icon{display:grid;place-items:center;width:25px;height:25px;background:#29352f;border:1px solid #746c50;color:#e2c878;font-size:16px}.gear-slot em{display:block;color:#74877b;font-size:8px;font-style:normal}.gear-slot.filled em{color:#e8dfc6}.stats{display:flex;gap:6px;margin-top:8px}.stats span{flex:1;padding:6px;background:#111b18;border:1px solid #46544a;color:#91a697;font-size:9px}.stats b{float:right;color:#e3c873}.storage-title{display:flex;justify-content:space-between}.storage-title span{color:#869b8b;font-size:10px}.categories{display:flex;gap:3px;margin-bottom:9px}.categories button{flex:1;padding:6px 3px;border-color:#4c5d52;background:#1a2823;color:#99aa9e;font-size:9px;box-shadow:none}.categories button.active{background:#785b37;color:#fff0c2;border-color:#c3a361}.item-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;align-content:start;min-height:92px}.item{position:relative;aspect-ratio:1;padding:0;display:grid;place-items:center;background:#111b18;border:1px solid #4d5b51;box-shadow:inset 0 0 7px #0008;color:white;font-size:20px}.item:hover,.item.selected{transform:none;border-color:#e1c36e;background:#29382f}.item .qty{position:absolute;right:2px;bottom:1px;font:700 8px system-ui;text-shadow:1px 1px #000}.item-details{height:52px;margin-top:9px;padding:8px 10px;border:1px solid #4b584e;background:#111a18;color:#9cac9e;font-size:10px;line-height:1.4}.item-details strong{display:block;color:#ead9aa;font:normal 13px Georgia,serif}.inventory footer{display:flex;justify-content:space-between;padding:8px 17px;border-top:1px solid #645d45;color:#87998e;font-size:9px}.inventory footer kbd{padding:2px 5px;font-size:8px}
/* Compact paper-doll equipment layout. */
.inventory-body{grid-template-columns:39% 61%}.equipment,.storage{padding:11px 14px}.inventory h3{margin-bottom:6px}.gear-slots{position:relative;display:block;height:208px;border:1px solid #45544b;background:radial-gradient(ellipse at center,#304239 0,#111a17 72%);border-radius:4px;overflow:hidden}.paper-doll{position:absolute;left:50%;top:10px;width:70px;height:190px;transform:translateX(-50%);opacity:.5}.doll-head{position:absolute;left:24px;top:0;width:22px;height:27px;border-radius:45% 45% 38% 38%;background:#7b8780}.doll-neck{position:absolute;left:30px;top:24px;width:10px;height:10px;background:#68756e}.doll-body{position:absolute;left:14px;top:31px;width:42px;height:62px;clip-path:polygon(15% 0,85% 0,100% 100%,0 100%);background:#65736c}.doll-arm{position:absolute;top:37px;width:13px;height:70px;border-radius:8px;background:#59665f}.doll-arm.left{left:2px;transform:rotate(7deg)}.doll-arm.right{right:1px;transform:rotate(-7deg)}.doll-leg{position:absolute;top:89px;width:19px;height:87px;border-radius:0 0 8px 8px;background:#53605a}.doll-leg.left{left:14px;transform:rotate(2deg)}.doll-leg.right{right:13px;transform:rotate(-2deg)}
.gear-slot{position:absolute;width:34px;height:34px;padding:0;display:grid;place-items:center;background:#101a17e8;border:1px solid #687368;border-radius:3px;box-shadow:0 2px 7px #0009;z-index:2}.gear-slot:hover{transform:none;background:#34473d;border-color:#d6b969}.gear-slot .slot-icon{width:26px;height:26px;font-size:16px}.gear-slot>span:not(.slot-icon){display:none}.gear-slot.filled .slot-icon{background:#55472f;border-color:#d3b15d}.slot-helmet{left:calc(50% - 17px);top:5px}.slot-amulet{left:calc(50% + 28px);top:39px}.slot-armour{left:calc(50% - 17px);top:48px}.slot-weapon{left:9px;top:61px}.slot-ring1{left:9px;top:105px}.slot-ring2{right:9px;top:105px}.slot-belt{left:calc(50% - 17px);top:85px}.slot-pants{left:calc(50% - 17px);top:124px}.slot-shoes{left:calc(50% - 17px);top:165px}.stats{margin-top:6px}.stats span{padding:4px}.item-grid{grid-template-columns:repeat(7,1fr);min-height:78px}.item-details{height:48px;margin-top:7px;padding:6px 8px}.inventory footer{padding:6px 14px}
/* Smaller window, larger and more recognizable equipment artwork. */
.inventory{inset:13% 16%}.inventory-head{padding:8px 13px}.inventory-head h2{font-size:18px}.inventory-head button{width:29px;height:29px;font-size:19px}.inventory-body{grid-template-columns:41% 59%}.equipment,.storage{padding:8px 11px}.gear-slots{height:208px}.paper-doll{top:7px;transform:translateX(-50%) scale(.92);transform-origin:top center}.gear-slot{width:42px;height:42px}.gear-slot .slot-icon{width:34px;height:34px;font-size:23px;background:#202d27}.slot-helmet{left:calc(50% - 21px);top:1px}.slot-amulet{left:calc(50% + 28px);top:35px}.slot-armour{left:calc(50% - 21px);top:46px}.slot-weapon{left:5px;top:51px}.slot-ring1{left:5px;top:102px}.slot-ring2{right:5px;top:102px}.slot-belt{left:calc(50% - 21px);top:89px}.slot-pants{left:calc(50% - 21px);top:132px}.slot-shoes{left:calc(50% - 21px);top:165px}.stats{margin-top:4px}.inventory footer{display:none}.categories button{font-size:8px;padding:5px 2px}.item-grid{grid-template-columns:repeat(6,1fr)}
/* Let the equipment paper doll occupy the full left side of the inventory. */
.inventory-body{grid-template-columns:47% 53%}.equipment{display:flex;flex-direction:column;padding:8px}.storage{padding:8px 10px}.gear-slots{height:auto;min-height:0;flex:1}.paper-doll{top:18px;transform:translateX(-50%) scale(1.12);transform-origin:top center}.gear-slot{width:44px;height:44px}.gear-slot .slot-icon{width:36px;height:36px;font-size:25px}.slot-helmet{left:calc(50% - 22px);top:7px}.slot-amulet{left:calc(50% + 39px);top:48px}.slot-armour{left:calc(50% - 22px);top:62px}.slot-weapon{left:12px;top:72px}.slot-ring1{left:12px;top:126px}.slot-ring2{right:12px;top:126px}.slot-belt{left:calc(50% - 22px);top:111px}.slot-pants{left:calc(50% - 22px);top:160px}.slot-shoes{left:calc(50% - 22px);bottom:4px}.stats{flex:none}.item-grid{grid-template-columns:repeat(5,1fr)}
/* Large full-height character silhouette with slots anchored to body regions. */
.paper-doll{top:8px;transform:translateX(-50%) scale(1.35);opacity:.78;filter:drop-shadow(0 5px 5px #0009)}.doll-head{background:#929d96;border:1px solid #afbab2}.doll-body{background:linear-gradient(90deg,#596861,#7c8982 48%,#52615a);box-shadow:inset 0 0 0 1px #929e97}.doll-arm{background:#5c6963;box-shadow:inset 0 0 0 1px #77847d}.doll-leg{background:linear-gradient(90deg,#46534d,#65726b)}
.gear-slot{width:46px;height:46px;border-width:2px}.gear-slot .slot-icon{width:38px;height:38px;font-size:27px}.slot-helmet{left:calc(50% - 23px);top:3px}.slot-amulet{left:calc(50% + 47px);top:44px}.slot-armour{left:calc(50% - 23px);top:65px}.slot-weapon{left:9px;top:66px}.slot-ring1{left:9px;top:126px}.slot-ring2{right:9px;top:126px}.slot-belt{left:calc(50% - 23px);top:116px}.slot-pants{left:calc(50% - 23px);top:169px}.slot-shoes{left:calc(50% - 23px);bottom:2px}
/* Clean, uniformly enlarged and centered paper doll. */
.gear-slots{background:radial-gradient(ellipse at center,#34483e 0,#17231f 65%,#0e1613 100%);box-shadow:inset 0 0 22px #0008}
.paper-doll{left:50%;top:50%;width:70px;height:190px;transform:translate(-50%,-50%) scale(1.3);transform-origin:center;opacity:.72;filter:drop-shadow(0 6px 5px #000a)}
.gear-slot{z-index:4;width:50px;height:50px;background:#111a18ed}.gear-slot .slot-icon{width:42px;height:42px;font-size:29px}.slot-helmet{left:calc(50% - 25px);top:2px}.slot-amulet{left:calc(50% + 48px);top:44px}.slot-armour{left:calc(50% - 25px);top:58px}.slot-weapon{left:7px;top:60px}.slot-ring1{left:7px;top:122px}.slot-ring2{right:7px;top:122px}.slot-belt{left:calc(50% - 25px);top:111px}.slot-pants{left:calc(50% - 25px);top:164px}.slot-shoes{left:calc(50% - 25px);bottom:1px}
/* User-defined equipment hierarchy; intentionally no character silhouette. */
.paper-doll{display:none}.gear-slots{background:linear-gradient(145deg,#1c2b25,#101814);box-shadow:inset 0 0 20px #0008}
.gear-slot{width:48px;height:48px}.gear-slot .slot-icon{width:40px;height:40px;font-size:27px}
.slot-helmet{left:calc(50% - 24px);top:3px}.slot-amulet{left:calc(50% + 40px);top:7px}
.slot-armour{left:calc(50% - 36px);top:57px;width:72px;height:67px}.slot-armour .slot-icon{width:62px;height:57px;font-size:38px}
.slot-weapon{left:8px;top:67px;width:54px;height:58px}.slot-weapon .slot-icon{width:46px;height:50px;font-size:32px}
.slot-enhancer{right:8px;top:67px;width:54px;height:58px}.slot-enhancer .slot-icon{width:46px;height:50px;font-size:31px;color:#9ed6db;text-shadow:0 0 8px #65c7d3}
.slot-belt{left:calc(50% - 38px);top:130px;width:76px;height:27px}.slot-belt .slot-icon{width:68px;height:19px;font-size:18px}
.slot-ring1{left:16px;top:130px;width:42px;height:42px}.slot-ring2{right:16px;top:130px;width:42px;height:42px}.slot-ring1 .slot-icon,.slot-ring2 .slot-icon{width:34px;height:34px;font-size:24px}
.slot-pants{left:calc(50% - 30px);top:163px;width:60px;height:48px}.slot-pants .slot-icon{width:52px;height:40px;font-size:29px}
.slot-shoes{left:calc(50% - 33px);bottom:2px;width:66px;height:35px}.slot-shoes .slot-icon{width:58px;height:27px;font-size:22px}
/* Full-coverage equipment slots: use every available part of the left panel. */
.inventory-body{grid-template-columns:50% 50%}.equipment{padding:7px}.equipment .stats{display:none}.gear-slots{width:100%;height:auto;flex:1;min-height:0}
.slot-helmet{left:calc(50% - 31px);top:1px;width:62px;height:58px}.slot-helmet .slot-icon{width:52px;height:48px;font-size:35px}
.slot-amulet{left:calc(50% + 48px);top:3px;width:56px;height:54px}.slot-amulet .slot-icon{width:46px;height:44px;font-size:31px}
.slot-armour{left:calc(50% - 48px);top:64px;width:96px;height:88px}.slot-armour .slot-icon{width:84px;height:76px;font-size:50px}
.slot-weapon{left:5px;top:68px;width:70px;height:80px}.slot-weapon .slot-icon{width:60px;height:70px;font-size:43px}
.slot-enhancer{right:5px;top:68px;width:70px;height:80px}.slot-enhancer .slot-icon{width:60px;height:70px;font-size:42px}
.slot-belt{left:calc(50% - 52px);top:158px;width:104px;height:34px}.slot-belt .slot-icon{width:92px;height:24px;font-size:24px}
.slot-ring1{left:10px;top:155px;width:52px;height:52px}.slot-ring2{right:10px;top:155px;width:52px;height:52px}.slot-ring1 .slot-icon,.slot-ring2 .slot-icon{width:42px;height:42px;font-size:31px}
.slot-pants{left:calc(50% - 41px);top:198px;width:82px;height:58px}.slot-pants .slot-icon{width:70px;height:46px;font-size:40px}
.slot-shoes{left:calc(50% - 45px);bottom:2px;width:90px;height:43px}.slot-shoes .slot-icon{width:78px;height:31px;font-size:30px}
.card { width:min(370px,80%); padding:30px; text-align:center; border:2px solid #d9c184; border-radius:6px; background:#20372fed; box-shadow:0 12px 40px #0008, inset 0 0 0 4px #294a3a; }
.card .leaf { color:#ebcc70; font-size:25px; }
.card h2 { margin:8px 0; font-size:26px; font-weight:normal; }
.card p { margin:0 auto 20px; color:#c5d6bc; font:14px/1.5 system-ui; }
.card small { display:block; margin-top:13px; color:#93ae8d; font:11px system-ui; }
.card{width:min(480px,88%);padding:23px 28px}.gender-select{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.gender-option{display:grid;grid-template-columns:38px 1fr;grid-template-rows:1fr 1fr;text-align:left;padding:9px 12px;background:#17251f;border-color:#536a59}.gender-option>span{grid-row:1/3;align-self:center;font:26px Georgia;color:#91b591}.gender-option strong{align-self:end;color:#e9ddb9;font:normal 14px Georgia}.gender-option small{align-self:start;margin:0;color:#718878;font:8px system-ui}.gender-option.selected{background:#3c583f;border-color:#dfc475;box-shadow:0 0 0 2px #8f7546}.name-field{display:block;text-align:left}.name-field>span{display:block;margin-bottom:5px;color:#a6bb9e;font:700 8px system-ui;letter-spacing:.15em}.name-field input{width:100%;padding:10px 12px;color:#f4e5bd;background:#101a16;border:1px solid #627263;border-radius:4px;outline:none;font:14px Georgia}.name-field input:focus{border-color:#d1b66e;box-shadow:0 0 0 2px #806d4344}.creation-hint{height:17px;padding-top:5px;color:#be8d7e;font:9px system-ui}.card #play:disabled{opacity:.4;cursor:not-allowed;transform:none}
.help { display:flex; gap:25px; justify-content:center; flex-wrap:wrap; padding:17px; color:#b9cbb2; font:12px system-ui; }
kbd { display:inline-block; min-width:23px; margin:0 2px; padding:4px 6px; text-align:center; color:#f3e5bb; background:#2b4034; border:1px solid #58705c; border-bottom-width:3px; border-radius:4px; font:11px system-ui; }
@media(max-width:600px){ main{width:100vw;padding:0}.titlebar,.help{display:none}.game-shell{border-width:0;border-radius:0;width:100vw;height:100vh;aspect-ratio:auto}.card{padding:20px}.inventory{inset:2%}.inventory-body{grid-template-columns:42% 58%}.item-grid{grid-template-columns:repeat(4,1fr)}.categories{display:grid;grid-template-columns:1fr 1fr}.gear-slot{height:34px;padding:3px}.gear-slot .slot-icon{width:21px;height:21px}.inventory-head{padding:8px 12px}.equipment,.storage{padding:9px}.inventory footer{display:none} }
@media(max-width:600px){body{padding:8px}main{width:min(calc(100vw - 16px),calc((100vh - 16px) * 16 / 9));height:auto;aspect-ratio:16/9}.game-shell{width:100%;height:100%;aspect-ratio:16/9;border-width:1px}}

/* Account gateway and character roster. */
.account-overlay,.character-overlay{z-index:20;background:radial-gradient(circle at 50% 30%,#284337e8,#101915f7 75%);backdrop-filter:blur(5px)}
.account-card{width:min(390px,86%);padding:25px 30px;text-align:center;background:linear-gradient(145deg,#20372ff5,#14241ef8);border:2px solid #b99a5c;border-radius:8px;box-shadow:0 18px 55px #000d,inset 0 0 0 4px #2b4438}
.account-mark{color:#e6c66d;font-size:25px}.account-card h1{margin:2px 0 5px;font-size:30px}.account-card>p{margin:0 0 14px;color:#9fb49f;font:11px system-ui}.account-card>small{display:block;margin-top:12px;color:#71877a;font:8px system-ui}
.account-tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:12px;border-bottom:1px solid #536457}.account-tabs button{padding:8px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#7f9688}.account-tabs button.active{color:#f0d99c;border-bottom:2px solid #d0ad59}.account-form{display:grid;gap:9px}.account-form.hidden{display:none}.account-form label{text-align:left;color:#9eb19f;font:700 8px system-ui;letter-spacing:.12em;text-transform:uppercase}.account-form input{display:block;width:100%;margin-top:4px;padding:9px 11px;color:#f3e4bb;background:#0e1814;border:1px solid #53675a;border-radius:4px;outline:none;font:13px system-ui}.account-form input:focus{border-color:#d0ae62;box-shadow:0 0 0 2px #816c413b}.form-message{height:13px;margin:0;color:#d88979;font:9px system-ui}.form-message.success{color:#91c28c}
.roster-card{position:relative;width:min(700px,90%);max-height:84%;display:flex;flex-direction:column;padding:18px 20px;background:linear-gradient(145deg,#1b2d26f8,#101a16fa);border:2px solid #ae9158;border-radius:8px;box-shadow:0 18px 55px #000d,inset 0 0 0 4px #293e35}.roster-card header,.roster-card footer{display:flex;align-items:center;justify-content:space-between}.roster-card header{padding:0 2px 12px;border-bottom:1px solid #596048}.roster-card header small{color:#8fa68e;font:8px system-ui;letter-spacing:.2em}.roster-card h2{margin:2px 0;font-size:23px;font-weight:normal}.roster-card header p{margin:0;color:#788d80;font:9px system-ui}.roster-card header button{padding:7px 10px;background:#2a3731;border-color:#58685e;color:#aebbad;font-size:9px}.character-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:13px 0;overflow:auto}.character-entry{position:relative;min-width:0}.character-card{width:100%;min-height:76px;display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:11px;padding:9px 39px 9px 11px;text-align:left;background:#17251f;border-color:#4e6255;box-shadow:none}.character-card:hover{background:#263b31;border-color:#c3a45f}.character-delete{position:absolute;right:7px;top:7px;width:25px;height:25px;padding:0;background:#392522;border-color:#76504a;color:#d9a19a;font-size:17px;line-height:1;box-shadow:none}.character-delete:hover{background:#6b302d;border-color:#d17a70;color:#fff}.character-portrait{width:48px;height:52px;display:grid;place-items:center;border:1px solid #786b4e;background:radial-gradient(circle,#526b59,#23362d);color:#d4bd7b;font-size:25px}.character-portrait.female{color:#c8acd4}.character-card strong{display:block;color:#ebdba9;font:normal 15px Georgia}.character-card small,.character-card em{display:block;color:#91a496;font:9px system-ui;font-style:normal}.character-card em{margin-top:4px;color:#697c71;font-size:8px}.character-card>b{color:#c9ad67;font-size:9px}.empty-character{min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #46584d;color:#63766b}.empty-character strong{font:normal 13px Georgia}.empty-character span{margin-top:3px;font:8px system-ui}.roster-card footer{padding-top:11px;border-top:1px solid #596048;color:#75887c;font:8px system-ui}.roster-card footer button{padding:8px 12px}.delete-confirm{position:absolute;inset:0;z-index:12;display:grid;place-items:center;padding:18px;background:#07100dcc;backdrop-filter:blur(2px);border-radius:6px}.delete-confirm.hidden{display:none}.delete-confirm-card{width:min(360px,88%);padding:22px;text-align:center;background:linear-gradient(145deg,#251d1b,#131917);border:2px solid #9e5d50;border-radius:7px;box-shadow:0 18px 45px #000e,inset 0 0 0 3px #402d29}.delete-warning-mark{width:42px;height:42px;display:grid;place-items:center;margin:0 auto 9px;border:2px solid #c97968;border-radius:50%;background:#4d2622;color:#ffd2c8;font:bold 25px Georgia}.delete-confirm-card>small{color:#bf7669;font:8px system-ui;letter-spacing:.2em}.delete-confirm-card h3{margin:5px 0 8px;color:#f0d2bc;font:normal 24px Georgia}.delete-confirm-card p{margin:0 auto 17px;max-width:290px;color:#aa9e91;font:10px/1.5 system-ui}.delete-confirm-card p strong{color:#f0c48d}.delete-confirm-card>div{display:flex;justify-content:center;gap:9px}.delete-confirm-card button{padding:8px 13px;font-size:9px}.delete-confirm-card #cancelCharacterDelete{background:#26342e;border-color:#63756a;color:#d0d9cf}.delete-confirm-card #confirmCharacterDelete{background:#642f2a;border-color:#bd6b60;color:#ffe0d8}.delete-confirm-card #confirmCharacterDelete:hover{background:#8a3933}
.account-button{position:absolute;right:14px;top:14px;z-index:4;display:none;padding:6px 9px;background:#202d28dd;border-color:#68796d;color:#aebbad;font-size:8px}.account-button.ready{display:block}
@media(max-width:600px){.account-card{padding:15px 20px}.character-list{grid-template-columns:1fr}.roster-card{max-height:94%;padding:12px}.character-card{min-height:64px}.account-button{right:7px;top:7px}}

/* Responsive equipment matrix: fills the complete left panel at every size. */
.equipment{display:flex;flex-direction:column;min-height:0}.equipment>h3{flex:none}.equipment .gear-slots{
  flex:1;width:100%;height:100%;min-height:0;padding:6px;display:grid;
  grid-template-columns:1fr 1.45fr 1fr;
  grid-template-rows:1fr 1.55fr .72fr 1.15fr .9fr;
  grid-template-areas:
    ". helmet amulet"
    "weapon armour enhancer"
    "ring1 belt ring2"
    ". pants ."
    ". shoes .";
  gap:6px;
}
.gear-slots .gear-slot{position:relative;inset:auto;width:100%;height:100%;min-width:0;min-height:0;padding:3px;display:grid;place-items:center}
.gear-slots .gear-slot .slot-icon{width:100%;height:100%;display:grid;place-items:center;font-size:clamp(22px,3.2vw,40px)}
.slot-helmet{grid-area:helmet}.slot-amulet{grid-area:amulet}.slot-armour{grid-area:armour}.slot-weapon{grid-area:weapon}.slot-enhancer{grid-area:enhancer}.slot-belt{grid-area:belt}.slot-ring1{grid-area:ring1}.slot-ring2{grid-area:ring2}.slot-pants{grid-area:pants}.slot-shoes{grid-area:shoes}
.gear-slots .slot-armour .slot-icon{font-size:clamp(34px,4.8vw,58px)}
.gear-slots .slot-weapon .slot-icon,.gear-slots .slot-enhancer .slot-icon{font-size:clamp(30px,4vw,50px)}
.gear-slots .slot-belt .slot-icon{font-size:clamp(18px,2.6vw,32px)}
.stats-button{position:absolute;right:14px;bottom:72px;width:48px;height:48px;padding:0;display:none;place-items:center;background:#222f2aee;border:2px solid #788c71;z-index:3}.stats-button.ready{display:grid}.stats-button span{font-size:23px;color:#9ed7aa}.stats-button b{position:absolute;right:-5px;bottom:-5px;background:#9db68e;color:#172219;border:1px solid #d9edca;border-radius:3px;padding:2px 5px;font:700 10px system-ui}.stats-badge{position:absolute;left:-7px;top:-7px;min-width:20px;height:20px;padding:2px;border-radius:50%;background:#c84d45;border:2px solid #ffe1b0;color:white;font:700 10px/12px system-ui;font-style:normal}.stats-badge.hidden{display:none}
.stats-panel{position:absolute;inset:14% 18%;z-index:6;display:flex;flex-direction:column;color:#e8dfc4;background:linear-gradient(145deg,#17231ff7,#25332cf7);border:2px solid #a68a54;border-radius:7px;box-shadow:0 16px 45px #000d,inset 0 0 0 4px #314239;font-family:system-ui,sans-serif;transition:opacity .18s,transform .18s}.stats-panel.hidden{opacity:0;transform:scale(.97);pointer-events:none}.stats-head{display:flex;justify-content:space-between;align-items:center;padding:11px 15px;border-bottom:1px solid #6e6347}.stats-head small{color:#8eaa8b;font-size:8px;letter-spacing:.18em}.stats-head h2{margin:1px 0 0;font:normal 20px Georgia,serif}.stats-head button{width:31px;height:31px;padding:0;font-size:20px}.stats-content{display:grid;grid-template-columns:44% 56%;flex:1;min-height:0}.attribute-side,.derived-side{padding:12px 15px}.attribute-side{border-right:1px solid #615b44}.points-available{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;margin-bottom:8px;background:#111a17;border:1px solid #59665b;color:#99aa9e;font-size:11px}.points-available strong{color:#f0ca6d;font-size:18px}.attribute-rows{display:grid;gap:6px}.attribute-row{display:grid;grid-template-columns:1fr 30px 34px 30px;align-items:center;gap:5px;padding:6px 8px;background:#1a2722;border:1px solid #46564c}.attribute-row span strong{display:block;color:#e7d7aa;font:normal 13px Georgia,serif}.attribute-row span small{color:#758a7d;font-size:8px}.attribute-row>strong{text-align:center;color:#fff0bd}.attribute-row button{width:30px;height:28px;padding:0;font-size:16px}.attribute-side p{margin:8px 2px 0;color:#75877c;font-size:8px;line-height:1.4}.derived-side h3{margin:0 0 9px;color:#dac489;font:normal 15px Georgia,serif}.derived-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px}.derived-stat{display:flex;justify-content:space-between;align-items:center;padding:8px;background:#111a17;border:1px solid #45534a;color:#8ea197;font-size:9px}.derived-stat strong{color:#ead9aa;font-size:12px}.stats-actions{display:flex;justify-content:flex-end;gap:8px;padding:9px 15px;border-top:1px solid #615b44}.stats-actions button{padding:8px 14px}.stats-actions #saveStats{background:#755a36;border-color:#caa65f}.stats-actions button:disabled{opacity:.4;cursor:default;transform:none}
.storage-counters{display:flex;gap:10px;align-items:center}.storage-counters .gold-count{color:#e4bd59;font-weight:700}.item-grid{overflow-y:auto;scrollbar-color:#6f6346 #17211d;padding-right:2px}.item.empty-slot{cursor:default;background:#0d1512;border-color:#334139;box-shadow:inset 0 0 8px #000b}.item.reserved-slot{cursor:default;opacity:.32;background:#202a25;border-style:dashed}.item.empty-slot:hover,.item.reserved-slot:hover{transform:none;border-color:#334139;background:#0d1512}
.storage{display:flex;flex-direction:column;overflow:hidden}.storage-title,.categories{flex:none}.storage .item-grid{flex:1;min-height:0;align-content:start}
.skills-button{position:absolute;right:14px;bottom:130px;width:48px;height:48px;padding:0;display:none;place-items:center;background:#222f2aee;border:2px solid #756b98;z-index:3}.skills-button.ready{display:grid}.skills-button span{font-size:25px;color:#c1afe7}.skills-button b{position:absolute;right:-5px;bottom:-5px;background:#9284bd;color:#171522;border:1px solid #ded2fa;border-radius:3px;padding:2px 5px;font:700 10px system-ui}.skills-button .stats-badge{left:-7px;right:auto}
.skills-panel{position:absolute;inset:12% 14%;z-index:7;display:flex;min-height:0;overflow:hidden;flex-direction:column;color:#e8dfc4;background:linear-gradient(145deg,#151f1cf8,#28283af8);border:2px solid #9e8cba;border-radius:7px;box-shadow:0 17px 48px #000d,inset 0 0 0 4px #353449;font-family:system-ui,sans-serif;transition:opacity .18s,transform .18s}.skills-panel.hidden{opacity:0;transform:scale(.97);pointer-events:none}.skills-head{display:flex;flex:0 0 auto;align-items:center;gap:15px;padding:10px 14px;border-bottom:1px solid #68617d}.skills-head>div:first-child{flex:1}.skills-head small{color:#aaa0c7;font-size:8px;letter-spacing:.18em}.skills-head h2{margin:1px 0 0;font:normal 20px Georgia,serif}.skills-head>button{width:31px;height:31px;padding:0;font-size:20px}.skill-points{padding:6px 10px;background:#111719;border:1px solid #665c7d;color:#aaa3ba;font-size:10px}.skill-points strong{margin-left:7px;color:#e0c66f;font-size:16px}.skill-trees{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;gap:9px;padding:11px;flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#76688f #151b1b;scrollbar-width:thin}.skill-tree{height:max-content;padding:10px;border:1px solid #555167;background:#11191899;text-align:center}.skill-tree.str{--path:#b76754}.skill-tree.agi{--path:#6aa477}.skill-tree.int{--path:#668fbd}.skill-tree h3{margin:0;color:var(--path);font:normal 16px Georgia,serif}.skill-tree>p{height:24px;margin:3px 0 7px;color:#77887f;font-size:8px}.skill-nodes{display:grid;gap:8px}.skill-node{position:relative;width:100%;min-height:56px;padding:7px;background:#18221f;border:1px solid #4d5a53;box-shadow:none;color:#adbaaf}.skill-node:hover{transform:none;border-color:var(--path)}.skill-node strong{display:block;color:#e8ddc2;font:normal 12px Georgia,serif}.skill-node small{display:block;margin:2px 0;color:#788b7f;font-size:8px}.skill-node em{color:var(--path);font:700 8px system-ui;font-style:normal}.skill-node.locked{opacity:.5;filter:grayscale(.6)}.skill-node.unlocked{border-color:var(--path);background:color-mix(in srgb,var(--path) 19%,#17211e)}.skill-node.unlocked::after{content:'UNLOCKED';position:absolute;right:4px;top:3px;color:#d8cfad;font-size:6px}.skills-foot{flex:0 0 auto;padding:8px 14px;border-top:1px solid #625c74;color:#858198;font-size:8px;text-align:center}
.skill-node{display:block}.skill-node .node-unlock,.skill-node .node-equip{margin-top:5px;padding:4px 9px;font-size:8px}.skill-node .node-equip{background:#4b526f;border-color:#9a9fc9}.skill-node.locked .node-unlock{display:none}.skill-equip-picker{position:absolute;inset:25% 18%;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#101817fa;border:2px solid #b49bcf;border-radius:6px;box-shadow:0 15px 40px #000e}.skill-equip-picker.hidden{display:none}.skill-equip-picker>strong{color:#f0dfb2;font:normal 18px Georgia,serif}.skill-equip-picker>span{color:#929d96;font-size:9px}.skill-equip-picker>div{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;width:90%}.skill-slot-choice{height:48px;padding:3px;font-size:9px;background:#1c2924}.skill-slot-choice b{display:block;color:#e3c471;font-size:12px}.skill-slot-choice small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8e9d93;font-size:7px}.skill-equip-picker>#cancelSkillEquip{padding:6px 15px}
.skill-node.available{border-color:var(--path);background:color-mix(in srgb,var(--path) 11%,#17211e);box-shadow:0 0 8px color-mix(in srgb,var(--path) 30%,transparent)}.skill-node.available em{color:#e4c66f}.skill-node.available .node-unlock{background:#665136;border-color:#d2ad5e;color:#fff0bd}
.item-details{position:relative;padding-right:72px}.item-details .item-kind{display:block;margin-top:2px;color:#718a7b;font-size:8px;text-transform:uppercase;letter-spacing:.08em}.item-action{position:absolute;right:7px;top:8px;min-width:58px;padding:7px 8px;background:#715637;border-color:#d2ae62;color:#fff0c5;font-size:9px}.item-action:hover{background:#8b6a42}.item-action.equipped{background:#31473c;border-color:#78907f;color:#aebfb3;cursor:default}
/* Item information appears as a floating tooltip/modal, not a storage row. */
.storage{position:relative}.storage .item-details{position:absolute;z-index:20;width:210px;height:auto;min-height:58px;margin:0;padding:10px 12px;padding-right:12px;background:#0e1714f5;border:1px solid #c0a260;border-radius:5px;box-shadow:0 9px 24px #000c;color:#aebcaf;font-size:10px;line-height:1.45;pointer-events:none}.storage .item-details.hidden{display:none}.storage .item-details.pinned{pointer-events:auto;padding-right:75px}.storage .item-details strong{font-size:14px}.storage .item-details .item-action{right:8px;top:50%;transform:translateY(-50%)}
.codex-button{position:absolute;right:14px;bottom:188px;width:48px;height:48px;padding:0;display:none;place-items:center;background:#222f2aee;border:2px solid #8d7955;z-index:3}.codex-button.ready{display:grid}.codex-button span{font-size:24px;color:#dec78e}.codex-button b{position:absolute;right:-5px;bottom:-5px;background:#aa8d52;color:#211c14;border:1px solid #f2dfaa;border-radius:3px;padding:2px 5px;font:700 10px system-ui}.codex-button .stats-badge{left:-7px;right:auto}
.codex-toast{position:absolute;left:50%;top:11%;z-index:12;display:flex;align-items:center;gap:10px;min-width:220px;padding:9px 14px;opacity:0;pointer-events:none;transform:translate(-50%,-12px);transition:.25s;background:#16251ff2;border:1px solid #d0ad63;box-shadow:0 8px 25px #000b,inset 0 0 0 2px #34473d}.codex-toast.show{opacity:1;transform:translate(-50%,0)}.codex-toast>span{color:#efd377;font-size:23px}.codex-toast small,.codex-toast strong{display:block}.codex-toast small{color:#8da292;font:7px system-ui;letter-spacing:.18em}.codex-toast strong{margin-top:2px;color:#f1dfae;font:normal 15px Georgia}
.codex-panel{position:absolute;inset:8% 10%;z-index:8;display:flex;flex-direction:column;color:#e8dfc4;background:linear-gradient(145deg,#17231ff9,#252c28fa);border:2px solid #ad915c;border-radius:7px;box-shadow:0 17px 48px #000e,inset 0 0 0 4px #35453c;font-family:system-ui,sans-serif;transition:opacity .18s,transform .18s}.codex-panel.hidden{opacity:0;transform:scale(.97);pointer-events:none}.codex-head{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid #6e6347}.codex-head>div:first-child{flex:1}.codex-head small{color:#9caf96;font-size:8px;letter-spacing:.18em}.codex-head h2{margin:1px 0 0;font:normal 21px Georgia,serif}.codex-head>button{width:31px;height:31px;padding:0;font-size:20px}.codex-progress{padding:6px 10px;background:#111917;border:1px solid #5d655a;color:#8fa095;font-size:9px}.codex-progress span{color:#e0c36d;font-weight:700}.codex-body{display:grid;grid-template-columns:27% 73%;flex:1;min-height:0}.codex-entries{padding:10px;overflow:auto;border-right:1px solid #655d45;background:#11191699}.codex-entries button{width:100%;display:grid;grid-template-columns:47px 1fr;align-items:center;gap:8px;margin-bottom:7px;padding:6px;text-align:left;background:#19251f;border-color:#4b5b50;box-shadow:none}.codex-entries button.active{background:#3b4936;border-color:#c5a75f}.codex-entries img{width:45px;height:38px;object-fit:contain;image-rendering:pixelated}.codex-entries strong,.codex-entries small{display:block}.codex-entries strong{color:#e9d9a8;font:normal 13px Georgia}.codex-entries small{margin-top:2px;color:#778a7e;font-size:7px}.codex-detail{padding:13px 16px;overflow:auto;background:radial-gradient(circle at 25% 30%,#2b3b32,#17221e 70%)}.codex-title{display:flex;justify-content:space-between;align-items:start;padding-bottom:8px;border-bottom:1px solid #5c5945}.codex-title small{color:#a08e63;font-size:8px;letter-spacing:.15em;text-transform:uppercase}.codex-title h3{margin:1px 0;color:#f0ddb0;font:normal 25px Georgia}.codex-title p{margin:0;color:#84968a;font-size:8px}.codex-title>span{padding:4px 7px;border:1px solid #70816f;color:#9eb19d;font-size:7px}.codex-record{display:grid;grid-template-columns:39% 61%;gap:14px;padding-top:11px}.codex-record figure{margin:0}.codex-record figure img{width:100%;height:142px;object-fit:contain;image-rendering:pixelated;background:radial-gradient(ellipse,#35483d,#111916 72%);border:1px solid #586358}.codex-record figcaption{padding:7px;color:#8fa095;font-size:8px;line-height:1.45;border:1px solid #4b584e;border-top:0;background:#111916}.codex-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.codex-stats span{padding:6px;background:#101714;border:1px solid #4e594f;color:#778a7f;font-size:7px}.codex-stats strong{display:block;margin-top:2px;color:#e8ce83;font-size:11px}.codex-detail h4{margin:9px 0 4px;color:#d8c285;font:normal 11px Georgia}.codex-detail section>p,.codex-detail li{color:#91a197;font-size:8px;line-height:1.45}.codex-detail section>p{margin:0}.codex-detail ul{margin:3px 0;padding-left:15px}.codex-attack{padding:4px 6px;margin-bottom:4px;background:#151e1a;border-left:2px solid #9d744f}.codex-attack strong,.codex-attack span{display:block}.codex-attack strong{color:#d9c9a0;font:9px Georgia}.codex-attack span{margin-top:1px;color:#809186;font-size:7px}.codex-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#718379}.codex-empty>span{width:50px;height:50px;display:grid;place-items:center;border:1px solid #56645b;border-radius:50%;font:28px Georgia}.codex-empty strong{margin-top:9px;color:#b9b9a7;font:normal 15px Georgia}.codex-empty p{max-width:240px;font-size:8px;line-height:1.5}.codex-foot{display:flex;justify-content:space-between;align-items:center;padding:7px 13px;border-top:1px solid #625b46;color:#7d9084;font-size:8px}.codex-foot kbd{padding:2px 5px;font-size:7px}
@media(max-width:600px){.codex-button{right:7px;bottom:178px}.codex-panel{inset:3%}.codex-body{grid-template-columns:30% 70%}.codex-record{grid-template-columns:1fr}.codex-record figure img{height:90px}.codex-record figcaption{display:none}}
/* Expanded Codex reading layout. */
.codex-panel{inset:3% 4%}.codex-body{grid-template-columns:21% 79%}.codex-entries{padding:12px 9px}.codex-entries button{grid-template-columns:58px 1fr;gap:9px;padding:8px}.codex-entries img{width:56px;height:48px}.codex-entries strong{font-size:15px}.codex-entries small{font-size:9px}.codex-detail{padding:16px 20px}.codex-title{padding-bottom:11px}.codex-title small{font-size:10px}.codex-title h3{font-size:31px}.codex-title p{font-size:11px}.codex-title>span{padding:6px 10px;font-size:9px}.codex-record{grid-template-columns:34% 66%;gap:20px;padding-top:15px}.codex-record figure img{height:210px}.codex-record figcaption{padding:10px;font-size:11px;line-height:1.55}.codex-stats{gap:8px}.codex-stats span{padding:9px;font-size:9px}.codex-stats strong{margin-top:4px;font-size:15px}.codex-detail h4{margin:13px 0 6px;font-size:15px}.codex-detail section>p,.codex-detail li{font-size:11px;line-height:1.6}.codex-detail ul{padding-left:19px}.codex-attack{padding:7px 9px;margin-bottom:6px}.codex-attack strong{font-size:12px}.codex-attack span{margin-top:3px;font-size:10px;line-height:1.45}.codex-head{padding:12px 18px}.codex-head h2{font-size:25px}.codex-progress{font-size:11px}.codex-foot{padding:9px 17px;font-size:10px}
@media(max-width:700px){.codex-panel{inset:2%}.codex-body{grid-template-columns:24% 76%}.codex-detail{padding:10px 12px}.codex-record{grid-template-columns:31% 69%;gap:10px}.codex-record figure img{height:145px}.codex-record figcaption{font-size:9px}.codex-detail section>p,.codex-detail li{font-size:9px}.codex-attack span{font-size:8px}}
/* Weapon mastery layout overrides the former three-stat skill columns. */
.skill-trees{grid-template-columns:minmax(280px,720px);justify-content:center}
.skill-tree.sword{--path:#d1a957}
.skill-tree.dagger{--path:#8dcc72}
.skill-tree.magic{--path:#8aaee8}
.skill-tree.axe{--path:#d27d56}
.skill-tree.bow{--path:#8fc58a}
.skill-tree.polearm{--path:#e2c66e}
.skill-category-tabs{display:flex;flex:0 0 auto;gap:7px;padding:8px 12px 0}
.skill-category-tab{display:grid;min-width:92px;padding:6px 12px;background:#171d1b;border-color:#4e5952;box-shadow:none;text-align:left}
.skill-category-tab strong{font:normal 13px Georgia,serif}.skill-category-tab small{margin-top:2px;color:#77857c;font-size:7px}
.skill-category-tab.selected{border-color:#d0ad61;background:#343025}.skill-category-tab.equipped small{color:#9bd37e}.skill-category-tab.view-only{opacity:.72}
.weapon-requirement{margin:0 0 8px;padding:5px;border:1px solid #574f43;background:#171b19;color:#988d78;font-size:8px}
.weapon-requirement.ready{border-color:#6e8257;color:#b8cf91}
.weapon-requirement.missing{border-color:#7d514d;color:#cf9187}
.skill-tree.sword .skill-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}
.skill-tree.dagger .skill-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}
.skill-tree.magic .skill-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}
.skill-tree.axe .skill-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}
.skill-tree.bow .skill-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}
.skill-tree.polearm .skill-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}
.weapon-choice-panel{position:absolute;inset:11% 13%;z-index:14;display:flex;flex-direction:column;padding:14px;color:#eee1bd;background:linear-gradient(145deg,#17221ef7,#302839fa);border:2px solid #c29c5b;border-radius:8px;box-shadow:0 18px 45px #000e,inset 0 0 0 4px #43394b;font-family:system-ui,sans-serif}.weapon-choice-panel.hidden{display:none}.weapon-choice-panel header{text-align:center}.weapon-choice-panel header small{color:#cbb076;font-size:8px;letter-spacing:.18em}.weapon-choice-panel h2{margin:3px 0;font:normal 22px Georgia,serif}.weapon-choice-panel header p{margin:4px auto 11px;max-width:430px;color:#9ead9f;font-size:9px}.weapon-choice-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow:auto}.weapon-choice-option{display:grid;grid-template-columns:35px 1fr;align-items:center;gap:7px;padding:9px;text-align:left;background:#17221f;border-color:#5d665b;box-shadow:none}.weapon-choice-option>span{display:grid;place-items:center;width:34px;height:34px;background:#2a342e;border:1px solid #7f7658;font-size:20px}.weapon-choice-option strong,.weapon-choice-option small,.weapon-choice-option em{display:block}.weapon-choice-option strong{color:#f0dfb4;font:normal 13px Georgia}.weapon-choice-option small{margin-top:2px;color:#99a99e;font-size:8px}.weapon-choice-option em{margin-top:3px;color:#cfb46f;font-size:7px;font-style:normal}
.town-transition{position:absolute;inset:0;z-index:32;padding:7% 6%;overflow:hidden;background:linear-gradient(160deg,#121a20f7,#251d25f8);font-family:Georgia,serif;transition:opacity .45s}.town-transition.hidden{opacity:0;pointer-events:none}.town-transition header{text-align:center}.town-transition header small{color:#d9b85f;font:700 8px system-ui;letter-spacing:.28em}.town-transition h2{margin:2px 0 10px;color:#fff0c8;font-size:24px;font-weight:normal}.comic-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;height:60%}.comic-panel{position:relative;margin:0;overflow:hidden;border:3px solid #e3d6b2;background:#6d8790;box-shadow:5px 6px 0 #070a0c;transform:rotate(-1deg)}.comic-panel:nth-child(2){transform:rotate(1.2deg);background:#987b67}.comic-panel:nth-child(3){transform:rotate(-.5deg);background:#b38c67}.comic-panel::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 75% 18%,#ffe6a7 0 6%,transparent 7%),linear-gradient(160deg,transparent 52%,#263d33 53%);opacity:.8}.comic-panel figcaption{position:absolute;left:5px;right:5px;bottom:5px;padding:5px;background:#f7eacfe8;border:1px solid #2d2924;color:#28231e;font:italic 8px/1.25 Georgia,serif}.comic-hero{position:absolute;left:43%;bottom:29%;width:10px;height:24px;background:#17211e;border-radius:5px 5px 2px 2px;box-shadow:0 -7px 0 -1px #1b2521}.comic-road .comic-hero{left:28%}.comic-gate .comic-arch{position:absolute;left:18%;right:12%;bottom:22%;height:65%;border:13px solid #4c443e;border-bottom:0;border-radius:45px 45px 0 0}.comic-town .comic-roofs{position:absolute;left:5%;right:5%;bottom:26%;height:42%;background:linear-gradient(135deg,transparent 14%,#633d32 15% 30%,transparent 31%) 0 0/36px 32px,linear-gradient(#d2b77a,#8d704f)}.town-loading-track{height:4px;margin:15px auto 6px;max-width:72%;overflow:hidden;background:#3b3b3d}.town-loading-track span{display:block;width:38%;height:100%;background:linear-gradient(90deg,#8c6538,#f2cf71,#8c6538);animation:town-load 1.15s ease-in-out infinite}.town-transition>em{display:block;text-align:center;color:#b9b5a8;font-size:9px}@keyframes town-load{from{transform:translateX(-110%)}to{transform:translateX(290%)}}
.mobile-controls{display:none;position:absolute;inset:0;z-index:4;pointer-events:none;user-select:none;-webkit-user-select:none;touch-action:none}.mobile-dpad,.mobile-actions{position:absolute;pointer-events:auto}.mobile-dpad{left:18px;bottom:16px;width:126px;height:126px}.mobile-dpad button,.mobile-actions button{position:absolute;display:grid;place-items:center;padding:0;border-radius:50%;background:#17231fb8;border:2px solid #d9cfaa99;color:#fff3cc;box-shadow:0 3px 9px #0009,inset 0 0 12px #90a68a26;touch-action:none}.mobile-dpad button{width:43px;height:43px;font-size:17px}.move-up{left:42px;top:0}.move-left{left:0;top:42px}.move-down{left:42px;top:83px}.move-right{left:83px;top:42px}.mobile-actions{right:72px;bottom:15px;width:156px;height:132px}.mobile-actions button{width:54px;height:54px;font-size:22px}.mobile-actions button small{display:block;margin-top:-7px;font:700 6px system-ui;text-transform:uppercase}.mobile-attack{right:0;bottom:0;background:#532d2dc4!important;border-color:#e28b76aa!important}.mobile-roll{left:36px;bottom:0}.mobile-interact{right:7px;top:0;background:#284c45c4!important;border-color:#88d9c3aa!important}.mobile-controls button.pressed{transform:scale(.92);background:#7b6740d9}.mobile-controls.ready{display:none}@media (hover:none) and (pointer:coarse){.mobile-controls.ready{display:block}.inventory-button,.stats-button,.skills-button,.codex-button{width:42px;height:42px;right:8px}.inventory-button{bottom:8px}.stats-button{bottom:57px}.skills-button{bottom:106px}.codex-button{bottom:155px}.account-button{top:7px;right:7px}.game-shell{touch-action:none}}
.fullscreen-button{display:none;position:absolute;right:61px;top:7px;z-index:4;width:43px;height:37px;padding:2px;background:#17231fc4;border:1px solid #aebc9b99;color:#f5e8bd;box-shadow:0 2px 7px #0009;touch-action:manipulation}.fullscreen-button span,.fullscreen-button small{display:block}.fullscreen-button span{font-size:16px;line-height:15px}.fullscreen-button small{font:700 6px system-ui;text-transform:uppercase}.fullscreen-button.ready{display:none}@media (hover:none) and (pointer:coarse){.fullscreen-button.ready{display:block}body.mobile-game-active{padding:0;background:#000}body.mobile-game-active main,body.mobile-game-active .game-shell{width:100vw;height:100dvh;max-width:none;aspect-ratio:auto;border:0;border-radius:0}body.mobile-game-active canvas{width:100%;height:100%}}
.account-overlay,.character-overlay,#start{overflow:auto;overscroll-behavior:contain}
@media (max-width:950px){
  html,body{width:100%;height:100%;height:100dvh;margin:0;padding:0;overflow:hidden;background:#000}
  main{width:100vw;height:100dvh;max-width:none;aspect-ratio:auto;padding:0}
  .game-shell{width:100vw;height:100dvh;max-width:none;aspect-ratio:auto;border:0;border-radius:0}
  .account-overlay,.character-overlay,#start{position:absolute;inset:0;padding:max(7px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));align-items:center}
  .account-card{width:min(520px,96vw);max-height:calc(100dvh - 14px);overflow:auto;padding:13px 20px}
  .account-mark{font-size:18px}.account-card h1{font-size:23px}.account-card>p{margin-bottom:7px;font-size:9px}.account-tabs{margin-bottom:6px}.account-tabs button{padding:5px}.account-form{gap:5px}.account-form input{margin-top:2px;padding:6px 9px}.account-form button{padding:7px 12px}.account-card>small{margin-top:5px}
  .roster-card,.card{max-height:calc(100dvh - 14px);overflow:auto}
}
@media (max-width:950px) and (orientation:landscape){
  .account-card{width:min(620px,94vw);padding:8px 18px}.account-mark{display:none}.account-card h1{margin:0 0 2px;font-size:20px}.account-card>p{margin:0 0 4px}.account-tabs{margin-bottom:4px}.account-form{gap:3px}.account-form label{font-size:7px}.account-form input{padding:4px 8px;font-size:11px}.form-message{height:9px}.account-form button{padding:5px 11px}.account-card>small{margin-top:3px}
  .roster-card{max-height:96dvh;padding:8px 12px}.roster-card header{padding-bottom:5px}.character-list{padding:6px 0}.roster-card footer{padding-top:5px}
  #start .card{width:min(650px,94vw);padding:9px 18px}.gender-select{margin:6px 0}.name-field input{padding:6px 9px}
}