: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;--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}.text-common{color:var(--rar-common)}.text-magic{color:var(--rar-magic)}.text-rare{color:var(--rar-rare)}.text-legendary{color:var(--rar-legendary)}#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}}