/* Hasat Zamanı MMO · arayüz. Renkler ve yazı tipleri eski oyunla aynı */
:root {
  --loam: #1f160f;
  --wood: #4a2f1a;
  --wood-hi: #7a5130;
  --wood-lo: #2a1a0e;
  --straw: #f3e3b5;
  --straw-dim: #c9b68a;
  --gold: #f2c14e;
  --leaf: #8fcf5a;
  --rust: #d9643a;
  --sky: #9ad0f4;
  /* Telefonda okunaklı yazı: başlık, düğme ve etiketler Baloo 2 (yuvarlak, kalın), metin ve sayılar Nunito. İkisi de değişken
     kalınlıklı; Türkçe harflerin hepsi var. Piksel yazılar (Tiny5, VT323) küçük ekranda okunmuyordu */
  --f-display: "Baloo 2", "Nunito", system-ui, sans-serif;
  --f-body: "Nunito", system-ui, sans-serif;
  --f-data: "Nunito", system-ui, sans-serif;
  --safe-b: max(12px, env(safe-area-inset-bottom));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--loam); color: var(--straw); font: 600 15px/1.4 var(--f-body); font-synthesis: none; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
.hidden { display: none !important; }
.num { font-family: var(--f-data); font-weight: 800; font-variant-numeric: tabular-nums; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.panel { background: rgba(42, 26, 14, .92); border: 2px solid var(--wood-hi); border-radius: 6px; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.btn { font: 600 14px var(--f-display); color: var(--wood-lo); background: var(--gold); border: 0; border-bottom: 3px solid #a87a22; border-radius: 4px; padding: 7px 14px; cursor: pointer; white-space: nowrap; }
.btn:active { transform: translateY(1px); border-bottom-width: 2px; }
.btn.ghost { background: var(--wood-lo); color: var(--straw); border: 2px solid var(--wood-hi); }
.btn.big { font-size: 18px; padding: 10px 18px; width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }
a.btn { display: inline-block; text-decoration: none; text-align: center; }
kbd { font: 800 12px/1 var(--f-data); padding: 0 3px; margin-left: 5px; border-radius: 3px; background: rgba(0, 0, 0, .3); }

/* giriş ve yükleme */
.screen { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; z-index: 30; background: radial-gradient(ellipse at center, rgba(31, 22, 15, .55), rgba(31, 22, 15, .92)); }
.card { width: min(420px, 100%); padding: 20px; }
.card h1 { margin: 6px 0 4px; font: 700 40px/1 var(--f-display); color: var(--gold); }
.card p { margin: 6px 0 14px; text-wrap: pretty; }
.card label { display: block; font-size: 13px; color: var(--straw-dim); margin-bottom: 4px; }
.card input { width: 100%; font: 600 18px var(--f-display); color: var(--straw); background: var(--wood-lo); border: 2px solid var(--wood-hi); border-radius: 4px; padding: 8px 10px; margin-bottom: 12px; }
.card input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.eyebrow { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--straw-dim); }
.opt { color: var(--straw-dim); font-size: 12px; }
.err { color: var(--rust); min-height: 1em; margin: 8px 0 0 !important; }
.small { font-size: 12px; color: var(--straw-dim); margin-bottom: 0 !important; }
/* İnşa modu (main.js build): altta açıklama ve düğmeler; araç çubuğu ve kullan düğmeleri gizlenir */
#buildBar { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 8px); transform: translateX(-50%); z-index: 12; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px;
  width: min(620px, calc(100vw - 20px)); padding: 9px 12px; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242, 193, 78, .25), 0 6px 18px rgba(0, 0, 0, .4); }
#buildBar #buildText { flex: 1 1 260px; font-size: 14px; } #buildBar .row-btns { margin: 0; } #buildBar .btn { min-height: 38px; }
body.building #hotbar, body.building #btnUse, body.building #btnDash, body.building #btnEat { visibility: hidden; } /* yürümek için joystick kalır */
/* Tarla bilgisi (main.js updatePlotTip): tarlanın üstünde ekin adı, hasada kalan süre, su çubuğu */
#plotTip { position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none; min-width: 128px; padding: 5px 9px 6px; border-radius: 8px; font-size: 12px; line-height: 1.3;
  background: rgba(31, 22, 15, .9); border: 2px solid var(--wood-hi); box-shadow: 0 3px 0 rgba(0, 0, 0, .35); margin-top: -6px; }
#plotTip b { display: block; font-size: 13px; color: var(--gold); white-space: nowrap; }
#ptTime { display: block; color: var(--straw); white-space: nowrap; } #ptTime.ok { color: #a6e07a; }
.ptbar { height: 6px; margin: 4px 0 2px; border-radius: 3px; background: rgba(0, 0, 0, .45); overflow: hidden; }
.ptbar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3f8fd0, #8fd0ff); transition: width .4s; }
#ptWet { display: block; color: #9ad0f4; font-size: 11px; white-space: nowrap; } #ptWet.dry { color: #ffb08a; }
#plotTip.info { max-width: 260px; } #plotTip.info .ptbar { display: none; } #plotTip.info #ptTime { white-space: normal; } #plotTip.info b::before { content: 'i'; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 5px; border-radius: 50%; font-size: 11px; color: #12324a; background: #9ad0f4; }
/* Kısa kopmada üstte uyarı (oyun sürer, istemci aynı oturumla geri bağlanır) */
#netWarn { position: fixed; top: calc(max(8px, env(safe-area-inset-top)) + 76px); left: 50%; transform: translateX(-50%); z-index: 27; display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 16px; font: 600 14px var(--f-display); color: #ffe2c8; background: rgba(110, 36, 18, .92); border: 2px solid #e0703a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4); pointer-events: none; }
#netWarn i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #ffb08a; border-top-color: transparent; animation: nwspin .8s linear infinite; }
@keyframes nwspin { to { transform: rotate(360deg); } }
/* Açılış ekranları (sunucu, giriş, kayıt): fragmanın üstünde saydam, bulanık ahşap kart. Geniş ekranda kart sağda, fragmanın
   yazısı solda; dikey telefonda kart ortada, yazı gizli */
.entry { transition: background .6s; }
body.trailer .entry { background: linear-gradient(0deg, rgba(10, 6, 3, .6), rgba(10, 6, 3, 0) 38%), radial-gradient(ellipse at 30% 50%, rgba(10, 6, 3, 0) 45%, rgba(10, 6, 3, .5)); }
.screen.entry:not(.hidden) ~ #modal { z-index: 32; }
@media (min-aspect-ratio: 5/4) and (min-width: 700px) {
  .screen.entry { place-items: center end; padding-right: max(16px, 5vw); }
  body.trailer .entry { background: linear-gradient(0deg, rgba(10, 6, 3, .55), rgba(10, 6, 3, 0) 34%), linear-gradient(90deg, rgba(10, 6, 3, 0) 40%, rgba(10, 6, 3, .6)); }
}
.ecard { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 18px 20px 16px; color: var(--straw);
  background: linear-gradient(180deg, rgba(66, 42, 22, .9), rgba(28, 18, 10, .93)); -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
  border: 2px solid rgba(201, 154, 74, .5); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 236, 190, .16);
  animation: ecin .45s cubic-bezier(.2, 1.2, .4, 1); scrollbar-width: thin; }
