/* ==========================================================================
   DinoPark Tycoon Deluxe : habillage "VGA 1993 / Win95"
   ========================================================================== */

:root{
  --bg:        #0a1410;
  --face:      #c3c7cb;   /* gris boîtier */
  --face-lo:   #9aa0a6;
  --hi:        #ffffff;
  --sh:        #55595e;
  --sh2:       #2a2d30;
  --ink:       #101418;
  --title:     #123a2a;
  --title2:    #1f6b46;
  --accent:    #f0a021;
  --accent2:   #d3540f;
  --green:     #2f8f4e;
  --red:       #b4271d;
  --panel:     #1c2b22;
  --panel-lo:  #142019;
  --parch:     #e8dcb8;
  --mono: "Px437 IBM VGA 8x16","Perfect DOS VGA 437","Consolas","Menlo","DejaVu Sans Mono",monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:13px;
  overflow:hidden;
  -webkit-font-smoothing:none;
  user-select:none;
  cursor:default;
}
.hidden{ display:none !important; }

#app{ position:fixed; inset:0; display:flex; flex-direction:column; }

/* ---------- reliefs ---------- */
.bevel-out{ border:2px solid; border-color:var(--hi) var(--sh2) var(--sh2) var(--hi); }
.bevel-in { border:2px solid; border-color:var(--sh2) var(--hi) var(--hi) var(--sh2); }

/* ==========================================================================
   TOP BAR
   ========================================================================== */
