/* Horo City theme: rusted metal panels, thin dark borders, ash + rust + toxic green. Overrides game.css. */
@font-face { font-family: "Oswald"; src: url("/assets/fonts/Oswald.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Black Ops One"; src: url("/assets/fonts/BlackOpsOne.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root { --ink:#e6dac3; --ink2:#c9b994; --ink3:#a8987a; --cream:#2a231d; --cream2:#3a3129; --lime:#4f6b2a; --teal:#5f8a86; --teal2:#d6a23c; --brick:#a2502a; --amber:#e89a3c; --gold:#d6a23c; --pink:#c4622d; --sky:#7aa3a8; --lav:#9a8a9e; --mint:#6f8f4e; --mute:#8a7a62; --line:#0d0907;
  --metal: linear-gradient(180deg, #3a3029 0%, #2a231e 55%, #221c18 100%); --edge:#5a4836; --text:#ebe0cb; --dim:#a8987a; --rust:#a2502a; --go:#5d7d2a; }
html, body { background: #120e0b; }
body { display: block; color: var(--text); font-family: Rubik, system-ui, sans-serif; }
#stage { position: fixed; inset: 0; height: 100vh; height: 100dvh; background: #1a140f; }
.hud { display: none !important; }
.haze { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 45%, rgba(10,6,3,.55) 100%), linear-gradient(180deg, rgba(120,70,30,.16), rgba(0,0,0,0) 40%, rgba(60,30,10,.12)); mix-blend-mode: multiply; }
body.in-room .haze { background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(10,6,3,.6) 100%); }
/* plates */
.plate, .me, .htop .online, .hchat, .hint, .hbar .rb, .roomtitle span, .zone, .toast, .panel, .tcard, .card, .leave, .guide { font-family: Rubik, sans-serif; }
.hbrand { position: absolute; left: 14px; top: 12px; z-index: 3; text-decoration: none; display: block; background: var(--metal); border: 1px solid var(--line); outline: 1px solid var(--edge); outline-offset: -4px; border-radius: 6px; padding: 6px 14px 4px; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.hlogo { display: flex; align-items: center; gap: 0; font: 700 40px/1 Oswald, sans-serif; color: #e9dcc2; letter-spacing: 1px; text-shadow: 0 2px 0 #0d0907, 0 0 1px #0d0907; }
.hlogo .paw { width: 34px; height: 34px; color: #e9dcc2; margin: 0 2px; filter: drop-shadow(0 2px 0 #0d0907); }
.hlogo b { font-weight: 700; margin-left: 12px; }
body.s-start .hbrand, body.s-start .me, body.s-start .htop, body.s-start .hbar, body.s-start .hchat { display: none !important; }
body.in-room .hbrand { display: none; }
.roomtitle { display: none; font: 700 28px Oswald, sans-serif; letter-spacing: 1px; color: #e9dcc2; -webkit-text-stroke: 0; text-shadow: 0 2px 0 #0d0907; left: 16px; top: 14px; background: var(--metal); border: 1px solid var(--line); outline: 1px solid var(--edge); outline-offset: -4px; border-radius: 6px; padding: 4px 14px; }
body.in-room .roomtitle { display: block; }
.roomtitle span { font: 600 11px Rubik; letter-spacing: 1px; background: #4a3a2a; color: #e2c46a; border: 1px solid var(--line); border-radius: 3px; padding: 2px 8px; margin-left: 10px; vertical-align: 5px; }
.roomtitle span.gold { background: #5a1e14; color: #f0d0a0; }
.zone, .guide, .keys { display: none !important; }
.me { left: 14px; top: 82px; background: var(--metal); color: var(--text); border: 1px solid var(--line); outline: 1px solid var(--edge); outline-offset: -4px; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.45); padding: 8px 18px 8px 8px; gap: 12px; }
body.in-room .me { top: 70px; }
.me .av { width: 50px; height: 50px; border-radius: 4px; background: #1a1612 !important; border: 1px solid #5a4836; overflow: hidden; position: relative; }
.me .av canvas { width: 50px; height: 50px; display: block; } .me .av i { display: none; }
.me .nm { font: 600 19px Oswald, sans-serif; letter-spacing: .4px; color: #ebe0cb; }
.me .sub { color: var(--dim); font-size: 12px; } .me .tag { background: transparent; color: #c9b994; border: 0; padding: 0; font: 600 12px Rubik; letter-spacing: 1px; }
.me .tag.gold { color: #e2c46a; }
.htop { position: absolute; right: 14px; top: 12px; z-index: 3; display: flex; gap: 10px; align-items: center; background: var(--metal); border: 1px solid var(--line); outline: 1px solid var(--edge); outline-offset: -4px; border-radius: 6px; padding: 8px 10px 8px 16px; box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.htop .online { font: 600 17px Oswald, sans-serif; letter-spacing: .8px; color: #e2d6bf; display: flex; align-items: center; gap: 9px; }
.htop .online i { width: 11px; height: 11px; border-radius: 50%; background: #7fd24a; box-shadow: 0 0 8px #7fd24a; }
.htop .online b { font-weight: 600; }
.wbtnh, .pbtn.lime, .btns .wal { font: 500 17px Oswald, sans-serif !important; letter-spacing: .4px; color: #eaf3d8 !important; background: linear-gradient(180deg, #6a8f34, #4a6a22) !important; border: 1px solid #1c2a0a !important; outline: 1px solid #8ab04a; outline-offset: -4px; border-radius: 5px !important; box-shadow: 0 3px 0 #0d0907, inset 0 1px 0 rgba(255,255,255,.15) !important; padding: 8px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.wbtnh:hover, .btns .wal:hover { filter: brightness(1.08); }
.wbtnh.conn { background: linear-gradient(180deg, #4a3e32, #2e261f) !important; outline-color: #6a5847; }
.wbtnh .tag { background: #d6a23c; color: #1a130e; border-radius: 3px; padding: 0 6px; font-size: 12px; }
.leave { right: 14px; top: 76px; } body.in-room .leave { display: inline-flex; }
/* generic button */
.pbtn { font: 500 14px Rubik, sans-serif; color: var(--text); background: linear-gradient(180deg, #4a3e32, #2e261f); border: 1px solid var(--line); outline: 1px solid #6a5847; outline-offset: -4px; border-radius: 5px; box-shadow: 0 3px 0 #0d0907; padding: 8px 14px; }
.pbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0d0907; }
.pbtn.lkd, .pbtn.dis { color: var(--dim); }
.pbtn.block { background: linear-gradient(180deg, #d6a23c, #a87a26); color: #1a130e; outline-color: #f0c870; }
/* holder chat: bottom-left, single panel */
.hchat { left: 14px; right: auto; top: auto; bottom: 14px; width: 420px; height: 290px; background: rgba(26,21,17,.94); border: 1px solid var(--line); outline: 1px solid var(--edge); outline-offset: -4px; border-radius: 6px; box-shadow: 0 8px 22px rgba(0,0,0,.55); color: var(--text); }
.hch { background: transparent; border-bottom: 1px solid #4a3a2a; padding: 10px 12px 8px 14px; }
.hct { font: 600 18px Oswald, sans-serif; letter-spacing: 1px; color: #ebe0cb; text-transform: uppercase; }
.hch small { color: var(--dim); font-size: 11px; text-align: right; }
.hcmin { background: #3a3129; color: var(--text); border: 1px solid var(--line); border-radius: 4px; box-shadow: none; font: 500 11px Rubik; padding: 3px 9px; }
.hcl { font: 400 15px/1.35 Oswald, sans-serif; letter-spacing: .3px; gap: 3px; padding: 8px 14px; }
.hcm { background: transparent; border: 0; padding: 1px 0; color: #e6dac3; }
.hcm b { display: inline; font: 500 15px Oswald, sans-serif; margin-right: 6px; }
.hcm:nth-child(5n+2) b { color: #e0663a; } .hcm:nth-child(5n+3) b { color: #9bd44a; } .hcm:nth-child(5n+4) b { color: #e85a8a; } .hcm:nth-child(5n) b { color: #e2c46a; } .hcm:nth-child(5n+1) b { color: #6ac8e0; }
.hcm b::after { content: ':'; color: #e6dac3; }
.hcm.sys { color: #8a7a62; font: 400 12px Rubik; text-align: left; }
.hcm.mine { background: transparent; }
.hclock { display: flex; align-items: center; gap: 10px; margin: 6px 10px 10px; padding: 10px 12px; background: #1e1915; border: 1px solid #4a3a2a; border-radius: 4px; color: #a8987a; font: 400 15px Oswald, sans-serif; letter-spacing: .3px; text-align: left; }
.hclock svg { width: 17px; height: 17px; color: #a8987a; }
.hcf { border-top: 1px solid #4a3a2a; } .hcf input { background: #1e1915; color: var(--text); border: 1px solid #4a3a2a; border-radius: 4px; }
.hchat.min { width: 200px; height: auto; border-radius: 6px; } .hchat.min .hch { background: transparent; }
/* bottom-centre round buttons */
.hbar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; display: flex; gap: 22px; }
.hbar .rb { position: relative; width: 92px; height: 108px; background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; color: var(--text); }
.hbar .rb svg { width: 84px; height: 84px; padding: 16px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3e342c, #1e1915 75%); border: 1px solid var(--line); outline: 2px solid #5a4836; outline-offset: -6px; box-shadow: 0 6px 14px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.06); transition: transform .12s; }
.hbar .rb:hover svg { transform: translateY(-2px); outline-color: #8a7258; }
.hbar .rb span { margin-top: -14px; font: 600 14px Oswald, sans-serif; letter-spacing: .8px; background: var(--metal); border: 1px solid var(--line); outline: 1px solid var(--edge); outline-offset: -3px; border-radius: 4px; padding: 3px 12px; box-shadow: 0 3px 6px rgba(0,0,0,.5); }
body.in-room .hbar { right: 20px; left: auto; transform: none; }
/* door hint (HUD) */
.hint { background: rgba(22,17,13,.94); color: var(--text); border: 1px solid var(--line); outline: 1px solid #8a7258; outline-offset: -4px; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,.5); font: 500 15px Oswald, sans-serif; letter-spacing: .3px; }
.hint .k { background: #e9a14a; color: #1a130e; border: 1px solid var(--line); border-radius: 3px; }
.hint.lk { background: rgba(60,20,12,.94); }
.toast { background: rgba(22,17,13,.95); color: var(--text); border: 1px solid var(--line); outline: 1px solid var(--edge); outline-offset: -4px; border-radius: 5px; box-shadow: 0 4px 12px rgba(0,0,0,.5); font: 500 15px Oswald, sans-serif; letter-spacing: .3px; }
.toasts { top: 96px; }
#fade { background: #0d0907; }
/* modal panels */
.modal { background: rgba(8,5,3,.62); }
.panel { background: linear-gradient(180deg, #2e2620, #221c17); color: var(--text); border: 1px solid var(--line); outline: 1px solid var(--edge); outline-offset: -5px; border-radius: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.panel .ph { background: linear-gradient(180deg, #4a3c30, #3a2f26) !important; border-bottom: 1px solid var(--line); padding: 10px 12px 9px 18px; }
.panel .ph .tb { font: 600 19px Oswald, sans-serif; letter-spacing: 1.2px; color: #ebe0cb; }
.panel .x { background: #2a231d; color: var(--text); border: 1px solid var(--line); border-radius: 4px; box-shadow: none; }
.panel p, .panel .sm, .panel p.sm { color: #cbbd9f; } .panel h3 { font: 600 22px Oswald, sans-serif; color: #ebe0cb; } .panel h4, .panel h4.ih { font: 600 14px Oswald, sans-serif; letter-spacing: 1.2px; color: #d6a23c; margin: 12px 0 8px; }
.panel a { color: #e2c46a; } .panel b { color: #ebe0cb; } .panel kbd { background: #3a3129; color: #ebe0cb; border: 1px solid #0d0907; border-radius: 3px; padding: 0 5px; }
.sk { background: #1e1915; border: 1px solid #4a3a2a; border-radius: 6px; box-shadow: none; color: var(--text); font-family: Oswald, sans-serif; letter-spacing: .4px; }
.sk.on { background: #3a4a22; border-color: #8ab04a; box-shadow: 0 0 0 1px #8ab04a, 0 0 14px rgba(138,176,74,.4); } .sk.lk { background: #1a1512; } .sk small { color: var(--dim); }
.sk canvas { background: radial-gradient(circle at 50% 60%, #3a3129, #1a1512 75%); border-radius: 4px; }
.skins.inv { grid-template-columns: repeat(5, 1fr); }
.items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.items .it { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; background: #1e1915; border: 1px solid #4a3a2a; border-radius: 4px; padding: 8px 10px; font: 400 14px Oswald, sans-serif; }
.items .it i { width: 22px; height: 22px; border-radius: 3px; border: 1px solid #0d0907; } .items .it b { font-weight: 500; color: #ebe0cb; } .items .it span { color: #e2c46a; } .items .it.empty { opacity: .45; }
.emotes .pbtn { font: 500 16px Oswald, sans-serif; letter-spacing: .4px; padding: 12px 14px; }
.setl .row2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid #3a3129; font: 500 16px Oswald, sans-serif; letter-spacing: .4px; }
.setl input[type=range] { width: 180px; accent-color: #d6a23c; } .setl .row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tcard { background: linear-gradient(180deg, #2e2620, #221c17); color: var(--text); border: 1px solid var(--line); outline: 1px solid var(--edge); outline-offset: -5px; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.6); }
.tcard h4 { font: 600 24px Oswald, sans-serif; color: #ebe0cb; text-shadow: none; } .tcard p { color: #cbbd9f; } .tcard .tstep { background: #4a3a2a; color: #e2c46a; border: 1px solid #0d0907; border-radius: 3px; }
.tour.center { background: rgba(8,5,3,.6); } .youdim { background: radial-gradient(circle 120px at var(--x, 50%) var(--y, 50%), rgba(8,5,3,0) 0, rgba(8,5,3,0) 70%, rgba(8,5,3,.6) 100%); }
.youhint { background: #c4622d; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 5px 14px rgba(0,0,0,.5); } .youhint b { font: 600 20px Oswald, sans-serif; }
/* ---------------- start screen ---------------- */
.splash { background: #0f0b09 url(/assets/img/horo/start-bg.jpg) center/cover no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.splash::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(10,7,5,.25) 30%, rgba(10,7,5,.85) 100%); pointer-events: none; }
.card { position: relative; width: min(1380px, 96vw); background: linear-gradient(180deg, #2c241e, #1f1915 60%, #1a1512); border: 2px solid #0d0907; outline: 2px solid #4a3a2a; outline-offset: -10px; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.75), inset 0 0 60px rgba(0,0,0,.6); padding: 26px 44px 34px; color: var(--text); text-align: center; margin-top: 60px; }
.card::before { content: ''; position: absolute; inset: 0; border-radius: 10px; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 3px, rgba(0,0,0,.02) 3px 7px), radial-gradient(circle at 12% 18%, rgba(140,60,25,.18), transparent 30%), radial-gradient(circle at 88% 80%, rgba(140,60,25,.16), transparent 32%); }
.card .bolt { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8a7a62, #3a2f26); border: 1px solid #0d0907; } .b1 { left: 16px; top: 16px; } .b2 { right: 16px; top: 16px; } .b3 { left: 16px; bottom: 16px; } .b4 { right: 16px; bottom: 16px; }
.slogo { position: relative; display: inline-flex; flex-direction: column; align-items: center; margin: -110px auto 0; background: linear-gradient(180deg, #2c241e, #1f1915); border: 2px solid #0d0907; outline: 2px solid #4a3a2a; outline-offset: -8px; border-radius: 10px; padding: 12px 56px 10px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.slogo .big { display: flex; align-items: center; font: 700 112px/0.95 Oswald, sans-serif; color: #e9dcc2; letter-spacing: 4px; text-shadow: 0 4px 0 #0d0907; }
.slogo .big .paw { width: 92px; height: 92px; color: #e9dcc2; margin: 0 4px; filter: drop-shadow(0 4px 0 #0d0907); }
.slogo .sub { display: flex; align-items: center; gap: 16px; font: 700 40px/1 Oswald, sans-serif; letter-spacing: 8px; color: #d0602a; margin-top: 2px; text-shadow: 0 3px 0 #0d0907; }
.slogo .sub i { width: 56px; height: 5px; background: #d0602a; box-shadow: 0 2px 0 #0d0907; }
.tagline { font: 600 34px Oswald, sans-serif; letter-spacing: 3px; color: #e2d6bf; margin: 12px 0 10px; text-shadow: 0 3px 0 #0d0907; }
.card .inner { position: relative; border: 1px solid #0d0907; outline: 1px solid #3a2f26; outline-offset: -5px; border-radius: 6px; padding: 14px 20px 22px; background: rgba(0,0,0,.18); }
.card h2 { font: 600 34px Oswald, sans-serif; letter-spacing: 1.5px; color: #e2d6bf; margin: 0 0 14px; text-shadow: 0 3px 0 #0d0907; }
.carousel { display: flex; align-items: center; gap: 18px; justify-content: center; }
.carousel .arr { background: none; border: 0; color: #a8987a; font-size: 48px; cursor: pointer; padding: 0 6px; line-height: 1; } .carousel .arr:hover { color: #ebe0cb; }
.cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; flex: 1; max-width: 1140px; }
.sc { position: relative; background: radial-gradient(circle at 50% 45%, #3a3129, #1a1512 80%); border: 1px solid #0d0907; outline: 1px solid #4a3a2a; outline-offset: -5px; border-radius: 6px; padding: 8px 6px 0; cursor: pointer; color: #e2d6bf; display: flex; flex-direction: column; align-items: center; box-shadow: 0 8px 18px rgba(0,0,0,.5); transition: transform .12s; }
.sc:hover { transform: translateY(-3px); }
.sc canvas { width: 100%; max-width: 170px; aspect-ratio: 1; display: block; }
.sc span { font: 600 20px Oswald, sans-serif; letter-spacing: 1.2px; padding: 6px 0 10px; text-shadow: 0 2px 0 #0d0907; }
.sc.on { outline: 3px solid #8ad04a; outline-offset: -3px; background: radial-gradient(circle at 50% 45%, #3e5222, #1a2410 80%); box-shadow: 0 0 26px rgba(138,208,74,.45), 0 8px 18px rgba(0,0,0,.5); }
.namerow { display: grid; grid-template-columns: 200px 1fr; max-width: 760px; margin: 22px auto 0; border: 1px solid #0d0907; outline: 1px solid #3a2f26; outline-offset: -4px; border-radius: 5px; background: #16120f; }
.namerow label { font: 400 21px Oswald, sans-serif; letter-spacing: .4px; color: #e2d6bf; text-transform: none; padding: 12px 18px; margin: 0; border-right: 1px solid #3a2f26; text-align: left; }
.namerow input { font: 400 21px Oswald, sans-serif; color: #e2d6bf; background: transparent; border: 0; border-radius: 0; padding: 12px 18px; box-shadow: none; outline: none; }
.btns { max-width: 760px; margin: 22px auto 0; gap: 26px; }
.btns .demo { font: 500 26px Oswald, sans-serif !important; letter-spacing: .5px; color: #ebe0cb; background: linear-gradient(180deg, #4a3e32, #2a231d); border: 1px solid #0d0907; outline: 1px solid #6a5847; outline-offset: -5px; border-radius: 5px; box-shadow: 0 4px 0 #0d0907; padding: 16px 10px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.btns .demo .tri { font-size: 22px; } .btns .wal { font-size: 26px !important; padding: 16px 10px; justify-content: center; } .btns .wal svg { width: 30px; height: 30px; }
.perks { max-width: 900px; margin: 22px auto 0; gap: 0; border: 1px solid #0d0907; outline: 1px solid #3a2f26; outline-offset: -4px; border-radius: 5px; background: #16120f; }
.perks div { background: transparent !important; border: 0; border-radius: 0; color: #cbbd9f; font: 400 17px/1.35 Oswald, sans-serif; letter-spacing: .3px; padding: 12px 20px; }
.perks div + div { border-left: 1px solid #3a2f26; } .perks b { font: 500 18px Oswald, sans-serif; color: #ebe0cb; }
.gstat { color: #e2c46a; font: 400 14px Oswald, sans-serif; min-height: 0; margin-top: 8px; }
.splash .cardlinks { position: relative; margin-top: 22px; gap: 44px; font: 400 21px Oswald, sans-serif; } .splash .cardlinks a { color: #e2d6bf; font-weight: 400; text-decoration: none; }
@media (max-height: 950px) { .slogo .big { font-size: 84px; } .slogo .big .paw { width: 70px; height: 70px; } .slogo .sub { font-size: 30px; } .tagline { font-size: 26px; margin: 8px 0 6px; } .card h2 { font-size: 26px; } .sc canvas { max-width: 130px; } .namerow, .btns, .perks { margin-top: 14px; } }
#tokline, #startBuy { display: none !important; }
/* v2: mockup scale + rivets */
:root { --rivets: radial-gradient(circle at 7px 7px, #8a7258 0 2px, #2a211a 2.6px, transparent 3.2px), radial-gradient(circle at calc(100% - 7px) 7px, #8a7258 0 2px, #2a211a 2.6px, transparent 3.2px), radial-gradient(circle at 7px calc(100% - 7px), #8a7258 0 2px, #2a211a 2.6px, transparent 3.2px), radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #8a7258 0 2px, #2a211a 2.6px, transparent 3.2px); }
.hbrand { zoom: 1.5; }
.hbrand, .me, .htop .online, .hchat, .hbar .rb span { background-image: var(--rivets), var(--metal-img, linear-gradient(180deg, #2f2721, #1b1612)) !important; }
.me { top: 112px !important; zoom: 1.25; }
.hchat { width: 450px !important; zoom: 1.08; }
.hbar .rb { zoom: 1.3; }
.htop { zoom: 1.2; }
#start > .card { zoom: 1.08; }