:root{--c-bg: #0a0608;--c-bg2: #140a10;--c-surface: #1a0f14;--c-surface2: #241318;--c-surface3: #2e1a20;--c-border: #3a2128;--c-border-hi: #5a3038;--c-text: #e8dcc8;--c-text-dim: #9a8878;--c-text-faint: #6a5a50;--c-accent: #ff6b35;--c-accent-dim: #b34a22;--c-gold: #ffd700;--c-blood: #c0392b;--c-hp: #d32f2f;--c-hp-dark: #5a1010;--c-mp: #2f6fd3;--c-mp-dark: #102a5a;--c-xp: #b8902f;--rar-common: #c8c8c8;--rar-magic: #6ea8ff;--rar-rare: #ffd700;--rar-legendary: #ff8c42;--rar-set: #3fd06a;--rar-unique: #e8443c;--font-pixel: "DotGothic16", "Hiragino Kaku Gothic ProN", "Yu Gothic", monospace;--text-xs: 16px;--text-sm: 16px;--text-base: 16px;--text-lg: 20px;--text-xl: 24px;--text-hero: clamp(28px, 6vw, 56px);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--slot-size: 48px;--dur-fast: .12s;--dur-normal: .24s;--ease-out: cubic-bezier(.16, 1, .3, 1);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:var(--c-bg);color:var(--c-text);font-family:var(--font-pixel);font-size:var(--text-base);line-height:1.6;-webkit-font-smoothing:none;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}button,input{font-family:inherit;color:inherit}#app{position:fixed;inset:0;overflow:hidden}#game-canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:var(--c-bg)}#ui-root{position:absolute;inset:0;pointer-events:none}#ui-root>*{pointer-events:auto}#boot-splash{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);background:radial-gradient(ellipse at 50% 120%,#2a0d08 0%,var(--c-bg) 65%);z-index:99;transition:opacity .6s ease}#boot-splash.hide{opacity:0;pointer-events:none}.boot-flame{font-size:40px;animation:bootPulse 1.2s ease-in-out infinite}.boot-title{font-size:var(--text-hero);letter-spacing:.12em;color:var(--c-text);text-shadow:0 0 12px rgba(255,107,53,.55),0 4px 0 #3a0d08}.boot-title span{color:var(--c-accent)}.boot-sub{color:var(--c-text-dim);font-size:var(--text-sm);animation:bootPulse 1.6s ease-in-out infinite}@keyframes bootPulse{0%,to{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}.screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;background:radial-gradient(ellipse at 50% -20%,rgba(255,107,53,.07) 0%,transparent 55%),linear-gradient(180deg,var(--c-bg2) 0%,var(--c-bg) 100%);padding:calc(var(--space-4) + var(--safe-top)) calc(var(--space-4) + var(--safe-right)) calc(var(--space-4) + var(--safe-bottom)) calc(var(--space-4) + var(--safe-left));touch-action:pan-y}.panel{background:var(--c-surface);border:2px solid var(--c-border);box-shadow:inset 0 0 0 1px #000,0 4px #00000073;padding:var(--space-3)}.panel-title{font-size:var(--text-lg);color:var(--c-accent);letter-spacing:.08em;margin-bottom:var(--space-2);text-shadow:0 2px 0 #000}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);min-height:40px;padding:var(--space-2) var(--space-4);background:linear-gradient(180deg,var(--c-surface3) 0%,var(--c-surface) 100%);border:2px solid var(--c-border-hi);box-shadow:inset 0 0 0 1px #000,0 3px #000;color:var(--c-text);font-size:var(--text-base);letter-spacing:.04em;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast)}.btn:hover{border-color:var(--c-accent);color:#fff}.btn:active{transform:translateY(2px);box-shadow:inset 0 0 0 1px #000,0 1px #000}.btn:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}.btn:disabled{opacity:.45;cursor:not-allowed;border-color:var(--c-border)}.btn-primary{background:linear-gradient(180deg,#a8341a,#7a1f10);border-color:var(--c-accent);color:#ffe8d8;text-shadow:0 1px 0 #000}.btn-primary:hover{background:linear-gradient(180deg,#c2401f,#8e2614)}.btn-danger{border-color:var(--c-blood)}.btn-sm{min-height:30px;padding:var(--space-1) var(--space-2);font-size:var(--text-sm)}.slot{width:var(--slot-size);height:var(--slot-size);background:var(--c-bg2);border:2px solid var(--c-border);box-shadow:inset 0 2px #0009;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:border-color var(--dur-fast)}.slot:hover{border-color:var(--c-text-dim)}.slot img,.slot canvas{width:80%;height:80%;image-rendering:pixelated}.slot.r-common{border-color:var(--c-border)}.slot.r-magic{border-color:var(--rar-magic)}.slot.r-rare{border-color:var(--rar-rare)}.slot.r-legendary{border-color:var(--rar-legendary);box-shadow:inset 0 2px #0009,0 0 8px #ff8c4280}.slot.r-set{border-color:var(--rar-set);box-shadow:inset 0 2px #0009,0 0 8px #3fd06a8c}.slot.r-unique{border-color:var(--rar-unique);box-shadow:inset 0 2px #0009,0 0 10px #e8443c99}.text-common{color:var(--rar-common)}.text-magic{color:var(--rar-magic)}.text-rare{color:var(--rar-rare)}.text-legendary{color:var(--rar-legendary)}.text-set{color:var(--rar-set)}.text-unique{color:var(--rar-unique)}#toast-layer{position:absolute;left:50%;bottom:calc(96px + var(--safe-bottom));transform:translate(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:var(--space-1);z-index:60;pointer-events:none}.toast{background:#0a0608eb;border:1px solid var(--c-border-hi);padding:var(--space-1) var(--space-3);font-size:var(--text-sm);animation:toastIn var(--dur-normal) var(--ease-out),toastOut .4s ease 2.2s forwards;max-width:min(80vw,420px);text-align:center}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{to{opacity:0;transform:translateY(-6px)}}.tooltip{position:fixed;z-index:80;background:#080406f5;border:2px solid var(--c-border-hi);box-shadow:0 6px 16px #000000b3;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);line-height:1.55;max-width:min(78vw,320px);pointer-events:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--c-bg2)}::-webkit-scrollbar-thumb{background:var(--c-border-hi)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media(orientation:portrait)and (max-width:600px){:root{--slot-size: 42px}}:root{--frame-panel: url(/ui/frame_panel.webp);--frame-thin: url(/ui/frame_thin.webp)}#ui-root .panel{border:18px solid transparent;border-image:var(--frame-panel) 56 fill / 28px / 10px stretch;background:none;box-shadow:none;padding:var(--space-2) var(--space-3)}#ui-root .panel-title{position:relative;padding-bottom:var(--space-1);margin-bottom:var(--space-3);color:#ffb36b;text-shadow:0 2px 0 #000,0 0 12px rgba(255,120,40,.35)}#ui-root .panel-title:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,rgba(201,148,31,.9),rgba(201,148,31,.25) 70%,transparent)}.tooltip{border:10px solid transparent;border-image:var(--frame-thin) 28 fill / 14px / 4px stretch;background:none;padding:var(--space-1) var(--space-2);filter:drop-shadow(0 8px 14px rgba(0,0,0,.75));box-shadow:none}#ui-root .btn{border:7px solid transparent;border-image:url(/ui/button_frame.webp) 20 fill / 10px stretch;background:none;box-shadow:none;text-shadow:0 1px 0 #000;transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-fast)}#ui-root .btn:hover{filter:brightness(1.3) saturate(1.1)}#ui-root .btn:active{transform:translateY(1px);box-shadow:none;filter:brightness(.9)}#ui-root .btn:disabled{filter:grayscale(.6)}#ui-root .btn-primary{border-width:9px 12px;border-image:url(/ui/button_cta.webp) 27 82 fill / 13px 41px / 0 16px stretch;background:none;color:#ffe8d8}#ui-root .btn-primary:hover{background:none;filter:brightness(1.3) saturate(1.15) drop-shadow(0 0 8px rgba(255,90,40,.45))}#ui-root .slot{background:url(/ui/slot.webp) center / 100% 100% no-repeat,var(--c-bg2);border-color:transparent}#ui-root .slot.r-common{border-color:transparent}#ui-root .slot.r-magic{border-color:var(--rar-magic);box-shadow:inset 0 0 10px #6ea8ff59}#ui-root .slot.r-rare{border-color:var(--rar-rare);box-shadow:inset 0 0 10px #ffd7004d}#ui-root .slot.r-legendary{border-color:var(--rar-legendary);box-shadow:inset 0 0 12px #ff8c4273,0 0 8px #ff8c4280}#ui-root .slot.r-set{border-color:var(--rar-set);box-shadow:inset 0 0 12px #3fd06a73,0 0 8px #3fd06a8c}#ui-root .slot.r-unique{border-color:var(--rar-unique);box-shadow:inset 0 0 12px #e8443c80,0 0 10px #e8443c99}#ui-root .topbar{border:10px solid transparent;border-image:var(--frame-thin) 28 fill / 14px / 3px stretch;background:none;box-shadow:none;padding:0 var(--space-2)}#ui-root .town-btn{border:10px solid transparent;border-image:var(--frame-thin) 28 fill / 14px / 3px stretch;background:none;box-shadow:none;padding:var(--space-1) var(--space-3);transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-fast)}#ui-root .town-btn:hover{transform:translateY(-2px);box-shadow:none;filter:brightness(1.25) drop-shadow(0 0 10px rgba(255,107,53,.25))}#ui-root .town-btn:active{transform:translateY(1px);box-shadow:none}#ui-root .tb-sortie{border-width:12px 18px;border-image:url(/ui/button_cta.webp) 27 82 fill / 18px 54px / 0 stretch;padding-left:var(--space-6)}#ui-root .tb-sortie:hover{background:none;box-shadow:none;filter:brightness(1.25) saturate(1.1) drop-shadow(0 0 16px rgba(255,90,40,.45))}.tb-icon.has-art,.pause-ic.has-art{display:inline-flex;align-items:center;justify-content:center;width:auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.9))}.tb-sortie .tb-icon.has-art canvas{transform:scale(1.2)}img.hd,canvas.hd{image-rendering:auto!important}#ui-root .hud-slot,#ui-root .hud-potion{background:url(/ui/slot.webp) center / 100% 100% no-repeat,#0b0709;border-color:transparent;box-shadow:0 3px 6px #0009}#ui-root .hud-slot:hover,#ui-root .hud-potion:hover{border-color:#ff6b35bf}#ui-root .hud-slot .slot-icon{inset:14%}#ui-root .hx-minimap{border:8px solid transparent;border-image:var(--frame-thin) 28 fill / 12px / 3px stretch;box-shadow:none;background:none}.boot-logo{width:min(520px,84vw);height:auto;filter:drop-shadow(0 0 24px rgba(255,90,30,.35));animation:bootPulse 1.6s ease-in-out infinite}#ui-root .char-card{border:10px solid transparent;border-image:var(--frame-thin) 28 fill / 14px / 3px stretch;background:none;box-shadow:none}#ui-root .char-card:hover{filter:brightness(1.2)}#ui-root .char-face{background:radial-gradient(circle at 50% 35%,#3a1c20,#120a0d 75%);border-color:#5a4630;overflow:hidden}#ui-root .btn-primary.btn-sm{border-width:7px;border-image:url(/ui/button_frame.webp) 20 fill / 10px stretch;background:linear-gradient(180deg,#8e2614,#5a1408) padding-box}#ui-root .dg-card{border:8px solid transparent;border-image:var(--frame-thin) 28 / 12px stretch}.tree-node canvas.hd{box-shadow:0 0 0 1px #000}.tree-node.passive canvas.hd{border-radius:50%}#ui-root .town-stage{border:16px solid transparent;border-image:var(--frame-panel) 56 / 28px / 10px stretch;box-shadow:none}#ui-root .slot.ancient{box-shadow:inset 0 0 0 1px #ffd36a,inset 0 0 12px #ff502873,0 0 0 1px #ff5030,0 0 10px #ff502899}#ui-root .btn.on,#ui-root .btn.sel{--on-color: 255, 107, 53;border-image-slice:20;background:linear-gradient(180deg,rgba(var(--on-color),.42),rgba(var(--on-color),.16)),#140a0d;filter:drop-shadow(0 0 6px rgba(var(--on-color),.35))}#ui-root .set-toggle.on{--on-color: 125, 220, 125}#ui-root .sell-toggle.on{--on-color: 255, 205, 60}.tree-node.locked canvas.hd{filter:saturate(.25) brightness(.62)}