:root{
    --gold:#ffb703; --teal:#06d6a0; --ink:#1d2733; --card:#ffffff;
    --bg1:#0f2027; --bg2:#203a43; --bg3:#2c5364; --pink:#ef476f; --soft:#f4f7f9;
    --shadow:0 10px 30px rgba(0,0,0,.25);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  body{margin:0; font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:var(--ink);
    background:linear-gradient(160deg,var(--bg1),var(--bg2) 55%,var(--bg3)); min-height:100vh; padding:16px 12px 44px;}
  html,body{overflow-x:hidden;}
  header{text-align:center; color:#fff; margin-bottom:8px;}
  header h1{margin:2px 0; font-size:clamp(24px,5vw,36px); letter-spacing:1px;}
  header p{margin:0 auto; opacity:.85; font-size:14px; max-width:94vw; line-height:1.5;}
  .langbar{display:flex; gap:6px; justify-content:center; margin-top:8px;}
  .langbar button{border:2px solid rgba(255,255,255,.4); background:transparent; color:#fff; border-radius:999px;
    padding:4px 14px; cursor:pointer; font-size:13.5px; font-weight:700;}
  .langbar button.on{background:var(--gold); border-color:var(--gold); color:#6b4700;}
  .langbar.dark{justify-content:flex-start; margin:0 0 12px;}
  .langbar.dark button{border-color:#c3d2d9; color:var(--ink);}
  .langbar.dark button.on{background:var(--gold); border-color:var(--gold); color:#6b4700;}
  .topbar{max-width:1020px; margin:10px auto; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; align-items:center;}
  .chip{background:#ffffff; border-radius:999px; padding:6px 14px; font-weight:700; font-size:14.5px; box-shadow:var(--shadow);}
  .chip input{border:none; font:inherit; width:90px; text-align:center; background:transparent; outline:none;}
  .chip.debt{background:#ffe3e3; color:#9d0208;}
  .btn{border:none; cursor:pointer; border-radius:999px; padding:8px 16px; font-weight:800; font-size:14.5px;
    background:linear-gradient(180deg,#ffe98a,var(--gold)); color:#6b4700; box-shadow:0 3px 0 #c98f04;}
  .btn:active{transform:translateY(2px); box-shadow:none;}
  .btn.ghost{background:#fff; color:var(--ink); box-shadow:0 3px 0 #b9c6cc;}
  .wrap{max-width:1020px; margin:0 auto; display:grid; grid-template-columns:1.2fr .8fr; gap:14px;}
  @media (max-width:820px){ .wrap{grid-template-columns:1fr;} }
  .card{background:var(--card); border-radius:20px; box-shadow:var(--shadow); padding:16px;}
  .scene{border-radius:16px; padding:18px 14px; text-align:center; color:#fff; min-height:150px;
    background:linear-gradient(180deg,#35586c,#22384a); position:relative; overflow:hidden;}
  .scene .emoji{font-size:58px; display:block; margin-bottom:4px;}
  .scene h2{margin:2px 0; font-size:22px;}
  .scene p{margin:2px 0; opacity:.9; font-size:14px;}
  .scene.night{background:linear-gradient(180deg,#1b1035,#3b1850);}
  .speech{margin-top:10px; background:#fff; color:var(--ink); border-radius:999px; display:inline-block;
    padding:7px 16px; font-size:14.5px; box-shadow:0 4px 10px rgba(0,0,0,.2); min-height:20px;}
  .map{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:14px;}
  @media (max-width:560px){ .map{grid-template-columns:repeat(3,1fr);} }
  button.loc{border:2px solid #e3ecef; background:var(--soft); border-radius:14px; padding:10px 4px; cursor:pointer;
    font-size:14px; font-weight:700; color:var(--ink);}
  button.loc small{display:block; font-weight:500; font-size:11.5px; opacity:.65; margin-top:2px;}
  button.loc.active{border-color:var(--gold); background:#fff7e0;}
  .panel{margin-top:14px;}
  .panel h3{margin:0 0 8px; font-size:16.5px;}
  .row{display:flex; gap:8px; flex-wrap:wrap;}
  button.act{flex:1 1 150px; border:none; cursor:pointer; border-radius:14px; padding:11px 8px; font-size:14.5px; font-weight:700;
    background:linear-gradient(180deg,#ffffff,#eef6f8); color:var(--ink); box-shadow:0 3px 0 #c3d3da; text-align:left;}
  button.act small{display:block; font-weight:500; font-size:12px; opacity:.7; margin-top:2px;}
  button.act:disabled{opacity:.45; cursor:not-allowed;}
  button.act:active{transform:translateY(2px); box-shadow:none;}
  .list{display:grid; gap:8px;}
  .item{display:flex; justify-content:space-between; align-items:center; gap:8px; background:var(--soft);
    border-radius:12px; padding:9px 12px; font-size:14px;}
  .item b{font-size:14.5px;}
  .item small{display:block; opacity:.7; font-weight:500;}
  .mini{border:none; cursor:pointer; border-radius:999px; padding:6px 14px; font-weight:700; font-size:13px;
    background:var(--teal); color:#04382b; white-space:nowrap;}
  .mini:disabled{opacity:.45; cursor:not-allowed;}
  .mini.pink{background:var(--pink); color:#fff;}
  .stats{display:grid; gap:9px;}
  .stat{display:grid; grid-template-columns:74px 1fr 32px; gap:8px; align-items:center; font-size:14px;}
  .bar{height:13px; background:#e8eef1; border-radius:999px; overflow:hidden;}
  .bar>div{height:100%; border-radius:999px; transition:width .4s;}
  .f-energy{background:linear-gradient(90deg,#ffd93b,#ffb703);}
  .f-mood{background:linear-gradient(90deg,#ff8fab,#ef476f);}
  .f-social{background:linear-gradient(90deg,#6ee7ff,#118ab2);}
  .f-hunger{background:linear-gradient(90deg,#ffb35c,#f4841f);}
  .f-hygiene{background:linear-gradient(90deg,#a0e7b5,#2a9d5c);}
  .sec{margin-top:14px;}
  .sec h3{margin:0 0 8px; font-size:16px;}
  .friend{display:flex; justify-content:space-between; align-items:center; background:var(--soft); border-radius:12px; padding:8px 12px; font-size:14px; margin-bottom:6px;}
  .heartbar{width:90px; height:9px; background:#e8eef1; border-radius:99px; overflow:hidden; display:inline-block; vertical-align:middle;}
  .heartbar>div{height:100%; background:linear-gradient(90deg,#ff8fab,#ef476f);}
  .diary{background:#fffaf0; border:1.5px dashed #e0c08a; border-radius:14px; padding:10px 14px; font-size:13.5px;
    line-height:1.8; max-height:190px; overflow:auto;}
  .diary p{margin:0;}
  .billboard{background:linear-gradient(90deg,#ffe98a,#ffb703); border-radius:12px; padding:10px 12px; font-weight:800;
    text-align:center; margin-bottom:8px; color:#6b4700;}
  .songline{background:#241536; color:#ffd7ef; border-radius:12px; padding:8px 12px; font-size:13.5px; margin-bottom:6px;}
  .bizrow{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
  .overlay{position:fixed; inset:0; background:rgba(10,20,28,.6); display:none; align-items:center; justify-content:center; z-index:20; padding:14px;}
  .overlay.show{display:flex;}
  .modal{background:#fff; border-radius:20px; max-width:430px; width:100%; padding:20px; max-height:88vh; overflow:auto;}
  .modal h3{margin:0 0 6px; font-size:19px;}
  .modal p.note{font-size:13px; opacity:.75; margin:4px 0 10px; line-height:1.6;}
  .modal label{display:block; font-size:13.5px; font-weight:700; margin:10px 0 4px;}
  .modal input,.modal select{width:100%; padding:9px 10px; border:2px solid #dfe9ec; border-radius:10px; font-size:14.5px;}
  .pack{display:flex; justify-content:space-between; align-items:center; border:2px solid #ffe1a8; background:#fffaf0;
    border-radius:14px; padding:10px 12px; margin-bottom:8px; cursor:pointer; font-weight:700;}
  .pack.sel{border-color:var(--gold); background:#fff3d6;}
  .gate{display:flex; gap:8px; margin-top:8px;}
  .gate button{flex:1; border:none; border-radius:12px; padding:11px; font-weight:800; cursor:pointer; font-size:15px;}
  .gate .stripe{background:#635bff; color:#fff;}
  .gate .paystack{background:#00c3f7; color:#003a47;}
  .x{float:right; border:none; background:#eef3f5; border-radius:50%; width:30px; height:30px; cursor:pointer; font-size:15px;}
  .bgcard{border:2.5px solid #e3ecef; border-radius:16px; padding:14px; margin-bottom:10px; cursor:pointer;}
  .bgcard:hover{border-color:var(--gold); background:#fffaf0;}
  .bgcard h4{margin:0 0 4px; font-size:16.5px;}
  .bgcard p{margin:0; font-size:13.5px; opacity:.8; line-height:1.6;}
  footer{max-width:1020px; margin:16px auto 0; color:#cfe3ec; font-size:12.5px; text-align:center; opacity:.85; line-height:1.7;}

  /* v1.3.1 mobile fit: nothing may force the layout wider than the screen.
     Flex/grid children shrink, long unbroken text wraps, chips compact. */
  .topbar{max-width:100%;}
  .chip{min-width:0; max-width:100%;}
  .row>*, .item>*, .friend>*, .bizrow>*, .gate>*{min-width:0;}
  .item, .friend, .billboard, .songline, .pack, .bgcard p{overflow-wrap:break-word;}
  .speech{max-width:100%; overflow-wrap:break-word;}
  .diary{overflow-wrap:break-word;}
  button.loc{min-width:0; overflow-wrap:anywhere;}
  .friend .mini{flex:none;}
  .heartbar{flex:none;}
  input, select, textarea{max-width:100%;}
  @media (max-width:560px){
    .chip{font-size:13px; padding:5px 10px;}
    .chip input{width:70px;}
    .topbar{gap:6px;}
    header p{font-size:13px;}
    button.act{flex-basis:120px;}
  }