:root {
  --bg-1: #e5d8be;
  --bg-2: #b44f2f;
  --bg-3: #122b2b;
  --panel: rgba(250, 245, 235, 0.92);
  --panel-strong: #fff5e3;
  --ink: #102020;
  --muted: #5d5b52;
  --accent: #d4522b;
  --accent-2: #f0bd4d;
  --shadow: 0 20px 60px rgba(40, 17, 7, 0.18);
}

@font-face {
    font-family: interFont;
    src: url(assets/Inter-VariableFont.ttf);
}

@media (max-width: 999px) {
  .node {
    grid-template-columns: 1fr;
  }

  .node-image {
    width: auto;
  }
}

body {
    margin:0px;
    overflow:hidden;
}

#app {
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    background: radial-gradient(circle at top left, rgba(255, 243, 214, 0.9), transparent 32%),
    radial-gradient(circle at bottom right, rgba(240, 189, 77, 0.28), transparent 30%),
    linear-gradient(135deg, var(--bg-1), #f4e9d4 38%, #dfc39b 60%, #c86a40 100%);
}

*,::after,::before {
    box-sizing: border-box;
}

body, p, div, h1, h2, h3, li, button, input, select, textarea { 
    font-family:interFont;
    font-size:16px;
    color:#666;
}

#page {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    max-width: 1200px;
    opacity:0;
    transition: opacity 1s;
}

#page.fade-in {
    opacity:1;
}

.node {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 24px;
  align-items: start;
}

.node > h1 {
    width: 100%;
    margin: 0;
    height:70px;
    line-height:70px;
    font-size:40px;
    color: rgba(0,0,0,0.8);
    grid-column: 1 / -1;
}

.node-image {
    width: 500px;
    grid-column: 1;
    border-radius: 16px;
    overflow: hidden;
}

.node-image > img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.right-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.story {
    min-width: 500px;
    background-color:#FDF2D9;
    border-radius:16px;
    padding:20px;
}

.node > .story {
    grid-column: 2;
}

.node-intro {
    line-height:26px;
}

.choice-btn {
    position:relative;
    width:100%;
    border:0px;
    background-color:#fff;
    border-radius:10px;
    cursor: pointer;
    line-height:26px;
    padding:10px;
    margin-top:10px;
    text-align: left;
    transition: background-color 0.5s;
}

.choice-btn:hover {
    background-color: #F2A900;
}

.choice-btn > .choice-label {
    position:absolute;
    top:8px;
    left:10px;
    width:30px;
    height:30px;
    line-height:30px;
    color:#fff;
    background-color:#000;
    border-radius:30px;
    text-align: center;
}

.choice-btn > .choice-text {
    position:relative;
    margin-left:50px;
    color:#000;
}

.dimension {
    line-height:30px;
    color: #000;
}

.scorebar {
    position:relative;
    width:100%;
    height:10px;
    border-radius: 10px;
    background-color:rgba(0,0,0,0.1);
    overflow:hidden;
    margin-top:10px;
    margin-bottom:10px;
}

.scorebar > .score {
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    width:0.1%;
    background: linear-gradient(90deg, #d4522b, #f0bd4d);
    transition: width 0.5s;
}