/* 3.12 polish: smoother feedback, clearer controls, settings and readable sizes. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--focus-ring:0 0 0 2px #0b1a22,0 0 0 4px #e8c47dcc}

/* Header: help and settings sit beside the save state. */
.header-tools .header-icon{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;background:#ffffff08;color:#d8e2dc;transition:background .18s,color .18s,transform .18s var(--ease-out)}
.header-tools .header-icon:hover{background:#e8c47d22;color:#f3d391}
.header-tools .header-icon:active{transform:scale(.92)}
.header-tools .header-icon>.icon{width:18px;height:18px}
@media(max-width:600px){.header-tools .header-icon{width:30px;height:30px}.header-tools .header-icon>.icon{width:16px;height:16px}}

/* Keyboard focus is always visible, never a browser default box. */
button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* Buttons and answers respond to touch and pointer with a short, eased motion. */
button{transition:background-color .18s,border-color .18s,color .18s,opacity .18s,transform .16s var(--ease-out)}
button:not(:disabled):active{transform:translateY(1px) scale(.985)}
.answer{transition:background .2s,border-color .2s,box-shadow .25s var(--ease-out),transform .25s var(--ease-out)}
.answer:hover:not(:disabled){transform:translateY(-2px);box-shadow:inset 3px 0 #e8c47d,0 8px 18px #0006,0 0 0 1px #e8c47d33}
.answer:active:not(:disabled){transform:translateY(0) scale(.99)}
.answer .answer-symbol{transition:transform .3s var(--ease-out)}
.answer:hover:not(:disabled) .answer-symbol{transform:scale(1.08) rotate(-3deg)}

/* Text that fits on one page needs no pager. */
.reader.reader-single>.reader-controls{display:none}

/* Long rank numbers wrap inside the side panel instead of overflowing it. */
.standing>div>b{flex-shrink:1;min-width:0;text-align:right}
.standing>div>b small{display:block;white-space:nowrap}

/* A new scene eases in: art, then text, then each answer in turn. */
@keyframes polish-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes polish-fade{from{opacity:0}to{opacity:1}}
.scene-enter .story-cinematic{animation:polish-fade .45s ease-out var(--enter-shift,0s) both}
.scene-enter .reader-copy,.scene-enter .life-chronicle{animation:polish-rise .5s var(--ease-out) calc(var(--enter-shift,0s) + .08s) both}
.scene-enter .answer-wrap{animation:polish-rise .45s var(--ease-out) both}
.scene-enter .answer-wrap:nth-child(1){animation-delay:calc(var(--enter-shift,0s) + .16s)}
.scene-enter .answer-wrap:nth-child(2){animation-delay:calc(var(--enter-shift,0s) + .22s)}
.scene-enter .answer-wrap:nth-child(3){animation-delay:calc(var(--enter-shift,0s) + .28s)}
.scene-enter .answer-wrap:nth-child(n+4){animation-delay:calc(var(--enter-shift,0s) + .34s)}

/* Changed stats glow once and float their delta. */
.stat{position:relative}
.stat-delta{position:absolute;right:6px;top:2px;z-index:2;pointer-events:none;font:700 12px/1 var(--sans);padding:3px 6px;border-radius:999px;animation:polish-float 1.9s var(--ease-out) forwards}
.stat-up .stat-delta{color:#0d2219;background:#9be0b4;box-shadow:0 0 12px #9be0b488}
.stat-down .stat-delta{color:#2a0d0a;background:#f0a097;box-shadow:0 0 12px #f0a09788}
.stat-up{animation:polish-glow-up 1.4s ease-out}
.stat-down{animation:polish-glow-down 1.4s ease-out}
@keyframes polish-float{0%{opacity:0;transform:translateY(6px) scale(.8)}15%{opacity:1;transform:translateY(0) scale(1.08)}30%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
@keyframes polish-glow-up{0%,100%{box-shadow:none}25%{box-shadow:0 0 0 1px #9be0b4aa,0 0 16px #9be0b455}}
@keyframes polish-glow-down{0%,100%{box-shadow:none}25%{box-shadow:0 0 0 1px #f0a097aa,0 0 16px #f0a09755}}
.stat-bar em{transition:width .6s var(--ease-out)}

/* Story text size from settings; "normal" keeps each layout's own size. */
body[data-text-size="small"] .reader-copy{font-size:13.5px;line-height:1.7}
body[data-text-size="large"] .reader-copy{font-size:clamp(17px,15px + .35vw,21px);line-height:1.9}

/* Settings dialog */
.settings-panel{display:grid;gap:10px;margin:2px 0 14px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:10px 12px;border:1px solid #63798555;border-radius:8px;background:#0a1826aa}
.setting-label{display:flex;align-items:center;gap:10px;min-width:0;font-weight:600;color:#eee9db}
.setting-label>.icon{width:22px;height:22px;flex:none}
.setting-label small{display:block;font-weight:400;font-size:11px;color:var(--muted);line-height:1.5}
.setting-group{display:inline-flex;padding:3px;border-radius:8px;background:#06121a;border:1px solid #63798566}
.setting-group button{border:0;border-radius:6px;padding:6px 12px;min-height:32px;background:transparent;color:#c4d3d1;font:inherit;font-size:12px;cursor:pointer}
.setting-group button:hover{color:#f3d391;background:#ffffff0a}
.setting-group button[aria-pressed="true"]{background:linear-gradient(110deg,#e8c47d,#c99c52);color:#1a1408;font-weight:700;box-shadow:0 2px 8px #0005}
.settings-heading{margin:4px 0 8px;font-size:13px;color:#f3d391;letter-spacing:.02em}
.shortcut-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 14px;margin:0 0 12px}
.shortcut-list>div{display:flex;align-items:center;gap:10px}
.shortcut-list dt{flex:none;min-width:54px}
.shortcut-list dd{margin:0;font-size:12px;color:#d4e0df}
.shortcut-list kbd,.settings-note kbd{display:inline-block;min-width:26px;padding:2px 7px;border-radius:5px;border:1px solid #8aa1a8;border-bottom-width:2px;background:#13242e;color:#f3d391;font:600 11px/1.5 var(--sans);text-align:center}
.settings-note{font-size:11px;color:var(--muted);margin:0}
@media(max-width:600px){.setting-row{padding:9px}.setting-group{width:100%}.setting-group button{flex:1}}

/* Dialogs and toast slide in instead of popping. */
#dialog[open]{animation:polish-dialog .28s var(--ease-out)}
#dialog::backdrop{background:#020a0fb3;backdrop-filter:blur(3px)}
@keyframes polish-dialog{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* Still mode (chosen, or automatic when the device asks for less motion) turns these off;
   choosing motion in settings brings them back even on such devices. */
body[data-motion="still"] .scene-enter .story-cinematic,body[data-motion="still"] .scene-enter .reader-copy,body[data-motion="still"] .scene-enter .life-chronicle,body[data-motion="still"] .scene-enter .answer-wrap,body[data-motion="still"] .stat-up,body[data-motion="still"] .stat-down,body[data-motion="still"] #dialog[open]{animation:none}
body[data-motion="still"] .stat-delta{animation:polish-blink 1.9s both}
@keyframes polish-blink{0%{opacity:0}10%,80%{opacity:1}100%{opacity:0}}
body[data-motion="still"] .answer:hover:not(:disabled),body[data-motion="still"] .answer:hover:not(:disabled) .answer-symbol,body[data-motion="still"] button:not(:disabled):active{transform:none}


/* Character and settlement details stay clear of the story caption and controls. */
.life-appearance{position:absolute;left:10px;top:9px;display:flex;align-items:center;gap:6px;max-width:calc(100% - 100px);padding:4px 7px;background:#081c27e8;border:1px solid #ad965368;border-radius:6px;color:#eed6a1;font-size:10px;line-height:1.5;pointer-events:none}
.life-appearance img{flex:0 0 30px;width:30px;height:30px;object-fit:contain;border-radius:4px}
.life-appearance span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.life-appearance{font-size:9px;padding:3px 5px;left:5px;top:5px;max-width:calc(100% - 90px)}.life-appearance img{width:24px;height:24px;flex-basis:24px}}