*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;position:fixed;touch-action:pan-x pan-y}body{font-family:Inter,sans-serif;background:radial-gradient(circle at top center,rgba(74,144,226,.08),transparent 35%),radial-gradient(circle at bottom right,rgba(212,175,55,.08),transparent 25%),#0b0e12;color:#eef2f6;display:flex;flex-direction:column}.header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:.7rem 1.2rem;background:#101820e0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(212,175,55,.22);z-index:20;gap:.9rem;flex-shrink:0;box-shadow:0 10px 22px #00000038}.header-left{display:flex;align-items:center;gap:1rem;min-width:0;flex-wrap:wrap}.logo{display:flex;align-items:center;gap:.7rem;min-width:0}.logo h1{margin:0;font-weight:700;font-size:1.55rem;background:linear-gradient(135deg,#f5e7c8,#d4af37);-webkit-background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap;letter-spacing:.02em}.logo span{font-size:.88rem;color:#98a2b3;background:#00000047;padding:.26rem .75rem;border-radius:999px;border:1px solid #2f3e4c;white-space:nowrap}.v6-badge{display:inline-flex;align-items:center;background:linear-gradient(135deg,#4a90e2,#2563eb);color:#fff;padding:.18rem .48rem;border-radius:999px;font-size:.68rem;font-weight:700;margin-left:.35rem;vertical-align:middle}.nav-links{display:flex;gap:.65rem;flex-wrap:wrap}.nav-links a{color:#eef2f6;text-decoration:none;padding:.42rem .95rem;border-radius:999px;border:1px solid #3b8b6b;background:#1e3a3a73;transition:.18s ease;font-weight:600;font-size:.92rem;white-space:nowrap}.nav-links a:hover{background:#2e6d5e;border-color:#d4af37;transform:translateY(-1px)}.wallet{display:flex;align-items:center;gap:.7rem;margin-left:auto;flex-wrap:wrap}.wallet button{background:linear-gradient(145deg,#1e3a3a,#1f4a3a);border:1px solid #3b8b6b;color:#f0f4fa;padding:.56rem 1.2rem;border-radius:999px;font-weight:700;font-size:.92rem;cursor:pointer;transition:.2s ease;box-shadow:0 2px 6px #00281e73;white-space:nowrap}.wallet button:hover{background:#2e6d5e;border-color:#d4af37;transform:translateY(-1px);box-shadow:0 8px 16px #d4af372e}#walletAddress{background:#1a232c;padding:.42rem 1rem;border-radius:999px;font-size:.9rem;border:1px solid #2f4b5c;color:#bcd0e0;white-space:nowrap;min-width:120px;text-align:center}.main{flex:1;display:flex;position:relative;overflow:hidden;width:100%;min-height:0}.canvas-container{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(180deg,#0e1318fa,#090d12);overflow:hidden;touch-action:none;cursor:grab}.canvas-container canvas{display:block;width:100%;height:100%;object-fit:cover}.tooltip{position:absolute;background:#141e28f2;backdrop-filter:blur(6px);border:1px solid #d4af37;border-left:4px solid #d4af37;border-radius:16px;padding:.75rem 1rem;font-size:.9rem;pointer-events:none;color:#ecf3fa;box-shadow:0 10px 25px #0000008c;z-index:100;transition:opacity .15s ease;opacity:0;max-width:260px;line-height:1.5}.legend-panel{position:absolute;top:20px;right:20px;width:390px;max-width:calc(100vw - 20px);max-height:calc(100vh - 40px);background:#141c26f2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:24px;border:1px solid rgba(212,175,55,.28);box-shadow:0 16px 36px #00000075;z-index:15;overflow:hidden;transition:width .2s ease,max-height .2s ease,box-shadow .2s ease}.legend-panel.collapsed{max-height:66px}.legend-panel .resize-handle{position:absolute;left:-5px;top:0;bottom:0;width:10px;cursor:ew-resize;background:transparent;z-index:2}.legend-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid #2a3a48;background:#0000002e;border-radius:24px 24px 0 0;gap:.6rem;cursor:move;user-select:none}.legend-header h3{margin:0;font-size:1.14rem;color:#d4af37;font-weight:700}.legend-controls{display:flex;gap:.45rem;align-items:center;flex-shrink:0}.legend-controls button{background:transparent;border:1px solid #3a5060;color:#d4af37;width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s ease;font-size:1rem;padding:0;font-weight:700}.legend-controls button:hover{background:#d4af37;color:#0b0e12;border-color:#d4af37}.legend-content{padding:1rem 1.2rem 1.2rem;max-height:calc(100vh - 110px);overflow-y:auto;transition:max-height .25s ease,padding .25s ease,opacity .2s ease;opacity:1}.legend-content.collapsed{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.detail-card{background:#1b2630;border-radius:18px;padding:1rem;border:1px solid #2a3f4a;margin-bottom:1.1rem}.detail-row{display:flex;justify-content:space-between;gap:.8rem;margin-bottom:.65rem;font-size:.94rem}.detail-row:last-child{margin-bottom:0}.detail-label{color:#98a9b9}.detail-value{font-weight:600;color:#f0f4fa;text-align:right;word-break:break-word}.rarity-bronze{color:#cd7f32;font-weight:700}.rarity-silver{color:silver;font-weight:700;text-shadow:0 0 5px rgba(255,255,255,.35)}.rarity-gold{color:gold;font-weight:700;text-shadow:0 0 6px rgba(255,215,0,.35)}.rarity-platinum{color:#e5e4e2;font-weight:700;text-shadow:0 0 7px rgba(160,214,255,.22)}.rarity-diamond{color:#b9f2ff;font-weight:700;text-shadow:0 0 10px rgba(0,255,255,.28)}.action-buttons{display:flex;flex-direction:column;gap:.7rem;margin:1rem 0}.action-btn{background:linear-gradient(145deg,#2a3f4a,#1b2a33);border:1px solid #3b6b8b;color:#eef2f6;padding:.8rem .9rem;border-radius:999px;font-weight:700;cursor:pointer;transition:.18s ease;text-align:center;width:100%}.action-btn:hover:not(:disabled){background:#3b6b8b;border-color:#d4af37;transform:translateY(-1px)}.action-btn:disabled{opacity:.45;cursor:not-allowed}.boost-btn{background:linear-gradient(145deg,#ffd7001f,#ff8c001f);border:1px solid #ff8c00;color:#ffb347}.danger-btn{background:linear-gradient(145deg,#dc35451f,#a01e281f);border:1px solid #dc3545;color:#ff9aa6}.input-group{display:flex;align-items:center;gap:.5rem;margin:.75rem 0}.input-group label{font-size:.9rem;color:#98a9b9;min-width:78px}.input-group input,.input-group select{flex:1;background:#0f1a22;border:1px solid #2a3f4a;color:#fff;padding:.62rem .95rem;border-radius:999px;outline:none;font-size:16px;min-width:0}.input-group input:focus,.input-group select:focus{border-color:#d4af37;box-shadow:0 0 0 3px #d4af371a}.input-group input:disabled,.input-group select:disabled{opacity:.55;cursor:not-allowed}.message{margin-top:.8rem;padding:.75rem .9rem;border-radius:16px;text-align:center;font-size:.9rem;line-height:1.45}.success{background:#1a3a2a;border:1px solid #2e7d5e;color:#a0e0a0}.error{background:#3a1a1a;border:1px solid #b33a3a;color:#ffa0a0}.attacks-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem;max-height:180px;overflow-y:auto}.attack-item{background:#0f1a2a;border-radius:16px;padding:.55rem .8rem;display:flex;justify-content:space-between;align-items:center;border:1px solid #2b4154;font-size:.85rem;gap:.55rem}.attack-actions{display:flex;gap:.35rem;align-items:center}.execute-btn{background:#e74c3c;border:none;color:#fff;padding:.24rem .75rem;border-radius:999px;cursor:pointer;font-weight:700;font-size:.8rem;white-space:nowrap}.execute-btn[disabled]{opacity:.4;cursor:not-allowed}.cancel-attack-btn{background:#dc35451f;border:1px solid #dc3545;color:#ff7f90;font-size:.8rem;padding:.22rem .5rem;border-radius:999px;cursor:pointer}.cancel-attack-btn:hover{background:#dc35453d}.resource-row{display:flex;align-items:center;margin-bottom:.7rem;font-size:1rem;padding:.42rem .5rem;border-radius:10px;background:#0003}.resource-icon{width:28px;height:28px;object-fit:contain;margin-right:10px;flex-shrink:0}.resource-name{color:#d4af37;margin-right:8px;min-width:78px;font-weight:700}.resource-amount{font-weight:700;color:#f0f4fa;margin-left:auto}.attack-section{display:flex;flex-direction:column;gap:.75rem;margin-top:.8rem}.legend-item{display:flex;align-items:center;gap:.75rem;margin-bottom:.72rem;font-size:.92rem;color:#d9e2ea}.color-box{width:24px;height:24px;border-radius:6px;box-shadow:0 2px 4px #00000059;position:relative;border:1px solid #888;flex-shrink:0}.color-gray{background:#3a4048}.color-green{background:#2e7d5e}.color-cyan{background:#9b59b6}.color-bronze{background:#cd7f32}.color-silver{background:silver}.color-gold{background:gold}.color-platinum{background:#e5e4e2}.color-diamond{background:#b9f2ff}.border-blue{border:3px solid #3498db;box-sizing:border-box}.border-purple{border:3px solid #9b59b6;box-sizing:border-box}.border-black{border:3px solid #000;box-sizing:border-box}.border-red{border:3px solid #e74c3c;box-sizing:border-box}.star{position:absolute;top:-8px;right:-8px;font-size:16px;color:gold;text-shadow:0 0 5px black}.footer-note{margin-top:1.2rem;font-size:.8rem;color:#6f7c8a;text-align:center;border-top:1px dashed #2a3f4a;padding-top:1rem;line-height:1.5}@media (max-width: 768px){.header{padding:.45rem .55rem;flex-wrap:nowrap;gap:.45rem}.header-left{flex:1;min-width:0;gap:.45rem;flex-wrap:nowrap}.logo{gap:.42rem;flex-shrink:0}.logo h1{font-size:1.02rem}.logo span{display:none}.nav-links{display:flex;gap:.3rem;flex-wrap:nowrap;overflow:hidden}.nav-links a{padding:.28rem .54rem;font-size:.76rem}.wallet{margin-left:0;gap:.35rem;flex-shrink:0}.wallet button{padding:.32rem .68rem;font-size:.76rem}#walletAddress{display:none}.legend-panel{width:285px;right:10px;top:60px;max-height:calc(100vh - 70px)}.legend-content{padding:.85rem;max-height:calc(100vh - 120px)}.resource-icon{width:24px;height:24px;margin-right:8px}.resource-row{font-size:.94rem}}@media (max-width: 480px){.header{padding:.38rem .42rem}.logo h1{font-size:.95rem}.nav-links{gap:.22rem}.nav-links a{padding:.22rem .42rem;font-size:.72rem}.wallet button{padding:.26rem .58rem;font-size:.72rem}.legend-panel{width:245px;right:6px;top:56px}}