@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Mono:wght@400;700&display=swap');

:root{--paper:#f3f0e8;--ink:#283d36;--muted:#73786d;--line:#d8d9ce;--orange:#bb5335;--sage:#dfe5d7;--white:#fcfaf5;--mono:'Space Mono',monospace;--sans:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:5px}button{transition:background .18s,transform .18s,border-color .18s}button:not(:disabled):active{transform:translateY(1px)}a{color:inherit} .site-header{max-width:1440px;margin:auto;height:104px;padding:0 64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:25px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:15px;line-height:1.15;font-weight:750;letter-spacing:1.2px}.brand svg{width:46px;stroke:var(--ink);stroke-width:2.6;fill:none}.brand-dot{color:var(--orange)}.header-caption{font-family:var(--mono);font-size:9px;letter-spacing:1.7px;color:var(--muted)}nav{display:flex;gap:25px;align-items:center}.text-button{border:0;background:none;padding:10px 0;font-size:12px}.text-button span{margin-left:10px;color:var(--orange);font-size:18px}.restart-button{background:transparent;border:1px solid #bfc6b8;border-radius:4px;padding:10px 14px;font-size:13px}.restart-button:hover{background:var(--sage)}.restart-button span{margin-left:6px}main{max-width:1440px;margin:auto;padding:0 64px}.hero{display:grid;grid-template-columns:1.35fr 1fr;align-items:center;padding:38px 0 36px;min-height:340px;border-bottom:1px solid var(--line);gap:20px}.eyebrow,.section-label{font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:1.2px}.hero .eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 20px}.live-dot{height:6px;width:6px;background:var(--orange);border-radius:50%;flex:none}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(58px,5.8vw,84px);font-weight:400;letter-spacing:-4px;line-height:.98;margin:0 0 21px}h1 em{color:var(--orange);font-weight:400}.hero-description{font-size:13px;line-height:1.8;color:#666f63;margin:0}.hero-tags{display:flex;align-items:center;gap:14px;margin-top:22px;font-family:var(--mono);font-size:8px;color:var(--muted)}.hero-tags i{color:var(--orange);font-size:12px;font-style:normal}.hero-art{position:relative;max-width:440px;justify-self:end;width:100%;text-align:center}.hero-art img{width:100%;display:block}.art-caption{font:8px var(--mono);letter-spacing:1.6px;display:block;transform:rotate(-3deg);margin-top:-4px}.game{display:grid;grid-template-columns:239px minmax(0,1fr);gap:36px;margin-top:30px}.journey{border-right:1px solid var(--line);padding-right:28px}.section-label{font-size:9px;letter-spacing:1px}.journey>.section-label{display:flex;justify-content:space-between}.journey>.section-label span{color:#929889;font-size:8px}.stage-list{list-style:none;margin:28px 0 0;padding:0}.stage{position:relative;display:flex;gap:12px;padding:0 0 27px;align-items:flex-start}.stage:not(:last-child):before{content:'';position:absolute;left:15px;top:31px;bottom:0;border-left:1px dashed #c4caba}.stage-number{border:1px solid #d0d5c6;display:grid;place-items:center;width:31px;height:31px;border-radius:50%;font:10px var(--mono);flex:none;color:#919989}.stage-name{margin:2px 0 5px;font-size:12px;font-weight:600;color:#889080}.stage-caption{font-size:9px;line-height:1.5;margin:0;color:#949b8d}.stage.active .stage-number{background:var(--orange);color:white;border-color:var(--orange);box-shadow:0 0 0 4px #bb533511}.stage.active .stage-name{color:var(--ink)}.stage.active .stage-caption{color:#777f70}.stage.completed .stage-number{background:var(--ink);color:var(--paper);border-color:var(--ink)}.stage.completed .stage-name{color:var(--ink)}.stage-current{display:inline-block;margin-top:7px;font:7px var(--mono);letter-spacing:.8px;background:#e9dfce;color:#9b5036;padding:4px 6px;border-radius:2px}.journey-note{border-top:1px solid var(--line);margin-top:4px;padding-top:24px}.journey-note>span{font-size:28px;color:var(--orange)}.journey-note p{font-family:Georgia,serif;font-style:italic;font-size:17px;line-height:1.5;margin:9px 0 30px}.save-note{font-size:9px;color:var(--muted);line-height:1.8;display:flex;gap:7px;align-items:baseline}.save-note>span{width:5px;height:5px;background:#71856c;border-radius:50%;flex:none}.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:22px}.resource{border:1px solid var(--line);border-radius:5px;padding:16px 18px 13px;background:#efeee5}.resource-label{font:8px var(--mono);letter-spacing:.6px;display:flex;gap:6px;align-items:center;white-space:nowrap}.resource-label>span{font-size:13px}.resource-label small{margin-left:auto;font:9px var(--mono)}.resource-value{font-size:29px;letter-spacing:-1px;font-weight:500;margin:7px 0 10px;font-variant-numeric:tabular-nums}.resource-value>span{font-size:13px;color:#8d9484;letter-spacing:0;margin-left:4px}.meter{height:3px;background:#dce0d3;border-radius:5px;overflow:hidden}.meter>span{display:block;height:100%;background:var(--ink);transition:width .4s;width:100%}.meter.sanity>span{background:var(--orange);width:70%}.meter.goodwill>span{background:#8c9b73;width:55%}.resource p{font-size:9px;color:var(--muted);margin:10px 0 0}.resource.low{border-color:var(--orange);background:#f6e7dc}.positive{color:#467345}.negative{color:#ac462d}.encounter{background:var(--white);border:1px solid #cdd2c3;border-radius:7px;box-shadow:0 4px 0 #e8e7dd;overflow:hidden}.encounter-heading{display:flex;justify-content:space-between;align-items:center;padding:16px 25px;border-bottom:1px solid #e6e6da;gap:10px}.chapter-tag{font:8px var(--mono);letter-spacing:.8px;background:#ece1d2;color:#a45235;padding:6px 9px;border-radius:2px}.decision-count{font:8px var(--mono);letter-spacing:.5px;color:var(--muted)}.encounter-body{padding:26px 27px 24px}.scene-kicker{font:8px var(--mono);color:var(--muted);letter-spacing:1.1px;margin:0 0 12px}.encounter h2{font:400 35px/1.15 Georgia,serif;letter-spacing:-1px;margin:0 0 13px}.scene-text{font-size:12px;line-height:1.9;color:#6c7366;max-width:690px;margin:0 0 24px}.choice-label{font:8px var(--mono);letter-spacing:1.1px;color:#78806e;display:flex;align-items:center;gap:10px;margin-bottom:12px}.choice-label:after{content:'';height:1px;background:#e3e5d9;flex:1}.choices{display:grid;gap:9px}.choice{width:100%;border:1px solid #dce0d3;border-radius:4px;background:transparent;text-align:left;padding:15px;display:flex;align-items:center;gap:13px}.choice:hover{border-color:#8b9b7c;background:#f0f2e8}.choice:hover .choice-letter{background:var(--ink);border-color:var(--ink);color:white}.choice-letter{width:26px;height:26px;flex:none;border:1px solid #dce0d3;border-radius:3px;display:grid;place-items:center;font:10px var(--mono);color:#849078}.choice-copy{flex:1;min-width:0}.choice-title{display:block;font-size:12px;font-weight:650;margin-bottom:5px}.choice-description{display:block;font-size:10px;color:#7b8272;line-height:1.5}.effects{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap;font:8px var(--mono)}.effect{white-space:nowrap}.choice-arrow{font-size:19px;color:#8d997f;margin-left:4px}.encounter-bottom{padding:12px 26px;background:#f1f2e9;font-size:9px;color:#7f8776;display:flex;align-items:center;gap:8px}.encounter-bottom span{color:#9c6545;font-size:13px}.under-card{display:flex;justify-content:space-between;gap:12px;margin:19px 0 9px;font-size:9px;color:#828a79}.under-card>span:first-child{font:8px var(--mono);letter-spacing:.5px}.progress-track{height:3px;background:#dfe2d5;border-radius:5px;overflow:hidden}.progress-track>span{height:100%;width:0;display:block;background:var(--orange);transition:width .4s}.lifelines{margin:25px 0;display:flex;align-items:center;justify-content:space-between;gap:15px}.lifelines p{font-size:9px;color:var(--muted);margin:7px 0 0}.lifeline-buttons{display:flex;gap:9px}.lifeline-buttons button{padding:10px 12px;border:1px solid #d4d9ca;background:transparent;border-radius:4px;text-align:left;font-size:10px}.lifeline-buttons button:hover:not(:disabled){background:var(--sage)}.lifeline-buttons button span{display:block;font:7px var(--mono);margin:6px 0 0 15px;color:var(--muted)}.diary{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:20px}.diary summary{cursor:pointer;display:flex;align-items:center;padding:17px 0;gap:14px;font:8px var(--mono);letter-spacing:.6px;list-style:none}.diary summary::-webkit-details-marker{display:none}.diary summary>span:first-of-type{color:var(--muted);font:9px var(--sans);letter-spacing:0}.diary summary>span:last-child{margin-left:auto;font-size:17px}.diary ol{list-style:none;padding:0;margin:0 0 15px}.diary li{padding:12px 15px;border-left:2px solid #bec9ad;margin:8px 0;background:#ebece1;font-size:11px;line-height:1.7;color:#6b7461}.diary li strong{display:block;color:var(--ink);font-size:11px}.diary li .effects{margin-top:5px}footer{max-width:1440px;padding:24px 64px 28px;margin:33px auto 0;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);gap:15px;color:#8a9181;font:7px var(--mono);letter-spacing:.6px}footer>span:nth-child(2){font:10px var(--sans);letter-spacing:0}.footer-heart{color:var(--orange);font-size:17px;margin-left:5px}.result-icon{font-size:33px;color:var(--orange);margin-bottom:15px}.result-body{min-height:339px;display:flex;flex-direction:column}.result-body .scene-text{font-size:14px}.result-effects{padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:22px}.result-effects .effects{font-size:10px;margin:0;gap:23px}.primary-button{border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:var(--white);padding:14px 18px;font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:20px}.primary-button:hover{background:#40574b}.result-body .primary-button{margin-top:auto;width:100%}.surcharge{font-size:11px;line-height:1.7;padding:12px;background:#f4e4d9;color:#a94b2e;border-radius:3px;margin:0 0 18px}.ending{padding:35px;text-align:center}.ending .scene-text{margin:0 auto 25px;font-size:13px}.ending .eyebrow{color:var(--orange)}.ending h2{font-size:48px;margin:19px 0}.decree-stamp{display:inline-block;border:3px double var(--orange);color:var(--orange);padding:9px 18px;transform:rotate(-7deg);font:700 23px var(--mono);letter-spacing:3px;margin:10px 0 18px}.ending-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin-bottom:25px}.ending-stats strong{display:block;font-size:23px;font-weight:500}.ending-stats span{display:block;font:8px var(--mono);color:var(--muted);margin-top:7px}.ending .primary-button{margin:auto;min-width:230px}.ending-note{font:10px/1.8 var(--mono);color:var(--muted)}dialog{border:1px solid #c1c9b5;border-radius:8px;background:var(--white);color:var(--ink);width:min(540px,calc(100% - 32px));padding:36px;box-shadow:0 25px 100px #14251d40;max-height:90vh}dialog::backdrop{background:#1c2c2499;backdrop-filter:blur(4px)}dialog h2{font:400 35px/1.15 Georgia,serif;letter-spacing:-1px;margin:20px 0}dialog p{font-size:13px;line-height:1.8;color:#6e7864}.dialog-close{position:absolute;top:12px;right:17px;font-size:27px;background:none;border:0}.help-list{list-style:none;padding:0;border-top:1px solid var(--line)}.help-list li{padding:13px 0;display:grid;grid-template-columns:110px 1fr;gap:10px;border-bottom:1px solid var(--line);font-size:12px;line-height:1.6}.help-list span{color:#6e7864}.fine-print{font-size:10px}dialog .primary-button{width:100%;margin-top:20px}.dialog-actions{display:flex;gap:10px;margin-top:22px}.dialog-actions .primary-button{margin:0;width:auto}.secondary-button{border:1px solid var(--line);background:none;border-radius:4px;padding:12px;font-size:11px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:var(--white);padding:14px 22px;max-width:calc(100% - 32px);width:max-content;border-radius:5px;font-size:12px;box-shadow:0 4px 20px #283d3630;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1441px){.site-header,main,footer{max-width:1376px}.hero{padding-top:45px;padding-bottom:40px}}
@media(max-width:1100px){.site-header{padding:0 32px}.header-caption{display:none}main{padding:0 32px}.game{grid-template-columns:200px minmax(0,1fr);gap:25px}.journey{padding-right:20px}.resource{padding:13px 12px}.resource-label{font-size:7px}.resource p{font-size:8px}.lifelines{align-items:flex-start;flex-direction:column}.hero .eyebrow{font-size:7px}.hero-tags{gap:9px;font-size:7px}footer{padding-left:32px;padding-right:32px}footer>span:last-child{display:none}}
@media(max-width:760px){.site-header{height:82px;padding:0 22px}.brand{font-size:12px;gap:8px}.brand svg{width:37px}nav{gap:14px}.text-button{font-size:10px}.restart-button{padding:7px 10px;font-size:17px}.restart-button span{display:none}main{padding:0 22px}.hero{grid-template-columns:1fr .7fr;min-height:270px;padding:30px 0}.hero .eyebrow{line-height:1.6;font-size:7px;max-width:235px;margin-bottom:16px}h1{font-size:60px;letter-spacing:-3px}.hero-description{font-size:11px;line-height:1.7}.hero-tags{display:none}.desktop-break{display:none}.art-caption{font-size:6px;line-height:1.6;letter-spacing:.5px}.game{grid-template-columns:1fr;gap:20px;margin-top:22px}.journey{padding:0;border:0}.journey>.section-label{font-size:8px}.stage-list{display:grid;grid-template-columns:repeat(6,1fr);margin-top:16px}.stage{display:flex;flex-direction:column;gap:9px;align-items:center;padding-bottom:0;text-align:center}.stage:not(:last-child):before{left:calc(50% + 16px);top:15px;bottom:auto;width:calc(100% - 32px);border-left:0;border-top:1px dashed #c4caba}.stage-name{font-size:8px;margin:0}.stage-caption,.stage-current,.journey-note,.save-note{display:none}.resource-grid{gap:9px;margin-bottom:17px}.resource-label{font-size:7px;letter-spacing:0}.resource-label>span{display:none}.resource-value{font-size:25px}.resource p{font-size:7px}.encounter-body{padding:23px}.encounter h2{font-size:32px}.lifelines{flex-direction:row;align-items:center}.lifelines p{max-width:145px;line-height:1.6}.lifeline-buttons{gap:6px}.lifeline-buttons button{padding:10px;font-size:9px}.lifeline-buttons button span{font-size:6px;margin-left:0}.under-card>span:last-child{font-size:8px}.section-label{font-size:8px}footer{padding:20px 22px;margin-top:20px}.resource-label small{font-size:7px}}
@media(max-width:480px){.hero{grid-template-columns:1fr;position:relative;padding:30px 0 24px;overflow:hidden}.hero-copy{position:relative;z-index:1}.hero-art{position:absolute;width:165px;right:-24px;top:49px;opacity:.9}.hero-art .art-caption{display:none}.hero .eyebrow{max-width:none;font-size:6px;letter-spacing:.8px}.hero h1{font-size:60px;margin-bottom:20px}.hero-description{max-width:300px}.hero-tags{display:flex;font-size:6px;gap:9px;margin-top:17px}.resource{padding:12px 9px}.resource-value{font-size:23px}.resource-value>span{font-size:10px}.resource p{font-size:7px;line-height:1.5;min-height:21px;margin-bottom:0}.resource-label{font-size:6px;gap:2px}.resource-label small{font-size:6px}.encounter-heading{padding:13px 17px}.chapter-tag,.decision-count{font-size:7px}.encounter-body{padding:22px 17px}.encounter h2{font-size:30px}.scene-text{font-size:12px;line-height:1.8}.choice{padding:12px 10px;gap:9px}.choice-title{font-size:11px}.choice-description{font-size:9px}.choice-letter{width:23px;height:23px}.choice-arrow{display:none}.effects{font-size:7px;gap:8px}.encounter-bottom{padding:10px 17px;font-size:8px}.under-card{font-size:7px}.under-card>span:last-child{display:none}.lifelines{flex-direction:column;align-items:stretch;gap:12px}.lifelines p{max-width:none}.lifeline-buttons button{flex:1;font-size:10px;padding:12px}.lifeline-buttons button span{font-size:7px}.ending{padding:28px 18px}.ending h2{font-size:39px}.ending-stats strong{font-size:20px}.ending-stats span{font-size:6px}.result-effects .effects{font-size:8px;gap:12px}footer{flex-direction:column;gap:10px;align-items:flex-start}dialog{padding:28px 23px}dialog h2{font-size:30px}.help-list li{grid-template-columns:90px 1fr;font-size:11px}.dialog-actions{flex-direction:column}.dialog-actions .primary-button{width:100%}}
@media(max-width:480px){.hero-art{display:none}.hero .eyebrow{font-size:7px}.hero-tags{font-size:7px;gap:7px}.resource-label{font-size:8px}.resource-label small{font-size:7px}.resource-label:has(small:not(:empty)){flex-wrap:wrap}.resource-label small:not(:empty){margin-left:0}.resource p{font-size:9px}.choice-title{font-size:12px}.choice-description{font-size:10px}.effects{font-size:9px;gap:7px}.chapter-tag,.decision-count{font-size:8px}.stage-name{font-size:9px}.encounter-bottom{font-size:9px}.scene-kicker,.choice-label{font-size:9px}.lifeline-buttons button span{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* Hard Feelings edition: partner dynamics, persistent costs and case gates. */
[hidden] { display: none !important; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.ui-icon { width: 18px; height: 18px; display: inline-block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#how-button .ui-icon { color: var(--orange); }
.icon-button.restart-button span { margin-left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html.has-hud { scroll-padding-top: calc(var(--hud-height, 84px) + 12px); }
.has-hud body { padding-top: var(--hud-height, 84px); }
.metrics-hud {
  position: fixed;
  inset: 0 0 auto;
  z-index: 4;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--white);
  border-bottom: 2px solid #9daa8e;
  box-shadow: 0 5px 18px #283d3614;
}
.hud-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-width: 1312px;
  margin: 0 auto;
  padding: 12px 24px;
}
.hud-metrics > div { min-width: 0; padding: 0 18px; border-left: 1px solid var(--line); }
.hud-metrics > div:first-child { border-left: 0; }
.hud-metrics dt { display: flex; align-items: center; gap: 5px; font: 9px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .5px; }
.hud-metrics dt .ui-icon { width: 13px; height: 13px; color: #718263; }
.hud-metrics dd { margin: 0; }
.hud-metrics strong { display: block; font-size: 22px; line-height: 1.35; font-weight: 550; font-variant-numeric: tabular-nums; }
.hud-metrics dd > span { display: block; font-size: 9px; line-height: 1.5; color: #67715c; }
@media (max-width: 760px) {
  .hud-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 12px; row-gap: 7px; }
  .hud-metrics > div { padding: 0 10px; }
  .hud-metrics > div:nth-child(4) { border-left: 0; }
  .hud-metrics dt { font-size: 8px; letter-spacing: 0; }
  .hud-metrics strong { font-size: 18px; }
  .hud-metrics dd > span { font-size: 8px; }
}
@media (max-height: 500px) and (min-width: 600px) {
  .hud-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 7px 10px; }
  .hud-metrics > div { padding: 0 8px; }
  .hud-metrics > div:nth-child(4) { border-left: 1px solid var(--line); }
  .hud-metrics dt { font-size: 8px; letter-spacing: 0; }
  .hud-metrics strong { font-size: 18px; }
  .hud-metrics dd > span { display: none; }
}
#encounter-title:focus { outline: none; }
.attachment-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.attachment-option { display: flex; flex-direction: column; gap: 11px; padding: 19px; text-align: left; background: #f1f2e9; border: 1px solid #d1d8c6; border-radius: 5px; }
.attachment-option:hover { background: #e5eada; border-color: #819174; }
.attachment-name { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 650; }
.attachment-name > span { color: var(--orange); }
.attachment-option em { font: italic 16px/1.4 Georgia, serif; color: var(--orange); }
.attachment-option > span:last-child { font-size: 11px; line-height: 1.75; color: #626e59; }
.setup-rules { margin-top: 24px; padding: 18px; border-left: 3px solid var(--orange); background: #f3eade; font-size: 12px; }
.setup-rules p { margin: 8px 0 0; line-height: 1.8; }
.encounter .fine-print { margin: 18px 0 0; font-size: 10px; line-height: 1.8; color: var(--muted); }
.partner-profile { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 4px; background: #ebece1; }
.partner-profile summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 13px 16px; cursor: pointer; font: 8px var(--mono); letter-spacing: .5px; }
.partner-profile summary strong { font: 600 12px var(--sans); letter-spacing: 0; }
.partner-profile summary > span { margin-left: auto; color: var(--muted); font: 10px var(--sans); }
#partner-details { padding: 0 16px 16px; }
#partner-details p { font-size: 11px; line-height: 1.8; margin: 0 0 10px; }
.profile-memory { color: var(--muted); }
.reaction-table { border-top: 1px solid var(--line); margin: 12px 0; }
.reaction-table > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); padding: 10px 0; }
.reaction-table strong { font-size: 11px; font-weight: 500; text-transform: capitalize; }
.reaction-table .effects { margin: 0; font-size: 9px; }
.case-dashboard { border: 1px solid #d1d6c8; border-radius: 5px; margin-bottom: 18px; background: #eeeee3; overflow: hidden; }
.commitment-line, .settlement-line { border-top: 1px solid #dbded0; padding: 11px 17px; margin: 0; font-size: 10px; line-height: 1.75; color: #6a745f; }
.commitment-line { border-top: 0; }
.settlement-line { color: #8e5038; background: #f0e9dc; }
.choice-option { border: 1px solid #dce0d3; border-radius: 4px; overflow: hidden; }
.choice-option .choice { border: 0; border-radius: 0; }
.choice-option .effects { font-size: 9px; gap: 12px; line-height: 1.7; }
.approach-tag { display: block; font: 8px var(--mono); color: #7c866f; margin-top: 9px; letter-spacing: .5px; }
.choice-breakdown { border-top: 1px dashed #dfe2d6; padding: 0 15px; }
.choice-breakdown summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; padding: 10px 0; font-size: 10px; color: #6b775e; }
.choice-breakdown summary > span { font-size: 9px; color: #8b654d; }
.attachment-reaction { padding: 11px 13px; margin: 0 0 12px; background: #e9eee1; border-radius: 3px; }
.attachment-reaction > span:first-child { display: block; font-size: 10px; color: #5b6c50; }
.attachment-reaction .effects { font-size: 9px; margin-top: 7px; }
.base-effects { padding: 10px 0 15px; font-size: 10px; color: var(--muted); }
.consequence-notes { font-size: 11px; line-height: 1.8; color: #73775f; margin: 8px 0 18px; padding-left: 19px; }
.consequence-notes li + li { margin-top: 7px; }
.projection { margin: 12px 0; font: 9px/1.9 var(--mono); color: #647357; }
.choice-warning, .choice-success { display: block; margin-top: 10px; border-radius: 3px; padding: 10px; font-size: 11px; line-height: 1.65; }
.choice-warning { background: #f5e1d5; color: #9f402a; }
.choice-success { background: #dce9d4; color: #45683d; }
.fatal-option { border-color: #d3ad96; }
.result-body .primary-button { margin-top: 16px; }
.result-effects .effects { flex-wrap: wrap; line-height: 1.8; }
.ending-reason { line-height: 1.8; font-size: 12px; padding: 15px; border-radius: 4px; }
.success-reason { background: #e1eada; color: #4f6846; }
.ending-tip { font-size: 12px; line-height: 1.8; color: #67715c; text-align: left; border-left: 2px solid var(--orange); padding-left: 14px; margin: 22px 0; }
.ending-breakdown { text-align: left; margin-bottom: 22px; padding: 14px; background: #f1f0e5; border-radius: 4px; font-size: 12px; }
.ending-breakdown summary { cursor: pointer; font-size: 11px; }
.ending-breakdown > strong { display: block; margin: 14px 0; }
.ending-breakdown .attachment-reaction { margin-top: 14px; }
.ending-stats span { line-height: 1.8; }
.diary li .attachment-reaction { margin-top: 12px; }
.diary .consequence-notes li { border: 0; margin: 0; padding: 3px 0; background: none; font-size: 10px; }
@media (max-width: 760px) {
  .resource-label { flex-wrap: wrap; }
  .resource-label small:not(:empty) { margin-left: 0; }
  .attachment-options { gap: 9px; }
  .attachment-option { padding: 15px; }
  .attachment-name { font-size: 13px; }
  .attachment-option em { font-size: 15px; }
  .commitment-line, .settlement-line { padding: 10px 12px; }
  .choice-label { line-height: 1.8; font-size: 8px; }
}
@media (max-width: 480px) {
  .attachment-options { grid-template-columns: 1fr; }
  .attachment-option > span:last-child { font-size: 12px; }
  .attachment-name { font-size: 15px; }
  .partner-profile summary { padding: 12px; gap: 8px; }
  .partner-profile summary > span { font-size: 9px; }
  .partner-profile summary strong { font-size: 11px; }
  .reaction-table > div { flex-wrap: wrap; gap: 8px; }
  .reaction-table .effects { font-size: 8px; }
  .choice-option .effects { font-size: 8px; gap: 8px; }
  .choice-breakdown { padding: 0 11px; }
  .choice-breakdown summary { font-size: 10px; }
  .choice-warning, .choice-success { font-size: 10px; }
  .decree-stamp { font-size: 20px; letter-spacing: 2px; }
  .ending-stats { gap: 10px; }
  .ending-stats strong { font-size: 18px; }
  .ending-stats span { font-size: 7px; }
}

/* A short, replayable first-visit briefing. Navigation stays in view. */
html:has(#tutorial-dialog[open]) { overflow: hidden; }
#tutorial-dialog {
  position: fixed;
  inset: calc(var(--hud-height, 84px) + 14px) 0 auto;
  width: min(650px, calc(100% - 32px));
  max-height: calc(100dvh - var(--hud-height, 84px) - 28px);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
#tutorial-dialog[open] { display: flex; flex-direction: column; }
#tutorial-dialog::backdrop { background: linear-gradient(to bottom, transparent var(--hud-height, 84px), #1c2c2480 var(--hud-height, 84px)); backdrop-filter: none; }
.tutorial-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 24px; flex-shrink: 0; }
.tutorial-header .eyebrow { font-size: 8px; line-height: 1.6; }
#tutorial-skip { white-space: nowrap; font-size: 11px; }
.tutorial-progress { display: flex; list-style: none; padding: 0 24px; margin: 0; gap: 5px; flex-shrink: 0; }
.tutorial-progress li { flex: 1; height: 3px; border-radius: 3px; background: var(--line); }
.tutorial-progress li.reached { background: var(--orange); }
.tutorial-body { padding: 24px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
#tutorial-dialog .scene-kicker { margin: 0 0 12px; font: 9px/1.6 var(--mono); }
#tutorial-title { font-size: 32px; margin: 0 0 16px; line-height: 1.15; }
#tutorial-title:focus { outline: none; }
#tutorial-content > p { margin: 12px 0; font-size: 13px; line-height: 1.75; }
#tutorial-content strong { color: var(--ink); }
.tutorial-route { padding: 15px; background: #e8eddf; border-radius: 4px; font: 11px/2 var(--mono); }
.tutorial-callout { padding: 15px; margin-top: 16px; background: #f1e6d7; border-left: 3px solid var(--orange); font-size: 12px; line-height: 1.75; }
.tutorial-list { list-style: none; padding: 0; margin: 16px 0; border-top: 1px solid var(--line); }
.tutorial-list li { display: grid; grid-template-columns: 125px 1fr; gap: 12px; padding: 12px 0; font-size: 12px; line-height: 1.7; border-bottom: 1px solid var(--line); }
.tutorial-list li > span { color: #67715c; }
#tutorial-content .tutorial-note { font-size: 11px; line-height: 1.8; }
.tutorial-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 0; }
.tutorial-metrics > div { padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: #f0f1e7; }
.tutorial-metrics dt { font-size: 12px; font-weight: 650; margin-bottom: 6px; }
.tutorial-metrics dd { margin: 0; font-size: 11px; line-height: 1.75; color: #67715c; }
.tutorial-example { margin: 16px 0; padding: 15px; background: #e8eddf; border-radius: 4px; }
.tutorial-example > span { font: 9px/1.8 var(--mono); }
.tutorial-example p { font-size: 12px; margin: 10px 0 0; }
.tutorial-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px; background: #f0f1e7; border-top: 1px solid var(--line); flex-shrink: 0; }
.tutorial-actions { display: flex; gap: 9px; align-items: center; }
#tutorial-next { width: auto; margin: 0; min-height: 44px; }
#tutorial-back { min-height: 44px; }
#tutorial-rules { font-size: 11px; }
.tutorial-replay { display: block; width: 100%; margin-top: 20px; }
@media (max-width: 480px) {
  .tutorial-header { padding: 9px 16px; }
  .tutorial-header .eyebrow { font-size: 7px; max-width: 155px; }
  .tutorial-progress { padding: 0 16px; }
  .tutorial-body { padding: 18px 16px; }
  #tutorial-title { font-size: 27px; }
  .tutorial-metrics { grid-template-columns: 1fr; }
  .tutorial-list li { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
  .tutorial-footer { flex-wrap: wrap; padding: 10px 16px; gap: 7px; }
  .tutorial-actions { width: 100%; }
  #tutorial-next { flex: 1; justify-content: center; font-size: 11px; padding: 12px; }
  #tutorial-back { padding: 12px; }
  #tutorial-rules { padding: 5px 0; }
}
@media (max-height: 500px) {
  .tutorial-header { padding-top: 4px; padding-bottom: 4px; }
  .tutorial-body { padding-top: 14px; padding-bottom: 14px; }
  .tutorial-footer { padding-top: 8px; padding-bottom: 8px; }
}

.diary summary > .ui-icon { width: 15px; height: 15px; color: var(--orange); }
.tutorial-replay .ui-icon { margin-right: 6px; }
@media (max-width: 480px) {
  .hud-metrics dt .ui-icon { width: 11px; height: 11px; }
  .hud-metrics dt { gap: 4px; }
  .icon-button { gap: 6px; }
  #how-button .ui-icon { width: 15px; height: 15px; }
}