@import"https://fonts.googleapis.com/css2?family=MedievalSharp&family=Cinzel:wght@400;600;700&display=swap";:root{--bg:#0b1020;--panel:#0f1724;--accent:#ffd166;--tile-back:#1b2433;--shroud: rgba(0,0,0,.6);--font: "Cinzel", "MedievalSharp", serif;--stone: #3a3a3a;--stone-light: #4a4a4a;--stone-dark: #2a2a2a;--gold: #d4af37;--bronze: #8b6914}html,body,#root{height:100%;margin:0;font-family:var(--font);background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.3) 100%),linear-gradient(180deg,#1a1612,#0f0e0c,#1a1612);color:#e6eef8;letter-spacing:.5px;background-attachment:fixed}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);pointer-events:none;z-index:0}.app{height:100vh;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:linear-gradient(180deg,#2a2520,#1a1510);box-shadow:0 2px 8px #00000080,inset 0 1px #ffffff1a,inset 0 -2px #00000080;border-bottom:3px solid var(--bronze);position:relative}.header:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);pointer-events:none}.header h2{text-shadow:2px 2px 0px rgba(0,0,0,.8),0 0 10px rgba(212,175,55,.3);color:var(--gold);font-weight:700;letter-spacing:1px}.controls{display:flex;gap:8px;align-items:center}.btn{background:linear-gradient(180deg,#4a3a2a,#3a2a1a,#2a1a0a);border:3px solid;border-color:#6a5a4a #2a1a0a #1a0a00 #4a3a2a;padding:10px 16px;border-radius:4px;cursor:pointer;color:#f0e6d2;box-shadow:0 4px 6px #0009,inset 0 1px #fff3,inset 0 -2px #0006;font-family:var(--font);font-weight:600;text-shadow:1px 1px 2px rgba(0,0,0,.8);transition:all .15s ease;position:relative}.btn:before{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border:1px solid rgba(212,175,55,.15);border-radius:2px;pointer-events:none}.btn:hover{background:linear-gradient(180deg,#5a4a3a,#4a3a2a,#3a2a1a);border-color:#7a6a5a #3a2a1a #2a1a0a #5a4a3a;transform:translateY(-1px);box-shadow:0 5px 8px #000000b3,inset 0 1px #ffffff40,inset 0 -2px #0006,0 0 12px #d4af3733}.btn:active{transform:translateY(1px);box-shadow:0 2px 3px #0009,inset 0 1px 3px #00000080}.canvas{flex:1;position:relative;overflow:hidden;touch-action:none;min-height:100%}.hud{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:8px;z-index:60}.hud>*{background:linear-gradient(180deg,#2a2520,#1a1510);padding:10px 14px;border-radius:6px;border:3px solid;border-color:#5a4a3a #2a1a0a #1a0a00 #4a3a2a;box-shadow:0 4px 8px #000000b3,inset 0 1px #ffffff26,inset 0 -2px #0006}.tile{width:118px;height:118px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px #020617bf,inset 0 2px #ffffff26,inset 0 -3px #0006;-webkit-user-select:none;user-select:none;cursor:pointer;border:4px solid;border-color:#5a4a3a #3a2a1a #2a1a0a #4a3a2a;position:relative;overflow:hidden;background:linear-gradient(135deg,#2a2520,#1a1510)}.tile img{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none}.tile:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid rgba(212,175,55,.2);pointer-events:none}.tile:after{content:"";position:absolute;top:0;left:0;right:0;height:30%;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 100%);pointer-events:none}.tile .title{position:absolute;bottom:6px;left:6px;right:6px;font-size:11px;text-align:center;opacity:.95;text-shadow:1px 1px 2px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.8);font-weight:600;color:#f0e6d2}.tile.shroud{filter:grayscale(70%) contrast(60%);opacity:.65;background:linear-gradient(180deg,#111417,#0a0f14)}.viewport{position:absolute;top:0;right:0;bottom:0;left:0;display:block}.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(180deg,#2a2520,#1a1510);padding:24px;border-radius:8px;border:5px solid;border-color:#6a5a4a #2a1a0a #1a0a00 #4a3a2a;box-shadow:0 12px 40px #000000e6,inset 0 2px #ffffff26,inset 0 -3px #00000080,0 0 0 2px #d4af374d;z-index:100;width:420px;max-width:90%}.modal:before{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border:2px solid rgba(212,175,55,.2);border-radius:4px;pointer-events:none}.modal:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.05) 3px,rgba(0,0,0,.05) 6px);pointer-events:none;border-radius:8px}.modal>*{position:relative;z-index:1}.modal h3{color:var(--gold);text-shadow:2px 2px 0px rgba(0,0,0,.8),0 0 10px rgba(212,175,55,.3);font-weight:700;letter-spacing:1px}.task-list-modal{width:600px;max-width:95%;max-height:85vh;display:flex;flex-direction:column}.task-list-container{overflow-y:auto;max-height:500px;padding-right:8px}.task-list-container::-webkit-scrollbar{width:12px}.task-list-container::-webkit-scrollbar-track{background:linear-gradient(90deg,#1a1510,#2a2520,#1a1510);border-radius:6px;border:2px solid #2a1a0a;box-shadow:inset 0 0 6px #00000080}.task-list-container::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#5a4a3a,#3a2a1a);border-radius:6px;border:2px solid #2a1a0a;box-shadow:inset 0 1px #fff3,0 2px 4px #00000080}.task-list-container::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#6a5a4a,#4a3a2a);box-shadow:inset 0 1px #ffffff40,0 2px 6px #0009,0 0 8px #d4af3733}.tier-filter{transition:all .2s ease;background:linear-gradient(135deg,#2a2520,#1a1510);border:2px solid rgba(255,255,255,.2);padding:8px 12px;border-radius:4px;box-shadow:0 2px 4px #00000080,inset 0 1px #ffffff1a;font-weight:600;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.tier-filter:hover{box-shadow:0 2px 6px #0009,inset 0 1px #ffffff26,0 0 12px currentColor;transform:translateY(-1px)}.tier-filter.active{background:linear-gradient(135deg,var(--accent) 0%,#d4a832 100%);color:#000;font-weight:700;border-color:var(--gold);box-shadow:0 3px 8px #d4af3780,inset 0 1px #ffffff4d,0 0 20px #d4af3766;text-shadow:0 1px 2px rgba(0,0,0,.3)}.task-list-item{transition:all .2s ease;border-radius:4px;border:2px solid transparent}.task-list-item:hover{background:linear-gradient(90deg,#d4af3726,#d4af370d)!important;border-color:#d4af374d;box-shadow:0 0 12px #d4af371a;transform:translate(4px)}hr{border:none;height:2px;background:linear-gradient(90deg,transparent 0%,var(--bronze) 50%,transparent 100%);margin:16px 0;box-shadow:0 1px #ffffff1a}.badge{display:inline-block;padding:4px 10px;background:linear-gradient(135deg,#8b69144d,#8b691426);border:2px solid var(--bronze);border-radius:4px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold);text-shadow:1px 1px 2px rgba(0,0,0,.8);box-shadow:0 2px 4px #0006,inset 0 1px #ffffff1a}.progress-container{background:linear-gradient(180deg,#1a1510,#2a2520);height:10px;border-radius:5px;overflow:hidden;border:2px solid #2a1a0a;box-shadow:inset 0 2px 4px #0009}.progress-bar{background:linear-gradient(90deg,var(--bronze) 0%,var(--gold) 50%,var(--bronze) 100%);height:100%;transition:width .3s ease;box-shadow:0 0 10px #d4af3780,inset 0 1px #ffffff4d;position:relative;overflow:hidden}.progress-bar:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{to{left:200%}}.small{font-size:13px;opacity:.9}.difficulty-stat{display:inline-block;padding:4px 10px;border-radius:4px;background:linear-gradient(135deg,#0006,#0003);border:2px solid currentColor;box-shadow:0 2px 4px #0009,inset 0 1px #fff3,0 0 8px currentColor;text-shadow:1px 1px 2px rgba(0,0,0,.9),0 0 6px currentColor;font-weight:700;letter-spacing:.5px}.reroll-box{display:flex;align-items:center;gap:8px;padding:8px 14px;background:linear-gradient(135deg,#2a2520,#1a1510);border:3px solid;border-color:#6a5a4a #2a1a0a #1a0a00 #5a4a3a;border-radius:6px;box-shadow:0 4px 8px #000000b3,inset 0 1px #ffffff26,inset 0 -2px #0006,0 0 12px #d4af3726;position:relative;width:fit-content}.reroll-box:before{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border:1px solid rgba(212,175,55,.2);border-radius:3px;pointer-events:none}.reroll-icon{font-size:18px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8));animation:gentle-pulse 3s ease-in-out infinite}@keyframes gentle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.reroll-label{font-size:13px;color:#d4af37;font-weight:600;letter-spacing:.5px;text-shadow:1px 1px 2px rgba(0,0,0,.8),0 0 8px rgba(212,175,55,.3)}.reroll-count{font-size:16px;color:#ffd166;font-weight:700;min-width:24px;text-align:center;text-shadow:2px 2px 0px rgba(0,0,0,.8),0 0 10px rgba(255,209,102,.5);letter-spacing:1px}.seed-input{width:160px}input[type=text],input[type=range],.seed-input{background:linear-gradient(180deg,#1a1510,#2a2520);border:3px solid;border-color:#2a1a0a #4a3a2a #5a4a3a #3a2a1a;color:#f0e6d2;padding:8px 12px;border-radius:4px;font-family:var(--font);box-shadow:inset 0 2px 4px #00000080,0 1px #ffffff1a}input[type=text]:focus,.seed-input:focus{outline:none;border-color:var(--bronze);box-shadow:inset 0 2px 4px #00000080,0 0 0 2px #d4af374d,0 0 12px #d4af3733}input[type=range]{padding:0;height:8px;border-radius:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:linear-gradient(135deg,var(--gold) 0%,var(--bronze) 100%);border:3px solid #2a1a0a;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0009,inset 0 1px #ffffff4d,0 0 8px #d4af374d}input[type=range]::-webkit-slider-thumb:hover{background:linear-gradient(135deg,#e4bf47,#9b7924);box-shadow:0 2px 6px #000000b3,inset 0 1px #fff6,0 0 12px #d4af3780}input[type=range]::-moz-range-thumb{width:20px;height:20px;background:linear-gradient(135deg,var(--gold) 0%,var(--bronze) 100%);border:3px solid #2a1a0a;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0009,inset 0 1px #ffffff4d,0 0 8px #d4af374d}.custom-tooltip{padding:8px 12px;background:linear-gradient(135deg,#14141efa,#1e1e28fa);border:2px solid rgba(255,255,255,.2);border-radius:6px;box-shadow:0 4px 16px #000c,inset 0 1px #ffffff1a,0 0 20px #00000080;color:#fff;font-size:13px;white-space:nowrap;pointer-events:none;animation:tooltipFadeIn .15s ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.custom-tooltip:before{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(255,255,255,.2);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.tooltip-label{font-weight:600;opacity:.8;margin-bottom:4px;font-size:11px;text-transform:uppercase;letter-spacing:.5px}.tooltip-value{font-size:16px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.8)}.tooltip-progress-bar{width:100%;height:4px;background:#00000080;border-radius:2px;margin-top:6px;overflow:hidden;box-shadow:inset 0 1px 2px #00000080}.tooltip-progress-fill{height:100%;background:linear-gradient(90deg,currentColor 0%,currentColor 100%);border-radius:2px;transition:width .3s ease;box-shadow:0 0 8px currentColor}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.btn-complete{background:linear-gradient(180deg,#3a4a2a,#2a3a1a,#1a2a0a);border-color:#4a5a3a #1a2a0a #0a1a00 #3a4a2a;color:#a8e890}.btn-complete:before{border-color:#4ade8033}.btn-complete:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:radial-gradient(circle,rgba(74,222,128,.3),transparent 70%);transform:translate(-50%,-50%);transition:width .4s ease,height .4s ease;pointer-events:none;z-index:0}.btn-complete:hover{background:linear-gradient(180deg,#4a5a3a,#3a4a2a,#2a3a1a);border-color:#5a6a4a #2a3a1a #1a2a0a #4a5a3a;color:#c0f0a8}.btn-complete:hover:before{border-color:#4ade804d}.btn-complete:hover:after{width:200%;height:200%;animation:pulse-green 1.5s ease-in-out infinite}.btn-complete:active{transform:translateY(1px);box-shadow:0 2px 3px #0009,inset 0 1px 3px #00000080}@keyframes pulse-green{0%,to{opacity:.2;transform:translate(-50%,-50%) scale(1)}50%{opacity:.4;transform:translate(-50%,-50%) scale(1.1)}}.flex-row{display:flex;flex-direction:row;align-items:center}.flex-col{display:flex;flex-direction:column}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.flex-center{display:flex;align-items:center;justify-content:center}.text-center{text-align:center}.full-width{width:100%}.margin-bottom-16{margin-bottom:16px}.padding-10{padding:10px}.flex-wrap{flex-wrap:wrap}.ml-auto{margin-left:auto}.absolute-fill{position:absolute;top:0;right:0;bottom:0;left:0}.pixelated{image-rendering:pixelated;object-fit:contain}