.ecard::before { content: ''; position: absolute; left: 24px; right: 24px; top: -2px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
@keyframes ecin { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.ebrand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.elogo { width: 54px; height: 54px; border-radius: 12px; image-rendering: pixelated; box-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 0 0 2px rgba(242, 193, 78, .35); }
.ebrand h1 { margin: 0; font: 700 34px/1 var(--f-display); color: var(--gold); letter-spacing: .5px; text-shadow: 0 3px 0 #6a3e10, 0 0 22px rgba(242, 193, 78, .3); }
.ebrand p { margin: 4px 0 0; font-size: 13px; color: var(--straw-dim); }
.ehead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.ehead h2 { margin: 0; font: 600 18px var(--f-display); letter-spacing: .04em; }
.srv { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 10px; padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(46, 74, 122, .35), rgba(0, 0, 0, .25)); border: 2px solid rgba(110, 150, 220, .35); }
.srv b { font: 700 24px/1 var(--f-display); color: var(--gold); }
.srvdot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #7fd05a; box-shadow: 0 0 0 0 rgba(127, 208, 90, .6); animation: srvp 2s infinite; }
@keyframes srvp { 70% { box-shadow: 0 0 0 7px rgba(127, 208, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(127, 208, 90, 0); } }
.srvreg { padding: 2px 9px; border-radius: 10px; font-size: 12px; background: #2e4a7a; color: #cfe2ff; }
.srvch { margin-left: auto; font-size: 12px; color: #b8c8e8; }
.srvon { font-size: 18px; color: #a6e07a; }
.chlist { display: grid; gap: 6px; margin-bottom: 8px; }
.chbtn { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; min-height: 50px; padding: 6px 12px; cursor: pointer; text-align: left;
  font: 600 16px var(--f-display); color: var(--straw); background: linear-gradient(180deg, rgba(74, 47, 26, .9), rgba(52, 33, 18, .9)); border: 2px solid var(--wood-hi); border-radius: 9px;
  transition: border-color .15s, transform .1s, background .15s; }
.chbtn:hover:not(:disabled), .chbtn:focus-visible { border-color: var(--gold); background: linear-gradient(180deg, rgba(96, 62, 32, .95), rgba(60, 38, 20, .95)); outline: none; }
.chbtn:active:not(:disabled) { transform: translateY(1px); }
.chbtn:disabled { opacity: .5; cursor: not-allowed; }
.chbtn.last { border-color: rgba(242, 193, 78, .7); box-shadow: inset 4px 0 0 var(--gold); }
.chbtn .chn { font-size: 20px; color: var(--gold); }
.chbtn .chbar { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.chbtn .chbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #5fb83e, #8fe066); box-shadow: 0 0 8px rgba(127, 208, 90, .35); transition: width .6s; }
.chbtn .chbar i.mid { background: #f2c14e; } .chbtn .chbar i.hi { background: #e0703a; } .chbtn .chbar i.full { background: #d9443a; }
.chbtn .chst { font-size: 13px; color: var(--straw-dim); text-align: right; white-space: nowrap; }
.ewho { display: flex; align-items: center; gap: 10px; min-height: 40px; padding-top: 10px; border-top: 1px solid rgba(201, 154, 74, .25); }
.ewho .av { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; font: 700 18px var(--f-display); color: #2a1a0e; background: var(--gold); box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); }
.ewho .wn { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ewho .wn b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ewho small { font-size: 12px; color: var(--straw-dim); }
.lnk { flex: none; min-height: 40px; padding: 0 12px; cursor: pointer; font: 600 14px var(--f-display); color: var(--straw); background: rgba(0, 0, 0, .25); border: 2px solid var(--wood-hi); border-radius: 8px; }
.lnk:hover { border-color: var(--rust); color: #ffb08a; }
.eload { margin-top: 6px !important; text-align: center; }
.eload:empty { display: none; }
/* Masaüstü uygulamasında (body.desk) açılış kartlarının altında oyun moduna (Tek oyunculu / Çevrimiçi) dönüş */
.emode { display: none; width: 100%; min-height: 40px; margin-top: 8px; cursor: pointer; font: 600 14px var(--f-display); color: var(--straw-dim); background: none; border: 0; border-radius: 8px; }
.emode:hover { color: var(--gold); background: rgba(0, 0, 0, .2); }
body.desk .emode, #soloNew { display: block; }
.esub { margin: -2px 0 12px !important; }
#soloAcc .btn { margin-bottom: 2px; }
body.solo .chtag { display: none; }
/* Giriş kartı */
.eback { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 40px; margin-bottom: 10px; padding: 0 12px; cursor: pointer; font: 600 14px var(--f-display); color: var(--straw-dim);
  background: rgba(46, 74, 122, .25); border: 2px solid rgba(110, 150, 220, .3); border-radius: 9px; }
.eback b { color: var(--straw); }
.eback u { margin-left: auto; text-decoration: none; color: #cfe2ff; font-size: 13px; }
.eback:hover { border-color: rgba(150, 190, 255, .6); }
.ltabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 12px; padding: 4px; border-radius: 11px; background: rgba(0, 0, 0, .32); border: 1px solid rgba(201, 154, 74, .25); }
.ltabs::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 8px; background: linear-gradient(180deg, #ffd56a, var(--gold));
  box-shadow: 0 2px 0 #a87a22; transition: transform .25s cubic-bezier(.3, 1.3, .5, 1); }
.ltabs[data-on="up"]::before { transform: translateX(100%); }
.ltabs button { position: relative; min-height: 40px; font: 600 16px var(--f-display); cursor: pointer; color: var(--straw-dim); background: none; border: 0; border-radius: 8px; transition: color .2s; }
.ltabs button[aria-selected="true"] { color: #2a1a0e; }
.field { position: relative; display: block; margin-bottom: 10px; }
.field .fico { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--straw-dim); stroke-width: 1.6; pointer-events: none; transition: stroke .15s; }
.ecard .field input { width: 100%; min-height: 46px; margin: 0; padding: 8px 12px 8px 40px; font: 600 17px var(--f-display); color: var(--straw);
  background: rgba(20, 12, 6, .7); border: 2px solid rgba(122, 81, 48, .9); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.ecard .field input::placeholder { color: rgba(201, 182, 138, .6); }
.ecard .field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242, 193, 78, .18); }
.field:focus-within .fico { stroke: var(--gold); }
.field:has(.eye) input { padding-right: 46px; }
.eye { position: absolute; right: 3px; top: 50%; width: 42px; height: 40px; transform: translateY(-50%); display: grid; place-items: center; cursor: pointer; background: none; border: 0; border-radius: 8px; }
.eye svg { width: 20px; height: 20px; fill: none; stroke: var(--straw-dim); stroke-width: 1.6; }
.eye .slash { display: none; }
.eye[aria-pressed="true"] .slash { display: inline; }
.eye:hover svg, .eye[aria-pressed="true"] svg { stroke: var(--gold); }
.lpair { display: flex; gap: 8px; }
.lpair > .field { flex: 1; min-width: 0; }
.btn.ego { min-height: 50px; margin-top: 2px; font: 700 19px var(--f-display); letter-spacing: .02em; border-radius: 10px; background: linear-gradient(180deg, #ffd96e, var(--gold) 55%, #e0a83a);
  border-bottom: 4px solid #9a6a1a; box-shadow: 0 6px 18px rgba(242, 193, 78, .25); }
.btn.ego:hover:not(:disabled) { filter: brightness(1.06); }
.enote { margin-top: 10px !important; line-height: 1.4; }
/* Giriş kartının altında gizlilik ve destek bağlantıları (kısa ekranda da görünür) */
.elegal { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 6px 0 0; font-size: 13px; color: var(--straw-dim); }
.elegal a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; border-radius: 6px; color: var(--straw-dim); text-decoration: underline; text-underline-offset: 3px; }
.elegal a:hover, .elegal a:focus-visible { color: var(--gold); background: rgba(0, 0, 0, .2); outline: none; }
/* Fragmanın yazısı ve kararma perdesi */
#trFade { position: fixed; inset: 0; z-index: 28; pointer-events: none; background: #0b0703; opacity: 0; transition: opacity .8s ease; }
#trFade.on { opacity: 1; }
body:not(.trailer) #trFade:not(.on) { display: none; }
#trCap { position: fixed; left: max(24px, 5vw); bottom: max(28px, 7vh); z-index: 31; max-width: min(520px, calc(100vw - 520px)); pointer-events: none;
  opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, 1, .3, 1); }
#trCap.on { opacity: 1; transform: none; }
#trCap b { display: block; font: 700 44px/1 var(--f-display); color: var(--gold); text-shadow: 0 3px 0 #5a3410, 0 0 30px rgba(0, 0, 0, .6); }
#trCap span { display: block; margin-top: 8px; font: 600 19px/1.3 var(--f-display); color: var(--straw); text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 0 18px rgba(0, 0, 0, .7); }
body:not(.trailer) #trCap { display: none; }
@media (max-aspect-ratio: 5/4), (max-width: 699px) { #trCap { display: none; } }
@media (max-width: 420px) { .ebrand h1 { font-size: 27px; } .elogo { width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .ecard, .srvdot { animation: none; } #trCap { transition: opacity .3s; transform: none; } }
/* Yatay telefonda (kısa ekran) kart sığsın: alt yazılar gizlenir, logo küçülür, kanallar iki sütun */
@media (max-height: 520px) {
  .ecard { padding: 10px 14px; max-height: calc(100dvh - 16px); width: min(380px, 100%); }
  .screen.entry { padding-top: 8px; padding-bottom: 8px; }
  .ebrand { gap: 8px; margin-bottom: 8px; } .elogo { width: 32px; height: 32px; border-radius: 8px; }
  .ebrand h1 { font-size: 22px; } .ebrand p, .enote, .srvch { display: none; }
  .ehead { margin-bottom: 4px; } .ehead h2 { font-size: 15px; } .srvon { font-size: 15px; }
  .srv { margin-bottom: 6px; padding: 5px 10px; } .srv b { font-size: 18px; }
  .chlist { gap: 4px; grid-template-columns: 1fr 1fr; margin-bottom: 4px; }
  .chbtn { min-height: 42px; grid-template-columns: 40px 1fr; gap: 2px 8px; padding: 4px 10px; } .chbtn .chst { grid-column: 1 / -1; text-align: left; font-size: 12px; }
  .ewho { padding-top: 6px; min-height: 0; } .ewho .av { width: 30px; height: 30px; font-size: 15px; } .ewho small { display: none; } .ewho:not(:has(.av)) { display: none; }
  .eback { min-height: 34px; margin-bottom: 6px; }
  .esub, #soloForm .small { display: none; } .emode { min-height: 32px; margin-top: 4px; }
  .ltabs { margin-bottom: 6px; padding: 3px; } .ltabs button { min-height: 34px; font-size: 15px; } .ltabs::before { top: 3px; bottom: 3px; left: 3px; }
  .field { margin-bottom: 6px; } .ecard .field input { min-height: 40px; font-size: 16px; }
  .btn.ego { min-height: 44px; font-size: 17px; }
  #loginErr:empty { display: none; } .elegal { margin-top: 2px; } .elegal a { min-height: 28px; }
  #trCap { bottom: 16px; left: 18px; max-width: calc(100vw - 440px); } #trCap b { font-size: 26px; } #trCap span { font-size: 13px; margin-top: 4px; }
}
.chtag { margin-left: 2px; padding: 0 5px; min-height: 20px; font: 600 12px var(--f-display); cursor: pointer; color: #cfe2ff; background: #2e4a7a; border: 1px solid #4a6aa8; border-radius: 8px; }
.chtag:empty { display: none; }
/* GM duyurusu: tam ekran */
#announce { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; cursor: pointer; background: rgba(10, 6, 3, .78); animation: anin .35s ease-out; }
#announce.hidden { display: none; }
@keyframes anin { from { opacity: 0; } to { opacity: 1; } }
#announce .anbox { width: min(760px, 100%); padding: 26px 30px; text-align: center; border: 3px solid var(--gold); border-radius: 12px;
  background: linear-gradient(180deg, #5a3a20, #3a2414); box-shadow: 0 0 40px rgba(242, 193, 78, .45), 0 12px 0 rgba(0, 0, 0, .4); animation: anpop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes anpop { from { transform: scale(.7); } to { transform: none; } }
#announce .anhead { display: inline-block; padding: 4px 16px; border-radius: 14px; font: 700 15px var(--f-display); letter-spacing: .15em; text-transform: uppercase; color: #2a1a0e; background: var(--gold); }
#announce p { margin: 16px 0 10px; font: 700 clamp(22px, 4.5vw, 40px)/1.25 var(--f-display); color: var(--straw); text-wrap: balance; }
#announce .anby { font-size: 14px; color: #ff9a8a; }
/* GM paneli */
.gmq { width: 100%; min-height: 40px; margin-bottom: 4px; font: 600 16px var(--f-display); color: var(--straw); background: var(--wood-lo); border: 2px solid var(--wood-hi); border-radius: 5px; padding: 6px 10px; }
.gmlist .gmrow { flex-wrap: wrap; cursor: pointer; }
.gmlist .gmrow.open { border-color: var(--gold); }
.gmacts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gmacts .btn { min-height: 38px; }
.gmacts .warnb { border-color: #b5452e; }
.gmacts .gmwhy { flex: 1 1 100%; min-height: 36px; font: 600 14px var(--f-display); color: var(--straw); background: var(--wood-lo); border: 2px solid var(--wood-hi); border-radius: 5px; padding: 4px 8px; }
.gmtag { padding: 0 5px; border-radius: 4px; font-size: 11px; color: #fff; background: #c0392b; }
/* Şikâyet penceresi ve GM şikâyet listesi; Hesabı sil */
.rpt { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin: 6px 0 8px; }
.rpt label, .rptb { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 2px solid var(--wood-hi); border-radius: 5px; background: var(--wood-lo); color: var(--straw); cursor: pointer; font-size: 15px; }
.rpt input, .rptb input { width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.rptb { margin: 8px 0; border-style: dashed; font-size: 14px; }
#rpNote { width: 100%; font: 600 16px var(--f-display); color: var(--straw); background: var(--wood-lo); border: 2px solid var(--wood-hi); border-radius: 5px; padding: 8px 10px; resize: vertical; }
.gmrep { flex-wrap: wrap; } .gmrep .rnote { display: block; margin-top: 2px; color: #ffd86a; }
.rctx { margin: 4px 0 0; padding: 6px 8px; list-style: none; background: rgba(0, 0, 0, .3); border-radius: 4px; font-size: 13px; max-height: 140px; overflow-y: auto; }
.rctx li { padding: 1px 0; color: var(--straw); } .rctx small { color: #a89878; }
.btn.warnb { border-color: #b5452e; }
#daIn { width: 100%; margin: 6px 0 2px; }
#gmAnn { width: 100%; font: 600 16px var(--f-display); color: var(--straw); background: var(--wood-lo); border: 2px solid var(--wood-hi); border-radius: 5px; padding: 8px 10px; resize: vertical; }

/* HUD */
#leftcol { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 10px; width: 210px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
#status { position: relative; padding: 8px 10px; }
#status.flash { animation: flash 1.2s ease-out; }
/* Saatin yanında hava simgesi (ui.js setClock) */
.wx { position: relative; flex: none; align-self: center; width: 15px; height: 15px; margin: 0 2px 0 auto; border-radius: 50%; }
.wx.sun { background: radial-gradient(circle, #fff3b0 0 40%, #f2c14e 41% 62%, transparent 64%); box-shadow: 0 0 8px rgba(242, 193, 78, .8); }
.wx.dusk { background: linear-gradient(180deg, #ffb070 0 55%, transparent 56%); border-radius: 15px 15px 0 0; height: 8px; margin-top: 4px; box-shadow: 0 -2px 8px rgba(255, 150, 80, .6); }
.wx.moon { background: transparent; box-shadow: inset -5px 2px 0 0 #e4ecff; transform: rotate(-20deg); filter: drop-shadow(0 0 4px rgba(200, 215, 255, .7)); }
.wx.rain { width: 17px; height: 10px; margin-top: -4px; border-radius: 6px; background: #b8c4d4; box-shadow: 4px -3px 0 -1px #b8c4d4; }
.wx.rain::after { content: ''; position: absolute; left: 3px; top: 11px; width: 2px; height: 4px; background: #7ab8ff; box-shadow: 5px 1px 0 #7ab8ff, 10px 0 0 #7ab8ff; }
@keyframes flash { 0%, 30% { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(242, 193, 78, .7); } }
.delta { position: absolute; left: 34px; top: 24px; font: 800 16px/1 var(--f-data); color: var(--gold); text-shadow: 1px 1px 0 #000; pointer-events: none; animation: rise 1.1s ease-out forwards; }
.delta.neg { color: var(--rust); }
@keyframes rise { from { transform: translateY(4px); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-22px); opacity: 0; } }
#status .row { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
#status .row > :not(#place) { flex: none; } /* yer adı kısalsın, saat ve kanal etiketi değil */
#place { font-size: 13px; color: var(--straw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#clock { font-size: 20px; line-height: 1; }
.gold { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.gold b { font: 800 18px/.9 var(--f-data); color: var(--gold); }
.coin { width: 10px; height: 10px; background: var(--gold); box-shadow: inset -2px -2px 0 #a87a22; display: inline-block; }
#lvl { font-size: 13px; color: var(--leaf); }
.bar { position: relative; height: 12px; margin-top: 6px; background: var(--wood-lo); border: 1px solid var(--wood-hi); border-radius: 2px; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; width: 100%; transition: width .2s; }
.bar.hp i { background: var(--rust); }
.bar.xp { height: 6px; margin-top: 4px; }
.bar.xp i { background: linear-gradient(90deg, #6fb04a, var(--leaf)); }
.bar.xp.gain i { animation: xpglow .6s ease-out; }
@keyframes xpglow { from { background: #e8ffb0; box-shadow: 0 0 8px #d8ff8a; } }

/* görev izleyicisi */
#questBox { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 10px 7px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
#questBox:hover { border-color: var(--straw-dim); }
.qhead { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--straw-dim); }
.qbadge { display: none; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--wood-lo); background: var(--gold); border-radius: 3px; padding: 0 5px; }
#questBox.ready { border-color: var(--gold); animation: qpulse 1.6s ease-in-out infinite; }
#questBox.ready .qbadge { display: inline; }
@keyframes qpulse { 50% { box-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 14px rgba(242, 193, 78, .55); } }
#questBox.bump .bar.q i { animation: xpglow .6s ease-out; }
#qTitle { font-weight: 500; font-size: 14px; color: var(--straw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar.q { display: block; height: 12px; margin-top: 2px; }
.bar.q i { background: linear-gradient(90deg, #c99a2e, var(--gold)); }
.bar.q .num { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 11px; line-height: 1; text-shadow: 1px 1px 0 #000, 0 0 3px #000; }
.qdaily { font-size: 12px; color: var(--straw-dim); }
.qdaily b { color: var(--leaf); font-weight: 500; }
.qhint { font-size: 12px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qhint::before { content: '➜ '; }
.bar.boss { height: 14px; }
.bar.boss i { background: linear-gradient(#e0703a, #b5452e); }
#hpText { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 11px; line-height: 1; text-shadow: 1px 1px 0 #000, 0 0 3px #000; }
#rightcol { position: fixed; top: max(10px, env(safe-area-inset-top)); right: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 5; max-width: calc(100vw - 240px); }
#visitBar { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; max-width: 100%; }
#visitText { font-size: 14px; min-width: 0; text-wrap: balance; }
#bossBar { position: fixed; top: max(56px, calc(env(safe-area-inset-top) + 46px)); left: 50%; transform: translateX(-50%); width: min(380px, calc(100vw - 32px)); padding: 6px 10px; z-index: 5; }
.bossname { font: 700 15px var(--f-display); color: #ff9a5a; }
#bossBar.wait .bossname { color: var(--straw-dim); }
.bosshead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.binfo { flex: none; width: 26px; height: 26px; margin: -2px -4px 2px 0; padding: 0; border-radius: 50%; border: 2px solid rgba(243, 227, 181, .5); background: rgba(31, 22, 15, .6);
  color: var(--straw); font: 700 15px/1 Georgia, 'Times New Roman', serif; font-style: italic; cursor: pointer; }
.binfo:hover, .binfo.on { border-color: var(--gold); color: var(--gold); }
body.touch .binfo { width: 32px; height: 32px; }
#bossDrops { margin-top: 8px; font-size: 13px; }
#bossBar.open { z-index: 9; } /* açıkken sağdaki olay kartının ve düğmelerin üstünde */
@media (max-height: 520px) { #bossDrops { margin-top: 5px; font-size: 12px; } .bdl { max-height: 30vh; } .bd { padding: 1px 6px; } #bossDrops p { font-size: 11px; margin-top: 4px; } }
#bossDrops p { margin: 6px 0 0; color: var(--straw-dim); font-size: 12px; line-height: 1.35; }
.bdl { display: grid; gap: 3px; max-height: 40vh; overflow: auto; }
.bd { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .22); border-left: 3px solid #d8d0c0; }
.bd img { width: 22px; height: 22px; }
.bd small { color: var(--straw-dim); }
.bd b { font-variant-numeric: tabular-nums; color: var(--straw); }
.bd.t2 { border-left-color: #5aa8ff; } .bd.t2 span { color: #8cc4ff; }
.bd.t3 { border-left-color: #c07aff; } .bd.t3 span { color: #d6a8ff; }
.bd.t4 { border-left-color: #ffa53a; } .bd.t4 span { color: #ffc070; }
#menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#bMenu { display: none; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.menu-grid .btn { padding: 12px; font-size: 16px; }
/* Yenilikler: simgeli kısa liste */
.news { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 6px; }
.news li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 9px; background: #2e1d10; border: 1px solid #4a2f1a; border-radius: 5px; }
.news img, .news .nl { flex: none; width: 32px; height: 32px; }
.news .nl { display: grid; place-items: center; border-radius: 50%; background: #4a2f1a; color: var(--gold); font: 700 16px var(--f-display); }
.news b { display: block; color: var(--gold); font-weight: 500; margin-bottom: 1px; }
.news span { font-size: 13px; line-height: 1.35; color: var(--straw); }
@media (min-width: 760px) { .news { grid-template-columns: 1fr 1fr; } }
.hbtn { font: 600 14px var(--f-display); color: var(--straw); background: rgba(42, 26, 14, .92); border: 2px solid var(--wood-hi); border-radius: 4px; padding: 6px 10px; cursor: pointer; }
#hint { position: fixed; bottom: calc(var(--safe-b) + 74px); left: 50%; transform: translateX(-50%); padding: 5px 10px; font-size: 13px; z-index: 4; white-space: nowrap; }

/* araç çubuğu */
#hotbar { position: fixed; bottom: var(--safe-b); left: 50%; transform: translateX(-50%); display: flex; gap: 3px; padding: 4px; z-index: 5; }
.slot { position: relative; width: 52px; height: 52px; background: var(--wood-lo); border: 2px solid var(--wood); border-radius: 4px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.slot.lv2::after, .slot.lv3::after { content: ''; position: absolute; right: 2px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: #d9824a; pointer-events: none; }
.slot.lv3::after { background: var(--gold); }
.slot.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.slot img { width: 36px; height: 36px; pointer-events: none; }
.slot .n { position: absolute; right: 3px; bottom: 1px; font: 800 14px/1 var(--f-data); text-shadow: 1px 1px 0 #000; pointer-events: none; }
.slot .k { position: absolute; left: 3px; top: 2px; font: 800 10px/1 var(--f-data); color: var(--straw-dim); pointer-events: none; }

#selName { position: fixed; bottom: calc(var(--safe-b) + 66px); left: 50%; transform: translateX(-50%); z-index: 5; pointer-events: none; font: 600 15px var(--f-display); color: var(--straw); text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, .8); white-space: nowrap; animation: selfade 1.6s ease-in forwards; }
#selName small { color: var(--straw-dim); font-size: 12px; margin-left: 6px; }
@keyframes selfade { 0% { opacity: 0; transform: translate(-50%, 4px); } 10%, 70% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
#hint.under { visibility: hidden; }

/* balıkçılık */
#fishui { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 96px); transform: translateX(-50%); width: min(380px, calc(100vw - 24px)); padding: 8px 12px 10px; z-index: 6; animation: drop .2s ease-out; }
body.touch #fishui { bottom: calc(var(--safe-b) + 190px); }
.fhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.fhead b { font-weight: 700; color: var(--sky); }
#fishui.rare .fhead b { color: var(--gold); }
#fishPips { font-size: 20px; letter-spacing: 2px; color: var(--leaf); }
#fishPips .x { color: var(--rust); }
#fishBar { position: relative; height: 26px; background: linear-gradient(#24414f, #1a2f3a); border: 2px solid var(--wood-hi); border-radius: 4px; overflow: hidden; cursor: pointer; touch-action: none; }
#fishZone { position: absolute; top: 0; bottom: 0; background: linear-gradient(#9be86a, #6fb04a); box-shadow: inset 0 0 0 1px #c8ff9a; }
#fishMark { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; background: var(--straw); box-shadow: 0 0 6px #fff; }
#fishBar.hit { box-shadow: 0 0 0 2px var(--leaf), 0 0 14px rgba(143, 207, 90, .8); }
#fishBar.miss { box-shadow: 0 0 0 2px var(--rust); animation: shake .25s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.fhint { display: block; margin-top: 6px; font-size: 12px; color: var(--straw-dim); text-align: center; }
body.touch .fhint kbd { display: none; }
#biteMark { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -100%); z-index: 6; pointer-events: none; font: 700 34px var(--f-display); color: var(--gold); text-shadow: 0 3px 0 #4a2f1a, 0 0 16px rgba(242, 193, 78, .8); animation: lvpop .35s cubic-bezier(.2, 1.6, .4, 1) both; }

/* dokunmatik denetimler */
#joy { position: fixed; left: 18px; bottom: calc(var(--safe-b) + 72px); width: 128px; height: 128px; border-radius: 50%; background: rgba(42, 26, 14, .45); border: 2px solid rgba(122, 81, 48, .8); z-index: 4; touch-action: none; }
#knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--wood-hi); border: 2px solid var(--straw-dim); pointer-events: none; }
#actions { position: fixed; right: 18px; bottom: calc(var(--safe-b) + 76px); display: flex; align-items: flex-end; gap: 10px; z-index: 4; }
.round { width: 84px; height: 84px; border-radius: 50%; font: 700 16px var(--f-display); color: var(--wood-lo); background: var(--gold); border: 3px solid #a87a22; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); touch-action: none; cursor: pointer; }
.round.small { width: 62px; height: 62px; font-size: 13px; background: var(--straw); border-color: var(--straw-dim); }
body:not(.touch) #joy, body:not(.touch) #actions { display: none; }
#btnRot { display: none; }
body.placing #btnRot { display: block; }

/* sohbet */
#chatLog { position: fixed; left: 10px; bottom: calc(var(--safe-b) + 210px); width: min(360px, calc(100vw - 20px)); display: flex; flex-direction: column; gap: 3px; z-index: 3; pointer-events: none; }
body:not(.touch) #chatLog { bottom: calc(var(--safe-b) + 74px); }
.msg { align-self: flex-start; max-width: 100%; background: rgba(31, 22, 15, .78); padding: 3px 8px; border-radius: 4px; font-size: 14px; text-wrap: pretty; transition: opacity 1s; }
.msg b { color: var(--gold); font-weight: 500; }
.msg.sys { color: var(--leaf); }
.msg.wsp { color: #d9b0ff; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.sw { width: 34px; height: 34px; border-radius: 4px; border: 2px solid var(--wood); cursor: pointer; }
.sw.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.msg.old { opacity: 0; }
#chatLog.open .msg.old { opacity: 1; }

/* bildirimler */
#toasts { position: fixed; top: 110px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 26; pointer-events: none; width: min(460px, calc(100vw - 20px)); }
.toast { background: rgba(42, 26, 14, .95); border: 2px solid var(--wood-hi); border-radius: 4px; padding: 5px 12px; font-size: 14px; text-align: center; animation: pop .2s ease-out; }
.toast.good { border-color: var(--leaf); }
.toast.warn { border-color: var(--rust); }
.toast.quest { border-color: var(--gold); color: var(--gold); font-weight: 500; }

/* görev penceresi */
.qcard { background: var(--wood-lo); border: 2px solid var(--wood); border-radius: 6px; padding: 10px 12px 12px; }
.qcard.ready { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .3); }
.qcard h3 { margin: 2px 0 4px; font: 700 20px var(--f-display); color: var(--gold); }
.qcard p { margin: 0 0 10px; text-wrap: pretty; }
.qmeta { display: flex; justify-content: space-between; font-size: 12px; color: var(--straw-dim); }
.qcard .bar { height: 16px; margin: 0 0 10px; }
.qcard .bar i { background: linear-gradient(90deg, #c99a2e, var(--gold)); }
.qcard .bar .num { position: absolute; inset: 0; text-align: center; font-size: 17px; line-height: 15px; text-shadow: 1px 1px 0 #000; }
.qcard.ready .bar i { background: linear-gradient(90deg, #6fb04a, var(--leaf)); }
.qrew { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; align-items: center; }
.qrew .lbl { font-size: 12px; color: var(--straw-dim); margin-right: 2px; }
.chip.cgold { color: var(--gold); padding-left: 6px; }
.chip.cxp { color: var(--leaf); padding-left: 6px; }
.chip.off { opacity: .55; } .chip.off b { color: #ffb08a; }
.chip .coin { margin-right: 2px; }
.qdlist { display: flex; flex-direction: column; gap: 6px; }
.qdlist .qcard { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 10px; }
.qdlist .qcard h3 { font-size: 16px; margin: 0; }
.qdlist .qcard p { margin: 0; font-size: 13px; color: var(--straw-dim); }
.qdlist .qcard .bar, .qdlist .qcard .qrew { grid-column: 1 / -1; margin: 0; }
.qdlist .qcard.claimed { opacity: .55; }
.qdlist .qcard.claimed h3::before { content: '✓ '; color: var(--leaf); }
.qpast { display: flex; flex-wrap: wrap; gap: 4px; }
.qpast span { font-size: 12px; color: var(--leaf); background: var(--wood-lo); border: 1px solid var(--wood); border-radius: 3px; padding: 1px 6px; }
.qnext { margin-top: 8px; font-size: 13px; color: var(--straw-dim); }
.qreset { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.qsay { font-style: italic; color: var(--straw); border-left: 3px solid var(--wood-hi); padding-left: 8px; }
.qbtns { display: flex; gap: 6px; }
.qbtns .btn.ghost { flex: none; }
.chip.cheart { color: #f08aa0; padding-left: 6px; }
.btn.small { font-size: 12px; padding: 4px 9px; border-bottom-width: 2px; }
.btn.ghost.small { border-width: 1px; }
.hearts { color: #f08aa0; letter-spacing: 1px; font-size: 13px; }
.hearts i { font-style: normal; color: rgba(240, 138, 160, .22); }
/* siparişler */
.qdlist .ocard { grid-template-columns: 1fr auto; }
.ocard .qmeta { justify-content: flex-start; gap: 8px; align-items: center; font-size: 14px; color: var(--straw); }
.ocard .qmeta b { font: 600 16px var(--f-display); color: var(--gold); }
.qdlist .ocard p.qsay { font-size: 13px; margin-top: 2px; }
.obtns { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.qneed { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.chip.need { color: var(--straw-dim); border-style: dashed; }
.chip.need.ok { color: var(--leaf); border-color: var(--leaf); border-style: solid; }
.qdlist .owait { display: block; opacity: .7; border-style: dashed; }
.flist { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 8px; }
.frow { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--wood-lo); border: 1px solid var(--wood); border-radius: 4px; padding: 4px 8px; }
.frow > div { display: flex; flex-direction: column; min-width: 0; }
.frow b { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow .note { font-size: 11px; margin: 0; }
.frow.gift { border-color: var(--gold); }
/* topluluk */
.wbar { height: 20px !important; }
.wbar b { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(0, 0, 0, .45); }
.qcard .wbar .num { font-size: 16px; line-height: 19px; }
.qdlist .tier.reached:not(.ready):not(.claimed) { border-color: var(--wood-hi); }
.qdlist .tier.reached h3::after { content: ' ✓'; color: var(--leaf); font-size: 14px; }
.wtop { margin: 0; padding: 0; list-style: none; counter-reset: wt; display: flex; flex-direction: column; gap: 3px; }
.wtop li { counter-increment: wt; display: flex; gap: 8px; align-items: center; background: var(--wood-lo); border: 1px solid var(--wood); border-radius: 3px; padding: 3px 8px; font-size: 14px; }
.wtop li::before { content: counter(wt) '.'; color: var(--straw-dim); width: 18px; }
.wtop li span { flex: 1; }
.wtop li.me { border-color: var(--gold); color: var(--gold); }
/* başarımlar ve koleksiyon */
.alist { display: flex; flex-direction: column; gap: 4px; }
.acard { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; background: var(--wood-lo); border: 2px solid var(--wood); border-radius: 6px; padding: 6px 10px; }
.acard .at { display: flex; flex-direction: column; min-width: 0; }
.acard .at b { font: 600 15px var(--f-display); color: var(--straw); }
.acard .at span { font-size: 12px; color: var(--straw-dim); }
.acard .bar { height: 12px; margin: 4px 0 0; }
.acard .bar i { background: linear-gradient(90deg, #c99a2e, var(--gold)); }
.acard .bar .num { position: absolute; inset: 0; text-align: center; font-size: 12px; line-height: 11px; text-shadow: 1px 1px 0 #000; }
.acard .qrew { grid-column: 2 / -1; margin: 0; }
.acard.ready { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .3); }
.acard.ready .bar i { background: linear-gradient(90deg, #6fb04a, var(--leaf)); }
.acard.got .at b { color: var(--gold); }
.medal { display: inline-block; width: 22px; height: 22px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 35%, #f6d9b0, #b0703a 60%, #6a3a1a); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3); }
.t2 .medal, .medal.t2 { background: radial-gradient(circle at 35% 35%, #fff, #b8c0c8 60%, #6a7078); }
.t3 .medal, .medal.t3 { background: radial-gradient(circle at 35% 35%, #fff4c0, #f2c14e 55%, #a07020); }
.acard:not(.got):not(.ready) .medal { filter: grayscale(.8) brightness(.6); }
.tlist .medal { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.tlist { display: flex; flex-wrap: wrap; gap: 6px; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.cslot { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--wood-lo); border: 2px solid var(--wood); border-radius: 6px; padding: 6px 4px; font-size: 12px; text-align: center; }
.cslot img { width: 36px; height: 36px; }
.cslot.unk { border-style: dashed; }
.cslot.unk img { filter: brightness(0); opacity: .45; }
.cslot.unk span { color: var(--straw-dim); }
.cslot small { color: var(--leaf); }
.ptitle { color: var(--gold); font-size: 13px; }
.msg.glb i { font-style: normal; font-size: 11px; color: var(--wood-lo); background: var(--leaf); border-radius: 3px; padding: 0 4px; margin-right: 2px; }
#chatForm { display: flex; gap: 6px; align-items: center; }
#chatForm #chatInput { flex: 1; min-width: 0; }
.wtop.rank small { color: var(--gold); font-size: 11px; }
.steps { margin: 8px 0 4px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.steps li b { color: var(--gold); font-weight: 500; }
.btn img.ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }
.item.on { border-color: var(--gold); }
.hbtn.ping { position: relative; border-color: var(--gold); }
/* GM düğmesi (yalnızca GM hesabında; telefonda Menü › GM paneli) */
.hbtn.gmb { color: #ffd84a; background: linear-gradient(180deg, #a3301e, #6e1a0e); border-color: #d9443a; }
/* sunucu olayı */
#eventBar { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: baseline; padding: 6px 10px; margin-top: 6px; max-width: 340px; margin-left: auto; border-color: var(--gold); box-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 14px rgba(242, 193, 78, .35); }
#eventBar b { font: 600 15px var(--f-display); color: var(--gold); }
#eventBar b::before { content: '★ '; }
#evTime { font-size: 18px; color: var(--gold); }
#evText { grid-column: 1 / -1; font-size: 12px; color: var(--straw); text-wrap: pretty; }
#eventBar.pop { animation: lvpop .5s cubic-bezier(.2, 1.5, .4, 1) both; }
@media (max-width: 640px) { #evText { display: none; } #eventBar { padding: 4px 8px; } }
.note.want { color: var(--gold); }
.note.warn { color: #ffb08a; }
.btn.danger { background: #d9443a; color: #fff6e8; border-bottom-color: #8a2a20; }
.item.want { border-color: var(--gold); }
/* giriş ödülü şeridi */
.lstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; }
.lday { background: var(--wood-lo); border: 2px solid var(--wood); border-radius: 6px; padding: 4px; text-align: center; font-size: 12px; }
.lday b { display: block; font-weight: 500; color: var(--straw-dim); }
.lday div { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; }
.lday span { display: inline-flex; align-items: center; gap: 2px; }
.lday img { width: 16px; height: 16px; }
.lday.cur { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .35); }
.lday.cur b { color: var(--gold); }
.lday.done { opacity: .5; }
.lday.done b::after { content: ' ✓'; color: var(--leaf); }
.lday.big { background: linear-gradient(180deg, rgba(242, 193, 78, .18), var(--wood-lo)); }
.hbtn.ping::after { content: ''; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); }

/* seviye atlama */
/* Hasar alınca ekran kenarında kırmızı halka */
#hurtVig { position: fixed; inset: 0; z-index: 24; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(160, 20, 10, 0) 55%, rgba(170, 24, 12, .55) 100%); }
#hurtVig.on { animation: hurtvig .55s ease-out; }
/* Vuranın yönü: ortadan o yöne bakan kırmızı yay (döndürme main.js hitDir) */
#hitDir { position: fixed; left: 50%; top: 50%; width: 0; height: 0; z-index: 23; pointer-events: none; }
#hitDir i { position: absolute; left: -80px; top: calc(-1 * min(36vh, 30vw) - 20px); width: 160px; height: 40px; opacity: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-top: 7px solid #ff3a2a; filter: drop-shadow(0 0 8px rgba(255, 50, 30, .9)); }
#hitDir.on i { animation: hitdir .75s ease-out; }
@keyframes hitdir { 0% { opacity: 1; transform: translateY(-6px) scaleX(1.15); } 100% { opacity: 0; transform: none; } }
@media (prefers-reduced-motion: reduce) { #hitDir.on i { animation-duration: .4s; } }
/* Boss düşünce ekran bir an beyaz parlar */
#flashFx { position: fixed; inset: 0; z-index: 24; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 45%, #fffbe8, rgba(255, 244, 210, .7) 60%, rgba(255, 230, 180, .4)); }
#flashFx.on { animation: flashfx .45s ease-out; }
/* Kritik vuruş ve büyük beceri: ekranın kenarı bir an o renkte parlar (ui.js tintFlash; renk ve güç satır içinde) */
#tintFx { position: fixed; inset: 0; z-index: 24; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse 80% 75% at 50% 50%, rgba(255, 255, 255, 0) 40%, var(--tc, #fff) 115%); }
/* Kombo sayacı: sağ kenarda ortada (üstteki etkinlik şeridinin altında, telefonda Konuş düğmesinin üstünde); her vuruşta zıplar, 10/25/50'de ısınır */
#combo { position: fixed; right: calc(max(14px, env(safe-area-inset-right)) + 6px); top: 42%; z-index: 9; pointer-events: none; display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--f-display); color: #fff3d0; text-shadow: 0 3px 0 #3a1c08, 0 0 2px #3a1c08, 2px 0 0 #3a1c08, -2px 0 0 #3a1c08, 0 -2px 0 #3a1c08; transition: opacity .35s, transform .35s; }
#combo b { font-size: 46px; line-height: 1; font-weight: 400; }
#combo span { font-size: 15px; letter-spacing: .18em; margin-top: 2px; color: #f3e3b5; }
#combo.out { opacity: 0; transform: translateX(14px); }
#combo.pop b { animation: combopop .22s cubic-bezier(.2, 1.6, .4, 1); }
#combo.t2 b { color: #ffd84a; }
#combo.t3 b { color: #ffa53a; filter: drop-shadow(0 0 8px rgba(255, 150, 40, .55)); }
#combo.t4 b { color: #ff6a3a; filter: drop-shadow(0 0 12px rgba(255, 90, 40, .8)); }
/* Hasat serisi: yeşil, uzadıkça altına döner */
#combo.farm b { color: #c8f58a; filter: drop-shadow(0 0 8px rgba(140, 230, 80, .5)); }
#combo.farm.t3 b, #combo.farm.t4 b { color: #ffe36a; filter: drop-shadow(0 0 12px rgba(255, 210, 60, .75)); }
#combo.farm span { color: #e4f5c0; }
@keyframes combopop { 0% { transform: scale(1.45) rotate(-4deg); } 100% { transform: none; } }
body.touch #combo { top: 40%; } body.touch #combo b { font-size: 36px; } body.touch #combo span { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { #combo.pop b { animation: none; } }
/* Can azken: ekranın kenarları kalp atışıyla kırmızı nabız atar */
#lowHp { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 52%, rgba(150, 14, 14, .38) 80%, rgba(170, 18, 18, .7) 100%); }
body.lowhp #lowHp { opacity: 1; animation: lowhp .95s ease-in-out infinite; }
@keyframes lowhp { 0%, 100% { opacity: .55; } 12% { opacity: 1; } 26% { opacity: .7; } 40% { opacity: .95; } }
/* "Ye" düğmesi: can azalınca belirir; bilgisayarda araç çubuğunun sağında (Z), telefonda Kullan'ın üstünde */
#btnEat { position: fixed; right: 18px; bottom: calc(var(--safe-b) + 76px); z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: 0; line-height: 1; background: linear-gradient(180deg, #ffe1b8, #f2a868); border-color: #a8562a; color: #4a1e08; }
#btnEat.hidden { display: none; }
#btnEat img { width: 26px; height: 26px; }
#btnEat span { font-size: 11px; margin-top: 1px; }
#btnEat kbd { position: absolute; top: -4px; right: -4px; font: 700 10px var(--f-display); padding: 1px 4px; border-radius: 4px; background: #2a1a0e; color: var(--straw); }
body.touch #btnEat kbd { display: none; }
body.touch #btnEat { right: calc(max(14px, env(safe-area-inset-right)) + 9px); bottom: 92px; }
body.lowhp #btnEat { animation: eatpulse .95s ease-in-out infinite; }
@keyframes eatpulse { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.12); box-shadow: 0 0 0 4px rgba(255, 120, 80, .45), 0 3px 0 rgba(0, 0, 0, .35); } }
@media (prefers-reduced-motion: reduce) { body.lowhp #lowHp { animation: none; opacity: .8; } body.lowhp #btnEat { animation: none; } }
@keyframes flashfx { from { opacity: .85; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #flashFx.on { animation-duration: .2s; } }
@keyframes hurtvig { 0% { opacity: 1; } 100% { opacity: 0; } }
/* Seviye atlama: ekranın üstünde küçük bir kart (oyun görünmeye devam eder): parlayan yıldız rozet, başlık, kazanımlar,
   karttan saçılan birkaç konfeti. Karakterin başında ışık halkası ve "Seviye n!" yazısı main.js'ten */
#lvup { position: fixed; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 84px); z-index: 28; transform: translateX(-50%); pointer-events: none;
  width: max-content; max-width: calc(100vw - 24px); animation: lvfade 3.8s ease-in forwards; }
.lvcard { position: relative; display: grid; grid-template-columns: auto minmax(0, auto); align-items: center; gap: 4px 12px; padding: 10px 18px 10px 10px;
  background: linear-gradient(180deg, rgba(78, 50, 26, .97), rgba(38, 24, 12, .97)); border: 2px solid var(--gold); border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 22px rgba(242, 193, 78, .35); animation: lvslide .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.lvstar { grid-row: span 2; position: relative; width: 62px; height: 62px; display: grid; place-items: center; animation: lvpop .7s cubic-bezier(.2, 1.6, .4, 1) .1s both; }
.lvstar::before, .lvstar::after, .lvstar .shine { content: ''; position: absolute; inset: 0; clip-path: polygon(50% 0, 61% 25%, 85% 15%, 78% 41%, 100% 55%, 75% 66%, 79% 92%, 55% 81%, 36% 100%, 30% 75%, 4% 75%, 18% 54%, 0 33%, 26% 30%, 28% 4%); }
.lvstar::before { background: #4a2f0a; transform: scale(1.08); }
.lvstar::after { inset: 3px; background: radial-gradient(circle at 42% 34%, #fff6c0 0, #ffd96f 30%, var(--gold) 55%, #c98a22 100%); }
.lvstar .lvnum { position: relative; z-index: 1; font: 700 26px/1 var(--f-display); color: #fff8e0; text-shadow: -2px 0 0 #6a3a0a, 2px 0 0 #6a3a0a, 0 -2px 0 #6a3a0a, 0 2px 0 #6a3a0a; }
.lvstar .shine { inset: 3px; z-index: 2; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .8) 48%, transparent 60%); background-size: 260% 100%; animation: starshine 1.4s ease-in-out .6s both; }
@keyframes starshine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.lvribbon { font: 700 18px var(--f-display); color: var(--gold); text-shadow: 0 2px 0 #2a1a0e; animation: drop .45s cubic-bezier(.2, 1.4, .4, 1) .25s both; }
#lvGains { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
#lvGains li { font: 600 13px var(--f-display); padding: 2px 8px; border-radius: 6px; color: #2a1a0e; background: linear-gradient(180deg, #f8ebc4, #e8d49c); border: 1px solid #5a3a20; animation: chippop .4s cubic-bezier(.2, 1.6, .4, 1) both; }
#lvGains li::before { content: '▲ '; color: #4a8a2a; }
#lvGains li.big { background: linear-gradient(180deg, #ffe08a, var(--gold)); }
#lvGains li.big::before { content: '★ '; color: #8a4a0a; }
#confetti { position: absolute; left: 50%; top: 40%; width: 0; height: 0; }
#confetti i { position: absolute; left: 0; top: 0; width: 6px; height: 9px; border-radius: 1px; }
#confetti i.st { width: 9px; height: 9px; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes lvslide { from { transform: translateY(-26px) scale(.9); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes lvpop { from { transform: scale(.1) rotate(-12deg); opacity: 0; } }
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } }
@keyframes lvfade { 0%, 84% { opacity: 1; } 100% { opacity: 0; } }

/* görev ödülü */
#qdone { position: fixed; left: 50%; top: 14vh; transform: translateX(-50%); z-index: 27; pointer-events: none; animation: lvfade 2.8s ease-in forwards; }
.qd-in { padding: 10px 22px 12px; text-align: center; border-color: var(--gold); box-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 30px rgba(242, 193, 78, .45); animation: lvpop .5s cubic-bezier(.2, 1.5, .4, 1) both; }
.qd-small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); }
.qd-title { font: 700 24px var(--f-display); color: var(--gold); margin: 2px 0 6px; }
.qd-rew { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.flycoin { position: fixed; z-index: 29; width: 12px; height: 12px; background: var(--gold); box-shadow: inset -2px -2px 0 #a87a22, 0 0 6px rgba(242, 193, 78, .8); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #questBox.ready { animation: none; } #confetti { display: none; } }
@keyframes pop { from { transform: translateY(-6px); opacity: 0; } }

/* pencereler */
#modal { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 12px; background: rgba(15, 10, 6, .55); z-index: 25; } /* sütun içeriğe göre büyümesin (tek satırlık uzun yazılar) */
/* Görünüm penceresi geniş ekranda sağda durur, arka plan karartılmaz: karakter ortada canlı değişir */
/* Yan panel (oyuncu kartı): sağ üstte, arka plan kararmaz, oyun sürer. Dikey telefonda alttan çıkar */
#modal.dock { place-items: start end; padding: calc(max(8px, env(safe-area-inset-top)) + 96px) max(12px, env(safe-area-inset-right)) 12px 12px; background: none; pointer-events: none; }
#modal.dock .win { pointer-events: auto; width: min(340px, 46vw); max-height: calc(100dvh - 210px); }
#modal.dock:not(.hidden) .win { animation: dockin .22s ease-out; }
#modal.dock .win .row-btns .btn { flex: 1 1 calc(50% - 6px); }
@keyframes dockin { from { transform: translateX(24px); opacity: 0; } }
@media (max-height: 520px) { #modal.dock { padding-top: 52px; } #modal.dock .win { max-height: calc(100dvh - 140px); } }
@media (max-aspect-ratio: 3/4) { #modal.dock { place-items: end center; padding: 12px 10px 110px; } #modal.dock .win { width: 100%; max-height: 46dvh; } }
@media (min-width: 900px) { #modal.side { place-items: center end; padding-right: 24px; background: none; pointer-events: none; } #modal.side .win { pointer-events: auto; width: min(400px, 38vw); } }
.win { width: min(640px, 100%); max-height: min(86vh, 720px); display: flex; flex-direction: column; }
.win header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 6px; border-bottom: 2px solid var(--wood); }
.win h2 { margin: 0; font: 700 22px var(--f-display); color: var(--gold); }
.x { background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--straw-dim); padding: 2px 6px; }
#mBody { padding: 10px 12px 14px; overflow: auto; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.tabs button { font: 600 14px var(--f-display); background: var(--wood-lo); color: var(--straw); border: 2px solid var(--wood-hi); border-radius: 4px; padding: 5px 12px; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--gold); color: var(--wood-lo); border-color: var(--gold); }
@media (max-width: 480px) { .tabs { gap: 3px; } .tabs button { font-size: 13px; padding: 5px 7px; } }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; }
/* Çanta: ilk satır tam araç çubuğu (10 yuva); dar ekranda 5'erli, araç çubuğu iki satır */
.grid.bag { grid-template-columns: repeat(10, minmax(0, 1fr)); }
@media (max-width: 620px) { .grid.bag { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.grid .slot { width: auto; aspect-ratio: 1; height: auto; }
.list { display: flex; flex-direction: column; gap: 4px; }
.item { display: flex; align-items: center; gap: 10px; background: var(--wood-lo); border: 2px solid var(--wood); border-radius: 4px; padding: 5px 8px; }
.item img { width: 32px; height: 32px; flex: none; }
.item .t { flex: 1; min-width: 0; }
.item .t b { display: block; font-weight: 500; }
.item .t span { font-size: 12px; color: var(--straw-dim); }
.item .p { font: 800 15px/1 var(--f-data); color: var(--gold); white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--straw-dim); margin-right: 4px; }
.dot.on { background: var(--leaf); }
.note { font-size: 13px; color: var(--straw-dim); margin: 0 0 8px; text-wrap: pretty; }
.form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: end; margin-top: 8px; }
.form label { font-size: 12px; color: var(--straw-dim); display: flex; flex-direction: column; gap: 2px; }
.form input { font: 700 15px var(--f-data); color: var(--straw); background: var(--wood-lo); border: 2px solid var(--wood-hi); border-radius: 4px; padding: 4px 6px; width: 100%; }
.sub { margin: 10px 0 6px; font: 600 14px var(--f-display); color: var(--straw-dim); }
.item.wrap { flex-wrap: wrap; }
.inp { flex: 1; min-width: 140px; font: 600 16px var(--f-display); color: var(--straw); background: var(--wood-lo); border: 2px solid var(--wood-hi); border-radius: 4px; padding: 5px 8px; }
.item.wrap .t { flex-basis: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
/* Ekipman (çantanın üstünde ve Karakter penceresinde): dört yuva, toplam etkisi; yuva çerçevesi eşyanın seviyesine göre renkli */
.equip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; padding: 8px; border-radius: 8px; background: rgba(0, 0, 0, .22); border: 1px solid var(--wood-hi); }
.eqs { display: grid; justify-items: center; gap: 1px; width: 56px; padding: 4px 2px 3px; cursor: pointer; font: 600 11px var(--f-display); color: var(--straw-dim); background: rgba(20, 12, 6, .6); border: 2px dashed rgba(201, 182, 138, .35); border-radius: 8px; }
.eqs img { width: 32px; height: 32px; }
.eqs:not([class*=" t"]) { cursor: default; }
.eqh { width: 32px; height: 32px; opacity: .28; background: var(--straw); -webkit-mask: var(--m) center / 26px no-repeat; mask: var(--m) center / 26px no-repeat; }
.eqh.ear { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1h2v1h1v3H9V3H7v2H6V2h1zM7 6h2v2h1v4l-2 3-2-3V8h1z'/%3E%3C/svg%3E"); }
.eqh.hand { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3h2v4h1V2h2v5h1V3h2v6l1-2h2l-2 5-2 2H5l-2-3zM5 14h6v2H5z'/%3E%3C/svg%3E"); }
.eqh.head { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 10a6 6 0 0 1 12 0v2H9V9H7v3H2z'/%3E%3C/svg%3E"); }
.eqh.body { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 1h6l4 3-2 3-1-1v9H4V6L3 7 1 4z'/%3E%3C/svg%3E"); }
.eqh.feet { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h5v8l5 2v3H3z'/%3E%3C/svg%3E"); }
.eqs.t1, .slot.t1 { border: 2px solid #b8b0a0; } .eqs.t2, .slot.t2 { border: 2px solid #5aa8ff; box-shadow: inset 0 0 8px rgba(90, 168, 255, .35); }
.eqs.t3, .slot.t3 { border: 2px solid #c07aff; box-shadow: inset 0 0 8px rgba(192, 122, 255, .4); } .eqs.t4, .slot.t4 { border: 2px solid #ffa53a; box-shadow: inset 0 0 10px rgba(255, 165, 58, .5); }
.eqsum { flex: 1 1 160px; font-size: 13px; color: var(--straw); } .eqsum small { color: var(--straw-dim); }
/* Üretim penceresi (ui.js openCraft): arama, kategoriler, makinenin ne yaptığı */
.crq { width: 100%; min-height: 42px; margin-bottom: 8px; padding: 6px 12px; font: 600 16px var(--f-display); color: var(--straw); background: var(--wood-lo); border: 2px solid var(--wood-hi); border-radius: 8px; }
.crq:focus { outline: 2px solid var(--gold); }
.crcats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; } .crcats .btn { padding: 5px 10px; font-size: 14px; }
.crow .t .tag { font-style: normal; font-size: 12px; margin-left: 4px; padding: 0 5px; border-radius: 4px; background: rgba(0, 0, 0, .3); color: var(--straw-dim); }
.lnkb { display: inline-block; margin-top: 3px; padding: 2px 0; cursor: pointer; font: 600 13px var(--f-display); color: #9ad0f4; background: none; border: 0; text-decoration: underline; }
.crwhat { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .crwhat .chip { font-size: 12px; } .crwhat img { width: 16px; height: 16px; }
.favd { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; background: rgba(0, 0, 0, .22); border: 1px solid var(--wood-hi); }
.favd summary { cursor: pointer; font-size: 15px; color: var(--gold); } .favd ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; } .favd b { color: var(--straw); }
/* Karakter penceresi (ui.js openStats): özellikler ve meslekler */
.stathead { display: grid; gap: 3px; margin-bottom: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, .22); border: 1px solid var(--wood-hi); }
.stathead b { font-size: 20px; color: var(--gold); } .stathead span { color: var(--straw-dim); } .stathead small { color: var(--straw-dim); font-size: 14px; }
.bar.sk { height: 10px; margin: 4px 0 2px; } .bar.sk i { background: linear-gradient(90deg, #4a9ad9, #8fd0ff); }
.stv { font-size: 22px; color: var(--gold); white-space: nowrap; }
.skmini { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.skmini span { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; background: rgba(0, 0, 0, .2); }
.skmini img, .skh img, .skrec img { width: 22px; height: 22px; image-rendering: pixelated; } .skmini b { margin-left: auto; color: var(--gold); }
.sklist { display: grid; gap: 8px; }
.skill { padding: 9px 11px; border-radius: 8px; background: rgba(0, 0, 0, .2); border: 1px solid var(--wood-hi); }
.skh { display: flex; align-items: center; gap: 8px; } .skh b { font-size: 17px; } .skh span { margin-left: auto; font-size: 20px; color: var(--gold); }
.skill small { display: block; color: var(--straw-dim); font-size: 12px; }
.perks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13px; color: rgba(243, 227, 181, .45); }
.perks li b { display: inline-block; min-width: 24px; color: rgba(242, 193, 78, .45); } .perks li.on { color: var(--straw); } .perks li.on b { color: var(--gold); } .perks li.on::after { content: ' ✓'; color: var(--leaf); }
.skrec { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .skrec .chip { opacity: .5; } .skrec .chip.on { opacity: 1; border-color: var(--leaf); } .skrec .chip i { font-style: normal; color: var(--gold); }
.item.locked { opacity: .62; } .lockreq { display: block; color: #ffb08a; font-size: 12px; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--wood-lo); border: 1px solid var(--wood-hi); border-radius: 3px; padding: 2px 6px 2px 2px; font-size: 13px; }
.chip img { width: 20px; height: 20px; }
button.item { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
button.item.on { border-color: var(--gold); }
.ok { color: var(--leaf); }
.bad { color: var(--rust); }
.row-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.desc { min-height: 38px; font-size: 13px; color: var(--straw-dim); margin-top: 8px; }

@media (max-width: 1280px) { .hbtn kbd { display: none; } }
@media (max-width: 900px) { body:not(.touch) #bossBar { top: max(160px, calc(env(safe-area-inset-top) + 150px)); } }
/* Dokunmatik ekranda sağ üstte yalnızca Çanta ve Menü; görevler sol üstteki kutudan açılır */
body.touch #bChar, body.touch #bQuest, body.touch #bAch, body.touch #bRanks, body.touch #bCraft, body.touch #bHome, body.touch #bChat, body.touch #bFriends, body.touch #bEmote, body.touch #bSet, body.touch #bGm { display: none; }
body.touch #bMenu { display: block; }
@media (max-width: 640px) {
  #leftcol { width: 168px; }
  #status { padding: 6px 8px; }
  #questBox { padding: 5px 8px 6px; }
  #qTitle { font-size: 13px; }
  body.boss #questBox { display: none; }
  #clock { font-size: 17px; }
  .slot { width: 40px; height: 40px; }
  .slot img { width: 28px; height: 28px; }
  #hotbar .slot:nth-child(n+9) { display: none; }
  #rightcol { max-width: calc(100vw - 196px); }
  #bossBar { top: max(160px, calc(env(safe-area-inset-top) + 150px)); }
  #bChar, #bQuest, #bAch, #bRanks, #bCraft, #bHome, #bChat, #bFriends, #bEmote, #bSet, #bGm { display: none; }
  #bMenu { display: block; }
  .hbtn { padding: 5px 7px; font-size: 13px; }
  #visitBar { flex-wrap: wrap; gap: 6px; padding: 5px 8px; }
  #visitText { font-size: 13px; }
  .form { grid-template-columns: 1fr 1fr; }
}
/* Görünüm penceresinde renk kutuları */
/* Telefonu çevir kartı (dikey tutulunca) */
#rotate { z-index: 40; }
.rot { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rot p { margin: 0; }
.rot b { font: 700 20px var(--f-display); color: var(--gold); }
.rot-ico { width: 44px; height: 72px; border: 4px solid var(--straw); border-radius: 9px; position: relative; animation: rotph 2.4s ease-in-out infinite; }
.rot-ico::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--straw); }
@keyframes rotph { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { .rot-ico { animation: none; transform: rotate(-90deg); } }
/* Giriş ve bağlantı kartları kısa ekranda kaydırılabilir */
.screen { overflow-y: auto; }
/* Yatay telefon (kısa ekran): sol sütun daralır, joystick sol altta, düğmeler sağ altta, araç çubuğu küçülür,
   sohbet üst ortada; çentikli telefonlarda yan güvenli alanlar gözetilir */
@media (orientation: landscape) and (max-height: 540px) {
  .screen { place-items: start center; padding: 10px; }
  .card { padding: 14px 18px; }
  #leftcol { width: 176px; gap: 4px; top: max(6px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); }
  #status { padding: 5px 8px; }
  #clock { font-size: 16px; }
  #questBox { padding: 4px 8px 5px; }
  #qTitle { font-size: 13px; }
  .qdaily, .qhint { font-size: 11px; }
  #rightcol { top: max(6px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); max-width: calc(100vw - 210px); }
  #evText { display: none; }
  #eventBar { padding: 4px 8px; }
  #hint { bottom: calc(var(--safe-b) + 54px); }
  #bossBar { top: max(8px, env(safe-area-inset-top)); width: min(300px, calc(100vw - 440px)); }
  #modal { padding: 6px; }
  .win { max-height: calc(100vh - 12px); }
  body.touch #joy { left: max(14px, env(safe-area-inset-left)); bottom: 10px; width: 110px; height: 110px; }
  body.touch #knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  body.touch #actions { right: max(14px, env(safe-area-inset-right)); bottom: 10px; gap: 8px; }
  body.touch .round { width: 72px; height: 72px; font-size: 15px; }
  body.touch .round.small { width: 54px; height: 54px; font-size: 12px; }
  body.touch #hotbar { bottom: 4px; }
  body.touch #hotbar .slot { width: 40px; height: 40px; }
  body.touch #hotbar .slot img { width: 28px; height: 28px; }
  body.touch #chatLog { left: 196px; top: max(8px, env(safe-area-inset-top)); bottom: auto; width: min(340px, calc(100vw - 440px)); }
}
.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.sw { width: 28px; height: 28px; border-radius: 6px; border: 2px solid rgba(20, 12, 6, .7); cursor: pointer; padding: 0; }
.sw.on { outline: 3px solid #f2c14e; outline-offset: 1px; }
body.touch .sw { width: 34px; height: 34px; }

/* Varış: sinema şeridi (üstte ve altta kara bant, altta yazı), NPC konuşma kutusu */
#cine { position: fixed; inset: 0; z-index: 24; pointer-events: none; }
#cine .bar { position: absolute; left: 0; right: 0; height: 13vh; background: #0d0905; transition: transform .6s ease; }
#cine .top { top: 0; } #cine .bot { bottom: 0; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 20px var(--safe-b); }
#cine.off .top { transform: translateY(-100%); } #cine.off .bot { transform: translateY(100%); }
#cineText { margin: 0; font: 600 clamp(16px, 2.4vw, 24px) var(--f-display); color: var(--straw); text-align: center; text-wrap: balance; }
#cineSkip { pointer-events: auto; position: absolute; right: 18px; }
body.cine #hud { visibility: hidden; }
#talk { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 18px); transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); padding: 12px 16px 14px; z-index: 27; }
#talk b { display: inline-block; font: 700 13px var(--f-display); color: var(--wood-lo); background: var(--gold); border-radius: 3px; padding: 2px 8px; }
#talk p { margin: 8px 0 12px; font-size: 17px; text-wrap: pretty; }
#talk .row-btns { justify-content: flex-end; }

/* Öğretici: altta adım kartı, işaretlenen düğmenin çevresinde parlayan halka */
#tut { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 92px); transform: translateX(-50%); width: min(520px, calc(100vw - 24px)); padding: 10px 14px 12px; z-index: 23; }
#tut .tstep { font-size: 15px; color: var(--gold); }
#tut .ttext { margin: 4px 0 10px; font-size: 16px; text-wrap: pretty; }
#tut .row-btns { justify-content: flex-end; gap: 6px; }
#tut .btn.small, #tut .btn.ghost.small { padding: 4px 10px; font-size: 13px; }
#tutRing { position: fixed; display: none; z-index: 22; pointer-events: none; border: 3px solid var(--gold); border-radius: 8px; box-shadow: 0 0 0 3px rgba(42,26,14,.6), 0 0 18px rgba(242,193,78,.8); animation: tutPulse 1.1s ease-in-out infinite; }
@keyframes tutPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .65; } }
@media (prefers-reduced-motion: reduce) { #tutRing { animation: none; } }
body.cine #tut { display: none; }
/* Rehber kitabı */
.guide { font-size: 15px; line-height: 1.45; }
.guide ul { margin: 8px 0; padding-left: 18px; } .guide li { margin: 6px 0; text-wrap: pretty; } .guide p { text-wrap: pretty; }

/* ==========================================================================================================
   Tema katmanı (dilim 38): ahşap çerçeveli piksel paneller, tıknaz düğmeler, canlı pencereler ve ödül anları.
   Yukarıdaki temel kuralların üstüne yazar; renkler aynı palet.
   ========================================================================================================== */
:root { --frame: #1a100a; --plank-hi: #8a5a34; --plank: #5a3a20; --plank-lo: #3a2412; --shine: rgba(255, 236, 190, .14); }
.panel {
  background: linear-gradient(180deg, rgba(78, 50, 28, .97), rgba(50, 31, 17, .97));
  border: 2px solid var(--frame); border-radius: 5px;
  box-shadow: inset 0 0 0 2px var(--plank-hi), inset 0 3px 0 2px var(--shine), 0 3px 0 #120b06, 0 8px 18px rgba(0, 0, 0, .32);
}
/* Köşe çivileri: üst bardaki paneller ve pencereler */
#status::before, #status::after, .win::before, .win::after, #qdone .qd-in::before, #qdone .qd-in::after {
  content: ''; position: absolute; top: 5px; width: 4px; height: 4px; background: #c9a46a; box-shadow: 1px 1px 0 #2a1a0e; pointer-events: none;
}
#status::before, .win::before, #qdone .qd-in::before { left: 5px; }
#status::after, .win::after, #qdone .qd-in::after { right: 5px; }
.win { position: relative; }

/* Düğmeler: altın düğme ışıltılı ve basılınca çöker; ahşap düğmeler kalkar, basılır */
.btn {
  background: linear-gradient(180deg, #ffd96f, var(--gold) 52%, #dba23a); border: 2px solid #5a3a12; border-bottom-width: 4px; border-radius: 4px;
  box-shadow: inset 0 1px 0 #fff4c4, 0 2px 0 rgba(0, 0, 0, .25); text-shadow: 0 1px 0 rgba(255, 244, 196, .5); transition: transform .08s, filter .15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.08) saturate(1.05); }
.btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; box-shadow: inset 0 1px 0 #fff4c4; }
.btn.ghost { background: linear-gradient(180deg, #6a4426, #4a2f1a); color: var(--straw); border: 2px solid var(--frame); border-bottom-width: 4px; box-shadow: inset 0 0 0 1px #9a6a3e; text-shadow: none; }
.btn.ghost.small, .btn.small { border-bottom-width: 3px; }
.hbtn {
  background: linear-gradient(180deg, #6a4426, #4a2f1a); border: 2px solid var(--frame); border-radius: 4px;
  box-shadow: inset 0 0 0 1px #9a6a3e, inset 0 2px 0 1px var(--shine), 0 3px 0 #120b06; transition: transform .08s, filter .15s;
}
.hbtn:hover { filter: brightness(1.16); transform: translateY(-1px); }
.hbtn:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px #9a6a3e, 0 1px 0 #120b06; }
.hbtn kbd { color: var(--gold); }

/* Üst panel: altın sayacı, seviye rozeti, deneyim çubuğu parıltısı */
.gold b { transition: color .2s; }
.gold.tick b { color: #fff3b0; text-shadow: 0 0 8px rgba(242, 193, 78, .9); }
.gold.tick .coin { animation: coinhop .35s ease-out; }
@keyframes coinhop { 40% { transform: translateY(-5px) rotate(20deg); } }
#lvl { font-size: 12px; color: var(--wood-lo); background: linear-gradient(180deg, #b8f08a, var(--leaf)); border: 1px solid #2a4a12; border-radius: 3px; padding: 0 6px; box-shadow: inset 0 1px 0 #e4ffc8; white-space: nowrap; flex: none; }
.bar { border: 1px solid var(--frame); box-shadow: inset 0 0 0 1px rgba(122, 81, 48, .6); }
.bar i { transition: width .55s cubic-bezier(.2, .9, .3, 1); }
.bar.xp { height: 8px; }
.bar.xp i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); background-size: 200% 100%; background-position: 200% 0; }
.bar.xp.gain i::after { animation: shimmer .8s ease-out; }
@keyframes shimmer { to { background-position: -100% 0; } }
#questBox { position: relative; }
#questBox:hover { filter: brightness(1.08); }

/* Araç çubuğu: ahşap kutular, seçili yuva kalkık ve ışıltılı; eşya gelince yuva zıplar */
#hotbar { gap: 4px; padding: 6px; }
.slot { background: linear-gradient(180deg, #2e1d10, #24170d); border: 2px solid var(--frame); box-shadow: inset 0 0 0 1px #5a3a20, inset 0 -3px 0 rgba(0, 0, 0, .25); transition: transform .12s, box-shadow .15s; }
.slot:hover { transform: translateY(-2px); }
.slot.sel { border-color: #5a3a12; transform: translateY(-4px); box-shadow: inset 0 0 0 2px var(--gold), 0 0 12px rgba(242, 193, 78, .65), 0 4px 0 #120b06; background: linear-gradient(180deg, #4a3016, #2e1d10); }
.slot.bump, .hbtn.bump { animation: slotbump .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes slotbump { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-9px) scale(1.14); box-shadow: inset 0 0 0 2px var(--leaf), 0 0 16px rgba(143, 207, 90, .8); } 100% { transform: translateY(0) scale(1); } }
.slot .plus { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); font: 900 15px/1 var(--f-data); color: #c8ff9a; text-shadow: 1px 1px 0 #000, 0 0 6px rgba(143, 207, 90, .8); pointer-events: none; animation: plusup .9s ease-out forwards; }
@keyframes plusup { from { opacity: 0; transform: translate(-50%, 6px); } 20% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -22px); } }
.flyitem { position: fixed; z-index: 29; width: 30px; height: 30px; margin: -15px 0 0 -15px; pointer-events: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)) drop-shadow(0 0 6px rgba(255, 236, 160, .8)); }

/* Bildirimler: simgeli parşömen şeritler, yukarıdan iner, kaybolurken kalkar */
.toast {
  display: flex; align-items: center; gap: 8px; text-align: left; color: #2a1a0e; font-weight: 500;
  background: linear-gradient(180deg, #f8ebc4, #e8d49c); border: 2px solid #5a3a20; border-radius: 4px; padding: 5px 12px 5px 8px;
  box-shadow: inset 0 0 0 1px #fff6d8, 0 3px 0 rgba(26, 16, 10, .6); animation: toastin .32s cubic-bezier(.2, 1.4, .4, 1);
}
.toast .ti { flex: none; width: 16px; height: 16px; display: grid; place-items: center; font: 700 13px/1 var(--f-display); color: #fff; border-radius: 3px; background: #7a5130; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.toast.good .ti { background: var(--gold); color: #5a3a12; }
.toast.good .ti::before { content: '+'; }
.toast.warn { background: linear-gradient(180deg, #f6d8c4, #e6b49a); border-color: #6a2a12; }
.toast.warn .ti { background: var(--rust); }
.toast.warn .ti::before { content: '!'; }
.toast.quest { color: #4a2f0a; border-color: #8a5a12; }
.toast.quest .ti { background: var(--leaf); color: #1a3a0a; }
.toast.quest .ti::before { content: '★'; }
.toast:not(.good):not(.warn):not(.quest) .ti::before { content: '•'; }
.toast.out { animation: toastout .35s ease-in forwards; }
@keyframes toastin { from { transform: translateY(-14px) scale(.92); opacity: 0; } }
@keyframes toastout { to { transform: translateY(-10px); opacity: 0; } }

/* Pencereler: açılırken büyüyerek gelir; başlık tahta levha, sekmeler kalkık */
#modal:not(.hidden) .win { animation: winpop .26s cubic-bezier(.2, 1.3, .4, 1); }
#modal:not(.hidden) { animation: dimin .2s ease-out; }
@keyframes winpop { from { transform: translateY(10px) scale(.94); opacity: 0; } }
@keyframes dimin { from { background: rgba(15, 10, 6, 0); } }
.win header { background: linear-gradient(180deg, #6a4426, #4e321b); border-bottom: 2px solid var(--frame); box-shadow: inset 0 -1px 0 #9a6a3e, inset 0 2px 0 var(--shine); border-radius: 3px 3px 0 0; margin: 2px 2px 0; padding: 9px 14px 8px; }
.win h2 { text-shadow: 0 2px 0 #2a1a0e, 0 0 10px rgba(242, 193, 78, .35); letter-spacing: .02em; }
.x { width: 30px; height: 30px; display: grid; place-items: center; color: var(--straw); background: linear-gradient(180deg, #8a3a22, #6a2a16); border: 2px solid var(--frame); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 200, 170, .35), 0 2px 0 #120b06; font-size: 18px; line-height: 1; }
.x:hover { filter: brightness(1.15); }
.tabs button { background: linear-gradient(180deg, #4a2f1a, #3a2412); border: 2px solid var(--frame); box-shadow: inset 0 0 0 1px #6a4426; transition: transform .1s, filter .15s; }
.tabs button:hover { filter: brightness(1.15); }
.tabs button[aria-selected="true"] { background: linear-gradient(180deg, #ffd96f, var(--gold)); color: var(--wood-lo); border-color: #5a3a12; box-shadow: inset 0 1px 0 #fff4c4, 0 2px 0 #120b06; transform: translateY(-2px); }
.item { background: linear-gradient(180deg, #2e1d10, #26180d); border-color: #4a2f1a; transition: border-color .15s, transform .1s; }
.item:hover { border-color: var(--plank-hi); }

/* Görev pankartı: kurdele, büyük başlık, sırayla gelen ödüller, çevresinde yıldızlar */
#qdone .qd-in { position: relative; min-width: 260px; padding: 26px 26px 14px; border-color: #5a3a12; box-shadow: inset 0 0 0 2px var(--gold), inset 0 3px 0 2px var(--shine), 0 3px 0 #120b06, 0 0 40px rgba(242, 193, 78, .5); }
#qdone .qd-small { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); white-space: nowrap; padding: 4px 22px; font: 700 13px var(--f-display); letter-spacing: .14em; color: #2a1a0e;
  background: linear-gradient(180deg, #b8f08a, #6fb04a); border: 2px solid #1a3a0a; clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); }
#qdone .qd-title { font-size: 28px; text-shadow: 0 2px 0 #2a1a0e, 0 0 16px rgba(242, 193, 78, .6); }
#qdone .qd-rew .chip { animation: chippop .4s cubic-bezier(.2, 1.6, .4, 1) both; }
#qdone .qd-rew .chip:nth-child(1) { animation-delay: .35s; } #qdone .qd-rew .chip:nth-child(2) { animation-delay: .5s; }
#qdone .qd-rew .chip:nth-child(3) { animation-delay: .65s; } #qdone .qd-rew .chip:nth-child(4) { animation-delay: .8s; }
@keyframes chippop { from { transform: scale(.2); opacity: 0; } }
.spark { position: absolute; width: 10px; height: 10px; background: #fff3b0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); pointer-events: none; animation: twinkle 1.1s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(255, 220, 120, .9)); }
@keyframes twinkle { 0%, 100% { transform: scale(.3) rotate(0); opacity: .2; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }

/* Dilim 39: deneyim balonu, başarım kartı */
.delta.xp { left: auto; right: 10px; top: auto; bottom: 0; font-size: 16px; color: #c8ff9a; text-shadow: 1px 1px 0 #000, 0 0 6px rgba(143, 207, 90, .7); }
.toast.ach { pointer-events: auto; cursor: pointer; position: relative; overflow: hidden; padding: 7px 16px 7px 9px; gap: 10px;
  background: linear-gradient(180deg, #ffe9a8, #f2c14e); border-color: #5a3a12; box-shadow: inset 0 0 0 1px #fff4c4, 0 3px 0 rgba(26, 16, 10, .6), 0 0 18px rgba(242, 193, 78, .55);
  animation: achin .5s cubic-bezier(.2, 1.5, .4, 1); }
.toast.ach .medal { width: 30px; height: 30px; display: grid; place-items: center; font: 700 16px/1 var(--f-display); font-style: normal; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 0 rgba(0, 0, 0, .4); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3), 0 0 0 2px #5a3a12; animation: medalspin .9s ease-out .15s both; }
.toast.ach small { display: block; font-size: 11px; letter-spacing: .06em; color: #6a4a12; }
.toast.ach b { display: block; font: 700 17px/1.15 var(--f-display); color: #2a1a0e; }
.toast.ach::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); background-size: 250% 100%; animation: starshine 1.2s ease-in-out .35s both; pointer-events: none; }
.toast.ach:hover { filter: brightness(1.06); }
.toast.ach.out { animation: toastout .35s ease-in forwards; }
@keyframes achin { from { transform: translateY(-18px) scale(.7); opacity: 0; } }
@keyframes medalspin { from { transform: rotateY(540deg) scale(.4); } }

/* Dilim 40: posta kutusu. Zarf simgesi kodla çizilir (kâğıt, kapak çizgisi, mühür) */
.env { position: relative; display: inline-block; flex: none; width: 18px; height: 14px; background: linear-gradient(180deg, transparent 72%, #d9c48e 72%), #f8ebc4; border: 2px solid #3a2410; border-radius: 2px; box-sizing: border-box; }
.env::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: linear-gradient(to bottom right, transparent 46%, #8a6a3a 47%, #8a6a3a 56%, transparent 57%) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent 46%, #8a6a3a 47%, #8a6a3a 56%, transparent 57%) right / 50% 100% no-repeat; }
.env::after { content: ''; position: absolute; left: 50%; top: 4px; width: 5px; height: 4px; margin-left: -2.5px; background: #c8402a; box-shadow: inset 1px 1px 0 #ff7a5a; }
#mailChip { display: flex; align-items: center; gap: 7px; padding: 6px 10px; font: 600 14px var(--f-display); color: var(--straw); cursor: pointer; border-color: var(--gold); text-align: left; }
#mailChip b { font-size: 20px; line-height: 1; color: var(--gold); }
#mailChip .env { animation: envwig 3.2s ease-in-out infinite; }
#mailChip.ring { animation: slotbump .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes envwig { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(-14deg) translateY(-2px); } 90% { transform: rotate(12deg) translateY(-2px); } 94% { transform: rotate(-6deg); } }
.hbtn.has, #bMenu.has { position: relative; }
.hbtn.has::after { content: ''; position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: #e0503a; border: 2px solid #2a1a0e; box-shadow: 0 0 6px rgba(224, 80, 58, .8); }
.nbadge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #e0503a; color: #fff; font-size: 15px; line-height: 18px; text-align: center; vertical-align: 1px; }
.toast.mail .ti { background: #f8ebc4; box-shadow: none; }
.toast.mail .ti::before { content: ''; width: 12px; height: 9px; background: linear-gradient(to bottom right, transparent 45%, #8a6a3a 46%, #8a6a3a 58%, transparent 59%) left / 50% 60% no-repeat, linear-gradient(to bottom left, transparent 45%, #8a6a3a 46%, #8a6a3a 58%, transparent 59%) right / 50% 60% no-repeat; border: 1px solid #3a2410; }
.mlist { display: flex; flex-direction: column; gap: 5px; }
.mrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 8px 10px; text-align: left; cursor: pointer; color: var(--straw-dim);
  background: linear-gradient(180deg, #2e1d10, #26180d); border: 2px solid #4a2f1a; border-radius: 5px; transition: border-color .15s, transform .1s; }
.mrow:hover { border-color: var(--plank-hi); }
.mrow:active { transform: translateY(1px); }
.mrow.new { color: var(--straw); border-color: #8a6a2a; box-shadow: inset 4px 0 0 var(--gold); }
/* Giden: durum (ulaştı, okudu, ekleri aldı) ve "Yine yaz" */
.mrow.out { cursor: default; }
.mrow.out .mst { display: block; margin-top: 2px; font-size: 12px; color: var(--straw-dim); }
.mrow.out .mst.ok { color: #9fe07a; }
.mrow.out .btn { flex: none; min-height: 36px; }
.mrow.new .mtop b::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: #e0503a; vertical-align: 1px; }
.mt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mtop { display: flex; justify-content: space-between; gap: 8px; }
.mtop b { font-weight: 500; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtop small { flex: none; color: var(--straw-dim); font-size: 12px; }
.mprev { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mav { position: relative; flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 6px; border: 2px solid var(--frame);
  font: 700 19px/1 var(--f-display); color: #2a1a0e; background: linear-gradient(180deg, #ffd96f, var(--gold)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.mav.npc { background: linear-gradient(180deg, #a6dc72, #6aa83a); }
.mav.system { background: linear-gradient(180deg, #9ad0f4, #5a98c8); }
.mav.market { background: linear-gradient(180deg, #f0a07a, #c8603a); }
.mav:not(.player)::before { content: ''; width: 20px; height: 15px; background: linear-gradient(180deg, transparent 70%, #d9c48e 70%), #f8ebc4; border: 2px solid #3a2410; border-radius: 2px; box-sizing: border-box; }
.mav:not(.player)::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 4px; margin: -1px 0 0 -3px; background: #c8402a; }
.mattc { flex: none; display: flex; gap: 3px; }
.matt { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; background: var(--wood-lo); border: 2px solid var(--wood); border-radius: 4px; }
.matt img { width: 22px; height: 22px; }
.matt b { position: absolute; right: 1px; bottom: -1px; font: 800 12px/1 var(--f-data); color: var(--straw); text-shadow: 1px 1px 0 #000; }
.matt.gold { width: auto; padding: 0 6px; display: inline-flex; gap: 3px; }
.matt.gold b { position: static; font-size: 18px; color: var(--gold); }
.mback { margin-bottom: 8px; }
.letter { position: relative; color: #2a1a0e; padding: 14px 16px 12px; border: 2px solid #5a3a20; border-radius: 4px; animation: letterin .35s cubic-bezier(.2, 1.3, .4, 1);
  background: repeating-linear-gradient(180deg, transparent 0 25px, rgba(138, 106, 58, .18) 25px 26px), linear-gradient(180deg, #fbf0cf, #ead39a);
  box-shadow: inset 0 0 0 1px #fff6d8, inset 0 0 22px rgba(138, 96, 40, .25), 0 3px 0 rgba(26, 16, 10, .6); }
.win .letter header { display: flex; justify-content: flex-start; align-items: center; gap: 10px; padding: 0 0 8px; margin: 0 0 8px; background: none; box-shadow: none; border-radius: 0; border-bottom: 2px dashed rgba(90, 58, 32, .35); }
.letter header b { display: block; font: 700 17px var(--f-display); }
.letter header small { color: #6a4a2a; font-size: 12px; }
.ltext { margin: 0; font-size: 16px; line-height: 26px; text-wrap: pretty; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.ltext i { color: #6a4a2a; }
.latt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding: 8px; border-radius: 4px; background: rgba(90, 58, 32, .16); }
.latt .matt { background: #fbf0cf; border-color: #8a6a3a; }
.latt .matt b { color: #2a1a0e; text-shadow: 0 1px 0 #fff6d8; }
.latt.taken .matt { opacity: .45; }
.latt .ok { font-weight: 500; color: #3a7a1a; }
@keyframes letterin { from { transform: translateY(14px) rotate(-1.5deg); opacity: 0; } }
.mfoot .btn.big { flex: 1 1 100%; }
.mfoot .btn.ghost { flex: 1; min-height: 42px; }
.mform, .mcol { display: flex; flex-direction: column; gap: 6px; }
.mcol { min-width: 0; }
.mform label { font-size: 13px; color: var(--straw-dim); margin-top: 4px; display: flex; justify-content: space-between; gap: 8px; }
.mform label small { font-size: 12px; opacity: .8; }
.mform input, .mform textarea { width: 100%; font: 600 16px var(--f-display); color: var(--straw); background: var(--wood-lo); border: 2px solid var(--wood-hi); border-radius: 4px; padding: 9px 10px;
  user-select: text; -webkit-user-select: text; touch-action: manipulation; resize: none; }
.mform input:focus, .mform textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242, 193, 78, .25); }
.mchips { display: flex; flex-wrap: wrap; gap: 5px; }
.mchips .chip { cursor: pointer; padding: 5px 10px; min-height: 32px; }
.mchips .chip.on { border-color: var(--gold); color: var(--gold); }
.mslots { display: flex; gap: 6px; }
.mslots .slot { width: 56px; height: 56px; }
.slot.add { border-style: dashed; border-color: var(--wood-hi); color: var(--straw-dim); font: 700 24px/1 var(--f-data); }
.slot.add:hover { border-color: var(--gold); color: var(--gold); }
.mqty { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; background: rgba(0, 0, 0, .2); border-radius: 4px; }
.mqty span { flex: 1 1 100%; font-size: 13px; color: var(--straw-dim); }
.mqty b { min-width: 36px; text-align: center; font-size: 22px; color: var(--gold); }
.mqty .btn { min-width: 40px; min-height: 34px; }
.mpick { max-height: 180px; overflow-y: auto; padding: 6px; background: rgba(0, 0, 0, .2); border-radius: 4px; animation: winpop .2s ease-out; }
.mgold { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mgold span { margin-right: auto; display: inline-flex; align-items: center; gap: 4px; }
.mgold input { width: 84px; text-align: center; font: 800 15px var(--f-data); padding: 5px; }
.mgold .btn { min-width: 44px; min-height: 34px; }
.mempty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 10px; text-align: center; color: var(--straw-dim); }
.mempty .mav { width: 56px; height: 56px; }
.mempty p { margin: 0; }
.flyenv { position: fixed; z-index: 30; width: 26px; height: 20px; margin-left: -13px; pointer-events: none; background: linear-gradient(180deg, transparent 72%, #d9c48e 72%), #f8ebc4; border: 2px solid #3a2410; border-radius: 2px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.flyenv::after { content: ''; position: absolute; left: 50%; top: 6px; width: 7px; height: 5px; margin-left: -3.5px; background: #c8402a; }
body.touch #bMail { display: none; }
@media (max-width: 640px) { #bMail { display: none; } #mailChip span { display: none; } }
@media (orientation: landscape) and (max-height: 540px) {
  #mailChip { padding: 4px 8px; } #mailChip span { font-size: 12px; }
  /* Yatay telefonda mektup yazma iki sütun: solda kime ve yazı, sağda ekler, altın ve Gönder */
  .mform { flex-direction: row; gap: 14px; } .mcol { flex: 1; gap: 4px; }
  .mform label { margin-top: 0; }
  .mform textarea { height: 108px; }
  .mrow { min-height: 52px; padding: 6px 10px; }
}

/* Dilim 41: sohbet paneli. Bilgisayarda sol altta, telefonda sol yarıyı boydan kaplar (klavye açılınca görünen alana sığar) */
#chat { position: fixed; left: 10px; bottom: calc(var(--safe-b) + 74px); width: min(400px, calc(100vw - 20px)); height: min(360px, 56vh); z-index: 22;
  display: flex; flex-direction: column; overflow: hidden; animation: winpop .22s cubic-bezier(.2, 1.3, .4, 1); }
body.touch #chat { left: max(8px, env(safe-area-inset-left)); top: calc(var(--vvt, 0px) + max(6px, env(safe-area-inset-top))); bottom: auto;
  height: calc(var(--vvh, 100vh) - max(12px, env(safe-area-inset-top) * 2)); width: min(460px, calc(100vw - 16px)); }
@media (orientation: landscape) { body.touch #chat { width: min(460px, 62vw); } }
body.chatting #chatLog { display: none; }
body.touch.chatting #joy, body.touch.chatting #chatBtn { display: none; }
.chead { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 6px 5px 6px; background: linear-gradient(180deg, #6a4426, #4e321b); border-bottom: 2px solid var(--frame); box-shadow: inset 0 -1px 0 #9a6a3e; }
.ctabs { flex: 1; display: flex; gap: 4px; min-width: 0; }
.ctabs button { flex: 1; min-height: 34px; font: 600 14px var(--f-display); color: var(--straw); cursor: pointer; border-radius: 4px; padding: 3px 6px; white-space: nowrap;
  background: linear-gradient(180deg, #4a2f1a, #3a2412); border: 2px solid var(--frame); box-shadow: inset 0 0 0 1px #6a4426; }
.ctabs button[aria-selected="true"] { background: linear-gradient(180deg, #ffd96f, var(--gold)); color: var(--wood-lo); border-color: #5a3a12; box-shadow: inset 0 1px 0 #fff4c4; }
.ctabs .nbadge { font-size: 13px; line-height: 16px; min-width: 16px; }
.cthread { flex: none; display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: rgba(0, 0, 0, .28); border-bottom: 1px solid #4a2f1a; }
.cthread b { flex: 1; min-width: 0; color: #d9b0ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cthread .btn { min-height: 32px; }
/* Sohbet: sekmenin üstünde kimler var */
.cwho { flex: none; display: flex; align-items: center; gap: 5px; overflow-x: auto; padding: 5px 8px; scrollbar-width: none; touch-action: pan-x;
  background: rgba(0, 0, 0, .22); border-bottom: 1px solid #4a2f1a; font-size: 12px; color: var(--straw-dim); }
.cwho::-webkit-scrollbar { display: none; }
.cwho.hidden { display: none; }
.cwho .cwn { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.cwho .cwn b { color: var(--straw); font-weight: 500; }
.cwho .chip { flex: none; min-height: 30px; padding: 3px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.cwho .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6f6a5a; }
.cwho .dot.on { background: #7fd05a; box-shadow: 0 0 6px #7fd05a; }
.cmsgs { flex: 1; min-height: 0; overflow-y: auto; padding: 7px 9px; display: flex; flex-direction: column; gap: 4px; overscroll-behavior: contain; touch-action: pan-y; }
.cm { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.cm time, .cb time { font: 700 11px/1 var(--f-data); color: var(--straw-dim); opacity: .65; margin-right: 6px; user-select: none; }
.cm .cn { color: var(--gold); font-weight: 500; cursor: pointer; border-radius: 3px; padding: 0 2px; margin-left: -2px; }
.cm .cn:hover, .cm .cn:focus-visible { background: rgba(242, 193, 78, .18); outline: none; }
.cm.me .cn { color: var(--leaf); cursor: default; background: none; }
.cm .cn::after { content: ':'; color: var(--straw-dim); margin-left: 1px; }
.cm .ctitle { font-style: normal; font-size: 11px; color: #d9b0ff; margin: 0 4px 0 2px; vertical-align: 1px; }
.cm .ct { margin-left: 4px; }
/* Sohbette paylaşılan konum: dokununca oraya yürünür */
.pin { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #ff8a5a;
  box-shadow: inset 0 0 0 2.5px #ff8a5a, inset 0 0 0 5px #fff1c4; vertical-align: 0; }
.cm .cloc { display: inline-flex; align-items: center; margin-left: 6px; min-height: 28px; padding: 2px 9px; cursor: pointer; font: inherit; font-size: 12px;
  color: #ffd9c4; background: #3a2416; border: 1px solid #8a4a2a; border-radius: 14px; vertical-align: middle; }
.cm .cloc:hover { background: #4a2e1a; }
#chatLog .cloc { color: #ffd9c4; white-space: nowrap; }
.cquick .chip.loc { color: #ffd9c4; border-color: #8a4a2a; }
.cm.sys { color: var(--leaf); }
.cm.men { background: rgba(242, 193, 78, .16); box-shadow: inset 3px 0 0 var(--gold); padding: 2px 5px 2px 7px; border-radius: 3px; }
.cm.old { opacity: .7; }
.cb { align-self: flex-start; max-width: 82%; padding: 6px 10px 5px; border-radius: 12px 12px 12px 3px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere;
  background: #3e2c52; color: #f0e2ff; border: 1px solid #5e4878; user-select: text; -webkit-user-select: text; animation: bubin .18s ease-out; }
.cb.me { align-self: flex-end; border-radius: 12px 12px 3px 12px; background: #5a4410; color: #fff2c8; border-color: #8a6a1a; }
.cb time { display: block; margin: 2px 0 0; text-align: right; font-size: 13px; }
@keyframes bubin { from { transform: translateY(6px) scale(.96); opacity: 0; } }
.cth { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 6px 10px; text-align: left; cursor: pointer; color: var(--straw-dim);
  background: linear-gradient(180deg, #2e1d10, #26180d); border: 2px solid #4a2f1a; border-radius: 5px; }
.cth.new { color: var(--straw); border-color: #6a4a8a; box-shadow: inset 4px 0 0 #b07ae0; }
.cth .mtop b { color: #d9b0ff; }
.cempty { margin: auto; padding: 16px 10px; text-align: center; color: var(--straw-dim); font-size: 14px; }
.cquick { flex: none; display: flex; gap: 5px; overflow-x: auto; padding: 6px 8px 2px; scrollbar-width: none; touch-action: pan-x; border-top: 1px solid #3a2412; }
/* "@" yazınca eşleşen adlar */
.cment { flex: none; display: flex; gap: 5px; overflow-x: auto; padding: 6px 8px 2px; scrollbar-width: none; touch-action: pan-x; border-top: 1px solid #3a2412; background: rgba(242, 193, 78, .06); }
.cment.hidden { display: none; }
.cment::-webkit-scrollbar { display: none; }
.cment .chip { flex: none; min-height: 34px; padding: 4px 12px; font-size: 14px; color: #ffd84a; border-color: #8a6a2a; cursor: pointer; white-space: nowrap; }
.cquick::-webkit-scrollbar { display: none; }
.cquick .chip { flex: none; cursor: pointer; min-height: 32px; padding: 4px 11px; white-space: nowrap; font-size: 13px; }
.cquick .chip:active { transform: translateY(1px); }
.cquick .chip.emo { color: #f8a8bc; border-color: #6a3a4a; }
.cform { flex: none; display: flex; gap: 6px; padding: 6px 8px 8px; }
.cform input { flex: 1; min-width: 0; font: 600 16px var(--f-display); color: var(--straw); background: var(--wood-lo); border: 2px solid var(--wood-hi); border-radius: 4px; padding: 8px 10px;
  user-select: text; -webkit-user-select: text; touch-action: manipulation; }
.cform input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242, 193, 78, .25); }
.cform .btn { min-height: 42px; min-width: 76px; }
#cmenu { position: fixed; z-index: 31; display: flex; flex-direction: column; gap: 5px; padding: 8px; min-width: 170px; animation: winpop .15s ease-out; }
#cmenu b { color: var(--gold); padding: 0 2px 2px; font-weight: 500; }
#cmenu .btn { width: 100%; text-align: left; min-height: 40px; }
/* Mesaja tepki: dokununca çubuk, altında sayılar */
.cm[data-mid] { cursor: pointer; }
.rxbar { position: fixed; z-index: 31; display: flex; gap: 6px; padding: 6px; border-radius: 28px; animation: winpop .15s ease-out; }
.rxbar button { width: 44px; height: 44px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; background: #3a2416; border: 2px solid #6a4426; }
.rxbar button:hover { transform: scale(1.12); }
.rxbar [data-rk="heart"], .creact [data-rx="heart"] { color: #ff7a9a; }
.rxbar [data-rk="star"], .creact [data-rx="star"] { color: #ffd84a; }
.rxbar [data-rk="laugh"], .creact [data-rx="laugh"] { color: #9fe0ff; }
.creact { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 1px 40px; }
.creact .rx { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 1px 9px; border-radius: 14px; font-size: 14px; cursor: pointer; background: #2e1d10; border: 1px solid #5a3a20; }
.creact .rx.on { background: #4a2433; border-color: #b0587a; }
.creact .rx b { font-size: 12px; font-weight: 500; color: var(--straw); }
#cmenu .btn.sure { background: linear-gradient(180deg, #e0603a, #b8401e); color: #fff; border-color: #6a1a0a; }
/* Telefonda sohbet düğmesi: joystickin yanında, konuşma balonu simgeli; fısıltı sayısı kırmızı rozet */
#chatBtn { position: fixed; display: none; left: 18px; bottom: calc(var(--safe-b) + 212px); width: 52px; height: 52px; z-index: 4; padding: 0; place-items: center; }
body.touch #chatBtn { display: grid; }
#chatBtn .nbadge { position: absolute; top: -5px; right: -5px; box-shadow: 0 0 0 2px #2a1a0e; }
#chatBtn.has::after { content: ''; position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); border: 2px solid #2a1a0e; }
.bub { position: relative; display: block; width: 24px; height: 17px; background: #2a1a0e; border-radius: 5px; }
.bub::before { content: ''; position: absolute; left: 4px; right: 4px; top: 7px; height: 3px; background: repeating-linear-gradient(90deg, var(--straw) 0 3px, transparent 3px 6px); }
.bub::after { content: ''; position: absolute; left: 4px; bottom: -5px; border: 3px solid transparent; border-top: 3px solid #2a1a0e; border-left: 3px solid #2a1a0e; }
#bChat .nbadge { margin-left: 5px; }
.msg.men { box-shadow: inset 3px 0 0 var(--gold); background: rgba(70, 48, 10, .88); }
.msg i { font-style: normal; font-size: 11px; color: var(--straw-dim); }
.msg.wsp i { color: #d9b0ff; }
body.touch #chatLog { pointer-events: auto; cursor: pointer; }
@media (orientation: landscape) and (max-height: 540px) {
  body.touch #chatBtn { left: calc(max(14px, env(safe-area-inset-left)) + 118px); bottom: 10px; width: 46px; height: 46px; }
  .chead { padding: 4px 5px; } .ctabs button { min-height: 30px; font-size: 13px; }
  .cquick { padding-top: 4px; } .cform { padding: 4px 6px 6px; } .cform .btn { min-height: 38px; }
}

/* Dilim 43: takım kartları (sol sütunda) ve çağrı kartı */
#party { display: flex; flex-direction: column; gap: 4px; }
.phead { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; font: 600 12px var(--f-display); color: #a6e07a; letter-spacing: .06em; text-transform: uppercase; text-shadow: 1px 1px 0 #000; }
.x.small { width: 22px; height: 22px; font-size: 12px; border-width: 1px; }
.pcard { display: flex; flex-direction: column; gap: 3px; width: 100%; min-height: 44px; padding: 5px 8px 6px; text-align: left; cursor: pointer; color: var(--straw);
  background: rgba(42, 26, 14, .9); border: 2px solid #4a6a2a; border-radius: 5px; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.pcard.lead .pn b::before { content: '★ '; color: var(--gold); }
.pcard.off { opacity: .55; }
.pn { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.pn b { font-weight: 500; font-size: 13px; color: #c8f0a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn small { font-size: 15px; color: var(--straw-dim); }
.pcard .bar { height: 7px; margin-top: 0; }
.pw { font-size: 11px; color: var(--straw-dim); }
#pinv { position: fixed; top: max(70px, calc(env(safe-area-inset-top) + 60px)); left: 50%; transform: translateX(-50%); z-index: 27; width: min(380px, calc(100vw - 20px)); padding: 12px 14px; text-align: center; border-color: #6a9a3a; }
#pinv p { margin: 0; } #pinv b { color: #c8f0a0; }
#pinv .row-btns { justify-content: center; } #pinv .btn { min-width: 110px; min-height: 42px; }
#pinv.pop { animation: pinvin .4s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pinvin { from { transform: translate(-50%, -16px) scale(.9); opacity: 0; } }
.msg.pty { color: #c8f0a0; } .msg.pty i { color: #a6e07a; }
@media (orientation: landscape) and (max-height: 540px) { .pcard { min-height: 38px; padding: 3px 7px 4px; } #pinv { top: 8px; } }

/* Dilim 44: makine durumu ve fabrika özeti */
.stline { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 7px 10px; border-radius: 4px; font-weight: 500; border: 2px solid; }
.stline i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.stline.ok { color: #a6e07a; border-color: #4a6a2a; background: rgba(74, 106, 42, .25); }
.stline.ok i { animation: stpulse 1.4s ease-in-out infinite; }
.stline.need { color: #ffd27a; border-color: #8a6a1a; background: rgba(224, 160, 48, .16); }
.stline.full { color: #ff9a7a; border-color: #8a2a1a; background: rgba(217, 80, 58, .18); }
.stline.norec { color: #9ad0f4; border-color: #2a5a8a; background: rgba(74, 138, 200, .16); }
.stline.bad { color: #c9b68a; border-color: #5a4a3a; background: rgba(0, 0, 0, .2); }
@keyframes stpulse { 50% { opacity: .45; } }
.fsum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 4px; }
.fbig { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 5px; background: rgba(0, 0, 0, .25); border: 2px solid #4a2f1a; text-align: center; }
.fbig b { font-size: 28px; line-height: 1; color: #a6e07a; display: inline-flex; align-items: center; gap: 4px; }
.fbig span { font-size: 12px; color: var(--straw-dim); }
.fbig.bad { border-color: #8a2a1a; } .fbig.bad b { color: #ff9a7a; }
.fbig:last-child b { color: var(--gold); }
.sub small { font-size: 12px; color: var(--straw-dim); font-weight: 400; margin-left: 4px; }
.item.fst { border-left-width: 5px; }
.item.fst.s1 { border-left-color: #6aa83a; } .item.fst.s2 { border-left-color: #4a8ac8; } .item.fst.s3, .item.fst.s6 { border-left-color: #e0a030; }
.item.fst.s4 { border-left-color: #d9503a; } .item.fst.s5, .item.fst.s7 { border-left-color: #7a7a7a; }
.fst .stx { font-size: 13px; } .fst.s1 .stx { color: #a6e07a; } .fst.s4 .stx { color: #ff9a7a; } .fst.s3 .stx, .fst.s6 .stx { color: #ffd27a; } .fst.s2 .stx { color: #9ad0f4; }
.fst .btn { min-height: 36px; }

/* Dilim 45: mutfak ve yemek etkisi */
#buff { --bc: #f2c14e; display: flex; align-items: center; gap: 7px; padding: 5px 10px; font: 600 13px var(--f-display); color: var(--straw); cursor: pointer; border-color: var(--bc); text-align: left; }
#buff i { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--bc); box-shadow: 0 0 8px var(--bc); animation: stpulse 1.6s ease-in-out infinite; }
#buff b { flex: 1; font-weight: 500; color: var(--bc); }
#buff .num { font-size: 18px; color: var(--straw); }
#buff.pop { animation: slotbump .5s cubic-bezier(.2, 1.6, .4, 1); }
#buff.ending { animation: buffend .8s ease-in-out infinite; }
@keyframes buffend { 50% { opacity: .55; } }
.dishes { display: flex; flex-direction: column; gap: 6px; }
.dish { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; background: linear-gradient(180deg, #2e1d10, #26180d); border: 2px solid #4a2f1a; opacity: .78; }
.dish.can { opacity: 1; border-color: #6a4a2a; }
.dimg { flex: none; width: 48px; height: 48px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.dt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dt b { font-weight: 500; font-size: 16px; color: var(--gold); }
.dbuff { --bc: #f2c14e; align-self: flex-start; font-size: 12px; padding: 1px 7px; border-radius: 3px; color: #1a100a; background: var(--bc); font-weight: 500; }
.dt small { color: var(--straw-dim); font-size: 12px; }
.dt .chips { margin-top: 3px; }
.chip small { margin-left: 3px; opacity: .8; }
.anyfish { display: inline-block; width: 16px; height: 10px; margin-right: 3px; vertical-align: -1px; background: #7a9ab0; border-radius: 6px 3px 3px 6px; position: relative; }
.anyfish::after { content: ''; position: absolute; right: -5px; top: 1px; border: 4px solid transparent; border-left: 5px solid #7a9ab0; }
.dbtn { flex: none; display: flex; flex-direction: column; gap: 4px; }
.dbtn .btn { min-width: 84px; min-height: 40px; }
.dbtn .btn.small { min-height: 30px; }
@media (max-width: 640px), (orientation: landscape) and (max-height: 540px) { .dimg { width: 36px; height: 36px; } .dt > small { display: none; } }

/* Dilim 46: harita penceresi (tam ekrana yakın, tuval oranını koruyarak sığar) */
#mapView { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); background: rgba(15, 10, 6, .6); }
.mvwin { width: min(900px, calc(100vw - 16px)); height: min(720px, calc(100vh - 16px), calc(100dvh - 16px)); display: flex; flex-direction: column; animation: winpop .24s cubic-bezier(.2, 1.3, .4, 1); }
.mvwin header { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(180deg, #6a4426, #4e321b); border-bottom: 2px solid var(--frame); border-radius: 3px 3px 0 0; }
.mvwin h2 { margin: 0; font: 700 20px var(--f-display); color: var(--gold); }
.mvhint { flex: 1; font-size: 13px; color: var(--straw-dim); }
.mvbox { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px; overflow: hidden; }
.mvwrap { position: relative; line-height: 0; }
#mvCanvas { display: block; image-rendering: pixelated; border: 2px solid var(--frame); border-radius: 3px; box-shadow: 0 0 0 2px #6a4426, 0 4px 14px rgba(0, 0, 0, .5); cursor: crosshair; touch-action: none; }
#mvLabels { position: absolute; left: 0; top: 0; pointer-events: none; line-height: 1.2; }
.mvl { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font: 600 11px var(--f-display); padding: 0 4px; border-radius: 3px; background: rgba(26, 16, 10, .78); color: var(--straw); }
.mvl.npc { color: var(--gold); }
.mvl.gate { color: #c8f0a0; transform: translate(-50%, -50%); font-size: 12px; background: rgba(26, 16, 10, .88); border: 1px solid #4a6a2a; }
.mvl.spot { color: #9ad0f4; font-size: 10px; }
.mvkey { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; padding: 4px 10px 8px; font-size: 12px; color: var(--straw-dim); }
.mvkey span { display: inline-flex; align-items: center; gap: 4px; }
.k { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #1a100a; }
.k.me { background: #ffd84a; border-radius: 2px; transform: rotate(45deg); } .k.npc { background: #f2c14e; } .k.pl { background: #f3f0e6; } .k.mate { background: #7ae04a; }
.k.goal { background: none; border: 2px solid #f2c14e; } .k.mob { background: #d9443a; }
#place { cursor: pointer; }
body.touch #bGuide { display: none; }
body.touch #bMap { display: block; }
@media (max-width: 640px) { #bMap { display: block; } }
@media (orientation: landscape) and (max-height: 540px) { .mvwin header { padding: 4px 10px; } .mvwin h2 { font-size: 16px; } .mvkey { display: none; } .mvbox { padding: 4px; } .mvl { font-size: 9px; } .mvl.gate { font-size: 10px; } }

/* Dilim 49: köylüye hediye */
.gifthead { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 15px; }
.gifthead .hearts { font-size: 20px; }
.tastes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 8px; }
.tastes small { display: block; font-size: 12px; color: var(--straw-dim); margin-bottom: 2px; }
.chip.t-love { border-color: #d96c8a; color: #ffb0c4; } .chip.t-like { border-color: #6a9a3a; color: #c8f0a0; } .chip.t-hate { border-color: #6a4a3a; color: var(--straw-dim); opacity: .85; }
.giftgrid { margin-bottom: 8px; }
.giftgrid .slot::before { position: absolute; top: 1px; left: 3px; font: 700 13px/1 var(--f-display); text-shadow: 1px 1px 0 #000; pointer-events: none; }
.giftgrid .slot.k-love::before { content: '♥'; color: #ff7a9a; } .giftgrid .slot.k-like::before { content: '+'; color: #a6e07a; } .giftgrid .slot.k-hate::before { content: '–'; color: #c9b68a; }
.giftgrid .slot.k-hate { opacity: .7; }

/* Dilim 51: kaçış düğmesi (bekleme süresinde soluk). Telefonda küçük düğmeler Kullan'ın solunda üst üste: araç çubuğuna binmez */
body.touch #actions { display: grid; grid-template-columns: auto auto; grid-template-areas: "rot ." "talk use" "dash use"; align-items: end; justify-items: center; }
body.touch #btnRot { grid-area: rot; } body.touch #btnTalk { grid-area: talk; } body.touch #btnDash { grid-area: dash; } body.touch #btnUse { grid-area: use; align-self: end; }
.round.dash { background: linear-gradient(180deg, #bfe4ff, #8fc4ea); border-color: #4a7aa8; color: #12304a; }
.round.dash.cd { opacity: .45; filter: grayscale(.6); }

/* Dilim 53: çanta düzenle, toplu satış */
.invtop { display: flex; align-items: flex-start; gap: 10px; } .invtop .note { flex: 1; margin-top: 0; } .invtop .btn { flex: none; min-height: 34px; }
.btn.sellall { margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  .mvwin,
  #buff i, #buff.pop, #buff.ending,
  .stline.ok i,
  #pinv.pop,
  #chat, .cb, #cmenu,
  #mailChip .env, #mailChip.ring, .letter, .mpick,
  .toast.ach, .toast.ach .medal, .toast.ach::after, .delta.xp,
  .slot.bump, .slot .plus, .toast, .toast.out, #modal:not(.hidden) .win, .lvstar, .lvstar .shine, .lvribbon, #lvGains li, .spark, .lvcard, .bar.xp.gain i::after { animation: none !important; }
}

/* ---------- zindanlar ---------- */
#dgGoal { display: flex; flex-direction: column; gap: 3px; padding: 6px 10px 7px; border-color: #9a6aff; box-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 14px rgba(154, 106, 255, .3); }
#dgGoal .qhead span { color: #d6a8ff; }
#dgGoal b { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--straw); }
#dgGoal.pop { animation: lvpop .45s cubic-bezier(.2, 1.5, .4, 1) both; }
body.dg #questBox { display: none; }
.dgsteps { margin: 6px 0 10px 18px; padding: 0; font-size: 13px; line-height: 1.45; color: var(--straw-dim); }
.dgsteps b { color: var(--straw); }
.dglist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.dgcard { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; border: 2px solid var(--wood-hi); background: linear-gradient(180deg, rgba(20, 24, 40, .85), rgba(10, 10, 16, .9)); }
.dgcard.dg1 { border-color: #5a8ad0; background: linear-gradient(180deg, rgba(30, 44, 80, .9), rgba(10, 14, 28, .92)); }
.dgcard.dg2 { border-color: #9a7a4a; background: linear-gradient(180deg, rgba(56, 40, 26, .9), rgba(18, 12, 8, .92)); }
.dgcard.dg3 { border-color: #d0502a; background: linear-gradient(180deg, rgba(70, 22, 14, .9), rgba(20, 6, 4, .92)); }
.dgcard.locked { filter: saturate(.4) brightness(.8); }
.dgh { display: flex; align-items: baseline; gap: 8px; }
.dgh b { flex: 1; font: 700 17px var(--f-display); color: var(--gold); }
.dgdiff { color: #ffd86a; letter-spacing: 1px; font-size: 13px; }
.dgh .lv { font-size: 12px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .35); color: var(--straw); }
.dgcard p { margin: 0; font-size: 13px; line-height: 1.35; color: var(--straw-dim); }
.dgboss { font-size: 12px; color: var(--straw-dim); } .dgboss b { color: #ff9a5a; }
.dgloot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dgloot img { width: 26px; height: 26px; border-radius: 5px; background: rgba(0, 0, 0, .35); border: 2px solid #ffa53a; }
.dgloot img.t5 { border-color: #ff4f7a; box-shadow: 0 0 8px rgba(255, 79, 122, .5); }
.dgloot small { font-size: 11px; color: var(--straw-dim); margin-left: 4px; }
.dgcard .btn { margin-top: 2px; }
/* Kadim (5. seviye) ekipman çerçevesi */
.eqs.t5, .slot.t5 { border: 2px solid #ff4f7a; box-shadow: inset 0 0 10px rgba(255, 79, 122, .55); }
.bd.t5 { border-left-color: #ff4f7a; } .bd.t5 span { color: #ff8aa8; }

/* ---------- silah becerileri ---------- */
#skillbar { position: fixed; bottom: calc(var(--safe-b) + 76px); left: calc(50% + 118px); display: flex; gap: 6px; z-index: 5; }
.skb { position: relative; width: 52px; height: 52px; padding: 0; border-radius: 10px; border: 2px solid var(--wood-hi); background: rgba(20, 14, 10, .82); cursor: pointer; overflow: hidden; }
.skb img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.skb .lv { position: absolute; left: 2px; bottom: 1px; font: 700 12px var(--f-display); color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.skb .lv.g1 { color: #7aff8a; } .skb .lv.g2 { color: #ff6a5a; } .skb .lv.g3 { color: #ffe066; }
.skb kbd { position: absolute; top: 1px; right: 2px; font: 700 10px var(--f-display); color: var(--straw-dim); text-shadow: 0 1px 0 #000; }
.skb .cd { position: absolute; inset: 0; background: conic-gradient(rgba(0, 0, 0, .68) var(--p, 0%), transparent 0); pointer-events: none; }
.skb .sec { position: absolute; inset: 0; display: grid; place-items: center; font: 700 16px var(--f-display); color: #fff; text-shadow: 0 1px 0 #000, 0 0 4px #000; pointer-events: none; }
.skb.locked img { filter: grayscale(1) brightness(.45); } .skb.locked::after { content: '🔒'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; }
.skb.on { border-color: var(--aura, #5aff7a); box-shadow: 0 0 10px var(--aura, #5aff7a), inset 0 0 8px var(--aura, #5aff7a); }
.skb:active:not(.locked) { transform: scale(.94); }
body.touch #skillbar { left: auto; right: max(14px, env(safe-area-inset-right)); bottom: 168px; gap: 6px; }
body.touch .skb { width: 44px; height: 44px; border-radius: 50%; }
body.touch .skb kbd { display: none; }
body.building #skillbar { visibility: hidden; }
/* Beceriler sekmesi */
.wskcls { margin-bottom: 12px; padding: 8px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid var(--wood-hi); }
.wskcls.cur { border-color: var(--gold); box-shadow: 0 0 10px rgba(242, 193, 78, .25); }
.wskcls h3 { margin: 0 0 4px; font: 700 16px var(--f-display); color: var(--gold); } .wskcls h3 small { color: var(--straw-dim); font-size: 12px; }
.wsk { display: grid; grid-template-columns: 44px 1fr auto; gap: 4px 10px; align-items: center; padding: 6px 4px; border-top: 1px solid rgba(201, 182, 138, .15); }
.wsk img { width: 44px; height: 44px; image-rendering: pixelated; border-radius: 8px; border: 2px solid var(--wood-hi); }
.wsk .nm { font-size: 14px; color: var(--straw); } .wsk .nm b { margin-left: 6px; font: 700 14px var(--f-display); }
.wsk .nm b.g0 { color: #8a8a8a; } .wsk .nm b.g1 { color: #7aff8a; } .wsk .nm b.g2 { color: #ff6a5a; } .wsk .nm b.g3 { color: #ffe066; text-shadow: 0 0 6px rgba(255, 200, 60, .7); }
.wsk p { margin: 2px 0 0; font-size: 12px; line-height: 1.35; color: var(--straw-dim); }
.wsk .prog { grid-column: 2 / 4; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--straw-dim); }
.wsk .prog .bar { flex: 1; height: 7px; }
.wsk .btn { white-space: nowrap; }

/* Yatay telefon, son düzen: araç çubuğunun 10 yuvası da joystick ile sağdaki düğmelerin arasına sığar (yuva boyu ekran enine göre),
   sohbet düğmesi joystick'in sağ üstünde (çubuğa binmez), inşa çubuğu joystick'in yanında (yürünebilir), menü dört sütun.
   Takım ya da zindan varken görev kutusu kısalır (sol sütun joystick'e inmesin) */
@media (orientation: landscape) and (max-height: 540px) {
  body.touch { --hs: clamp(24px, calc((100vw - 300px - env(safe-area-inset-left) - env(safe-area-inset-right)) / 10 - 3px), 42px); }
  body.touch #hotbar .slot:nth-child(n+9) { display: grid; }
  body.touch #hotbar { left: calc(max(14px, env(safe-area-inset-left)) + 118px); right: calc(max(14px, env(safe-area-inset-right)) + 142px); width: max-content; max-width: none; margin: 0 auto; transform: none; gap: 2px; padding: 3px; bottom: 4px; }
  body.touch #hotbar .slot { width: var(--hs); height: var(--hs); }
  body.touch #hotbar .slot img { width: calc(var(--hs) * .78); height: calc(var(--hs) * .78); }
  body.touch #hotbar .slot .k { display: none; } /* tuş numarası dokunmatikte işe yaramaz, simgeyi kapatıyordu */
  body.touch #hotbar .slot .n { font-size: max(10px, calc(var(--hs) * .34)); }
  body.touch #chatBtn { left: calc(max(14px, env(safe-area-inset-left)) + 112px); bottom: calc(var(--hs) + 20px); width: 44px; height: 44px; }
  body.touch #hint { bottom: calc(var(--hs) + 16px); }
  body.touch.building #actions, body.touch.building #chatBtn, body.touch.building #hint { display: none; }
  body.touch #buildBar { left: calc(max(14px, env(safe-area-inset-left)) + 120px); right: max(10px, env(safe-area-inset-right)); bottom: 6px; transform: none; padding: 6px 10px; gap: 4px 8px; flex-wrap: nowrap; }
  body.touch #buildBar #buildText { font-size: 12px; flex: 1 1 0; min-width: 0; line-height: 1.25; }
  body.touch #buildBar .row-btns { flex: none; flex-wrap: nowrap; gap: 5px; }
  body.touch #buildBar .btn { min-height: 42px; padding: 5px 9px; font-size: 13px; }
  .menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .menu-grid .btn { padding: 9px 6px; font-size: 14px; }
  body.touch #leftcol:has(#dgGoal:not(.hidden)) #questBox { display: none; }
  body.touch #leftcol:has(#party:not(.hidden)) .qdaily, body.touch #leftcol:has(#party:not(.hidden)) .qhint { display: none; }
}
/* Çok kısa yatay ekran (eski küçük telefonlar): görev kutusu tek satır kısalır, joystick küçülür; sol sütun joystick'e inmez */
@media (orientation: landscape) and (max-height: 340px) {
  body.touch #questBox .qdaily, body.touch #questBox .qhint { display: none; }
  body.touch #joy { width: 96px; height: 96px; }
  body.touch #knob { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  body.touch #chatBtn { left: calc(max(14px, env(safe-area-inset-left)) + 100px); }
  body.touch #hotbar { left: calc(max(14px, env(safe-area-inset-left)) + 104px); }
}

/* ---------- Kostüm Çarşısı (shop.js): solda dönen önizleme, sağda raflar; nadirliğe göre ışıldayan kartlar ---------- */
#bShop { position: relative; background: linear-gradient(180deg, #6a3a8a, #3a1e5a); border-color: #c77dff; color: #fff3c8; text-shadow: 0 1px 0 #000; overflow: hidden; }
#bShop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 240, 200, .55) 48%, transparent 66%); transform: translateX(-120%); animation: shpShine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes shpShine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
#shop { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); background: radial-gradient(ellipse at 30% 40%, rgba(70, 30, 90, .75), rgba(12, 6, 16, .9)); }
.shp-win { width: min(1100px, 100%); height: min(720px, 100%); display: flex; flex-direction: column; background: linear-gradient(180deg, #2e1d12, #1c120b); border: 3px solid #a8783a; border-radius: 10px; box-shadow: 0 0 0 2px #000, 0 18px 50px rgba(0, 0, 0, .7), inset 0 0 40px rgba(199, 125, 255, .08); overflow: hidden; position: relative; }
.shp-win header { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 2px solid #5a3a20; background: linear-gradient(180deg, #3e2614, #2a1a0e); }
.shp-win h2 { margin: 0; font: 400 22px var(--f-display, inherit); color: #ffe08a; text-shadow: 0 0 10px rgba(255, 200, 80, .55), 0 2px 0 #000; flex: 1; }
.shp-gold { display: flex; align-items: center; gap: 6px; font: 400 18px var(--f-display, inherit); color: #ffe08a; background: rgba(0, 0, 0, .35); padding: 4px 10px; border-radius: 6px; border: 1px solid #6a4a24; }
.shp-x { width: 38px; height: 38px; border-radius: 6px; background: #7a2a1e; color: #fff; border: 2px solid #3a120c; font-size: 18px; cursor: pointer; }
.shp-body { flex: 1; display: grid; grid-template-columns: minmax(220px, 36%) 1fr; min-height: 0; }
.shp-prev { position: relative; display: flex; flex-direction: column; border-right: 2px solid #4a2e18; background: radial-gradient(ellipse at 50% 42%, rgba(255, 220, 140, .16), transparent 62%), linear-gradient(180deg, #24183a, #120c1c); min-height: 0; }
.shp-prev.yay::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(255, 230, 150, .75), transparent 60%); animation: shpYay 1.1s ease-out forwards; pointer-events: none; }
@keyframes shpYay { from { opacity: 1; } to { opacity: 0; } }
.shp-canvas { flex: 1; width: 100%; min-height: 0; touch-action: none; cursor: grab; display: block; }
.shp-info { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .45) 30%); }
.shp-name { font: 400 20px var(--f-display, inherit); color: var(--rc, #ffe08a); text-shadow: 0 0 12px var(--rc, #ffe08a), 0 2px 0 #000; }
.shp-meta { font-size: 13px; opacity: .95; }
.shp-desc { margin: 2px 0 6px; font-size: 13px; line-height: 1.35; color: #e8dcc0; }
.shp-sig { display: block; margin: -2px 0 6px; font-size: 12px; color: #c8b890; } .shp-sig b { color: #ffd86a; }
.shp-lim { font-size: 12px; color: #ffb06a; }
.shp-buy { position: relative; overflow: hidden; min-height: 46px; font-size: 16px; background: linear-gradient(180deg, #ffd86a, #e0a02a); color: #2a1408; border-color: #8a5a10; box-shadow: 0 0 14px rgba(255, 200, 80, .5); }
.shp-buy::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); transform: translateX(-120%); animation: shpShine 2.6s ease-in-out infinite; }
.shp-buy.poor { filter: grayscale(.7) brightness(.8); box-shadow: none; }
.shp-buy.poor::after { display: none; }
.gc::before { content: ''; display: inline-block; width: .8em; height: .8em; margin-right: 3px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b0, #f2c14e 45%, #a87a22); vertical-align: -1px; box-shadow: 0 0 0 1px #6a4a10; }
i.gc::before { margin: 0; }
.shp-main { display: flex; flex-direction: column; min-height: 0; }
.shp-tabs { display: flex; gap: 4px; padding: 8px 10px 0; flex-wrap: wrap; }
.shp-tabs button { padding: 7px 12px; border-radius: 6px 6px 0 0; border: 2px solid #5a3a20; border-bottom: 0; background: #2a1a0e; color: #d8c8a0; font: 400 14px var(--f-display, inherit); cursor: pointer; }
.shp-tabs button[aria-selected="true"] { background: linear-gradient(180deg, #5a3a1e, #3a2412); color: #ffe08a; box-shadow: inset 0 2px 0 #c8963e; }
.shp-list { flex: 1; overflow-y: auto; padding: 8px 10px 14px; border-top: 2px solid #5a3a20; overscroll-behavior: contain; }
.shp-h { margin: 6px 2px 8px; font: 400 16px var(--f-display, inherit); color: #ffe08a; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.shp-h small { font-size: 12px; color: #c8b890; font-family: inherit; }
.shp-h.lim { color: #ffa040; text-shadow: 0 0 10px rgba(255, 120, 30, .6); }
.shp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; margin-bottom: 10px; }
.shp-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 6px 8px; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--rc) 70%, #000); background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%), linear-gradient(180deg, #2e1f14, #1a110a); color: #f3e3b5; cursor: pointer; overflow: hidden; transition: transform .12s, box-shadow .15s; }
.shp-card:hover, .shp-card.sel { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--rc), 0 0 18px color-mix(in srgb, var(--rc) 60%, transparent); }
.shp-card.r3, .shp-card.r4, .shp-card.r5 { animation: shpGlow 2.4s ease-in-out infinite; }
.shp-card.r4::before, .shp-card.r5::before { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 70%, color-mix(in srgb, var(--rc) 75%, #fff) 80%, transparent 90%); animation: shpSpin 3.4s linear infinite; opacity: .35; pointer-events: none; }
.shp-card.r5::before { opacity: .5; animation-duration: 2.4s; }
.shp-card > * { position: relative; }
@keyframes shpGlow { 0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--rc) 35%, transparent); } 50% { box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 70%, transparent); } }
@keyframes shpSpin { to { transform: rotate(360deg); } }
.shp-th { flex: none; width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rc) 40%, transparent), rgba(0, 0, 0, .25) 70%); }
.shp-th img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .25s; }
.shp-th img.on { opacity: 1; }
.shp-cn { font: 400 14px var(--f-display, inherit); text-align: center; line-height: 1.15; min-height: 2.3em; display: flex; align-items: center; flex: none; }
.shp-cr, .shp-cp { flex: none; } .shp-cp { white-space: nowrap; }
.shp-cr { font-size: 11px; color: var(--rc); text-align: center; }
.shp-cp { font-size: 14px; display: flex; gap: 6px; align-items: baseline; }
.shp-cp s, .shp-sp s { color: #a89878; font-size: 12px; }
.shp-cp b, .shp-sp b { color: #ffe08a; font-weight: 400; }
.shp-own { color: #8fe07a; font-size: 13px; }
.shp-off { color: #a89878; font-size: 12px; }
.shp-rib { position: absolute; top: 6px; left: -22px; z-index: 2; transform: rotate(-38deg); background: #d9302a; color: #fff; font: 400 11px var(--f-display, inherit); padding: 2px 24px; box-shadow: 0 2px 4px rgba(0, 0, 0, .5); font-style: normal; }
.shp-rib.lim { background: #e07a1a; top: auto; bottom: 8px; left: auto; right: -26px; }
.shp-rib.trn { background: linear-gradient(90deg, #ff3a6a, #b04aff); top: auto; bottom: 10px; left: auto; right: -28px; }
.shp-worn { position: absolute; top: 6px; right: 6px; z-index: 2; background: #3a8a3a; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 8px; font-style: normal; }
.shp-card.big { grid-row: span 1; }
.shp-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.shp-set { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--rc) 70%, #000); background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 22%, #2a1a0e), #1a110a); color: #f3e3b5; text-align: left; cursor: pointer; animation: shpGlow 2.8s ease-in-out infinite; }
.shp-set.sel { box-shadow: 0 0 0 2px var(--rc), 0 0 20px color-mix(in srgb, var(--rc) 60%, transparent); }
.shp-sn { font: 400 16px var(--f-display, inherit); color: var(--rc); text-shadow: 0 0 8px var(--rc), 0 1px 0 #000; }
.shp-sitems { display: flex; gap: 4px; }
.shp-sitems img { width: 25%; aspect-ratio: 1; border-radius: 6px; background: rgba(0, 0, 0, .3); opacity: 0; transition: opacity .25s; }
.shp-sitems img.on { opacity: 1; }
.shp-sp { display: flex; gap: 8px; align-items: baseline; font-size: 15px; }
.shp-sp em { color: #ff7a5a; font-style: normal; font-size: 13px; }
.shp-set small { font-size: 11px; color: #c8b890; }
.shp-empty { padding: 30px 10px; text-align: center; color: #c8b890; }
.shp-ask { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 6, 4, .6); z-index: 5; }
.shp-askbox { width: min(360px, 90%); padding: 16px; border-radius: 10px; background: linear-gradient(180deg, #3e2614, #24160c); border: 3px solid #c8963e; box-shadow: 0 0 30px rgba(255, 200, 80, .35); text-align: center; display: flex; flex-direction: column; gap: 8px; }
.shp-askbox > b { font: 400 18px var(--f-display, inherit); color: #ffe08a; }
.shp-askbox p { margin: 0; } .shp-askp .gc { color: #ffe08a; font-size: 17px; white-space: nowrap; } .shp-askbox small { color: #c8b890; font-size: 12px; }
.shp-askbox .row-btns { justify-content: center; }
body.shopping #hotbar, body.shopping #skillbar, body.shopping #actions, body.shopping #joy, body.shopping #chatBtn { visibility: hidden; }
@media (orientation: landscape) and (max-height: 540px) {
  .shp-win header { padding: 4px 8px; } .shp-win h2 { font-size: 17px; } .shp-gold { font-size: 15px; padding: 2px 8px; } .shp-x { width: 34px; height: 34px; }
  .shp-body { grid-template-columns: minmax(170px, 34%) 1fr; }
  .shp-info { padding: 4px 8px 8px; gap: 2px; } .shp-name { font-size: 16px; } .shp-desc { font-size: 11.5px; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .shp-meta { font-size: 11px; } .shp-sig { font-size: 10.5px; margin: -2px 0 3px; }
  .shp-buy { min-height: 40px; font-size: 14px; }
  .shp-tabs { padding: 4px 6px 0; gap: 3px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .shp-tabs::-webkit-scrollbar { display: none; } .shp-tabs button { padding: 5px 8px; font-size: 12px; flex: none; }
  .shp-list { padding: 6px 6px 10px; }
  .shp-grid { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 6px; }
  .shp-cn { font-size: 12px; } .shp-cr { font-size: 10px; } .shp-cp { font-size: 12px; }
  .shp-sets { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .shp-h { font-size: 14px; margin: 4px 2px 6px; }
}
/* Elmas (gerçek parayla alınan para): elmas simgesi, çarşı başlığında bakiye, Elmas sekmesi ve paketler */
.gm::before { content: ''; display: inline-block; width: .8em; height: .8em; margin-right: 3px; vertical-align: -1px; clip-path: polygon(50% 0, 100% 36%, 50% 100%, 0 36%); background: linear-gradient(160deg, #f0feff 0%, #7fe4ff 35%, #2a8cff 70%, #6a3aff); }
i.gm::before { margin: 0; }
.shp-cp b.gm, .shp-sp b.gm, .shp-h b.gm { color: #9ae8ff; }
.shp-card .shp-old { display: none; } /* kartta eski fiyat yerine köşedeki indirim şeridi; iki fiyat sığsın */
.shp-gems { display: flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 3px 2px 8px; border-radius: 6px; border: 1px solid #2a6a9a; background: rgba(20, 60, 110, .6); color: #9ae8ff; font: inherit; cursor: pointer; }
.shp-gems b { width: 20px; height: 20px; border-radius: 4px; background: linear-gradient(180deg, #5ad06a, #2a8a3a); color: #fff; display: grid; place-items: center; font: 700 15px/1 system-ui, sans-serif; }
.shp-tabs button.tgem { color: #9ae8ff; border-color: #2a5a8a; background: #10213a; }
.shp-tabs button.tgem[aria-selected="true"] { background: linear-gradient(180deg, #1e4a7a, #10284a); color: #c8f4ff; box-shadow: inset 0 2px 0 #6ad0ff; }
.shp-buys { display: flex; gap: 6px; } .shp-buys .shp-buy { flex: 1; padding-left: 6px; padding-right: 6px; }
.shp-buy.gem { background: linear-gradient(180deg, #9aeeff, #2a8cff); color: #06203a; border-color: #1a4a8a; box-shadow: 0 0 14px rgba(90, 190, 255, .5); }
.shp-rib.gem { background: linear-gradient(90deg, #2a8cff, #8a4aff); }
.shp-h.gem { color: #9ae8ff; text-shadow: 0 0 10px rgba(90, 190, 255, .6); }
.shp-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.shp-pack { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px; border-radius: 10px; border: 2px solid #2a5a8a; background: radial-gradient(ellipse at 50% 30%, rgba(90, 190, 255, .3), transparent 70%), linear-gradient(180deg, #14243c, #0a1222); color: #e8f4ff; cursor: pointer; transition: transform .12s, box-shadow .15s; }
.shp-pack:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 0 2px #6ad0ff, 0 0 20px rgba(90, 190, 255, .5); }
.shp-pack.pop { border-color: #c8963e; } .shp-pack.best { border-color: #a86aff; box-shadow: 0 0 16px rgba(168, 106, 255, .45); }
.shp-pack:disabled { cursor: default; } .shp-pack.wait { opacity: .55; pointer-events: none; }
.shp-gem { width: 64px; height: 58px; position: relative; filter: drop-shadow(0 0 8px rgba(120, 220, 255, .8)); animation: shpGem 3s ease-in-out infinite; }
.shp-gem::before, .shp-gem::after { content: ''; position: absolute; clip-path: polygon(50% 0, 100% 36%, 50% 100%, 0 36%); background: linear-gradient(160deg, #f0feff, #7fe4ff 35%, #2a8cff 70%, #6a3aff); }
.shp-gem.g0::before { inset: 14px 20px; } .shp-gem.g1::before { inset: 10px 16px; } .shp-gem.g2::before { inset: 6px 13px; } .shp-gem.g3::before { inset: 3px 10px; } .shp-gem.g4::before { inset: 0 7px; }
.shp-gem.g1::after, .shp-gem.g2::after, .shp-gem.g3::after, .shp-gem.g4::after { width: 22px; height: 24px; left: 2px; bottom: 2px; background: linear-gradient(160deg, #ffe8fa, #ff9ae8 40%, #a84aff); }
.shp-gem.g3::after, .shp-gem.g4::after { width: 26px; height: 28px; }
@keyframes shpGem { 50% { transform: translateY(-3px); filter: drop-shadow(0 0 14px rgba(150, 230, 255, 1)); } }
.shp-pn { font: 400 19px var(--f-display, inherit); color: #c8f4ff; } .shp-pn b { font-weight: 400; color: #fff; }
.shp-pb { font-size: 12px; color: #9ab8d8; } .shp-pb em { color: #ffd86a; font-style: normal; }
.shp-pp { margin-top: 4px; padding: 6px 10px; border-radius: 6px; background: linear-gradient(180deg, #5ad06a, #2a8a3a); color: #fff; font: 400 15px var(--f-display, inherit); align-self: stretch; }
.shp-pack:disabled .shp-pp { background: #24344a; color: #9ab0c8; }
.shp-note { font-size: 12.5px; color: #a8c0d8; margin: 4px 2px; line-height: 1.4; }
@media (orientation: landscape) and (max-height: 540px) {
  .shp-gems { margin-left: 4px; }
  .shp-buys { flex-direction: column; gap: 4px; } .shp-buys .shp-buy { min-height: 34px; font-size: 13px; }
  .shp-packs { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
  .shp-pack { padding: 6px; } .shp-gem { transform: scale(.75); margin: -6px 0; animation: none; } .shp-pn { font-size: 16px; } .shp-pb { font-size: 10.5px; } .shp-pp { font-size: 13px; padding: 4px; }
  .shp-note { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .shp-card, .shp-set, #bShop::after, .shp-buy::after, .shp-card::before, .shp-gem { animation: none !important; } }

/* Çiftlik evi penceresi: seviye basamakları, şimdiki evin kartı, sıradakinin gerekenleri */
.hsteps { display: flex; gap: 6px; margin: 4px 0 10px; }
.hstep { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(243,227,181,.12); color: var(--straw-dim); text-align: center; font-size: 12px; line-height: 1.2; }
.hstep i { font-style: normal; font-family: var(--f-display); font-weight: 800; font-size: 18px; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; background: rgba(0,0,0,.25); color: var(--straw-dim); }
.hstep.done { color: var(--leaf); } .hstep.done i { background: rgba(140,200,90,.22); color: var(--leaf); }
.hstep.on { color: var(--gold); border-color: var(--gold); background: rgba(242,193,78,.08); } .hstep.on i { background: var(--gold); color: #3a2712; }
.hcard { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.18); }
.hcard b { font-family: var(--f-display); font-size: 17px; color: var(--straw); } .hcard span { font-size: 14px; } .hcard small { color: var(--straw-dim); }
.hnext { margin: 12px 0 2px; font-family: var(--f-display); color: var(--gold); }
#mBody .chips + .note.small { margin-top: 8px; font-size: 12.5px; opacity: .85; }
#lHouse { width: 100%; margin: 4px 0 8px; }