/* Shared desktop visual language. Presentation only, no gameplay state changes. */
:root {
 --frame-edge:#344853; --frame-light:#78939f; --frame-gold:#efba52;
 --frame-surface:linear-gradient(115deg,#19252d,#0c151c);
 --frame-selected:linear-gradient(110deg,#584222,#30271b);
 --frame-shadow:inset 0 1px 0 #ffffff08,0 2px 3px #0003;
 --line:#344853; --gold:#efba52;
}
body :is(.panel,.resource-card,.resource-card.locked,.tool-card,.recipe,.patrol-card,.inventory-item,.overview-skill,.equipment-panel,.activity-log,.skill-connections,.resource-search,.activity-choice,.discord-community) {
 background:var(--frame-surface); border:1px solid var(--frame-edge); border-radius:5px; box-shadow:var(--frame-shadow);
}
body :is(#settings-dialog,#discord-dialog,#activity-chooser,#requirements-popup,#skill-popover) {
 background:linear-gradient(115deg,#19252d,#0c151c); color:var(--ink); border:1px solid var(--frame-light); border-radius:6px;
 box-shadow:inset 0 1px 0 #ffffff10,0 18px 55px #000a;
}
body :is(.skill-dashboard-header,.training-banner) { background:var(--frame-surface); border-color:var(--frame-edge); border-radius:5px; }
body .skill-dashboard-header .training-banner { background:transparent; border-radius:0; }
body .dashboard-activities .resource-card:first-child:not(.locked),body .resource-card.is-training,body .tool-card.equipped {
 background:linear-gradient(115deg,#1b302e,#101d23); border-color:#548d80; box-shadow:inset 0 1px 0 #79dfc318,0 2px 3px #0003;
}
body .resource-card.locked { border-top-color:#936b51; }
body button:not(.resource-boost):not(.avatar-choice),body a.discord-join {
 border:1px solid var(--frame-edge); border-radius:5px; background:var(--frame-surface); color:#c1d1df;
 box-shadow:var(--frame-shadow); transition:background .16s,border-color .16s,box-shadow .16s,color .16s;
}
body button:not(.resource-boost):not(.avatar-choice):hover:not(:disabled),body a.discord-join:hover {
 background:linear-gradient(115deg,#273943,#14232d); border-color:var(--frame-light); color:#f3f7fa; box-shadow:inset 0 1px 0 #ffffff12,0 0 12px #99bdd416;
}
body button.selected,body button[aria-pressed="true"],body #skill-selector,body .dashboard-skill-list .skill-tab.selected,
body :is(#boost-training,#skill-boost,#tutorial-next,#continue-story),body button[data-tool]:not(:disabled),body .new-game button[type="submit"] {
 background:var(--frame-selected); border-color:var(--frame-gold); color:#fff0cc;
 box-shadow:inset 3px 0 0 #ffc95e,inset 0 0 18px #d9901520,0 0 12px #e7a32b28;
}
body button.selected:hover,body #skill-selector:hover,body :is(#boost-training,#skill-boost,#tutorial-next,#continue-story):hover:not(:disabled),body button[data-tool]:hover:not(:disabled) {
 background:linear-gradient(110deg,#6a5028,#40311c); border-color:#ffdc88; color:#fff8e8;
}
body button:not(.resource-boost):disabled {
 background:#152029; border-color:#2c3b44; color:#82929f; box-shadow:none;
}
body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) {
 background:#0d1820; color:var(--ink); border:1px solid var(--frame-edge); border-radius:5px; box-shadow:inset 0 2px 4px #0004;
}
body select option { background:#14212b; color:var(--ink); }
body :is(input,select,textarea):hover:not(:disabled) { border-color:var(--frame-light); }
body :is(input[type="checkbox"],input[type="radio"],input[type="range"]) { accent-color:var(--frame-gold); }
body summary {
 background:var(--frame-surface); border:1px solid var(--frame-edge); border-radius:5px; color:#c1d1df;
 box-shadow:var(--frame-shadow); cursor:pointer; transition:background .16s,border-color .16s;
}
body summary:hover { background:linear-gradient(115deg,#273943,#14232d); border-color:var(--frame-light); color:#f3f7fa; }
body details[open] > summary { border-color:#88713f; color:#ffe3aa; }
body :is(button,a,summary,input,select,textarea):focus-visible { outline:2px solid #ffdb88; outline-offset:3px; }
body :is(.section-heading h2,.dashboard-inventory summary,.settings-group > summary,.combat-jumps a) { color:#76cce3; }
body .inventory-item b { color:#ffe0a1; }
body .avatar-choice { border-radius:5px; background:var(--frame-surface); border-color:var(--frame-edge); }
body .avatar-choice:has(input:checked),body .survivor-mini.selected { background:var(--frame-selected); border-color:var(--frame-gold); box-shadow:0 0 12px #e7a32b28; }
/* Preserve existing status/progress colors, tutorial pulses and search highlights. */
@media(prefers-reduced-motion:reduce){body :is(button,summary){transition:none;}}
body.reduce-motion :is(button,summary){transition:none;}
.compact-tool-switch { display:flex!important; align-items:center; justify-content:space-between; gap:12px; font-size:.85rem; margin:8px 0; }
.compact-tool-switch .toggle-state { color:var(--mint); }
body input[type="checkbox"] {
 appearance:none; -webkit-appearance:none; position:relative; display:inline-block; vertical-align:middle;
 width:38px!important; min-width:38px; height:22px; padding:0; margin:0 7px 0 0;
 border-radius:20px; border:1px solid #52656e; background:#25343d; box-shadow:inset 0 2px 4px #0005; cursor:pointer;
 transition:background .18s,border-color .18s;
}
body input[type="checkbox"]::before { content:''; position:absolute; width:16px; height:16px; top:2px; left:2px; border-radius:50%; background:#d5e1e6; box-shadow:0 1px 4px #0006; transition:transform .18s; }
body input[type="checkbox"]:checked { background:linear-gradient(110deg,#236b5c,#42ae8c); border-color:#76d7b9; }
body input[type="checkbox"]:checked::before { transform:translateX(16px); background:#effff9; }
body input[type="checkbox"]:disabled { opacity:.45; cursor:not-allowed; }
@media(prefers-reduced-motion:reduce){body input[type="checkbox"],body input[type="checkbox"]::before{transition:none;}}
body.reduce-motion input[type="checkbox"],body.reduce-motion input[type="checkbox"]::before{transition:none;}
/* Announcements never participate in the training controls' flex layout. */
body #boost-status { position:absolute!important; width:1px!important; height:1px!important; min-height:0!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip-path:inset(50%); white-space:nowrap; }
#training-time { min-width:125px; text-align:right; font-variant-numeric:tabular-nums; }
.button-boost-feedback { position:fixed; z-index:1000; pointer-events:none; white-space:nowrap; color:#b9ffe6; font-size:1rem; font-weight:800; text-shadow:0 2px 5px #000; transform:translate(-50%,-8px); animation:button-boost-rise 1s ease-out forwards; }
.button-boost-feedback.critical-boost { color:#ffdc88; font-size:1.2rem; }
@keyframes button-boost-rise { 0%{opacity:1;transform:translate(-50%,-8px)} 25%{opacity:1} 100%{opacity:0;transform:translate(-50%,-52px)} }
@keyframes button-boost-fade { from{opacity:1} to{opacity:0} }
@media(prefers-reduced-motion:reduce){.button-boost-feedback{animation:button-boost-fade 1s ease-out forwards;}}
.reduce-motion .button-boost-feedback{animation:button-boost-fade 1s ease-out forwards;}

/* Customizable native selects retain browser keyboard and form behavior.
   Older browsers keep the existing dark native-select fallback. */
@supports (appearance:base-select) {
 body select,body select::picker(select) { appearance:base-select; }
 body select {
  align-items:center; gap:10px; min-height:36px;
  background:var(--frame-surface); border:1px solid var(--frame-edge);
  border-radius:5px; box-shadow:var(--frame-shadow); cursor:pointer;
 }
 body select::picker-icon { color:#9fb3c4; transition:rotate .16s; }
 body select:open { border-color:var(--frame-gold); }
 body select:open::picker-icon { color:#ffca63; rotate:180deg; }
 body select::picker(select) {
  background:linear-gradient(115deg,#19252d,#0c151c); color:var(--ink);
  border:1px solid #78939f; border-radius:5px; padding:5px;
  margin-block:5px; max-height:320px; overflow:auto;
  box-shadow:inset 0 1px 0 #ffffff10,0 12px 30px #0009;
 }
 body select option {
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border:1px solid transparent; border-radius:3px;
  background:transparent; color:#c1d1df; cursor:pointer;
 }
 body select option:hover,body select option:focus {
  background:#273943; border-color:#78939f; color:#f3f7fa;
 }
 body select option:checked {
  background:var(--frame-selected); border-color:var(--frame-gold);
  color:#fff0cc; box-shadow:inset 3px 0 0 #ffc95e;
 }
 body select option::checkmark { color:#ffca63; }
 body select option:disabled { color:#82929f; background:#152029; cursor:not-allowed; }
 body.reduce-motion select::picker-icon { transition:none; }
 @media(prefers-reduced-motion:reduce){body select::picker-icon{transition:none;}}
}
.requirements-window-bar { display:flex; align-items:center; gap:8px; position:sticky; top:-16px; padding:8px 0; background:#14212a; z-index:2; margin-bottom:8px; }
.requirements-window-bar button { font-size:.8rem; padding:7px 9px; }
.requirements-window-bar .requirements-drag-handle { flex:1; text-align:left; cursor:grab; touch-action:none; user-select:none; }
.requirements-window-bar.dragging .requirements-drag-handle { cursor:grabbing; }
body #tutorial-panel { display:flex; align-items:flex-start; gap:18px; padding:16px 20px; border:1px solid var(--frame-gold); background:var(--frame-surface); border-radius:5px; box-shadow:inset 3px 0 0 #ffc95e,var(--frame-shadow); }
#tutorial-panel .mentor-portrait { float:none; flex:none; width:92px; height:112px; margin:0; object-fit:contain; border-radius:5px; }
.tutorial-mentor-body { min-width:0; flex:1; }
#tutorial-panel .tutorial-mentor-body > .eyebrow { display:inline-block; margin:0 14px 4px 0; font-size:.7rem; }
#tutorial-panel #tutorial-step { color:#76cce3; }
#tutorial-panel #tutorial-title { font-size:1.2rem; color:#fff0cc; }
#tutorial-panel #tutorial-copy { margin:6px 0 12px; max-width:100ch; font-size:.9rem; }
#tutorial-progress { max-width:460px; height:4px; margin-bottom:12px; }
#tutorial-progress::-webkit-progress-value { background:var(--frame-gold); }
#tutorial-progress::-moz-progress-bar { background:var(--frame-gold); }
.tutorial-actions { display:flex; gap:10px; align-items:center; }
body .tutorial-target { outline-color:var(--frame-gold)!important; animation:tutorial-frame-glow 2.8s ease-in-out infinite; }
@keyframes tutorial-frame-glow { 0%,100%{box-shadow:0 0 3px #efba5230}50%{box-shadow:0 0 18px #efba5260} }
@media(prefers-reduced-motion:reduce){body .tutorial-target,body .continue-glow{animation:none;}}
body.reduce-motion .tutorial-target,body.reduce-motion .continue-glow{animation:none;}

/* Two slow border glows, never flashing or dimming the help text. */
body .skill-connections.help-open-highlight,body .requirement-guidance-highlight {
 animation:help-open-glow 1.5s ease-in-out 2;
}
body .requirement-guidance-highlight { animation-delay:var(--requirement-highlight-delay,0ms); }
@keyframes help-open-glow {
 0%,100% { border-color:var(--frame-edge); box-shadow:var(--frame-shadow); }
 50% { border-color:#efba52; box-shadow:inset 0 0 10px #efba5215,0 0 18px #efba5260; }
}
@media(prefers-reduced-motion:reduce){
 body .skill-connections.help-open-highlight,body .requirement-guidance-highlight { animation:none; border-color:#efba52; box-shadow:0 0 0 2px #efba5250; }
}
body.reduce-motion .skill-connections.help-open-highlight,body.reduce-motion .requirement-guidance-highlight { animation:none; border-color:#efba52; box-shadow:0 0 0 2px #efba5250; }