/* ui.css — modaller (kraft evrak), dükkan, gün sonu manifestosu, fiş toast'ları */

/* ---- Modal: bantla yapıştırılmış evrak ---- */
#modal-root {
  position: fixed; inset: 0; background: rgba(10,8,6,.78); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(2px);
}
.paper {
  background: linear-gradient(175deg, #f7f2e4 0%, #efe8d4 100%);
  color: var(--ink); border-radius: 3px; padding: 26px 22px 22px;
  width: 100%; max-width: 420px; max-height: 85dvh; overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0,0,0,.7);
  position: relative; animation: stampIn .3s cubic-bezier(.2, 1.4, .4, 1);
}
/* köşelerde koli bandı parçaları */
.paper::before, .paper::after {
  content: ''; position: absolute; top: -8px; width: 86px; height: 22px;
  background: linear-gradient(rgba(255,255,255,.4), rgba(0,0,0,.06)), rgba(230,194,95,.85);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.paper::before { left: -14px; transform: rotate(-38deg); }
.paper::after { right: -14px; transform: rotate(38deg); }
@keyframes stampIn {
  from { transform: scale(1.15) rotate(1.5deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.paper h2 {
  font-family: 'Saira Stencil One', sans-serif; font-size: 20px; letter-spacing: .5px;
  margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px dashed rgba(43,36,26,.25); padding-bottom: 8px;
}
.paper p { color: #5c5240; line-height: 1.55; font-size: 14.5px; }
.card-emoji { font-size: 46px; text-align: center; margin-bottom: 6px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.card-img {
  width: 100%; max-height: 175px; object-fit: cover; object-position: center 20%;
  border-radius: 4px; margin-bottom: 12px; display: block;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); border: 1px solid rgba(43,36,26,.2);
}

/* ---- Gün sonu manifestosu ---- */
.report { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.report td { padding: 5px 0; border-bottom: 1px dotted rgba(43,36,26,.15); }
.report td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.report .dim td { color: var(--ink-dim); font-weight: 400; font-size: 13px; }
.report .total td {
  border-top: 2px solid var(--ink); border-bottom: none; padding-top: 9px;
  color: var(--para); font-family: 'Saira Stencil One', sans-serif; font-size: 17px;
}
.special-warn {
  background: var(--bant); color: var(--ink); padding: 11px; margin-top: 10px;
  font-weight: 700; font-size: 13px; text-align: center; transform: rotate(-.8deg);
  border: 2px dashed rgba(43,36,26,.4); border-radius: 3px;
}

/* ---- Dükkan ---- */
.shop-cash { font-family: 'Saira Stencil One', sans-serif; color: var(--para); font-size: 16px; }
.tab-bar { display: flex; gap: 6px; margin-bottom: 10px; }
.tab {
  flex: 1; background: #e3dcc8; border: 1px solid rgba(43,36,26,.2); color: var(--ink-dim);
  padding: 9px 4px; border-radius: 3px 3px 0 0; cursor: pointer;
  font-family: 'Saira Stencil One', sans-serif; font-size: 12.5px; letter-spacing: .5px;
}
.tab.active { background: var(--turuncu); color: #fff; border-color: var(--turuncu); }
.bn-panel {
  background: #eae2cc; border: 1px solid rgba(43,36,26,.15); border-radius: 3px;
  padding: 8px 12px; margin-bottom: 10px; font-size: 12.5px;
}
.bn-row { display: flex; justify-content: space-between; padding: 2px 0; color: var(--ink-dim); font-weight: 600; }
.bn-min { color: var(--damga); }
.bn-min span:last-child::after { content: ' ⚠ DARBOĞAZ'; font-size: 10px; letter-spacing: 1px; }
.shop-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.shop-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(172deg, #d9b075, #c89b5f); /* kraft koli */
  border-radius: 3px; padding: 10px 12px;
  box-shadow: inset 0 0 0 1px rgba(43,36,26,.25), 0 2px 5px rgba(0,0,0,.15);
  position: relative;
}
.shop-row::before { /* koli bandı şeridi */
  content: ''; position: absolute; top: 0; bottom: 0; left: 46px; width: 7px;
  background: rgba(230,194,95,.5);
}
.shop-row.owned { opacity: .65; filter: saturate(.6); }
.shop-row.locked { opacity: .4; filter: grayscale(1); }
.shop-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.shop-emoji { font-size: 26px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.shop-img { height: 28px; max-width: 52px; object-fit: contain; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.shop-info b { font-size: 14px; display: block; color: #33291a; }
.shop-info small { color: #5c4a2e; font-size: 11.5px; display: block; line-height: 1.3; }

/* ---- Toast: termal fiş ---- */
#toast-root {
  position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 200;
  width: 90%; max-width: 400px; display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.toast {
  background: #fdfbf3; color: var(--ink); padding: 10px 14px 12px;
  font-size: 13.5px; line-height: 1.45; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(12px); transition: all .35s;
  /* fişin altı tırtıklı */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), 96% 100%, 92% calc(100% - 5px), 88% 100%, 84% calc(100% - 5px), 80% 100%, 76% calc(100% - 5px), 72% 100%, 68% calc(100% - 5px), 64% 100%, 60% calc(100% - 5px), 56% 100%, 52% calc(100% - 5px), 48% 100%, 44% calc(100% - 5px), 40% 100%, 36% calc(100% - 5px), 32% 100%, 28% calc(100% - 5px), 24% 100%, 20% calc(100% - 5px), 16% 100%, 12% calc(100% - 5px), 8% 100%, 4% calc(100% - 5px), 0 100%);
  border-left: 4px solid var(--turuncu);
}
.toast.show { opacity: 1; transform: translateY(0); }

.about { text-align: center; margin-top: 14px; font-size: 11px; color: var(--ink-dim); letter-spacing: 1px; }