@font-face{font-family:'Cinzel';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/cinzel-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cinzel';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/cinzel-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cinzel';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/cinzel-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cinzel';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/cinzel-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/inter-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/inter-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/inter-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/inter-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}:root {
  --cur: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFkElEQVR4AcSVa2wUVRTH/zPT2W2h3VL62O1SCi21lpZiNTyEokSBFBWMUSqkhkTQD4gNoVFRgmksAtIEpSSGkBoggtBIiEEexvAQKYaGAiXQsrRggT623W27pd0tu8vOzB3PLGbtErFP8O45M/fOnHvPb8859w6P/7kFANJNutw0k/juk+YJAIBT5/A8tzvdLG4hCI70icg/AACXljYeOlEsyEwMPWI2YwSeQOsNgMxJKSj7YQM/OjJifnSI/mJSHIyPmyEIQGUMSePisP/7dUJKsjk1Qh9W/XScbvLjhAgAqKAqIABVkRBlCMXObfnCjGmpMaKIyjSjsACPqQUAtPVVVYHKJJRs/xlOlwvFhW9zS3Nn6nmBPzwxXizQbIZbgwCgqmAUAUttE5avKsXFy/V4P+95FBbkcALPfZ1hFr8jAIF02CQIwB8BAmAqg7PHi083HkLpvgrMnjoeJYWvcGGh4rLMBP1v6bEIHy6CIAAtAloNaHfGKBqkZYevIL/oF5hiwrCjaK4wepQ+WwzVX043I3E4IIIAVH8NyGBaMVI6zDoRVJyoveXA8nUn0WzvwfZ1M4UJCRHJPK+7mm4Upw8VIggA9I+Z4qMAqNg1cRyOPpuCgsRYGgPdPT6s2XoRe4/dwfr8LD47K9bACfgjLV54cygQQQAq5V5LQSLPI8sw0r/uwphRxKXFAf77gZNWFGytxpKcJC53XmIID/7gxPiQz/3Gg7gEAeBvgNuSjJIGO37vdOLL+laoKgdG0VFVUF/FjcZ7WFF8FcaYcKxYNIETBL4ofYz4I/kXSQckQQD+CDCZnDDsbHZgpaUJxx0uMPJMgozkCOTlJGDJPDMWZMehrsGFscZwfJSXyoeGCG9ljhHPJkYiaiAEQQCgCDD5QQ1oTrUKTBtvwIeLkv0Qd10SFs+Nx+I58ch92YRFL5kQOZLHmNhQFORNEKIidFMM4borT8Uhub8QAQD6/jJAExlM2wW0wpSMaHyzOhOvzTIiMlxEo82DC5YubNp1TSncUe0tKq3xbtpd6y3eU+fdfaTRS9AyZWqsGCJWpQB6WqJPCQD4LbUI+HcBkDPDjI0rJ+G+T4LbLeP1F03Q0nDojI0AVTS0uu/VNrnL65rd5TesnvKbLZ7yhnbfGZeXHe/2sF//BEahHy0IQPsaqlQDea8m4+OlaWjvcCH/q0plW5lFmT89DmIIh0t13ZiaEU11hygG+b2mTjnnYbXeVZaQbztpnxIEAC0CVAPZk0ejoaUT+cWVrKXd7ay40iF0uTyYOyUGFGbU3HbDFB2q6gWxqE8PfRgEAGiH8YxyD4rAzdsOrNpcyRzd0p06u7SZ57kLR8utbOGsWHD0O13ViexnYoQwHfeO0YgHB0Yfjh71OgDAAdpuR9W1VqwurmBdPbLlhs33LTEdVGW29sylNvBUpNPSDfDJKjw+FWE6PmQkG/whpEEFAGigXq5tx2cl59Uuj1JR3yaV0jPtcLllscuneI6rOXHejjdeiMMXy5IwKzMSs5+LFkJ1/AdkJ5AOSnoDwGq/B5eH/dTQIe+n1cpIW0j94lOUotOX2qRRIziMjdVBlhkmpxig47nwpGhxpd9oEJcAgMqpBynCixs7lb20jgbQQfeA1LYqhygdtnNXO/3OFYVRSlRkpUYIer26JmA4wE4A4HqLfNJi8x2g+cdIu0gfFibJbP3pqnbffUnxQ7Td9cLh9DEefILJgKkPT+jPOADQy1ju1Q/qcq3SHq+P9Rw5a8O+E1Zp59EW1DZ5rI4epczmRGSQcT8H/wbwyKkWgEpB3VBd7/Rcu+O+0OSQt9y0SWvtTkU7D049cuJ/vBgQgLbO9VZpa41VGtHgkD9x3Wfb6Nk+0jpSlXTAMmCAXh7OUb+ZdEgyFIB+Oe7L6C8AAAD//4jnE58AAAAGSURBVAMA6kF8XwamV1oAAAAASUVORK5CYII=) 3 2, default;
  --cur-ptr: url(data:image/png;base64,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) 3 2, pointer;
  --cur-atk: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFA0lEQVR4AcTWe2xTVRwH8O/uve3Wdute3aPIHpTOhckwLA7LnEyMicg/SExEovGBaEACiCBERlCRiAvCEoUAJoAS3P5gCUERH0MDMg24MB4iMNZ17pF17dauj7Vb7z298567h52yB92qNzk9p733nN/n/s7v3pTB/3zIgAzD7IeyjQ9syDbmlyQZjdr/0iQDGEZcoNVqd880ZH2VwKids2YXduUXFJ035Dz4UWZmfmIkQTKgX8S1xKRE33dnTmmvXL7EVnx5LHn7ttIFWdkZG6M17IVIImQACFvX2tKm8ffyUMUokJmVhZKSEhw8eIhLT9fnKlTMxUghZEBLy+/dHKvoudNghtcXQKxaiaAoQqOJxYEDhzi9Xm+IFEIGQDoUSubG7dt3QIL9cLp7kRAXIyNUGg0+2XeAZiIiiGGAz+evOX68Ai6XC8GgCLvTB12iBqLYD7Vagz3ln3L6afcZlOqprYlhgMgzZebGxjsrV75GXC63lAkR7XYP0nVxUib6oZK2Y1dZOZeSkjalNTEMoHUg9AZN7e3tllWrXidut0fORIvVhYz0eDkTKikTO8v2cimpaVO2HcMAqQwwgBBNVqvVsnbNauKSEETajsZWJ2ZMT5QzEaPS4N0PPuZ0ulQDF8NM+ukYAQhFdHRYLW+tX0M8g4j6pk7kZCWDEBEKpRJvl+7gknW6SSP+BQhF2Gwdls0b1xGPxwMiPR03GjqQNzMVgiBAoVBi7YatXFJSsoSICjsTdwWEIuz2DkvpljelTLjB8zxqrzehIC9TRnASYuXqDVxCQlLYiFEBoYhOu83yXulG4nJ1S4F5XKi9haKCHGksgOUUeOGVNzhtfKKBjRmZCdP92jq6zlhtTACd2CK9JYVe0dTZabeU7dxG3NJ7gucFVF+4ioVF+TKCYVk889zLnDYu3sAqBxB505T9h8qWzaU9XWe0Ni6ATqQI0ieanA5Hw77yXYPbIeB09UU89XjhAIJhsXjJci4uPt4QS+qdlftfBBECOFy2FIVGzaiZmBBgCBHw8cWOrq6Gwwf3Eq9UmLxUE1Vfn8PSxcUSgkAgPIj1Ele5/yUpOA+BD+DVLSdRa/YV0DXu1iYMoJPb2m46hb7gIw5Hl+XYkf3E6/XIhXn8xA9Y9vRCXD26FVUfPisFD0AIBLBi80ncbOej6NzR2j0B6CID29Fvcru7LVUVR0iP1wsK2fTEbFRnZGPWZ3VgbW6skO58vOB0vXsG0EkUIfjJfI/X3XDmVCX59vBm7Nm+hJ6SW+nus+PeuXyh9BEWQJoHeTv8pFiw/ibveU8ci01KP9b3dsIfrbj+8AxNGr1uvBY2gC6sFc2OysFqb27ugs3bg+l6BYozY+aoWa5mIoiwAaYcbV1lSLVvKz8LW49wjf5/iItmUJylMk4EETbgYoOnYPmaL8APVvstqxDl4cmT35v9Zm9AxEQRYQPoFtAqX/f+6Su0p98vNfls/iAprmnunTBiUgAa9J8vmbEQeXruUTontE0aELrY0HgkIohoLgrKWKVx3lzjj/NztfZF81LnD13LDA2muv8b0We+7Ahi+bIFeGf9IsWW1Y+lOJ2+E0PxmKFBJHqKcAWEEsIp+MI50+B1OZGgFpGZpiK5OuTSmBEF0ABXWv3tbq+/6mjFObi7Hfjpl3q0dHh76rtQT89HHECD/PxH9/O/1v75+Y59569X17R+4+wOFNHfafsLAAD//24CIIoAAAAGSURBVAMAJmSlDz8qrU0AAAAASUVORK5CYII=) 2 2, crosshair;
}
html, body, canvas { cursor: var(--cur); }
input, textarea { cursor: text; }
a, button, select, [data-w], [data-s], [data-pm], .btn, .slot, .opt { cursor: var(--cur-ptr); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0a08; font-family: 'Inter', sans-serif; color: #e8dfc8; user-select: none; }
#view { position: fixed; inset: 0; }
#view canvas { display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; font-size: 13px; }
.cz { font-family: 'Cinzel', serif; }
.panel { background: linear-gradient(180deg, rgba(28,22,16,.86), rgba(14,11,9,.9)); border: 1px solid #7a6235; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255,220,150,.08), 0 6px 24px rgba(0,0,0,.5); border-radius: 4px; }
.panel .title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 13px; letter-spacing: 2px; color: #f0d48a; padding: 8px 12px; border-bottom: 1px solid rgba(122,98,53,.7); display: flex; justify-content: space-between; }
.title .x { color: #9a8358; font-size: 11px; }
.btn { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 2px; color: #fff3cf; text-align: center; padding: 12px 28px; border: 1px solid #c9a14a; border-radius: 3px; background: linear-gradient(180deg, #8a2a1a, #4f1209); box-shadow: inset 0 1px 0 rgba(255,220,180,.35), 0 2px 8px rgba(0,0,0,.6); text-shadow: 0 1px 2px #000; cursor: var(--cur-ptr); font-size: 15px; }
.btn:hover { filter: brightness(1.15); }

.bar { height: 14px; background: rgba(0,0,0,.7); border: 1px solid #000; border-radius: 2px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .15s linear; }
.bar > span { position: absolute; inset: 0; font-size: 10px; font-weight: 600; text-align: center; line-height: 13px; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; white-space: nowrap; }
.hp > i { background: linear-gradient(180deg, #e8453a, #8c1610); }
.mp > i { background: linear-gradient(180deg, #4a8cff, #123d9a); }
.xp > i { background: linear-gradient(180deg, #ffd860, #b88a10); }

.pframe { position: absolute; left: 14px; top: 14px; width: 330px; padding: 10px; display: flex; gap: 10px; }
.portrait { position: relative; width: 64px; height: 64px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px #c9a14a, 0 0 0 3px #000; }
.portrait svg { width: 100%; height: 100%; border-radius: 50%; display: block; }
.portrait .lvl { position: absolute; right: -6px; bottom: -6px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; background: #1a120a; border: 1px solid #c9a14a; color: #ffe08a; font-weight: 700; font-size: 12px; line-height: 22px; text-align: center; }
.pinfo { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.prow { display: flex; justify-content: space-between; align-items: baseline; }
.pname { font-weight: 700; font-size: 15px; color: #fff; }
.pcls { font-size: 11px; color: #f0d48a; }
.buffs { display: flex; gap: 3px; min-height: 22px; }
.slot.buff { width: 22px; height: 22px; border-radius: 3px; }
.slot.buff span { position: absolute; inset: 0; font-size: 10px; font-weight: 700; display: flex; align-items: flex-end; justify-content: flex-end; padding: 1px 2px; text-shadow: 0 0 3px #000; color: #fff; }

.tframe { position: absolute; left: 50%; transform: translateX(-50%); top: 14px; width: 300px; padding: 8px 12px; }
.trow { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.trow span:last-child { font-size: 11px; color: #ffb0a0; font-weight: 400; }
.tstatus { font-size: 10.5px; color: #ff9a5a; margin-top: 4px; min-height: 13px; }

.mm { position: absolute; right: 16px; top: 14px; width: 190px; text-align: center; }
.mm canvas { width: 180px; height: 180px; border-radius: 50%; border: 3px solid #7a6235; box-shadow: 0 0 0 2px #000, 0 6px 20px rgba(0,0,0,.6); background: #2a3a20; }
.mmlabel { margin-top: 6px; padding: 5px; font-size: 12px; }
.mmlabel .cz { font-weight: 700; color: #f0d48a; }
.mmlabel div { font-size: 10px; color: #a8946a; }

.chat { position: absolute; left: 14px; bottom: 30px; width: 460px; }
.chattabs { display: flex; gap: 2px; }
.chattabs div { font-size: 11px; padding: 4px 10px; background: rgba(0,0,0,.55); border: 1px solid #5a4828; border-bottom: none; border-radius: 3px 3px 0 0; color: #a8946a; }
.chattabs .on { background: rgba(122,98,53,.7); color: #fff; }
.chatbox { background: rgba(0,0,0,.5); border: 1px solid #5a4828; padding: 8px 10px; font-size: 12px; line-height: 1.5; min-height: 150px; }

.skills { position: absolute; left: 50%; transform: translateX(-50%); bottom: 28px; padding: 7px; display: flex; gap: 4px; pointer-events: auto; }
.slot { width: 50px; height: 50px; border: 1px solid #5c4a2a; border-radius: 4px; background: rgba(0,0,0,.6); position: relative; box-shadow: inset 0 0 8px rgba(0,0,0,.9); overflow: hidden; }
.skills .slot { cursor: var(--cur-ptr); }
.slot svg { width: 100%; height: 100%; display: block; }
.slot .key { position: absolute; left: 3px; top: 1px; font-size: 10px; font-weight: 600; color: #fff; text-shadow: 0 0 3px #000; z-index: 3; }
.slot .cnt { position: absolute; right: 3px; bottom: 1px; font-size: 10px; font-weight: 600; color: #fff; text-shadow: 0 0 3px #000; z-index: 3; }
.slot .cdo { position: absolute; inset: 0; background: conic-gradient(rgba(0,0,0,.72) 0 var(--p, 0%), rgba(0,0,0,0) var(--p, 0%) 100%); z-index: 1; }
.slot .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; text-shadow: 0 0 4px #000; z-index: 2; }
.slot.nomana svg { filter: grayscale(.8) brightness(.55) sepia(.4) hue-rotate(180deg); }

.gold { position: absolute; right: 16px; bottom: 30px; padding: 8px 12px; display: flex; gap: 14px; font-size: 12px; color: #a8946a; }
.gold b { color: #ffd84a; }
.xpwrap { position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background: rgba(0,0,0,.75); border-top: 1px solid #5a4828; padding: 3px 6px; }
.xpwrap .bar { height: 13px; }
.xpwrap .bar span { line-height: 12px; }
.hint { position: absolute; right: 16px; bottom: 74px; font-size: 11px; color: rgba(255,240,210,.6); text-shadow: 0 1px 2px #000; }
.help { position: absolute; right: 220px; top: 14px; width: 330px; }
.helpbody { padding: 10px 14px; display: grid; grid-template-columns: 1fr; gap: 5px; font-size: 12.5px; color: #cdbf9c; }
.helpbody b { display: inline-block; min-width: 130px; color: #f0d48a; }
.toast { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-size: 34px; font-weight: 700; text-shadow: 0 0 12px #000, 0 2px 2px #000; letter-spacing: 2px; opacity: 0; }
.death { position: absolute; inset: 0; background: rgba(40,0,0,.45); flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.dtitle { font-size: 64px; font-weight: 700; color: #ff5a4a; letter-spacing: 12px; text-shadow: 0 0 20px #000; }

.floats, .plates { position: absolute; inset: 0; overflow: hidden; }
.fl { position: absolute; left: 0; top: 0; font-family: 'Cinzel', serif; font-weight: 700; white-space: nowrap; text-shadow: 0 0 5px #000, 0 2px 0 #000; will-change: transform; }
.fl.dmg { font-size: 22px; color: #fff; }
.fl.crit { font-size: 32px; color: #ffd84a; }
.fl.hurt { font-size: 20px; color: #ff5a4a; }
.fl.heal { font-size: 20px; color: #6aff8a; }
.fl.miss { font-size: 16px; color: #c8c8c8; }
.fl.xpf { font-size: 16px; color: #c79aff; }
.fl.stun { font-size: 16px; color: #9fd8ff; letter-spacing: 2px; }
.plate { position: absolute; left: 0; top: 0; text-align: center; white-space: nowrap; will-change: transform; }
.plate .n { font-size: 12px; font-weight: 600; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.plate .lv { color: #ffd0b0; font-weight: 400; font-size: 11px; }
.plate .bar { height: 5px; width: 70px; margin: 3px auto 0; }

#start { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(ellipse at center, rgba(10,8,6,.55), rgba(5,4,3,.92)); }
.logo { font-family: 'Cinzel', serif; font-size: 96px; font-weight: 700; letter-spacing: 12px; background: linear-gradient(180deg,#fff3c8 0%,#e8c06a 45%,#8a5a18 55%,#d8a850 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 6px rgba(0,0,0,.8)) drop-shadow(0 0 18px rgba(255,170,60,.35)); }
.sub { font-family: 'Cinzel', serif; letter-spacing: 5px; color: #e8d4a0; font-size: 15px; }
.startinfo { max-width: 560px; text-align: center; color: #cdbf9c; font-size: 13.5px; line-height: 1.6; }
.keys { display: grid; grid-template-columns: repeat(2, auto); gap: 4px 28px; font-size: 12.5px; color: #cdbf9c; margin-top: 4px; }
.keys b { color: #f0d48a; display: inline-block; min-width: 120px; }
#loadmsg { color: #a8946a; font-size: 12px; min-height: 16px; }
#startbtn { display: none; }

/* ---- 0.2: pencereler ---- */
.win { position: absolute; pointer-events: auto; z-index: 5; }
.wbody { padding: 12px 14px; }
.lbl { font-size: 10.5px; letter-spacing: 1.5px; color: #a8946a; text-transform: uppercase; margin: 12px 0 6px; }
.slot .plus { position: absolute; right: 3px; top: 1px; font-size: 10px; font-weight: 700; color: #ffe27a; text-shadow: 0 0 3px #000; z-index: 3; }
.slot.rare { border-color: #4a7cff; box-shadow: inset 0 0 10px rgba(74,124,255,.45); }
.slot.unique { border-color: #c79a2a; box-shadow: inset 0 0 12px rgba(230,180,60,.5); }
.slot.epic { border-color: #a35cff; box-shadow: inset 0 0 12px rgba(163,92,255,.55); }
.slot.legend { border-color: #ff8a2a; box-shadow: inset 0 0 14px rgba(255,138,42,.7), 0 0 8px rgba(255,120,30,.55); animation: legendPulse 2.4s ease-in-out infinite; }
@keyframes legendPulse { 50% { box-shadow: inset 0 0 18px rgba(255,160,60,.9), 0 0 14px rgba(255,120,30,.8); } }
.slotlbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9.5px; color: #6a5a3a; text-align: center; }
.eqgrid { display: grid; grid-template-columns: repeat(3, 52px); gap: 6px 34px; justify-content: center; padding: 12px; border: 1px solid rgba(122,98,53,.35); background: radial-gradient(ellipse at center, rgba(201,161,74,.12), rgba(0,0,0,.35)); border-radius: 3px; }
.eqgrid .slot { width: 52px; height: 52px; cursor: var(--cur-ptr); }
.statline { display: flex; justify-content: space-between; font-size: 11.5px; color: #cdbf9c; margin: 9px 2px; }
.statline b { color: #fff; }
.baggrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.baggrid .slot { width: auto; height: auto; aspect-ratio: 1; cursor: var(--cur-ptr); }
.invfoot { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11.5px; color: #a8946a; }
.invfoot b { color: #ffd84a; }
.tooltip { position: fixed; z-index: 50; max-width: 290px; padding: 10px 12px; background: rgba(8,6,12,.97); border: 1px solid #7a6235; border-radius: 4px; box-shadow: 0 10px 30px #000; font-size: 12px; line-height: 1.55; pointer-events: none; color: #e8dfc8; }
.tt-n { font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px; }
.tt-d { color: #a8946a; font-size: 11.5px; }
.tt-sep { height: 1px; background: rgba(122,98,53,.45); margin: 6px 0; }
.tt-h { color: #9fd8ff; font-size: 11px; margin-top: 4px; }
.chrhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 11.5px; color: #f0d48a; }
.chrhead .cz { font-size: 15px; font-weight: 700; color: #fff; }
.free { font-size: 12px; color: #a8946a; margin-bottom: 6px; }
.free.on b { color: #7aff9a; }
.strow { display: grid; grid-template-columns: 1fr 40px 36px 24px; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid rgba(122,98,53,.2); font-size: 13px; }
.strow b { text-align: right; }
.stb { color: #7aff9a; font-size: 11px; }
.plusbtn { width: 22px; height: 22px; border: 1px solid #c9a14a; border-radius: 3px; text-align: center; line-height: 20px; color: #fff; background: linear-gradient(180deg, #2a6a2a, #123a12); cursor: var(--cur-ptr); font-weight: 700; }
.plusbtn.off { opacity: .25; cursor: var(--cur); }
.dgrid { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 12.5px; color: #cdbf9c; }
.dgrid b { color: #fff; text-align: right; }
.shopgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 6px; }
.shopitem { text-align: center; cursor: var(--cur-ptr); }
.shopitem .slot { width: 50px; height: 50px; margin: 0 auto; }
.shopitem:hover .slot { border-color: #f0d48a; }
.price { font-size: 10.5px; color: #ffd84a; margin-top: 3px; }
.anvil { display: flex; align-items: center; justify-content: center; gap: 22px; }
.anslot { text-align: center; width: 120px; }
.anslot .tt-d { margin-top: 6px; font-size: 11px; }
.slot.big { width: 78px; height: 78px; margin: 0 auto; }
.arrow { font-size: 28px; color: #c9a14a; }
.mats { display: flex; gap: 6px; }
.mat { flex: 1; display: flex; gap: 6px; align-items: center; padding: 5px; border: 1px solid rgba(122,98,53,.4); background: rgba(0,0,0,.3); border-radius: 3px; font-size: 10.5px; line-height: 1.3; color: #e8dcc0; cursor: var(--cur-ptr); }
.mat svg { width: 32px; height: 32px; flex: none; border-radius: 3px; }
.mat span { color: #a8946a; }
.mat.sel { border-color: #f0d48a; background: rgba(201,161,74,.18); }
.uptbl { width: 100%; font-size: 12.5px; border-collapse: collapse; margin-top: 10px; }
.uptbl td { padding: 4px 0; border-bottom: 1px solid rgba(122,98,53,.25); color: #cdbf9c; }
.uptbl td:nth-child(2) { text-align: right; color: #aaa; } .uptbl td:nth-child(3) { width: 26px; text-align: center; color: #c9a14a; }
.uptbl .g { text-align: right; color: #7aff9a; font-weight: 600; width: 50px; }
.chance { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 4px; }
.chance .cz { font-size: 22px; font-weight: 700; color: #ffd84a; }
.warn { margin-top: 10px; padding: 7px 10px; border: 1px solid #5a4828; background: rgba(0,0,0,.3); font-size: 12px; color: #cdbf9c; border-radius: 3px; }
.warn.bad { border-color: #6a1a1a; background: rgba(120,20,20,.25); color: #ff8a7a; }
.result { margin-top: 10px; padding: 9px; text-align: center; font-family: 'Cinzel', serif; font-weight: 700; font-size: 14px; border-radius: 3px; }
.result.ok { color: #7aff9a; background: rgba(40,120,40,.2); border: 1px solid #2a6a2a; }
.result.bad { color: #ff8a7a; background: rgba(120,20,20,.25); border: 1px solid #6a1a1a; }
.smithbtns { display: flex; gap: 10px; margin-top: 14px; }
.smithbtns .btn { flex: 1; padding: 10px; } .smithbtns .btn:last-child { flex: 2; }
.btn.dark { background: linear-gradient(180deg, #3a3024, #1c160f); border-color: #7a6235; color: #d8c79a; }
.btn.off { opacity: .4; cursor: var(--cur); filter: grayscale(.6); }
.lootrow { display: flex; align-items: center; gap: 10px; padding: 5px; border-bottom: 1px solid rgba(122,98,53,.25); cursor: var(--cur-ptr); font-size: 13px; }
.lootrow:hover { background: rgba(201,161,74,.12); }
.slot.sm { width: 36px; height: 36px; flex: none; }
.lootrow .li { width: 36px; height: 36px; border-radius: 4px; flex: none; }
.menubtns { position: absolute; right: 16px; bottom: 28px; display: flex; gap: 4px; pointer-events: auto; }
.menubtns .slot { width: 40px; height: 40px; cursor: var(--cur-ptr); }
.menubtns .dot { position: absolute; right: 2px; bottom: 2px; width: 10px; height: 10px; border-radius: 50%; background: #7aff9a; box-shadow: 0 0 6px #7aff9a; display: none; z-index: 3; }
.hint { bottom: 80px !important; }
.banner { position: absolute; left: 50%; top: 90px; transform: translateX(-50%); padding: 10px 34px; background: linear-gradient(90deg, transparent, rgba(90,20,120,.8), transparent); font-size: 17px; font-weight: 700; color: #f0d8ff; text-shadow: 0 0 10px #a35cff, 0 2px 2px #000; white-space: nowrap; opacity: 0; letter-spacing: 1px; }
.startbtns { display: flex; gap: 12px; }
#newbtn { display: none; }

/* ---- 0.3 ---- */
.pframe .lvl { position: absolute; left: 58px; top: 58px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; background: #1a120a; border: 1px solid #c9a14a; color: #ffe08a; font-weight: 700; font-size: 12px; line-height: 22px; text-align: center; z-index: 2; }
.genieind { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); padding: 5px 16px; border: 1px solid #4a8acf; background: rgba(10,30,60,.75); color: #9fd8ff; font-family: 'Cinzel', serif; font-weight: 700; font-size: 12.5px; letter-spacing: 2px; border-radius: 3px; }
.skills .slot .ic { position: absolute; inset: 0; }
.skills .slot .ic svg { width: 100%; height: 100%; }
.slot .lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #ffcc7a; text-shadow: 0 0 4px #000; z-index: 4; }
.slot.locked .ic { filter: grayscale(1) brightness(.35); }
.slot.nouse svg { filter: sepia(1) hue-rotate(-40deg) saturate(3) brightness(.6); }
.fl.dot { font-size: 16px; color: #9aff7a; }
.bagrow { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 8px; }
.ptabs { display: flex; gap: 3px; }
.ptab { font-size: 11px; padding: 4px 9px; border: 1px solid #5a4828; border-radius: 3px; color: #a8946a; background: rgba(0,0,0,.4); cursor: var(--cur-ptr); }
.ptab.on { background: rgba(122,98,53,.7); color: #fff; }
.ptab.lockd { opacity: .45; }
.bagslots { display: flex; gap: 4px; }
.bagslots .slot { width: 36px; height: 36px; cursor: var(--cur-ptr); }
.lockmsg { padding: 30px 10px; text-align: center; font-size: 12.5px; color: #a8946a; border: 1px dashed #5a4828; border-radius: 3px; }
.skllist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sklrow { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid rgba(122,98,53,.3); background: rgba(0,0,0,.25); border-radius: 3px; }
.sklrow .slot { width: 40px; height: 40px; flex: none; }
.sklrow.lockd { opacity: .5; }
.skinfo { flex: 1; font-size: 12px; line-height: 1.35; min-height: 52px; } .skinfo .tt-d { font-size: 11px; }
.genietop { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid rgba(122,98,53,.4); }
.opts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.opt { padding: 5px 10px; border: 1px solid #5a4828; border-radius: 3px; font-size: 12px; color: #cdbf9c; background: rgba(0,0,0,.4); cursor: var(--cur-ptr); }
.opt.sel { border-color: #f0d48a; background: rgba(201,161,74,.22); color: #fff; }
.gsk { display: flex; gap: 5px; flex-wrap: wrap; }
.gs { width: 38px; height: 38px; border: 1px solid #5a4828; border-radius: 4px; overflow: hidden; cursor: var(--cur-ptr); opacity: .45; }
.gs svg { width: 100%; height: 100%; display: block; }
.gs.sel { opacity: 1; border-color: #7aff9a; box-shadow: 0 0 6px rgba(122,255,154,.5); }
.gs.lockd { opacity: .15; cursor: var(--cur); }
.menubtns .slot { width: 40px; height: 40px; cursor: var(--cur-ptr); }
.skills .slot { width: 48px; height: 48px; }

/* karakter yaratma */
#creation { position: fixed; inset: 0; z-index: 12; pointer-events: none; font-family: 'Inter', sans-serif; color: #e8dfc8; }
#creation > * { pointer-events: auto; }
.cr-top { position: absolute; left: 0; right: 0; top: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none !important; }
.logo.small { font-size: 46px; letter-spacing: 8px; }
.steps { display: flex; gap: 22px; font-size: 12px; letter-spacing: 2px; color: #f0d48a; }
.steps i { font-style: normal; display: inline-block; width: 22px; height: 22px; line-height: 20px; text-align: center; border: 1px solid #c9a14a; border-radius: 50%; margin-right: 6px; color: #fff; background: rgba(0,0,0,.5); }
.cr-left { position: absolute; left: 24px; top: 110px; width: 360px; max-height: calc(100vh - 220px); overflow: auto; }
.cr-right { position: absolute; right: 24px; top: 110px; width: 330px; }
.crbox { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.crcard { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid rgba(122,98,53,.35); border-radius: 3px; cursor: var(--cur-ptr); background: rgba(0,0,0,.3); }
.crcard.sel { border-color: #c9a14a; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 40%, transparent), transparent); }
.crcard .em { width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #000; }
.crcard .em svg { width: 100%; height: 100%; }
.crcard .nm { font-weight: 700; font-size: 14px; color: #f4e6c0; }
.crrow { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 10px; border: 1px solid rgba(122,98,53,.3); border-radius: 3px; cursor: var(--cur-ptr); background: rgba(0,0,0,.3); font-size: 13px; }
.crrow.sel { border-color: #c9a14a; background: rgba(201,161,74,.16); }
.crgrid { padding: 8px 10px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.crcls { padding: 6px 2px; font-size: 10.5px !important; letter-spacing: 0; text-align: center; border: 1px solid rgba(122,98,53,.35); border-radius: 3px; cursor: var(--cur-ptr); background: rgba(0,0,0,.3); font-size: 13px; font-weight: 700; color: #e8dcc0; }
.crcls .slot { width: 36px; height: 36px; margin: 0 auto 4px; }
.crcls.sel { border-color: #c9a14a; background: rgba(201,161,74,.16); color: #f0d48a; }
.crcls.off { opacity: .3; cursor: not-allowed; }
.crstat { display: grid; grid-template-columns: 80px 1fr 30px; gap: 8px; align-items: center; font-size: 13px; margin: 4px 0; }
.crstat .sb { height: 7px; background: #000; border: 1px solid #3a2e1a; border-radius: 2px; overflow: hidden; }
.crstat .sb i { display: block; height: 100%; background: linear-gradient(90deg,#8a5a18,#e8c06a); }
.crstat b { text-align: right; }
.cr-bottom { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; }
.cr-bottom .input { width: 260px; font-size: 16px; color: #f4e6c0; text-align: center; font-weight: 600; border-color: #c9a14a; outline: none; }
.cr-err { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); color: #ff8a7a; font-size: 12.5px; text-shadow: 0 1px 2px #000; }
.input { background: rgba(0,0,0,.55); border: 1px solid #5a4828; border-radius: 3px; padding: 10px 12px; color: #cdbf9c; font-size: 14px; font-family: inherit; }

.petframe { position: absolute; left: 14px; top: 128px; width: 200px; padding: 6px 8px; font-size: 11.5px; }
.petframe .trow { margin-bottom: 3px; font-size: 12px; } .petframe .trow span:first-child { color: #9fff9a; }
.castbar { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); width: 320px; text-align: center; }
.castbar .cz { font-size: 13px; font-weight: 700; color: #9fd8ff; text-shadow: 0 1px 3px #000; margin-bottom: 4px; letter-spacing: 1px; }
.castbar .xp > i { background: linear-gradient(180deg, #8ad8ff, #2a6ab0); }
.fl.pdmg { font-size: 17px; color: #9fff9a; }

.qm { display: inline-block; font-family: 'Cinzel', serif; font-weight: 700; font-size: 20px; color: #ffd84a; text-shadow: 0 0 6px #000, 0 0 10px rgba(255,200,60,.8); margin-right: 2px; vertical-align: -2px; }
.qm.act { color: #a8a8a8; text-shadow: 0 0 6px #000; } .qm.done { color: #ffd84a; }
.tracker { position: absolute; right: 16px; top: 252px; width: 240px; font-size: 12px; text-shadow: 0 1px 3px #000, 0 0 2px #000; pointer-events: none; }
.trk { position: relative; padding: 4px 30px 4px 8px; border-left: 2px solid transparent; pointer-events: auto; cursor: var(--cur-ptr); border-radius: 3px; }
.trk:hover { background: rgba(0,0,0,.25); } .trk.nav { border-left-color: #ffd84a; background: rgba(40,30,0,.35); }
.trk em { display: block; font-style: normal; color: #b8a87a; font-size: 11px; }
.trkgo { position: absolute; right: 2px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(#6a4a10, #2a1a04); border: 1px solid #ffd84a; color: #ffd84a; font-size: 13px; display: flex; align-items: center; justify-content: center; text-shadow: none; box-shadow: 0 0 8px rgba(255,216,74,.4); }
.trkgo:hover { background: radial-gradient(#a8781a, #4a3008); color: #fff; }
.dragghost { position: fixed; pointer-events: none; z-index: 9999; width: 40px; height: 40px; opacity: .9; transform: translate(-50%,-50%); }
.dragghost .slot { width: 40px; height: 40px; }
.slot.dragsrc { opacity: .35; }
.slot.droptgt { outline: 2px solid #ffd84a; }
.mkt-tabs { display: flex; gap: 4px; margin-bottom: 8px; } .mkt-tab { flex: 1; text-align: center; padding: 6px; background: #1a160f; border: 1px solid #3a3020; cursor: var(--cur-ptr); color: #a8946a; font-size: 12px; }
.mkt-tab.on { background: #3a2a10; color: #ffd84a; border-color: #8a6a2a; }
.mkt-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .mkt-f { padding: 3px 8px; border: 1px solid #3a3020; background: #14110c; color: #a8946a; font-size: 11px; cursor: var(--cur-ptr); border-radius: 10px; } .mkt-f.on { color: #ffd84a; border-color: #8a6a2a; }
.mkt-search { width: 100%; box-sizing: border-box; background: #0e0c08; border: 1px solid #3a3020; color: #e8dcc0; padding: 5px 8px; font: inherit; font-size: 12px; margin-bottom: 6px; }
.mkt-list { max-height: 330px; overflow-y: auto; border: 1px solid #2a2418; }
.mkt-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; padding: 4px 6px; border-bottom: 1px solid #221d14; }
.mkt-row:hover { background: rgba(255,216,74,.05); } .mkt-row .slot { width: 36px; height: 36px; }
.mkt-n { font-size: 12px; line-height: 1.3; } .mkt-n small { display: block; color: #8a7a5a; font-size: 11px; }
.mkt-p { text-align: right; color: #ffd84a; font-size: 12px; white-space: nowrap; } .mkt-p .btn { margin-top: 3px; padding: 3px 10px; font-size: 11px; }
.mkt-badge { display: inline-block; padding: 0 5px; border-radius: 3px; font-size: 10px; margin-left: 4px; background: #1a3a6a; color: #bfe0ff; vertical-align: 1px; }
.mkt-sell { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; padding: 8px; border: 1px dashed #5a4a2a; margin-bottom: 8px; min-height: 56px; }
.mkt-sell .slot { width: 52px; height: 52px; }
.mkt-sell input { width: 110px; background: #0e0c08; border: 1px solid #5a4a2a; color: #ffd84a; padding: 4px 6px; font: inherit; }
.mkt-info { font-size: 11px; color: #8a7a5a; margin-top: 6px; line-height: 1.4; }
.trk-t { color: #f0d48a; font-weight: 700; font-size: 13px; margin-bottom: 4px; letter-spacing: 1px; }
.trk { margin-bottom: 6px; } .trk b { display: block; color: #fff; font-weight: 600; } .trk span { color: #e8d48a; } .trk.ok span { color: #7aff9a; }
.fl.quest { font-size: 15px; color: #ffe27a; }
.qlist { display: flex; flex-direction: column; gap: 6px; }
.qrow { padding: 8px 10px; border: 1px solid rgba(122,98,53,.4); background: rgba(0,0,0,.3); border-radius: 3px; cursor: var(--cur-ptr); }
.qrow:hover, .qrow.sel { border-color: #c9a14a; background: rgba(201,161,74,.14); }
.qrow .qn { font-weight: 600; color: #f0e2bc; } .qrow .qs { font-size: 11px; color: #a8946a; }
.qdetail { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(122,98,53,.4); font-size: 12.5px; line-height: 1.55; color: #cdbf9c; }
.qrew { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.qrew .slot { width: 40px; height: 40px; }
.npcgreet { font-size: 13px; line-height: 1.6; color: #e8dcc0; font-style: italic; margin-bottom: 10px; }
.navcomp { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); align-items: center; gap: 8px; padding: 4px 12px 4px 6px; background: rgba(10,8,4,.55); border: 1px solid rgba(255,216,74,.45); border-radius: 18px; pointer-events: none; font-size: 12px; color: #f0e2bc; text-shadow: 0 1px 2px #000; }
.navcomp .nca { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #ffd84a; font-size: 18px; transition: transform .12s linear; text-shadow: 0 0 6px rgba(255,216,74,.7); }
/* oyun içi menü */
.gmenu { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 900; }
.gmenu .mbox { width: 340px; } .gmenu .mbox.wide { width: 480px; }
.gmenu .mbody { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.gmenu .mbody > .btn { text-align: center; }
.gmenu .mchar { text-align: center; color: #cdbf9c; margin-bottom: 6px; font-size: 13px; } .gmenu .mchar b { color: #f0d48a; }
.gmenu .mfoot { text-align: center; margin-top: 6px; }
.gmenu .mrow { display: flex; gap: 6px; flex-wrap: wrap; }
.mopt { flex: 1; min-width: 80px; text-align: center; padding: 7px 8px; background: #14110c; border: 1px solid #3a3020; color: #a8946a; cursor: var(--cur-ptr); font-size: 12px; }
.mopt:hover { border-color: #6a5a3a; } .mopt.on { background: #3a2a10; border-color: #c8a050; color: #ffd84a; }
.mslider { width: 100%; accent-color: #c8a050; }
.mbtns { display: flex; justify-content: flex-end; margin-top: 8px; }
body.nonames .plates { display: none; }
/* giriş & karakter seçimi */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 800;
  background: radial-gradient(ellipse at 50% 30%, rgba(60,40,20,.35), rgba(0,0,0,.85)), linear-gradient(180deg, #1a1612, #070605); }
.screen .logo { margin-bottom: 18px; }
.loginbox { width: 340px; } .loginbox .mbody { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.loginbox .input { width: 100%; box-sizing: border-box; }
.loginbox .tabs { display: flex; gap: 6px; } .loginbox .err, .selerr { color: #ff8a6a; font-size: 12px; min-height: 16px; text-align: center; }
.charslots { display: grid; grid-template-columns: repeat(4, 200px); gap: 14px; margin: 10px 0 18px; }
.cslot { height: 250px; background: linear-gradient(180deg, rgba(40,32,20,.85), rgba(14,11,8,.9)); border: 1px solid #4a3c24; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: var(--cur-ptr); position: relative; padding: 10px; box-sizing: border-box; text-align: center; }
.cslot:hover { border-color: #8a6a2a; } .cslot.sel { border-color: #ffd84a; box-shadow: 0 0 18px rgba(255,216,74,.25); }
.cslot .cicon { width: 84px; height: 84px; } .cslot .cicon svg { width: 100%; height: 100%; border-radius: 6px; }
.cslot .cname { font-size: 17px; color: #f0d48a; } .cslot .cinfo { font-size: 12px; color: #a8946a; line-height: 1.5; }
.cslot.empty { color: #6a5a3a; font-size: 13px; } .cslot.empty .plus { font-size: 40px; color: #8a6a2a; }
.cslot .cdel { position: absolute; top: 6px; right: 8px; color: #8a5a4a; font-size: 12px; cursor: var(--cur-ptr); } .cslot .cdel:hover { color: #ff6a5a; }
.selbtns { display: flex; gap: 12px; align-items: center; }
.selfoot { margin-top: 14px; color: #8a7a5a; font-size: 12px; text-align: center; line-height: 1.6; }
.loadscr { position: fixed; inset: 0; z-index: 850; display: flex; align-items: center; justify-content: center; flex-direction: column; background: radial-gradient(ellipse at 50% 40%, #2a2016, #070605); }
.loadscr .lmap { font-size: 26px; color: #f0d48a; letter-spacing: 3px; } .loadscr .lsub { color: #a8946a; margin-top: 6px; } .loadscr .lmsg { color: #cdbf9c; margin-top: 22px; font-size: 13px; }

.chatin { width: 100%; box-sizing: border-box; margin-top: 4px; background: rgba(8,7,5,.75); border: 1px solid #3a3020; color: #e8dcc0; padding: 5px 8px; font: inherit; font-size: 12px; pointer-events: auto; }
.chatin:focus { border-color: #8a6a2a; outline: none; }
/* PC mağazası */
.pcbal { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: linear-gradient(90deg, #2a1a40, #14101c); border: 1px solid #5a3a8a; margin-bottom: 8px; }
.pcbal b { color: #d8b0ff; font-size: 16px; }
.storerow { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid #221d14; }
.storerow .slot { width: 40px; height: 40px; } .storerow .sn { font-size: 13px; } .storerow .sn small { display: block; color: #8a7a5a; font-size: 11px; }
.storerow .sp { text-align: right; font-size: 12px; color: #d8b0ff; white-space: nowrap; } .storerow .sp s { color: #6a5a7a; margin-right: 4px; } .storerow .btn { padding: 3px 10px; font-size: 11px; margin-top: 3px; }
.pkgrow { display: flex; justify-content: space-between; padding: 6px 4px; border-bottom: 1px solid #221d14; font-size: 12px; } .pkgrow b { color: #d8b0ff; }
.disc { display: inline-block; background: #6a3a10; color: #ffd84a; font-size: 10px; padding: 0 5px; border-radius: 3px; margin-left: 4px; }

/* oyuncu menüsü, davet, parti, takas */
.pmenu { position: fixed; z-index: 950; min-width: 190px; padding: 6px 0; }
.pmhead { padding: 4px 12px 8px; border-bottom: 1px solid #3a3020; margin-bottom: 4px; } .pmhead b { display: block; color: #9fd8ff; } .pmhead span { color: #a8946a; font-size: 11px; }
.pmi { padding: 6px 12px; cursor: var(--cur-ptr); font-size: 12.5px; color: #e8dcc0; } .pmi:hover { background: rgba(255,216,74,.1); color: #ffd84a; } .pmi.off { color: #6a5a3a; cursor: var(--cur); }
.invbox { position: fixed; left: 50%; top: 120px; transform: translateX(-50%); width: 340px; z-index: 940; } .invbox .mbody { padding: 12px 16px; }
.partyframe { position: absolute; left: 14px; top: 176px; width: 200px; font-size: 11.5px; pointer-events: auto; }
.pfhead { color: #f0d48a; font-size: 12px; letter-spacing: 1px; margin-bottom: 4px; text-shadow: 0 1px 2px #000; } .pfhead span { color: #a8946a; font-family: Inter; letter-spacing: 0; }
.pfm { background: rgba(10,8,5,.72); border: 1px solid #3a3020; padding: 4px 6px; margin-bottom: 3px; cursor: var(--cur-ptr); position: relative; }
.pfm:hover { border-color: #6a5a3a; } .pfm.me { border-color: #5a4a2a; } .pfm.far { opacity: .55; }
.pfn { display: flex; gap: 4px; align-items: center; margin-bottom: 2px; } .pfn .nm { flex: 1; color: #e8dcc0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pfn .lv { color: #a8946a; } .crown { color: #ffd84a; }
.pfm .bar { height: 5px; margin-top: 1px; } .pfm .bar.mp i { background: linear-gradient(180deg,#5a9aff,#2050c0); }
.pfmenu { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .pfmenu span { background: #2a2216; border: 1px solid #4a3c24; padding: 2px 6px; color: #e8dcc0; } .pfmenu span:hover { color: #ffd84a; }
.pfhint { color: #8a7a5a; font-size: 10.5px; text-shadow: 0 1px 2px #000; }
.trside { border: 1px solid #3a3020; padding: 8px; margin-bottom: 8px; background: rgba(0,0,0,.2); } .trside.locked { border-color: #8a6a2a; } .trside.mine { background: rgba(40,30,10,.25); }
.trh { margin-bottom: 6px; font-size: 12.5px; } .trk2 { margin-left: 6px; font-size: 10px; padding: 1px 5px; background: #5a4010; color: #ffd84a; border-radius: 3px; } .trk2.ok { background: #1a5a2a; color: #9affb0; }
.trgrid { display: grid; grid-template-columns: repeat(6, 44px); gap: 4px; } .trgrid .slot { width: 44px; height: 44px; }
.trgold { margin-top: 6px; font-size: 12px; } .trgold b { color: #ffd84a; } .trgold input { width: 120px; background: #0e0c08; border: 1px solid #5a4a2a; color: #ffd84a; padding: 3px 6px; font: inherit; }
.slot.intrade { outline: 2px solid #ffd84a; opacity: .6; }
.fl.odmg { font-size: 15px; color: #c8c0b0; opacity: .8; }

.barpg { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 22px; margin: 0 4px; color: #e8c06a; font-size: 12px; user-select: none; }
.barpg div { cursor: var(--cur-ptr); color: #a8946a; font-size: 10px; line-height: 14px; } .barpg div:hover { color: #ffe08a; }


/* kaydırma çubukları oyunun temasıyla (altın / koyu) */
* { scrollbar-width: thin; scrollbar-color: #7a6235 rgba(0,0,0,.35); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.35); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: linear-gradient(#8a6e3a, #5a4422); border: 1px solid #2a2010; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(#b08a48, #7a5a2a); }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
::-webkit-scrollbar-corner { background: transparent; }

/* dar ekranda (yetenek çubuğuyla çakışmasın diye) menü düğmeleri bir sıra yukarıda */
@media (max-width: 1600px) { .menubtns { bottom: 84px; } .hint { bottom: 132px !important; } }

.loginbox .lnk { text-align: center; color: #c9a14a; font-size: 12.5px; margin-top: 10px; cursor: var(--cur-ptr); text-decoration: underline; text-underline-offset: 3px; }
.loginbox .lnk:hover { color: #ffe08a; }
.loginbox .okm { color: #8ae0a0; font-size: 12.5px; text-align: center; min-height: 4px; margin-bottom: 4px; }

/* premium rozetleri (oyuncu çerçevesi) */
.premchips { position: absolute; left: 100%; top: 4px; margin-left: 6px; display: flex; flex-direction: column; gap: 4px; }
.premchips:empty { display: none; }
.premchip { font: 700 9.5px Cinzel, serif; letter-spacing: 1px; padding: 2px 7px; white-space: nowrap; background-clip: padding-box; border-radius: 2px; cursor: var(--cur); pointer-events: auto; }
.premchip.farm { color: #9fffb4; border: 1px solid rgba(122,255,154,.5); background: rgba(20,60,30,.6); box-shadow: 0 0 6px rgba(122,255,154,.25); }
.premchip.exp { color: #a8d8ff; border: 1px solid rgba(120,190,255,.55); background: rgba(16,36,64,.6); box-shadow: 0 0 6px rgba(120,190,255,.25); }
.premchip.wait { opacity: .5; filter: grayscale(.5); box-shadow: none; cursor: var(--cur-ptr); }
.premchip.wait:hover { opacity: .9; filter: none; }
.premsel { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 8px; }
.premrow { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid #3a3020; background: rgba(0,0,0,.3); border-radius: 3px; }
.premrow.act { border-color: #5a8a4a; background: rgba(30,60,30,.35); }
.premrow .tt-d { flex: 1; } .premrow .btn { padding: 4px 10px; font-size: 10px; letter-spacing: 1px; }
.chattabs div { cursor: var(--cur-ptr); pointer-events: auto; user-select: none; }
.chattabs div:hover { color: #e8dcc0; }
.chattabs .new:not(.on) { color: #ffd84a; animation: tabblink 1s ease-in-out infinite; }
@keyframes tabblink { 50% { background: rgba(160,120,40,.65); } }

/* özel mesaj pencereleri (KO tarzı) */
.pmwin { position: fixed; width: 270px; z-index: 60; background: linear-gradient(180deg, rgba(10,14,40,.94), rgba(6,8,24,.94)); border: 1px solid #5a6aa8; border-radius: 3px; box-shadow: 0 6px 22px rgba(0,0,0,.6); font-size: 12px; pointer-events: auto; }
.pmbar { display: flex; align-items: center; gap: 4px; padding: 4px 6px; background: linear-gradient(180deg, #2a3a8a, #18225a); border-bottom: 1px solid #5a6aa8; cursor: move; user-select: none; }
.pmname { flex: 1; font-weight: 700; color: #e8f0ff; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmbtn { width: 17px; height: 17px; line-height: 15px; text-align: center; border-radius: 50%; border: 1px solid #c8d0ff; color: #fff; background: radial-gradient(circle at 40% 35%, #8a9ae8, #3a4a9a); font-weight: 700; font-size: 12px; cursor: var(--cur-ptr); }
.pmbtn:hover { filter: brightness(1.3); }
.pmlog { height: 140px; overflow-y: auto; padding: 6px 8px; line-height: 1.5; scrollbar-width: thin; scrollbar-color: #5a6aa8 transparent; }
.pml { word-wrap: break-word; } .pml.them { color: #7affd8; } .pml.me { color: #ffe88a; } .pml.err { color: #ff9a7a; font-style: italic; }
.pmin { width: 100%; box-sizing: border-box; border: none; border-top: 1px solid #3a4a8a; background: rgba(0,0,10,.6); color: #e8f0ff; padding: 6px 8px; font: inherit; outline: none; }
.pmwin.min { width: 160px; } .pmwin.min .pmlog, .pmwin.min .pmin { display: none; } .pmwin.min .pmbar { border-bottom: none; cursor: var(--cur-ptr); }
.pmwin.blink .pmbar { animation: pmblink .7s steps(1) infinite; }
@keyframes pmblink { 50% { background: linear-gradient(180deg, #c89a2a, #7a5410); } }
.cnick { cursor: var(--cur-ptr); pointer-events: auto; } .cnick:hover { text-decoration: underline; }
.plate.pt .n { font-size: 13px; font-weight: 700; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 8px rgba(255,150,30,.75); }
.plate.pt .n::before { content: '◆ '; font-size: 10px; color: #ffd84a; }
.plate.pt .lv { color: #ffe0a0; }

/* sağ alttaki geçici bildirim akışı (savaş / sistem yazıları) */
.feed { position: absolute; right: 16px; bottom: 100px; width: 420px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; pointer-events: none; }
.feed .fd { max-width: 100%; padding: 3px 9px; font-size: 12px; line-height: 1.45; text-align: right; background: rgba(0,0,0,.32); border-radius: 3px; text-shadow: 0 1px 2px #000, 0 0 2px #000; opacity: .88; animation: fdin .25s ease-out; transition: opacity .7s, transform .7s; }
.feed .fd.out { opacity: 0; transform: translateY(-6px); }
@keyframes fdin { from { opacity: 0; transform: translateX(12px); } }

/* SP sıralama sembolleri */
.rkb.glow { filter: drop-shadow(0 0 3px rgba(255,200,60,.9)); animation: rkglow 1.6s ease-in-out infinite; }
@keyframes rkglow { 50% { filter: drop-shadow(0 0 7px rgba(255,220,90,1)); } }
.rkb.rk2 { filter: drop-shadow(0 0 2px rgba(200,220,255,.7)); } .rkb.rk3 { filter: drop-shadow(0 0 2px rgba(255,160,80,.6)); }
.spbox { display: flex; align-items: center; gap: 6px; margin: 6px 0 8px; padding: 6px 9px; border: 1px solid #6a4a20; background: linear-gradient(90deg, rgba(90,30,10,.45), rgba(0,0,0,.25)); border-radius: 3px; font-size: 12px; color: #e8d0a0; }
.spbox b { margin-left: auto; color: #ffd84a; font-size: 13px; letter-spacing: .5px; } .spbox em { font-style: normal; color: #ffb02e; font-size: 11px; }
.pfarr { display: inline-block; margin-left: 5px; vertical-align: -3px; filter: drop-shadow(0 0 3px rgba(255,160,40,.7)); transition: transform .15s linear; }
.pfd { margin-left: 3px; font-size: 10px; color: #ffcf7a; }
.citem { pointer-events: auto; cursor: var(--cur-ptr); text-decoration: underline dotted rgba(255,255,255,.35); text-underline-offset: 2px; }
.citem:hover { text-decoration-color: currentColor; filter: brightness(1.25); }

/* konuşma balonu */
.bubbles { position: absolute; inset: 0; pointer-events: none; }
.bub { position: absolute; left: 0; top: 0; max-width: 220px; padding: 5px 10px; background: rgba(250,245,230,.93); color: #2a1e10; font-size: 12px; line-height: 1.35; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.45); text-align: center; word-wrap: break-word; will-change: transform; animation: bubin .2s ease-out; transition: opacity .4s; }
.bub::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-top-color: rgba(250,245,230,.93); border-bottom: 0; }
.bub.pt { background: rgba(255,226,170,.95); } .bub.pt::after { border-top-color: rgba(255,226,170,.95); }
.bub.out { opacity: 0; }
@keyframes bubin { from { opacity: 0; } }

/* demirci: onay ve gerilim */
.w-smith .wbody, #w-smith .wbody { position: relative; }
.upask, .upwork { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(6,4,2,.82); border-radius: 3px; }
.upask-in { width: 86%; text-align: center; padding: 14px; border: 1px solid #8a6a2a; background: linear-gradient(180deg, #221a10, #120d08); box-shadow: 0 0 24px rgba(0,0,0,.8); }
.upwork { flex-direction: column; gap: 12px; }
.upw-t { color: #ffd27a; font-size: 15px; letter-spacing: 2px; animation: upwt .45s ease-in-out infinite alternate; }
@keyframes upwt { to { color: #fff2c0; text-shadow: 0 0 12px #ff9a30; } }
.upw-bar { width: 70%; height: 10px; border: 1px solid #8a6a2a; background: #0a0806; border-radius: 2px; overflow: hidden; }
.upw-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8a3a08, #ffb030, #fff0a0); box-shadow: 0 0 10px #ff9a30; animation-name: upwbar; animation-timing-function: ease-in; animation-fill-mode: forwards; }
@keyframes upwbar { to { width: 100%; } }
.upw-sparks { position: relative; width: 120px; height: 40px; }
.upw-sparks span { position: absolute; left: 50%; bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: #ffd060; box-shadow: 0 0 6px #ff9a30; animation: upsp .6s ease-out infinite; }
.upw-sparks span:nth-child(odd) { animation-duration: .75s; } .upw-sparks span:nth-child(3n) { animation-delay: .2s; } .upw-sparks span:nth-child(4n) { animation-delay: .35s; }
.upw-sparks span:nth-child(1) { --dx: -50px; } .upw-sparks span:nth-child(2) { --dx: 40px; } .upw-sparks span:nth-child(3) { --dx: -25px; } .upw-sparks span:nth-child(4) { --dx: 55px; } .upw-sparks span:nth-child(5) { --dx: -60px; } .upw-sparks span:nth-child(6) { --dx: 15px; } .upw-sparks span:nth-child(7) { --dx: -10px; }
.upw-sparks span:nth-child(8) { --dx: 30px; } .upw-sparks span:nth-child(9) { --dx: -40px; } .upw-sparks span:nth-child(10) { --dx: 60px; } .upw-sparks span:nth-child(11) { --dx: -55px; } .upw-sparks span:nth-child(12) { --dx: 5px; } .upw-sparks span:nth-child(13) { --dx: 45px; } .upw-sparks span:nth-child(14) { --dx: -30px; }
@keyframes upsp { 0% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx, 20px)), -38px); opacity: 0; } }
.anvil.shake { animation: anshake .12s linear infinite; }
@keyframes anshake { 25% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, -1px); } }