@font-face{font-family:"Caveat";src:url("/fonts/caveat-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
:root{--ink:#1f1a2e;--cream:#fffaf2;--accent:#ff5c39;--green:#5ac84a;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#6cc04a;color:var(--ink);font:800 15px "Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.hidden{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
.screen{position:fixed;inset:0}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
.btn{font:900 17px "Nunito",system-ui,sans-serif;border:3px solid var(--ink);border-radius:14px;padding:10px 18px;background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--ink);position:relative;top:0;transition:transform .12s}
.btn:active{top:3px;box-shadow:0 1px 0 var(--ink)}
.btn.big{background:var(--accent);color:#fff;font-size:22px;padding:12px 18px;width:100%}
.btn.small{font-size:14px;padding:6px 11px;box-shadow:0 3px 0 var(--ink);border-radius:10px}
.btn.ghost{background:#f3e7d3}
.btn:disabled{opacity:.5}
.panel{background:var(--cream);border:3px solid var(--ink);border-radius:20px;box-shadow:0 7px 0 var(--ink)}
.err{color:#c0281a;min-height:1.2em;text-align:center;font-size:15px}

/* ---------- menu ---------- */
#menuBg{position:absolute;inset:0;width:100%;height:100%}
.yen-home{position:absolute;top:calc(12px + var(--safe-t));left:14px;z-index:2;color:var(--ink);text-decoration:none;font-weight:900;font-size:14px;padding:7px 13px;border:3px solid var(--ink);border-radius:999px;background:#fff;box-shadow:0 3px 0 var(--ink)}
.menu-wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 16px}
.logo{margin:0;font-family:"Caveat","Segoe Print","Bradley Hand",cursive;font-weight:700;font-size:clamp(70px,15vw,130px);line-height:.9;color:#fff;
  text-shadow:4px 4px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),0 9px 0 rgba(31,26,46,.35);transform:rotate(-3deg)}
.tag{margin:10px 0 18px;font-size:17px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:5px 16px;box-shadow:0 3px 0 var(--ink);text-align:center}
.menu-panel{width:min(360px,100%);padding:16px;display:flex;flex-direction:column;gap:12px}
.mechip{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px 12px 6px 6px}
.mechip canvas{width:40px;height:40px;border-radius:10px;background:#f3e7d3;border:2px solid var(--ink)}
.mechip small{display:block;font-size:12px;color:#6a5f7a}
.mechip b{font-size:18px}
.join-row{display:flex;gap:8px}
.btn.big.pub{background:#2fb35a;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px}
.btn.big.pub small{font-size:13px;opacity:.85}
.join-row input{flex:1;min-width:0;font:900 22px "Nunito",system-ui,sans-serif;letter-spacing:.3em;text-align:center;text-transform:uppercase;border:3px solid var(--ink);border-radius:14px;padding:8px;background:#fff;color:var(--ink)}
.join-row input::placeholder{letter-spacing:.1em;color:#b0a8bc}

/* ---------- park HUD ---------- */
#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#hud{position:absolute;inset:0;pointer-events:none}
#hud>*{pointer-events:auto}
#topL{position:absolute;top:calc(10px + var(--safe-t));left:10px;display:flex;gap:8px;align-items:center}
#topR{position:absolute;top:calc(10px + var(--safe-t));right:10px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:70vw}
.chip{font:900 14px "Nunito",system-ui,sans-serif;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:6px 13px;box-shadow:0 3px 0 var(--ink);white-space:nowrap}
.chip b{letter-spacing:.12em;color:var(--accent)}
.chip.dim{background:rgba(255,250,242,.9);font-size:13px;pointer-events:none}
.ibtn{width:44px;height:44px;border:3px solid var(--ink);border-radius:12px;background:#fff;box-shadow:0 3px 0 var(--ink);font-size:20px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
.ibtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.pop{position:absolute;top:calc(66px + var(--safe-t));right:10px;display:flex;gap:6px;flex-wrap:wrap;max-width:300px;background:var(--cream);border:3px solid var(--ink);border-radius:16px;padding:8px;box-shadow:0 5px 0 var(--ink);z-index:5}
.emo{width:52px;height:52px;border:2px solid #e0d3bd;border-radius:12px;background:#fff;font-size:26px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.emo:hover{border-color:var(--ink)}
.emo.wx{width:62px;font-size:22px}
.emo small{font:800 10px "Nunito",system-ui,sans-serif;color:#6a5f7a}
#score{position:absolute;top:calc(64px + var(--safe-t));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:4px 14px;box-shadow:0 3px 0 var(--ink);font-size:12px;color:#6a5f7a;pointer-events:none}
#score b{font-size:20px;color:var(--ink)}
#banner{position:absolute;top:24%;left:50%;transform:translate(-50%,-20px) scale(.9);opacity:0;transition:all .25s cubic-bezier(.3,1.6,.6,1);pointer-events:none;
  background:var(--cream);border:3px solid var(--ink);border-radius:18px;box-shadow:0 6px 0 var(--ink);padding:12px 22px;font:900 26px "Nunito",system-ui,sans-serif;text-align:center;max-width:90vw}
#banner.show{opacity:1;transform:translate(-50%,0) scale(1)}
#banner .sub{display:block;font-size:14px;color:#6a5f7a;margin-top:2px}
.toasts{position:absolute;left:50%;bottom:calc(110px + var(--safe-b));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:6;width:min(92vw,520px)}
.toast{background:var(--ink);color:#fff;border-radius:999px;padding:8px 16px;font-size:14px;text-align:center;animation:tin .2s}
.toast.bad{background:#c0281a}.toast.good{background:#1a8a40}.toast.blue{background:#2a6ad8}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
#prompt{position:absolute;left:50%;bottom:calc(64px + var(--safe-b));transform:translateX(-50%);background:#fff;border:3px solid var(--ink);border-radius:999px;padding:6px 16px;box-shadow:0 3px 0 var(--ink);font-size:16px;white-space:nowrap;pointer-events:none}
#prompt b{display:inline-block;background:var(--ink);color:#fff;border-radius:7px;padding:1px 7px;margin-right:6px;font-size:13px}
#chatLog{position:absolute;left:10px;bottom:calc(44px + var(--safe-b));width:min(360px,60vw);display:flex;flex-direction:column;gap:3px;pointer-events:none}
.cl{background:rgba(31,26,46,.72);color:#fff;border-radius:10px;padding:3px 10px;font-size:13px;width:fit-content;max-width:100%;overflow-wrap:anywhere;transition:opacity 1s}
.cl b{color:#ffd23a}
.cl.sys{background:rgba(31,26,46,.45);font-style:italic;font-weight:700}
.cl.old{opacity:0}
#chatIn{position:absolute;left:10px;bottom:calc(10px + var(--safe-b));width:min(420px,calc(100vw - 20px));font:800 16px "Nunito",system-ui,sans-serif;border:3px solid var(--ink);border-radius:12px;padding:8px 12px;background:#fff;color:var(--ink)}
#help{position:absolute;left:50%;bottom:calc(12px + var(--safe-b));transform:translateX(-50%);font-size:12px;color:rgba(31,26,46,.8);background:rgba(255,250,242,.75);border-radius:999px;padding:3px 12px;white-space:nowrap;pointer-events:none}
.touch #help{display:none}
#pads{position:absolute;inset:0;pointer-events:none;display:none}
.touch #pads{display:block}
#stick{position:absolute;left:calc(26px + env(safe-area-inset-left,0px));bottom:calc(26px + var(--safe-b));width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.22);border:3px solid rgba(31,26,46,.35)}
#knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;border-radius:50%;background:rgba(255,255,255,.8);border:3px solid var(--ink)}
#btns{position:absolute;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(24px + var(--safe-b));display:flex;align-items:flex-end;gap:12px;pointer-events:none}
.pbtn{pointer-events:auto;width:74px;height:74px;border-radius:50%;border:3px solid var(--ink);background:#fff;box-shadow:0 4px 0 var(--ink);font:900 13px "Nunito",system-ui,sans-serif;padding:0;touch-action:manipulation}
.pbtn.use{width:88px;height:88px;background:#ffd23a}
.pbtn.use.lit{background:var(--accent);color:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.touch #prompt{bottom:calc(140px + var(--safe-b))}
.touch #chatLog{bottom:calc(170px + var(--safe-b))}
.touch .toasts{bottom:calc(200px + var(--safe-b))}
#confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;background:rgba(18,12,28,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:12px}
.ov-panel{width:min(460px,100%);max-height:92vh;overflow:auto;padding:16px 18px}
.ov-panel h2{margin:0 0 10px;font-family:"Caveat","Segoe Print",cursive;font-weight:700;font-size:40px;line-height:1}
.ov-panel h3{margin:16px 0 8px;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:#6a5f7a}
.pl{display:flex;align-items:center;gap:10px;padding:6px 8px;border:2px solid #e3d6c0;border-radius:12px;background:#fff;margin-bottom:6px}
.pl canvas{width:30px;height:30px;border-radius:8px;background:#f3e7d3}
.pl .nm{flex:1;min-width:0;font-size:16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pl .nm .me{color:var(--accent)}
.pl.away{opacity:.55}
.crown{color:#e0a010}
.tagadm{font:900 10px "Nunito",system-ui,sans-serif;letter-spacing:.6px;padding:1px 6px;border-radius:999px;border:2px solid var(--ink);background:#ffd23a}
.tagadm.dev{background:linear-gradient(90deg,#ff5c5c,#ffb13b,#ffe14d,#5fd36b,#4aa8ff,#a46bff);color:#fff;text-shadow:0 1px 0 var(--ink)}
.tagadm.vip{border-color:#d08aff;color:#fff;background:linear-gradient(90deg,#9a5ad0,#e04ab8)}
.mini{font:800 12px "Nunito",system-ui,sans-serif;border:2px solid var(--ink);border-radius:8px;background:#ffe4e0;color:#b0201a;padding:3px 8px}
#inviteBox{display:flex;gap:6px;flex-wrap:wrap}
#inviteBox input,#inviteBox select{flex:1;min-width:140px;font:700 13px "Nunito",system-ui,sans-serif;border:2px solid var(--ink);border-radius:10px;padding:6px 8px;background:#fff;color:var(--ink)}
.ov-btns{display:flex;gap:8px;margin-top:16px}
.ov-btns .btn{flex:1}
.qr-panel{padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:92vw}
#qrCv{width:min(300px,80vw);height:auto;background:#fff}
#qrTxt{font-size:12px;overflow-wrap:anywhere;text-align:center;max-width:300px}
#qrCode{font-size:30px;letter-spacing:.2em;color:var(--accent)}
@media (max-width:700px){
  .ibtn{width:40px;height:40px;font-size:18px;border-radius:10px}
  #topR{top:calc(56px + var(--safe-t));left:10px;right:auto;max-width:calc(100vw - 20px);justify-content:flex-start;gap:5px}
  .pop{top:calc(104px + var(--safe-t));right:auto;left:10px}
  #score{top:calc(106px + var(--safe-t))}
  #banner{font-size:20px;top:30%}
  #banner .sub{font-size:13px}
}

/* ======================= Homeowner ======================= */
html,body{background:#6cc04a}
.note{font-size:13px;line-height:1.35;background:#fff6d8;border:2px solid #e8c860;border-radius:12px;padding:8px 10px;color:#5a4a20}
.note a{color:var(--accent)}
#topL{flex-direction:column;align-items:flex-start;gap:6px}
.trow{display:flex;gap:8px;align-items:center}
.chip.cash{font-size:17px;color:#1a7a30;letter-spacing:.02em;pointer-events:none}
#needs{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;background:rgba(255,250,242,.92);border:3px solid var(--ink);border-radius:14px;padding:6px 9px;box-shadow:0 3px 0 var(--ink);pointer-events:none}
.need{display:flex;align-items:center;gap:5px;font-size:14px}
.need span{width:18px;text-align:center}
.need i{display:block;width:62px;height:9px;border:2px solid var(--ink);border-radius:6px;background:#efe6d6;overflow:hidden}
.need b{display:block;height:100%;background:#5ad04a;transition:width .4s}
.need.low{animation:blink 1s infinite}
@keyframes blink{50%{opacity:.45}}
#guestNote{font-size:11px;max-width:200px;white-space:normal}
#clock{position:absolute;top:calc(10px + var(--safe-t));left:50%;transform:translateX(-50%);pointer-events:none;font-size:15px}
.ibtn.big{background:#ffd23a}
#game.building .ibtn.big{background:var(--accent)}
#game.building #topR,#game.building #emoMenu,#game.building #needs,#game.building #prompt,#game.building #help,#game.building #pads,#game.building #chatLog,#game.building #jobBox,#game.building #jobStrip{display:none!important}
#jobStrip{position:absolute;top:calc(58px + var(--safe-t));left:50%;transform:translateX(-50%);background:#fff;border:3px solid var(--ink);border-radius:999px;padding:6px 10px 6px 16px;box-shadow:0 3px 0 var(--ink);font-size:15px;white-space:nowrap;display:flex;align-items:center;gap:8px}
#jobBox{position:absolute;right:12px;bottom:calc(12px + var(--safe-b));width:min(380px,calc(100vw - 24px));padding:10px 12px 12px;z-index:4}
.jhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.jhead b{font-size:17px}
.jhead span{font-size:12px;color:#6a5f7a;flex:1}
.jrow{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.ticket{flex:1;background:#fffdf6;border:2px dashed #b8a888;border-radius:8px;padding:6px 9px;font-size:15px;line-height:1.45;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700}
.ticket small{display:block;font-size:11px;color:#8a7a5a;letter-spacing:1px}
.recpt div{display:flex;justify-content:space-between;gap:8px}
.recpt .paid{margin-top:4px;border-top:2px dashed #b8a888;padding-top:3px;color:#1a6a30}
#pz{width:96px;height:96px;flex:none}
.tops{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px}
.top{border:2px solid #d8c8a8;border-radius:10px;background:#fff;padding:4px 2px;font-size:20px;display:flex;flex-direction:column;align-items:center}
.top small{font:800 10px "Nunito",system-ui,sans-serif;color:#5a4f6a}
.top.on{border-color:var(--ink);background:#ffe9a8;box-shadow:inset 0 0 0 2px #ffd23a}
.till{width:150px;flex:none}
.till small{font-size:11px;color:#6a5f7a}
.till .tscreen{background:#1a2a20;color:#7aff9a;font:900 22px ui-monospace,Menlo,Consolas,monospace;border-radius:8px;padding:4px 8px;text-align:right;margin:2px 0 6px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pad button{font:900 17px "Nunito",system-ui,sans-serif;border:2px solid var(--ink);border-radius:8px;background:#fff;padding:6px 0}
.pad button[data-d="OK"]{background:#5ac84a;color:#fff}
.fish{display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:center}
.fish small{font-size:12px;color:#6a5f7a}
.pond{height:56px;border-radius:12px;background:linear-gradient(#5ab4f0,#2a7ad0);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:28px}
.fish.wait .bob{animation:bob 1.6s ease-in-out infinite}
.fish.bite .bob{animation:dip .25s infinite}
.fish.bite .btn{background:#e83a3a;animation:pulse .4s infinite}
@keyframes bob{50%{transform:translateY(4px)}}
@keyframes dip{50%{transform:translateY(10px) scale(1.2)}}
/* build mode */
#buildBar{position:absolute;left:0;right:0;bottom:0;background:var(--cream);border-top:3px solid var(--ink);padding:6px 8px calc(8px + var(--safe-b));z-index:5;box-shadow:0 -4px 0 rgba(31,26,46,.25)}
.brow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px}
#bInfo{font-size:13px;flex:1;min-width:150px}
#bInfo .free{color:#1a8a40;font-weight:900}
#bCost{font-size:14px;color:#b0201a;font-weight:900}
.btn.go{background:#5ac84a;color:#fff}
#bTabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.btab{flex:none;border:2px solid #d8c8a8;border-radius:10px;background:#fff;padding:3px 8px;display:flex;align-items:center;gap:5px}
.btab span{font-size:17px}
.btab small{font:900 12px "Nunito",system-ui,sans-serif}
.btab.on{border-color:var(--ink);background:#ffd23a}
#bItems{display:flex;gap:5px;overflow-x:auto;padding:2px 0 4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;min-height:84px;align-items:stretch}
.bit{flex:none;width:78px;border:2px solid #d8c8a8;border-radius:10px;background:#fff;padding:3px 2px;display:flex;flex-direction:column;align-items:center;gap:1px}
.bit canvas{width:36px;height:36px;image-rendering:pixelated}
.bit small{font:800 10px "Nunito",system-ui,sans-serif;line-height:1.1;text-align:center;max-width:72px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bit b{font-size:11px;color:#1a7a30}
.bit.on{border-color:var(--ink);background:#ffe9a8;box-shadow:inset 0 0 0 2px #ffd23a}
.bkinds{display:flex;flex-direction:column;gap:4px;flex:none}
.bkind{border:2px solid #d8c8a8;border-radius:9px;background:#fff;font:900 12px "Nunito",system-ui,sans-serif;padding:4px 8px;text-align:left}
.bkind small{color:#1a7a30}
.bkind.on{border-color:var(--ink);background:#ffd23a}
.bnote{font-size:14px;padding:10px;align-self:center}
#game.building #cv{cursor:crosshair}
#game.building .toasts{bottom:calc(250px + var(--safe-b))}
/* overlays */
.ov-panel .sub{margin:-4px 0 10px;font-size:14px;color:#5a4f6a}
.uprow{display:flex;align-items:center;gap:10px;padding:8px;border:2px solid #e3d6c0;border-radius:12px;background:#fff;margin-bottom:6px}
.uprow.have{background:#eaffe4;border-color:#9ad88a}
.upic{font-size:28px;width:38px;text-align:center}
.upnm{flex:1;min-width:0;font-size:15px}
.upnm small{display:block;font-size:12px;color:#6a5f7a;font-weight:700}
.upnm .lv{font-size:11px;background:#ffd23a;border:2px solid var(--ink);border-radius:999px;padding:0 6px}
.xpbar{display:block;height:7px;border:2px solid var(--ink);border-radius:5px;background:#efe6d6;overflow:hidden;margin-top:4px}
.xpbar b{display:block;height:100%;background:#4aa8ff}
.lockrow{display:flex;align-items:center;gap:8px;justify-content:space-between;font-size:15px}
.map-panel{padding:10px;max-width:96vw;max-height:94vh;overflow:auto;display:flex;flex-direction:column;align-items:center}
#mapCv{max-width:100%;height:auto;border-radius:10px;border:2px solid var(--ink);image-rendering:auto}
.spot-panel{display:flex;flex-direction:column;gap:10px;width:min(360px,100%)}
.spot-panel h2{margin:0}
.sp-about{margin:0;font-size:16px}
.sp-about small{font-size:13px;color:#6a5f7a;font-weight:700}
.touch #btns .pbtn:first-child{background:#ffd23a;width:62px;height:62px;font-size:11px}
@media (max-width:700px){
  #clock{top:calc(10px + var(--safe-t));left:auto;right:10px;transform:none}
  #topR{top:auto;bottom:calc(150px + var(--safe-b));right:8px;left:auto;flex-direction:column;flex-wrap:nowrap;max-width:none;width:auto}
  #topR .ibtn{width:38px;height:38px;font-size:17px}
  .pop{top:auto;bottom:calc(150px + var(--safe-b));right:56px;left:auto}
  #needs{grid-template-columns:1fr 1fr;padding:4px 7px}
  .need i{width:44px}
  #jobStrip{top:auto;bottom:calc(178px + var(--safe-b));font-size:13px;white-space:normal;width:calc(100vw - 24px);border-radius:14px}
  #jobBox{bottom:calc(8px + var(--safe-b));right:8px}
  .working #pads{display:none}
}

/* ---------- the title screen: a street of houses and a real-estate sign ---------- */
#menu{background:#8fd0ff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#logoSign{width:min(600px,94vw);height:auto;image-rendering:pixelated;margin-top:-2vh}
.tag2{margin:6px 0 20px;font:900 15px "Nunito",system-ui,sans-serif;color:#fff;background:#2a6a3a;border:3px solid var(--ink);border-radius:6px;padding:5px 14px;box-shadow:0 4px 0 var(--ink);text-align:center}
.menu-panel.house{position:relative;border-radius:6px 6px 14px 14px;margin-top:34px;background:repeating-linear-gradient(#fffaf2 0 11px,#efe4d0 11px 13px)}
.menu-panel.house::before{content:"";position:absolute;left:-18px;right:-18px;top:-46px;height:48px;background:#d8323e;border:3px solid var(--ink);border-bottom:6px solid #8a1a22;clip-path:polygon(50% 0,100% 100%,0 100%);z-index:-1}
.menu-panel.house::after{content:"";position:absolute;right:46px;top:-58px;width:22px;height:34px;background:#8a5040;border:3px solid var(--ink);z-index:-2}
.house #hostBtn{background:#3a7ad8;border-radius:12px 12px 6px 6px}
.house .mechip{border-radius:10px}

/* ---------- 1.9: the stores, the casino, the arcade ---------- */
.btn.buy{background:#ffd23a}
.btn.ok{background:#5fd36b}
.bit.locked{opacity:.55;background:#f2eee6}
.bit.locked canvas{filter:grayscale(.8)}
.bn{font-style:normal;background:#e8283c;color:#fff;border-radius:999px;padding:0 5px;font-size:10px;margin-left:2px}
.bnote.small{font-size:12px;color:#6a5f7a;align-self:center;white-space:nowrap}
.store-panel{width:min(620px,100%);display:flex;flex-direction:column;gap:10px}
.shead{display:flex;align-items:flex-start;gap:10px}
.shead .sic{font-size:34px;line-height:1}
.shead .stt{flex:1;min-width:0}
.shead h2{margin:0 0 2px}
.shead small{display:block;font-size:13px;color:#5a4f6a;font-weight:700;line-height:1.3}
.smoney{font:900 16px "Nunito",system-ui,sans-serif;color:#1a7a30;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:4px 11px;white-space:nowrap}
.stabs{display:flex;gap:5px;flex-wrap:wrap}
.stab{border:2px solid #d8c8a8;border-radius:10px;background:#fff;padding:4px 9px;font:900 13px "Nunito",system-ui,sans-serif}
.stab.on{border-color:var(--ink);background:#ffd23a}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:7px}
.scard{display:flex;align-items:center;gap:9px;padding:7px 9px;border:2px solid #e3d6c0;border-radius:12px;background:#fff}
.scard.have{background:#eaffe4;border-color:#9ad88a}
.scard.star{background:#fff6d8;border-color:#e8c860}
.spic{width:54px;height:54px;flex:none;display:flex;align-items:center;justify-content:center;font-size:34px;border-radius:10px;background:#f6efe2;image-rendering:pixelated}
.snm{flex:1;min-width:0;font-size:14px;line-height:1.2}
.snm small{display:block;font-size:12px;color:#6a5f7a;font-weight:700;margin-top:2px}
.snm i{font-style:normal;color:#1a8a40}
.sbtns{display:flex;flex-direction:column;gap:5px;flex:none}
.sbtns .btn{font-size:13px;padding:5px 9px}
.snote{font-size:13px;color:#5a4f6a;background:#f6efe2;border-radius:10px;padding:7px 10px}
.gres{text-align:center;font-size:17px;min-height:1.4em}
.gres.win{color:#1a8a40}.gres.lose{color:#b0201a}
.bets{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.bet{border:2px solid var(--ink);border-radius:999px;background:#fff;padding:4px 11px;font:900 14px "Nunito",system-ui,sans-serif}
.bet.on{background:var(--ink);color:#fff}
.bet.lock{opacity:.55}
.reels{display:flex;gap:10px;justify-content:center;background:linear-gradient(#c82a3a,#8a1a24);border:3px solid var(--ink);border-radius:16px;padding:12px}
.reel{width:76px;height:84px;display:flex;align-items:center;justify-content:center;background:#fff;border:3px solid var(--ink);border-radius:10px;font-size:46px}
.reel.spin{filter:blur(1px)}
.paytab{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;font-size:13px;color:#5a4f6a}
.wheelcv{width:260px;height:260px;align-self:center;image-rendering:auto}
.ctable{display:flex;gap:16px;align-items:center;justify-content:center;background:#2a8a4a;border:3px solid var(--ink);border-radius:16px;padding:14px}
.pcard{width:80px;height:112px;background:#fff;border:3px solid var(--ink);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#1f1a2e;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.pcard b{font-size:36px;line-height:1}.pcard span{font-size:28px}
.pcard.red{color:#d8232e}
.pcard.back{background:repeating-linear-gradient(45deg,#3a5ab8 0 6px,#2a4aa8 6px 12px);color:#fff;font-size:40px}
.pot{color:#fff;text-align:center;display:flex;flex-direction:column}
.pot small{font-size:12px;opacity:.85}.pot b{font-size:28px;color:#ffe14a}
.cbtns{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.cbtns .btn{font-size:16px;padding:8px 14px}
.arcv{width:320px;max-width:100%;height:auto;align-self:center;border:4px solid var(--ink);border-radius:12px;image-rendering:pixelated;background:#05050f}
.prizes{display:flex;gap:10px;justify-content:center}
.prz{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;text-align:center}
.clawbox{position:relative;height:56px;border:3px solid var(--ink);border-radius:12px;background:rgba(170,225,255,.55);overflow:hidden}
.clawbox .claw{position:absolute;left:50%;top:-6px;transform:translateX(-50%);font-style:normal;font-size:30px}
.clawbox.drop .claw{animation:clawdrop 1.1s ease-in-out}
@keyframes clawdrop{45%{top:22px}60%{top:22px}100%{top:-6px}}
@media (max-width:700px){
  .sgrid{grid-template-columns:1fr}
  .reel{width:64px;height:72px;font-size:38px}
  .wheelcv{width:220px;height:220px}
}
body.ovopen .yad-btn{visibility:hidden}
@media (max-width:700px){
  .store-panel h2{font-size:30px}
  .shead .sic{font-size:28px}
  .shead small{font-size:12px}
  .smoney{font-size:14px;padding:3px 9px}
}
/* ---------- icons (shared/icons.js) ---------- */
.ic{display:inline-flex;vertical-align:middle}
.ibtn .yi{width:22px;height:22px}
.emo .yi{width:28px;height:28px}
.need span .yi{width:16px;height:16px}
.btab span .yi{width:18px;height:18px}
.upic .yi{width:30px;height:30px}
.shead .sic .yi{width:34px;height:34px;vertical-align:-6px}
.spic .yi{width:32px;height:32px}
.reel .yi{width:50px;height:50px;stroke-width:2}
.paytab .yi{width:16px;height:16px}
.pond{color:#fff}
.pond .yi{width:30px;height:30px}
.top .yi{width:22px;height:22px}
.ticket .yi{width:16px;height:16px;vertical-align:-3px}
.pcard span .yi{width:30px;height:30px}
.pcard.back .yi{width:36px;height:36px;color:#ffffff}
.clawbox .claw .yi{width:30px;height:30px}
.crown .yi{width:16px;height:16px;vertical-align:-2px;color:#e0a010}
.bit b .yi{width:12px;height:12px;vertical-align:-2px}
.ov-panel h3 .yi{width:16px;height:16px}
.toast .yi{width:16px;height:16px;vertical-align:-3px}
#clock .yi{width:17px;height:17px}
#prompt .yi{width:18px;height:18px}
.yen-home .yi{width:15px;height:15px;vertical-align:-2px}
@media (max-width:700px){ #topR .ibtn .yi{width:20px;height:20px} .reel .yi{width:42px;height:42px} }

/* ======================= 2.7: jobs, managers, card tables, the bank, skiing, the hospital ======================= */
#needs{grid-template-columns:1fr 1fr}
.jx{margin:-4px 0 6px}
.jshift{font-size:11px;color:#6a5f7a;margin:-2px 0 6px}
.jhead em,#jobStrip em{font-style:normal;font-weight:900}
em.up{color:#1a8a40}em.rush{color:#e86a00}
.jlv{font-size:11px;background:#ffd23a;border:2px solid var(--ink);border-radius:999px;padding:0 6px}
.jtip{font-size:13px;line-height:1.35;margin:2px 0 6px;color:#3a3048}
.jtip small{color:#6a5f7a}.jtip .g,.g{color:#1a8a40}
.jwait{text-align:center;font-size:16px;padding:14px 0;color:#6a5f7a}
.jbar{display:block;width:100%;height:auto;border-radius:8px;border:2px solid var(--ink);margin:4px 0 8px;image-rendering:auto}
.jbar.thin{margin-top:-4px}
.btn.hold{touch-action:none;-webkit-user-select:none;user-select:none}
.belt{display:flex;flex-wrap:wrap;gap:5px;padding:6px;border-radius:10px;background:repeating-linear-gradient(90deg,#3a3a44 0 10px,#2e2e38 10px 20px);margin-bottom:8px;min-height:52px;align-items:center}
.scan{border:2px solid var(--ink);border-radius:9px;background:#fff;padding:3px 7px;display:flex;flex-direction:column;align-items:center;font-size:18px}
.scan small{font:800 11px "Nunito",sans-serif}
.bagged{color:#7aff9a;font-size:14px;padding:0 6px}
.till .pad .ok{grid-column:span 3;background:#5ac84a;color:#fff}
.optrow{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:5px}
.optrow small{width:46px;font-size:11px;color:#6a5f7a}
.opt{border:2px solid #d8c8a8;border-radius:9px;background:#fff;font:800 12px "Nunito",sans-serif;padding:4px 8px}
.opt.on{border-color:var(--ink);background:#ffd23a}
#cup{flex:none;width:70px;height:80px}
.patient{background:#eaf6ff;border:2px solid #9ad0f0;border-radius:12px;padding:6px 8px;margin-bottom:6px}
.pname{font-size:15px;margin-bottom:4px}
.sym{display:inline-block;background:#fff;border:2px solid #9ad0f0;border-radius:999px;padding:1px 8px;margin:0 4px 4px 0;font-size:12px}
.dbook{font-size:12px;background:#fffdf6;border:2px dashed #b8a888;border-radius:8px;padding:4px 8px;margin-bottom:6px;max-height:140px;overflow:auto}
.dbook div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #eee2c8;padding:2px 0}
.mini.ghost{background:#f6efe2;color:var(--ink)}
.mini.go{background:#5ac84a;color:#fff}
.cures{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.cure{border:2px solid #d8c8a8;border-radius:10px;background:#fff;padding:5px 2px;font-size:22px;display:flex;flex-direction:column;align-items:center}
.cure small{font:800 11px "Nunito",sans-serif}
.movelist{display:flex;flex-wrap:wrap;gap:3px;font-size:18px;margin-bottom:8px}
.rhy{display:block;margin:0 auto 6px;border-radius:10px;border:2px solid var(--ink);width:240px;height:170px}
.arrows{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.arw{border:3px solid var(--ink);border-radius:12px;background:#fff;font-size:26px;padding:6px 0;touch-action:none}
.arw:active{background:#ffd23a}
.wires{display:flex;align-items:stretch;gap:0;margin:4px 0}
.wcol{display:flex;flex-direction:column;gap:8px}
.wire{width:46px;height:32px;border:3px solid var(--ink);border-radius:8px}
.wire.sel{outline:4px solid #ffd23a}.wire.done{opacity:.55}
.wlines{flex:1;height:auto}
.wph{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mgrtag{font-size:12px;text-transform:none;letter-spacing:0;color:#8a5a00;background:#fff3c0;border:2px solid #e8c860;border-radius:999px;padding:1px 8px}
.mgrbtn{background:#ffd23a!important;color:var(--ink)!important;margin-bottom:6px}
.ttl{font-size:11px;color:#6a5f7a}
.mgrrow,.staff{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px;border:2px solid #e3d6c0;border-radius:12px;background:#fff;margin-bottom:6px}
.staff .sbtns{flex-direction:row;flex-wrap:wrap}
#mgrBtn{background:#ffd23a}
/* the card tables */
.table-panel{width:min(720px,100%)}
.tbl{background:radial-gradient(ellipse at center,#2a9a52,#1a6a36);border:4px solid #5a3418;border-radius:22px;padding:10px;color:#fff;display:flex;flex-direction:column;gap:8px;box-shadow:inset 0 0 0 3px #3a8a4a}
.tbl small{color:#d8f4e0;font-size:11px}
.tdealer{display:flex;flex-direction:column;align-items:center;gap:3px}
.tmsg{text-align:center;font-size:14px;min-height:1.3em;position:relative;padding-bottom:5px}
.tclock{color:#ffe14a}
.ttime{position:absolute;left:20%;right:20%;bottom:0;height:3px;background:#ffe14a;border-radius:3px;transform-origin:left;animation:shrink linear forwards}
@keyframes shrink{to{transform:scaleX(0)}}
.cards{display:flex;gap:3px;justify-content:center;min-height:52px;flex-wrap:wrap}
.pc{width:36px;height:50px;background:#fff;color:#1f1a2e;border:2px solid var(--ink);border-radius:6px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.pc b{font-size:17px}.pc .yi{width:16px;height:16px}
.pc.red{color:#d8232e}
.pc.back{background:repeating-linear-gradient(45deg,#3a5ab8 0 5px,#2a4aa8 5px 10px);color:#fff}
.pc.slot{background:rgba(255,255,255,.12);border:2px dashed rgba(255,255,255,.35);box-shadow:none}
.pc.new{animation:deal .35s ease-out}
@keyframes deal{from{transform:translateY(-24px) rotate(-12deg);opacity:0}}
.tv{background:#1f1a2e;color:#fff;border-radius:999px;padding:0 8px;font-size:13px}
.tseats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tseat,.pseat{background:rgba(0,0,0,.22);border:2px solid rgba(255,255,255,.25);border-radius:12px;padding:5px;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;position:relative}
.tseat b,.pseat b{font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tseat.empty,.pseat.empty{opacity:.5;font-size:20px}
.tseat.me,.pseat.me{border-color:#ffe14a}
.tseat.turn,.pseat.turn{box-shadow:0 0 0 3px #ffe14a;background:rgba(255,225,74,.18)}
.thand{display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px;border-radius:8px}
.thand.on{background:rgba(255,255,255,.15)}
.thand .pc{width:28px;height:40px}.thand .pc b{font-size:13px}.thand .pc .yi{width:12px;height:12px}
.res{font-style:normal;font-size:10px;font-weight:900;border-radius:999px;padding:0 6px;background:#1f1a2e}
.res.win,.res.blackjack{background:#1a8a40}.res.push{background:#7a7a8e}.res.lose,.res.bust{background:#b0201a}
.pseats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pseat .pc{width:28px;height:40px}.pseat .pc b{font-size:13px}.pseat .pc .yi{width:12px;height:12px}
.pseat .cards{min-height:42px}
.pseat.fold{opacity:.45}.pseat.out{opacity:.35}
.pseat.win{box-shadow:0 0 0 3px #5aff8a;background:rgba(90,255,138,.2)}
.dbtn{position:absolute;top:-6px;left:-6px;width:20px;height:20px;border-radius:50%;background:#fff;color:#1f1a2e;font:900 12px "Nunito",sans-serif;font-style:normal;display:flex;align-items:center;justify-content:center;border:2px solid var(--ink)}
.pbet,.plast,.phand{font-style:normal;font-size:11px;border-radius:999px;padding:0 6px}
.pbet{background:#ffd23a;color:#1f1a2e;font-weight:900}.plast{background:#1f1a2e}.phand{background:#5a1a7a}
.pboard{display:flex;flex-direction:column;align-items:center;gap:4px}
.pot{background:#1f1a2e;border-radius:999px;padding:1px 10px;font-size:14px}
.tctl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin-top:8px}
.tctl small{font-size:13px}
.btn.tiny{font-size:12px;padding:4px 8px;box-shadow:0 2px 0 var(--ink)}
.btn.allin{background:#e83a3a;color:#fff}
.raise{display:flex;flex-wrap:wrap;gap:5px;align-items:center;justify-content:center;width:100%;background:#f6efe2;border-radius:12px;padding:6px}
.raise b{width:100%;text-align:center;font-size:14px}
.raise input{flex:1;min-width:140px}
.topt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin-top:6px;font-size:13px}
.chk{display:flex;align-items:center;gap:4px}
@media (max-width:560px){ .tseats{grid-template-columns:repeat(2,1fr)} .pc{width:30px;height:42px} .pc b{font-size:14px} }
/* the bank, hoops, the cinema */
.bankbal{display:flex;gap:8px}
.bankbal div{flex:1;background:#fff;border:2px solid #e3d6c0;border-radius:12px;padding:6px 10px;text-align:center}
.bankbal small{display:block;font-size:12px;color:#6a5f7a}.bankbal b{font-size:20px;color:#1a7a30}
.bankrow{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.bankrow small{width:100%;font-size:13px}
.bankrow input{flex:1;min-width:100px;font:800 15px "Nunito",sans-serif;border:2px solid var(--ink);border-radius:10px;padding:5px 8px}
.hoopcv,.moviecv{display:block;margin:0 auto;width:min(360px,100%);height:auto;border:3px solid var(--ink);border-radius:12px;image-rendering:pixelated}
/* skiing and the fit badge */
#skiHud{position:absolute;top:calc(58px + var(--safe-t));left:50%;transform:translateX(-50%);pointer-events:none;font-size:15px}
#fitChip{color:#1a7a30}
/* waking up in the hospital */
#koOv{position:fixed;inset:0;z-index:60;background:#05030a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;text-align:center;padding:20px;transition:background 1.2s}
#koOv .ko1{font-size:26px;display:flex;flex-direction:column;align-items:center;gap:8px}#koOv .ko1 .yi{width:52px;height:52px}
#koOv .ko2{opacity:0;transform:translateY(10px);transition:all .6s;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:18px;box-shadow:0 6px 0 var(--ink);padding:14px 18px;max-width:420px;display:flex;flex-direction:column;gap:6px;font-size:20px}
#koOv .ko2 small{font-size:14px;color:#5a4f6a}#koOv .ko2 em{font-style:normal;color:#b0201a;font-weight:900}
#koOv.wake{background:rgba(5,3,10,.6)}#koOv.wake .ko2{opacity:1;transform:none}
/* roofs in the build menu */
.rcols{display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start;max-width:180px;flex:none;padding:4px}
.rcol{width:26px;height:26px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--ink)}
.rcol.on{border-color:#ffd23a;box-shadow:0 0 0 3px var(--ink)}
.bnote.small{font-size:11px;flex:0 0 150px;white-space:normal;line-height:1.25;padding:4px 6px}