/* To Dust - game stylesheet. Externalized from index.html (2026-07-07 optimization pass; was 682 inline lines / ~7k tokens). Served by Pages next to index.html - deploy-gated like all assets/. The engineer owns this file (it is index.html's , relocated). */ @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Cinzel:wght@400;600&display=swap'); *{margin:0;padding:0;box-sizing:border-box;} :root{ --bg:#0d0b10;--surf:#141118;--surf2:#1c1824;--border:#2e2640; --acc:#c89050;--acc2:#7a50c0;--txt:#d4c8a8;--dim:#6a5a4a; --danger:#c04040; } html,body{height:100%;margin:0;background:#060408;color:var(--txt);font-family:'Share Tech Mono','Courier New',monospace;overflow:hidden;} button{font-family:inherit;cursor:pointer;} .screen{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden;} .screen.active{display:flex;} /* ── Title / Start screen ── logo on black + a single Start action (logo art is on black, so it seams in) */ #title-screen{background:#000;align-items:center;justify-content:center;cursor:pointer;z-index:50;} #title-screen .ts-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,5vh,52px);animation:tsFade 1.3s ease-out both;} #title-screen .ts-logo{width:min(80vw,880px);max-height:48vh;object-fit:contain;-webkit-user-drag:none;user-select:none;pointer-events:none;filter:drop-shadow(0 8px 38px rgba(0,0,0,.9));} #title-screen .ts-start{padding:14px 56px;border:1px solid var(--acc);background:transparent;color:var(--acc);font-family:'Cinzel',serif;font-size:clamp(14px,2.4vh,20px);letter-spacing:6px;text-transform:uppercase;border-radius:3px;cursor:pointer;transition:all .2s;animation:tsPulse 2.6s ease-in-out infinite;} #title-screen .ts-start:hover{background:rgba(200,144,80,.10);color:#e8c89a;box-shadow:0 0 26px rgba(200,144,80,.30);animation:none;} #title-screen .ts-hint{color:var(--dim);font-size:10px;letter-spacing:2px;opacity:.65;} /* Account strip (§1b Privy login) — quiet under the hint; hidden entirely when auth is unconfigured */ #title-screen .ts-auth{display:flex;align-items:center;gap:12px;min-height:30px;cursor:default;} #title-screen .ts-auth-btn{padding:7px 22px;border:1px solid rgba(200,144,80,.45);background:transparent;color:var(--dim);font-size:11px;letter-spacing:2px;text-transform:uppercase;border-radius:3px;cursor:pointer;transition:all .2s;} #title-screen .ts-auth-btn:hover{color:#e8c89a;border-color:var(--acc);background:rgba(200,144,80,.08);} #title-screen .ts-auth-chip{color:#e8c89a;font-size:11px;letter-spacing:1px;} #title-screen .ts-auth-link{background:none;border:none;color:var(--dim);font-size:10px;letter-spacing:1px;cursor:pointer;text-decoration:underline;opacity:.7;} #title-screen .ts-auth-link:hover{opacity:1;color:#e8c89a;} #title-screen .ts-auth-hint{color:var(--dim);font-size:9px;letter-spacing:1px;opacity:.55;} @keyframes tsFade{from{opacity:0;}to{opacity:1;}} @keyframes tsPulse{0%,100%{box-shadow:0 0 0 rgba(200,144,80,0);}50%{box-shadow:0 0 18px rgba(200,144,80,.18);}} /* ── Intro trailer overlay ── sits above the title screen; the skip hint fades in on any key */ #trailer-overlay{position:absolute;inset:0;background:#000;z-index:60;display:none;align-items:center;justify-content:center;} #trailer-overlay.active{display:flex;} #trailer-video{width:100%;height:100%;object-fit:contain;background:#000;} #trailer-skip{position:absolute;left:18px;bottom:16px;padding:7px 15px;border:1px solid var(--acc);border-radius:3px;background:rgba(0,0,0,.55);color:var(--acc);font-family:'Share Tech Mono','Courier New',monospace;font-size:12px;letter-spacing:2px;opacity:0;transition:opacity .25s;pointer-events:none;} #trailer-skip.show{opacity:.92;} /* ── HUB ── */ #hub{position:fixed;inset:0;display:none;align-items:center;justify-content:center; background:rgba(6,4,8,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); z-index:50;} #hub.active{display:flex;} .hub-inner{width:480px;max-width:92vw;background:rgba(10,8,18,.82); border:1px solid var(--border);border-radius:8px;padding:24px 28px; box-shadow:0 8px 48px rgba(0,0,0,.7);} .hub-title{font-size:22px;color:var(--acc);letter-spacing:3px;margin-bottom:4px;text-align:center;font-family:'Cinzel',serif;} .hub-sub{font-size:10px;color:var(--dim);text-align:center;margin-bottom:16px;letter-spacing:3px;} .hub-actions{display:flex;gap:8px;margin-bottom:16px;} .hub-btn{flex:1;padding:10px;border:1px solid var(--border);background:var(--surf);color:var(--txt);font-size:11px;letter-spacing:2px;border-radius:4px;transition:all .15s;} .hub-btn:hover{border-color:var(--acc);background:var(--surf2);color:var(--acc);} .hub-btn.primary{border-color:var(--acc2);color:var(--acc2);} .hub-btn.primary:hover{background:#1a1430;box-shadow:0 0 12px rgba(122,80,192,.2);} .maps-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:9px;color:var(--dim);letter-spacing:2px;text-transform:uppercase;} .maps-list{display:flex;flex-direction:column;gap:5px;max-height:220px;overflow-y:auto;padding-right:4px;} .maps-list::-webkit-scrollbar{width:3px;} .maps-list::-webkit-scrollbar-thumb{background:var(--border);} .map-card{background:rgba(20,16,30,.9);border:1px solid var(--border);border-radius:4px;padding:9px 14px;display:flex;align-items:center;gap:12px;} .map-card-info{flex:1;min-width:0;} .map-card-name{font-size:12px;color:var(--txt);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .map-card-meta{font-size:9px;color:var(--dim);} .map-card-btns{display:flex;gap:5px;flex-shrink:0;} .mc-btn{padding:4px 9px;border:1px solid var(--border);background:transparent;color:var(--dim);font-family:inherit;font-size:9px;letter-spacing:1px;border-radius:2px;transition:all .12s;} .mc-btn:hover{color:var(--acc);border-color:var(--acc);} .mc-btn.play:hover{color:#50e080;border-color:#50e080;} .mc-btn.del:hover{color:var(--danger);border-color:var(--danger);} .empty-state{text-align:center;padding:36px;color:var(--dim);font-size:10px;border:1px dashed var(--border);border-radius:4px;line-height:1.8;} /* ── BASE ── */ #base{background:#1a2a14;align-items:center;justify-content:center;} .base-inner{display:flex;flex-direction:column;align-items:center;position:relative;} #bc{display:block;cursor:none;outline:none;image-rendering:pixelated;border-radius:4px 4px 0 0;} .base-hud{display:flex;justify-content:space-between;align-items:center;padding:5px 12px;background:#0f1a0a;border-radius:0 0 4px 4px;width:700px;max-width:100%;} .base-back{position:absolute;top:10px;left:10px;z-index:20;padding:5px 12px;border:1px solid rgba(80,160,60,.4);background:rgba(0,0,0,.55);color:#70c050;font-family:inherit;font-size:9px;letter-spacing:1px;border-radius:2px;transition:all .12s;} .base-back:hover{border-color:#70c050;color:#a0e080;} /* ── BASE TOOLBAR ── */ #base-toolbar{display:none;position:absolute;bottom:44px;left:50%;transform:translateX(-50%); background:rgba(8,18,6,0.93);border:1px solid rgba(80,160,60,0.4);border-radius:8px; padding:7px 12px;gap:8px;align-items:center;backdrop-filter:blur(4px);z-index:5;pointer-events:all;} #base-toolbar.bvis{display:flex!important;} .bbtni{width:56px;height:56px;border-radius:6px;border:2px solid rgba(80,160,60,0.25); background:rgba(255,255,255,0.04);cursor:pointer;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:3px;transition:border-color .15s,background .15s;pointer-events:all;} .bbtni:hover{background:rgba(255,255,255,0.1);border-color:rgba(100,200,80,0.7);} .bbtni.bact{background:rgba(80,200,60,0.12);border-color:#70c050;box-shadow:0 0 10px rgba(80,200,60,0.2);} .bbtni canvas{image-rendering:pixelated;pointer-events:none;} .bbtni span{color:#7ab870;font-size:8px;font-family:monospace;text-transform:uppercase;letter-spacing:0.5px;} #besc{color:#4a7a3a;font-size:9px;font-family:monospace;margin-left:6px;padding-left:10px;border-left:1px solid rgba(255,255,255,0.1);} /* ── EDITOR ── */ #editor{flex-direction:row;} .ed-sidebar{width:178px;min-width:178px;background:var(--surf);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;} .ed-topbar{height:34px;background:var(--surf);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 10px;gap:8px;font-size:10px;color:var(--dim);flex-shrink:0;} .ed-topbar-right{margin-left:auto;display:flex;gap:5px;} .tbar-btn{padding:3px 9px;border:1px solid var(--border);background:transparent;color:var(--dim);font-size:9px;letter-spacing:1px;border-radius:2px;transition:all .12s;} .tbar-btn:hover{color:var(--acc);border-color:var(--acc);} .tbar-btn.save{border-color:var(--acc2);color:var(--acc2);} .tbar-btn.save:hover{background:#1a1430;} #ed-canvas-wrap{flex:1;overflow:hidden;position:relative;background:repeating-conic-gradient(#0f0d14 0% 25%,#0d0b10 0% 50%) 0 0/14px 14px;} #ed-canvas{display:block;cursor:crosshair;outline:none;} .ed-right{width:155px;min-width:155px;background:var(--surf);border-left:1px solid var(--border);display:flex;flex-direction:column;font-size:10px;} .er-section{padding:7px 10px;border-bottom:1px solid var(--border);} .er-label{font-size:8px;color:var(--dim);letter-spacing:2px;margin-bottom:5px;text-transform:uppercase;} .er-row{display:flex;align-items:center;gap:5px;margin-bottom:4px;} .er-row label{color:var(--dim);width:40px;font-size:9px;} .er-row input[type=number]{background:var(--surf2);border:1px solid var(--border);color:var(--txt);padding:2px 4px;width:52px;font-family:inherit;font-size:9px;border-radius:2px;} .er-btn{width:100%;padding:5px;background:var(--surf2);border:1px solid var(--border);color:var(--dim);font-family:inherit;font-size:9px;letter-spacing:1px;border-radius:2px;margin-bottom:3px;transition:all .12s;} .er-btn:hover{border-color:var(--acc);color:var(--acc);} .er-btn.primary{border-color:var(--acc2);color:var(--acc2);} .ed-pal-scroll{flex:1;overflow-y:auto;padding:6px 8px;} .ed-pal-scroll::-webkit-scrollbar{width:3px;} .ed-pal-scroll::-webkit-scrollbar-thumb{background:var(--border);} .cat-label{font-size:8px;color:var(--dim);letter-spacing:2px;margin:6px 0 4px;border-bottom:1px solid var(--border);padding-bottom:2px;text-transform:uppercase;} .pal-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:2px;} .pal-item{background:var(--surf2);border:1px solid var(--border);border-radius:2px;padding:4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .1s;} .pal-item:hover{border-color:var(--acc);} .pal-item.sel{border-color:var(--acc);background:#2a1e3a;} .pal-item canvas{image-rendering:pixelated;} .pal-item span{font-size:7px;color:var(--dim);text-align:center;} .tool-row{display:flex;gap:3px;flex-wrap:wrap;} .t-btn{width:32px;height:27px;background:var(--surf2);border:1px solid var(--border);border-radius:2px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .12s;color:var(--txt);} .t-btn:hover{border-color:var(--acc);} .t-btn.active{border-color:var(--acc);background:#2a1e3a;} /* ── GAME ── */ #game{background:#060408;align-items:center;justify-content:flex-start;overflow:hidden;} .game-inner{display:flex;flex-direction:column;align-items:center;position:relative;transform-origin:top center;} #gc{display:block;cursor:none;outline:none;image-rendering:auto;} /* ── Character Menu ──────────────────────────────────────── */ #char-overlay{display:none;position:absolute;inset:0;background:rgba(0,0,0,.88); align-items:center;justify-content:center;z-index:20;} #char-overlay.show{display:flex;} .char-panel{background:#0d0b14;border:1px solid var(--border);border-radius:6px; padding:14px 16px;width:660px;display:flex;flex-direction:column;gap:10px;} .char-header{display:flex;justify-content:space-between;align-items:center;} .char-title{font-size:12px;letter-spacing:3px;color:var(--acc);} .char-close{background:none;border:none;color:var(--dim);font-size:14px;cursor:pointer;padding:2px 6px;} .char-close:hover{color:#fff;} .char-body{display:flex;gap:12px;align-items:flex-start;} /* Character preview column */ .char-preview{width:96px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;} .char-preview-canvas{image-rendering:auto;border:1px solid #1e1c2e;border-radius:4px;background:#080614;} .char-preview-label{font-size:7px;color:#555;letter-spacing:1px;text-align:center;} /* Stats column */ .char-left{width:118px;flex-shrink:0;display:flex;flex-direction:column;gap:4px;} /* Skills column */ .char-right{flex:1;display:flex;flex-direction:column;gap:6px;} .char-section-label{font-size:7px;color:var(--dim);letter-spacing:2px;margin-bottom:4px;} .char-stat-row{display:flex;justify-content:space-between;align-items:center; padding:3px 6px;background:#0a0818;border-radius:3px;font-size:9px;} .char-stat-name{color:#888;letter-spacing:1px;} .char-stat-val{color:#ddd;font-weight:bold;} .char-stat-boost{color:#ffd23b;font-weight:bold;font-size:8px;margin-left:3px;} /* class stat-mult boost badge (#25) */ .char-skills-grid{display:flex;flex-direction:row;gap:5px;} .char-skill-card{background:#0a0818;border:1px solid #1e1c2e;border-radius:4px; padding:7px 5px;cursor:default;transition:border-color .12s,background .12s; display:flex;flex-direction:column;align-items:center;gap:3px; position:relative;flex:1;overflow:visible;} .char-skill-card:hover{border-color:var(--acc);background:#13102a;} .char-skill-card .csk-key{font-size:6px;color:#555;letter-spacing:1px;align-self:flex-start;} .char-skill-card .csk-icon canvas{display:block;} .char-skill-card .csk-name{font-size:7px;color:#aaa;letter-spacing:1px;} .char-skill-card .csk-scaling{display:flex;gap:4px;margin-top:1px;} .char-skill-card .csk-grade{display:flex;flex-direction:column;align-items:center;gap:1px;} .char-skill-card .csk-glabel{font-size:5px;color:#555;letter-spacing:.5px;} .char-skill-card .csk-gval{font-size:9px;font-weight:bold;} .csk-tooltip{display:none;position:fixed;background:#0d0b1e;border:1px solid var(--border); border-radius:4px;padding:7px 9px;width:160px;z-index:999;pointer-events:none; font-size:8px;line-height:1.65;white-space:normal;text-align:left;} .csk-tip-name{font-size:9px;font-weight:bold;color:#ddd;display:block;margin-bottom:3px;} .csk-tip-dmg{color:#ffd040;display:block;margin-bottom:3px;} .csk-tip-desc{color:#777;display:block;} .csk-tip-imbue{display:block;margin-top:5px;padding-top:4px;border-top:1px solid #2a2335;font-weight:bold;letter-spacing:1px;} .csk-tip-imbue-desc{display:block;color:#c2916b;margin-top:2px;} .char-skill-card.csk-imbued{border-color:var(--imb-col,#ff7a22);box-shadow:0 0 10px rgba(255,110,0,0.30);} .csk-imbue-badge{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:9px;line-height:1; background:#140d0a;border:1px solid var(--imb-col,#ff7a22); box-shadow:0 0 6px var(--imb-col,#ff7a22);z-index:4;} .game-hud{display:flex;justify-content:space-between;align-items:center;padding:5px 12px;background:#0a0a0f;width:700px;max-width:100%;} .stat-card{width:120px;padding:10px 10px;background:#0e0e20;border:1px solid #333;border-radius:6px;cursor:pointer;text-align:center;transition:border-color .15s,background .15s;display:flex;flex-direction:column;gap:5px;} .stat-card:hover{border-color:#ffd040;background:#18182a;} .stat-card.selected{border-color:#ffd040;background:#1e1a08;box-shadow:0 0 10px rgba(255,208,64,.35);} .stat-card .sc-icon{font-size:26px;line-height:1;} .stat-card .sc-name{font:bold 11px monospace;color:#ffd040;letter-spacing:2px;} .stat-card .sc-val{font:9px monospace;color:#888;} .stat-card .sc-bonuses{font:8px monospace;color:#aaa;line-height:1.6;text-align:left;padding:6px 4px;background:#0a0a14;border-radius:3px;} /* ── Level-up "Choose a Blessing" screen — themed by patron (warm=Cilia, cool=Nameless Knight) ── */ #g-stat-pick{ --lvl-accent:#c8d2dc; --lvl-accent2:#8fa8c0; --lvl-glow:rgba(150,180,210,.40); --lvl-frame:#3a4654; --lvl-frame-hi:#c2ccd8; --lvl-frame-lo:#454f5c; } #g-stat-pick.theme-cilia{ --lvl-accent:#ff8a3a; --lvl-accent2:#ffd040; --lvl-glow:rgba(255,110,20,.55); --lvl-frame:#6a4628; --lvl-frame-hi:#ffd884; --lvl-frame-lo:#7e4a12; } .lvl-flourish{ color:var(--lvl-accent); font-size:13px; opacity:.75; text-shadow:0 0 10px var(--lvl-glow); } .lvl-title{ font:bold 26px 'Palatino Linotype',serif; color:var(--lvl-accent); letter-spacing:5px; text-shadow:0 0 18px var(--lvl-glow),0 2px 4px #000; } .lvl-sub{ font:8px monospace; color:var(--lvl-accent2); letter-spacing:4px; opacity:.75; text-transform:uppercase; } .lvl-btn{ padding:8px 22px; min-width:118px; background:rgba(10,10,16,.7); border:1px solid var(--lvl-accent); border-radius:5px; color:var(--lvl-accent); font:bold 10px monospace; letter-spacing:2px; cursor:pointer; transition:all .15s; text-shadow:0 0 8px var(--lvl-glow); } .lvl-btn:hover{ background:rgba(255,255,255,.06); box-shadow:0 0 14px var(--lvl-glow); } .lvl-btn-confirm{ opacity:.4; cursor:not-allowed; } .lvl-btn-sub{ font:6.5px monospace; color:#777; letter-spacing:1px; text-transform:uppercase; } /* Level-up cards are full-width horizontal ROWS (icon-ring | rarity/name/desc | Favor chip). */ #g-stat-pick .stat-card{ width:100%; flex-direction:row; align-items:center; text-align:left; gap:11px; padding:9px 11px; background:linear-gradient(180deg,rgba(20,18,26,.92),rgba(8,8,14,.95)); border:1px solid var(--lvl-frame); border-radius:8px; } #g-stat-pick .stat-card:hover{ border-color:var(--lvl-accent); background:linear-gradient(180deg,rgba(28,24,34,.95),rgba(10,10,16,.96)); box-shadow:0 0 16px var(--lvl-glow); transform:translateY(-1px); } #g-stat-pick .stat-card.selected{ border-color:var(--lvl-accent); box-shadow:0 0 20px var(--lvl-glow), inset 0 0 12px var(--lvl-glow); } /* Per-rarity card frames (Artist 2026-06-24, levelup-rarity-frames) — 9-sliced via CSS border-image; `fill` paints the obsidian panel so the frame IS the card bg+border. The slice/width are eyeball-tunable (frames ~450×268, thin double-border + small diamond corners). Hover/selected glow rides the box-shadow above (border-color is moot here). */ #g-stat-pick .stat-card.r-framed{ background:#0b0a12; border:11px solid transparent; border-radius:0; padding:3px 8px; border-image-slice:22% 13% fill; border-image-width:11px; border-image-repeat:stretch; } #g-stat-pick .stat-card.r-framed:hover{ background:#0b0a12; transform:translateY(-1px); } #g-stat-pick .stat-card.r-normal { border-image-source:url('assets/ui/levelup/levelup-card-common.png'); } #g-stat-pick .stat-card.r-rare { border-image-source:url('assets/ui/levelup/levelup-card-rare.png'); } #g-stat-pick .stat-card.r-epic { border-image-source:url('assets/ui/levelup/levelup-card-epic.png'); } #g-stat-pick .stat-card.r-legendary, #g-stat-pick .stat-card.r-exalted { border-image-source:url('assets/ui/levelup/levelup-card-legendary.png'); } /* Title ornaments (Artist 2026-06-24, levelup-ornaments): crest above LEVEL UP, wide flourish as the divider. */ .lvl-crest{ display:block; height:44px; width:auto; margin:0 auto 1px; filter:drop-shadow(0 0 6px var(--lvl-glow)); } .lvl-flourish-img{ display:block; width:78%; max-width:280px; height:auto; margin:3px auto 0; opacity:.92; filter:drop-shadow(0 0 5px var(--lvl-glow)); } #g-stat-pick .sc-body{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; flex:1; min-width:0; } #g-stat-pick .sc-rarity{ font:bold 6.5px monospace; letter-spacing:3px; } #g-stat-pick .sc-ring{ width:46px; height:46px; flex-shrink:0; border-radius:50%; border:2px solid #555; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.5); } #g-stat-pick .sc-icon{ font-size:22px; line-height:1; } #g-stat-pick .sc-name{ font:bold 11px 'Palatino Linotype',serif; letter-spacing:1px; color:var(--lvl-accent); } #g-stat-pick .sc-bonuses{ font:7px monospace; color:#9aaab4; line-height:1.5; text-align:left; background:none; padding:0; } #g-stat-pick .imb-track{ justify-content:flex-start; margin-top:4px; } /* Left-docked panel — only this strip is interactive; the rest of the screen passes clicks to the world. */ .lvl-dock{ display:flex; height:100%; width:42%; min-width:330px; max-width:560px; pointer-events:auto; box-shadow:0 0 40px rgba(0,0,0,.7); } .lvl-content{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:22px 18px 16px; overflow:hidden; background:linear-gradient(180deg,rgba(14,11,18,.97),rgba(6,6,11,.985)); border-left:1px solid var(--lvl-frame); } /* NO SCROLL at any window size: the whole game already scales uniformly to the window (scaleGameToFit), so the dock only needs to fit the internal viewport. Header + buttons stay fixed (flex-shrink:0); the card list flexes to fill the leftover height and its cards shrink to fit — so everything always fits, no scrollbar, no transform gap. */ .lvl-content > *{ flex-shrink:0; } #g-stat-cards{ flex:1 1 0; min-height:0; justify-content:center; } #g-stat-pick .stat-card{ flex:1 1 0; min-height:0; } .lvl-close{ position:absolute; top:8px; right:10px; width:22px; height:22px; padding:0; background:rgba(10,10,16,.6); border:1px solid var(--lvl-frame); border-radius:4px; color:var(--lvl-accent2); font:bold 11px monospace; cursor:pointer; opacity:.7; transition:all .12s; } .lvl-close:hover{ opacity:1; border-color:var(--lvl-accent); box-shadow:0 0 8px var(--lvl-glow); } /* Bottom-left "level-up ready" FAB — slow pulse so it reads as an invitation, not an alarm. */ #g-levelup-fab{ position:absolute; left:16px; bottom:46px; z-index:9; display:none; align-items:center; gap:7px; padding:8px 13px; background:linear-gradient(180deg,rgba(46,32,8,.94),rgba(22,15,4,.96)); border:1px solid #ffc132; border-radius:7px; cursor:pointer; color:#ffd884; font:bold 10px 'Palatino Linotype',serif; letter-spacing:2px; text-shadow:0 0 8px rgba(255,180,40,.8); box-shadow:0 0 14px rgba(255,170,30,.5); animation:fabPulse 1.5s ease-in-out infinite; } #g-levelup-fab:hover{ filter:brightness(1.15); } #g-levelup-fab .fab-glyph{ font-size:14px; line-height:1; } #g-levelup-fab .fab-lbl{ white-space:nowrap; } #g-levelup-fab-badge{ min-width:15px; height:15px; padding:0 3px; display:none; align-items:center; justify-content:center; background:#ff5a2a; border-radius:8px; color:#fff; font:bold 9px monospace; box-shadow:0 0 6px rgba(255,90,40,.8); } @keyframes fabPulse{ 0%,100%{ box-shadow:0 0 12px rgba(255,170,30,.4); transform:translateY(0);} 50%{ box-shadow:0 0 22px rgba(255,190,50,.85); transform:translateY(-2px);} } /* Imbue-Path rank track (item 2) — 10 dots = the named skill's level; the 5th/10th (fork levels) are larger; on card hover the next level flashes to preview what this pick grants. */ .imb-track{ display:flex; gap:4px; justify-content:center; align-items:center; margin-top:6px; height:11px; } .imb-dot{ width:6px; height:6px; border-radius:50%; background:#4a3f22; box-shadow:inset 0 0 2px rgba(0,0,0,.6); transition:background .15s; } .imb-dot.fork{ width:9px; height:9px; border:1px solid #6a5a30; } .imb-dot.filled{ background:#ff9a3a; box-shadow:0 0 5px rgba(255,140,40,.85); } .imb-dot.fork.filled{ background:#ffcc44; box-shadow:0 0 7px rgba(255,180,60,.95); } .stat-card:hover .imb-dot.next{ animation:imbNextFlash .7s ease-in-out infinite; } @keyframes imbNextFlash{ 0%,100%{ background:#4a3f22; box-shadow:none; transform:scale(1);} 50%{ background:#ffe0a0; box-shadow:0 0 9px rgba(255,190,70,1); transform:scale(1.35);} } /* Skillforge (dev/testing) — Sanctum-only panel to acquire + rank god skills without grinding the wilderness. Opened by the in-world forge prop (walk up + E) or the K key — the old corner button was retired. */ .forge-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; background:linear-gradient(180deg,rgba(28,20,12,.9),rgba(12,9,6,.95)); border:1px solid #5a3a18; border-radius:7px; padding:9px 12px; } .forge-left{ text-align:left; } .forge-name{ font:bold 11px 'Palatino Linotype',serif; color:#ffd8b8; letter-spacing:1px; } .forge-sub{ font:6.5px monospace; color:#aa7744; letter-spacing:1px; } .forge-state{ font:7px monospace; color:#ffae5a; margin-top:3px; } .forge-btns{ display:flex; gap:6px; } .forge-btn{ background:rgba(60,36,14,.9); border:1px solid #8a5a22; color:#ffcc88; font:bold 8px monospace; letter-spacing:1px; padding:5px 8px; border-radius:4px; cursor:pointer; transition:all .12s; } .forge-btn:hover{ background:rgba(90,54,20,.95); box-shadow:0 0 8px rgba(255,150,40,.5); } .forge-btn.dim{ opacity:.4; } /* God-Skill Action Bar (item 7 Phase 3) — WoW-style slotted icons by the MP bar. --gcol = the active patron's signature colour (IMBUE_GODS[god].col), so the border treatment is generic across gods. */ /* flex-wrap at exactly 5 columns → a 2×5 grid (rows of five), so 6–10 skills wrap to a second row instead of running off-screen. Width = 5·24 + 4·4 (gap) = 136 → +pad so 5 fit and the 6th wraps. */ #g-godskills{ display:flex; flex-wrap:wrap; width:138px; gap:4px; align-content:flex-end; justify-content:flex-start; } .gsb-slot{ box-sizing:border-box; position:relative; width:24px; height:24px; border-radius:5px; background:rgba(10,10,22,.78); border:2px solid #2c2c40; display:flex; align-items:center; justify-content:center; transition:border-color .15s, box-shadow .15s, opacity .15s, filter .15s; } .gsb-slot.gsb-active{ border-color:var(--gcol,#ff7a22); box-shadow:0 0 8px -1px var(--gcol,#ff7a22), inset 0 0 6px -3px var(--gcol,#ff7a22); } .gsb-slot.gsb-dormant{ border-color:#6a5640; opacity:.62; filter:grayscale(.45); } .gsb-slot.gsb-off{ border-color:#3a4150; opacity:.42; filter:grayscale(1); } .gsb-slot.gsb-poor{ border-color:#ff4444; box-shadow:0 0 8px -1px #ff4444; } /* Max-MP can't cover the cost — grow your mana */ .gsb-icon{ font-size:13px; line-height:1; } .gsb-icon-art{ width:19px; height:19px; image-rendering:auto; } .gsb-key{ position:absolute; top:-3px; left:1px; font:bold 6px monospace; color:#dde; text-shadow:0 0 3px #000,0 1px 2px #000; } .gsb-cost{ position:absolute; bottom:-3px; right:0; font:bold 6px monospace; color:#9cc6ff; text-shadow:0 0 3px #000,0 1px 2px #000; } .gsb-badge{ position:absolute; top:-5px; right:-4px; font-size:9px; text-shadow:0 0 3px #000; } /* Radial cooldown clock: a dark wedge (conic-gradient, set per-frame in gUpdateGodSkillHud) covers the cooldown still remaining and sweeps away as the skill readies; the seconds-left show centred over the icon. */ .gsb-cd{ position:absolute; inset:0; border-radius:5px; pointer-events:none; display:flex; align-items:center; justify-content:center; font:bold 9px monospace; color:#eaf2ff; text-shadow:0 0 3px #000,0 1px 2px #000; } /* Not-enough-mana tell — BLINK the MP bar's border red ~3× (gNotEnoughMana toggles .gmp-flash; reflow restarts it) */ @keyframes gmpFlash { 0%,28%,56% { box-shadow:0 0 0 2px #ff3030, 0 0 10px 1px #ff3030; } 14%,42%,70%,100% { box-shadow:0 0 0 0 rgba(255,48,48,0); } } #g-mp-bar.gmp-flash{ animation: gmpFlash .75s ease-out; } /* EXHAUSTED state — a red pulsing label centred over the MP bar (.exhausted toggled each frame while mpExhaustT>0). The 6px bar can't contain text, so we un-clip it during exhaustion and overlay the label. */ #g-mp-bar.exhausted{ overflow:visible; } #g-mp-exhaust{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:none; white-space:nowrap; font:bold 9px/1 monospace; letter-spacing:1.5px; color:#ff3b3b; pointer-events:none; text-shadow:0 0 3px #000, 0 0 6px #000, 0 1px 2px #000; animation:gmpExhaustPulse 1s ease-in-out infinite; } #g-mp-bar.exhausted #g-mp-exhaust{ display:block; } @keyframes gmpExhaustPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } } /* CSS-built framed portrait — the figure is an image cutout; the frame, glow and name are all CSS */ /* Fills the full left panel; ornate metallic gradient border + inner hairline + corner studs + glow */ .lvl-portrait{ position:absolute; inset:0; overflow:hidden; background:#08070c; border:2px solid transparent; border-image:linear-gradient(145deg, var(--lvl-frame-hi), var(--lvl-frame-lo) 20%, var(--lvl-frame-hi) 40%, var(--lvl-frame-lo) 58%, var(--lvl-frame-hi) 80%, var(--lvl-frame-lo)) 1; box-shadow:0 0 46px var(--lvl-glow), inset 0 0 70px rgba(0,0,0,.5); } .lvl-portrait>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 12%; } .lvl-portrait::before{ content:''; position:absolute; inset:1px; border:1px solid var(--lvl-frame-hi); box-shadow:0 0 9px var(--lvl-glow); opacity:.45; pointer-events:none; z-index:2; } .lvl-portrait::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:2; box-shadow:inset 0 -120px 85px -26px rgba(0,0,0,.96), inset 0 70px 55px -28px rgba(0,0,0,.72), inset 0 0 95px rgba(0,0,0,.55); } /* Corner filigree (Artist 2026-06-24, levelup-ornaments) — the square ornament rotated into all four portrait corners. color:transparent hides the old ❖ glyph fallback while the sprite paints via background-image. */ .lvl-corner{ position:absolute; z-index:3; width:20px; height:20px; color:transparent; opacity:.9; pointer-events:none; background:url('assets/ui/levelup/levelup-card-filigree.png') center/contain no-repeat; filter:drop-shadow(0 0 6px var(--lvl-glow)); } .lvl-corner.tl{ top:4px; left:5px; } .lvl-corner.tr{ top:4px; right:5px; transform:rotate(90deg); } .lvl-corner.bl{ bottom:4px; left:5px; transform:rotate(270deg); } .lvl-corner.br{ bottom:4px; right:5px; transform:rotate(180deg); } .lvl-pname{ position:absolute; left:0; right:0; bottom:0; z-index:3; text-align:center; padding:12px 8px 14px; } .lvl-pname .nm{ font:bold 15px 'Palatino Linotype',serif; letter-spacing:1px; line-height:1.08; overflow-wrap:break-word; word-break:normal; color:var(--lvl-accent); text-shadow:0 0 16px var(--lvl-glow),0 2px 4px #000; } .lvl-pname .ln{ width:62%; height:1px; margin:6px auto 5px; background:linear-gradient(90deg,transparent,var(--lvl-accent),transparent); opacity:.55; } .lvl-pname .sub{ font:7.5px monospace; letter-spacing:3px; color:var(--lvl-accent2); opacity:.85; text-transform:uppercase; } .sk-slot{position:relative;width:48px;height:48px;border:1px solid #2a2a4a;border-radius:4px;background:#0d0d1e;overflow:hidden;cursor:default;flex-shrink:0;pointer-events:none;} .sk-slot.sk-ready{border-color:#4a4a8a;} .sk-slot.sk-active{border-color:#88aaff;box-shadow:0 0 6px rgba(100,140,255,.4);} /* Standardized LOCKED treatment for EVERY skill-bar slot (combat row, the Ultimate, the Grit mini): dim the art + labels and overlay ONE shared padlock kept at full opacity. Replaces the old per-slot canvas-drawn placeholder lock. */ .sk-slot.sk-locked{border-color:#333;} .sk-slot.sk-locked .sk-icon,.sk-slot.sk-locked .sk-key,.sk-slot.sk-locked .sk-name{opacity:.4;filter:grayscale(.7);} .sk-slot.sk-locked::after{content:"\1F512";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); font-size:17px;line-height:1;z-index:5;pointer-events:none;text-shadow:0 0 3px #000,0 0 6px #000,0 1px 2px #000;} .sk-slot.sk-mini.sk-locked::after{font-size:11px;} @keyframes sk-pulse{0%,100%{box-shadow:0 0 6px rgba(68,170,255,0.4);}50%{box-shadow:0 0 14px rgba(68,170,255,0.9);}} .sk-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;} .sk-icon canvas{display:block;} /* Knight combat-skill PNG icons (Artist handoff). Pre-squared+centred transparent cutouts → contain-fit, centred, in the square slot (the skill-bar scoped rule below tunes the exact inset/fill). */ .sk-icon-art{width:100%;height:100%;object-fit:contain;object-position:center;display:block;} .sk-slot.sk-art{background:transparent;border-color:transparent;} .sk-slot.sk-art.sk-imbued{border-color:#ff7a22 !important;} /* Ultimate (R) slot — radial cooldown overlay + ready glow / locked dim */ .sk-ult-cd{position:absolute;inset:0;border-radius:4px;display:flex;align-items:center;justify-content:center;font:bold 11px monospace;color:#ffe9a0;text-shadow:0 0 4px #000;pointer-events:none;} /* ult locked styling unified into .sk-slot.sk-locked above (shared padlock + dimmed art) */ #knight-hud #skill-bar .sk-slot.sk-ult.sk-ult-ready{box-shadow:0 0 9px 1px rgba(255,208,64,.75)!important;} .sk-cd-overlay{position:absolute;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;pointer-events:none;} .sk-cd-overlay canvas{position:absolute;inset:0;} .sk-cd-text{position:absolute;font-size:11px;font-family:monospace;color:#fff;font-weight:bold;text-shadow:0 0 4px #000;pointer-events:none;z-index:2;} .sk-key{position:absolute;top:2px;left:3px;font-size:7px;color:#8888aa;font-family:monospace;letter-spacing:.5px;pointer-events:none;} .sk-name{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:6px;color:#6666aa;font-family:monospace;letter-spacing:.3px;pointer-events:none;white-space:nowrap;overflow:hidden;} /* Dash charge pips (Second Wind): filled/empty dots along the slot's bottom edge; shown only when max charges > 1. */ .sk-charges{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:9px;line-height:1.2;color:#aaddff;text-shadow:0 0 3px #000,0 0 2px #000;pointer-events:none;z-index:3;letter-spacing:1px;} /* ── Knight bottom HUD — clean CSS PLACEHOLDER (no shell sprite, interim until the Artist's component UI lands): a dark steel panel with a god-skill lane, a combat row (passive + 6 sockets incl. the Ultimate), and HP/MP bars. Laid out with FLEXBOX (no per-box pixel hunting). Skill icons are pre-squared+centred assets, fit via object-fit:contain. */ #knight-hud{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);z-index:8;pointer-events:none; display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 11px 8px; background:linear-gradient(180deg,rgba(18,18,30,.90),rgba(8,8,15,.95)); border:1px solid #35354f;border-radius:9px; box-shadow:0 3px 16px rgba(0,0,0,.55),inset 0 1px 0 rgba(130,140,190,.13);} #knight-hud > div{pointer-events:auto;} /* god-skill lane (top) — small sockets; only acquired skills show (JS hides the row when none) */ #knight-hud #g-godskills{display:flex;flex-wrap:nowrap;gap:4px;justify-content:center;background:none;} #knight-hud .gsb-slot{flex:0 0 auto;width:19px;height:19px;border-radius:4px;position:relative; background:linear-gradient(160deg,#17172b,#0a0a14);border:1px solid #34344e;box-shadow:inset 0 1px 3px rgba(0,0,0,.55);} #knight-hud .gsb-icon-art{position:absolute;inset:2px;width:auto;height:auto;object-fit:contain;} #knight-hud .gsb-icon{font-size:11px;} /* combat row (bottom) — passive socket (smaller, set apart) + 6 main sockets */ #knight-hud #skill-bar{display:flex;align-items:center;gap:5px;background:none;border:none;} #knight-hud #skill-bar .sk-slot{flex:0 0 auto;position:relative;width:42px;height:42px;border-radius:6px; background:linear-gradient(158deg,#1c1c32,#0b0b16);border:1px solid #3e3e60; box-shadow:inset 0 0 11px rgba(0,0,0,.55),inset 0 1px 0 rgba(130,140,190,.10);} #knight-hud #skill-bar .sk-slot.sk-ready{border-color:#52527e;} #knight-hud #skill-bar .sk-slot.sk-active{border-color:#8aabff;box-shadow:inset 0 0 11px rgba(0,0,0,.5),0 0 8px rgba(100,140,255,.45);} #knight-hud #skill-bar .sk-slot.sk-locked .sk-icon{opacity:.42;filter:grayscale(.6);} /* dim the ART only — the shared ::after padlock stays crisp */ #knight-hud #skill-bar .sk-mini{width:30px;height:30px;margin-right:5px;} /* passive — smaller + a gap before the action row */ /* square ICON CONTENT BOX — inset, square cutout centred via contain (same logic on every socket). inset is the only fill knob: smaller = icons fill more of the slot, leaving a thin steel-frame reveal. */ #knight-hud #skill-bar .sk-icon{position:absolute;inset:2px;display:block;} #knight-hud #skill-bar .sk-icon-art{width:100%;height:100%;object-fit:contain;display:block;} /* All icons (combat / grit / ultimate) are pre-squared TRANSPARENT cutouts now — the glow combat icons were luminance-keyed off their black backing, so they render normal-alpha like the solid grit/ult, no blend mode. */ #knight-hud #skill-bar .sk-icon canvas{width:100%;height:100%;} /* hotkey label — small corner chip (the placeholder shows controls); the legacy skill-name text stays hidden */ #knight-hud #skill-bar .sk-key{position:absolute;right:1px;bottom:0;font:7px/1.4 monospace;color:#b6c0de;background:rgba(6,8,16,.62);padding:0 2px;border-radius:3px 0 0 0;} #knight-hud #skill-bar .sk-name{display:none;} /* Ultimate socket — gold "ready" glow; same size/grid as the other main sockets */ #knight-hud #skill-bar .sk-slot.sk-ult.sk-ult-ready{box-shadow:inset 0 0 11px rgba(0,0,0,.5),0 0 11px 1px rgba(255,208,64,.6);} .sk-ult-cd{position:absolute;inset:0;border-radius:6px;display:flex;align-items:center;justify-content:center;font:bold 12px monospace;color:#ffe9a0;text-shadow:0 0 4px #000;pointer-events:none;} /* HP / MP = PLAYER VITALS — a PLAYER-level HUD (above any class), always shown incl. when classless. Its own fixed-width centred bar pinned to the bottom; the class-kit HUD (#knight-hud) stacks just above it. */ #player-vitals{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:8;width:326px;max-width:92%;pointer-events:none;} #player-vitals > div{pointer-events:auto;} #player-vitals #khud-bars{display:flex;gap:10px;width:100%;box-sizing:border-box;} #player-vitals .khud-bar{flex:1;display:flex;align-items:center;gap:4px;} #player-vitals .khud-lbl{font:bold 7px monospace;color:#d08074;letter-spacing:.5px;width:13px;} #player-vitals .khud-mplbl{color:#80a4d4;} #player-vitals .khud-track{position:relative;flex:1;height:7px;background:#110b15;border:1px solid #2b2331;border-radius:3px;overflow:hidden;} #khud-hp-fill,#khud-mp-fill{height:100%;width:100%;transition:width .12s;} #khud-hp-fill{background:linear-gradient(180deg,#e2583e,#9c2414);} /* Grit-shield overlay — whitish bar from the left over the HP fill, only while a shield is banked */ #khud-shield-fill{position:absolute;left:0;top:0;height:100%;width:0;display:none; background:rgba(224,229,236,0.9);box-shadow:0 0 4px rgba(224,229,236,0.6);z-index:2;pointer-events:none;transition:width .12s;} #khud-mp-fill{background:linear-gradient(180deg,#4c88e2,#1e3e88);} #player-vitals #khud-bars.kmp-exhausted #khud-mp-fill{filter:grayscale(.8) brightness(.6);} /* EXHAUSTED label — child of the MP track so it follows the bar wherever it's moved. The 7px track can't contain text, so un-clip ONLY the MP track (it :has the label) during exhaustion and overlay the centred label. */ #khud-mp-exhaust{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;z-index:3; white-space:nowrap;font:bold 8px/1 monospace;letter-spacing:.5px;color:#ff6a6a;pointer-events:none; text-shadow:0 0 3px #000,0 0 6px #000,0 1px 2px #000;animation:gmpExhaustPulse 1s ease-in-out infinite;} #player-vitals #khud-bars.kmp-exhausted .khud-track:has(#khud-mp-exhaust){overflow:visible;} #player-vitals #khud-bars.kmp-exhausted #khud-mp-exhaust{display:block;} /* the old bottom-strip HP/MP rows stay superseded by the panel bars */ .game-hud .ghud-hp.khud-hidden{display:none;} .ghud-hp{display:flex;gap:6px;align-items:center;} .ghud-bar{width:90px;height:6px;background:#2a1a0a;border-radius:2px;overflow:hidden;position:relative;} .ghud-fill{height:100%;background:#c85030;border-radius:2px;transition:width .1s;} /* Grit shield — whitish-grey overlay from the left of the HP bar, shown only when active */ #g-shield-bar{position:absolute;left:0;top:0;height:100%;width:0;display:none;border-radius:2px; background:rgba(224,229,236,0.9);box-shadow:0 0 4px rgba(224,229,236,0.6);z-index:2;pointer-events:none;} .ghud-lbl{font-size:9px;color:var(--dim);} #g-death{display:none;position:absolute;inset:0;background:rgba(0,0,0,.82);align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:10;} #g-death.show{display:flex!important;} /* #31 Forest-Cleared victory modal — gold/ascend flavored twin of #g-death (warm wash, pop-in). */ #g-victory{display:none;position:absolute;inset:0;background:radial-gradient(circle at center,rgba(40,30,6,.78),rgba(0,0,0,.9));align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:11;} #g-victory.show{display:flex!important;animation:gvPop .32s ease-out;} @keyframes gvPop{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:scale(1);}} .gv-banner{color:#ffe27a;font-size:26px;letter-spacing:3px;font-family:'Cinzel',serif;text-shadow:0 0 22px rgba(255,210,80,.7);} .gd-btn.ascend{border-color:#ff8a3a;color:#ffb070;text-shadow:0 0 8px rgba(255,140,60,.5);} .gd-btn.ascend:hover{background:#2a1606;border-color:#ffb070;color:#ffd9a0;} /* Co-op downed overlay — shown ONLY on the dead player's own screen while they wait to respawn; live allies see nothing. Lighter than #g-death (spectate through it) and non-blocking. */ #g-downed{display:none;position:absolute;inset:0;background:rgba(24,4,4,.42);align-items:center;justify-content:center;flex-direction:column;gap:10px;z-index:9;pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.95);} #g-downed.show{display:flex!important;} #g-downed .gd-title{color:#ff6a6a;} #g-complete{display:none;position:absolute;inset:0;background:rgba(0,0,0,.88);align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:10;} #g-complete.show{display:flex!important;} .gc-title{color:#60c880;font-size:26px;letter-spacing:3px;font-family:'Cinzel',serif;} .gc-sub{color:#3a7a4a;font-size:10px;letter-spacing:2px;} .gc-kills{color:var(--acc);font-size:12px;letter-spacing:2px;margin-top:2px;} .gd-title{color:#c85030;font-size:24px;letter-spacing:2px;} .gd-sub{color:#7a5a3a;font-size:10px;} .gd-btns{display:flex;gap:10px;margin-top:4px;} .gd-btn{padding:7px 22px;border:1px solid var(--border);background:transparent;color:var(--dim);font-family:inherit;font-size:10px;letter-spacing:1px;border-radius:3px;transition:all .12s;} .gd-btn.respawn{border-color:#c85030;color:#c85030;} .gd-btn.respawn:hover{background:#2a1010;} .gd-btn:hover{border-color:var(--acc);color:var(--acc);} /* #35 Forest Difficulty tier-picker — armed at the forest portal. Cards built in gOpenTierPicker(). */ #g-tier-picker{display:none;position:absolute;inset:0;background:radial-gradient(circle at center,rgba(8,10,20,.86),rgba(0,0,0,.94));align-items:center;justify-content:center;flex-direction:column;gap:10px;z-index:12;} #g-tier-picker.show{display:flex!important;animation:gvPop .28s ease-out;} .tp-banner{color:#e8e0ff;font-size:24px;letter-spacing:3px;font-family:'Cinzel',serif;text-shadow:0 0 18px rgba(150,130,255,.55);} .tp-sub{color:#8a86a8;font-size:10px;letter-spacing:1px;margin-bottom:4px;} #tp-cards{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:640px;} .tp-card{width:114px;padding:12px 8px 11px;border:1px solid #33304a;border-radius:5px;background:rgba(18,18,30,.7);display:flex;flex-direction:column;align-items:center;gap:5px;transition:all .12s;cursor:pointer;} .tp-card:hover{transform:translateY(-2px);background:rgba(26,26,42,.85);} .tp-card.locked{opacity:.42;cursor:not-allowed;filter:grayscale(.6);} .tp-card.locked:hover{transform:none;background:rgba(18,18,30,.7);} .tp-name{font-size:13px;letter-spacing:2px;font-family:'Cinzel',serif;} .tp-dust{font:bold 15px monospace;color:#d9bfff;text-shadow:0 0 8px rgba(176,112,255,.45);} .tp-danger{font-size:8px;line-height:1.4;color:#9a96b4;text-align:center;min-height:22px;} .tp-lock{font-size:8px;letter-spacing:1px;color:#c86868;text-align:center;min-height:22px;} /* g-exit-msg replaced by g-complete */ .game-back{position:absolute;top:10px;left:10px;z-index:20;padding:5px 12px;border:1px solid var(--border);background:rgba(0,0,0,.6);color:var(--dim);font-family:inherit;font-size:9px;letter-spacing:1px;border-radius:2px;transition:all .12s;} .game-back:hover{border-color:var(--acc);color:var(--acc);} /* ── CHARACTER CREATOR ── */ #cc-screen{background:var(--bg);align-items:center;justify-content:center;} .cc-inner{display:flex;flex-direction:column;align-items:center;gap:16px;width:640px;max-width:98vw;} .cc-title{font-size:16px;color:var(--acc);letter-spacing:3px;font-family:'Cinzel',serif;} .cc-body{display:flex;gap:20px;align-items:flex-start;width:100%;} .cc-canvas-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;} #cc-canvas{cursor:crosshair;image-rendering:pixelated;border:2px solid var(--border);border-radius:4px;background:repeating-conic-gradient(#1a1624 0% 25%,#14101e 0% 50%) 0 0/16px 16px;} #cc-canvas:hover{border-color:var(--acc);} .cc-preview-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;} .cc-preview-label{font-size:9px;color:var(--dim);letter-spacing:2px;} #cc-preview{image-rendering:pixelated;border:1px solid var(--border);border-radius:2px;background:repeating-conic-gradient(#1a1624 0% 25%,#14101e 0% 50%) 0 0/8px 8px;} .cc-sidebar{display:flex;flex-direction:column;gap:12px;flex:1;} .cc-section-label{font-size:9px;color:var(--dim);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;} .cc-palette{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;} .cc-swatch{width:28px;height:28px;border-radius:3px;border:2px solid transparent;cursor:pointer;transition:all .1s;} .cc-swatch:hover{transform:scale(1.15);} .cc-swatch.active{border-color:#fff;box-shadow:0 0 0 1px var(--acc);} .cc-eraser{width:28px;height:28px;border-radius:3px;border:2px solid var(--border);background:transparent;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .1s;} .cc-eraser:hover,.cc-eraser.active{border-color:#fff;background:var(--surf2);} .cc-custom-color{display:flex;gap:6px;align-items:center;} .cc-custom-color input[type=color]{width:36px;height:28px;border:none;border-radius:3px;cursor:pointer;padding:0;background:none;} .cc-custom-color input[type=text]{flex:1;background:var(--surf);border:1px solid var(--border);color:var(--txt);font-family:inherit;font-size:10px;padding:4px 8px;border-radius:3px;outline:none;width:80px;} .cc-custom-color input[type=text]:focus{border-color:var(--acc);} .cc-tools{display:flex;gap:6px;} .cc-tool-btn{padding:5px 10px;border:1px solid var(--border);background:var(--surf);color:var(--dim);font-family:inherit;font-size:9px;letter-spacing:1px;border-radius:3px;cursor:pointer;transition:all .12s;} .cc-tool-btn:hover{color:var(--txt);border-color:var(--txt);} .cc-tool-btn.active{color:var(--acc);border-color:var(--acc);} .cc-upload{width:100%;padding:7px;border:1px dashed var(--border);background:transparent;color:var(--dim);font-family:inherit;font-size:9px;letter-spacing:1px;border-radius:3px;cursor:pointer;transition:all .12s;text-align:center;} .cc-upload:hover{border-color:var(--acc);color:var(--acc);} .cc-actions{display:flex;gap:10px;width:100%;} .cc-action-btn{flex:1;padding:10px;border:1px solid var(--border);background:var(--surf);color:var(--txt);font-family:inherit;font-size:10px;letter-spacing:2px;border-radius:4px;cursor:pointer;transition:all .15s;} .cc-action-btn:hover{border-color:var(--acc);color:var(--acc);} .cc-action-btn.primary{border-color:var(--acc2);color:var(--acc2);} .cc-action-btn.primary:hover{background:#1a1430;} .cc-chars-list{display:flex;flex-direction:column;gap:5px;max-height:140px;overflow-y:auto;padding-right:2px;} .cc-chars-list::-webkit-scrollbar{width:3px;} .cc-chars-list::-webkit-scrollbar-thumb{background:var(--border);} .cc-char-row{display:flex;align-items:center;gap:8px;background:var(--surf);border:1px solid var(--border);border-radius:3px;padding:5px 8px;} .cc-char-row:hover{border-color:var(--acc);} .cc-char-thumb{image-rendering:pixelated;width:26px;height:26px;border-radius:2px;flex-shrink:0;} .cc-char-name{flex:1;font-size:10px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .cc-char-btn{padding:3px 7px;border:1px solid var(--border);background:transparent;color:var(--dim);font-family:inherit;font-size:9px;letter-spacing:1px;border-radius:2px;cursor:pointer;transition:all .12s;flex-shrink:0;} .cc-char-btn:hover{color:var(--acc);border-color:var(--acc);} .cc-char-btn.del:hover{color:var(--danger);border-color:var(--danger);} .cc-char-active{border-color:var(--acc2)!important;} .cc-name-row{display:flex;gap:6px;align-items:center;} .cc-name-input{flex:1;background:var(--surf);border:1px solid var(--border);color:var(--txt);font-family:inherit;font-size:10px;padding:5px 8px;border-radius:3px;outline:none;} .cc-name-input:focus{border-color:var(--acc);} /* ── SEED MODAL ── */ #seed-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.82);align-items:center;justify-content:center;z-index:300;} #seed-modal.show{display:flex;} .seed-box{background:var(--surf);border:1px solid var(--border);border-radius:6px;padding:24px;width:480px;max-width:96vw;display:flex;flex-direction:column;gap:14px;} .seed-title{font-size:13px;color:var(--acc);letter-spacing:3px;} .seed-string{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--txt);background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:10px 12px;word-break:break-all;line-height:1.6;max-height:120px;overflow-y:auto;cursor:text;user-select:all;} .seed-actions{display:flex;gap:8px;} .seed-btn{flex:1;padding:8px;border:1px solid var(--border);background:transparent;color:var(--dim);font-family:inherit;font-size:9px;letter-spacing:2px;border-radius:3px;cursor:pointer;transition:all .12s;} .seed-btn:hover{color:var(--acc);border-color:var(--acc);} .seed-btn.primary{border-color:var(--acc2);color:var(--acc2);} .seed-btn.primary:hover{background:#1a1430;} .seed-import-wrap{display:flex;flex-direction:column;gap:8px;} .seed-import-label{font-size:9px;color:var(--dim);letter-spacing:2px;} .seed-import-input{background:var(--bg);border:1px solid var(--border);color:var(--txt);font-family:inherit;font-size:10px;padding:8px 12px;border-radius:3px;outline:none;width:100%;} .seed-import-input:focus{border-color:var(--acc);} .seed-import-err{font-size:9px;color:var(--danger);min-height:12px;} .mc-btn.seed:hover{color:#60d0c0;border-color:#60d0c0;} /* ── INVENTORY OVERLAY ─────────────────────────────────────── */ #inv-overlay{display:none;position:absolute;inset:0;background:rgba(0,0,0,.85); align-items:center;justify-content:center;z-index:25;} #inv-overlay.show{display:flex;} .inv-panel{display:flex;gap:20px;background:#0d0b14;border:1px solid var(--border); border-radius:6px;padding:20px;user-select:none;} /* Left — character + equip slots */ .inv-left{display:flex;flex-direction:column;gap:10px;width:160px;} .inv-char-preview{width:160px;height:120px;background:#0a0812;border:1px solid var(--border); border-radius:4px;display:flex;align-items:center;justify-content:center;position:relative;} .inv-char-canvas{image-rendering:auto;border-radius:4px;} .inv-equip-slots{display:flex;flex-direction:column;gap:6px;} .inv-slot-row{display:flex;align-items:center;gap:8px;} .inv-slot-label{font-size:8px;color:var(--dim);letter-spacing:1px;width:42px;text-align:right;} .inv-slot{width:44px;height:44px;background:#080610;border:1px solid var(--border); border-radius:3px;display:flex;align-items:center;justify-content:center; position:relative;transition:border-color .12s;cursor:pointer;} .inv-slot.drag-over{border-color:var(--acc);background:#15101e;} .inv-slot.equipped{border-color:#60c880;} /* Right — inventory grid */ .inv-right{display:flex;flex-direction:column;gap:8px;} .inv-right-title{font-size:9px;color:var(--dim);letter-spacing:2px;text-align:center;} .inv-grid{display:grid;grid-template-columns:repeat(3,52px);gap:5px;} .inv-cell{width:52px;height:52px;background:#080610;border:1px solid var(--border); border-radius:3px;display:flex;align-items:center;justify-content:center; position:relative;transition:border-color .12s;cursor:pointer;} .inv-cell.drag-over{border-color:var(--acc);background:#15101e;} /* Draggable item */ .inv-item{width:36px;height:36px;display:flex;align-items:center;justify-content:center; cursor:grab;position:relative;border-radius:2px;} .inv-item canvas{image-rendering:pixelated;pointer-events:none;} .inv-item-tip{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%); background:#1a1528;border:1px solid var(--border);border-radius:3px;padding:5px 8px; font-size:8px;color:var(--txt);white-space:nowrap;pointer-events:none;display:none;z-index:30;min-width:120px;} .inv-item:hover .inv-item-tip{display:block;} .inv-tip-name{font-weight:bold;color:#ddd;margin-bottom:3px;} .inv-tip-desc{color:#888;margin-bottom:4px;} .inv-tip-scaling{display:flex;gap:6px;border-top:1px solid #2a2040;padding-top:4px;margin-top:2px;} .inv-tip-stat{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:26px;} .inv-tip-stat .ts-label{font-size:6px;color:#666;letter-spacing:1px;} .inv-tip-stat .ts-grade{font-size:10px;font-weight:bold;} /* Dragging ghost */ #inv-drag-ghost{position:fixed;pointer-events:none;z-index:100;opacity:.85;display:none;} /* Q key hint */ .inv-q-hint{font-size:8px;color:var(--dim);text-align:center;letter-spacing:1px;} /* ── Shrine overlay ─────────────────────────────────── */ #g-shrine-overlay{ display:none; } #g-shrine-overlay.open{ display:flex !important; } /* ── Locked patron gods (only Cilia is selectable for now) ── */ .shrine-god-card.sgc-locked{ position:relative; filter:grayscale(0.85) brightness(0.5); pointer-events:none; } .shrine-god-card.sgc-locked .sgc-frame{ box-shadow:none !important; } .sgc-lock-badge{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:rgba(8,6,16,0.55); border-radius:8px; font:bold 8px monospace; letter-spacing:2px; color:#caa7ff; text-shadow:0 0 6px rgba(0,0,0,0.9); pointer-events:none; } .sgc-lock-badge .sgc-lock-icon{ font-size:20px; line-height:1; filter:drop-shadow(0 0 4px rgba(0,0,0,0.85)); } /* ── Imbue-a-skill overlay ── */ #g-imbue-overlay{ display:none; } #g-imbue-overlay.open{ display:flex !important; } .imbue-skill-card{ position:relative; width:96px; min-height:104px; padding:10px 8px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; background:linear-gradient(180deg, rgba(60,20,8,0.92), rgba(28,10,6,0.96)); border:1px solid #5a2410; border-radius:8px; cursor:pointer; transition:transform .12s, box-shadow .12s, border-color .12s; } .imbue-skill-card:hover{ transform:translateY(-4px); border-color:#ff7a22; box-shadow:0 0 18px rgba(255,110,0,0.55); } .imbue-skill-card.selected{ border-color:#ffb066; box-shadow:0 0 26px rgba(255,140,30,0.9); } /* Already imbued — locked-in, not re-pickable */ .imbue-skill-card.isc-done{ cursor:default; } .imbue-skill-card.isc-done:hover{ transform:none; } /* No imbue allowance left this level — dim, not clickable */ .imbue-skill-card.isc-spent{ opacity:0.38; filter:grayscale(0.65); cursor:default; } .imbue-skill-card.isc-spent:hover{ transform:none; border-color:#5a2410; box-shadow:none; } .imbue-skill-card .isc-icon{ width:48px; height:48px; image-rendering:pixelated; } .imbue-skill-card .isc-name{ font:bold 10px monospace; letter-spacing:1px; color:#ffe6cf; } .imbue-skill-card .isc-key{ font:bold 8px monospace; letter-spacing:2px; color:#ffcaa0; } /* ── Imbued skill slot indicator on the hotbar ── */ .sk-slot.sk-imbued{ border-color:#ff7a22 !important; box-shadow:0 0 12px rgba(255,110,0,0.7); } .sk-slot .sk-flame{ position:absolute; top:1px; right:2px; font-size:12px; line-height:1; filter:drop-shadow(0 0 3px rgba(255,80,0,0.95)); pointer-events:none; z-index:6; } /* ── Class picker overlay (#25 Slice 3) ── */ #g-class-overlay{ display:none; } #g-class-overlay.open{ display:flex !important; } .class-pick-card{ position:relative; width:128px; min-height:120px; padding:14px 10px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; background:linear-gradient(180deg, rgba(20,28,46,0.94), rgba(10,14,26,0.97)); border:1px solid #3a4a6a; border-radius:8px; cursor:pointer; transition:transform .12s, box-shadow .12s, border-color .12s; } .class-pick-card:hover{ transform:translateY(-5px); border-color:#7aa2ff; box-shadow:0 0 20px rgba(110,150,255,0.55); } .class-pick-card.selected{ border-color:#b0c8ff; box-shadow:0 0 28px rgba(140,180,255,0.9); } /* Coming-soon classes — visible but locked (kit not shipped yet) */ .class-pick-card.cpc-locked{ cursor:default; filter:grayscale(0.7) brightness(0.62); } .class-pick-card.cpc-locked:hover{ transform:none; border-color:#3a4a6a; box-shadow:none; } .class-pick-card .cpc-name{ font:bold 12px monospace; letter-spacing:1px; color:#e6eeff; } .class-pick-card .cpc-blurb{ font:8px monospace; line-height:1.4; color:#9fb0cc; text-align:center; } .class-pick-card .cpc-badge{ font:bold 7px monospace; letter-spacing:2px; color:#7da0c8; margin-top:auto; } .class-pick-card.cpc-locked .cpc-badge{ color:#c89a6a; } .shrine-god-card{ width:130px; cursor:pointer; transition:transform .18s,filter .18s; filter:drop-shadow(0 4px 18px var(--card-glow2)); } .shrine-god-card:hover{ transform:translateY(-8px) scale(1.04); filter:drop-shadow(0 8px 28px var(--card-glow)); } .shrine-god-card.selected{ transform:translateY(-12px) scale(1.06); filter:drop-shadow(0 0 32px var(--card-glow)) brightness(1.1); } .sgc-frame{ border:1px solid rgba(255,255,255,0.12); border-top:2px solid var(--card-col); border-radius:4px; background:linear-gradient(180deg,rgba(10,6,20,0.95) 0%,rgba(5,3,12,0.98) 100%); overflow:hidden; position:relative; } .sgc-element-tag{ position:absolute;top:6px;left:6px; font:bold 6px monospace;letter-spacing:2px; color:var(--card-col); background:rgba(0,0,0,0.6); padding:2px 5px;border-radius:2px; border:1px solid var(--card-col); opacity:0.9;z-index:2; } .sgc-img{ width:100%;height:130px; object-fit:cover;object-position:top center; display:block; } .sgc-footer{ padding:7px 8px 8px; background:linear-gradient(0deg,rgba(0,0,0,0.9),transparent); } .sgc-name{ font:bold 11px 'Palatino Linotype',serif; color:#f0e8ff;letter-spacing:1px; } .sgc-title{ font:6px monospace;color:var(--card-col); letter-spacing:1.5px;margin-top:2px;opacity:0.85; } .shrine-god-card.selected .sgc-frame{ border-top-color:var(--card-col); box-shadow:inset 0 0 18px var(--card-glow2); } .shrine-god-card.selected .sgc-name::after{ content:' ✦';color:var(--card-col); }