:root { color-scheme: dark; }
* { box-sizing: border-box; margin: 0; }
body { font: 15px/1.5 system-ui, sans-serif; background: #0e1420; color: #dce3ee; min-height: 100vh; }
main { max-width: 760px; margin: 0 auto; padding: 20px 16px 48px; }
nav { display: flex; gap: 18px; align-items: baseline; margin-bottom: 6px; }
nav .brand { font-size: 20px; font-weight: 700; color: #dce3ee; text-decoration: none; }
nav a { color: #8b96a8; text-decoration: none; font-size: 14px; }
nav a:hover, nav a.here { color: #dce3ee; }
.muted { color: #8b96a8; font-size: 13px; }
h2 { font-size: 16px; margin: 22px 0 10px; }

#scene { position: relative; height: 180px; border-radius: 12px; overflow: hidden;
         margin: 16px 0; transition: background 2s; border: 1px solid #232c3d; }
#scene.daylight { background: linear-gradient(#79b7e8, #cfe6f5); }
#scene.dusk     { background: linear-gradient(#2e3a5e, #d88a5a); }
#scene.sunset   { background: linear-gradient(#1a2140, #7a3b52); }
#scene.night    { background: linear-gradient(#070a14, #131a2c); }
#ground { position: absolute; bottom: 0; width: 100%; height: 34px; background: #10192b; }
#hippo { position: absolute; bottom: 26px; transition: left 3s linear;
         filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
#line { position: absolute; top: 12px; left: 16px; right: 16px; font-size: 13px;
        color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(0,0,0,.5); }

.row { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.card { flex: 1 1 160px; background: #151d2e; border: 1px solid #232c3d; border-radius: 10px; padding: 12px 14px; }
.card b { display: block; font-size: 12px; color: #8b96a8; text-transform: uppercase; letter-spacing: .05em; }
.card span { font-size: 17px; }
.wide { flex-basis: 100%; }

button { background: #2c3a58; color: #dce3ee; border: 1px solid #3d4d70; border-radius: 8px;
         padding: 10px 16px; font-size: 14px; cursor: pointer; }
button:hover:not(:disabled) { background: #35466a; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: #3d5a8f; }

#msg { margin-top: 10px; min-height: 1.5em; color: #e8b36a; }
#ritual { margin-top: 10px; display: none; align-items: center; gap: 12px; padding: 12px;
          background: #151d2e; border: 1px solid #3d4d70; border-radius: 10px; }
#ritual .big { font-size: 34px; }

form .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
label { display: block; font-size: 12px; color: #8b96a8; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
input, select, textarea { width: 100%; background: #0e1420; color: #dce3ee; border: 1px solid #3d4d70;
                border-radius: 8px; padding: 9px 10px; font-size: 14px; font-family: inherit; box-sizing: border-box; }
fieldset { border: 1px solid #232c3d; border-radius: 10px; padding: 14px; margin: 14px 0; }
legend { font-size: 13px; color: #8b96a8; padding: 0 6px; }

.banner { background: #2a2438; border: 1px solid #4a3d70; border-radius: 10px; padding: 10px 14px;
          margin: 12px 0; font-size: 14px; }
.banner.warn { background: #332a1e; border-color: #6b5636; }

table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #232c3d; }
th { font-size: 12px; color: #8b96a8; text-transform: uppercase; letter-spacing: .05em; }
td.clean { color: #7fc98f; }
td.messy { color: #e8b36a; }