/* Good Behavior — dark playful theme */
:root {
  --bg: #0f1220;
  --card: #1a1f35;
  --card2: #222848;
  --text: #eef0ff;
  --muted: #8b91b5;
  --accent: #7c6cff;
  --good: #3ddc84;
  --bad: #ff6b81;
  --gold: #ffd166;
  --radius: 16px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}
h1 { font-size: 1.5rem; margin: .2em 0; }
h2 { font-size: 1.1rem; margin: 0 0 .6em; }
main { max-width: 1050px; margin: 0 auto; padding: 16px; }
.muted-text { color: var(--muted); }
.error { color: var(--bad); }
.transport-warning { width: 100%; padding: 10px 16px; background: #6b3e00; color: #fff4d6; text-align: center; font-weight: 650; }
.security-warning { width: 100%; padding: 12px 16px; background: #7a1f32; color: #fff; text-align: center; font-weight: 700; }
small { color: var(--muted); }

/* topbar */
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--card); position: sticky; top: 0; z-index: 10; }
.brand { font-weight: 700; font-size: 1.1rem; color: var(--text); text-decoration: none; }
.topbar-right { display: flex; gap: 12px; align-items: center; }
.userchip { color: var(--muted); font-size: .9rem; }
.inline { display: inline; }
.linkbtn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .95rem; padding: 2px 4px; }
.linkbtn:hover { color: var(--text); }
.linkbtn.danger { color: var(--bad); margin-top: 12px; }

/* login */
.login-body { display: grid; place-items: center; }
.login-card { background: var(--card); padding: 32px 28px; border-radius: var(--radius); width: min(92vw, 360px); text-align: center; }
.login-card h1 { font-size: 1.6rem; }
.login-card form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--muted); text-align: left; }
input, select {
  background: var(--card2); border: 1px solid #2e3560; color: var(--text);
  padding: 10px 12px; border-radius: 10px; font-size: 1rem; width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* buttons */
.btn {
  background: var(--card2); color: var(--text); border: 1px solid #2e3560;
  padding: 8px 16px; border-radius: 10px; cursor: pointer; font-size: .95rem;
}
.btn:hover { filter: brightness(1.2); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); }
.btn.big { width: 100%; padding: 12px; font-size: 1.05rem; }
.btn.nav { font-size: 1.2rem; padding: 4px 14px; }

/* cards */
.card { background: var(--card); border-radius: var(--radius); padding: 18px; margin: 14px 0; }
.hform { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.hform label { min-width: 130px; flex: 1; }
.check { flex-direction: row; align-items: center; gap: 8px; margin: 10px 0; text-align: left; }
.check input { width: auto; }

/* kid grid / dashboard */
.kidgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 10px; }
.kidcard { background: var(--card); border-radius: var(--radius); padding: 18px; text-decoration: none; color: var(--text); display: block; transition: transform .12s, box-shadow .12s; }
.kidcard:hover { transform: translateY(-3px); box-shadow: 0 8px 24px #0008; }
.kidcard-head { display: flex; justify-content: space-between; align-items: center; }
.kidname { font-size: 1.25rem; font-weight: 700; }
.lvl { background: var(--card2); padding: 3px 10px; border-radius: 99px; font-size: .85rem; color: var(--gold); }
.kidcard-score { font-size: 2rem; font-weight: 800; margin: 8px 0 4px; color: var(--good); }
.kidcard-score small { font-size: .9rem; color: var(--muted); font-weight: 400; }
.mini-streak { color: var(--gold); font-size: .85rem; margin-top: 6px; }
.mini-challenge { margin-top: 10px; font-size: .8rem; color: var(--muted); }

/* progress bars */
.pbar { background: var(--card2); border-radius: 99px; height: 10px; overflow: hidden; }
.pbar.big { height: 16px; margin: 8px 0; }
.pbar div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--good)); border-radius: 99px; transition: width .5s ease; }
.lvlbar { height: 8px; }
.lvlbar.sm { display: inline-block; width: 120px; vertical-align: middle; margin: 0 6px; }

