:root {
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
      color:#f8e6cd;
      background:#120f0d}

    * {
      box-sizing:border-box}

    body {
      margin:0;
      background:radial-gradient(circle at top,#3b211b,#120f0d 65%);
      min-height:100vh}

    .wrap {
      max-width:780px;
      margin:auto;
      padding:20px 14px 50px}


    .ending-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 20px 0;
}
h2 {
    white-space: pre-line;
}
    .ending-card {
        padding: 20px;
        border: 2px solid #444;
        border-radius: 10px;
        background: #222;
        text-align: center;
        font-weight: bold;
    }
    header {
      border:2px solid #e88b34;
      background:#27150e;
      padding:18px;
      text-align:center;
      box-shadow:6px 6px #090706}

    h1 {
      font-size:clamp(30px,7vw,48px);
      margin:0;
      color:#ffc04f;
      letter-spacing:3px}

    small,.muted {
      color:#c5ab92}

    .tag {
      letter-spacing:2px;
      color:#e7a874;
      font-size:12px}

    main {
      margin-top:18px;
      border:1px solid #79513c;
      background:#211813;
      padding:20px;
      min-height:380px}

    h2 {
      font-size:20px;
      color:#ffbd62;
      margin:0 0 14px}

    .stats {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:8px;
      margin:14px 0}

    .stat {
      border:1px solid #624432;
      padding:9px;
      background:#2c201a;
      font-size:12px}

    .stat strong {
      display:block;
      font-size:18px;
      color:#ffce83}

    .story {
      white-space:pre-wrap;
      line-height:1.6;
      background:#160f0c;
      padding:14px;
      border-left:3px solid #ed8c36;
      margin:14px 0;
      overflow-wrap:anywhere}

    .actions {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
      gap:9px;
      margin-top:15px}

    button {
      font:inherit;
      min-height:49px;
      border:1px solid #f1a04e;
      background:#603820;
      color:#fff0d9;
      padding:10px;
      cursor:pointer;
      text-align:left}

    button:hover,button:focus {
      background:#965324;
      outline:2px solid #ffce83}

    button:disabled {
      opacity:.45}

    input {
      width:100%;
      background:#100b09;
      border:1px solid #e6a158;
      color:white;
      padding:13px;
      font:inherit;
      font-size:16px}

    label {
      display:block;
      margin:12px 0 6px}

    .danger {
      color:#ff8176}

    .good {
      color:#9de0a5}

    .log {
      max-height:170px;
      overflow:auto;
      white-space:pre-wrap;
      font-size:12px;
      color:#d2b89e;
      margin-top:16px;
      border-top:1px dashed #71503b;
      padding-top:12px}

    footer {
      font-size:12px;
      color:#b6a18c;
      text-align:center;
      margin-top:15px}

    @media(max-width:450px) {
      .stats {
      grid-template-columns:repeat(2,1fr)}

    main {
      padding:14px}

    }