:root {
  --bg: #0d0b09;
  --stone: #17130f;
  --stone-2: #211b15;
  --line: #3a2f22;
  --ink: #e9dcc0;
  --ink-dim: #a8987a;
  --gold: #d0a64e;
  --gold-hi: #f0cd7a;
  --blood: #b2402c;
  --moss: #6f9b55;
  --arcane: #7f8fd6;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(ellipse at 50% -10%, #2a1f14 0%, transparent 60%),
    radial-gradient(ellipse at 50% 120%, #1b130c 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  font: 19px/1.55 "EB Garamond", Georgia, serif;
  overflow: hidden;
}
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  box-shadow: inset 0 0 220px 60px #000;
}
h1, h2, .btn, .lbl, .who strong {
  font-family: "Cinzel", "Times New Roman", serif;
  letter-spacing: .04em;
}
h1 { font-size: 2.6rem; margin: 0 0 .2rem; color: var(--gold-hi); text-shadow: 0 0 24px #d0a64e55; }
h2 { font-size: 1.6rem; margin: 0 0 1rem; color: var(--gold); }
.hidden { display: none !important; }

/* ---------- screens ---------- */
.screen {
  position: relative; z-index: 1;
  display: none; height: 100vh; height: 100dvh;
  align-items: center; justify-content: center; padding: 20px;
}
.screen.active { display: flex; }
.panel {
  width: min(620px, 100%);
  background: linear-gradient(180deg, var(--stone-2), var(--stone));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 34px;
  box-shadow: 0 30px 80px #000a, inset 0 1px 0 #ffffff0d;
}
.intro { text-align: center; }
.sub { color: var(--ink-dim); font-style: italic; margin: 0 0 1.4rem; }
.fine { color: var(--ink-dim); font-size: .85rem; margin: 1rem 0 0; }

.checks { list-style: none; padding: 0; margin: 0 0 1.4rem; text-align: left; }
.checks li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid #ffffff0a;
}
.checks em { margin-left: auto; font-size: .85rem; color: var(--ink-dim); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #555; flex: none; }
.checks li.ok .dot { background: var(--moss); box-shadow: 0 0 8px var(--moss); }
.checks li.warn .dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.checks li.bad .dot { background: var(--blood); box-shadow: 0 0 8px var(--blood); }

.notice {
  text-align: left; font-size: .92rem; background: #2a120d; border: 1px solid #5a2418;
  border-radius: 8px; padding: 12px 16px; margin-bottom: 1.2rem; color: #f0c9b8;
}
.notice code { background: #0006; padding: 1px 5px; border-radius: 4px; font-size: .85em; }
.notice ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* ---------- buttons ---------- */
.btn {
  appearance: none; cursor: pointer;
  background: var(--stone-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 18px; font-size: .95rem;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover:not(:disabled) { border-color: var(--gold); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(180deg, #b8893a, #8a6224);
  border-color: #e0b765; color: #1a1209; font-weight: 700;
  padding: 12px 28px;
}
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #d0a04a, #9c722c); }

/* ---------- create ---------- */
.create { width: min(760px, 100%); max-height: 100%; overflow: auto; }
.field { display: block; margin-bottom: 1.2rem; }
.field > span { display: block; font-family: "Cinzel", serif; color: var(--gold); font-size: .85rem; margin-bottom: 6px; letter-spacing: .08em; text-transform: uppercase; }
.field.row { display: flex; align-items: center; gap: 16px; }
.field.row > span { margin: 0; }
input {
  width: 100%; background: #0b0907; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 14px; font: inherit;
}
input:focus { outline: none; border-color: var(--gold); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.card {
  text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: #0f0c09; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px;
}
.card b { display: block; font-family: "Cinzel", serif; color: var(--gold-hi); font-size: .95rem; }
.card small { display: block; color: var(--ink-dim); font-size: .85rem; line-height: 1.35; margin-top: 4px; }
.card .mods { font-size: .78rem; color: var(--arcane); margin-top: 6px; font-family: ui-monospace, monospace; }
.card.on { border-color: var(--gold); background: #1e170e; box-shadow: 0 0 0 1px var(--gold) inset; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: transparent; color: var(--ink-dim); border: 0; padding: 7px 16px; cursor: pointer; font: inherit; font-size: .9rem; }
.seg button.on { background: var(--gold); color: #1a1209; }

.load { margin-top: 1rem; }
.bar { height: 8px; background: #0008; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8a6224, var(--gold-hi)); transition: width .3s; }
#load-text { color: var(--ink-dim); font-size: .9rem; margin: .5rem 0 0; }
.load-parts { list-style: none; padding: 0; margin: .6rem 0 0; font-size: .9rem; }
.load-parts li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #ffffff08; }
.load-parts b { font-weight: 400; color: var(--ink-dim); }
.load-parts .ok b { color: var(--moss); }
.load-parts .fail b { color: #e07a62; }
.load-parts .down b { color: var(--gold-hi); }
.load-tip { font-size: .85rem; color: #f0c9b8; background: #2a120d; border: 1px solid #5a2418; border-radius: 8px; padding: 10px 12px; margin: .8rem 0; }
.load-tip code { background: #0006; padding: 1px 5px; border-radius: 4px; }
#btn-skip-tr { margin-top: .4rem; }

/* ---------- game ---------- */
#screen-game.active {
  display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 236px 1fr;
  grid-template-areas: "sheet sheet" "cams log" "controls controls";
  padding: 0; align-items: stretch; justify-content: stretch;
}
#screen-game .sheet { grid-area: sheet; }
#screen-game .cams { grid-area: cams; }
#screen-game .log { grid-area: log; }
#screen-game .controls { grid-area: controls; }
.sheet {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  padding: 12px 24px; background: #0c0a08ee; border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.who strong { color: var(--gold-hi); font-size: 1.1rem; margin-right: 6px; }
.who span { color: var(--ink-dim); font-style: italic; }
.lbl { font-size: .7rem; color: var(--gold); text-transform: uppercase; letter-spacing: .1em; margin-right: 6px; }
.hp { display: flex; align-items: center; gap: 6px; }
.hpbar { width: 120px; height: 10px; background: #2a0f0a; border-radius: 5px; overflow: hidden; border: 1px solid #4a1a12; }
.hpbar i { display: block; height: 100%; background: linear-gradient(90deg, #8f2a1b, #d8553a); transition: width .5s; }
.hp.hit { animation: shake .4s; }
.stats { display: flex; gap: 10px; font-family: ui-monospace, monospace; font-size: .8rem; color: var(--arcane); }
.items { flex: 1; min-width: 160px; color: var(--ink-dim); }
.tools { display: flex; gap: 6px; }
.icon { background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 6px; width: 34px; height: 34px; cursor: pointer; font-size: 1rem; }
.icon:hover { border-color: var(--gold); }

.log {
  overflow-y: auto; padding: 28px max(24px, calc(50% - 400px)) 40px;
  scroll-behavior: smooth;
}
.msg { margin: 0 0 1.3rem; animation: rise .45s ease-out; }
.msg.dm { font-size: 1.15rem; }
.msg.dm::first-letter { font-family: "Cinzel", serif; font-size: 1.5em; color: var(--gold-hi); }
.msg.you { color: #c9d3e8; font-style: italic; padding-left: 14px; border-left: 2px solid #4b5a85; }
.msg.you::before { content: "Sen: "; font-style: normal; color: var(--arcane); font-size: .85em; }
.msg.sys { font-size: .9rem; color: var(--ink-dim); text-align: center; font-family: "Cinzel", serif; letter-spacing: .05em; }
.msg.sys.good { color: var(--moss); }
.msg.sys.bad { color: #e07a62; }
.msg.thinking { color: var(--ink-dim); font-style: italic; }
.msg.thinking::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4) infinite; }

.controls { padding: 12px max(16px, calc(50% - 420px)) 16px; background: #0c0a08ee; border-top: 1px solid var(--line); }
.inputrow { display: flex; gap: 10px; align-items: center; }
.textform { flex: 1; display: flex; gap: 8px; }
.mic {
  flex: none; width: 58px; height: 58px; border-radius: 50%;
  border: 2px solid var(--gold); background: radial-gradient(circle at 40% 35%, #3a2c18, #120e09);
  color: var(--gold-hi); cursor: pointer; transition: transform .1s, box-shadow .2s;
  touch-action: none; user-select: none;
}
.mic:hover { box-shadow: 0 0 16px #d0a64e55; }
.mic.live { background: radial-gradient(circle at 40% 35%, #c2412c, #5a150c); border-color: #ff9a80; color: #fff; box-shadow: 0 0 0 6px #b2402c33, 0 0 30px #b2402c88; animation: pulse 1.1s infinite; }
.mic:disabled { opacity: .4; cursor: not-allowed; }
.hint { margin: 8px 0 0; font-size: .82rem; color: var(--ink-dim); text-align: center; min-height: 1.2em; }
.hint.live { color: #ffb4a2; font-style: italic; }
kbd { background: #2a2219; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-size: .8em; }

.roll-prompt {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 10px; padding: 10px; border: 1px dashed var(--gold); border-radius: 8px;
  background: #1d160c; animation: rise .3s;
}
#roll-reason { color: var(--gold-hi); }
.btn.roll { background: linear-gradient(180deg, #6b4fb3, #3e2c78); border-color: #a593e6; color: #fff; font-weight: 700; }

/* ---------- dice ---------- */
.dice {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: #000c; backdrop-filter: blur(3px);
}
.die-wrap { position: relative; width: 190px; height: 190px; }
.die { width: 100%; height: 100%; filter: drop-shadow(0 0 30px #7f8fd688); }
.die polygon, .die line { stroke: #c9d0ff; stroke-width: 1.4; stroke-linejoin: round; }
.d-outer { fill: #2b2560; }
.d-face { fill: #3d3582; }
.dice.spinning .die { animation: tumble .18s linear infinite; }
.die-num {
  position: absolute; left: 0; right: 0; top: 47%; text-align: center;
  font: 700 2.6rem "Cinzel", serif; color: #fff; text-shadow: 0 2px 6px #000;
}
.dice-detail { font-family: ui-monospace, monospace; color: var(--ink-dim); margin: 18px 0 4px; min-height: 1.3em; }
.dice-verdict { font: 700 2rem "Cinzel", serif; margin: 0; min-height: 1.3em; }
.dice-verdict.good { color: var(--moss); text-shadow: 0 0 20px #6f9b5588; }
.dice-verdict.bad { color: #e8634a; text-shadow: 0 0 20px #b2402c88; }
.dice.crit .die { filter: drop-shadow(0 0 40px var(--gold-hi)); }

/* ---------- ending ---------- */
.ending { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: #000d; padding: 20px; text-align: center; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tumble { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(.92); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px #b2402c11, 0 0 30px #b2402c88; } }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .sheet { padding: 10px 14px; gap: 6px 14px; }
  .hpbar { width: 80px; }
  .panel { padding: 22px 18px; }
}
.copy-btn { cursor: pointer; font: inherit; font-size: .8rem; margin-left: 6px; padding: 1px 8px; border-radius: 4px; border: 1px solid #8a5a3e; background: #3a1b12; color: #f0c9b8; }
.copy-btn:hover { border-color: var(--gold); }
.notice small, .load-tip small { opacity: .8; }
.fine.left { text-align: left; margin: -.2rem 0 1rem; font-style: italic; }

/* ---------- ilerleme / kamp ---------- */
.overlay { position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; background: #000c; padding: 20px; }
.overlay .panel { width: min(560px, 100%); }
.lvl, .who .lvl, .camp-hero .who .lvl { font-family: "Cinzel", serif; font-size: .8rem; color: #1a1209; background: var(--gold); border-radius: 4px; padding: 1px 7px; margin-left: 6px; font-style: normal; }
.xp { display: flex; align-items: center; gap: 6px; }
.xpbar { width: 120px; height: 8px; background: #141a2e; border-radius: 4px; overflow: hidden; border: 1px solid #2c3866; }
.xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4b5fb8, #9fb0ff); transition: width .6s; }
.xp.mini .xpbar { width: 70px; }
.camp { width: min(680px, 100%); max-height: 100%; overflow: auto; }
.camp .sub { margin-bottom: 1rem; }
.camp-hero { background: #0f0c09; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 1.2rem; }
.camp-hero .who strong { color: var(--gold-hi); font-size: 1.25rem; font-family: "Cinzel", serif; margin-right: 6px; }
.camp-hero .who span { color: var(--ink-dim); font-style: italic; }
.camp-hero .bars { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 10px; font-size: .95rem; }
.points { font-style: normal; color: var(--gold-hi); text-transform: none; letter-spacing: 0; margin-left: 8px; }
.stat-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { display: flex; align-items: center; justify-content: space-between; background: #0f0c09; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.stat b { font-family: "Cinzel", serif; color: var(--arcane); font-weight: 500; }
.stat .val { font-family: ui-monospace, monospace; font-size: 1.05rem; }
.stat .val small { color: var(--moss); font-size: .75rem; margin-left: 3px; }
.stat button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold); background: #2a2010; color: var(--gold-hi); cursor: pointer; font-size: 1rem; line-height: 1; }
.stat button:disabled { opacity: .25; cursor: default; }
.item-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.item-list li { background: #0f0c09; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; font-size: .92rem; }
.item-list li.magic { border-color: #4b5fb8; color: #c9d3ff; }
.item-list li em { font-style: normal; color: var(--moss); font-size: .8rem; margin-left: 4px; }
.camp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: .4rem; }
.linkbtn { background: none; border: 0; color: var(--ink-dim); text-decoration: underline; cursor: pointer; font: inherit; font-size: .82rem; margin-top: 1rem; padding: 0; }
.linkbtn:hover { color: #e07a62; }
.end-summary { color: var(--ink-dim); font-size: .95rem; white-space: pre-line; }
.msg.sys.lvlmsg { color: var(--gold-hi); font-size: 1.05rem; text-shadow: 0 0 14px #d0a64e66; }
.msg.sys.xpmsg { color: #9fb0ff; }
@media (max-width: 640px) { .stat-rows { grid-template-columns: 1fr; } }

/* ---------- ses ayarları ---------- */
#screen-game { position: relative; }
.audio-pop {
  position: absolute; right: 16px; top: 64px; z-index: 15; width: 280px;
  background: linear-gradient(180deg, var(--stone-2), var(--stone)); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px; box-shadow: 0 20px 50px #000c; animation: rise .2s;
}
.audio-pop label { display: grid; grid-template-columns: 52px 1fr 38px; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .9rem; }
.audio-pop label span { font-family: "Cinzel", serif; color: var(--gold); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.audio-pop label b { font-weight: 400; color: var(--ink-dim); font-family: ui-monospace, monospace; font-size: .8rem; text-align: right; }
.audio-pop input[type=range] { width: 100%; accent-color: var(--gold); padding: 0; border: 0; background: none; }
.audio-pop .btn { width: 100%; padding: 7px; font-size: .85rem; }

/* ---------- webcam portreleri ---------- */
.cams { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 16px 0 16px 16px; min-height: 0; }
.cam {
  position: relative; width: 210px; border-radius: 10px; overflow: hidden;
  background:
    linear-gradient(#ffffff0a 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, #ffffff0a 1px, transparent 1px) 0 0 / 14px 14px,
    radial-gradient(circle at 50% 40%, #2f5a5c, #173436);
  border: 2px solid #0c1c1d; box-shadow: 0 10px 30px #0008, inset 0 0 0 1px #ffffff10;
  transition: box-shadow .2s, border-color .2s;
}
.cam-name {
  font-family: "Cinzel", serif; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  text-align: center; color: #f4ecd8; padding: 6px 8px 0; text-shadow: 0 1px 0 #000;
}
.cam-face { width: 100%; aspect-ratio: 1 / 1; padding: 6px 18px 0; }
.cam-face svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cam-meter { display: flex; align-items: flex-end; gap: 3px; height: 18px; padding: 0 10px 6px; }
.cam-meter i { flex: 1; height: 8%; background: #7fb5ff; border-radius: 1px; opacity: .85; transition: height .08s; }
.cam.talking { border-color: var(--gold); box-shadow: 0 0 0 2px #d0a64e55, 0 0 28px #d0a64e44; }
#cam-hero .cam-meter i { background: #9fe0a0; }
.cam .eyes { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
#cam-hero .eyes { animation-delay: 2.3s; animation-duration: 4.7s; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

@media (max-width: 820px) {
  #screen-game.active { grid-template-columns: 1fr; grid-template-areas: "sheet" "cams" "log" "controls"; grid-template-rows: auto auto 1fr auto; }
  .cams { flex-direction: row; justify-content: center; padding: 10px 10px 0; }
  .cam { width: 132px; }
  .cam-name { font-size: .62rem; }
}