/* kid header */
.kidheader { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.lvl-line { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.score-box { text-align: right; }
.score { background: var(--card); border: 2px solid var(--accent); border-radius: var(--radius); padding: 8px 22px; cursor: pointer; color: var(--text); display: flex; flex-direction: column; align-items: center; transition: transform .1s; }
.score:active { transform: scale(.95); }
.score-num { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--good); }
.score-cap { font-size: .75rem; color: var(--muted); }
.lifetime { color: var(--muted); font-size: .85rem; margin-top: 6px; }

/* challenge */
.challenge { border: 1px solid #2e3560; background: linear-gradient(135deg, var(--card), #232a52); }
.quest-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px }
.quest-option { border:2px solid #6c63c8; border-radius:16px; background:linear-gradient(145deg,#252b52,#1c2141); color:var(--text); padding:18px 14px; min-height:116px; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; gap:12px; text-align:left; font:inherit; box-shadow:0 5px 0 #423b91; transition:transform .15s,box-shadow .15s }
.quest-option:hover,.quest-option:focus-visible { transform:translateY(-2px); box-shadow:0 7px 0 #423b91; outline:3px solid var(--accent); outline-offset:2px }
.quest-option:active { transform:translateY(3px); box-shadow:0 2px 0 #423b91 }
.quest-option span { color:var(--accent); font-weight:800 }
@media (max-width:700px) { .quest-grid { grid-template-columns:1fr } }
.reward-tag { color: var(--gold); font-weight: 700; margin-left: 8px; }
.ch-status { margin: 6px 0 0; color: var(--muted); font-size: .9rem; }
.fresh-start-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:14px }
.fresh-start-card { border:1px solid #3f8c71; border-radius:14px; background:#17352e; padding:14px; display:flex; flex-direction:column; gap:8px }
.fresh-start-card strong { color:var(--good); font-size:1.05rem }
.fresh-start-card p { margin:0; color:var(--muted) }
.pending-tag { color:var(--gold); font-weight:700 }
.fresh-start-fields { border:1px solid #3f8c71; border-radius:12px; padding:12px; display:flex; flex-wrap:wrap; gap:10px }
.fresh-start-fields[hidden] { display:none }
.fresh-start-config { border-bottom:1px solid #2e3560; padding:10px 0 }

/* matrix */
.matrix-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.matrix { width: 100%; border-collapse: collapse; margin-top: 8px; }
.matrix th { color: var(--muted); font-size: .8rem; font-weight: 600; padding: 4px 6px; text-align: center; }
.matrix th.today { color: var(--gold); }
.matrix th small { display: block; }
.matrix td { padding: 4px 3px; text-align: center; }
.bname { text-align: left !important; min-width: 210px; white-space: nowrap; }
.brow .bname { display: table-cell; }
.brow .bname > * { vertical-align: middle; }
.bemoji { font-size: 1.3rem; margin-right: 8px; }
.behavior-description { color: var(--muted); font-style: italic; }
.btext { display: inline-block; text-align: left; line-height: 1.15; margin-right: 8px; }
.btext strong { font-size: .95rem; }
.btext small { display: block; }
.streak { color: var(--gold); font-size: .85rem; margin-left: 6px; white-space: nowrap; }
.hint { color: var(--muted); font-size: .8rem; margin: 8px 0 0; }

/* cells */
.cell {
  width: 52px; height: 52px; border-radius: 14px; border: 1px solid #2e3560;
  background: var(--card2); color: var(--text); font-size: 1.4rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  transition: transform .08s, background .2s;
}
.cell:hover { transform: scale(1.08); }
.cell.today { border-color: var(--accent); }
.cell .plus { color: var(--muted); font-size: 1.2rem; }
.face-pile { display: block; width: 36px; height: 34px; position: relative; }
.pile-face {
  position: absolute; left: var(--pile-left); top: var(--pile-top);
  font-size: 1.15rem; line-height: 1; filter: drop-shadow(0 1px 1px #0006);
}
.cell.locked { cursor: not-allowed; opacity: .55; }
.cell.future { cursor: not-allowed; opacity: .3; }
.cell.positive:hover:not(.future):not(.locked) { background: #173527; }
.cell.negative:hover:not(.future):not(.locked) { background: #3a2030; }
.cell .cnt {
  position: absolute; bottom: -6px; right: -6px; background: var(--accent);
  border-radius: 99px; font-size: .68rem; font-weight: 700; padding: 1px 6px; cursor: pointer;
}
.cell.negative .cnt { background: var(--bad); }

/* row states (TIX-013) */
.brow.muted-row .bemoji, .brow.muted-row .btext strong { filter: grayscale(.85); opacity: .55; }
.brow.muted-row .cell { filter: grayscale(.5); opacity: .75; }
.super-sad-row .btext strong { color: var(--bad); }
body.super-sad-1 > :not(#fx):not(#modal-root) { filter: grayscale(.18) saturate(.9); }
body.super-sad-2 > :not(#fx):not(#modal-root) { filter: grayscale(.36) saturate(.8); }
body.super-sad-3 > :not(#fx):not(#modal-root) { filter: grayscale(.54) saturate(.7); }
body.super-sad-4 > :not(#fx):not(#modal-root) { filter: grayscale(.72) saturate(.6); }
body.super-sad-5 > :not(#fx):not(#modal-root) { filter: grayscale(1); }
.brow.energy { position: relative; }
.brow.energy .btext strong { color: var(--gold); }
.brow.badge .streak { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* marketplace */
.itemgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.item { background: var(--card2); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.item-name { font-weight: 600; }
.item-category { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.item-cost { color: var(--gold); font-weight: 700; }
.limit-status { color: var(--accent); font-size: .85rem; font-weight: 700; }
.item .buy { align-self: flex-start; }
.item .del-i { position: absolute; top: 8px; right: 10px; }
.item.unaffordable { filter: grayscale(.85); opacity: .5; }
.item.sold-out .limit-status { color: var(--bad); }
.owned-tag { color: var(--good); font-weight: 700; font-size: .85rem; }
.catalog-adds { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:12px; }
.catalog-adds .linkbtn { border:1px solid #3d4675; border-radius:9px; padding:5px 8px; }
.powerup-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.powerup-use { background:var(--card2); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.cosmetic-slot-field[hidden] { display:none }
.home-link { margin:0 0 18px; }

/* Pixel Home is deliberately code-drawn: it stays private, printable, and fast. */
.home-heading { display:flex; gap:16px; justify-content:space-between; align-items:center; margin-bottom:14px; }
.home-heading h1 { margin:0; }
.home-actions { display:flex; flex-wrap:wrap; gap:8px; }
.pixel-home-wrap { overflow:auto; border:5px solid #10142d; border-radius:16px; box-shadow:0 8px 0 #10142d; }
.pixel-home { width:min(100%,900px); min-width:620px; height:480px; position:relative; overflow:hidden; background:#304169; image-rendering:pixelated; }
.pixel-home::before { content:""; position:absolute; inset:0 0 120px; background:radial-gradient(circle at 20% 20%,#fff8 0 3px,transparent 4px) 0 0/42px 42px; }
.pixel-home::after { content:""; position:absolute; left:0; right:0; bottom:0; height:120px; background:#87563c; border-top:8px solid #b27e58; }
.pixel-home.wallpaper-stars { background:#283464; }
.pixel-home.floor-checker::after { background:conic-gradient(#80503b 25%,#be8b5f 0 50%,#80503b 0 75%,#be8b5f 0) 0 0/44px 44px; border-top:8px solid #73503d; }
.pixel-window { position:absolute; right:90px; top:58px; width:130px; height:112px; border:12px solid #f6d36d; background:#395589; display:grid; place-items:center; font-size:56px; z-index:1; }
.pixel-avatar { position:absolute; left:42%; bottom:92px; width:130px; height:230px; z-index:3; }
.avatar-head { position:absolute; left:25px; top:25px; width:80px; height:80px; background:#ffd1ab; box-shadow:0 -18px 0 #4b3152, 0 0 0 8px #18203d; }
.avatar-body { position:absolute; left:10px; top:110px; width:110px; height:105px; background:#6d91ef; box-shadow:0 0 0 8px #18203d; }
.home-item { position:absolute; z-index:3; font-size:92px; filter:drop-shadow(5px 6px 0 #13162e); }
.home-furniture { left:95px; bottom:75px; }.home-decor { right:50px; bottom:125px; font-size:72px; }.home-pet { right:230px; bottom:80px; font-size:66px; }.home-hat { left:38px; top:-5px; font-size:78px; }
.collection-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.collection-item { background:var(--card2); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:6px; }.collection-item > span { font-size:38px; }.collection-item small { color:var(--muted); }.collection-item.equipped { outline:2px solid var(--good); }
@media print { .topbar,#fx,#modal-root,.home-actions,.home-link,.collection { display:none !important; } body { background:white; color:black; } .pixel-home-page { margin:0; padding:0; } .pixel-home-wrap { border:0; box-shadow:none; } .pixel-home { min-width:0; width:100%; height:620px; } }
@media (max-width:700px) { .home-heading { align-items:flex-start; flex-direction:column; } }

/* ledger */
.ledger-scroll { max-height: 260px; overflow-y: auto; }
.ledger { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ledger th, .ledger td { padding: 6px 8px; text-align: left; border-bottom: 1px solid #2e3560; }
.ledger th { color: var(--muted); position: sticky; top: 0; background: var(--card); }

/* admin */
.admin details { margin: 10px 0; }
.admin summary { cursor: pointer; color: var(--accent); font-weight: 600; margin-bottom: 8px; }

/* modals */
.modal { position: fixed; inset: 0; background: #000a; display: grid; place-items: center; z-index: 100; }
.modal[hidden] { display: none; }
.modal-card { background: var(--card); border-radius: var(--radius); padding: 22px; width: min(94vw, 640px); position: relative; }
.modal-x { position: absolute; top: 10px; right: 14px; font-size: 1.2rem; }
.chart-wrap { position: relative; height: 320px; margin-top: 10px; }
.winbtns { display: flex; gap: 8px; }
.winbtns .active { background: var(--accent); border-color: var(--accent); }
#confirm-modal .modal-card { width: min(92vw, 380px); text-align: center; }
#confirm-modal form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
#behavior-edit-modal .modal-card { width: min(92vw, 460px); }
#behavior-edit-modal form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
#item-edit-modal .modal-card { width: min(92vw, 460px); }
#item-edit-modal form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }

/* fx canvas */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 999; }

.flash-good { animation: flashGood .6s; }
@keyframes flashGood { 0% { box-shadow: 0 0 0 0 #3ddc8488; } 100% { box-shadow: 0 0 0 24px #3ddc8400; } }
.flash-bad { animation: flashBad .5s; }
@keyframes flashBad { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (max-width: 700px) {
  .bname { min-width: 150px; }
  .cell { width: 42px; height: 42px; font-size: 1.15rem; }
}