#topbar{
  flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding:5px 10px;
  background:linear-gradient(#2b4a38,#16281e 60%,#0f1d15);
  border-bottom:3px solid #0a1410;
  box-shadow:inset 0 1px 0 #4d7a5e;
}
.tb-logo{ font-size:19px; letter-spacing:1px; text-shadow:2px 2px 0 #000; white-space:nowrap; }
.tb-logo-a{ color:#f4c542; }
.tb-logo-b{ color:#7fd07f; }
.tb-logo-c{ display:block; font-size:9px; color:#9ec4a8; letter-spacing:4px; margin-top:-3px; }

.tb-stats{ display:flex; gap:6px; flex:1 1 auto; overflow:hidden; }
.stat{
  background:#0d1a13; border:2px solid; border-color:#0a1410 #375c45 #375c45 #0a1410;
  padding:2px 8px; min-width:96px; line-height:1.15;
}
.stat b{ display:block; font-size:9px; color:#79a688; font-weight:normal; letter-spacing:1px; }
.stat span{ display:block; color:#ffe9a8; font-size:14px; white-space:nowrap; }
.stat.flash span{ animation:flash .5s ease-out 3; }
@keyframes flash{ 50%{ color:#fff; text-shadow:0 0 6px var(--accent);} }
#stat-cash.neg span{ color:#ff7b6b; }

.tb-view{ display:flex; gap:3px; margin-right:4px; }
.vw{
  font-family:var(--mono); font-size:11px; min-width:34px; height:26px;
  background:var(--face); color:var(--ink); cursor:pointer;
  border:2px solid; border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
}
.vw:hover{ background:#d8dce0; }
.vw.on{ background:#c9a24a; border-color:var(--sh2) var(--hi) var(--hi) var(--sh2); }

.tb-speed{ display:flex; gap:3px; }
.spd{
  font-family:var(--mono); font-size:12px; min-width:34px; height:26px;
  background:var(--face); color:var(--ink); cursor:pointer;
  border:2px solid; border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
}
.spd:hover{ background:#d8dce0; }
.spd.on{ background:#8fbf9c; border-color:var(--sh2) var(--hi) var(--hi) var(--sh2); }

/* ==========================================================================
   MAIN
   ========================================================================== */
#main{ flex:1 1 auto; display:flex; min-height:0; }

#toolbar{
  flex:0 0 74px; background:linear-gradient(90deg,#232a26,#171d19);
  border-right:3px solid #0a1410; padding:5px 4px; overflow-y:auto;
  display:flex; flex-direction:column; gap:3px;
}
#toolbar hr{ border:0; border-top:1px solid #3a4640; border-bottom:1px solid #0d1310; margin:4px 2px; }
.tool{
  width:100%; height:48px; background:var(--face); cursor:pointer; padding:2px 0 0;
  border:2px solid; border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font-family:var(--mono);
}
.tool:hover{ background:#d8dce0; }
.tool.on{ background:#8fbf9c; border-color:var(--sh2) var(--hi) var(--hi) var(--sh2); }
.tool em{ font-style:normal; font-size:9px; letter-spacing:.5px; }
.tool .ic{ width:24px; height:24px; display:block; image-rendering:pixelated; }

/* ==========================================================================
   VIEWPORT
   ========================================================================== */
#viewport{ position:relative; flex:1 1 auto; overflow:hidden; background:#1d2b1f; min-width:0; }
#game{ position:absolute; inset:0; width:100%; height:100%; display:block; image-rendering:pixelated; }

#minimap-box{
  position:absolute; right:8px; bottom:8px; padding:3px; background:var(--face);
  border:2px solid; border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
  box-shadow:3px 3px 0 rgba(0,0,0,.45);
}
#minimap{ display:block; image-rendering:pixelated; border:1px solid #333; cursor:crosshair; }

/* ---------- fenêtres flottantes ---------- */
.win{
  background:var(--face);
  border:2px solid; border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
  box-shadow:4px 4px 0 rgba(0,0,0,.45);
  display:flex; flex-direction:column;
}
.win-title{
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
  background:linear-gradient(90deg,var(--title2),var(--title));
  color:#fff; padding:3px 4px 3px 7px; font-size:12px; letter-spacing:1px; cursor:move;
}
.wt-label{ flex:1 1 auto; text-shadow:1px 1px 0 #000; }
.wt-close{
  width:18px; height:16px; line-height:12px; font-size:13px; font-family:var(--mono);
  background:var(--face); cursor:pointer; padding:0;
  border:2px solid; border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
}
.wt-close:hover{ background:#e0a0a0; }
.win-body{ flex:1 1 auto; padding:7px; overflow:auto; }

#palette{ position:absolute; left:8px; top:8px; width:236px; max-height:calc(100% - 16px); }
#inspector{ position:absolute; right:8px; top:8px; width:280px; max-height:calc(100% - 180px); }
/* en bas à gauche : laisse la minimap (en bas à droite) dégagée */
#logwin{ position:absolute; left:8px; bottom:8px; width:min(580px,calc(100% - 176px)); height:196px; }
#logwin .win-body{ padding:4px; background:#e6eaee; }

.logline{ display:flex; gap:7px; padding:2px 4px; font-size:11px; line-height:1.35; border-bottom:1px solid #d2d6da; }
.logline:nth-child(odd){ background:#dde2e6; }
.logdate{ flex:0 0 88px; color:#5a636b; white-space:nowrap; }
.logtext{ flex:1 1 auto; }
.logline.bad   .logtext{ color:#a3231a; }
.logline.good  .logtext{ color:#12692f; }
.logline.money .logtext{ color:#8a6a10; }

/* ---- alertes ---- */
.alert-head{
  background:#b9c3ba; padding:2px 6px; font-size:10px; letter-spacing:1px;
  color:#1c3a2a; border-top:1px solid #fff; border-bottom:1px solid #98a09a;
  position:sticky; top:0; z-index:1;
}
.alertline{
  display:flex; align-items:center; gap:7px; padding:3px 5px; font-size:11px;
  cursor:pointer; border-bottom:1px solid #d2d6da; background:#f0e6d2;
}
.alertline:hover{ background:#fff6e2; }
.alertdot{ flex:0 0 auto; width:8px; height:8px; border:1px solid rgba(0,0,0,.4); }
.alertline.sev3 .alertdot{ background:#d8321e; }
.alertline.sev2 .alertdot{ background:#e0a020; }
.alertline.sev1 .alertdot{ background:#7f9ab0; }
.alertline.sev3{ background:#f6dcd6; }
.alertline.sev3:hover{ background:#ffe8e2; }
.alertline .btn{ flex:0 0 auto; }

/* badge de la barre d'outils */
.tool{ position:relative; }
.tool .badge{
  position:absolute; top:1px; right:2px; min-width:15px; height:14px; line-height:14px;
  padding:0 3px; font-size:9px; text-align:center; color:#3a2a00;
  background:#e8c040; border:1px solid #8a6a10;
}
.tool .badge.crit{ background:#e04a34; color:#fff; border-color:#8a2010; animation:pulse 1.1s infinite; }
@keyframes pulse{ 50%{ background:#ff7a60; } }

/* ---------- toasts ---------- */
#toasts{ position:absolute; left:50%; transform:translateX(-50%); top:8px; width:430px; pointer-events:none; }
.toast{
  margin-bottom:5px; padding:6px 10px; font-size:12px; color:#fff;
  background:rgba(18,42,30,.94); border-left:5px solid var(--accent);
  box-shadow:2px 2px 0 rgba(0,0,0,.5); animation:tin .25s ease-out;
}
.toast.bad  { border-left-color:#e04a34; background:rgba(58,18,14,.94); }
.toast.good { border-left-color:#57d07a; }
.toast.money{ border-left-color:#f4c542; }
.toast.fade { opacity:0; transition:opacity .5s; }
@keyframes tin{ from{ transform:translateY(-12px); opacity:0; } }

/* ==========================================================================
   STATUS BAR
   ========================================================================== */
#statusbar{
  flex:0 0 auto; display:flex; gap:6px; padding:3px 6px;
  background:var(--face); border-top:2px solid var(--hi); font-size:11px;
}
#statusbar>div{ padding:2px 7px; background:#b6babe; border:2px solid; border-color:var(--sh) var(--hi) var(--hi) var(--sh); }
#status-tool{ flex:0 0 190px; }
#status-msg{ flex:1 1 auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#status-hint{ flex:0 0 auto; color:#3a4046; }

/* ==========================================================================
   MODALES
   ========================================================================== */
#modal-layer{
  position:fixed; inset:0; background:rgba(6,12,9,.62); z-index:60;
  display:flex; align-items:center; justify-content:center;
}
#modal{ width:min(880px,94vw); max-height:88vh; }
#modal .win-body{ max-height:calc(88vh - 26px); }

/* ==========================================================================
   COMPOSANTS
   ========================================================================== */
button, select, input[type=text], input[type=number]{ font-family:var(--mono); font-size:12px; }

.btn{
  background:var(--face); cursor:pointer; padding:4px 12px; color:var(--ink);
  border:2px solid; border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
}
.btn:hover:not(:disabled){ background:#d8dce0; }
.btn:active:not(:disabled){ border-color:var(--sh2) var(--hi) var(--hi) var(--sh2); }
.btn:disabled{ color:#8b9096; cursor:not-allowed; }
.btn.primary{ background:#8fbf9c; font-weight:bold; }
.btn.primary:hover:not(:disabled){ background:#a4d4b1; }
.btn.danger{ background:#d99b93; }
.btn.small{ padding:2px 7px; font-size:11px; }

input[type=text], input[type=number], select{
  background:#fff; padding:3px 5px; color:#000;
  border:2px solid; border-color:var(--sh2) var(--hi) var(--hi) var(--sh2);
}
input[type=range]{ width:100%; }

.row{ display:flex; gap:6px; align-items:center; }
.row.wrap{ flex-wrap:wrap; }
.spacer{ flex:1 1 auto; }
.right{ text-align:right; }
.center{ text-align:center; }
.muted{ color:#4e555c; }
.small{ font-size:11px; }
.tiny{ font-size:10px; }
.pos{ color:#12692f; } .negv{ color:#a3231a; }
h3.sect{
  margin:10px 0 5px; font-size:12px; letter-spacing:1px; color:#1c3a2a;
  border-bottom:2px groove #fff; padding-bottom:2px;
}
h3.sect:first-child{ margin-top:0; }

/* liste / grille de cartes */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:6px; }
.card{
  background:#d7dbdf; padding:5px; cursor:pointer; display:flex; gap:6px;
  border:2px solid; border-color:var(--hi) var(--sh) var(--sh) var(--hi);
}
.card:hover{ background:#e7ebef; }
.card.on{ background:#a8d4b5; border-color:var(--sh2) var(--hi) var(--hi) var(--sh2); }
.card.locked{ opacity:.5; cursor:not-allowed; }
.card canvas{ image-rendering:pixelated; flex:0 0 auto; align-self:center; }
.card .cinfo{ flex:1 1 auto; min-width:0; line-height:1.28; }
.card .cname{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .cprice{ color:#12692f; font-size:11px; }
.card .cdesc{ font-size:10px; color:#4b5259; }

/* tableaux */
table.tbl{ width:100%; border-collapse:collapse; font-size:11px; background:#e6eaee; }
table.tbl th, table.tbl td{ padding:3px 6px; border-bottom:1px solid #b9bec3; text-align:left; }
table.tbl th{ background:#b9c3ba; font-weight:normal; letter-spacing:.5px; }
table.tbl tr.click{ cursor:pointer; }
table.tbl tr.click:hover td{ background:#c9e2d1; }
table.tbl td.num, table.tbl th.num{ text-align:right; }

/* jauges */
.bar{ height:9px; background:#8d9298; border:1px solid var(--sh2); position:relative; overflow:hidden; }
.bar i{ position:absolute; inset:0 auto 0 0; display:block; background:var(--green); }
.bar.warn i{ background:var(--accent); }
.bar.bad i{ background:var(--red); }
.kv{ display:flex; justify-content:space-between; gap:8px; font-size:11px; padding:1px 0; }
.kv b{ font-weight:normal; color:#39424a; }

/* onglets */
.tabs{ display:flex; gap:2px; margin-bottom:6px; border-bottom:2px solid var(--sh); }
.tab{
  padding:3px 11px; background:#b3b8bd; cursor:pointer; font-size:11px;
  border:2px solid; border-color:var(--hi) var(--sh) transparent var(--hi);
}
.tab.on{ background:var(--face); font-weight:bold; }

/* étoiles */
.stars{ color:var(--accent); letter-spacing:1px; }

/* parchemin (aide) */
.parch{ background:var(--parch); color:#3a2f1c; padding:10px 13px; border:2px solid #a4936a; line-height:1.5; }
.parch h4{ margin:9px 0 3px; color:#6b4a1c; font-size:12px; }
.parch h4:first-child{ margin-top:0; }
.parch ul{ margin:3px 0; padding-left:17px; }
.parch li{ margin:2px 0; }
.parch code{ background:#d6c79c; padding:0 3px; }

/* ==========================================================================
   SPLASH
   ========================================================================== */
#splash{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 50% 32%, #2c5a3c 0%, #16301f 45%, #070d09 100%);
}
.splash-inner{ text-align:center; max-width:600px; padding:22px; }
#splash-art{ image-rendering:pixelated; width:480px; max-width:90vw; height:auto; }
#splash h1{
  font-size:40px; margin:6px 0 2px; color:#7fd07f; letter-spacing:2px;
  text-shadow:3px 3px 0 #0a1a10, 6px 6px 0 rgba(0,0,0,.35);
}
#splash h1 span{ color:#f4c542; }
#splash h1 em{ display:block; font-style:normal; font-size:15px; letter-spacing:11px; color:#cfe6d5; margin-top:-2px; }
.tagline{ color:#a9c9b3; font-size:12px; margin:4px 0 16px; }
.splash-form{ display:flex; flex-direction:column; gap:8px; align-items:center; margin-bottom:16px; }
.splash-form label{ color:#cfe6d5; font-size:12px; display:flex; gap:8px; align-items:center; }
.splash-form input, .splash-form select{ width:270px; }
.splash-btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hint-line{ color:#9dbaa6; font-size:11px; line-height:1.6; margin:12px auto 0; max-width:520px; }
.hint-line b{ color:#e8d18a; }
#splash-quick{ background:#e0b455; }
#splash-quick:hover{ background:#eec46a; }
#splash-mega{ background:#c8664a; color:#fff; }
#splash-mega:hover{ background:#dd7a5c; }
.small-btn{ padding:5px 16px; font-size:12px; }
.hardcore{
  background:#8a2418; color:#ffd9c8; padding:0 5px; font-size:9px;
  letter-spacing:1px; border:1px solid #d05a3a;
}
.big{
  padding:9px 22px; font-size:15px; font-family:var(--mono); cursor:pointer;
  background:var(--face); border:3px solid; border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
}
.big:hover{ background:#dfe3e7; }
#splash-start{ background:#8fbf9c; }
#splash-start:hover{ background:#a9d6b6; }
.credits{ color:#6d8a77; font-size:10px; margin-top:20px; }

/* ==========================================================================
   Divers
   ========================================================================== */
#viewport.tool-build   #game{ cursor:crosshair; }
#viewport.tool-bulldoze #game{ cursor:crosshair; }
#viewport.panning      #game{ cursor:grabbing; }
::-webkit-scrollbar{ width:14px; height:14px; }
::-webkit-scrollbar-track{ background:#a8adb2; }
::-webkit-scrollbar-thumb{ background:var(--face); border:2px solid; border-color:var(--hi) var(--sh2) var(--sh2) var(--hi); }

/* ==========================================================================
   Ajouts : salle des ventes, concurrence, encyclopédie
   ========================================================================== */
.auction-log{
  background:#20262c; color:#c9d4c0; font-family:var(--mono); font-size:10px;
  padding:5px 7px; min-height:98px; max-height:130px; overflow:auto;
  border:2px solid; border-color:var(--sh2) var(--hi) var(--hi) var(--sh2);
}
.auction-log div{ line-height:1.45; }

.sharebar{
  height:16px; background:#a8433a; border:2px solid;
  border-color:var(--sh2) var(--hi) var(--hi) var(--sh2); position:relative; overflow:hidden;
}
.sharebar i{
  position:absolute; inset:0 auto 0 0; display:block; background:var(--green);
  border-right:2px solid #1d2a20;
}

.chip{
  display:inline-block; font-size:10px; padding:1px 6px; margin:0 3px 3px 0;
  background:#c8ccd2; border:1px solid var(--sh2); color:#3a4048;
}
.chip.on{ background:#a8d4b5; border-color:#4a7a58; color:#1d3a26; font-weight:bold; }

/* la fiche encyclopédique reste lisible sur les petits écrans */
#modal-body .parch{ font-size:11px; }

/* Tarifs saison par saison (écran « Monthly Ticket Sales Profit ») */
.seasons{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.season{
  background:#d7dbdf; padding:5px 6px; border:2px solid;
  border-color:var(--sh2) var(--hi) var(--hi) var(--sh2);
}
.season.on{ background:#c9e2cf; border-left:4px solid var(--green); }
.season .sname{ font-size:12px; font-weight:bold; }
.season input[type=number]{ width:58px; }

/* ==========================================================================
   Visite guidée
   ========================================================================== */
.tuto{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  width:min(560px, calc(100% - 40px)); z-index:60; cursor:move;
  background:var(--face); color:#1d2228; padding:8px 10px 9px;
  border:3px solid; border-color:var(--hi) var(--sh2) var(--sh2) var(--hi);
  box-shadow:0 6px 22px rgba(0,0,0,.45);
}
.tuto.hidden{ display:none; }
.tuto-head{ display:flex; align-items:center; gap:7px; font-size:13px; margin-bottom:5px; }
.tuto-step{
  font-size:10px; background:#2f5f3f; color:#dff0e4; padding:1px 6px; white-space:nowrap;
}
.tuto-x{
  background:none; border:0; font-size:17px; line-height:1; cursor:pointer; color:#5a6068;
}
.tuto-x:hover{ color:var(--red); }
.tuto-bar{ height:5px; background:#8d9298; border:1px solid var(--sh2); margin-bottom:6px; }
.tuto-bar i{ display:block; height:100%; background:var(--green); transition:width .3s; }
.tuto-body{ font-size:12px; line-height:1.5; }
.tuto-body code{ background:#d6d9dd; padding:0 3px; }
.tuto-hint{
  font-size:11px; color:#5a4a1c; background:#f0e6c4; border-left:3px solid #c8a83a;
  padding:3px 6px; margin-top:5px; line-height:1.4;
}

/* halo sur l'élément que l'étape demande d'utiliser */
.tuto-focus{ position:relative; animation:tutoPulse 1.25s ease-in-out infinite; z-index:40; }
@keyframes tutoPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(240,200,80,.95), 0 0 0 0 rgba(240,200,80,.5); }
  50%    { box-shadow:0 0 0 3px rgba(240,200,80,.95), 0 0 14px 6px rgba(240,200,80,.45); }
}