:root {
  --panel: #1b1f27;
  --panel2: #232936;
  --line: #3a4254;
  --text: #f0f2f7;
  --muted: #b8c0d4;
  --accent: #c9a96a;
  --ok: #89d185;
  --flip-speed: 0.75s;
  --flip-radius: 5px;
  --card-shadow: 0 4px 10px rgba(0,0,0,0.18);
  --main-height: 92vh;
  --field-height: 84vh;
  --controls-height: 6vh;
  --ui-gap: 16px;
}
* { box-sizing: border-box; }
html{
  overflow-x:hidden;
  overscroll-behavior-x:none;
}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background: radial-gradient(circle at 50% 20%, #3b235a 0%, #1a1028 28%, #09070d 62%, #000000 100%);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}

/* ── Layout ─────────────────────────────────────────── */

.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1500px;
  margin:0 auto;
  padding:0 14px 14px;
}
.topinfo{
  height:8vh;
  min-height:64px;
  margin-bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.topinfo-logo{
  max-height:100%;
  max-width:100%;
  object-fit:contain;
}
.main{
  display:grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap:var(--ui-gap);
  align-items:stretch;
  height:var(--field-height);
  min-height:var(--field-height);
  margin:0;
}
.left-column{
  display:block;
  height:100%;
  min-height:0;
  min-width:0;
}

/* ── Spread & Cross  (Phase 1: overflow visible für Glow) ── */

.spread{
  position:relative;
  background: rgba(235,235,255,0.08);
  backdrop-filter: blur(2px);
  border:1px solid var(--line);
  border-radius:16px;
  padding:8px;
  height:100%;
  min-height:0;
  overflow:visible;
}

/* ── Controls ───────────────────────────────────────── */

.left-controls{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  align-content:flex-start;
  padding:0;
  min-height:var(--controls-height);
  width:100%;
  margin:16px 0 6px;
}
button, .filelabel{
  border:1px solid var(--accent);
  background:var(--accent);
  color:#1a140a;
  font-weight:700;
  padding:12px 16px;
  border-radius:10px;
  cursor:pointer;
  font-size:15px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
button:disabled{
  opacity:.5;
  cursor:default;
}
input[type="file"]{ display:none; }
.small{
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
}

/* ── Cross Grid (Desktop 5×3) ───────────────────────── */

.cross{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:visible;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap:2.5%;
  padding:0;
}
.cross-column{
  display:grid;
  gap:2.5%;
  position:relative;
  min-width:0;
  min-height:0;
}
.cross-column.left-layout{
  grid-column:1 / span 3;
  grid-row:1 / span 3;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
}
.cross-column.right-layout{
  grid-column:4 / span 2;
  grid-row:1 / span 3;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(3,1fr);
}
.slot{
  position:relative;
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  isolation:isolate;
}
.ghost-card{
  position:absolute;
  height:95%;
  aspect-ratio: 9 / 16;
  min-height:72px;
  border:1px dashed rgba(255,255,255,0.12);
  border-radius:10px;
  opacity:.18;
  pointer-events:none;
}
.ghost-card.rotated{
  height:95%;
  aspect-ratio:9 / 16;
  transform:rotate(90deg);
  transform-origin:center center;
}

/* ── Deck Stage & Cards ─────────────────────────────── */

.deck-stage{
  position:absolute;
  inset:14px;
  z-index:10;
  pointer-events:none;
}
.deal-card{
  position:absolute;
  width:86px;
  height:153px;
  border-radius:var(--flip-radius);
  transition:
    left 760ms cubic-bezier(.22,1,.36,1),
    top 760ms cubic-bezier(.22,1,.36,1),
    transform 760ms cubic-bezier(.22,1,.36,1);
  overflow:visible;
  will-change:left, top, transform;
}
.deal-card-container{
  width:100%;
  height:100%;
  perspective:1400px;
}
.deal-card-inner{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform var(--flip-speed) cubic-bezier(0.22, 0.75, 0.2, 1);
  transform-origin:center bottom;
  transform:translateY(0) rotateX(0deg) scale(1);
}
.deal-card.flipped .deal-card-inner{
  transform:translateY(-100%) rotateX(180deg) scale(1.06);
}
.deal-card-face{
  position:absolute;
  inset:0;
  border-radius:var(--flip-radius);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:var(--card-shadow);
  transition:box-shadow var(--flip-speed) ease;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  overflow:hidden;
  background-color:#202634;
}
.deal-card-face::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--flip-radius);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  pointer-events:none;
}
.deal-card-visible{ transform:rotateX(0deg); }
.deal-card-hidden{ transform:rotateX(180deg); }
.deal-card.flipped .deal-card-face{
  box-shadow:0 8px 18px rgba(0,0,0,0.22);
}
.deal-card.focused{
  z-index: 999 !important;
  transform: scale(1.06) !important;
}
.deal-card.focused .deal-card-face{
  box-shadow:0 0 30px rgba(201,169,106,0.95), 0 0 56px rgba(201,169,106,0.55), 0 14px 28px rgba(0,0,0,0.22);
}

