/* Comic-Fantasy-Look: dunkles Teal-Blau, Gold-Rahmen, Menü links, Holzplanken */
@font-face{font-family:"SFFont";src:url(assets/fonts/sf.woff2) format("woff2");font-display:swap}
:root{--bg:#0b1f2e;--panel:#0f3148;--line:#1d5a7a;--text:#f1ecd6;--dim:#9fc0d0;--gold:#f5c542;--frame:#b98b2f;--ink:#06131c;
--main-bg:rgba(8,26,40,.74);
--ol:-2px -2px 0 #06131c,2px -2px 0 #06131c,-2px 2px 0 #06131c,2px 2px 0 #06131c,0 3px 0 #06131c}
body{font-family:"SFFont","Trebuchet MS","Segoe UI",Arial,sans-serif;font-weight:600;image-rendering:auto;letter-spacing:0;
  background-color:var(--bg);background-image:radial-gradient(circle at 30% 20%,#12405c,#081a28 70%);background-attachment:fixed}
.pic img{image-rendering:auto}

/* Rundungen */
.stage,.item,.day,.collect,.casebtn,.card,.box,.hero,.player{border-radius:10px!important}
input,textarea,select,button,.btn,nav a,.pic,.role,.avatar{border-radius:8px!important}
.collect .bar{border-radius:8px!important;overflow:hidden}

/* Menü links */
header{position:fixed;left:0;top:0;bottom:0;width:270px;overflow-y:auto;z-index:5;display:flex;flex-direction:column;
  align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:14px;padding:14px;
  background:linear-gradient(#134868,#0a2335);border-bottom:0;border-right:4px solid var(--frame);box-shadow:4px 0 0 var(--ink)}
header h1{margin:0;text-align:center}
header h1 a{color:var(--gold);text-shadow:var(--ol);font-size:24px}
main{margin:0 0 0 270px;max-width:1200px;min-height:100vh;padding:24px 32px;background:var(--main-bg)}
.player{display:flex;gap:10px;align-items:center;padding:8px;background:linear-gradient(#0f3148,#0a2335);border:3px solid var(--frame);box-shadow:inset 0 0 0 2px var(--ink)}
.avatar{display:grid;place-items:center;flex:none;width:56px;height:56px;border:3px solid var(--gold);background:#0a2335 center/cover;
  font-size:26px;color:var(--gold);text-shadow:var(--ol)}
.pname{font-size:15px;color:var(--text);word-break:break-all}
.coins{font-size:18px;color:#fff;text-shadow:var(--ol)}
.coin{width:24px;height:24px;border:2px solid var(--ink);background:radial-gradient(circle at 35% 30%,#fff2a8,#e8b52a 60%,#a8741a)}
.bal{color:#fff;font-size:18px}.bal::after{content:""}
nav{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex-wrap:nowrap}
nav a{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 12px;color:#f6e9b5;font-weight:800;font-size:15px;
  text-transform:uppercase;letter-spacing:.5px;text-shadow:0 2px 0 var(--ink);
  background:linear-gradient(#2a86ae,#145276 55%,#0f4565);border:2px solid var(--ink);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 3px 0 var(--ink)}
nav a:hover{filter:brightness(1.15);color:#f6e9b5}
nav a.on{border-color:var(--gold)}
nav a span{flex:1;text-align:center}
nav a.btn{background:linear-gradient(#ffcf4a,#e8931a);color:#3b1a05;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.ico{display:block;width:36px;height:36px;object-fit:contain}
h2,h3{color:var(--gold);text-shadow:var(--ol)}

/* Tafeln in Blau mit Goldrahmen */
.stage,.item,.day,.card{background:linear-gradient(#17506d,#0e3550);border:3px solid var(--frame);box-shadow:inset 0 0 0 2px var(--ink),0 4px 0 var(--ink)}
.card{border-bottom:6px solid var(--c)}
.stage::before{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.pic{background:radial-gradient(circle,color-mix(in srgb,var(--c) 38%,#0a2335),color-mix(in srgb,var(--c) 12%,#06131c))}
.day{border-color:#2a6585}.day b{color:var(--text)}
.day.done{border-color:#a67a28;background:#10283a}
.day.next{background:linear-gradient(#7a5a12,#54400a);border-color:var(--gold)}
.board th{color:var(--gold)}.board td{border-bottom:1px solid var(--line)}
.board tr.me td{background:#134868}

/* Holzplanke (Münz-Quelle) */
.collect{background:linear-gradient(#8a5629,#5d381d 60%,#4a2c16);border:3px solid var(--ink);color:#fff0c8;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22),inset 0 -3px 0 rgba(0,0,0,.35),0 4px 0 var(--ink)}
.collect .odds{color:#f1d9a0}
.collect .bar{background:var(--ink);border:3px solid var(--ink)}
.collect .bar i{background:linear-gradient(#ffe27a,#e8931a)}

/* Knöpfe */
button,.btn{background:linear-gradient(#ffcf4a,#e8931a);color:#3b1a05;border:3px solid var(--ink);font-weight:800;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 4px 0 var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.4)}
button:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 1px 0 var(--ink)}
button:disabled{filter:grayscale(.6)}
button.ghost,.btn.alt{background:linear-gradient(#2a86ae,#145276);color:#f6e9b5;text-shadow:0 2px 0 var(--ink);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 3px 0 var(--ink)}
button.casebtn{background:linear-gradient(#17506d,#0e3550);color:var(--text);border:3px solid var(--frame);text-shadow:none;
  box-shadow:inset 0 0 0 2px var(--ink),0 4px 0 var(--ink)}
button.casebtn b{color:var(--text)}
button.casebtn.sel{border-color:var(--gold);box-shadow:inset 0 0 0 2px var(--ink),0 0 0 3px var(--gold),0 4px 0 var(--ink)}

input,textarea,select{background:#0a2335;color:var(--text);border:3px solid var(--ink);box-shadow:inset 0 0 0 1px var(--line);font-weight:600}
.reveal{background:radial-gradient(circle,rgba(20,90,130,.85),rgba(0,0,0,.94))}

/* Handy: Menü wird zur Leiste oben */
@media (max-width:860px){
  header{position:static;width:auto;flex-direction:column;border-right:0;border-bottom:4px solid var(--frame);box-shadow:0 4px 0 var(--ink)}
  nav{flex-direction:row;flex-wrap:wrap}nav a{flex:1 1 140px}
  main{margin-left:0;padding:16px}
}

.gatebox{background:linear-gradient(#17506d,#0e3550);border:3px solid var(--frame);box-shadow:inset 0 0 0 2px var(--ink),0 4px 0 var(--ink);border-radius:10px}

/* ===== Handy-Ansicht ===== */
@media (max-width:860px){
  header{padding:10px;gap:10px}
  header h1 a{font-size:20px}
  .avatar{width:44px;height:44px;font-size:20px}
  nav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}
  nav a{flex:0 0 auto;min-width:120px;min-height:44px}
  nav form{flex:0 0 auto}
  main{padding:14px}
  h2{font-size:20px}
  .days{grid-template-columns:repeat(4,1fr)}
  .cases{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .collect{flex-direction:column;align-items:stretch}
  .actions{flex-wrap:wrap}
  button{min-height:44px}
  .card.big{width:min(260px,80vw)}
  input,textarea,select{font-size:16px}
}

/* Spielen: Optionen im Holz-und-Gold-Look */
.controls{background:linear-gradient(#17506d,#0e3550);border:3px solid var(--frame);box-shadow:inset 0 0 0 2px var(--ink),0 4px 0 var(--ink);border-radius:10px}
button.pill{background:linear-gradient(#17506d,#0e3550);color:var(--text);border:3px solid var(--ink);text-shadow:none;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 3px 0 var(--ink)}
button.pill.on{background:linear-gradient(#ffcf4a,#e8931a);color:#3b1a05}
nav a.ready::after{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:#7bd88f;box-shadow:0 0 8px #7bd88f;margin:0}
@media (max-width:860px){.cases.big{grid-template-columns:repeat(2,1fr)}.cases.big .casebtn .pic{height:110px}}

.spinbox{background:linear-gradient(#17506d,#0e3550);border:3px solid var(--frame);box-shadow:inset 0 0 0 2px var(--ink),0 8px 0 var(--ink);border-radius:12px!important}
.spinhead{text-shadow:var(--ol)}

.evbar{border-radius:10px!important;box-shadow:inset 0 0 0 2px var(--ink)}
.chatbox{background:linear-gradient(#17506d,#0e3550);border:3px solid var(--frame);box-shadow:inset 0 0 0 2px var(--ink),0 4px 0 var(--ink);border-radius:10px}
.chat{border-radius:8px}
button.mini{min-height:0!important;padding:0 6px;box-shadow:none}

.rwpanel{background:linear-gradient(#134868,#0a2335);border:3px solid var(--frame);border-right:0;box-shadow:inset 0 0 0 2px var(--ink),0 4px 0 var(--ink);border-radius:10px 0 0 10px!important}
button.rwtab{border-radius:10px 0 0 10px!important;border-right:0;margin-right:-3px}
.confirm,.result,.toast{border-radius:10px!important;background:linear-gradient(#17506d,#0e3550)}
.pickitem.sel{outline-color:var(--gold)}

.mcard{background:linear-gradient(#17506d,#0e3550);border:3px solid var(--frame);box-shadow:inset 0 0 0 2px var(--ink),0 4px 0 var(--ink);border-radius:10px}
.mcard.active{border-color:var(--gold)}.mcard.done{border-color:#7bd88f}
.ntf{background:linear-gradient(#17506d,#0e3550);border-radius:10px}
.unl{border-radius:8px}
.slot{background:linear-gradient(#17506d,#0e3550);border-radius:10px;border-color:var(--frame)}
.mpic{border-radius:10px;background:linear-gradient(#0e3550,#09263a)}
.herobox{border-radius:10px}
.charpanel,.backpack,.profhead,.opp,.gcard{background:linear-gradient(#17506d,#0e3550);border:3px solid var(--frame);box-shadow:inset 0 0 0 2px var(--ink),0 4px 0 var(--ink);border-radius:10px}
.dslot,.bpgrid,.detail,.stat,.mrow2,.gchat,.logrow{border-radius:8px}
.cell{border-radius:6px}