/* ── Jump Buttons ───────────────────────────────────── */

.jump-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:0;
  flex:1 1 220px;
  min-width:220px;
}
.jump-btn{
  min-width:40px;
  justify-content:center;
  padding:8px 10px;
  font-size:14px;
  background:#141924;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
}
.jump-btn.active{
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:0 0 0 1px rgba(201,169,106,0.45);
}

/* ── Right Column / Panels ──────────────────────────── */

.right-column{
  display:grid;
  grid-template-rows:19fr 39fr 25fr;
  row-gap:var(--ui-gap);
  height:85vh;
  min-height:85vh;
  align-self:start;
}
.panel{
  background:rgba(27,31,39,0.88);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
  overflow:auto;
  min-height:0;
  min-width:0;
  max-height:100%;
  box-sizing:border-box;
}
.panel h2{
  margin:0 0 12px;
  font-size:20px;
  color:var(--accent);
}
.text-panel{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding-bottom:0;
  min-height:0;
}
.text-panel-header{
  flex:0 0 auto;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.text-panel-header h2{ margin:0; }
.text-scroll{
  flex:1 1 auto;
  overflow:auto;
  min-height:0;
  max-height:100%;
  padding-top:6px;
  padding-right:2px;
}

/* ── Profile / Entries ──────────────────────────────── */

.profile-static{
  display:grid;
  gap:8px;
  font-size:15px;
  line-height:1.45;
  color:var(--text);
}
.profile-line strong{ color:var(--accent); }
.entry{
  padding:36px 0 42px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  scroll-margin-top: 0;
}
.entry:first-child{ padding-top:0; }
.entry:last-child{ border-bottom:0; }
.entry-title{
  font-size:16px;
  font-weight:700;
  color:var(--accent);
  margin:0 0 8px;
  padding:0;
}
.entry-text{
  font-size:15px;
  line-height:2.04;
  color:var(--text);
  white-space:pre-wrap;
  margin:0;
  padding:0;
}
.status{
  margin-top:0;
  color:var(--muted);
  font-size:14px;
  white-space:pre-wrap;
}

/* ── Audio ──────────────────────────────────────────── */

.audio-meta{
  color:var(--muted);
  font-size:13px;
  margin-bottom:0;
}
.audio-player{
  width:100%;
  margin-bottom:12px;
}
.tracks{
  display:grid;
  gap:8px;
  max-height:140px;
  overflow:auto;
}
.track-btn{
  width:100%;
  text-align:left;
  cursor:pointer;
  background:#141924;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 10px;
  font-size:14px;
}
.track-btn.active{
  border-color:var(--accent);
  color:var(--accent);
}

/* ── Positions ──────────────────────────────────────── */

.positions{
  margin-top:20px;
  background:rgba(27,31,39,0.88);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
}
.positions h2{
  margin:0 0 12px;
  font-size:20px;
  color:var(--accent);
}
.positions-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px 18px;
}
.pos-item{
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  background:rgba(255,255,255,0.02);
}

/* ── Confirm Dialog ─────────────────────────────────── */

#confirmBox.hidden, .hidden{ display:none !important; }
#confirmBox{
  position:fixed;
  inset:0;
  z-index:80;
  background:rgba(0,0,0,0.35);
}
.confirm-dialog{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#f3f3f3;
  color:#111;
  border-radius:16px;
  padding:18px;
  width:min(90vw, 340px);
  box-shadow:0 12px 30px rgba(0,0,0,0.28);
}
.confirm-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
}
.confirm-actions button{
  width:100%;
  justify-content:center;
}

/* ── Start Screen (Phase 2) ─────────────────────────── */

.start-screen{
  position:absolute;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.55);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  border-radius:16px;
}
.start-dialog{
  text-align:center;
  padding:36px 32px;
  max-width:420px;
  width:90%;
}
.start-dialog h2{
  font-size:22px;
  color:var(--accent);
  margin:0 0 16px;
  line-height:1.4;
}
.start-dialog p{
  color:var(--muted);
  font-size:15px;
  margin:0 0 18px;
  line-height:1.5;
}
.start-dialog input[type="text"]{
  display:block;
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  color:var(--text);
  font-size:15px;
  outline:none;
  margin-bottom:22px;
  transition:border-color 0.2s;
}
.start-dialog input[type="text"]:focus{
  border-color:var(--accent);
}
.start-dialog input[type="text"]::placeholder{
  color:var(--muted);
  opacity:0.7;
}
.start-btn{
  font-size:17px;
  padding:14px 32px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#1a140a;
  font-weight:700;
  border-radius:12px;
  cursor:pointer;
  letter-spacing:0.02em;
  transition:transform 0.15s, box-shadow 0.2s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.start-btn:hover{
  transform:scale(1.04);
  box-shadow:0 0 24px rgba(201,169,106,0.5);
}

/* ── Responsive: Tablet (≤1200px) ───────────────────── */

@media (max-width:1200px){
  .main{ grid-template-columns:1fr; height:auto; min-height:0; max-height:none; }
  .left-column{ height:auto; min-height:0; max-height:none; }
  .spread{ height:auto; min-height:760px; max-height:none; }
  .cross{ min-width:0; min-height:520px; height:520px; }
  .left-controls{ height:auto; min-height:0; max-height:none; }
  .right-column{ grid-template-rows:auto auto auto; height:auto; min-height:0; max-height:none; margin-top:0; }
  .text-scroll{ max-height:50vh; }
  .positions-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ── Responsive: Mobile (≤768px) — Phase 4: 3×5 Grid ── */

@media (max-width:768px){
  /* Banner collapse when game starts */
  .game-started .topinfo{
    display:none;
  }
  .topinfo{
    height:auto;
    min-height:44px;
    padding:8px 0;
  }

  /* Reorder: controls directly after card field */
  .wrap{
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    max-width:100%;
  }
  .main{
    display:contents;
  }
  .topinfo{ order:1; }
  .left-column{ order:2; }
  .left-controls{ order:3; margin:10px 0 6px; }
  .right-column{ order:4; }
  #folderStatus{ order:5; }
  .positions{ order:6; }
  #confirmBox{ order:7; }
  .spread{
    min-height:auto;
    height:auto;
    aspect-ratio: 3 / 5;
    max-height:85dvh;
    overflow:hidden;
  }

  /* 3 Spalten × 5 Zeilen: flat grid, keine cross-columns */
  .cross{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    min-height:0;
    height:100%;
  }

  /* Cross-Columns zurücksetzen: alle Slots als direkte Grid-Kinder */
  .cross-column.left-layout,
  .cross-column.right-layout{
    display:contents;
  }

  /* ── Slots Desktop‐Reihenfolge im neuen Grid platzieren ──
     Mobile Layout:
       Row 1:  X    5    X
       Row 2:  4   1/2   6
       Row 3:  X    3    X
       Row 4:  7    8    9
       Row 5:  10   X    S(11)

     left-layout Kinder (9 Slots in DOM-Reihenfolge):
       1: leer       → row1 col1
       2: slot5      → row1 col2
       3: leer       → row1 col3
       4: slot4      → row2 col1
       5: slot1      → row2 col2
       6: slot6      → row2 col3
       7: leer       → row3 col1
       8: slot3      → row3 col2
       9: leer       → row3 col3

     right-layout Kinder (6 Slots in DOM-Reihenfolge):
       1: slot9      → row4 col3  (Hoffnungen)
       2: slot10     → row5 col1  (Tendenz)
       3: slot7      → row4 col1  (Haltung)
       4: slot8      → row4 col2  (Umfeld)
       5: leer       → row5 col2
       6: slot11     → row5 col3  (Stapel)
  */

  /* left-layout: row 1-3 */
  .cross-column.left-layout > .slot:nth-child(1){ grid-row:1; grid-column:1; }
  .cross-column.left-layout > .slot:nth-child(2){ grid-row:1; grid-column:2; }
  .cross-column.left-layout > .slot:nth-child(3){ grid-row:1; grid-column:3; }
  .cross-column.left-layout > .slot:nth-child(4){ grid-row:2; grid-column:1; }
  .cross-column.left-layout > .slot:nth-child(5){ grid-row:2; grid-column:2; }
  .cross-column.left-layout > .slot:nth-child(6){ grid-row:2; grid-column:3; }
  .cross-column.left-layout > .slot:nth-child(7){ grid-row:3; grid-column:1; }
  .cross-column.left-layout > .slot:nth-child(8){ grid-row:3; grid-column:2; }
  .cross-column.left-layout > .slot:nth-child(9){ grid-row:3; grid-column:3; }

  /* right-layout: row 4-5
     DOM: slot9, slot10, slot7, slot8, leer, slot11
     Ziel:
       Row4: 7(Haltung)  8(Umfeld)  9(Hoffnungen)
       Row5: 10(Tendenz)  X         S(11)          */
  .cross-column.right-layout > .slot:nth-child(1){ grid-row:4; grid-column:3; } /* slot9 */
  .cross-column.right-layout > .slot:nth-child(2){ grid-row:5; grid-column:1; } /* slot10 */
  .cross-column.right-layout > .slot:nth-child(3){ grid-row:4; grid-column:1; } /* slot7 */
  .cross-column.right-layout > .slot:nth-child(4){ grid-row:4; grid-column:2; } /* slot8 */
  .cross-column.right-layout > .slot:nth-child(5){ grid-row:5; grid-column:2; } /* leer */
  .cross-column.right-layout > .slot:nth-child(6){ grid-row:5; grid-column:3; } /* slot11 */

  .right-column{
    grid-template-rows:auto auto auto;
    height:auto;
    min-height:0;
  }
  .text-scroll{ max-height:50vh; }
  .left-controls{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .left-controls > button{
    flex:1 1 auto;
    padding:10px 8px;
    font-size:13px;
    white-space:nowrap;
  }
  .jump-buttons{
    flex:0 0 100%;
    min-width:100%;
  }
  .positions-grid{ grid-template-columns:1fr; }
}