/* ---- mobile.css ---- */ :root{--disp:'Suisse Intl',Arial,sans-serif;--world-top:155px;--world-bottom:220px;--ui:1;--cream:#f6e5c1;--ink:#29231c} html,body{background:#24221e;font-family:'Suisse Intl',Arial,sans-serif} button,input,select,textarea{font-family:'Suisse Intl',Arial,sans-serif!important;letter-spacing:normal!important;font-stretch:normal} button{touch-action:manipulation} #app{max-width:480px;background:#36332e;isolation:isolate} #top,#panel,#inv,#tip,#toast{zoom:1!important} #top{padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 7px;gap:6px;background:linear-gradient(#b0b4a0,#656b65);border-bottom:2px solid #2d261d} .bar0{gap:5px;position:relative} #bJohnnyTop{width:49px;height:51px;flex:none;border:0;box-shadow:none;background-color:transparent;background-image:url(assets/interface-atlas.webp);background-size:1097.14% 731.43%;background-position:2.22% 3.40%;border-radius:0;padding-top:33px} #bJohnnyTop span{display:none}#bJohnnyTop small{font:700 10px 'Suisse Intl',Arial,sans-serif;position:relative;top:3px;background:#f4e2bc;border-radius:4px;padding:1px 4px} #bHub{height:51px;min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;padding:7px 12px;background-color:transparent;background-image:url(assets/interface-atlas.webp);background-size:273.80% 794%;background-position:20.06% 3.34%;box-shadow:none;border-radius:0;white-space:normal} #bHub b{font:800 17px/1.1 'Suisse Intl',Arial,sans-serif}#bHub small{font:600 11px/1.15 'Suisse Intl',Arial,sans-serif;white-space:nowrap} #bHub .chipbar{display:none} #bHelp{flex:none;width:48px;height:46px;min-height:44px;padding:0;border:2px solid #2c2820;background:#244963;color:#fff0ce;font:700 11px/1.15 'Suisse Intl',Arial,sans-serif;white-space:normal;box-shadow:0 2px #34281b} #bSettings{width:40px;height:46px;flex:none;font-size:0;border:0;box-shadow:none;background-color:transparent;background-image:url(assets/interface-atlas.webp);background-size:1146.27% 731.43%;background-position:98.80% 2.82%;border-radius:0} .bar1,.bar2{gap:5px} .cur{height:36px;border:0;border-radius:8px;background-color:#f4e5c4;background-image:url(assets/paper-grain.svg);box-shadow:0 2px #241c15;overflow:hidden;padding:0 6px 0 3px} .cur b{font-size:18px;padding:0 4px;min-width:0} .cur .ic{font-size:0;background-color:transparent;width:33px;height:32px;flex:none;background-image:url(assets/interface-atlas.webp);background-repeat:no-repeat} .cur .ic.g{background-size:2133.3% 1462.86%;background-position:3.1% 19.1%} .cur .ic.b{background-size:1860.6% 1511%;background-position:26.2% 19.2%} .cur .ic.o{background-size:2104.1% 1280%;background-position:49.02% 18.3%} .qchip{border:1px solid #b89b65;border-radius:10px;min-height:43px;background:#252420 url(assets/paper-grain.svg);padding:5px;color:#f9e5b6;font:600 11px/1.15 'Suisse Intl',Arial,sans-serif;box-shadow:0 2px #151511} .qchip.done{background:#406b43} #stage{position:absolute;inset:0;overflow:hidden} #board-frame{position:absolute;left:0;width:100%;top:var(--world-top);bottom:var(--world-bottom);height:calc(100% - var(--world-top) - var(--world-bottom));border:0;pointer-events:none;z-index:0} #board{position:absolute;left:0;top:var(--world-top);width:100%;height:calc(100% - var(--world-top) - var(--world-bottom));opacity:0;z-index:1;touch-action:none} .map-controls{position:absolute;top:calc(var(--world-top) + 9px);right:9px;display:flex;gap:5px;z-index:3} .map-controls button{font-size:11px;min-height:33px;padding:5px 9px;background:#efe0c2ed;color:#29231c;border:1px solid #493923;border-radius:8px;box-shadow:0 2px #2c241a66} #inv{bottom:calc(var(--world-bottom) + 10px);left:8px} #invBtn{width:auto;min-width:56px;padding:4px 6px;border:1px solid #483b27;background:#f4e4c4}#invBtn em{font-size:21px}#invBtn i{width:100%;min-width:42px}#invBtn small{font-size:11px;white-space:nowrap;letter-spacing:-.02em;font-variant-numeric:tabular-nums} #panel{padding:7px 8px calc(env(safe-area-inset-bottom,0px) + 8px);gap:6px;background:#302d27 url(assets/paper-grain.svg);border-top:2px solid #201b14} #guide{border:0;border-radius:13px;background:#f4e4c4 url(assets/paper-grain.svg);color:#282219;box-shadow:inset 0 0 0 2px #302820,inset 0 0 0 5px #dbc8a1,0 2px #0006;padding:10px;gap:8px;min-height:74px;align-items:center} #guide img{width:48px;height:48px;object-fit:cover;border-radius:6px} #guide small{font-size:10px;line-height:1.1} #guide b{font:800 15px/1.2 'Suisse Intl',Arial,sans-serif;margin:2px 0} #guide p{font-size:12px;line-height:1.25;margin:3px 0 0} #tilebar{min-height:43px;border:2px solid #352a1f;border-radius:12px;background:#f5e4bf url(assets/paper-grain.svg);padding:6px 8px;gap:6px;box-shadow:0 2px #15100c;align-items:center} #tbText{font:700 13px/1.2 'Suisse Intl',Arial,sans-serif;min-width:0;overflow-wrap:anywhere} #tilebar>b{font:700 12px/1 'Suisse Intl',Arial,sans-serif;padding:8px;border-radius:9px;background:#397548;color:#fff2d1;white-space:nowrap} #tilebar.off>b{background:#8d8575;color:#eee3d1} #dock{display:grid;grid-template-columns:1fr 1fr 1.1fr 1fr 1fr;gap:3px;align-items:end;padding:2px 0 0} #dock>.dk{width:100%;height:77px;min-width:0;padding:48px 1px 6px;border:0;border-radius:0;background-color:transparent;background-image:url(assets/interface-atlas.webp);box-shadow:none;color:#211b14} #dock .dk>span{display:none} #dock .dk>small{font:700 10px/1.1 'Suisse Intl',Arial,sans-serif;display:block;white-space:nowrap} #dock #bTaxi{background-size:1052% 731%;background-position:65.00% 92.00%} #dock #bShip{background-size:1052% 731%;background-position:75.70% 92.00%} #dock #bJohnny{background-size:1052% 731%;background-position:86.4% 92.00%} #dock #bShop{background-size:1052% 731%;background-position:97.5% 92.00%} #dock #bJohnny small,#dock #bShop small{color:#fff1ce} #dock .dk:disabled{opacity:.57;filter:saturate(.55)} #dock .diebox{margin:0;gap:2px;width:100%;align-self:end;min-width:0} #bRoll{width:86px;height:80px;max-width:calc(100vw / 4.7);border-radius:0;border:0;background-color:transparent;background-image:url(assets/interface-atlas.webp);background-size:734.92% 628.22%;background-position:52.7% 91.3%;box-shadow:none} #bRoll .die{visibility:hidden} #bRoll:disabled{opacity:.58} #sRolls{font:800 15px/1 'Suisse Intl',Arial,sans-serif;border:1px solid #2f241a;border-radius:7px;padding:3px 8px;white-space:nowrap;box-shadow:none} #sRollsCap{font:600 10px/1 'Suisse Intl',Arial,sans-serif;padding:3px 2px;white-space:nowrap;box-shadow:none;border:1px solid #ae9769;border-radius:5px} #starterInfo{font-size:9px} .card,#helpDialog{font-family:'Suisse Intl',Arial,sans-serif;background:#f4e5c8 url(assets/paper-grain.svg);border:2px solid #392c20} .card h2,.card h3,#helpTitle{font-family:'Suisse Intl',Arial,sans-serif;font-weight:800;letter-spacing:normal} .card h2{font-size:23px;line-height:1.1} .card p{font-size:14px} .card button{min-height:43px} .card{max-height:calc(100dvh - 28px)!important} #helpDialog{max-height:90dvh;width:calc(100% - 20px)} #tip{font:600 15px/1.3 'Suisse Intl',Arial,sans-serif} .coach-tip-open #board-frame{filter:blur(4px)} .coach-tip-open #toast{visibility:hidden} .map-float,.mobile-fly{position:fixed;pointer-events:none;z-index:75;font:800 19px 'Suisse Intl',Arial,sans-serif;text-shadow:0 2px 2px #23190e;transform:translate(-50%,-50%)} .map-float{animation:mapFloat 1.4s ease-out forwards} @keyframes mapFloat{to{translate:0 -45px;opacity:0}} /* ===== Загрузочный экран ===== Ночной Бруклин, солнце из кита, Джонни с коробкой и настоящая полоса загрузки: движок сообщает проценты, а не просто «ждите». */ #boot{position:absolute;inset:0;z-index:120;overflow:hidden; background:linear-gradient(#20313f 0%, #344a56 44%, #6d6a56 78%, #8b7d60 100%); display:flex;flex-direction:column;align-items:center;justify-content:center; color:#f5e4c3;gap:12px;padding:24px 22px calc(env(safe-area-inset-bottom,0px) + 24px); text-align:center} #boot .boot-city{position:absolute;left:0;right:0;bottom:0;height:46%; background:url(assets/bp/bp-city.webp) center bottom/cover no-repeat;opacity:.6} #boot .boot-sun{position:absolute;top:5%;right:14px;width:104px;height:104px; background:url(assets/bp/bp-sun.webp) center/contain no-repeat;opacity:.9; animation:bootSun 9s ease-in-out infinite} @keyframes bootSun{50%{transform:translateY(7px) rotate(4deg)}} #boot .boot-head{position:relative;display:flex;align-items:center;gap:11px; background:#f2e4c2 url(assets/paper-grain.svg);color:#2a2118; border:3px solid #2a2118;border-radius:12px;box-shadow:0 5px 0 #17120d; padding:10px 14px 10px 11px;rotate:-1.1deg} #boot .boot-stamp{width:46px;height:48px;flex:none; background:url(assets/bp/bp-badge.webp) center/contain no-repeat} #boot .boot-head b{display:block;font-family:var(--disp);font-weight:700; font-size:23px;line-height:1.05;letter-spacing:-.01em} #boot .boot-head small{display:block;font-size:11.5px;opacity:.75;margin-top:2px} #boot .boot-hero{position:relative;width:auto;height:min(34vh,210px); filter:drop-shadow(0 6px 0 #17120d66)} #boot .boot-meter{position:relative;width:min(78vw,272px);height:18px; background:#2b2419;border:3px solid #17120d;border-radius:999px;overflow:hidden; box-shadow:inset 0 2px 0 #0006} #boot .boot-meter i{display:block;height:100%;width:0;border-radius:999px; background:linear-gradient(#d8543f,#a8291f);transition:width .25s ease-out} #boot #loadProgress{position:relative;font-family:var(--num);font-weight:700;font-size:14px} #boot #bootFull{position:relative;margin-top:2px;min-height:46px;padding:9px 18px; font-family:var(--disp);font-weight:700;font-size:15px;color:#fbf0d4; background:#b12f26;border:3px solid #17120d;border-radius:11px;box-shadow:0 4px 0 #17120d} #boot .boot-tip{position:relative;font-size:11.5px;opacity:.72;max-width:250px} @media (prefers-reduced-motion:reduce){#boot .boot-sun{animation:none}} .engine-ready #boot{display:none} @media(max-width:360px){#bHub small{font-size:10px}#bHub b{font-size:15px}#bJohnnyTop{width:43px}#bHelp{width:43px;font-size:10px}#guide img{display:none}.qchip{font-size:10px}#dock .dk>small{font-size:9px}#bRoll{height:72px}} @media(max-height:720px){#guide p{font-size:11px}#guide{padding:7px;min-height:63px}#guide img{width:38px;height:38px}#dock>.dk{height:68px;padding-top:42px}#bRoll{height:68px}#top{gap:4px}.qchip{min-height:36px}.cur{height:33px}} @media(prefers-reduced-motion:reduce){.map-float{animation-duration:.1s}} /* Keep the atlas art crisp; original prototype color shorthands must not erase it. */ .cur .ic.g,.cur .ic.b,.cur .ic.o{background-color:transparent;background-image:url(assets/interface-atlas.webp);background-repeat:no-repeat} .cur .ic.g{background-size:2133.3% 1462.86%;background-position:3.1% 19.1%} .cur .ic.b{background-size:1860.6% 1511%;background-position:26.2% 19.2%} .cur .ic.o{background-size:2104.1% 1280%;background-position:49.02% 18.3%} .cur,#guide,#tilebar,.card,#helpDialog{background-image:linear-gradient(#f4e4c4e8,#f4e4c4e8),url(assets/paper-grain.svg)} .qchip{background-image:linear-gradient(#252420ed,#252420ed),url(assets/paper-grain.svg)} #panel{background-image:linear-gradient(#302d27ed,#302d27ed),url(assets/paper-grain.svg)} #bRoll.guide-target{animation:mobileRollPulse 1.05s ease-in-out infinite!important} @keyframes mobileRollPulse{0%,100%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 2px #f5c652);box-shadow:none}50%{transform:scale(1.07);filter:brightness(1.15) drop-shadow(0 0 9px #ffe07d);box-shadow:none}} #bHub,#bHub small{color:#29231c} body.mobile-modal #toast{visibility:hidden;pointer-events:none!important} #card.training-card{width:calc(100% - 24px);max-width:440px;padding:14px;box-sizing:border-box;border-radius:18px} .training-card .training-pack{grid-template-columns:minmax(0,1fr) 22px 78px;gap:5px} .training-card .training-good{grid-template-columns:46px minmax(0,1fr);gap:6px;padding:6px;min-width:0} .training-card .training-good .good-icon{width:46px;height:46px;font-size:28px} .training-card .training-good b{font-size:14px}.training-card .training-good small{font-size:11px} .training-card .training-crate{width:78px;height:84px} .training-card .training-content{overflow-x:hidden} .training-card>.training-actions{background:transparent} @media(max-width:360px){.training-card .training-good{grid-template-columns:1fr;text-align:center;justify-items:center}.training-card .training-good small{font-size:10px}} .training-card .training-crate.pulse{animation:crateFlash .65s ease-out!important;transform:none!important} @keyframes crateFlash{0%,100%{filter:brightness(1)}40%{filter:brightness(1.3)}} /* Full-screen field. Only the individual paper controls cover the artwork. */ #top,#panel{background:none;border:0;box-shadow:none;pointer-events:none} #top>*{pointer-events:none}#top button,#top .cur{pointer-events:auto} #panel>*{pointer-events:auto}#panel #dock{pointer-events:none}#dock button{pointer-events:auto} #board-frame,#board{inset:0;width:100%;height:100%;bottom:auto} #panel{padding:4px 9px calc(env(safe-area-inset-bottom,0px) + 9px);gap:7px} #top{padding-top:calc(env(safe-area-inset-top,0px) + 8px);gap:5px} #dock{gap:4px;padding:0;grid-template-columns:1fr 1fr 1.14fr 1fr 1fr} #dock .diebox{gap:0;pointer-events:none} #dock>.dk{height:73px;padding-top:46px;filter:drop-shadow(0 3px 2px #24170b77)} #dock .dk:disabled{opacity:.8;filter:saturate(.45) drop-shadow(0 3px 2px #24170b77)} #bRoll{height:76px;width:82px} #sRolls{margin-top:-5px;z-index:1;font-size:14px;min-width:62px;background:#f3dfb4} #sRollsCap{margin-top:3px;background:#27231ced;color:#f3dfb4;font-size:9px} #starterInfo{max-width:100px;background:#27231cef;border-radius:4px;padding:2px;font-size:8px;line-height:1.2} #guide{min-height:65px;padding:8px 10px;gap:8px;box-shadow:0 3px #271e14,0 6px 10px #21170d44,inset 0 0 0 2px #a88c60} #guide img{width:42px;height:44px} #guide b{font-size:14px}#guide p{font-size:12px} #tilebar{min-height:47px;box-shadow:0 3px #271e14,0 5px 9px #21170d44} #inv{bottom:calc(var(--world-bottom) + 13px);left:10px;pointer-events:none}#inv button,#invList{pointer-events:auto} .map-controls{top:calc(var(--world-top) + 7px);right:9px;gap:4px} .map-controls button{min-height:34px;font-size:10px;padding:6px 8px;box-shadow:0 2px #33271788} #diceResult{position:absolute;z-index:10;left:50%;transform:translateX(-50%);display:flex;align-items:baseline;justify-content:center;gap:7px;padding:0;text-align:center;background:none;border:0;border-radius:0;box-shadow:none;color:#fff0cd;pointer-events:none;white-space:nowrap;font:800 19px/1.15 Bitter,Georgia,serif;text-shadow:0 2px 1px #30261b,1px 0 #30261b,-1px 0 #30261b,0 -1px #30261b} #diceResult[hidden]{display:none} #diceResult b{font-size:36px;line-height:1;letter-spacing:-1px} .map-controls{display:none} .mobile-modal #diceResult,.coach-tip-open #diceResult{visibility:hidden} .dice-rolling .map-controls,.dice-rolling #inv,.dice-rolling #guide{visibility:hidden} .dice-rolling #toast{visibility:hidden;pointer-events:none!important} @media(max-height:720px){#guide{min-height:57px;padding:6px 9px}#guide img{width:36px;height:38px}#guide p{font-size:11px}#dock>.dk{height:64px;padding-top:39px}#bRoll{height:65px}#panel{gap:5px}.map-controls button{min-height:31px}#tilebar{min-height:44px}} @media(prefers-reduced-motion:reduce){#bRoll.guide-target,.guide-target{animation:none!important;filter:brightness(1.1)}#diceResult{transition:none}} /* Brief ink-and-paper accents; never cover controls or intercept a tap. */ .cartoon-fx{position:fixed;z-index:8;pointer-events:none;transform:translate(-50%,-50%)} .cartoon-fx svg{display:block;width:100%;overflow:visible} /* ===== v30: типографика «крепкий гротеск» ===================== Golos Text — весь текст | Bitter 800 — числа ПРАВИЛО ВЕСА: жирное получают только заголовок, число и действие. Всё остальное — обычное начертание, читаемость держат кегль и цвет. Откат: обрезать файл до строки 141. ===== */ @font-face{font-family:'Bitter';font-weight:500;font-display:swap;src:url(assets/fonts/bitter-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Bitter';font-weight:500;font-display:swap;src:url(assets/fonts/bitter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Bitter';font-weight:600;font-display:swap;src:url(assets/fonts/bitter-600-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Bitter';font-weight:600;font-display:swap;src:url(assets/fonts/bitter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Bitter';font-weight:700;font-display:swap;src:url(assets/fonts/bitter-700-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Bitter';font-weight:700;font-display:swap;src:url(assets/fonts/bitter-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Bitter';font-weight:800;font-display:swap;src:url(assets/fonts/bitter-800-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Bitter';font-weight:800;font-display:swap;src:url(assets/fonts/bitter-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Golos Text';font-weight:400;font-display:swap;src:url(assets/fonts/golos-text-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Golos Text';font-weight:400;font-display:swap;src:url(assets/fonts/golos-text-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Golos Text';font-weight:500;font-display:swap;src:url(assets/fonts/golos-text-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Golos Text';font-weight:500;font-display:swap;src:url(assets/fonts/golos-text-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Golos Text';font-weight:600;font-display:swap;src:url(assets/fonts/golos-text-600-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Golos Text';font-weight:600;font-display:swap;src:url(assets/fonts/golos-text-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Golos Text';font-weight:700;font-display:swap;src:url(assets/fonts/golos-text-700-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Golos Text';font-weight:700;font-display:swap;src:url(assets/fonts/golos-text-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{ --disp:'Golos Text',Georgia,sans-serif; --num:'Bitter',Georgia,serif; --txt:'Golos Text',Arial,sans-serif; } /* --- текст: обычное начертание, крупнее и темнее --- */ html,body{font-family:var(--txt)} button,input,select,textarea{font-family:var(--txt)!important} .card,#helpDialog{font-family:var(--txt)} #card p{font-size:16px;font-weight:400} .qchip{font-family:var(--txt);font-size:13px;font-weight:500} #tbText{font-family:var(--txt);font-size:15.5px;font-weight:400} #sRollsCap{font-family:var(--txt);font-size:11.5px;font-weight:400} #bJohnnyTop small{font-family:var(--txt);font-size:11px;font-weight:600} #guide p{font-family:var(--txt);font-size:14px;font-weight:400} #guide small{font-family:var(--txt);font-size:12px;font-weight:400} #tip{font-family:var(--txt);font-size:16px;font-weight:400} #starterInfo{font-family:var(--txt);font-size:10.5px} h2 small,h3 small,#helpTitle small{font-family:var(--txt);font-weight:400} /* --- числа: единственное место, где вес максимальный --- */ .cur b{font-family:var(--num);font-weight:800;font-size:21px} #sRolls{font-family:var(--num);font-weight:800;font-size:18px} .card .v,#card .v{font-family:var(--num);font-weight:800} /* --- заголовки и действия --- */ .card h2,.card h3,#helpTitle{font-family:var(--disp);font-weight:700;letter-spacing:-.015em} #tilebar>b{font-family:var(--disp);font-weight:700;font-size:15px} #bRoll{font-family:var(--disp);font-weight:700} /* --- голос Джонни --- */ #guide b{font-family:var(--disp);font-weight:700;font-size:16px} /* --- нижние кнопки: читаются иконками, подписи убраны --- */ #dock .dk>small{display:none} #dock>.dk{padding-bottom:0} /* ===== v31: аккуратные окантовки кнопок и валюта на цене ===== Скин кнопки — картинка 181x61, которую растягивали на 334x44 с preserveAspectRatio:none: боковые грани толстели, верхняя и нижняя худели, углы плыли. Отдаём тот же рисунок через border-image — углы сохраняют размер, тянутся только грани. ===== */ #card button.enamel-button .enamel-skin,#helpDialog button.enamel-button .enamel-skin{display:none} #card button.enamel-button::before,#helpDialog button.enamel-button::before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; border:15px solid transparent; border-image:url(assets/btn-dark.webp) 20 fill / 15px stretch} #card button.enamel-button.ok::before{border-image-source:url(assets/btn-green.webp)} #card button.enamel-button.bad::before{border-image-source:url(assets/btn-red.webp)} #card button.enamel-button.sec::before,#card button.enamel-button.hard::before{border-image-source:url(assets/btn-blue.webp)} /* иконка игровых денег вместо знака доллара — та же пачка купюр, что в шапке */ .cash-glyph{display:inline-block;width:1.45em;height:1.3em;vertical-align:-.28em; background-image:url(assets/interface-atlas.webp);background-repeat:no-repeat; background-size:2133.3% 1462.86%;background-position:3.1% 19.1%;margin-right:.1em;margin-left:.06em} /* Крестик: арт 69x64 вписывался в квадрат 46x46 по 'meet', оставляя зазоры сверху и снизу — круглая маска резала кольцо неровно. Маска нужна (в атласе вокруг кружка тёмный фон), поэтому арт заставляем заполнять квадрат: см. paintedClose в mobile-windows.js — там 'meet' заменён на 'slice'. */ /* Под кубиком: один счётчик и один отсчёт, обе строки крупнее и без «воды». */ #sRolls{font-size:19px;padding:4px 10px} #sRollsCap{font-family:var(--num);font-weight:700;font-size:14px;padding:3px 7px;letter-spacing:.01em} #sRollsCap[hidden]{display:none} #starterInfo{display:none!important} /* Иконка валюты: по высоте прописных, а не по строке, и с воздухом вокруг. */ .cash-glyph{width:1.18em;height:1.05em;vertical-align:-.16em;margin-right:.14em;margin-left:.1em} /* ===== v34: единый набор иконок ресурсов ===== Иконки нарезаны из ui4.webp кита: в исходнике нет альфы (шахматка нарисована), поэтому фон выбит заливкой снаружи — внутренние белые блики сохранены. Раньше деньги и кристалл брались спрайтами из interface-atlas и не совпадали по стилю с иконками в окнах. ===== */ .cur .ic.g,.cur .ic.b{background-image:none!important;background-repeat:no-repeat;background-position:center;background-size:contain} .cur .ic.g{background-image:url(assets/icons/money.webp)!important;width:38px;height:34px} .cur .ic.b{background-image:url(assets/icons/gem.webp)!important;width:34px;height:34px} /* Иконка валюты в тексте кнопок — та же пачка купюр, что в шапке. */ .cash-glyph{background-image:url(assets/icons/money.webp);background-size:contain; background-position:center;background-repeat:no-repeat; width:1.3em;height:1.18em;vertical-align:-.22em;margin:0 .14em 0 .08em} /* В значениях строк иконка чуть мельче заголовочной, чтобы колонка не рябила. */ .card .v .cash-glyph,#card .v .cash-glyph{width:1.12em;height:1.02em;vertical-align:-.15em} #tbText .cash-glyph{width:1.1em;height:1em;vertical-align:-.14em} /* Иконка товара внутри круглой ячейки строки. */ .gi{display:block;width:100%;height:100%;background-repeat:no-repeat; background-position:center;background-size:82% 82%} #card .shop .ico:has(.gi){background:#f1e3c1;border-color:#8a7145;padding:0;overflow:hidden} /* Переключатели звука и музыки в меню — значками. Выключенное состояние показывает красная перечёркивающая линия, а не смена подписи. */ .audio-toggles{gap:10px} #card .audio-toggle{flex:0 0 auto; width:62px; min-height:56px; padding:6px; display:grid; place-items:center} #card .audio-toggle svg{width:34px; height:34px; display:block} #card .audio-toggle.is-off{filter:grayscale(.55)} #card .audio-toggle.is-off svg .wv{opacity:.35} /* Переключатели звука и музыки в меню — значками. Выключенное состояние показывает красная перечёркивающая линия, а не смена подписи. */ .audio-toggles{gap:10px} #card .audio-toggle{flex:0 0 auto; width:64px; min-height:56px; padding:6px; display:grid; place-items:center} #card .audio-toggle svg{width:34px; height:34px; display:block} #card .audio-toggle.is-off{filter:grayscale(.5)} #card .audio-toggle.is-off svg .wv{opacity:.3} /* .mbtns растягивает кнопки на всю строку — переключателям это не нужно. */ #card .mbtns.audio-toggles{justify-content:flex-start} #card .mbtns.audio-toggles .audio-toggle{flex:0 0 74px!important; width:74px!important; min-width:74px; min-height:60px} #card .mbtns.audio-toggles .audio-toggle svg{width:38px; height:38px} /* Готовность поставки помечалась классом `ok`, который заливал кнопку сплошным зелёным поверх спрайта — рисунок пропадал совсем. Возвращаем спрайт и помечаем готовность пульсацией, а не заливкой. */ #dock .dk.ok{background-color:transparent!important; background-image:url(assets/interface-atlas.webp)!important; animation:dockReady 1.15s ease-in-out infinite} #dock #bShip.ok{background-size:1052% 731%;background-position:75.70% 92.00%} #dock #bTaxi.ok{background-size:1052% 731%;background-position:65.00% 92.00%} #dock #bJohnny.ok{background-size:1052% 731%;background-position:86.4% 92.00%} #dock #bShop.ok{background-size:1052% 731%;background-position:97.5% 92.00%} @keyframes dockReady{ 50%{filter:drop-shadow(0 0 8px #ffd76a) brightness(1.07); translate:0 -2px}} #dock .dk.ok.blink{animation-duration:.7s} @media (prefers-reduced-motion:reduce){ #dock .dk.ok{animation:none; filter:drop-shadow(0 0 6px #ffd76a)}} /* Нечего купить внутри — кнопка строки точки серая, но остаётся нажимаемой. */ #tilebar.poor>b{background:#9a938a; color:#f0ece4} /* ===== Онбординг ===== */ #onboard{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:16px; background:#1d1a15cc;opacity:0;transition:opacity .2s} #onboard.in{opacity:1}#onboard.out{opacity:0} #onboard .ob-card{position:relative;width:min(100%,400px);max-height:calc(100dvh - 32px); display:flex;flex-direction:column;overflow:hidden; background:#f2e4c2 url(assets/paper-grain.svg);color:#2a2118; border:3px solid #2a2118;border-radius:18px;box-shadow:0 7px 0 #17120d;padding:16px 16px 18px} #onboard .ob-skip{position:absolute;top:10px;right:12px;z-index:2;border:0!important;box-shadow:none!important; background:none!important;font:500 14px/1 var(--txt);color:#6a5d45;padding:8px 4px;min-height:0;text-decoration:underline} #onboard .ob-track{position:relative;flex:1;min-height:0} #onboard .ob-slide{display:none;flex-direction:column;align-items:center;text-align:center;gap:10px;animation:obIn .28s ease-out} #onboard .ob-slide.on{display:flex} @keyframes obIn{from{opacity:0;translate:18px 0}} #onboard .ob-step{font:600 12.5px/1 var(--txt);color:#8a7a5c;letter-spacing:.02em;margin-top:4px} #onboard .ob-art{position:relative;width:100%;min-height:196px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:10px;padding:10px;border-radius:14px; background:linear-gradient(#e6d6ae,#dac79b);border:2px solid #b89e6f} #onboard .ob-title{margin:4px 0 0;font:700 25px/1.1 var(--disp);letter-spacing:-.01em} #onboard .ob-text{margin:0;font:400 16.5px/1.4 var(--txt);color:#3c3326;max-width:320px} #onboard .ob-goal{margin:2px 0 0;font:600 14px/1.35 var(--txt);color:#7d2a1f; background:#f7ecd0;border:2px solid #c9a86a;border-radius:10px;padding:8px 10px} #onboard .ob-dots{display:flex;justify-content:center;gap:8px;margin:14px 0 12px} #onboard .ob-dots i{width:9px;height:9px;border-radius:50%;background:#c2ad84;cursor:pointer;transition:width .2s} #onboard .ob-dots i.on{width:26px;border-radius:5px;background:#b12f26} #onboard .ob-next{width:100%;min-height:54px;font:700 19px/1 var(--disp)!important;color:#fbf0d4} /* картинки экранов */ #onboard .ob-banner{position:relative;width:100%;border:2px solid #2a2118;border-radius:10px;overflow:hidden; box-shadow:0 3px 0 #2a211855} #onboard .ob-banner img{display:block;width:100%;height:auto} #onboard .ob-chip{display:inline-flex;align-items:center;gap:3px;background:#2f5b3a;color:#fbf0d4; font:700 16px/1 var(--txt);padding:8px 14px;border:2px solid #17120d;border-radius:10px;box-shadow:0 3px 0 #17120d} #onboard .ob-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} #onboard .ob-row .ob-chip{background:#244963} #onboard .ob-up{position:absolute;right:8px;top:8px;width:40px;height:40px;border-radius:50%; display:grid;place-items:center;font:800 24px/1 var(--num);color:#fbf0d4;background:#2f5b3a; border:2px solid #17120d;animation:obBob 1.4s ease-in-out infinite} #onboard .ob-shelf{position:relative;display:flex;align-items:flex-end;gap:10px;padding:26px 16px 12px; background:#f7ecd0;border:2px solid #2a2118;border-radius:12px} #onboard .ob-sign{position:absolute;top:-12px;left:50%;translate:-50% 0;font:800 14px/1 var(--disp); color:#fbf0d4;background:#b12f26;border:2px solid #17120d;border-radius:6px;padding:4px 10px;letter-spacing:.06em} #onboard .ob-good{width:54px;height:54px;object-fit:contain;animation:obBob 1.6s ease-in-out infinite} #onboard .ob-good.g2{animation-delay:.2s}#onboard .ob-good.g3{animation-delay:.4s} #onboard .ob-arrow{font:800 30px/1 var(--num);color:#b12f26;animation:obNudge 1.1s ease-in-out infinite} #onboard .ob-mini{width:62%;border:2px solid #2a2118;border-radius:8px;overflow:hidden} #onboard .ob-mini img{display:block;width:100%} #onboard .ob-start{width:112px;height:62px;display:grid;place-items:center;background:#c84b36; border:3px solid #17120d;border-radius:10px;box-shadow:0 4px 0 #17120d;rotate:-3deg} #onboard .ob-start span{font:800 20px/1 var(--disp);color:#fbf0d4;letter-spacing:.05em} #onboard .ob-flow{display:flex;align-items:center;gap:12px} #onboard .ob-fly-good,#onboard .ob-fly-cash{width:56px;height:56px;object-fit:contain} #onboard .ob-fly-cash{animation:obPop 1.4s ease-in-out infinite} #onboard .ob-plus{background:#b12f26} #onboard .ob-stack img{width:58px;height:58px;object-fit:contain;animation:obBob 1.5s ease-in-out infinite} #onboard .ob-stack img:nth-child(2){animation-delay:.18s}#onboard .ob-stack img:nth-child(3){animation-delay:.36s} #onboard .ob-pop{animation:obPop 1.6s ease-in-out infinite} @keyframes obBob{50%{translate:0 -6px}} @keyframes obNudge{50%{translate:6px 0}} @keyframes obPop{50%{scale:1.08}} @media (prefers-reduced-motion:reduce){#onboard *{animation:none!important}} /* Карточка не должна прыгать по высоте между экранами */ #onboard .ob-art{height:214px;min-height:0} #onboard .ob-text{min-height:3.6em} #onboard .ob-slide:last-child .ob-text{min-height:0} #onboard .ob-track{flex:0 0 auto;height:452px} @media (max-height:700px){#onboard .ob-track{height:auto}#onboard .ob-art{height:170px}} #onboard .ob-art{height:254px;gap:9px} #onboard .ob-track{height:494px} #onboard .ob-mini{width:54%} #onboard .ob-row .ob-chip{font-size:14px;padding:7px 11px} #onboard .ob-row{flex-wrap:nowrap} /* ===== «Совет Джонни» ===== */ body #tip[hidden]{display:none!important} body #tip{background:none!important;border:0!important;outline:0!important;box-shadow:none!important; padding:0!important;color:#2a2118!important;display:flex;align-items:flex-end;gap:0; font-family:var(--txt);overflow:visible;max-width:min(92vw,400px)} body #tip::before,body #tip::after{content:none!important;display:none!important} #tip .tip-johnny{flex:0 0 86px;height:74px;margin:0 -10px 4px 0;position:relative;z-index:2; background:url(assets/bp/tip-johnny.webp) left bottom/contain no-repeat; filter:drop-shadow(0 3px 0 #17120d66)} #tip .tip-bubble{position:relative;flex:1;min-width:0; background:#f4e6c4 url(assets/paper-grain.svg);border:3px solid #2a2118; border-radius:16px 13px 17px 11px;box-shadow:0 5px 0 #17120d,0 10px 22px #0006; padding:12px 40px 13px 16px;rotate:-.6deg} #tip .tip-bubble::before{content:'';position:absolute;left:-15px;bottom:14px;width:18px;height:18px; background:#f4e6c4;border-left:3px solid #2a2118;border-bottom:3px solid #2a2118; transform:skewY(28deg) rotate(8deg);border-radius:0 0 0 4px} #tip .tip-label{display:block;font:700 12.5px/1 var(--disp);color:#b12f26;letter-spacing:.04em; text-transform:uppercase;margin-bottom:6px} #tip .tip-text{margin:0;font:500 16px/1.38 var(--txt);color:#2a2118} #tip .tip-x{position:absolute;top:-14px;right:-12px;width:38px;height:38px;min-height:0;padding:0;z-index:3} /* крестик подсказки: только нарисованный круг, без подложки кнопки */ #tip .tip-x{background:none!important;border:0!important;box-shadow:none!important; border-radius:50%!important;overflow:hidden!important} /* Standalone advice is one printed card: the portrait stays inside its header. */ body #tip.tip-standalone{display:block;width:calc(100% - 40px);max-width:400px;overflow:visible;cursor:pointer} #tip.tip-standalone .tip-bubble{padding:22px 24px 25px;border:3px solid #392d1e; border-radius:23px 18px 24px 20px;background:#efdfb7 url(assets/print/card-stock.webp) center/400px 600px; box-shadow:0 0 0 3px #ead7a6,inset 0 0 0 2px #f7e9c5,0 7px 0 3px #30261b,0 15px 26px #0005;rotate:0} #tip.tip-standalone .tip-bubble::before{display:none} #tip.tip-standalone .tip-johnny{position:absolute;top:18px;left:20px;width:83px;height:87px;margin:0; background-position:center bottom;filter:none} #tip.tip-standalone .tip-label{display:flex;align-items:center;min-height:80px;margin:0 14px 19px 94px; font:800 25px/1.12 Bitter,Georgia,serif;letter-spacing:-.4px;text-transform:none;color:#a53627} #tip.tip-standalone .tip-text{padding-top:17px;border-top:2px solid #9a8054; font:600 18px/1.48 Bitter,Georgia,serif;color:#332b20;text-wrap:pretty} #tip.tip-standalone .tip-x{top:-13px;right:-10px;width:44px;height:44px} #tip.tip-attached .tip-label{font:800 14px/1.2 Bitter,Georgia,serif;text-transform:none;letter-spacing:0} #tip.tip-attached .tip-text{font:600 16px/1.38 Bitter,Georgia,serif} @media(max-width:360px){ #tip.tip-standalone .tip-bubble{padding:18px 19px 21px} #tip.tip-standalone .tip-johnny{width:72px;height:76px;left:17px;top:17px} #tip.tip-standalone .tip-label{min-height:73px;margin-left:82px;font-size:23px} #tip.tip-standalone .tip-text{font-size:17px;line-height:1.43} } @media(max-height:500px){ #tip.tip-standalone .tip-bubble{padding:14px 20px 17px} #tip.tip-standalone .tip-johnny{height:56px;width:58px;top:11px;left:19px} #tip.tip-standalone .tip-label{min-height:48px;margin:0 25px 10px 70px;font-size:22px} #tip.tip-standalone .tip-text{padding-top:11px;font-size:16px;line-height:1.35} } /* Строка товара в обучении посылки: общая пульсация масштабирует до 1.08 и даёт кольцо 7 px — у широкой строки это вылезало за край окна и обрезалось. Здесь пульс без масштаба, кольцо золотое (без неона) и внутри запаса, который даёт отступ контейнера. */ .training-card .training-goods{padding:6px} .training-card .training-good.guide-target{animation:coachPulseWide 1.05s ease-in-out infinite!important} @keyframes coachPulseWide{0%,100%{filter:brightness(1);box-shadow:0 3px 10px #0003,0 0 0 0 #ffd76a00} 50%{filter:brightness(1.07);box-shadow:0 4px 14px #0005,0 0 0 4px #ffd76acc}} /* картинка шага 2 — сцена из кита, без растяжения */ .training-card .training-art{width:100%;height:auto;aspect-ratio:404/168;object-fit:cover} /* стрелка из окна «Больше груза» к кнопке поставки */ .ship-hint{position:fixed;inset:0;z-index:40;pointer-events:none} .ship-hint .ship-ring{position:absolute;border:4px solid #ffd76a;border-radius:16px; box-shadow:0 0 0 3px #2a2118,0 0 18px #ffd76acc;animation:shipRing 1.1s ease-in-out infinite} .ship-hint .ship-arrow{position:absolute;width:44px;filter:drop-shadow(0 3px 0 #0006); animation:shipArrow 1s ease-in-out infinite} @keyframes shipRing{50%{transform:scale(1.06)}} @keyframes shipArrow{50%{translate:0 7px}} @media (prefers-reduced-motion:reduce){.ship-hint *{animation:none!important}} /* Карточка «Первый круг · N/9» убрана совсем: ведут пульсация и советы Джонни. */ #guide{display:none!important} /* Онбординговый круг: только кубик и строка клетки. */ body.first-lap #bTaxi,body.first-lap #bShip,body.first-lap #bJohnny,body.first-lap #bShop, body.first-lap #qrow,body.first-lap #bHub,body.first-lap #inv,body.first-lap .map-controls{visibility:hidden!important;pointer-events:none!important} /* ===== v50: мягкая валюта — монеты везде ===== Одна иконка (монеты из кита, как на поле) в шапке, в тексте, на кнопках, в наградах и в летящих частицах. Пачка купюр больше нигде не используется. */ .cur .ic.g{background-image:url(assets/icons/soft.webp)!important;width:36px;height:35px} .cash-glyph{background-image:url(assets/icons/soft.webp)!important;background-size:contain;background-position:center; background-repeat:no-repeat;width:1.12em;height:1.08em;vertical-align:-.2em;margin:0 .12em 0 .06em} .card .v .cash-glyph,#card .v .cash-glyph{width:1.04em;height:1em;vertical-align:-.16em} #tbText .cash-glyph{width:1.04em;height:1em;vertical-align:-.15em} .mobile-fly.fly-coin img{display:block;width:30px;height:auto;filter:drop-shadow(0 2px 1px #23190e99)} /* Поставка на сегодня сделана: ящик закрыт плашкой с надписью. */ #dock #bShip.ship-done{position:relative;filter:saturate(.55)} #dock #bShip.ship-done::after{content:'Отправка завтра';position:absolute;inset:8px 5px 10px;display:flex;align-items:center;justify-content:center; text-align:center;border-radius:10px;background:#e8dbbd;box-shadow:inset 0 0 0 1.5px #b9a57f; font-family:'Golos Text',sans-serif;font-weight:700;font-size:10.5px;line-height:1.15;color:#3d3022;letter-spacing:0;padding:0 1px;overflow:hidden} /* ===== v57: шапка и плашки заданий по киту ===== Иконки валют — чистые вырезки на альфе одной высоты: раньше календарь тащил край плашки, а кристалл — кремовую обводку-наклейку. */ .cur .ic,.cur .ic.g,.cur .ic.b,.cur .ic.o{width:34px!important;height:30px!important;margin-left:3px;flex:none; background-color:transparent!important;background-position:center!important;background-size:contain!important;background-repeat:no-repeat!important} .cur .ic.g{background-image:url(assets/icons/soft.webp)!important} .cur .ic.b{background-image:url(assets/icons/gem-clean.webp)!important} .cur .ic.o{background-image:url(assets/icons/calendar.webp)!important} /* Задания и таймер — грифельные плашки кита: тёмная доска, кремовая кайма внутри, иконка слева, золотая полоска прогресса по нижнему краю. */ #qrow .qchip{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;gap:6px;text-align:left; min-height:44px;padding:5px 8px 8px 6px;border:2px solid #17130f;border-radius:10px; background:#27231e url(assets/paper-grain.svg)!important; box-shadow:inset 0 0 0 2px #27231e,inset 0 0 0 3.5px #d8c79c99,0 2px 0 #120f0b; color:#f6e7c3;font:600 12.5px/1.15 var(--txt)} #qrow .qchip::before{content:'';flex:none;width:27px;height:27px;background:center/contain no-repeat} #qrow #sTimer::before{background-image:url(assets/icons/clock.webp)} #qrow .qchip[data-kind=earn]::before{background-image:url(assets/icons/soft.webp)} #qrow .qchip[data-kind=sell]::before{background-image:url(assets/icons/box.webp)} #qrow .qchip[data-kind=buy]::before{background-image:url(assets/icons/shop.webp)} #qrow .qchip[data-kind=upg]::before{background-image:url(assets/icons/crown.webp)} #qrow .qchip[data-kind=parcel]::before{background-image:url(assets/icons/crate.webp)} #qrow .qchip span{flex:1;min-width:0} #qrow .qchip i{position:absolute;left:0;bottom:0;height:4px;background:linear-gradient(#f0c44e,#c99a32);border-radius:0 3px 0 0} #qrow .qchip.done{background:#3e6d3b url(assets/paper-grain.svg)!important;box-shadow:inset 0 0 0 2px #3e6d3b,inset 0 0 0 3.5px #e9dcb899,0 2px 0 #1d3a1c;color:#fff} @media(max-width:360px){#qrow .qchip{font-size:11px;gap:4px;padding-left:4px}#qrow .qchip::before{width:22px;height:22px}} /* доска темнее: зерно бумаги только проступает сквозь чёрную краску */ #qrow .qchip{background:linear-gradient(#1f1c18e6,#1f1c18e6),url(assets/paper-grain.svg)!important; box-shadow:inset 0 0 0 2px #1f1c18,inset 0 0 0 3.5px #d8c79c8c,0 2px 0 #120f0b; gap:4px;padding:5px 7px 8px 5px;font-size:12px;line-height:1.12} #qrow .qchip::before{width:23px;height:23px} #qrow .qchip.done{background:linear-gradient(#3e6d3bee,#3e6d3bee),url(assets/paper-grain.svg)!important} #qrow .qchip{font-size:11.5px} #qrow .qchip::before{width:21px;height:21px} #qrow #sTimer span b{display:block;font-family:var(--num);font-weight:800;font-size:15px;line-height:1.05;color:#fff3d6} #qrow #sTimer span small{display:block;font-size:10.5px;opacity:.8;margin-top:1px} /* строка клетки: серая «открыть», если здесь не на что потратиться; зелёная — если есть */ #tilebar.poor>b{background:#8f887d!important;color:#f3efe6!important;box-shadow:inset 0 -2px 0 #0000002a} /* Тени под панелями (v61) убраны: их высота шла за панелью и прыгала, когда появлялась строка клетки. Поле идёт до краёв без затемнения. */ .map-controls{z-index:2} /* ===== v62: широкий режим на компьютере ===== */ #wideBtn{position:fixed;top:12px;right:14px;z-index:60;display:flex;align-items:center;gap:8px; padding:9px 14px 9px 11px;border-radius:12px;border:2.5px solid #2a2118;cursor:pointer; background:#f2e6c6 url(assets/paper-grain.svg);box-shadow:0 3px 0 #2a2118;color:#2a2118; font:700 15px/1 var(--txt)} #wideBtn svg{width:22px;height:22px} #wideBtn:hover{background-color:#fff3d3} #wideBtn:active{translate:0 2px;box-shadow:0 1px 0 #2a2118} #wideBtn[hidden]{display:none} body.wide-mode #app{max-width:none} body.wide-mode #top,body.wide-mode #panel{left:50%!important;right:auto!important;width:min(480px,100%);translate:-50% 0} body.wide-mode #inv{left:calc(50% - 230px)} body.wide-mode .map-controls{left:calc(50% + 240px + 12px);right:auto} body.wide-mode #wideBtn{top:14px;right:18px} /* Общие плашки ресурсов обеих мини-игр; размещение задаёт minigame-shell. */ .sl-res{position:absolute;z-index:6;left:10px;right:10px;top:calc(env(safe-area-inset-top,0px) + 6px);display:grid;grid-template-columns:1fr 1fr;gap:6px;pointer-events:none} .sl-res .cur{height:36px} /* широкий режим: ячейки ресурсов над мини-игрой — по ширине колонки игры, как #top */ body.wide-mode .minigame-layer .sl-res{width:min(460px,calc(100% - 20px));justify-self:center;margin-left:auto;margin-right:auto} /* число броска — на квадратной бумажной подложке, как ячейки шапки */ #diceResult{display:grid;place-items:center;min-width:58px;height:58px;padding:0 10px;box-sizing:border-box;border:2.5px solid #2a221c;border-radius:12px; background:#f4e5c4 url(assets/paper-grain.svg);box-shadow:0 3px 0 #2a221c,0 6px 12px #0005;color:#2a221c;text-shadow:none} #diceResult b{font:800 36px/1 Bitter,Georgia,serif;letter-spacing:-1px} /* Кубик не наезжает на счётчик ходов: место под счётчик (28 px) + тень кнопки (5 px) + зазор */ #dock .diebox{padding-bottom:36px!important} #dock .diebox #sRolls{bottom:0} /* UI start/cells: wide world, bounded controls; no viewport-sized HUD. */ #top,#panel{box-sizing:border-box;max-width:640px} @media(min-width:900px){ body #app{max-width:none} body #top,body #panel,body.wide-mode #top,body.wide-mode #panel{left:50%!important;right:auto!important;width:620px!important;translate:-50% 0} body #inv,body.wide-mode #inv{left:calc(50% - 285px)} body .map-controls,body.wide-mode .map-controls{left:calc(50% + 324px);right:auto} } @media(max-height:700px) and (max-width:600px){ #top{gap:4px;padding-bottom:4px} #qrow .qchip{min-height:36px} #panel{gap:4px} #tilebar{min-height:40px} } @media(min-width:900px){ body #top .bar0{padding-left:106px;min-height:68px;grid-template-columns:minmax(0,1fr) 48px;gap:10px} body #top #bJohnnyTop{width:96px;height:105px} body #top #bJohnnyTop .hud-portrait{width:100px;height:96px} body #top #bJohnnyTop small{font-size:16px} body #top #bHub.hud-map{height:68px;min-height:68px;padding:10px 18px} body #top .hud-map-heading strong{font-size:27px} body #top #bHub .hud-map-heading b{font-size:34px} body #top #bHub .hud-map-heading small{font-size:24px} body #top #bHelp{width:46px;height:46px;font-size:32px} body #top .cur{height:38px;min-width:98px;padding:0 10px;gap:10px} body #top .cur b{font-size:27px} body #top .cur .ic{width:31px!important;height:31px!important} body #top #qrow .qchip{font-size:15px;min-height:48px} body #panel,body.wide-mode #panel{width:540px!important} } /* ---- mobile-windows.css ---- */ /* Supplied paper, enamel and ink: shared windows, with live prices and controls. */ .atlas-art{display:block;width:100%;height:100%;pointer-events:none} .sheet-surface{position:relative;isolation:isolate;background:none!important} .sheet-paper{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none} #modal{padding:calc(env(safe-area-inset-top,0px) + 28px) 15px calc(env(safe-area-inset-bottom,0px) + 22px);align-items:center;background:#171a17b8;backdrop-filter:blur(2px)} #modal.mid{padding-top:calc(env(safe-area-inset-top,0px) + 28px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 22px);align-items:center} #card{width:100%;max-width:420px;max-height:calc(100dvh - 68px)!important;border-radius:19px 17px 21px 16px;border:2px solid #302719;box-shadow:0 0 0 3px #f3dfb4,0 7px 0 4px #211c17,0 17px 38px #0008;padding:17px;color:#27231c;overflow:auto;overscroll-behavior:contain} #card p{font-size:14px;line-height:1.4}#card h2{font-size:23px;line-height:1.15;margin:0 0 12px;font-weight:800;text-transform:none;letter-spacing:0} #card small{line-height:1.3} #card.bare{border:0;background:none!important;box-shadow:none;padding:0;overflow:visible;width:100%;max-width:390px} #card.bare .shop{flex:initial;max-height:calc(100dvh - 80px);overflow:auto;overscroll-behavior:contain;border:2px solid #332b1e;border-radius:18px 15px 19px 16px;box-shadow:0 0 0 3px #f3dfb4,0 7px 0 3px #1f1d17;padding:9px;--cs:1} #card .property-title{display:flex;align-items:center;gap:10px;padding:2px 38px 10px 0;min-height:43px} #card .property-title h2{font-size:21px;margin:0;padding:0;text-transform:none;font-weight:800} .property-mark{font-size:26px;line-height:1;min-width:31px} .property-picture{width:100%;height:156px;border:1px solid #7e6948;border-radius:11px;overflow:hidden;margin-bottom:7px;background:#ccb082} .property-illustration{display:block;width:100%;height:100%;object-fit:cover;object-position:center} #card .shop .banner{min-height:130px;padding:15px;background:#36566c;color:#f3dfb4;border-radius:10px;margin-bottom:8px} #card .shop .banner b{font:800 24px/1.1 'Suisse Intl',Arial,sans-serif;white-space:normal;text-transform:none;color:inherit} #card .shop .srow{min-height:55px;margin:0 0 7px;padding:7px;border:1px solid #ac9265;border-radius:12px;background:#fff3d137} #card .shop .ico{width:39px;height:39px;font-size:24px;border:3px solid #39734a;background:#272c23;flex:none} #card .shop .nm{font-size:16px}#card .shop .lvl{font:700 15px/1.1 'Suisse Intl',Arial,sans-serif;padding:7px 13px;min-width:61px;background:#347347} #card .shop .box{margin:0 0 6px;padding:9px 10px;border:1px solid #aa926b;border-radius:10px;background:#fff4d477;font-size:14px;min-height:43px} #card .shop .box b{font-size:17px} #card .shop .two{padding:0;margin:8px 0;gap:7px;align-items:stretch} #card .shop .up{padding:10px 7px 8px;gap:5px;border:1px solid #9c8258;border-radius:12px;background:#fff1cd45} #card .shop .up .uic{width:46px;height:43px;flex:none} #card .shop .up .lab{font-size:13px;color:#322b21;min-height:19px} #card .shop .up .nums{font:750 21px/1.15 'Suisse Intl',Arial,sans-serif;margin:0 0 6px;white-space:normal;display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap} #card .shop .up .nums b{color:#347347}#card .shop .up .nums i{font-size:21px;margin:0 2px} #card .shop .up .nums small{font:400 11px/1.25 'Suisse Intl',Arial,sans-serif;flex-basis:100%;color:#5d513e;margin-top:3px} #card .shop .up button:not(.qm){margin-top:auto;min-height:44px;font-size:16px} #card .shop .up .qm,#card .shop .srow .qm{width:30px;min-height:30px;height:30px;font-size:17px;border:1px solid #77603d;background:#f0dab0;color:#27231c;padding:0;line-height:28px;box-shadow:none} #card .shop .wide{margin:7px 0;padding:10px;border:1px solid #aa926b;background:#fff0ca60;font-size:14px} #card .shop .buy,#card .shop .buyall{margin:7px 0 3px;width:100%;min-height:47px;font-size:16px} #card .shop .need,#card .shop .hintline{font-size:12px;padding:7px 2px;color:#564831;line-height:1.3} #card button:not(.qm):not(.painted-close):not(.training-good):not(.tab):not(.claim){border:1px solid #2c2c23;border-radius:11px;box-shadow:0 3px #252620;min-height:44px;font-weight:700} #card .shop .buy,#card .shop .buyall,#card .shop .up button:not(.qm),#card button.hard,#card .sec{background:#36566c;color:#fff1cc} #card .ok{background:#347347;color:#fff1cc} #card button:disabled{background:#7c817e!important;color:#ebe2cf!important;filter:saturate(.25);opacity:.8;box-shadow:0 2px #51554f!important;cursor:default} #card .painted-close,#helpDialog .painted-close{position:absolute;z-index:6;top:-19px;right:-12px;width:46px;height:46px;min-height:46px;padding:0;margin:0;background:none;border:0;border-radius:50%;overflow:hidden;box-shadow:0 3px 0 #211e17;filter:drop-shadow(0 1px 1px #0008);font-size:0} #card:not(.bare) .painted-close{top:7px;right:7px} #card .shop .wr{padding:8px 6px;margin:0 0 7px;background:#fff3d16b;border:1px solid #aa926b;border-radius:12px} #card .shop .wn{font-size:15px}#card .shop .wn small{font-size:11px}#card .shop .wq{font-size:15px} #card .shop .wr button{font-size:13px;padding:7px} #card .shop .whead{font-size:17px;padding:5px 0 8px} #helpDialog{padding:0;border:2px solid #302719;box-shadow:0 0 0 3px #f3dfb4,0 7px #211c17;border-radius:18px;color:#27231c;max-width:440px} #helpDialog .help-head{background:transparent;border-bottom:1px solid #ac9265;padding:14px 60px 12px 16px} #helpDialog .painted-close{top:8px;right:8px;width:40px;height:40px;min-height:40px} #helpDialog .help-head h2{font:800 21px/1.2 'Suisse Intl',Arial,sans-serif;margin:0} #toast{padding:9px 12px;gap:9px;border:2px solid #33291c;border-radius:15px;box-shadow:0 4px #33291c;background:#f3dfb4;color:#29241b;font-size:13px;max-width:366px} #toast .tico{display:none}#toast .feedback-sun{width:45px;height:47px;flex:none;display:block;border-radius:50%;overflow:hidden} #toast .ttxt{font-weight:600;line-height:1.25} #card.training-card{width:100%;padding:15px;max-width:390px;overflow:hidden} #card .training-art{height:150px} #card .parcel-actions{padding:8px 0;background:none} #card .parcel-summary{background:#fff0c675;border:1px solid #b29970} button:focus-visible{outline:3px solid #78d0ff;outline-offset:3px} @media(max-height:720px){.property-picture{height:115px}#card .property-title h2{font-size:19px}#card .shop .srow{min-height:48px}#card .shop .up{padding-top:7px}#card .shop .up .uic{width:34px;height:32px}#card .shop .up .lab{font-size:12px}#card .shop .box{padding:7px 9px}#card{max-height:calc(100dvh - 52px)!important}#card.bare .shop{max-height:calc(100dvh - 64px)}} .round-art{clip-path:circle(47%)} .sheet-paper svg{display:block} /* Remaining windows: the new supplied sheets, not a flattened screenshot. */ .window-scene{height:122px;border:1px solid #806c48;border-radius:12px 10px 13px 10px;overflow:hidden;background:#557887;margin:0 0 12px} .window-scene .atlas-art{width:100%;height:100%} #helpDialog:not(.welcome) .help-body{padding:12px 16px 18px} #helpDialog .help-scene{height:auto;aspect-ratio:408 / 150;margin-bottom:10px} #helpDialog .help-body p{font-size:14px;line-height:1.4} #helpDialog .help-facts{border:1px solid #ad9162;border-radius:10px;background:#fff3d147;padding:11px;font-size:14px} #helpDialog .help-steps{margin:13px 0;border:1px solid #ae9160;border-radius:12px;padding:0 12px;background:#fff4d32e} #helpDialog .help-steps li{padding:13px 0 13px 37px;border-bottom:1px solid #bca479} #helpDialog .help-steps li:last-child{border:0} #helpDialog .help-steps li:before{top:13px;width:27px;height:27px;background:#347347;border:1px solid #295638;box-shadow:inset 0 0 0 2px #85a56d60} #helpDialog .help-steps b{font-size:16px;margin-bottom:4px} #helpDialog .help-steps span{font-size:14px;line-height:1.35;color:#514736} #helpDialog details{border:1px solid #ae9160;border-radius:9px;padding:0 10px;margin:7px 0;background:#fff0c33b} #helpDialog summary{font-size:15px;min-height:46px;padding:12px 0} #helpDialog .help-replay{font-family:inherit;font-size:14px;min-height:44px} .enamel-button{position:relative;isolation:isolate;overflow:hidden} #card button.enamel-button,#helpDialog button.enamel-button{background:transparent!important;border:0!important;border-radius:11px;box-shadow:0 2px #29271f;color:#fff3d5;font-family:inherit;min-height:46px;padding:10px 13px;line-height:1.2} .enamel-skin{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;overflow:hidden} #card button.enamel-button:disabled{filter:grayscale(.9);opacity:.7;background:none!important} #card.settings-card{padding:13px;max-width:430px} #card .settings-title{display:flex;align-items:center;gap:9px;margin:-13px -13px 6px;padding:15px 50px 15px 14px;color:#fff0c9;background:#a53827 url(assets/paper-grain.svg);border-bottom:2px solid #5f3220;font-size:21px;min-height:65px} .settings-gear{width:34px;height:34px;flex:none} #card.settings-card .row{display:flex;gap:10px;align-items:center;border:1px solid #b29970;border-radius:10px;padding:10px;margin:7px 0;background:#fff2ce40} #card.settings-card .n{font-size:14px;line-height:1.3;flex:1;min-width:0} #card.settings-card .n small{display:block;font-size:12px;color:#63563f;line-height:1.35;margin-top:4px} #card.settings-card .qty{flex:none} #card.settings-card .qty button{font-size:13px;padding:8px 10px} .settings-stepper{display:flex;align-items:center;flex:none;gap:2px} #card .settings-stepper input{width:47px;min-width:0;height:44px;padding:3px;border:0;border-radius:0;border-bottom:1px solid #9c8258;background:#fff0c955;text-align:center;color:#2c291e;font-family:inherit;font-weight:700;font-size:16px;appearance:textfield;-moz-appearance:textfield} #card .settings-stepper input::-webkit-inner-spin-button,#card .settings-stepper input::-webkit-outer-spin-button{appearance:none;margin:0} #card .settings-stepper button{width:38px;min-width:38px;min-height:44px;padding:0;font-size:20px} #card.settings-card .mbtns{gap:8px;margin-top:10px} #card.settings-card .mbtns button{flex:1;font-size:14px} #card.settings-card > p{color:#69583c;font-size:12px!important} #card.shipping-window{padding:14px;max-width:420px} #card.shipping-window > h2{font-size:23px;padding-right:39px;min-height:33px;margin-bottom:11px} #card.shipping-window h2 .qm{vertical-align:middle;width:36px;height:36px;min-height:36px;margin-left:5px;padding:0;border:1px solid #796446;border-radius:50%;background:#e7d2a3;color:#302a20;font-size:19px;line-height:34px;box-shadow:none} #card.shipping-window .shipping-scene{height:auto;aspect-ratio:404 / 168} #card.shipping-window .parcel-note{font-size:12px;line-height:1.35;margin:8px 0;color:#69583e} #card.shipping-window .parcel-summary{border-radius:12px;margin:10px 0;padding:12px;background:#fff3d355} #card.shipping-window .parcel-summary .total{font-size:14px} #card.shipping-window .parcel-summary .total b{font-size:25px;white-space:nowrap;color:#28643f} #card.shipping-window .parcel-summary p{font-size:12px} #card.shipping-window .bar{height:10px;background:#a89f7e77;border-radius:8px;overflow:hidden;margin-top:9px} #card.shipping-window .bar i{background:#41794b} #card.shipping-window .parcel-meta{font-size:12px;align-items:center} #card.shipping-window .slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px} #card.shipping-window .slot{position:relative;min-width:0;width:auto;height:53px;border:1.5px dashed #776b4c;border-radius:8px;background:#fff2d04a;font-size:24px;box-shadow:none} #card.shipping-window .slot.f{border:1.5px solid #7a724b;background:#dee1b47d} #card.shipping-window .slot small{font-size:10px;bottom:3px;right:3px;color:#51472f} #card.shipping-window .row{padding:10px 0;gap:8px;border-bottom:1px solid #b6a078} #card.shipping-window .n{font-size:15px;line-height:1.25;min-width:0} #card.shipping-window .n small{font-size:11px;color:#65573e;margin-top:4px;line-height:1.3} #card.shipping-window .qty{gap:4px;flex:none} #card.shipping-window .qty button{width:42px;min-width:42px;min-height:44px;font-size:21px;padding:0} #card.shipping-window .qty b{font-size:16px;min-width:17px;text-align:center} #card.shipping-window .parcel-actions{position:sticky;bottom:-14px;z-index:3;background:#ecd9b2 url(assets/paper-grain.svg);padding:10px 0 13px;margin:9px 0 -5px;border-top:1px solid #ac9365;box-shadow:0 -8px 12px #eddbb29c} #card.shipping-window .parcel-actions button{font-size:14px;min-height:46px} #card.shipping-window #mSend{min-height:50px;font-size:17px} #toast{border:3px double #b88237;outline:2px solid #302a20;border-radius:13px;background:#f1dfb6 url(assets/paper-grain.svg);box-shadow:0 5px #211e17} #toast .feedback-sun{width:57px;height:57px;border-radius:10px} #toast .ttxt{font-size:13px;font-weight:650} @media(max-width:350px){ #card.settings-card .row{gap:5px;padding:8px} #card.settings-card .n{font-size:13px} #card.settings-card .n small{font-size:11px} #card .settings-stepper input{width:38px;font-size:14px} #card .settings-stepper button{width:33px;min-width:33px} #card.shipping-window .slot{height:44px;font-size:21px} #card.shipping-window .qty button{width:37px;min-width:37px} #card.shipping-window .parcel-meta{font-size:11px} } @media(max-height:650px){#card.shipping-window .shipping-scene{max-height:90px}#helpDialog .help-scene{max-height:90px}} /* v23: the paper belongs to the shell, never to a scrolling child. */ .sheet-surface{background:#efdbaf url(assets/paper-grain.svg)!important} #card{background:#efdbaf url(assets/paper-grain.svg);scrollbar-width:thin;scrollbar-color:#796345 #dec899} #card.shipping-window{display:flex;flex-direction:column;overflow:hidden;padding:0;max-height:calc(100dvh - 56px)!important} .cargo-head{flex:none;padding:16px 48px 11px 15px;border-bottom:2px solid #ad9162} #card.shipping-window .cargo-head h2{padding:0;margin:0;font-size:22px} .cargo-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 14px;scrollbar-width:thin} #card.shipping-window .shipping-scene{height:95px;aspect-ratio:auto;margin-bottom:10px} #card.shipping-window .shipping-scene-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;} .cargo-foot{flex:none;padding:10px 14px 12px;background:#efdbaf url(assets/paper-grain.svg);border-top:2px solid #a58a5b;box-shadow:0 -5px 12px #30271720} #card.shipping-window .parcel-actions{position:static;box-shadow:none;background:none;padding:0;margin:0;border:0;gap:7px} #card.shipping-window .cargo-foot .parcel-note{font-size:11px;margin:9px 0 0;line-height:1.3} #card.shipping-window .qty button{width:40px;min-width:40px;border-radius:50%;overflow:hidden} #card.shipping-window .parcel-meta{position:sticky;top:-12px;padding:9px 0;margin:0;background:#efdbaf;z-index:2} #card.shipping-window .row .n{font-size:15px} #card.shipping-window .parcel-summary{padding:10px} #card .mbtns{gap:8px} #card .mbtns button{font-size:15px} #card .row{gap:9px} #card .painted-close{touch-action:manipulation} #tip{background:#30332c url(assets/paper-grain.svg);color:#fff0cd;border:2px solid #e4b85e;outline:2px solid #2a271e;border-radius:13px 10px 15px 10px;box-shadow:0 5px #181b16,0 10px 28px #0008;padding:17px 18px 13px;font-weight:600;font-size:15px;line-height:1.4} #tip:after{content:'Тапни здесь или рядом, чтобы закрыть';color:#d8be87;font-size:11px;font-weight:400;padding-top:8px;margin-top:9px;border-top:1px solid #b6975955} #tip:before{content:'Совет Джонни';display:block;color:#efc669;font-size:12px;font-weight:700;margin-bottom:7px} #modal:not([hidden]):not(.closing) #card{animation:paper-enter .22s cubic-bezier(.2,.8,.2,1)} @keyframes paper-enter{from{opacity:0;translate:0 12px;scale:.97}to{opacity:1;translate:0 0;scale:1}} @media(max-height:650px){#card.shipping-window .shipping-scene{height:70px}.cargo-head{padding-top:10px;padding-bottom:8px}.cargo-foot{padding-top:8px;padding-bottom:8px}} @media(prefers-reduced-motion:reduce){#modal:not([hidden]):not(.closing) #card{animation:none}} /* Registered paper crop from the supplied atlas, repeated by CSS over the full shell. */ .sheet-surface,#card{background:#efdbaf url(assets/window-paper.webp)!important} .cargo-head,.cargo-foot{background:#efdbaf url(assets/window-paper.webp)} #tip{background:#30332c!important;color:#fff0cd!important;opacity:1} #tip:after{background:none!important} /* Кнопки выбора в модальных окнах: при flex:1 без нижней границы ширины они сжимались и длинная подпись обрезалась («Ближайши…»). Теперь у них есть минимум, текст переносится, а перенос строки уже был разрешён. */ #card .mbtns{align-items:stretch} #card .mbtns button{flex:1 1 128px; min-width:118px; min-height:62px; white-space:normal; overflow-wrap:break-word; line-height:1.2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background-image:url(assets/paper-grain.svg); background-blend-mode:soft-light} #card .mbtns button small{display:block; font-size:11.5px; opacity:.92; font-weight:700} /* «Отмена» уходит на свою строку и не спорит с выбором назначения */ #card .mbtns button.sec:last-child{flex:1 1 100%; min-height:50px} /* ===== Событийные окна в стиле баттлпасса (decorateEvent) ===== */ #card.event-card{--ink:#2a2118;padding:0!important;overflow:hidden;border-radius:18px;display:flex;flex-direction:column; max-height:calc(100dvh - 24px);background:linear-gradient(#a9c3d2 0%,#bcc7c2 55%,#b3a88c 100%)!important} #card.event-card .ev-head{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:11px; padding:12px 14px 11px;background:linear-gradient(#f2e6c6,#e6d7b0);border-bottom:3px solid var(--ink);box-shadow:0 5px 9px #2a211826} #card.event-card .ev-badge{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center; background:#f6ecd0 url(assets/paper-grain.svg);border:3px solid var(--ink);box-shadow:0 3px 0 #00000055} #card.event-card .ev-badge img{width:40px;height:40px;object-fit:contain} #card.event-card .ev-badge-full{background:none;border:0;box-shadow:none} #card.event-card .ev-badge-full img{width:62px;height:62px;filter:drop-shadow(0 3px 0 #00000044)} #card.event-card .ev-badge:empty{display:none} #card.event-card .ev-titles{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px} #card.event-card h2.ev-title{margin:0;padding:3px 12px 4px;max-width:100%;width:max-content;rotate:-2deg; background:#f3e6c2 url(assets/paper-grain.svg);border:3px solid var(--ink);border-radius:7px;box-shadow:3px 3px 0 #2a211866; font-family:var(--num);font-weight:900;font-size:21px;line-height:1.15;text-transform:uppercase;letter-spacing:.01em;color:var(--ink)} #card.event-card .ev-sub{font-size:13px;line-height:1.25;color:#4b4132;padding-left:3px} #card.event-card .ev-body{position:relative;flex:1 1 auto;min-height:0;overflow:auto;padding:14px 12px 74px} #card.event-card .ev-body::after{content:'';position:absolute;left:0;right:0;bottom:0;height:84px;z-index:0;pointer-events:none; background:url(assets/bp/bp-city.webp) center bottom/cover no-repeat;opacity:.45} #card.event-card .ev-plate{position:relative;z-index:1;padding:13px 14px;border-radius:12px; background:#e9dcbb url(assets/paper-grain.svg);border:2.5px solid var(--ink);box-shadow:0 3px 0 #00000055} #card.event-card .ev-plate>p{font-size:15.5px;line-height:1.38;color:#3c3325;margin:0 0 8px} #card.event-card .ev-plate>p:last-child{margin-bottom:0} #card.event-card .ev-plate>p.t{font-size:17px;font-weight:600;color:var(--ink)} #card.event-card .ev-plate .row{font-size:15px} #card.event-card .ev-foot{position:relative;z-index:2;flex:none;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px); background:linear-gradient(#efe2c2,#e2d2ab);border-top:3px solid var(--ink)} #card.event-card .ev-foot .mbtns{margin:0} /* крупная награда: монеты и сумма на золотой плашке */ #card.event-card .ev-prize{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px; margin:0 auto 12px;width:max-content;min-width:60%;padding:8px 22px;border-radius:14px; background:linear-gradient(#f0c44e,#d79a26);border:3px solid var(--ink);box-shadow:0 4px 0 #00000055; font-family:var(--num);font-weight:900;font-size:40px;line-height:1;color:var(--ink)} #card.event-card .ev-prize .cash-glyph{width:46px!important;height:44px!important;margin:0!important;vertical-align:0!important} @media (max-width:360px){#card.event-card h2.ev-title{font-size:18px}#card.event-card .ev-badge{width:50px;height:50px}#card.event-card .ev-badge img{width:34px;height:34px}} #card.event-card .ev-titles{flex:1} #card.event-card .ev-help{flex:none;margin-left:auto;align-self:center} /* ===== Поставка в стиле баттлпасса (.pc-card) ===== */ #card.pc-card{--ink:#2a2118;padding:0!important;overflow:hidden;border-radius:18px;display:flex;flex-direction:column; max-height:calc(100dvh - 24px);background:linear-gradient(#a9c3d2 0%,#bcc7c2 55%,#b3a88c 100%)!important} #card.pc-card .pc-head{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:11px;padding:12px 12px 11px 14px; background:linear-gradient(#f2e6c6,#e6d7b0);border-bottom:3px solid var(--ink);box-shadow:0 5px 9px #2a211826} #card.pc-card .ev-badge{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center; background:#f6ecd0 url(assets/paper-grain.svg);border:3px solid var(--ink);box-shadow:0 3px 0 #00000055} #card.pc-card .ev-badge img{width:40px;height:40px;object-fit:contain} #card.pc-card .ev-titles{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px} #card.pc-card h2.ev-title{margin:0;padding:3px 12px 4px;width:max-content;max-width:100%;rotate:-2deg; background:#f3e6c2 url(assets/paper-grain.svg);border:3px solid var(--ink);border-radius:7px;box-shadow:3px 3px 0 #2a211866; font-family:var(--num);font-weight:900;font-size:21px;line-height:1.15;text-transform:uppercase;color:var(--ink)} #card.pc-card .ev-sub{font-size:13px;color:#4b4132;padding-left:3px} #card.pc-card .pc-head .qm{flex:none} #card.pc-card .pc-close{position:static!important;flex:none;width:44px;height:44px;margin:0} #card.pc-card .pc-body{flex:1 1 auto;min-height:0;overflow:auto;padding:12px 11px 14px;display:flex;flex-direction:column;gap:10px} /* сводка: очки крупно, до награды — шкала */ #card.pc-card .pc-sum{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:13px;border:3px solid var(--ink); box-shadow:0 3px 0 #00000055;background:#e9dcbb url(assets/paper-grain.svg)} #card.pc-card .pc-sum.on{background:linear-gradient(#f0c44e,#d79a26)} #card.pc-card .pc-pts{flex:none;display:flex;flex-direction:column;align-items:center;line-height:1} #card.pc-card .pc-pts b{font-family:var(--num);font-weight:900;font-size:40px;color:var(--ink)} #card.pc-card .pc-pts span{font-size:13px;font-weight:700;color:#3c3325;margin-top:2px} #card.pc-card .pc-goal{flex:1;min-width:0} #card.pc-card .pc-goal span{display:block;font-size:14px;font-weight:600;color:#3c3325;margin-bottom:5px} #card.pc-card .pass-meter{height:16px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:#cfc3a4} #card.pc-card .pass-meter i{display:block;height:100%;width:calc(var(--progress,0)*100%);background:linear-gradient(#d0453a,#a62a22)} /* фура */ #card.pc-card .pc-truck{padding:10px 11px;border-radius:13px;border:2.5px solid var(--ink);box-shadow:0 3px 0 #00000055;background:#e9dcbb url(assets/paper-grain.svg)} #card.pc-card .pc-truck-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px} #card.pc-card .pc-truck-head b{font-family:var(--num);font-weight:800;font-size:18px;color:var(--ink)} #card.pc-card .pc-truck-head span{font-size:13px;color:#4b4132} #card.pc-card .pc-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px} #card.pc-card .pc-slot{aspect-ratio:1;border-radius:9px;border:2px dashed #8f7c5a;background:#f6ecd0aa;display:grid;place-items:center} #card.pc-card .pc-slot.f{border:2px solid var(--ink);background:#fbf2dc;box-shadow:0 2px 0 #00000040} #card.pc-card .pc-slot img{width:78%;height:78%;object-fit:contain} #card.pc-card .pc-warn{margin:8px 0 0;font-size:14px;line-height:1.3;color:#8c1f18;font-weight:600} /* товары */ #card.pc-card .pc-list{display:flex;flex-direction:column;gap:7px} #card.pc-card .pc-row,#card.pc-card .pc-extra{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:12px; border:2.5px solid var(--ink);box-shadow:0 3px 0 #00000055;background:#e9dcbb url(assets/paper-grain.svg)} #card.pc-card .pc-row.on{background:#f6e7b6 url(assets/paper-grain.svg);box-shadow:0 3px 0 #00000055,0 0 0 3px #ffd76a} #card.pc-card .pc-gicon,#card.pc-card .pc-extra>img{flex:none;width:42px;height:42px;object-fit:contain} #card.pc-card .pc-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} #card.pc-card .pc-name b{font-size:17px;font-weight:700;line-height:1.15;color:var(--ink)} #card.pc-card .pc-name small{font-size:13.5px;color:#4b4132;line-height:1.2} #card.pc-card .pc-extra.hot .pc-name small{color:#2f6b2a;font-weight:700} #card.pc-card .pc-qty{flex:none;display:flex;align-items:center;gap:6px} #card.pc-card .pc-qty b{min-width:22px;text-align:center;font-family:var(--num);font-weight:900;font-size:22px;color:var(--ink)} #card.pc-card button.pc-step{width:42px;height:42px;padding:0;border-radius:50%;border:2.5px solid var(--ink); background:#f6ecd0 url(assets/paper-grain.svg);box-shadow:0 3px 0 #2a2118;color:var(--ink); font:900 26px/1 var(--num);display:grid;place-items:center} #card.pc-card button.pc-step[data-d="1"]{background:#5c8f47;color:#fff8e6} #card.pc-card button.pc-step:active{translate:0 2px;box-shadow:0 1px 0 #2a2118} #card.pc-card button.pc-step:disabled{opacity:.35;box-shadow:none} #card.pc-card .pc-extra button{flex:none;min-height:44px;padding:4px 14px;font-size:17px} /* подвал */ #card.pc-card .pc-foot{flex:none;display:flex;gap:8px;padding:10px 11px calc(env(safe-area-inset-bottom,0px) + 10px); background:linear-gradient(#efe2c2,#e2d2ab);border-top:3px solid var(--ink)} #card.pc-card .pc-foot button{flex:1;min-height:56px;font-size:17px} #card.pc-card .pc-foot #mSend{flex:1.7;font-size:19px} @media (max-width:360px){#card.pc-card h2.ev-title{font-size:18px}#card.pc-card .ev-badge{width:48px;height:48px}#card.pc-card .ev-badge img{width:32px;height:32px} #card.pc-card .pc-pts b{font-size:34px}#card.pc-card .pc-name b{font-size:15.5px}#card.pc-card button.pc-step{width:38px;height:38px}} /* кнопки событийных окон — без переноса суммы на новую строку */ #card.event-card .ev-foot button{white-space:nowrap} #card.pc-card .pc-slots{grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:5px} #card.pc-card .pc-slot{max-width:58px;width:100%;justify-self:center} #card.pc-card .pc-name small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #card.pc-card .pc-name small em{font-style:normal;font-weight:700;color:#2f6b2a} #card.pc-card .pc-foot button{white-space:nowrap} @media (max-width:360px){ #card.pc-card h2.ev-title{font-size:16px;padding:2px 8px 3px} #card.pc-card .pc-head{gap:8px;padding:10px 9px 9px 10px} #card.pc-card .pc-close{width:38px;height:38px} #card.pc-card .pc-foot button{font-size:15px}#card.pc-card .pc-foot #mSend{font-size:16px} #card.pc-card .pc-extra .pc-name b{font-size:15px} #card.pc-card .pc-gicon,#card.pc-card .pc-extra>img{width:36px;height:36px} } @media (max-width:360px){#card.pc-card .pc-name small{white-space:normal}} /* оценка фуры: звёзды и слово — видно, много очков или мало */ #card.pc-card .pc-goal{display:flex;flex-direction:column;gap:2px} #card.pc-card .pc-stars{display:flex;gap:3px} #card.pc-card .pc-stars i{width:24px;height:24px;background:#2a211833; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)} #card.pc-card .pc-stars i.on{background:#fff4c9;filter:drop-shadow(0 0 0 #2a2118)} #card.pc-card .pc-sum.on .pc-stars i{background:#2a211840} #card.pc-card .pc-sum.on .pc-stars i.on{background:#fff6d6} #card.pc-card .pc-verdict{font-family:var(--num);font-weight:800;font-size:18px;color:var(--ink);line-height:1.1} #card.pc-card .pc-goal small{font-size:13px;color:#3c3325} #card.pc-card .pc-next{padding:0 2px} #card.pc-card .pc-next span{display:block;font-size:14px;font-weight:600;color:#2a2118;margin-bottom:4px} /* ячейки фуры одного размера: заполненная не растёт и не раздвигает ряд */ #card.pc-card .pc-slots{align-items:start} #card.pc-card .pc-slot{position:relative;box-sizing:border-box;width:100%;max-width:58px;aspect-ratio:1;border-width:2px;overflow:hidden} #card.pc-card .pc-slot.f{box-shadow:none} #card.pc-card .pc-slot img{position:absolute;inset:14%;width:72%;height:72%;object-fit:contain} /* выбранный товар в фуре: заметно, как отмеченная клетка настольной игры — золотая заливка, толстое золотое кольцо, приподнята, слева — красная закладка */ #card.pc-card .pc-row.on{position:relative;background:linear-gradient(#f7d97a,#e9b945)!important; box-shadow:0 0 0 4px #ffcf4a,0 0 0 6.5px #2a2118,0 5px 0 6px #00000040;translate:0 -2px} #card.pc-card .pc-row.on::before{content:'';position:absolute;left:-2px;top:10px;bottom:10px;width:7px;border-radius:0 4px 4px 0;background:#c43a2d;border:2px solid #2a2118;border-left:0} #card.pc-card .pc-row.on .pc-name small{color:#3c2f1f} #card.pc-card .pc-row.on .pc-qty b{font-size:26px} /* Настройки длиннее экрана: карточка прокручивается (notice-card ставит overflow:hidden). */ #card.settings-card{overflow-y:auto!important;overscroll-behavior:contain} #card.settings-card .map-row{align-items:center;gap:10px} #card.settings-card .map-row .map-select{flex:none;width:auto;min-width:150px;min-height:44px;padding:0 10px;border:2px solid #25221c;border-radius:9px; background:#3f5f6c;color:#fff1cc;font:700 15px Bitter,Georgia,serif;box-shadow:0 3px 0 #25221c} #card.settings-card .map-row .n{flex:1;min-width:0} #card.settings-card .map-row .map-select{min-width:0;width:62%;max-width:230px} /* ---- battlepass.css ---- */ /* Баттлпасс по референсу ui5: расписной задник, две линии наград, лестница уровней между ними, красный плакат премиума внизу. Детали (клеймо, заголовок, шильды, жетоны, кнопки) вырезаны из battlepass-atlas.webp в assets/bp/. Сами плашки собраны вёрсткой в цветах кита: в атласе они идут слитой колонкой с впечатанными иконками, чистой пустой плашки там нет. */ #card.battlepass-card{ --paper:#ece0c0; --gold-a:#f0c44e; --gold-b:#d79a26; --stone-a:#e9dcbb; --stone-b:#d8c8a0; --ink:#2a2118; --red:#b12f26; padding:0!important; overflow:hidden; border-radius:18px; background:linear-gradient(#8fb3c9 0%, #a8c3d3 38%, #c3cfcb 62%, #b9ae92 100%); } /* ---------- шапка ---------- */ #card.battlepass-card .pass-header{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; padding:11px 12px 9px; background:linear-gradient(#f2e6c6,#e6d7b0); border-bottom:3px solid var(--ink); } #card.battlepass-card .pass-stamp{ width:52px; height:54px; font-size:0; flex:none; align-self:start; background:url(assets/bp/bp-badge.webp) center/contain no-repeat} #card.battlepass-card .pass-header>div:not(.pass-progress){min-width:0} #card.battlepass-card .pass-header h2{ height:44px; margin:0; color:transparent; overflow:hidden; text-indent:-999px; white-space:nowrap; background:url(assets/bp/bp-title.webp) left center/contain no-repeat} #card.battlepass-card .pass-header h2+small{display:none} #card.battlepass-card .xhead{align-self:start} /* строка прогресса на всю ширину под заголовком */ #card.battlepass-card .pass-progress{ grid-column:1/-1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; margin-top:3px} #card.battlepass-card .pass-progress>b{ font-family:var(--num); font-weight:800; font-size:17px; color:var(--ink); background:#f6ecd0; border:2px solid var(--ink); border-radius:999px; padding:3px 11px} #card.battlepass-card .pass-progress>div{min-width:0} #card.battlepass-card .pass-progress span{ display:block; font-size:12.5px; color:#4b4132; margin-bottom:3px; text-align:right} #card.battlepass-card .pass-meter{ height:17px; border:2px solid var(--ink); border-radius:999px; overflow:hidden; background:#cfc3a4; box-shadow:inset 0 2px 0 #00000022} #card.battlepass-card .pass-meter i{ display:block; height:100%; width:calc(var(--progress,0) * 100%); background:linear-gradient(#d0453a,#a62a22); border-right:2px solid #7d1d17} #card.battlepass-card .pass-progress>small{ font-size:11px; line-height:1.15; text-align:center; color:#4b4132; background:#f6ecd0; border:2px solid var(--ink); border-radius:9px; padding:3px 7px} #card.battlepass-card .pass-progress>small b{font-family:var(--num); font-size:13px; color:var(--ink)} /* ---------- полоса-баннер вместо прежней сцены ---------- */ #card.battlepass-card .pass-scene{ position:relative; min-height:58px; padding:8px 10px; display:flex; align-items:center; gap:10px; background:linear-gradient(#7ba7c2,#93b6c9); border-bottom:3px solid var(--ink)} #card.battlepass-card .pass-scene svg{display:none} #card.battlepass-card .pass-scene>span{ flex:1; min-width:0; font-size:0; height:46px; background:url(assets/bp/bp-banner.webp) left center/contain no-repeat} #card.battlepass-card .pass-hero{ width:64px; height:60px; flex:none; background:url(assets/bp/bp-sun.webp) center/contain no-repeat} #card.battlepass-card .pass-hero svg{display:none} /* ---------- заголовки колонок ---------- */ #card.battlepass-card .pass-lanes{ display:grid; grid-template-columns:1fr 46px 1fr; gap:6px; align-items:end; padding:10px 9px 6px} #card.battlepass-card .pass-lanes b{font-size:0; height:40px} #card.battlepass-card .pass-lanes b:first-child{ background:url(assets/bp/bp-head-free.webp) center/contain no-repeat} #card.battlepass-card .pass-lanes b:last-child{ background:url(assets/bp/bp-head-prem.webp) center/contain no-repeat} #card.battlepass-card .pass-lanes b svg{display:none} /* ---------- лестница ---------- */ #card.battlepass-card .pass-scroll{ overflow:auto; -webkit-overflow-scrolling:touch; background:linear-gradient(#a9c3d2 0%, #bcc7c2 55%, #b3a88c 100%)} #card.battlepass-card .pass-stairs{position:relative; padding:0 9px 12px} /* нижняя панорама города из кита */ #card.battlepass-card .pass-stairs::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:92px; z-index:0; background:url(assets/bp/bp-city.webp) center bottom/cover no-repeat; opacity:.5} #card.battlepass-card .pass-side{display:none} #card.battlepass-card .pass-rung{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 46px 1fr; gap:6px; align-items:center; margin-bottom:7px} /* вертикальная тетива лестницы позади жетонов */ #card.battlepass-card .pass-stairs::before{ content:''; position:absolute; z-index:0; top:4px; bottom:96px; left:50%; width:30px; translate:-50% 0; background:linear-gradient(90deg,#6b4f31 0 6px,#8a6a45 6px calc(100% - 6px),#6b4f31 calc(100% - 6px) 100%); border:2px solid #402d1b; border-radius:4px} #card.battlepass-card .pass-level{ position:relative; z-index:2; width:46px; height:46px; display:grid; place-items:center; font-family:var(--num); font-weight:800; font-size:18px; color:#2c2318; background:url(assets/bp/bp-token.webp) center/contain no-repeat} #card.battlepass-card .pass-level.next{ filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 6px #ffd76a)} /* ---------- плашки наград ---------- */ /* Базовые стили кнопок игры задают свой фон (серый у заблокированной, красный у премиума) с весом выше нашего, поэтому фон задаётся явно. Смешивание слоёв отключено: с multiply золото перемножалось с красным и давало тёмно-бордовый. */ #card.battlepass-card .pass-reward{ display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:54px; padding:5px 7px 5px 9px; border-radius:10px; border:2.5px solid var(--ink); box-shadow:0 3px 0 #00000055; background-blend-mode:normal!important} #card.battlepass-card .pass-reward.free{ background:var(--stone-a) url(assets/paper-grain.svg)!important} #card.battlepass-card .pass-reward.premium{ background:linear-gradient(var(--gold-a),var(--gold-b))!important} #card.battlepass-card .pass-reward.locked{filter:saturate(.85) brightness(.97)} #card.battlepass-card .pass-reward.claimed{opacity:.72} #card.battlepass-card .pass-reward.available{ box-shadow:0 3px 0 #00000055, 0 0 0 3px #ffd76a} #card.battlepass-card .pass-loot{display:flex; align-items:center; gap:4px; min-width:0} #card.battlepass-card .pass-loot span{display:flex; align-items:center; gap:3px} #card.battlepass-card .pass-loot svg{width:30px; height:30px; flex:none} #card.battlepass-card .pass-loot b{ font-family:var(--num); font-weight:800; font-size:17px; color:#2b2318} #card.battlepass-card .pass-state{ flex:none; display:grid; place-items:center; min-width:40px; font-size:11px; font-weight:600; color:#3c3325; text-align:center} #card.battlepass-card .pass-state svg{width:0;height:0} #card.battlepass-card .claimed .pass-state{ width:32px; height:32px; font-size:0; background:url(assets/bp/bp-check.webp) center/contain no-repeat} #card.battlepass-card .locked .pass-state{ width:32px; height:32px; font-size:0; background:url(assets/bp/bp-lock.webp) center/contain no-repeat} #card.battlepass-card .available .pass-state{ font-size:0; width:64px; height:30px; background:url(assets/bp/bp-ribbon-ok.webp) center/contain no-repeat} /* ---------- подвал ---------- */ #card.battlepass-card .pass-tasks{ position:relative; z-index:1; margin:6px 9px 10px; background:#efe2c2; border:2px solid #7b6543; border-radius:10px; padding:0 10px} #card.battlepass-card .pass-footer{ padding:9px 10px calc(env(safe-area-inset-bottom,0px) + 9px); background:linear-gradient(#efe2c2,#e2d2ab); border-top:3px solid var(--ink)} #card.battlepass-card .pass-feedback{font-size:12.5px; color:#4b4132; text-align:center; margin-bottom:7px} #card.battlepass-card #bpBuy{ width:100%; min-height:58px; font-size:0; border:0!important; box-shadow:none!important; background:url(assets/bp/bp-btn-buy.webp) center/contain no-repeat!important} #card.battlepass-card #bpBuy svg,#card.battlepass-card #bpBuy b{display:none} #card.battlepass-card #bpBuy .enamel-skin,#card.battlepass-card #bpBuy::before{display:none!important} #card.battlepass-card .pass-owned{ display:flex; align-items:center; justify-content:center; gap:7px; font-size:13px; color:#3c3325} #card.battlepass-card .pass-owned svg{width:24px;height:24px} /* На 6 и 12 уровнях наград три, в одну строку они не помещаются: позволяем переносить и ужимаем значки. */ #card.battlepass-card .pass-loot{flex:1; min-width:0; flex-wrap:wrap; row-gap:0; column-gap:3px} #card.battlepass-card .pass-loot svg{width:26px; height:26px} #card.battlepass-card .pass-loot b{font-size:15px} #card.battlepass-card .pass-reward{overflow:hidden} /* Карточка выше экрана: шапка и подвал закреплены, прокручивается только список ступеней. Иначе кнопка премиума и вкладки уезжают за нижний край. */ #card.battlepass-card{display:flex; flex-direction:column; max-height:calc(100dvh - 24px)!important} #card.battlepass-card .pass-header, #card.battlepass-card .pass-scene, #card.battlepass-card .pass-footer{flex:0 0 auto} #card.battlepass-card .pass-scroll{flex:1 1 auto; min-height:0} /* На 320 px колонка награды сужается до 41 px и содержимое режется. Ужимаем значки, числа и центральную лестницу, освобождая место. */ @media (max-width:360px){ #card.battlepass-card .pass-lanes, #card.battlepass-card .pass-rung{grid-template-columns:1fr 38px 1fr; gap:4px} #card.battlepass-card .pass-level{width:38px; height:38px; font-size:15px} #card.battlepass-card .pass-stairs::before{width:24px} #card.battlepass-card .pass-reward{padding:4px 5px 4px 6px; min-height:50px; gap:4px} #card.battlepass-card .pass-loot svg{width:22px; height:22px} #card.battlepass-card .pass-loot b{font-size:13px} #card.battlepass-card .claimed .pass-state, #card.battlepass-card .locked .pass-state{width:26px; height:26px} #card.battlepass-card .pass-state{min-width:26px; font-size:10px} #card.battlepass-card .available .pass-state{width:52px; height:24px} #card.battlepass-card .pass-stairs{padding:0 5px 12px} } /* Синяя полоса с баннером и солнцем убрана целиком: она отъедала высоту и разрывала связь шапки со списком ступеней. */ #card.battlepass-card .pass-scene{display:none!important} /* Список уходит под шапку и подвал не обрывом, а растворением. Маска съедает верхние и нижние пиксели содержимого, поэтому ступени проявляются постепенно. */ #card.battlepass-card .pass-scroll{ -webkit-mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 10px, #000 30px, #000 calc(100% - 22px), rgba(0,0,0,.4) calc(100% - 8px), transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 10px, #000 30px, #000 calc(100% - 22px), rgba(0,0,0,.4) calc(100% - 8px), transparent 100%)} /* Тень под шапкой усиливает ощущение, что список уходит под неё. */ #card.battlepass-card .pass-header{box-shadow:0 5px 9px #2a211826; position:relative; z-index:2} /* ===== «Билет» и «Топ» в стиле пропуска ===== Каркас общий с баттлпассом (шапка, прогресс, небо, подвал). Своё здесь: текстовая шильда заголовка и плашки-ступени списка. */ #card.battlepass-card .pass-header h2.hub-title{ height:auto; width:max-content; max-width:100%; color:var(--ink); text-indent:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:#f3e6c2 url(assets/paper-grain.svg); border:3px solid var(--ink); border-radius:7px; box-shadow:3px 3px 0 #2a211866; padding:3px 12px 4px; rotate:-2deg; font-family:var(--num); font-weight:900; font-size:23px; line-height:1.15; text-transform:uppercase; letter-spacing:.01em} #card.hub-card .pass-progress>b{min-width:52px; text-align:center} #card.hub-card .pass-progress span{font-size:14px; font-weight:600; color:#3c3325} #card.hub-card .hub-scroll{position:relative} #card.hub-card .hub-list{position:relative; padding:16px 10px 96px} #card.hub-card .hub-list::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:92px; z-index:0; pointer-events:none; background:url(assets/bp/bp-city.webp) center bottom/cover no-repeat; opacity:.5} #card.hub-card .hub-plate{ position:relative; z-index:1; display:flex; align-items:center; gap:10px; min-height:62px; margin-bottom:9px; padding:7px 10px 7px 8px; border-radius:11px; border:2.5px solid var(--ink); box-shadow:0 3px 0 #00000055; background:var(--stone-a) url(assets/paper-grain.svg)} #card.hub-card .hub-plate .pass-level{flex:none} #card.hub-card .hub-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px} #card.hub-card .hub-text b{font-family:var(--txt); font-weight:700; font-size:17px; line-height:1.18; color:var(--ink)} #card.hub-card .hub-text small{font-size:13.5px; line-height:1.25; color:#4b4132} #card.hub-card .hub-plate .pass-loot{flex:none; min-width:0} #card.hub-card .hub-plate .pass-loot b{font-size:18px} #card.hub-card .hub-plate .pass-loot svg{width:28px; height:28px} /* состояния — как у наград пропуска */ #card.hub-card .hub-plate.available{box-shadow:0 3px 0 #00000055, 0 0 0 3px #ffd76a} #card.hub-card .hub-plate.claimed{opacity:.75} #card.hub-card .hub-plate .pass-state{flex:none; width:32px; height:32px; font-size:0} #card.hub-card .hub-plate.claimed .pass-state{background:url(assets/bp/bp-check.webp) center/contain no-repeat} #card.hub-card .hub-plate.locked .pass-state{background:url(assets/bp/bp-lock.webp) center/contain no-repeat} #card.hub-card .hub-goal.available .pass-state{display:none} /* рубежи билета: жетон шире — в нём до четырёх цифр */ #card.hub-card .hub-goal .pass-level{width:58px; height:58px; font-size:17px} #card.hub-card .hub-goal.available{background:linear-gradient(var(--gold-a),var(--gold-b))} #card.hub-card .hub-sub{ position:relative; z-index:1; margin:16px 2px 8px; font-family:var(--num); font-weight:800; font-size:18px; color:var(--ink); text-transform:uppercase; letter-spacing:.02em} #card.hub-card .hub-prog{flex:none; font-family:var(--num); font-weight:800; font-size:17px; color:#3c3325; background:#f6ecd0; border:2px solid var(--ink); border-radius:999px; padding:2px 10px} #card.hub-card .hub-claim{flex:none; min-height:40px; padding:4px 12px; font-size:15px} #card.hub-card #hZone{flex:none; display:flex; align-items:center; gap:4px; min-height:42px; padding:4px 12px} #card.hub-card #hZone svg{width:24px; height:24px} #card.hub-card #hZone b{font-family:var(--num); font-size:18px} /* рейтинг: призовые места золото, серебро, бронза; своя строка подсвечена */ #card.hub-card .hub-rank .pass-level{width:44px; height:44px; font-size:18px} #card.hub-card .hub-ava{flex:none; width:42px; height:42px; display:grid; place-items:center; font-size:24px; border-radius:50%; background:#f6ecd0; border:2px solid var(--ink)} #card.hub-card .hub-rank.top1{background:linear-gradient(var(--gold-a),var(--gold-b))} #card.hub-card .hub-rank.top2{background:linear-gradient(#e3e6e4,#b9c0c0)} #card.hub-card .hub-rank.top3{background:linear-gradient(#e7b98a,#c1834f)} #card.hub-card .hub-rank.me{box-shadow:0 3px 0 #00000055, 0 0 0 3px #ffd76a; outline:0} #card.hub-card .hub-rank.me .hub-text b{color:#8c1f18} @media (max-width:360px){ #card.battlepass-card .pass-header h2.hub-title{font-size:19px; padding:2px 9px 3px} #card.hub-card .hub-plate{gap:7px; padding:6px 8px 6px 6px} #card.hub-card .hub-text b{font-size:15.5px} #card.hub-card .hub-text small{font-size:12.5px} #card.hub-card .hub-goal .pass-level{width:50px; height:50px; font-size:15px} #card.hub-card .hub-ava{width:36px; height:36px; font-size:20px} } /* крестик в шапке стоит поверх сетки — шильде оставляем под него место */ #card.hub-card .hub-head>div:not(.pass-progress){padding-right:50px} #card.battlepass-card .pass-header h2.hub-title{font-size:21px} @media (max-width:360px){ #card.battlepass-card .pass-header h2.hub-title{font-size:16px; padding:2px 7px 3px; letter-spacing:0} #card.hub-card .hub-head>div:not(.pass-progress){padding-right:38px} #card.hub-card .hub-goal .pass-level{font-size:13.5px} } /* ===== Окно премиума (навык game-ui-designer) ===== */ .pass-offer{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:14px;background:rgba(24,18,12,.55)} .pass-offer-paper{position:relative;width:100%;max-width:360px;box-sizing:border-box;padding:0 16px 14px;text-align:center; border:3px solid #2a2118;border-radius:18px;background:#f2e6c6 url(assets/paper-grain.svg);box-shadow:0 5px 0 #2a2118,0 14px 30px #0006} .po-hero{position:relative;height:118px;margin:0 -16px 4px;border-radius:15px 15px 0 0;overflow:hidden; background:linear-gradient(#b1332a,#8f241e);border-bottom:3px solid #2a2118;display:grid;place-items:center} .po-sun{position:absolute;width:250px;opacity:.55;animation:poSpin 18s linear infinite} .po-crown{position:relative;width:86px;height:86px;filter:drop-shadow(0 4px 0 #2a2118aa);animation:poBob 2.2s ease-in-out infinite} .po-crown svg{width:100%;height:100%} @keyframes poSpin{to{rotate:360deg}} @keyframes poBob{50%{translate:0 -5px;rotate:-3deg}} .po-title{margin:10px auto 0;width:max-content;padding:3px 16px 4px;rotate:-2deg;background:#f3e6c2 url(assets/paper-grain.svg); border:3px solid #2a2118;border-radius:7px;box-shadow:3px 3px 0 #2a211866;font-family:var(--num);font-weight:900;font-size:26px;text-transform:uppercase;color:#2a2118} .po-sub{margin:7px 0 12px;font-size:15px;color:#4b4132} .po-list{display:flex;flex-direction:column;gap:7px;text-align:left} .po-row{display:flex;align-items:center;gap:11px;padding:8px 10px;border:2.5px solid #2a2118;border-radius:11px; background:linear-gradient(#f0c44e,#d79a26);box-shadow:0 3px 0 #00000055} .po-ic{flex:none;width:38px;height:38px;display:grid;place-items:center} .po-ic svg,.po-ic img{width:36px;height:36px;object-fit:contain} .po-t{display:flex;flex-direction:column;min-width:0} .po-t b{font-family:var(--num);font-weight:800;font-size:18px;color:#2a2118;line-height:1.1} .po-t small{font-size:13px;color:#3c3325} .po-now{margin:11px 0 0;font-size:15px;font-weight:700;color:#2f6b2a} #card .pass-offer-paper #passConfirm{width:100%;min-height:58px;margin:12px 0 0;font-size:20px} #card .pass-offer-paper .po-later{display:block;margin:8px auto 0;padding:6px 12px;min-height:40px;border:0;background:none;box-shadow:none; font:600 15px var(--txt);color:#5b4c35;text-decoration:underline;text-underline-offset:3px} .po-note{display:block;margin-top:2px;font-size:12px;color:#7a6a50} /* ===== Сцена покупки ===== */ .prem-stage{position:fixed;inset:0;z-index:90;pointer-events:none;background:rgba(24,18,12,.62)} .prem-confetti{position:absolute;inset:0;width:100%;height:100%} .prem-rays,.prem-crown{position:absolute;left:50%;top:42%;translate:-50% -50%} .prem-rays{opacity:0} .prem-crown{filter:drop-shadow(0 6px 0 #2a2118aa)} .prem-crown svg{width:100%;height:100%} .prem-plate{position:absolute;left:50%;top:calc(42% + min(23vw,110px) + 26px);opacity:0;padding:8px 22px 10px;text-align:center;white-space:nowrap; background:#f3e6c2 url(assets/paper-grain.svg);border:3px solid #2a2118;border-radius:9px;box-shadow:4px 4px 0 #2a2118aa} .prem-plate b{display:block;font-family:var(--num);font-weight:900;font-size:28px;text-transform:uppercase;color:#b1332a} .prem-plate small{display:block;margin-top:2px;font-size:15px;font-weight:700;color:#2f6b2a} .prem-stage.reduced .prem-crown{width:160px;height:160px;opacity:1} .prem-stage.reduced .prem-plate{opacity:1;transform:translate(-50%,0)} @media (prefers-reduced-motion:reduce){.po-sun,.po-crown{animation:none}} /* лучи — рисованный веер вместо картинки солнца */ .po-sun,.prem-rays{display:block;aspect-ratio:1;border-radius:50%; background:repeating-conic-gradient(#ffd76a 0 9deg,transparent 9deg 22.5deg); -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)} .po-sun{width:320px;opacity:.5} .prem-rays{background:repeating-conic-gradient(#ffe08a 0 8deg,#ffe08a00 8deg 20deg)} #card .pass-offer-paper h2.po-title{display:table;margin:10px auto 0} #card .pass-offer-paper button.po-later{border:0!important;background:none!important;box-shadow:none!important} /* своя строка в топе: золото, толстое кольцо и закладка «ТЫ» */ #card.hub-card .hub-rank.me{position:relative;background:linear-gradient(#f7d97a,#e9b945)!important; box-shadow:0 0 0 4px #ffcf4a,0 0 0 6.5px #2a2118,0 5px 0 6px #00000040!important;translate:0 -2px;margin:12px 0 14px} #card.hub-card .hub-rank.me::after{content:'ТЫ';position:absolute;right:-6px;top:-11px;padding:2px 8px 3px;rotate:6deg;border:2.5px solid #2a2118;border-radius:6px; background:#c43a2d;color:#fff6de;font:900 13px/1 var(--num);letter-spacing:.06em;box-shadow:2px 2px 0 #2a211899} #card.hub-card .hub-rank.me .hub-text b{color:#2a2118} #card.hub-card .hub-rank.me .hub-ava{background:#fff3cf} /* своя строка не путается с золотым 1-м местом: светлая заливка, красное кольцо */ #card.hub-card .hub-rank.me{background:#fff0c2 url(assets/paper-grain.svg)!important;box-shadow:0 0 0 4px #c43a2d,0 0 0 6.5px #2a2118,0 5px 0 6px #00000040!important} #card.hub-card .hub-rank.me .hub-text b{color:#8c1f18} /* ===== окно «Сегодня» ===== */ #card.today-card .td-stamp{background:#f6ecd0 url(assets/icons/clock.webp) center/70% no-repeat;border:3px solid #2a2118;border-radius:50%;width:50px;height:50px} #card.today-card .td-scroll{overscroll-behavior:contain} #card.today-card .td-list{padding:14px 10px 18px} #card.today-card .td-list::after{display:none} #card.today-card .td-now{min-height:58px} #card.today-card .td-now.hot{background:linear-gradient(#f7d97a,#e9b945)} #card.today-card .td-now.bad{background:#f3d4c8 url(assets/paper-grain.svg)} #card.today-card .td-ic{flex:none;width:40px;height:40px;display:grid;place-items:center;font-size:28px} #card.today-card .td-ic img{width:38px;height:38px;object-fit:contain} #card.today-card .td-week{position:relative;display:flex;flex-direction:column;gap:6px} #card.today-card .td-week::before{content:'';position:absolute;left:21px;top:10px;bottom:10px;width:6px;border-radius:3px;background:#6b4f31;border:2px solid #402d1b} #card.today-card .td-day{position:relative;display:flex;align-items:center;gap:10px;min-height:50px;padding:6px 10px 6px 0;border-radius:11px} #card.today-card .td-num{flex:none;width:46px;height:46px;font-size:18px;z-index:1} #card.today-card .td-tags{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:5px} #card.today-card .td-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border:2px solid #2a2118;border-radius:999px;background:#f2e6c6 url(assets/paper-grain.svg); font:700 13.5px/1.15 var(--txt);color:#2a2118;box-shadow:0 2px 0 #00000040} #card.today-card .td-tag i{font-style:normal;font-size:15px} #card.today-card .td-tag.none{background:none;border-style:dashed;box-shadow:none;color:#5b4c35;font-weight:600} #card.today-card .td-day.past{opacity:.55} #card.today-card .td-day.past .td-tag{box-shadow:none} #card.today-card .td-check{flex:none;width:28px;height:28px;background:url(assets/bp/bp-check.webp) center/contain no-repeat} #card.today-card .td-day.today{background:#fff0c2 url(assets/paper-grain.svg);box-shadow:0 0 0 3px #c43a2d,0 0 0 5px #2a2118;margin:6px 0} #card.today-card .td-day.today .td-num{filter:drop-shadow(0 0 5px #ffcf4a)} #card.today-card .td-now-mark{flex:none;padding:3px 7px 4px;rotate:5deg;border:2px solid #2a2118;border-radius:6px;background:#c43a2d;color:#fff6de;font:900 12px/1 var(--num);text-transform:uppercase} #card.today-card .td-foot .segbar{display:none} #card.today-card #tdOk{width:100%;min-height:56px;font-size:19px} #card.today-card .td-now-mark{position:absolute;right:-5px;top:-10px} #card.today-card .td-day.today{padding-right:8px} .po-crown>img{width:100%;height:100%;object-fit:contain} /* ---- warehouse.css ---- */ #card.warehouse-card{padding:0;overflow:hidden;max-width:450px;max-height:calc(100dvh - 46px)!important;border:2px solid #2e271d;border-radius:17px 12px 19px 13px;background:#efdbaf url(assets/window-paper.webp)!important} .warehouse-shell{display:flex;flex-direction:column;max-height:calc(100dvh - 50px);min-height:0} .warehouse-head{padding:9px 10px 10px;flex:none;border-bottom:2px solid #97743e} .costco-sign{width:100%;aspect-ratio:781/267;overflow:hidden;filter:drop-shadow(0 2px 0 #342719)} .warehouse-heading{display:flex;gap:5px;align-items:center;padding:10px 4px 0} #card .warehouse-heading h2{font-size:20px;line-height:1.17;margin:0;flex:1;letter-spacing:0} #card .warehouse-help .qm{width:33px;height:33px;min-height:33px;padding:0;border-radius:50%;border:2px solid #332b1f;background:#e6cc94;color:#2e271d;box-shadow:none;font-size:20px;line-height:29px} #card .warehouse-head p{font-size:12px;line-height:1.35;color:#58482e;margin:6px 4px 0} .warehouse-list{overflow:auto;min-height:0;flex:1;padding:9px 10px 11px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9b8153 #e8d6ae} #card .warehouse-list .wr{display:grid;grid-template-columns:45px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:3px 7px;min-height:79px;padding:9px 7px;margin:0 0 8px;border:1.5px solid #3d3020;box-shadow:0 2px #9a8051,inset 0 0 0 2px #fff4d075;border-radius:12px 8px 11px 9px;background:#f3dfb35e} #card .warehouse-list .wr:last-child{margin-bottom:0} #card .warehouse-list .wr.trend{background:#f4bf4655;outline:2px solid #d4a546;outline-offset:-4px} .warehouse-list .ring{position:relative;grid-row:1/3;width:45px;height:45px;align-self:center;border-radius:50%;background:conic-gradient(#377148 0 var(--p),#a99e7c77 var(--p) 100%);padding:5px;box-shadow:0 1px #faf0cf} .warehouse-list .ring i{display:flex;align-items:center;justify-content:center;border-radius:50%;width:100%;height:100%;background:#f2dfb7;font-style:normal;font-size:27px} .warehouse-list .ring .atlas-art{width:36px;height:36px;flex:none;overflow:visible} #card .warehouse-list .wn{grid-column:2;grid-row:1;align-self:end;font-size:16px;line-height:1.15;font-weight:800;min-width:0;overflow-wrap:anywhere} #card .warehouse-list .wn small{display:block;font-weight:400;font-size:10px;line-height:1.35;color:#594931;margin-top:4px} #card .warehouse-list .wq{grid-column:2;grid-row:2;font-weight:700;font-size:12px;color:#493e2a;align-self:start} #card .warehouse-list button.enamel-button{grid-column:3;grid-row:1/3;align-self:center;width:89px;min-width:0;height:47px;min-height:44px;margin:0;padding:6px 4px;font-size:14px;border-radius:10px;white-space:nowrap} #card.warehouse-card .painted-close{top:3px;right:2px;width:45px;height:45px;min-height:45px;z-index:6} .warehouse-footer{flex:none;padding:0 11px 11px;border-top:1px solid #ac905c;background:#efdbaf url(assets/window-paper.webp);box-shadow:0 -4px 8px #45341e15} .warehouse-johnny{height:70px;position:relative;display:flex;align-items:center;gap:8px} .warehouse-portrait{align-self:end;width:79px;height:65px;flex:none;filter:drop-shadow(0 1px #332b1b)} .warehouse-bubble{position:relative;flex:1;font-size:13px;line-height:1.25;background:#efd5a1;border:1.5px solid #44311e;border-radius:17px 13px 17px 9px;padding:7px 9px;transform:rotate(-2deg)} .warehouse-bubble small{display:block;font-size:9px;color:#655032;margin-top:3px} .warehouse-wallet{font-size:9px;line-height:1.35;color:#5d4c32;text-align:right;white-space:nowrap}.warehouse-wallet b{display:block;font-size:17px;color:#30291d} #card button.warehouse-bulk{display:flex;align-items:center;gap:8px;justify-content:center;width:100%;min-height:56px;padding:8px 10px;font-size:15px;line-height:1.15;text-align:left;border-radius:12px} #card button.warehouse-bulk>span:not(.enamel-skin):not(.warehouse-money){flex:1;font-weight:800} .warehouse-money{width:34px;height:34px;flex:none;display:block} #card button.warehouse-bulk>b{padding-left:10px;border-left:1px solid #f2d39a70;font-size:22px;white-space:nowrap} .warehouse-buy-note{display:block;font-size:10px;line-height:1.3;margin-top:7px;color:#665235;text-align:center} .warehouse-empty{padding:22px 10px;text-align:center}.warehouse-empty b{font-size:18px}.warehouse-footer>.sec{width:100%} .stock-added .ring,.stock-added .wq{animation:warehouse-stock .28s ease-out} @keyframes warehouse-stock{40%{transform:scale(1.13);filter:brightness(1.2)}to{transform:none;filter:none}} @media(min-width:410px){#card .warehouse-list .wr{grid-template-columns:49px minmax(0,1fr) 49px 94px;grid-template-rows:1fr;gap:6px;padding:10px 8px}#card .warehouse-list .ring{grid-row:1}#card .warehouse-list .wn{grid-row:1;align-self:center}#card .warehouse-list .wq{grid-row:1;grid-column:3;align-self:center;text-align:center;font-size:15px}#card .warehouse-list button.enamel-button{grid-row:1;grid-column:4;width:94px}} @media(max-width:350px){.warehouse-head{padding:7px 8px}.warehouse-heading{padding-top:7px}#card .warehouse-heading h2{font-size:18px}#card .warehouse-head p{font-size:11px}.warehouse-list{padding:8px}#card .warehouse-list .wr{grid-template-columns:38px minmax(0,1fr) 77px;gap:3px 5px;padding:8px 6px;min-height:75px}.warehouse-list .ring{width:38px;height:38px;padding:4px}.warehouse-list .ring .atlas-art{width:30px;height:30px}#card .warehouse-list .wn{font-size:14px}#card .warehouse-list button.enamel-button{width:77px;font-size:12px}.warehouse-johnny{height:61px;gap:5px}.warehouse-portrait{width:63px;height:54px}.warehouse-bubble{font-size:11px;padding:6px}.warehouse-wallet b{font-size:15px}#card button.warehouse-bulk{font-size:13px;min-height:50px}#card button.warehouse-bulk>b{font-size:19px}.warehouse-money{width:27px}} @media(max-height:670px){.costco-sign{max-height:91px;aspect-ratio:auto}.warehouse-heading{padding-top:6px}.warehouse-johnny{height:57px}.warehouse-portrait{height:53px;width:67px}.warehouse-buy-note{font-size:9px}.warehouse-footer{padding-bottom:8px}} @media(prefers-reduced-motion:reduce){.stock-added .ring,.stock-added .wq{animation:none}} /* SVG atlas viewports must clip the source sheet, including inside progress rings. */ .warehouse-list .ring .atlas-art{overflow:hidden} .costco-sign .atlas-art{clip-path:polygon(0 0,100% 0,100% 90%,85% 94%,0 100%)} /* Две закупки рядом: на все наличные и на половину. */ .warehouse-half{margin-left:8px} /* Две закупки в одну строку, обе зелёные, цена справа. */ .warehouse-buys{display:flex;gap:8px;align-items:stretch} .warehouse-buys .warehouse-half{margin-left:0} #card .warehouse-buys button.warehouse-bulk{flex:1 1 0;min-width:0;width:auto;min-height:58px; padding:8px 10px;gap:6px} #card .warehouse-buys button.warehouse-bulk>span:not(.enamel-skin){font-size:14px;line-height:1.15; font-weight:700;white-space:normal} #card .warehouse-buys button.warehouse-bulk>b{padding-left:8px;font-size:19px} /* Подпись над ценой: в строку двух кнопок «Закупить на половину» рядом с ценой рвалась на три строки. */ #card .warehouse-buys button.warehouse-bulk{flex-direction:column;gap:2px;text-align:center;padding:7px 8px;min-height:62px} #card .warehouse-buys button.warehouse-bulk>span:not(.enamel-skin){flex:none;font-size:13px;line-height:1.1;white-space:nowrap} #card .warehouse-buys button.warehouse-bulk>b{padding-left:0;border-left:0;font-size:21px;line-height:1} @media(max-width:350px){#card .warehouse-buys button.warehouse-bulk>span:not(.enamel-skin){font-size:12px}} /* ===== v61: склад по навыку game-ui-designer ===== Список уходит под шапку и подвал растворением, а не упирается в рамку; у строк воздух сверху и снизу; подписи не мельче 12 px; сноски убраны. */ .warehouse-list{padding:14px 11px 16px; -webkit-mask-image:linear-gradient(transparent 0,#000 14px,#000 calc(100% - 16px),transparent 100%); mask-image:linear-gradient(transparent 0,#000 14px,#000 calc(100% - 16px),transparent 100%)} #card .warehouse-list .wr{margin:0 0 9px;padding:10px 9px} #card .warehouse-list .wn small{font-size:12.5px;margin-top:3px} #card .warehouse-list .wq{font-size:13.5px} #card .warehouse-head p,.warehouse-buy-note{display:none} .warehouse-head{padding-bottom:9px} .warehouse-footer{padding-top:2px} /* широкий экран: колонка остатка не налезает на кнопку */ @media(min-width:410px){#card .warehouse-list .wr{grid-template-columns:49px minmax(0,1fr) auto 96px;gap:6px 10px} #card .warehouse-list .wq{grid-column:3;text-align:right;white-space:nowrap;min-width:0}} @media(max-width:360px){ #card .warehouse-heading h2{font-size:17px} #card .warehouse-buys button.warehouse-bulk{padding:6px 5px} #card .warehouse-buys button.warehouse-bulk>span:not(.enamel-skin){font-size:11.5px} #card .warehouse-list .wn small{font-size:12px}} .wh-verb{font-style:normal} #card .warehouse-list .wn small{overflow:hidden;text-overflow:ellipsis} @media(max-width:360px){.wh-verb{display:none}#card .warehouse-buys button.warehouse-bulk>span:not(.enamel-skin){font-size:13px}} .wh-short{display:none;font-style:normal} @media(max-width:360px){.wh-short{display:inline}} /* m8-warehouse: проверка на точке — в строке товара; чего не хватило после «Пополнить всё» — под кнопками. */ #card .warehouse-insp{grid-column:1/-1;display:block;margin-top:2px;font:700 12px/1.25 Bitter,Georgia,serif;color:#8a2a1f} #modal #card .warehouse-footer .warehouse-buy-note.warn{color:#8a2a1f;font-weight:700} /* ---- card-motion.css ---- */ /* A single motion owner; no inherited slide, scale or fade fighting the paper. */ #modal,#modal:not([hidden]):not(.closing) #card,#modal.closing #card, #helpDialog,#tip,#toast,#guide,#tilebar,#invList{animation:none;transition:none} #modal.closing{opacity:1;pointer-events:none;transition:none;background:transparent;backdrop-filter:none} #modal.closing #card{opacity:1;transform:none} #card,#helpDialog,.pass-offer-paper{transform-origin:50% 68%;backface-visibility:hidden} #tip,#toast{transform-origin:50% 25%;backface-visibility:hidden} [data-paper-moving]{will-change:transform,opacity} #card .pass-hero{animation:none} #card .pass-meter i{animation-duration:.24s} /* HUD labels stay interactive; reveal/hide does not make the map wait. */ @supports (transition-behavior:allow-discrete){ #guide,#tilebar,#invList{ transition:opacity 130ms ease-out,translate 180ms cubic-bezier(.16,.78,.24,1), rotate 180ms ease-out,display 180ms allow-discrete; opacity:1;translate:0 0;rotate:0deg; } #guide[hidden],#tilebar[hidden],#invList[hidden],#guide[style*="display: none"],#tilebar[style*="display: none"]{ opacity:0;translate:0 14px;rotate:1deg; } @starting-style{#guide,#tilebar,#invList{opacity:0;translate:0 18px;rotate:-1.2deg}} } @media(prefers-reduced-motion:reduce){ #guide,#tilebar,#invList{transition:none;translate:none;rotate:none} } /* ---- shop.css ---- */ /* ===== Магазин карточками (shop.js) ===== Каркас окна — событийный (ev-head / ev-body / ev-foot), внутри — сетка 2 в ряд. Карточка — отпечатанный ценник: бумага, неровный чернильный контур, рисованный набор на бумаге, цена эмалевой кнопкой. */ #card.shop-card{max-width:430px} #card.shop-card .ev-body{padding:12px 12px 70px} #card.shop-card .shop-wallet{display:flex;align-items:center;gap:4px;font-size:13px} #card.shop-card .shop-wallet b{font-family:var(--num);font-weight:800;font-size:16px;color:var(--ink)} .shop-gem{width:1.25em;height:1.1em;object-fit:contain;vertical-align:-.2em;flex:none} #card .shop-sec{position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin:4px 2px 9px; font-family:var(--txt);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2a2118} #card .shop-sec::after{content:'';flex:1;height:0;border-top:2px solid #2a211855} #card .shop-sec:not(:first-child){margin-top:16px} .shop-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .shop-item{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0; padding:8px 8px 9px;text-align:center; background:#f3e6c2 url(assets/paper-grain.svg);border:2.5px solid #2a2118; border-radius:13px 9px 12px 10px;box-shadow:0 3px 0 #2a211866,inset 0 0 0 2px #fff6dc80} .shop-item:nth-child(2n){border-radius:9px 13px 10px 12px} .shop-item:nth-child(3n){rotate:.4deg} .shop-item:nth-child(4n){rotate:-.4deg} /* Painted products sit directly on the printed card stock. */ #card.shop-card .shop-art{position:relative;width:100%;height:96px;display:grid;place-items:center;margin-bottom:6px; border:0;border-radius:0;overflow:visible;background:none;box-shadow:none;filter:none} #card.shop-card .shop-product{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:100%;object-fit:contain; filter:drop-shadow(0 2px 1px #51371030);pointer-events:none;user-select:none} .shop-amount{font-family:var(--num);font-weight:800;font-size:25px;line-height:1;color:#2a2118;white-space:nowrap} .shop-unit{font-size:12.5px;line-height:1.2;color:#4b4132;margin-top:2px} .shop-note{display:flex;align-items:center;justify-content:center;gap:2px;min-height:15px;margin-top:3px; font-size:11px;line-height:1.25;color:#6a5a40} .shop-note .shop-gem{width:13px;height:12px} /* Цена — на всю ширину карточки, прижата к низу. */ #card .shop-item button.shop-buy{width:100%;margin-top:auto;min-height:44px;padding:7px 8px; display:flex;align-items:center;justify-content:center;gap:5px; font-family:var(--num);font-weight:800;font-size:18px;line-height:1;white-space:nowrap} #card .shop-item .shop-unit,#card .shop-item .shop-note{margin-bottom:8px} #card .shop-item .shop-unit:has(+.shop-note){margin-bottom:0} #card .shop-item button.shop-buy .shop-gem{width:20px;height:18px} #card .shop-item button.shop-buy.rub{font-size:17px} /* Выгода — красная бирка, как наклейка на ценнике. */ .shop-ribbon{position:absolute;z-index:2;top:-8px;right:-6px;padding:3px 7px 4px;rotate:5deg; background:#c43a2d;color:#fff0ce;border:2px solid #2a2118;border-radius:6px 4px 7px 3px;box-shadow:2px 2px 0 #2a211866; font-size:11px;font-weight:700;line-height:1;white-space:nowrap} #card .shop-proto{position:relative;z-index:1;margin:12px 4px 0;font-size:12px;line-height:1.35;color:#3c3325;text-align:center} @media (max-width:350px){ .shop-grid{gap:8px}#card.shop-card .shop-art{height:82px} .shop-amount{font-size:21px}#card .shop-item button.shop-buy{font-size:16px} .shop-ribbon{font-size:10px;padding:3px 5px} } /* ===== Плашка цели недели в шапке (renderHubGoal) ===== */ #bHub.hub-goal-chip{flex-direction:row;align-items:center;gap:8px;padding:6px 17px 6px 9px;overflow:visible} #bHub .hub-ticket{flex:none;width:34px;height:26px;rotate:-7deg;filter:drop-shadow(0 1.5px 0 #1d1a1566)} #bHub .hub-goal{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} #bHub .hub-row{display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0;line-height:1} #bHub .hub-row em{font-style:normal;font-weight:700;color:#29231c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} #bHub .hub-row b{font-family:var(--num);font-weight:800;font-size:17px;line-height:1;color:#29231c;white-space:nowrap} #bHub .hub-row b small{font:inherit;font-size:12px;font-weight:700;color:#5b4c35} #bHub .hub-bar{position:relative;display:block;height:7px;border:1.5px solid #29231c;border-radius:5px 3px 5px 3px; background:#dcc796;overflow:hidden} #bHub .hub-bar i{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(-45deg,#c43a2d 0 5px,#a92720 5px 9px); border-right:1.5px solid #29231c;min-width:2px} #bHub .hub-meta{font-family:var(--txt);font-size:10.5px;font-weight:500;color:#4d4130} #bHub .hub-meta span{white-space:nowrap;flex:none} #bHub .hub-place{font-family:var(--txt);font-size:10.5px;font-weight:600;color:#243f4b;white-space:nowrap} #bHub .hub-claim-tag{position:absolute;top:-6px;left:-2px;padding:2px 6px 3px;rotate:-6deg; background:#c43a2d;color:#fff0ce;border:2px solid #1d1a15;border-radius:5px 3px 6px 3px;box-shadow:1.5px 1.5px 0 #1d1a1566; font-family:var(--txt);font-size:10px;font-weight:700;line-height:1;animation:hub-claim 1.8s ease-in-out infinite} @keyframes hub-claim{50%{transform:translateY(-2px) scale(1.06)}} @media (max-width:360px){#bHub .hub-meta{font-size:9.5px}#bHub .hub-row b{font-size:14px}#bHub .hub-meta{font-size:9.5px}#bHub .hub-ticket{width:28px}} @media (prefers-reduced-motion:reduce){#bHub .hub-claim-tag{animation:none}} /* плашка билета: одно крупное число и шкала */ #bHub .hub-goal{gap:5px} #bHub .hub-num{font-family:var(--num);font-weight:900;font-size:22px;line-height:1;color:#29231c;white-space:nowrap} #bHub .hub-num small{font:inherit;font-size:15px;font-weight:800;color:#5b4c35} #bHub .hub-bar{height:9px} @media (max-width:360px){#bHub .hub-num{font-size:18px}#bHub .hub-num small{font-size:13px}} /* ---- sf-builder.css ---- */ /* ===== Карта «Сан-Франциско» — стройка (sf-builder.js, ?map=sf) ===== */ #bHub .sf-cats{display:flex;gap:2px;margin:2px 0} #bHub .sf-cats i{font-style:normal;font-size:13px;line-height:1;opacity:.28;filter:grayscale(1)} #bHub .sf-cats i.on{opacity:1;filter:none} #sfTasks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%} /* Меню стройки: три карточки варианта (Style Bible — бумага, тушь, эмаль только у цены). Карточка целиком нажимается; кнопки выбора в .mbtns остаются для механики и спрятаны. */ #card:has(.sf-opts) .sf-lead{margin:0 0 8px;font-size:14px} #card:has(.sf-opts) .sf-opts{display:flex;flex-direction:column;gap:8px} #card:has(.sf-opts) .sf-opt{display:grid;grid-template-columns:86px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;margin:0;padding:8px 10px 8px 8px; border:2.5px solid #25221c;border-radius:10px 12px 9px 11px;background:#f2e3bd url(assets/paper-grain.svg);box-shadow:0 3px 0 #25221c; text-align:left;color:#25221c;font:inherit;cursor:pointer;min-height:0} #card:has(.sf-opts) .sf-opt:active{translate:0 2px;box-shadow:0 1px 0 #25221c} #card:has(.sf-opts) .sf-art{width:86px;height:64px;border-radius:7px;overflow:hidden;display:grid;place-items:center} #card:has(.sf-opts) .sf-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 0 #25221c33)} #card:has(.sf-opts) .sf-info{display:flex;flex-direction:column;gap:2px;min-width:0} #card:has(.sf-opts) .sf-info b{font:800 16px/1.15 Bitter,Georgia,serif} #card:has(.sf-opts) .sf-cat{font-size:12px;color:#5b4c35} #card:has(.sf-opts) .sf-stats{display:flex;flex-wrap:wrap;gap:0 10px;font:700 13px/1.3 Bitter,Georgia,serif} #card:has(.sf-opts) .sf-stats em{font:500 12px Golos,system-ui;font-style:normal;color:#5b4c35;margin-left:3px} #card:has(.sf-opts) .sf-stats .cash-glyph,#card:has(.sf-opts) .sf-price .cash-glyph{display:inline-block;vertical-align:-3px;margin-right:2px} #card:has(.sf-opts) .sf-nb{align-self:flex-start;margin-top:2px;padding:1px 7px;border:1.5px solid #25221c66;border-radius:999px;font-size:12px;line-height:1.35;color:#5b4c35;background:#e9d8ae} #card:has(.sf-opts) .sf-nb.good{border-color:#3f7c3a;background:#dfe8c6;color:#2f5e2b} #card:has(.sf-opts) .sf-nb.bad{border-color:#a92720;background:#f3d4c3;color:#8b1f19} #card:has(.sf-opts) .sf-price{display:grid;place-items:center;min-width:64px;min-height:44px;padding:4px 9px;border:2.5px solid #25221c;border-radius:9px; background:#4f7c4a;color:#fff6de;font:800 17px/1 Bitter,Georgia,serif;box-shadow:0 3px 0 #25221c,inset 0 0 0 2px #fff3;white-space:nowrap;text-align:center} #card:has(.sf-opts) .sf-opt.poor{cursor:default;opacity:.8} #card:has(.sf-opts) .sf-opt.poor .sf-price{background:#8f8574;color:#f2e3bd;font-size:15px} #card:has(.sf-opts) .sf-opt.poor .sf-price small{display:block;font:600 10.5px Golos,system-ui;margin-bottom:2px} #card:has(.sf-opts) .sf-opt.poor .sf-art img{filter:grayscale(.5)} /* кнопки выбора остаются в DOM (механика жмёт их по data-i), видна только «Позже» */ #card:has(.sf-opts) .mbtns button:not(:last-child){display:none} #card:has(.sf-opts) .mbtns button:last-child{flex:1} @media(max-width:360px){#card:has(.sf-opts) .sf-opt{grid-template-columns:70px minmax(0,1fr) auto;gap:8px}#card:has(.sf-opts) .sf-art{width:70px;height:54px}} /* Карточка построенной точки: соседство и благосостояние города — две печатные плашки. */ #card .sf-note{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px;padding:0;border:0;background:none} #card .sf-chip{display:inline-flex;align-items:baseline;gap:4px;padding:4px 10px;border:2px solid #25221c;border-radius:8px;background:#f2e3bd url(assets/paper-grain.svg); box-shadow:0 2px 0 #25221c;font:800 13px/1.25 Bitter,Georgia,serif;color:#25221c} #card .sf-chip small{font:600 12px Golos,system-ui;color:#5b4c35} #card .sf-chip.good{background-color:#dfe8c6;color:#2f5e2b}#card .sf-chip.bad{background-color:#f3d4c3;color:#8b1f19} #card .sf-chip.city{background-color:#f4d68a} /* плотнее: три варианта влезают в окно без прокрутки на 375×812 */ #card:has(.sf-opts) .sf-lead{font-size:13.5px;line-height:1.3;margin-bottom:6px} #card:has(.sf-opts) .sf-opt{grid-template-columns:72px minmax(0,1fr) auto;gap:8px;padding:7px 8px 7px 6px} #card:has(.sf-opts) .sf-art{width:72px;height:56px} #card:has(.sf-opts) .sf-info b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #card:has(.sf-opts) .sf-stats{font-size:12.5px;white-space:nowrap} #card:has(.sf-opts) .sf-stats em{display:none} #card:has(.sf-opts) .sf-stats span:first-child::after{content:' / круг';font:500 11.5px Golos,system-ui;color:#5b4c35} #card:has(.sf-opts) .sf-price{display:inline-flex;align-items:center;justify-content:center;gap:2px;min-width:62px;padding:4px 8px} #card:has(.sf-opts) .sf-price .cash-glyph{margin:0} #card:has(.sf-opts) .sf-opt.poor .sf-price{flex-wrap:wrap;max-width:74px} #card:has(.sf-opts) .sf-opt.poor .sf-price small{flex-basis:100%;margin:0 0 1px} #card:has(.sf-opts) .sf-nb{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #card:has(.sf-opts) .sf-info b{font-size:14.5px;letter-spacing:-.01em} #card:has(.sf-opts) .sf-info b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} #card .sf-nb small,#card .sf-chip small{font:600 11.5px Golos,system-ui} #card .sf-nb,#card .sf-chip{white-space:normal;overflow:visible;text-overflow:clip;align-items:center} #card .sf-gis{display:inline-flex;gap:1px;vertical-align:-4px} #card .sf-gi{width:18px;height:18px;object-fit:contain} #card:has(.sf-opts) .sf-nb{white-space:normal;overflow:visible;text-overflow:clip;display:inline-flex;flex-wrap:wrap;gap:0 4px} #card:has(.sf-opts) .sf-nb{display:inline-block;white-space:nowrap} #card:has(.sf-opts) .sf-nb small{display:block;white-space:normal;margin-top:-1px} #card:has(.sf-opts) .sf-gi{width:16px;height:16px} /* v2: закрытые категории — замок и цена лицензии */ #card .sf-opt.locked .sf-art{position:relative} #card .sf-opt.locked .sf-art img{filter:grayscale(.7) brightness(.85)} #card .sf-opt .sf-lock{position:absolute;right:-4px;bottom:-4px;font-style:normal;font-size:18px;line-height:1;filter:drop-shadow(0 1px 0 #fff)} #card .sf-opt .sf-price.lic{background:#3f5f6c;color:#fff1cc} #card .sf-opt .sf-price.lic small{color:#fff1cc;opacity:.85} /* закрытая категория: карточка в два столбца, плашка лицензии — третьей строкой на всю ширину */ #card:has(.sf-opts) .sf-opt.locked{grid-template-columns:86px minmax(0,1fr)} #card:has(.sf-opts) .sf-opt.locked .sf-info b,#card:has(.sf-opts) .sf-opt.locked .sf-info small{white-space:normal;overflow:visible;text-overflow:clip} #card:has(.sf-opts) .sf-opt.locked .sf-price.lic{grid-column:1/-1;justify-self:stretch;width:auto;max-width:none;grid-auto-flow:column;gap:6px;min-height:40px;margin-top:2px} @media(max-width:360px){#card:has(.sf-opts) .sf-opt.locked{grid-template-columns:70px minmax(0,1fr)}} #card:has(.sf-opts) .sf-opt.locked.poor .sf-price.lic{grid-column:1/-1;display:grid;grid-auto-flow:column;gap:6px;font-size:16px;min-height:40px} /* ===== Закрытые категории и лицензия (Style Bible: тёплый серый картон, штамп-замок, печатная кнопка) ===== */ #card:has(.sf-opts) .sf-opt.locked{background:#e3d6b8 url(assets/paper-grain.svg);border-style:dashed;border-color:#5b4c35;box-shadow:0 3px 0 #5b4c3599} #card:has(.sf-opts) .sf-opt.locked .sf-info b{color:#4d4130} #card:has(.sf-opts) .sf-opt.locked .sf-stats{color:#5b4c35} #card:has(.sf-opts) .sf-opt.locked .sf-cat{color:#8b1f19;font-weight:700} #card:has(.sf-opts) .sf-opt.locked .sf-art img{filter:grayscale(1) sepia(.35) brightness(.92) contrast(.9);opacity:.75} /* замок — нарисованный, штампом по центру картинки */ #card:has(.sf-opts) .sf-opt .sf-lock{position:absolute;left:50%;top:50%;width:34px;height:34px;translate:-50% -46%;rotate:-8deg; background:#f2e3bd url(assets/bp/bp-lock.webp) center/74% no-repeat;border:2.5px solid #25221c;border-radius:50%;box-shadow:0 2px 0 #25221c;filter:none;font-size:0} /* лицензия — печатная кнопка на всю ширину: название слева, цена справа */ #card:has(.sf-opts) .sf-opt.locked .sf-price.lic,#card:has(.sf-opts) .sf-opt.locked.poor .sf-price.lic{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px; min-height:42px;margin-top:4px;padding:5px 12px;border:2.5px solid #25221c;border-radius:9px 11px 8px 10px;background:#3f5f6c;color:#fff1cc; box-shadow:0 3px 0 #25221c,inset 0 0 0 2px #3f5f6c,inset 0 0 0 3.5px #e6d5a7aa;font:800 14px/1.15 Bitter,Georgia,serif;text-align:left;max-width:none;width:auto} #card:has(.sf-opts) .sf-lic-name{min-width:0;white-space:normal} #card:has(.sf-opts) .sf-lic-cost{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:17px;white-space:nowrap} #card:has(.sf-opts) .sf-opt.locked:not(.poor):active .sf-price.lic{translate:0 2px;box-shadow:0 1px 0 #25221c,inset 0 0 0 2px #3f5f6c,inset 0 0 0 3.5px #e6d5a7aa} #card:has(.sf-opts) .sf-opt.locked.poor .sf-price.lic{background:#8f8574;box-shadow:0 3px 0 #25221c,inset 0 0 0 2px #8f8574,inset 0 0 0 3.5px #e6d5a766;color:#f2e3bd} #card:has(.sf-opts) .sf-opt.locked.poor .sf-lic-cost{font:700 13px/1.15 Golos,system-ui;color:#fff1cc} #card:has(.sf-opts) .sf-opt.locked.poor{opacity:1} /* Лицензии — документы мэрии, не точки (черновик, стиль — Интерфейс) */ #card .sf-lics{margin-top:12px;padding-top:8px;border-top:2px dashed #3d3020} #card .sf-lics-title{margin:0 0 6px;font:800 12px/1.2 var(--num,Bitter,serif);letter-spacing:.08em;text-transform:uppercase;color:#5b4c35;text-align:center} #card .sf-lic-doc{display:block;width:100%;margin:0 0 8px;padding:10px 12px 10px 44px;position:relative;text-align:left;cursor:pointer; background:#fbf3df url(assets/paper-grain.svg);border:2px solid #25221c;border-radius:3px 12px 3px 12px;box-shadow:0 3px 0 #25221c,inset 0 0 0 4px #fbf3df,inset 0 0 0 5.5px #a9272055} #card .sf-lic-doc.poor{opacity:.75;cursor:default} #card .sf-lic-doc .sf-doc-seal{position:absolute;left:10px;top:12px;width:24px;height:24px;border-radius:50%;border:2.5px solid #a92720;box-shadow:inset 0 0 0 2px #fbf3df,inset 0 0 0 4px #a9272088;rotate:-12deg} #card .sf-lic-doc .sf-doc-head b{display:block;font-size:15px;color:#25221c} #card .sf-lic-doc .sf-doc-body{display:block;margin-top:3px;font-size:12.5px;color:#5b4c35} #card .sf-lic-doc .sf-doc-good{display:inline-flex;align-items:center;gap:3px;white-space:nowrap} #card .sf-lic-doc .sf-doc-good .sf-gi{width:18px;height:18px;object-fit:contain} #card .sf-lic-doc .sf-doc-buy{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:6px 10px;border:2px solid #25221c;border-radius:8px;background:#3f5f6c;color:#fff1cc;font-weight:800;box-shadow:0 2px 0 #25221c} #card .sf-lic-doc.poor .sf-doc-buy{background:#8f8574;color:#f2e3bd} /* ===== Лицензия — документ мэрии (Style Bible: бумага, двойная рамка тушью, гербовая печать, подпись) ===== */ #card:has(.sf-opts) .sf-lics{margin-top:14px;padding-top:10px;border-top:2px dashed #3d302088} #card:has(.sf-opts) .sf-lics-title{margin:0 0 8px;font:800 12px/1.2 Bitter,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:#5b4c35;text-align:center} #card:has(.sf-lic-doc) .sf-lic-doc{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 56px;grid-template-areas:"head seal" "body seal" "foot foot"; gap:2px 8px;width:100%;margin:0 0 10px;padding:12px 14px 12px;box-sizing:border-box;text-align:left;cursor:pointer; background:#f7eed6 url(assets/paper-grain.svg);border:2.5px solid #25221c;border-radius:2px; box-shadow:inset 0 0 0 4px #f7eed6,inset 0 0 0 5.5px #a92720,inset 0 0 0 7px #f7eed6,inset 0 0 0 8px #25221c77,0 3px 0 #25221c,0 5px 10px #0003;rotate:-.4deg} #card:has(.sf-lic-doc) .sf-lic-doc:nth-child(odd){rotate:.35deg} #card:has(.sf-lic-doc) .sf-lic-doc:not(.poor):active{translate:0 2px;box-shadow:inset 0 0 0 4px #f7eed6,inset 0 0 0 5.5px #a92720,inset 0 0 0 7px #f7eed6,inset 0 0 0 8px #25221c77,0 1px 0 #25221c} #card:has(.sf-lic-doc) .sf-lic-doc .sf-doc-head{grid-area:head;display:block;padding-left:0} #card:has(.sf-lic-doc) .sf-lic-doc .sf-doc-head::before{content:'Город Сан-Франциско · мэрия';display:block;font:700 10.5px/1.2 Bitter,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:#a92720} #card:has(.sf-lic-doc) .sf-lic-doc .sf-doc-head b{display:block;margin-top:2px;font:800 16px/1.15 Bitter,Georgia,serif;color:#25221c} #card:has(.sf-lic-doc) .sf-lic-doc .sf-doc-seal{grid-area:seal;position:static;align-self:center;justify-self:center;width:54px;height:54px;border:0;border-radius:50%;box-shadow:none; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23a92720%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2245%22%20stroke-width%3D%225%22/%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2236%22%20stroke-width%3D%222.5%22%20stroke-dasharray%3D%223%203%22/%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2227%22%20stroke-width%3D%223%22/%3E%3C/g%3E%3Cpath%20fill%3D%22%23a92720%22%20d%3D%22m50%2030%205.9%2012%2013.2%201.9-9.6%209.3%202.3%2013.1L50%2060.1l-11.8%206.2%202.3-13.1-9.6-9.3%2013.2-1.9Z%22/%3E%3Cpath%20fill%3D%22%23a92720%22%20d%3D%22M20%2050h6M74%2050h6%22%20stroke%3D%22%23a92720%22%20stroke-width%3D%224%22/%3E%3C/svg%3E") center/contain no-repeat;opacity:.82;rotate:-14deg;mix-blend-mode:multiply} #card:has(.sf-lic-doc) .sf-lic-doc .sf-doc-body{grid-area:body;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-top:2px;font:600 12.5px/1.3 Golos,system-ui;color:#5b4c35} #card:has(.sf-lic-doc) .sf-lic-doc .sf-doc-good{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;font-weight:700;color:#25221c} #card:has(.sf-lic-doc) .sf-lic-doc .sf-doc-good .sf-gi{width:20px;height:20px;object-fit:contain} /* подвал: подпись мэра слева, печатная кнопка справа */ #card:has(.sf-lic-doc) .sf-lic-doc .sf-doc-buy{grid-area:foot;justify-self:end;display:inline-flex;align-items:center;gap:8px;margin-top:8px;min-height:40px;padding:4px 14px; border:2.5px solid #25221c;border-radius:9px 11px 8px 10px;background:#c43a2d;color:#fff6de;box-shadow:0 3px 0 #25221c,inset 0 0 0 2px #c43a2d,inset 0 0 0 3.5px #f2c86a99; font:800 15px/1 Bitter,Georgia,serif;text-shadow:0 1px 0 #5a160e} #card:has(.sf-lic-doc) .sf-lic-doc .sf-lic-cost{display:inline-flex;align-items:center;gap:3px;font-size:17px} #card:has(.sf-lic-doc) .sf-lic-doc::after{content:'';position:absolute;left:16px;bottom:16px;width:118px;height:30px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%2030%22%3E%3Cpath%20d%3D%22M4%2022c8-14%2014-16%2012-6s6-12%2012-8-4%2014%204%2010%208-12%2014-8%202%2010%2010%206%2010-10%2016-6%204%208%2012%204%2010-6%2016-4%22%20fill%3D%22none%22%20stroke%3D%22%23243f4b%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M2%2027h116%22%20stroke%3D%22%2325221c%22%20stroke-width%3D%221.2%22/%3E%3C/svg%3E") left bottom/contain no-repeat;opacity:.9;pointer-events:none} #card:has(.sf-lic-doc) .sf-lic-doc::before{content:'подпись';position:absolute;left:18px;bottom:6px;font:600 9.5px/1 Golos,system-ui;letter-spacing:.08em;color:#8a7a60;text-transform:uppercase} #card:has(.sf-lic-doc) .sf-lic-doc.poor{opacity:1;cursor:default} #card:has(.sf-lic-doc) .sf-lic-doc.poor .sf-doc-seal{opacity:.4;filter:grayscale(1)} #card:has(.sf-lic-doc) .sf-lic-doc.poor .sf-doc-buy{background:#8f8574;box-shadow:0 3px 0 #25221c,inset 0 0 0 2px #8f8574,inset 0 0 0 3.5px #e6d5a766;color:#f2e3bd;text-shadow:none;font-size:13px} /* печать лежит внутри шапки — ставим её абсолютно в правый верхний угол документа */ #card:has(.sf-lic-doc) .sf-lic-doc{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "body" "foot";padding-right:74px} #card:has(.sf-lic-doc) .sf-lic-doc .sf-doc-seal{position:absolute;right:12px;top:10px;width:56px;height:56px} #card:has(.sf-lic-doc) .sf-lic-doc .sf-doc-head::before{content:'Мэрия Сан-Франциско'} #card:has(.sf-lic-doc) .sf-lic-doc .sf-doc-buy{margin-right:-60px} #card:has(.sf-lic-doc) .sf-lic-doc::after{width:84px;bottom:18px} #card:has(.sf-lic-doc) .sf-lic-doc .sf-doc-seal{left:auto} /* Бланк лицензии от Графики (assets/ui/license_.webp, 3:2) — миниатюра в шапке документа; размещение — Интерфейс */ #card:has(.sf-lic-doc) .sf-lic-doc .sf-doc-art{float:left;width:84px;height:56px;margin:0 10px 4px 0;object-fit:cover;border:2px solid #25221c;border-radius:4px;box-shadow:0 2px 0 #25221c} #card:has(.sf-lic-doc) .sf-lic-doc.poor .sf-doc-art{filter:grayscale(.6);opacity:.8} /* Бланк от Графики: миниатюра слева во всю высоту шапки и строки товаров. На бланке уже есть печать с лентой и подпись — нарисованные CSS печать и подпись в этом случае прячем. */ #card:has(.sf-lic-doc) .sf-lic-doc:has(.sf-doc-art){padding:10px 12px 12px 118px;min-height:96px} #card:has(.sf-lic-doc) .sf-lic-doc .sf-doc-art{float:none;position:absolute;left:12px;top:12px;width:96px;height:64px;margin:0;object-fit:cover; border:2px solid #25221c;border-radius:3px;box-shadow:0 2px 0 #25221c;rotate:-2.5deg;background:#f2e3bd} #card:has(.sf-lic-doc) .sf-lic-doc:nth-child(odd) .sf-doc-art{rotate:2deg} #card:has(.sf-lic-doc) .sf-lic-doc:has(.sf-doc-art) .sf-doc-seal, #card:has(.sf-lic-doc) .sf-lic-doc:has(.sf-doc-art)::before, #card:has(.sf-lic-doc) .sf-lic-doc:has(.sf-doc-art)::after{display:none} #card:has(.sf-lic-doc) .sf-lic-doc:has(.sf-doc-art) .sf-doc-buy{margin-right:0;justify-self:stretch;justify-content:space-between;margin-left:-106px} #card:has(.sf-lic-doc) .sf-lic-doc.poor .sf-doc-art{filter:grayscale(.7) sepia(.2);opacity:.85} /* Правило продюсера 30.09: кнопка покупки зелёная, когда хватает; тёмно-серая, когда нет. Цена всегда полная. */ #card:has(.sf-lic-doc) .sf-lic-doc .sf-doc-buy{background:#4f7c4a;color:#fff6de;text-shadow:none} #card:has(.sf-lic-doc) .sf-lic-doc.poor .sf-doc-buy{background:var(--buy-no,#8c8873);color:var(--buy-no-text,#f6eed8);box-shadow:0 3px 0 #25221c} #card:has(.sf-opts) .sf-opt.poor .sf-price{background:var(--buy-no,#8c8873);color:var(--buy-no-text,#f6eed8)} /* Правило продюсера 30.09: на кнопке всегда целевое действие («Построить», «Купить лицензию»), цвет говорит, можно ли. */ #card:has(.sf-opts) .sf-price small{display:block;font:600 10.5px Golos,system-ui;margin-bottom:2px;opacity:.9} /* Кнопки в карточке точки: лицензии мэрии и перестройка (черновик, стиль — Интерфейс) */ /* ===== Окно «Мэрия», купленная лицензия, кнопки в карточке точки (Style Bible) ===== */ /* купленная — тот же документ, вместо кнопки красный штамп «Куплена» */ #card:has(.sf-lic-doc) .sf-lic-doc.owned{cursor:default;background-color:#efe6cd} #card:has(.sf-lic-doc) .sf-lic-doc.owned .sf-doc-buy{background:none!important;box-shadow:none!important;border:0;min-height:0;padding:0;margin-top:6px;justify-content:flex-end} #card:has(.sf-lic-doc) .sf-lic-doc.owned .sf-doc-buy .sf-lic-name{display:inline-block;padding:3px 12px 4px;border:3px double #a92720;border-radius:6px; color:#a92720;font:800 14px/1.1 Bitter,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;rotate:-6deg;opacity:.9;text-shadow:none} /* кнопки «Лицензии» и «Перестроить» в карточке своей точки — вторичные печатные, в ряд */ #card .sf-note .sf-actions{display:flex;gap:6px;width:100%;margin-top:2px} #card .sf-note .sf-actions button{flex:1 1 0;min-height:40px;padding:4px 8px;border:2px solid #25221c;border-radius:8px 10px 7px 9px; background:#f2e3bd url(assets/paper-grain.svg);color:#25221c;box-shadow:0 2px 0 #25221c;font:800 13.5px/1.1 Bitter,Georgia,serif;white-space:nowrap} #card .sf-note .sf-actions button:active{translate:0 2px;box-shadow:0 0 0 #25221c} #card .sf-note .sf-actions button .enamel-skin{display:none} /* кнопка цены на карточке варианта: «Построить» мелко сверху, сумма крупно — не поджимает текст карточки */ #card:has(.sf-opts) .sf-opt .sf-price{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;gap:1px;min-width:68px;max-width:78px;padding:4px 6px} #card:has(.sf-opts) .sf-opt .sf-price small{display:block;flex-basis:auto;margin:0;font:700 10.5px/1 Golos,system-ui;letter-spacing:.02em;opacity:.95} #card:has(.sf-opts) .sf-opt .sf-price .cash-glyph{display:inline-block} /* «Лицензии» и «Перестроить»: печатная бумага, а не синяя эмаль общих кнопок */ #card .sf-note .sf-actions button.enamel-button,#card .sf-note .sf-actions button{--button-ink:#f2e3bd;background:#f2e3bd url(assets/paper-grain.svg)!important;color:#25221c!important;text-shadow:none!important; border:2px solid #25221c!important;box-shadow:0 2px 0 #25221c!important} /* Пустырь: лицензии — одной строкой со ссылкой в окно мэрии (плейтест 04.10: «стройка и лицензии в одном окне путают»). */ #card .sf-lics-link{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:12px;padding:9px 10px;border:2px dashed #3d3020;border-radius:10px;background:#f6ecd2;cursor:pointer} #card .sf-lics-link .sf-lics-ic{font-size:30px;line-height:1;font-style:normal} #card .sf-lics-link b{display:block;font:800 15px/1.15 Bitter,Georgia,serif;color:#2b2218} #card .sf-lics-link small{display:block;font:600 12px/1.3 Bitter,Georgia,serif;color:#6b5a40} #card .sf-lics-link em{font:800 13px/1 Bitter,Georgia,serif;font-style:normal;color:#fbf0d4;background:#3f6a8a;border:2px solid #25221c;border-radius:8px;padding:7px 10px;box-shadow:0 2px 0 #25221c} #card .sf-lics-link:focus-visible{outline:3px solid #c99a32;outline-offset:2px} /* ---- inspector.css ---- */ /* Инспектор — плашка в карточке точки (Style Bible: бумага, тушь, приглушённый красный). Выглядит как штамп-предписание, приколотый к карточке: без градиентов и стекла. */ #card .insp-note{display:block;margin:6px 0 10px;padding:7px 11px 8px 8px; border:2px solid #25221c;border-radius:7px 9px 6px 8px;background:#f2e3bd url(assets/paper-grain.svg); box-shadow:0 2px 0 #25221c,inset 0 0 0 2px #f2e3bd,inset 0 0 0 3.5px #a9272055; color:#25221c;font-size:13px;line-height:1.25;text-align:left;rotate:-.6deg} #card .insp-note .insp-head{display:flex;align-items:center;gap:9px;margin:0} #card .insp-note .insp-ic{flex:none;width:34px;height:34px;border:2px solid #25221c;border-radius:50%; background:#c43a2d url(board/assets/symbols/inspector.svg) center/78% no-repeat;filter:none;box-shadow:0 2px 0 #25221c} #card .insp-note b{color:#a92720;font-weight:800} #card .insp-note small{display:block;margin-top:1px;font-size:12px;color:#5b4c35} /* Спор (участок и инспектор): кнопка броска ловит дубль — сине-серая печать с ярлыком. */ #bRoll.jail{background-color:#3f5f6c!important;box-shadow:0 5px 0 #243f4b,0 5px 0 2.5px #25221c!important} #bRoll.jail::after{content:'дубль?';position:absolute;left:50%;top:-11px;translate:-50% 0;z-index:3;padding:1px 8px 2px; border:2px solid #25221c;border-radius:6px;background:#f2e3bd;color:#a92720;font:800 12px/1.2 Bitter,Georgia,serif; letter-spacing:.02em;white-space:nowrap;box-shadow:0 2px 0 #25221c;pointer-events:none} #card .insp-quote{font-style:italic;color:#5b4c35} /* кнопки попапа: цена в одну строку с глаголом */ #card.event-card:has(.insp-quote) .ev-foot button{font-size:16px;padding-inline:8px;white-space:nowrap;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:4px} /* ===== Карточка точки в режиме проверки ===== Картинка точки — того же размера и там же (высоту замеряет inspCardLock до скрытия блоков), справа поверх — инспектор. Блоки товара, прибыли, запаса и «Улучшить» скрыты, внизу — плашка с кнопками: «Заплатить» и «Откупиться» в ряд, «Ловить дубль» на всю ширину. */ #card .insp-hidden{display:none!important} #card.print-property .property-picture[data-insp-h]{flex:none;height:var(--insp-pic-h);min-height:0;max-height:none} #card .property-picture{position:relative} #card .insp-overlay{position:absolute;right:-4px;bottom:0;width:52%;height:100%;z-index:2;pointer-events:none;display:flex;align-items:flex-end;justify-content:flex-end} #card .insp-overlay img{width:100%;height:100%;object-fit:contain;object-position:right bottom;filter:drop-shadow(0 3px 0 #25221c88)} /* пока нет картинки Графики — жетон инспектора в правом верхнем углу картинки */ #card .insp-overlay img.fallback{position:absolute;right:6px;top:4px;width:30%;height:auto;max-width:92px;aspect-ratio:1;box-sizing:border-box; background:#c43a2d;border:3px solid #25221c;border-radius:50%;padding:7%;box-shadow:0 3px 0 #25221c;filter:none;rotate:6deg} #card .property-body:has(.insp-note){display:flex;flex-direction:column} #card .insp-note{margin-top:auto;margin-bottom:2px} #card .insp-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px} #card .insp-actions .insp-btn{min-height:50px;padding:6px 8px;font-size:16px;white-space:nowrap; display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px} #card .insp-actions .insp-btn.bad{grid-column:1/-1} #card .insp-actions .insp-btn[disabled]{opacity:.5} #card button[data-insp-locked]{opacity:.45;filter:grayscale(.6);pointer-events:none} /* ---- unified-upgrade.css ---- */ /* ===== Единый апгрейд точки (unified-upgrade.js) ===== */ #card .shop .uup{margin:8px 0;padding:10px 11px 11px;border:1.5px solid #3d3020;border-radius:12px 8px 11px 9px; background:#fff1cd45;box-shadow:0 2px #9a8051,inset 0 0 0 2px #fff4d075} #card .shop .uup-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} #card .shop .uup-lvl{font-size:14px;color:#322b21} #card .shop .uup-lvl b{font-family:var(--num);font-weight:800;font-size:18px} #card .shop .uup-dots{display:flex;gap:4px} #card .shop .uup-dots i{width:13px;height:13px;border-radius:50%;border:1.5px solid #2a2118;background:#e8d6ae} #card .shop .uup-dots i.on{background:#c43a2d} #card .shop .uup-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px} #card .shop .uup-stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;padding:7px 8px;border-radius:9px;background:#f3e2b866;border:1px solid #9c825866} #card .shop .uup-stat small{flex-basis:100%;font-size:12px;color:#5d513e} #card .shop .uup-stat b{font-family:var(--num);font-weight:800;font-size:21px;line-height:1;color:#2a2118} #card .shop .uup-stat b.up{color:#347347} #card .shop .uup-stat i{font-style:normal;font-size:17px;color:#5d513e} #card .shop button.uup-btn{width:100%;min-height:52px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:17px} #card .shop button.uup-btn>span:not(.enamel-skin){font-weight:800} #card .shop button.uup-btn>b{font-family:var(--num);font-weight:800;font-size:20px;padding-left:10px;border-left:1px solid #f2d39a70} #card .shop .uup-max{margin:0;font-size:13px;color:#4b4132;text-align:center} /* Числа статов — не поля ввода: снимаем общий стиль «плашки» у b внутри окна. */ #card .shop .uup-stat b{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-width:0!important;border-radius:0!important} /* Шаги по очереди: растущий стат подсвечен, на кнопке — что даст шаг. */ #card .shop .uup-dots{gap:3px}#card .shop .uup-dots i{width:11px;height:11px} #card .shop .uup-stat.grows{border-color:#347347;background:#dfe9c86b} #card .shop button.uup-btn>span:not(.enamel-skin){display:flex;flex-direction:column;align-items:flex-start;line-height:1.1} #card .shop button.uup-btn>span:not(.enamel-skin) small{font-size:12px;font-weight:600;opacity:.92;margin-top:2px} /* замок учебного круга (tutorial-guard.js) */ #card .tut-lock-note{display:block;margin:6px 0 0;font-size:12px;line-height:1.3;color:#6a5a40;text-align:center} #card button[data-tut-locked]{filter:grayscale(.8);opacity:.75} /* ---- meta-tree.css ---- */ /* ===== Конец карты и дерево развития (meta-tree.js) ===== */ #card.tree-card{max-width:440px} #card.tree-card .ev-body{padding:12px 12px 72px} .tree-pp{width:1.3em;height:1.3em;object-fit:contain;vertical-align:-.28em} #card.tree-card .tree-wallet{display:flex;align-items:center;gap:4px;font-size:13px} #card.tree-card .tree-wallet b{font-family:var(--num);font-weight:800;font-size:16px;color:var(--ink)} /* итоги карты */ .tree-sum{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px} .tree-sum>div{padding:9px 6px;text-align:center;background:#f3e6c2 url(assets/paper-grain.svg);border:2px solid #2a2118;border-radius:11px 8px 12px 9px;box-shadow:0 3px 0 #2a211855} .tree-sum small{display:block;font-size:11px;color:#5b4c35} .tree-sum b{font-family:var(--num);font-weight:800;font-size:18px;color:#2a2118} .tree-convert{position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:12px;margin-bottom:10px; background:linear-gradient(#f0c44e,#d79a26);border:3px solid #2a2118;border-radius:14px 10px 13px 11px;box-shadow:0 4px 0 #00000055} .tree-convert>span{flex:1;text-align:center} .tree-convert small{display:block;font-size:11.5px;color:#3c2e17;font-weight:600} .tree-convert b{font-family:var(--num);font-weight:800;font-size:24px;color:#2a2118} .tree-cv-arrow{flex:none!important;font-size:26px;font-weight:800;color:#2a2118} #card.tree-card .tree-note{position:relative;z-index:1;margin:0 2px 12px;font-size:13px;line-height:1.35;color:#3c3325} .tree-pp-gain{position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:10px 12px;background:#f3e6c2 url(assets/paper-grain.svg); border:2px dashed #2a2118aa;border-radius:12px} .tree-pp-gain .tree-pp{width:34px;height:34px} .tree-pp-gain b{font-family:var(--num);font-weight:800;font-size:22px} .tree-pp-gain span{font-size:13px;color:#3c3325} /* цепочка карт */ .tree-chain{position:relative;z-index:1;display:flex;align-items:flex-start;margin:0 0 14px;padding:10px 6px 8px; background:#f3e6c2 url(assets/paper-grain.svg);border:2px solid #2a2118;border-radius:12px;box-shadow:0 3px 0 #2a211855} .tree-map{flex:none;width:52px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center} .tree-map i{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:2px solid #2a2118;background:#e8d6ae; font-style:normal;font-family:var(--num);font-weight:800;font-size:14px;color:#2a2118} .tree-map small{font-size:9.5px;line-height:1.1;color:#5b4c35} .tree-map.done i{background:#377148;color:#fff2d1} .tree-map.next i{background:#c43a2d;color:#fff2d1;box-shadow:0 0 0 3px #c43a2d44} .tree-link{flex:1;height:0;margin-top:14px;border-top:2px dashed #2a211866} /* шаги дерева */ .tree-step{position:relative;z-index:1;margin-bottom:14px} .tree-step h3{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 2px 8px; font-family:var(--txt);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2a2118} .tree-step h3 small{font-size:11.5px;letter-spacing:0;text-transform:none;font-weight:600;color:#5b4c35} .tree-step.now h3 small{color:#a92720} .tree-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .tree-node{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:9px 9px 10px; background:#f3e6c2 url(assets/paper-grain.svg);border:2.5px solid #2a2118;border-radius:13px 9px 12px 10px;box-shadow:0 3px 0 #2a211866} .tree-node:nth-child(2n){border-radius:9px 13px 10px 12px} .tree-ic{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#f6ecd0;border:2px solid #2a2118;margin-bottom:2px} .tree-ic img{width:32px;height:32px;object-fit:contain} .tree-br{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#243f4b} .tree-node b{font-size:14.5px;line-height:1.15;color:#2a2118} .tree-node small{font-size:11.5px;line-height:1.3;color:#4b4132;flex:1} #card .tree-node button.tree-buy{width:100%;margin-top:8px;min-height:40px;padding:6px 8px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:14px} .tree-stamp{margin-top:8px;align-self:stretch;text-align:center;padding:6px 0;border:2px solid #377148;border-radius:8px;color:#2d5f3b; font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;rotate:-2deg;background:#dfe9c880} .tree-lock{margin-top:8px;display:flex;align-items:center;gap:5px;font-size:11.5px;color:#5b4c35} .tree-lock img{width:16px;height:16px} .tree-node.future{filter:saturate(.3);opacity:.62} .tree-node.past:not(.own){opacity:.7} .tree-node.just{animation:tree-pop .35s ease-out} @keyframes tree-pop{40%{transform:scale(1.06)}} @media (prefers-reduced-motion:reduce){.tree-node.just{animation:none}} @media (max-width:350px){.tree-map{width:44px}.tree-map small{font-size:8.5px}.tree-node b{font-size:13px}.tree-convert b{font-size:20px}} #card #treeTest{width:100%;margin:8px 0} /* ---- map1.css ---- */ /* ===== Карта 1 «Мейн-стрит» (map1.js, ?map=1) ===== */ body.map-mode #sTimer,body.map-mode #q0,body.map-mode #q1,body.map-mode #bShip,body.map-mode #bTaxi,body.map-mode #sDayPill{display:none!important} body.map-mode #qrow{display:block} #m1Tasks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%} .qchip.m1-task{position:relative;min-width:0;min-height:43px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:5px 8px 7px;overflow:hidden;cursor:default;text-align:left} .qchip.m1-task b{font-family:var(--num);font-weight:800;font-size:14px;line-height:1;color:#f9e5b6;position:relative;z-index:1} .qchip.m1-task span{font-size:11px;line-height:1.15;white-space:normal;position:relative;z-index:1} .qchip.m1-task i{position:absolute;left:0;bottom:0;height:3px;width:var(--p);background:#c43a2d} .qchip.m1-task.ok{border-color:#6f9b62}.qchip.m1-task.ok b{color:#b9e0a4}.qchip.m1-task.ok i{background:#6f9b62} /* серая карта «Шанса»: тап переворачивает */ .m1-card{position:relative;width:170px;height:220px;margin:6px auto 4px;perspective:700px;cursor:pointer} .m1-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px; border:3px solid #2a2118;border-radius:14px 10px 13px 11px;box-shadow:0 5px 0 #00000055;backface-visibility:hidden;transition:transform .5s cubic-bezier(.3,1.4,.5,1)} .m1-back{background:repeating-linear-gradient(45deg,#8f8f86 0 10px,#a3a39a 10px 20px);color:#f3e6c2;font-family:var(--num);font-weight:800;font-size:30px;letter-spacing:.08em;text-shadow:2px 2px 0 #2a2118} .m1-front{background:#ecebe4 url(assets/paper-grain.svg);transform:rotateY(180deg);text-align:center} .m1-front b{font-family:var(--num);font-weight:800;font-size:38px;color:#2a2118} .m1-front small{font-size:14px;line-height:1.3;color:#3c3325} .m1-card.open .m1-back{transform:rotateY(-180deg)}.m1-card.open .m1-front{transform:rotateY(0)} @media (prefers-reduced-motion:reduce){.m1-face{transition:none}} #card .m1-bizlock{margin:8px 0;padding:10px 12px;border:1.5px dashed #3d3020;border-radius:10px;background:#fff1cd45;font-size:14px;line-height:1.35;color:#3c3325} /* двусторонняя крутящаяся карта «Шанса» (§5-1) */ .m1-spin{width:190px;height:240px;margin:8px auto 4px;perspective:800px;cursor:pointer;touch-action:manipulation} .m1-card3d{position:relative;width:100%;height:100%;transform-style:preserve-3d} .m1-card3d .m1-face{transition:none} .m1-card3d .m1-front{transform:rotateY(0deg);background:#ecebe4 url(assets/paper-grain.svg)} .m1-backside{transform:rotateY(180deg);background:#dcdcd2 url(assets/paper-grain.svg)} .m1-card3d .m1-face b{font-family:var(--num);font-weight:800;font-size:38px;color:#2a2118} .m1-card3d .m1-face small{font-size:14px;line-height:1.3;color:#3c3325;text-align:center} .m1-card3d.stopped .m1-face{box-shadow:0 5px 0 #00000055,0 0 0 4px #e0ad3a} #card .m1-stop{display:block;width:70%;margin:6px auto 0;min-height:48px;font-size:18px} /* ===== Задачи карт-режимов (карта 1, Сан-Франциско) — как миссии основной игры ===== Строка: иконка по типу задачи · текст · счётчик справа · тонкая полоска прогресса внизу. */ #top #qrow .qchip.m1-task{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:5px;min-height:38px;height:auto; padding:3px 7px 9px 6px;text-align:left;font-family:Bitter,Georgia,serif} #top #qrow .qchip.m1-task::before{display:block;content:'';width:22px;height:22px;flex:none;background:center/contain no-repeat;order:0} #top #qrow .qchip.m1-task span{order:1;flex:1;min-width:0;font:600 11.5px/1.15 Bitter,Georgia,serif!important;color:#f9e5b6;white-space:normal; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #top #qrow .qchip.m1-task b{order:2;flex:none;font:800 12.5px/1 Bitter,Georgia,serif;color:#e5b85c;white-space:nowrap} #top #qrow .qchip.m1-task i{left:8px;bottom:3px;height:4px;width:calc((100% - 16px) * var(--mission-ratio,0));max-width:calc(100% - 16px);background:#e5b85c;border-radius:4px} #top #qrow .qchip.m1-task.ok{background:#3f6238 url(assets/print/ink-wear.svg)!important} #top #qrow .qchip.m1-task.ok b{color:#cfe8b8}#top #qrow .qchip.m1-task.ok i{background:#cfe8b8} #top #qrow .qchip.m1-task[data-kind=build]::before,#top #qrow .qchip.m1-task[data-kind=buy]::before{background-image:url(assets/icons/shop.webp)} #top #qrow .qchip.m1-task[data-kind=city]::before,#top #qrow .qchip.m1-task[data-kind=lvl]::before{background-image:url(assets/icons/crown.webp)} #top #qrow .qchip.m1-task[data-kind=earn]::before{background-image:url(assets/icons/soft.webp)} #top #qrow .qchip.m1-task[data-kind=sold]::before{background-image:url(assets/icons/box.webp)} #top #sfTasks,#top #m1Tasks{gap:4px} /* три задачи в ряд: счётчик над подписью, подпись целиком (до двух строк) */ #top #qrow .qchip.m1-task{display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto;column-gap:5px;row-gap:1px;align-content:center;align-items:center} #top #qrow .qchip.m1-task::before{grid-row:1/3;grid-column:1} #top #qrow .qchip.m1-task b{grid-row:1;grid-column:2;font-size:12px} #top #qrow .qchip.m1-task span{grid-row:2;grid-column:2;font-size:11px!important;line-height:1.12!important} @media(max-width:360px){#top #qrow .qchip.m1-task{grid-template-columns:18px minmax(0,1fr);padding-left:4px}#top #qrow .qchip.m1-task::before{width:18px;height:18px}} /* ---- chance-system.css ---- */ /* ===== «Шанс»: временное функциональное окно (chance-system.js). Финальный вид — «Американ Интерфейс». ===== */ #card .ch-rarity{width:max-content;margin:0 auto 4px;padding:3px 10px;border:2px solid #2a2118;border-radius:6px;background:var(--rc);color:#fff4d8; font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .m1-card3d[class*="ch-"] .m1-face{border-color:var(--rc);box-shadow:0 5px 0 #00000055,inset 0 0 0 3px var(--rc)} .m1-card3d .m1-face em{font-style:normal;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#3c3325} .m1-card3d.ch-gold .m1-face{background:#f3e0a8 url(assets/paper-grain.svg)} .m1-card3d.ch-purple .m1-face{background:#e6dcef url(assets/paper-grain.svg)} .m1-card3d.ch-blue .m1-face{background:#dce7ef url(assets/paper-grain.svg)} #card .ch-test{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0} #card .ch-test span{font-size:13px;font-weight:700;margin-right:4px} #card .ch-test button[data-st]{min-width:40px;min-height:40px;padding:0} #card .ch-test button.on{outline:3px solid #c43a2d} #card .ch-test #chPlay{flex:1 1 100%} /* ---- chance-ui.css ---- */ /* ===== «Шанс»: интерфейс карт (chance-ui.js) ===== Карта — печатная карточка настольной игры: бумага, чернильный контур, рамка цвета редкости, штамп редкости, флажок стороны A/B. Золото — сусальная рамка, лучи за картинкой и блик, чтобы карту хотелось положить в колоду. */ :root{--cu-ink:#2a2118;--cu-grey:#8f8b80;--cu-blue:#3f6f98;--cu-purple:#6e4596;--cu-gold:#c99a32} .r-grey{--rc:var(--cu-grey);--rc2:#d7d2c4;--paper:#efe4c8} .r-blue{--rc:var(--cu-blue);--rc2:#b9cfe0;--paper:#e8e6d8} .r-purple{--rc:var(--cu-purple);--rc2:#cdb9df;--paper:#ece2e6} .r-gold{--rc:var(--cu-gold);--rc2:#f3d98a;--paper:#f5e6b6} /* ---------- карта ---------- */ .cu-card{--w:190px;width:var(--w);aspect-ratio:5/7;perspective:900px;flex:none} .cu-spin{position:relative;width:100%;height:100%;transform-style:preserve-3d} .cu-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-sizing:border-box; display:flex;flex-direction:column;align-items:center;padding:calc(var(--w)*.075) calc(var(--w)*.07) calc(var(--w)*.08); border:calc(var(--w)*.022) solid var(--cu-ink);border-radius:calc(var(--w)*.075); background:var(--paper) url(assets/paper-grain.svg); box-shadow:inset 0 0 0 calc(var(--w)*.03) var(--rc),inset 0 0 0 calc(var(--w)*.042) var(--cu-ink),0 calc(var(--w)*.03) 0 #00000055} .cu-back{transform:rotateY(180deg)} .cu-stamp{position:absolute;top:calc(var(--w)*.07);right:calc(var(--w)*.07);padding:1px 6px 2px;border:2px solid var(--cu-ink);border-radius:5px; background:var(--rc);color:#fff6de;font:800 calc(var(--w)*.055)/1 var(--txt);letter-spacing:.06em;text-transform:uppercase;rotate:4deg} .cu-side{position:absolute;top:calc(var(--w)*.06);left:calc(var(--w)*.065);width:calc(var(--w)*.17);aspect-ratio:1;display:grid;place-items:center; border:2.5px solid var(--cu-ink);border-radius:50%;font:900 calc(var(--w)*.1)/1 var(--num);color:#fff6de;background:#5c8f47} .cu-side.meh{background:#8f8b80}.cu-side.bad{background:#b1332a} .cu-title{margin-top:calc(var(--w)*.2);font-family:var(--num);font-weight:900;font-size:calc(var(--w)*.1);line-height:1.05;text-align:center; color:var(--cu-ink);text-transform:uppercase;letter-spacing:.01em} .cu-art{position:relative;flex:1;width:78%;display:grid;place-items:center;margin:calc(var(--w)*.03) 0} .cu-art img,.cu-art svg{width:calc(var(--w)*.46);height:calc(var(--w)*.46);object-fit:contain;filter:drop-shadow(0 3px 0 #2a211855)} .cu-art::before{content:'';position:absolute;width:calc(var(--w)*.62);aspect-ratio:1;border-radius:50%;background:var(--rc2); border:2px solid var(--cu-ink);opacity:.9} .cu-cap{font-family:var(--txt);font-weight:700;font-size:calc(var(--w)*.075);line-height:1.2;text-align:center;color:#3c3325; min-height:2.4em;display:flex;align-items:center} .cu-cap.bad{color:#8c1f18}.cu-cap.empty{color:#7a6a50;font-style:italic} /* золото: лучи за картинкой и блик по поверхности */ .r-gold .cu-face{box-shadow:inset 0 0 0 calc(var(--w)*.03) var(--cu-gold),inset 0 0 0 calc(var(--w)*.042) var(--cu-ink),inset 0 0 0 calc(var(--w)*.06) #f6de94,inset 0 0 0 calc(var(--w)*.068) var(--cu-ink),0 calc(var(--w)*.03) 0 #00000055} .r-gold .cu-art::before{background:repeating-conic-gradient(#f0c44e 0 10deg,#fbe7a6 10deg 20deg)} .r-gold .cu-face::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(115deg,transparent 35%,#fffbe666 45%,transparent 55%) no-repeat;background-size:250% 100%;animation:cuGlint 3.2s ease-in-out infinite} @keyframes cuGlint{0%,40%{background-position:120% 0}80%,100%{background-position:-120% 0}} .r-purple .cu-art::before{background:repeating-radial-gradient(circle,#cdb9df 0 6px,#dccdea 6px 12px)} .cu-mini{--w:92px}.cu-mini .cu-stamp{display:none}.cu-mini .cu-face{box-shadow:inset 0 0 0 3px var(--rc),inset 0 0 0 4.5px var(--cu-ink),0 2px 0 #00000055} .cu-mini.r-gold .cu-face{box-shadow:inset 0 0 0 3px var(--cu-gold),inset 0 0 0 4.5px var(--cu-ink),inset 0 0 0 6px #f6de94,0 2px 0 #00000055} .cu-mini .cu-back{display:none} .cu-mini .cu-cap{font-size:9.5px;min-height:0}.cu-mini .cu-title{font-size:10.5px;margin-top:17px} /* ---------- слой окон ---------- */ .cu-layer{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:12px;background:rgba(24,18,12,.66)} .cu-kicker{display:block;font:800 13px/1 var(--txt);letter-spacing:.14em;text-transform:uppercase;color:#f6e7c3;opacity:.9} .cu-rays{position:absolute;left:50%;top:50%;width:560px;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none; background:repeating-conic-gradient(var(--rc,#ffd76a) 0 8deg,transparent 8deg 20deg);opacity:.22; -webkit-mask:radial-gradient(circle,#000 25%,transparent 68%);mask:radial-gradient(circle,#000 25%,transparent 68%);animation:cuSpinRays 22s linear infinite} @keyframes cuSpinRays{to{rotate:360deg}} /* ---------- экран 1: вращение ---------- */ .cu-play-in{position:relative;width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} .cu-head{display:flex;flex-direction:column;align-items:center;gap:6px} .cu-head h2{margin:0;padding:3px 16px 4px;rotate:-2deg;background:#f3e6c2 url(assets/paper-grain.svg);border:3px solid var(--cu-ink);border-radius:7px; box-shadow:3px 3px 0 #0006;font-family:var(--num);font-weight:900;font-size:24px;text-transform:uppercase;color:var(--cu-ink)} .cu-chip{padding:3px 10px;border:2px solid var(--cu-ink);border-radius:6px;background:var(--rc);color:#fff6de;font:800 12px/1.2 var(--txt);letter-spacing:.08em;text-transform:uppercase} .cu-flag{padding:4px 10px;border:2px solid var(--cu-ink);border-radius:7px;font:800 14px/1.2 var(--txt)} .cu-flag.x2{background:#c43a2d;color:#fff6de}.cu-flag.sure{background:#f0c44e;color:var(--cu-ink)} .cu-stage{position:relative;display:grid;place-items:center;width:100%;padding:8px 0 22px;cursor:pointer;-webkit-tap-highlight-color:transparent} .cu-stage .cu-rays{width:480px;opacity:.28} .cu-big{--w:min(208px,52vw)} .cu-shadow{position:absolute;bottom:6px;width:150px;height:18px;border-radius:50%;background:#0000004d;filter:blur(2px)} .cu-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%} .cu-opt{display:flex;align-items:center;gap:8px;padding:8px 9px;text-align:left;border:2.5px solid var(--cu-ink);border-radius:11px; background:#f2e6c6 url(assets/paper-grain.svg);box-shadow:0 3px 0 #0006;font:600 13.5px/1.2 var(--txt);color:#3c3325;transition:transform .2s,opacity .2s} .cu-opt b{font-family:var(--num);font-weight:900;color:#2f6b2a;margin-right:2px} .cu-opt.bad b{color:#b1332a}.cu-opt.bad{background-color:#f1dcd2} .cu-opt-ic{flex:none;width:30px;height:30px}.cu-opt-ic img,.cu-opt-ic svg{width:100%;height:100%;object-fit:contain} .cu-opt.hit{transform:scale(1.05);box-shadow:0 3px 0 #0006,0 0 0 4px #ffd76a} .cu-opt.miss{opacity:.45;transform:scale(.97)} .cu-hint{margin:2px 0 0;min-height:22px;font:600 15px/1.3 var(--txt);color:#f6e7c3} .cu-hint b{color:#ffd76a} .cu-play .cu-stop,.cu-play .cu-take{width:100%;min-height:60px;font-size:22px} .cu-play.landed .cu-rays{opacity:.6;animation-duration:8s} .cu-play.win-bad .cu-rays{background:repeating-conic-gradient(#c43a2d 0 8deg,transparent 8deg 20deg)} /* ---------- панели коллекции и колоды ---------- */ .cu-panel{width:100%;max-width:420px;max-height:calc(100dvh - 24px);display:flex;flex-direction:column;overflow:hidden; border:3px solid var(--cu-ink);border-radius:18px;background:linear-gradient(#a9c3d2,#bcc7c2 55%,#b3a88c);box-shadow:0 5px 0 var(--cu-ink)} .cu-phead{flex:none;display:flex;align-items:center;gap:10px;padding:11px 12px;background:linear-gradient(#f2e6c6,#e6d7b0);border-bottom:3px solid var(--cu-ink)} .cu-phead .ev-badge{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#f6ecd0;border:3px solid var(--cu-ink)} .cu-phead .ev-badge img{width:32px;height:32px;object-fit:contain} .cu-phead h2{flex:1;margin:0;font-family:var(--num);font-weight:900;font-size:22px;text-transform:uppercase;color:var(--cu-ink)} .cu-x{flex:none;width:42px;height:42px;border-radius:50%;border:2.5px solid var(--cu-ink);background:#c43a2d;color:#fff6de;font:900 20px/1 var(--txt);box-shadow:0 3px 0 var(--cu-ink)} .cu-fwrap{flex:none;padding:10px 10px 0} .cu-filters{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none} .cu-f{flex:none;display:flex;align-items:center;gap:5px;min-height:36px;padding:4px 10px;border:2px solid var(--cu-ink);border-radius:999px; background:#f2e6c6;font:700 13px/1 var(--txt);color:var(--cu-ink)} .cu-f b{min-width:18px;padding:2px 5px;border-radius:999px;background:var(--rc,#2a2118);color:#fff6de;font-size:11px} .cu-f.r-all{--rc:#2a2118} .cu-f.on{background:var(--cu-ink);color:#fff6de}.cu-f.on b{background:#fff6de;color:var(--cu-ink)} .cu-grid{flex:1 1 auto;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;padding:12px 10px 16px; -webkit-mask-image:linear-gradient(transparent 0,#000 10px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(transparent 0,#000 10px,#000 calc(100% - 14px),transparent)} .cu-cell{position:relative;display:grid;place-items:center;padding:0;border:0;background:none;box-shadow:none;cursor:pointer} .cu-cell.in .cu-card{filter:saturate(.8) brightness(.95)} .cu-cell.locked{aspect-ratio:5/7;border:2.5px dashed #5b4c35;border-radius:9px;background:#e9dcbb66} .cu-lock{display:flex;flex-direction:column;align-items:center;gap:4px} .cu-lock span{font:900 30px/1 var(--num);color:#5b4c35}.cu-lock small{font:700 11px/1 var(--txt);color:#5b4c35} .cu-copies{position:absolute;right:4px;bottom:4px;padding:2px 6px;border:2px solid var(--cu-ink);border-radius:999px;background:#f6ecd0;font:900 12px/1 var(--num)} .cu-new{position:absolute;left:-4px;top:6px;padding:2px 6px;rotate:-10deg;border:2px solid var(--cu-ink);border-radius:5px;background:#c43a2d;color:#fff6de; font:800 11px/1 var(--txt);text-transform:uppercase;animation:cuNew 1.4s ease-in-out infinite} @keyframes cuNew{50%{scale:1.1}} .cu-indeck{position:absolute;left:50%;bottom:-2px;translate:-50% 0;font:700 11px/1 var(--txt);color:#2f6b2a;white-space:nowrap} .cu-pfoot{flex:none;display:flex;gap:8px;padding:10px 11px calc(env(safe-area-inset-bottom,0px) + 10px);background:linear-gradient(#efe2c2,#e2d2ab);border-top:3px solid var(--cu-ink)} .cu-pfoot button{flex:1;min-height:54px;font-size:17px} .cu-foot-note{margin:0;font:600 14px/1.35 var(--txt);color:#3c3325;text-align:center;flex:1} /* колода: 8 слотов */ .cu-slots{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:12px 10px 4px;justify-items:center} .cu-slot{position:relative;padding:0;border:0;background:none;box-shadow:none;cursor:pointer} .cu-slot .cu-card{--w:min(78px,20vw)} .cu-slot .cu-mini .cu-cap{font-size:8px}.cu-slot .cu-mini .cu-title{font-size:9px;margin-top:14px} .cu-slot.empty{width:min(78px,20vw);aspect-ratio:5/7;border:2.5px dashed var(--cu-ink);border-radius:8px;background:#f2e6c688;display:grid;place-items:center} .cu-slot.empty span{font:900 26px/1 var(--num);color:#5b4c35} .cu-risk{position:absolute;left:50%;bottom:-6px;translate:-50% 0;padding:1px 5px;border:2px solid var(--cu-ink);border-radius:5px;background:#c43a2d;color:#fff6de;font:800 10px/1.1 var(--txt)} .cu-coach{animation:cuCoach 1s ease-in-out infinite} @keyframes cuCoach{50%{transform:translateY(-5px);filter:drop-shadow(0 0 8px #ffd76a)}} .cu-deckmsg{flex:none;margin:6px 11px 0;padding:8px 10px;border:2px solid var(--cu-ink);border-radius:10px;background:#f2e6c6;font:600 13.5px/1.3 var(--txt);color:#3c3325} .cu-deckmsg.warn{background:#f7d9c9;color:#6b1c15} .cu-deckmsg.err{background:#c43a2d;color:#fff6de} /* ---------- заставки ---------- */ .cu-intro-in,.cu-reveal-in{position:relative;width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center; padding:20px 16px 16px;border:3px solid var(--cu-ink);border-radius:18px;background:#f2e6c6 url(assets/paper-grain.svg);box-shadow:0 5px 0 var(--cu-ink)} .cu-intro-in .cu-rays,.cu-reveal-in .cu-rays{width:420px;opacity:.35;top:38%} .cu-intro-in .cu-kicker,.cu-reveal-in .cu-kicker{color:#5b4c35;position:relative} .cu-intro-name{position:relative;margin:0;padding:4px 18px 5px;border:3px solid var(--cu-ink);border-radius:8px;background:var(--rc);color:#fff6de;rotate:-2deg; font-family:var(--num);font-weight:900;font-size:30px;text-transform:uppercase;box-shadow:3px 3px 0 #0005} .cu-reveal-in h2{position:relative;margin:0;font-family:var(--num);font-weight:900;font-size:24px;color:var(--cu-ink)} .cu-intro-txt{position:relative;margin:0;font:700 17px/1.3 var(--txt);color:var(--cu-ink)} .cu-intro-card{position:relative;margin:4px 0} .cu-intro-card .cu-card{--w:120px} .cu-intro-warn{margin:0;padding:8px 10px;border:2px solid var(--cu-ink);border-radius:10px;background:#f7d9c9;font:700 14px/1.3 var(--txt);color:#6b1c15} .cu-intro-note{margin:0;font:600 14px/1.3 var(--txt);color:#3c3325} .cu-intro-in button,.cu-reveal-in button{width:100%;min-height:56px;font-size:19px} .cu-fan{position:relative;height:150px;width:100%;margin:6px 0} .cu-fan-card{position:absolute;left:50%;bottom:0;transform-origin:50% 160%; transform:translateX(-50%) rotate(calc((var(--i) - (var(--n) - 1)/2) * 9deg));animation:cuFan .5s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--i)*60ms)} .cu-fan-card .cu-card{--w:78px}.cu-fan-card .cu-cap{display:none} @keyframes cuFan{from{transform:translateX(-50%) rotate(0) translateY(40px);opacity:0}} .cu-rules{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font:600 15px/1.3 var(--txt);color:#3c3325} .cu-detail-in{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:340px} .cu-detail-r{margin:0;font:700 14px/1.3 var(--txt);color:#f6e7c3;text-align:center} .cu-detail-in button{width:100%;min-height:52px} /* ---------- экран 4: эффекты в шапке и вход в колоду ---------- */ #chanceFx{display:flex;flex-wrap:wrap;gap:5px;pointer-events:auto} .cu-fx{display:flex;align-items:center;gap:5px;min-height:30px;padding:3px 8px 3px 4px;border:2px solid var(--cu-ink);border-radius:999px; background:#f2e6c6 url(assets/paper-grain.svg);box-shadow:0 2px 0 #0006;font:700 12.5px/1 var(--txt);color:var(--cu-ink)} .cu-fx i{width:22px;height:22px;display:grid;place-items:center}.cu-fx i img,.cu-fx i svg{width:100%;height:100%;object-fit:contain} .cu-fx em{font-style:normal;font-weight:800;padding:2px 5px;border-radius:999px;background:var(--cu-ink);color:#fff6de;font-size:11px} .cu-fx.fx-freeze{background-color:#d8e6ee}.cu-fx.fx-double{background-color:#f3cfc4}.cu-fx.fx-sure,.cu-fx.fx-alibi{background-color:#f6e1a0} #chanceDeckBtn{position:absolute;left:10px;top:calc(var(--world-top,150px) + 10px);z-index:3;display:flex;flex-direction:column;align-items:center;gap:2px; width:56px;padding:5px 4px 4px;border:2.5px solid var(--cu-ink);border-radius:12px;background:#f2e6c6 url(assets/paper-grain.svg);box-shadow:0 3px 0 var(--cu-ink);cursor:pointer} #chanceDeckBtn small{font:700 11px/1 var(--txt);color:var(--cu-ink)} .cu-deckicon{position:relative;width:30px;height:34px} .cu-deckicon::before,.cu-deckicon::after{content:'';position:absolute;width:22px;height:30px;border:2.5px solid var(--cu-ink);border-radius:4px;background:#f6de94} .cu-deckicon::before{left:0;top:3px;rotate:-10deg;background:#b9cfe0}.cu-deckicon::after{right:0;top:0;rotate:8deg} body.first-lap #chanceDeckBtn{display:none} .cu-testrow{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}.cu-testrow button{flex:1 1 45%;min-height:40px} @media (max-width:360px){.cu-opt{font-size:12.5px}.cu-play .cu-stop,.cu-play .cu-take{min-height:54px;font-size:19px}.cu-grid{grid-template-columns:repeat(3,1fr)}} @media (prefers-reduced-motion:reduce){.cu-rays,.r-gold .cu-face::after,.cu-new,.cu-coach,.cu-fan-card{animation:none!important}} /* мини-карта: рисунок и подпись не налезают друг на друга */ .cu-mini .cu-art{margin:2px 0} .cu-mini .cu-art img,.cu-mini .cu-art svg{width:34px;height:34px} .cu-mini .cu-art::before{width:46px} .cu-mini .cu-cap{font-size:9px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .cu-mini .cu-title{font-size:10px;margin-top:15px;min-height:2.1em;display:flex;align-items:center} .cu-slot .cu-mini .cu-art img,.cu-slot .cu-mini .cu-art svg{width:26px;height:26px}.cu-slot .cu-mini .cu-art::before{width:36px} .cu-slot .cu-mini .cu-cap{display:none} .cu-fan{height:128px;margin:14px 0 10px} .cu-fan-card{transform-origin:50% 150%} .cu-fan-card .cu-card{--w:70px} .cu-f{font-size:12.5px;padding:4px 9px} .cu-pfoot.two #cuRec{font-size:14.5px;padding-inline:6px;white-space:nowrap} /* ---- slot.css ---- */ /* The machine owns its art; the host keeps its original resource HUD above it. */ .sl-integrated{position:fixed;inset:0;z-index:80;background:#0c0906b0;backdrop-filter:blur(14px) saturate(.75);-webkit-backdrop-filter:blur(14px) saturate(.75);display:flex;justify-content:center;overflow:hidden;isolation:isolate} #bandit-frame{display:block;width:100%;height:100%;border:0;background:transparent;color-scheme:normal} .sl-loading{position:absolute;inset:0;display:grid;place-items:center;background:#191713;color:#edd8ac;font:700 22px 'Bitter',Georgia,serif} .sl-loading-close{position:absolute;top:14px;right:14px;width:46px;height:46px;padding:0;border:0;border-radius:50%;overflow:hidden;background:none;box-shadow:0 3px #211e17} .sl-loading-close .atlas-art{width:100%;height:100%} .sl-test-controls{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin:8px 0} .sl-test-controls select,.sl-test-controls button{flex:1;min-width:180px;min-height:44px} /* Shared core resource header, directly above either minigame. */ .minigame-layer{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);justify-content:stretch;align-content:start;padding:0;background:#111;backdrop-filter:none;-webkit-backdrop-filter:none} .minigame-layer .sl-res{position:relative;inset:auto;z-index:6;margin:calc(env(safe-area-inset-top,0px) + 6px) 10px 6px;min-width:0} .minigame-layer .sl-res .cur{min-width:0} .minigame-layer .minigame-frame{display:block;width:100%;height:100%;min-height:0;border:0;background:transparent} /* One continuous backdrop: extra height belongs to the room, not to the controls. */ .minigame-layer{background:#191713;padding-bottom:env(safe-area-inset-bottom,0px)} .minigame-layer::before{content:"";position:absolute;inset:0;background:url(assets/paper-grain.svg) repeat;opacity:.035;pointer-events:none;z-index:-1} /* Painted wood continues behind the resources and through both game frames. */ .minigame-layer{background:linear-gradient(to bottom,#070605b3,transparent 22%,transparent 75%,#0b07044d),url(assets/minigames/dark-wood-v1.webp) center/100% 100% no-repeat;background-color:#130c07} .minigame-layer::before{display:none} /* A short room fade, then the loaded artwork lands without moving the HUD. */ .minigame-layer{animation:minigame-room-in 140ms ease-out both} .minigame-layer:not(.minigame-ready) .minigame-frame{visibility:hidden} .minigame-closing{pointer-events:none} .minigame-layer .sl-loading{background:transparent;pointer-events:none} @keyframes minigame-room-in{from{opacity:0}to{opacity:1}} @media(prefers-reduced-motion:reduce){.minigame-layer{animation-duration:80ms}} /* ---- interface-harmony.css ---- */ /* Original game windows, with the same content, controls and order. Paper / ink / green already used in the game; one spacing and type scale. */ :root{--ui-ink:#30291e;--ui-muted:#66563e;--ui-line:#ab936d;--ui-gap:12px;--ui-copy:17px;--ui-small:15px} #card{color:var(--ui-ink);font-size:var(--ui-copy);line-height:1.35} #card h2{font-size:24px;line-height:1.2} #card p{font-size:var(--ui-copy);line-height:1.4} #card button{touch-action:manipulation} #card button.enamel-button{min-height:52px;padding:12px 14px;font-size:18px;line-height:1.2} #card .enamel-skin,#card .atlas-art{pointer-events:none} #card button:focus-visible{outline:3px solid #a33b28;outline-offset:3px} /* The original property composition: title, picture, good, figures, upgrade. */ #card.bare.illustrated-property{max-width:400px} #card.illustrated-property .shop{padding:14px;max-height:calc(100dvh - 68px);scrollbar-width:thin} #card .property-title{padding:0 38px 0 0;min-height:40px;margin-bottom:12px;gap:10px} #card .property-title h2{font-size:24px;line-height:1.18} #card .property-picture{height:120px;margin-bottom:12px} #card .shop .srow{min-height:58px;padding:8px 10px;margin-bottom:10px;gap:10px} #card .shop .ico{width:42px;height:42px;flex:none} #card .shop .nm{font-size:20px;line-height:1.2} #card .shop .lvl{font-size:18px;min-width:54px;padding:8px 14px} #card .shop .srow .qm{width:40px;height:40px;min-height:40px;line-height:38px;font-size:22px} #card .shop .box{min-height:50px;padding:10px 12px;margin-bottom:10px;font-size:18px;gap:10px} #card .shop .box b{font-size:23px;line-height:1.15;white-space:nowrap} #card .shop .box small{font-size:16px;line-height:1.35} #card .shop .bar{height:9px;min-width:36px} #card .shop .buy{min-height:56px;font-size:23px;margin:12px 0 3px} #card .shop .need,#card .shop .hintline{font-size:15px;line-height:1.35;padding:8px 0} #card .shop .uup{padding:12px;margin:12px 0 0;box-shadow:0 2px #9a8051} #card .shop .uup-head{gap:8px;margin-bottom:12px;flex-wrap:wrap} #card .shop .uup-lvl{font-size:17px;line-height:1.3} #card .shop .uup-lvl b{font-size:23px} #card .shop .uup-dots{gap:4px} #card .shop .uup-dots i{width:12px;height:12px} #card .shop .uup-stats{gap:8px;margin-bottom:12px} #card .shop .uup-stat{padding:10px;gap:5px;align-content:start} #card .shop .uup-stat small{font-size:15px;line-height:1.3;color:var(--ui-muted);margin-bottom:3px} #card .shop .uup-stat b{font-size:25px;line-height:1.1} /* The old .up selector also describes entire panels; a number is just a number. */ #card .shop .uup-stat b.up{display:inline;color:#347347;flex:none;margin:0;gap:0} #card .shop .uup-stat i{font-size:21px} #card .shop button.uup-btn{min-height:64px;padding:10px 12px;font-size:22px;gap:10px} #card .shop button.uup-btn>span:not(.enamel-skin){line-height:1.15} #card .shop button.uup-btn>span:not(.enamel-skin) small{font-size:15px;line-height:1.25;margin-top:4px} #card .shop button.uup-btn>b{font-size:25px;white-space:nowrap;flex:none} #card .shop .uup-max{font-size:16px;line-height:1.35;padding-top:2px} /* Costco keeps its existing list and two bulk-purchase actions. */ #card.warehouse-card{max-width:420px} .warehouse-head{padding:12px 14px} .costco-sign{max-height:110px} .warehouse-heading{padding:10px 0 0;gap:8px} #card .warehouse-heading h2{font-size:22px;line-height:1.2} #card .warehouse-help .qm{width:40px;height:40px;min-height:40px;line-height:36px;font-size:22px} .warehouse-list{padding:12px 14px;mask-image:none;-webkit-mask-image:none} #card .warehouse-list .wr{grid-template-columns:44px minmax(0,1fr) 94px;grid-template-rows:auto auto;gap:5px 10px;padding:12px 10px;margin-bottom:10px;min-height:86px;box-shadow:0 2px #9a8051} #card .warehouse-list .ring{grid-column:1;grid-row:1/3;width:44px;height:44px} #card .warehouse-list .wn{grid-column:2;grid-row:1;align-self:end;font-size:18px;line-height:1.2} #card .warehouse-list .wn small{font-size:15px;line-height:1.3;white-space:normal;overflow:visible;text-overflow:clip} #card .warehouse-list .wq{grid-column:2;grid-row:2;align-self:start;text-align:left;font-size:16px;white-space:nowrap} #card .warehouse-list button.enamel-button{grid-column:3;grid-row:1/3;width:94px;height:auto;min-height:52px;font-size:19px;padding:10px 6px} .warehouse-footer{padding:4px 14px 14px} .warehouse-johnny{height:auto;min-height:78px;gap:8px} .warehouse-portrait{width:64px;height:64px} .warehouse-bubble{font-size:15px;line-height:1.3;transform:none;padding:8px} .warehouse-bubble small{font-size:14px} .warehouse-wallet{font-size:14px} .warehouse-wallet b{font-size:21px} #card .warehouse-buys button.warehouse-bulk{min-height:72px;padding:10px 6px;gap:6px} #card .warehouse-buys button.warehouse-bulk>span:not(.enamel-skin){font-size:15px;line-height:1.2;white-space:normal} #card .warehouse-buys button.warehouse-bulk>b{font-size:24px} /* Existing event-window structure shared by Johnny and the shop. */ #card.event-card .ev-head{padding:14px;gap:12px} #card.event-card h2.ev-title{font-size:24px;line-height:1.15} #card.event-card .ev-sub{font-size:16px;line-height:1.3} #card.event-card .ev-body{padding:14px 14px 22px} #card.event-card .ev-plate{padding:14px} #card.event-card .ev-plate>p{font-size:17px;line-height:1.4;margin-bottom:12px} #card.event-card .ev-plate>p.t{font-size:18px} #card.event-card .ev-plate .row{font-size:17px;min-height:44px;gap:12px} #card.event-card .ev-plate .row .v{font-size:21px;white-space:nowrap} #card.event-card .perk{font-size:16px;line-height:1.35;padding:10px 0;gap:12px} #card.event-card .perk b{min-width:48px;flex:none} #card.event-card .perk.off{opacity:1;color:var(--ui-muted)} #card.event-card .ev-foot{padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 12px)} #card.event-card .ev-foot button{min-height:52px;font-size:19px} #card.shop-card{max-width:420px} #card.shop-card .shop-wallet{font-size:16px} #card.shop-card .shop-wallet b{font-size:20px} #card .shop-sec{font-size:16px;letter-spacing:0;line-height:1.3;margin-bottom:12px} .shop-grid{gap:12px} .shop-item{padding:10px;rotate:0} .shop-item:nth-child(n){rotate:0} .shop-amount{font-size:28px;line-height:1.15} .shop-unit{font-size:16px;line-height:1.25} .shop-note{font-size:15px;line-height:1.3} .shop-note .shop-gem{width:17px;height:16px} #card .shop-item button.shop-buy{font-size:21px;min-height:50px} .shop-ribbon{font-size:13px;line-height:1.1;top:-7px;right:-3px} #card .shop-proto{font-size:15px;line-height:1.4} /* The original shipment keeps its illustration, slots and goods controls. */ #card.shipping-window{padding:14px;max-width:420px} #card.shipping-window>h2{font-size:24px;line-height:1.2;margin-bottom:12px} #card.shipping-window .parcel-note,#card.shipping-window .parcel-summary p,#card.shipping-window .parcel-meta{font-size:15px;line-height:1.35} #card.shipping-window .parcel-summary .total{font-size:17px} #card.shipping-window .parcel-summary .total b{font-size:26px} #card.shipping-window .parcel-actions button{min-height:52px;font-size:18px} /* On short displays keep readable text and use the existing scroll areas. */ @media(max-height:740px){ #card .property-picture{height:100px} #card.illustrated-property .shop{max-height:calc(100dvh - 64px)} .costco-sign{max-height:88px} } @media(max-width:360px){ #card.illustrated-property .shop{padding:12px} #card .property-title h2{font-size:22px} #card .shop .uup{padding:10px} #card .shop button.uup-btn{font-size:20px} #card .warehouse-list .wr{grid-template-columns:38px minmax(0,1fr) 80px;gap:5px 8px;padding:10px 8px} #card .warehouse-list .ring{width:38px;height:38px} #card .warehouse-list button.enamel-button{width:80px;font-size:18px} .warehouse-head,.warehouse-list,.warehouse-footer{padding-left:10px;padding-right:10px} .warehouse-portrait{width:48px;height:54px} .warehouse-johnny{gap:5px}.warehouse-bubble{font-size:15px;padding:6px} #card.event-card .ev-head,#card.event-card .ev-plate{padding:12px} #card.event-card .ev-body{padding:12px} .shop-grid{gap:10px}.shop-item{padding:8px} } /* Whole original button artwork avoids visible nine-slice seams. */ #card button.enamel-button::before,#helpDialog button.enamel-button::before{ border:0;border-image:none;border-radius:inherit; background:url(assets/btn-dark.webp) center/100% 100% no-repeat; } #card button.enamel-button.ok::before{border-image:none;background-image:url(assets/btn-green.webp)} #card button.enamel-button.bad::before{border-image:none;background-image:url(assets/btn-red.webp)} #card button.enamel-button.sec::before,#card button.enamel-button.hard::before{border-image:none;background-image:url(assets/btn-blue.webp)} #card.shipping-window{padding:0} #card.shipping-window .cargo-head h2{font-size:24px} #card.shipping-window .cargo-foot .parcel-note{font-size:15px;line-height:1.35} #card.shipping-window .row .n{font-size:17px} /* Current shipment uses pc-card; keep the same cargo rows and steppers. */ #card.pc-card h2.ev-title{font-size:24px} #card.pc-card .ev-sub{font-size:16px} #card.pc-card .pc-body{padding:14px;gap:12px} #card.pc-card .pc-pts span,#card.pc-card .pc-goal small,#card.pc-card .pc-next span,#card.pc-card .pc-truck-head span{font-size:15px;line-height:1.3} #card.pc-card .pc-truck-head{gap:8px;flex-wrap:wrap} #card.pc-card .pc-truck-head b{font-size:20px} #card.pc-card .pc-list{gap:12px} #card.pc-card .pc-row,#card.pc-card .pc-extra{padding:10px;box-shadow:0 2px #9a8051} #card.pc-card .pc-name b{font-size:18px;line-height:1.25} #card.pc-card .pc-name small{font-size:15px;line-height:1.3;white-space:normal} #card.pc-card button.pc-step{width:44px;height:44px;min-height:44px} #card.pc-card .pc-row.on{translate:0 0;box-shadow:0 0 0 2px #c99a32,0 3px #9a8051} #card.pc-card .pc-foot{padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 12px)} #card.pc-card .pc-foot button,#card.pc-card .pc-foot #mSend{min-height:56px;font-size:18px;white-space:normal} @media(max-width:360px){ #card.pc-card .pc-body{padding:12px} #card.pc-card .pc-row,#card.pc-card .pc-extra{padding:9px 8px;gap:7px} #card.pc-card .pc-gicon,#card.pc-card .pc-extra>img{width:32px;height:32px} #card.pc-card .pc-qty{gap:3px} #card.pc-card .pc-qty b{min-width:18px} #card.pc-card .pc-foot button,#card.pc-card .pc-foot #mSend{font-size:17px;padding:10px 8px} } /* Keep the atlas viewport at its native ratio; squashing only its height reveals neighbouring art. */ .costco-sign{height:auto;max-height:none;aspect-ratio:781/267} .costco-sign .atlas-art{overflow:hidden} /* ---- interface-print.css ---- */ /* Warm offset-printed board-game stock. No labels or game values are painted into art. */ #card{--print-ink:#332b20;--print-paper:#ebd8a9;--print-red:#a83d2c;--print-green:#496b45;--print-blue:#3e5962;--txt:'Bitter',Georgia,serif;--disp:'Bitter',Georgia,serif;--num:'Bitter',Georgia,serif;font-family:var(--txt);font-weight:600;color:var(--print-ink)} #card p,#card small,#card .n,#card .nm,#card .box,#card .uup-lvl,#card .ev-sub,#card .shop-unit,#card .shop-note,#card .pc-name,#card .warehouse-bubble{font-family:var(--txt);font-weight:600} #card h2,#card h3,#card b,#card strong{font-family:var(--num);font-weight:800} #card button{font-family:var(--txt)!important;font-weight:800} #card :is(h2,h3,.shop-amount,.uup-lvl b,.box b){text-shadow:.55px .3px #925b2933} #card .shop .lvl{font-family:var(--num);font-weight:800;background:var(--print-green);border:2px solid #385037;border-radius:8px 11px 7px 9px;box-shadow:1px 1px #a6976955} /* Thick, slightly uneven cut edges. Grain stays underneath clear text. */ #card:not(.bare){border:3px solid var(--print-ink);border-radius:19px 14px 18px 15px;box-shadow:0 0 0 3px #efdfb9,1px 5px 0 4px #332b20,0 14px 26px #0006} #card.illustrated-property .shop{border:3px solid var(--print-ink);border-radius:19px 14px 18px 15px;box-shadow:0 0 0 3px #efdfb9,1px 5px 0 3px #332b20;background:var(--print-paper) url(interface/assets/paper.svg) center/cover!important} #card.event-card,#card.pc-card{background:#d4cbb0 url(assets/print/ink-wear.svg)!important} #card .ev-head,#card .ev-foot,#card .pc-head,#card .pc-foot{background:var(--print-paper) url(interface/assets/paper.svg) center/cover;border-color:var(--print-ink);box-shadow:none} #card .ev-body::after{opacity:.12} #card .ev-plate,#card .shop-item,#card .pc-row,#card .pc-extra,#card .pc-truck,#card .pc-sum{background:#ecdfb8 url(assets/print/ink-wear.svg);border-color:var(--print-ink);border-width:2.5px;box-shadow:1px 2px #75613b77;border-radius:12px 8px 11px 7px} #card .shop .srow,#card .shop .box{border:2px solid #79613c;border-radius:10px 7px 11px 8px;background:#f6e9c129;box-shadow:inset 0 0 0 1px #fff0cb66} #card .shop .uup{border:2.5px solid var(--print-ink);border-radius:12px 8px 11px 9px;background:#ead6a544;box-shadow:1px 2px #7d653b88} #card .shop .uup-stat{border:0;border-radius:0;background:none;padding:6px 8px;box-shadow:none} #card .shop .uup-stat+ .uup-stat{border-left:2px solid #968056} #card .shop .uup-stat.grows{background:#80995e12} #card .shop .uup-stat b.up{color:#42643b} #card .shop .bar{background:#b1a07b88;border-radius:5px 4px 3px 5px} #card .shop .bar i{background:#5c7a4a url(assets/print/ink-wear.svg)} #card .shop .uup-dots i{border:2px solid var(--print-ink)} #card .shop .uup-dots i.on{background:var(--print-red)} #card .shop-ribbon{background:var(--print-red) url(assets/print/ink-wear.svg);border-color:var(--print-ink);text-shadow:none} #card .warehouse-list .wr{border:2.5px solid #58462d;border-radius:12px 8px 11px 9px;background:#f0dfb649;box-shadow:1px 2px #90744366} #card .warehouse-heading h2{font-size:22px} #card .warehouse-bubble{border:2px solid #655034;border-radius:11px 8px 12px 7px;background:#e5cea0} /* Printed action panels: no stretched bitmap corners, bevels or nine-slice joins. */ #card button.enamel-button{--button-ink:#3e4237;background:var(--button-ink)!important;border:0!important;border-radius:12px 9px 11px 8px;box-shadow:1px 3px 0 #30291f;color:#fff0c9!important;isolation:isolate;overflow:hidden;text-shadow:1px 1px #25211780;letter-spacing:.01em} #card button.enamel-button::before{content:'';position:absolute;inset:0;z-index:-1;border:0!important;border-image:none!important;border-radius:inherit;background:url(assets/print/button-frame.svg) center/100% 100% no-repeat,url(assets/print/ink-wear.svg) center/280px 180px!important;pointer-events:none} #card button.enamel-button.ok{--button-ink:var(--print-green)} #card button.enamel-button.bad,#card .shop button.buy,#card .shop button.uup-btn{--button-ink:var(--print-red)} #card button.enamel-button.sec,#card button.enamel-button.hard{--button-ink:var(--print-blue)} #card button.enamel-button:disabled{--button-ink:#8c8873;background:var(--button-ink)!important;color:#eee4c9!important;filter:none!important;opacity:1!important;box-shadow:1px 2px #655d46!important;text-shadow:none} #card button.enamel-button:active:not(:disabled){translate:0 2px;box-shadow:0 1px #30291f} #card button.enamel-button .enamel-skin{display:none!important} #card .ev-foot button.stacked-price{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 6px;line-height:1.15;white-space:nowrap} #card .ev-foot button.stacked-price .action-price{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px;white-space:nowrap} #card .ev-foot button.stacked-price .cash-glyph{flex:none;margin:0} /* Cola: category and existing level above a complete illustration of the real cart. */ #card.cola-property .shop{padding:14px;display:flex;flex-direction:column} #card.cola-property .srow{order:-2;border:0;box-shadow:none;background:none;margin:0 32px 0 0;padding:0 0 8px;min-height:52px} #card.cola-property .srow .ico{border:0;background:none;box-shadow:none;width:44px;height:44px} #card.cola-property .srow .nm{font-size:26px;font-weight:800} #card.cola-property .srow .lvl{margin-left:4px;min-width:48px} #card.cola-property .property-picture{order:-1;height:clamp(174px,29dvh,254px);flex:none;border:0;background:none;box-shadow:none;overflow:visible;margin:0 0 10px} #card.cola-property .property-illustration{width:100%;height:100%;object-fit:contain;filter:none} #card.cola-property .box{flex:none} #card.cola-property .shop button.uup-btn{font-size:22px} #card .shop .uup-stat small{font-size:15px;line-height:1.3} #card .shop .uup-lvl{font-size:16px} #card .shop button.uup-btn>span:not(.enamel-skin) small{font-size:14px;line-height:1.3} #card .warehouse-buys button.warehouse-bulk>span:not(.enamel-skin){font-size:15px} @media(max-width:360px){ #card.cola-property .shop{padding:12px} #card.cola-property .property-picture{height:clamp(166px,26dvh,225px)} #card .shop .box{font-size:17px;padding:10px} #card .shop button.uup-btn{font-size:20px;padding:10px} #card .warehouse-list .wr{grid-template-columns:36px minmax(0,1fr) 78px;gap:5px 7px} #card .warehouse-list button.enamel-button{width:78px;font-size:17px} #card .warehouse-list .wn{font-size:17px} #card .warehouse-list .wn small{font-size:14px} #card .shop-amount{font-size:26px} #card .pc-name small{font-size:14px} } @font-face{font-family:Bitter;font-weight:600;font-display:swap;src:url(assets/fonts/bitter-600-cyrillic.woff2) format('woff2');unicode-range:U+0400-045F,U+2116} @font-face{font-family:Bitter;font-weight:600;font-display:swap;src:url(assets/fonts/bitter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2212} #card.illustrated-property .shop{background:#efdfb7 url(assets/print/card-stock.webp) center/400px 600px!important} #card .ev-head,#card .ev-foot,#card .pc-head,#card .pc-foot{background:#efdfb7 url(assets/print/card-stock.webp) center/400px 600px} #card.cola-property .property-picture{height:clamp(185px,32dvh,282px)} #card .ev-plate,#card .shop-item,#card .pc-row:not(.on),#card .pc-extra,#card .pc-truck,#card .pc-sum:not(.on){background-image:url(assets/print/card-stock.webp);background-size:400px 600px} #card.warehouse-card{background:#efdfb7 url(assets/print/card-stock.webp) center/400px 600px!important} #card .warehouse-footer{background:#efdfb7 url(assets/print/card-stock.webp) center/400px 600px} /* ---- property-layout.css ---- */ /* One footprint for buying, upgrading and evolution, regardless of button count. */ #card.bare.illustrated-property{width:100%;max-width:400px;height:min(680px,calc(100dvh - 80px));max-height:calc(100dvh - 80px)!important} #card.illustrated-property .shop{height:100%;max-height:none!important;box-sizing:border-box;padding:0!important;display:flex;flex-direction:column;overflow:hidden} #card.illustrated-property .property-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9a8256 transparent;padding:14px 14px 12px} #card.illustrated-property .property-body>*{flex-shrink:0} #card.illustrated-property .property-actions{flex:none;display:flex;flex-direction:column;gap:8px;padding:10px 14px 14px;border-top:2px solid #79613c;background:#efdfb7 url(assets/print/card-stock.webp) center/400px 600px} #card.illustrated-property .property-actions[hidden]{display:none} #card.illustrated-property .property-actions .buy,#card.illustrated-property .property-actions .uup-btn,#card.illustrated-property .property-actions .wide{margin:0!important;width:100%} #card.illustrated-property .property-actions .need{padding:0;font-size:15px;line-height:1.3} #card.illustrated-property .property-body .uup{margin-bottom:0} #card.cola-property .property-picture{height:clamp(150px,22dvh,190px)} @media(max-width:360px){#card.illustrated-property .property-body{padding:12px}#card.illustrated-property .property-actions{padding:10px 12px 12px}} @media(max-height:700px){#card.bare.illustrated-property{height:calc(100dvh - 64px);max-height:calc(100dvh - 64px)!important}#card.cola-property .property-picture{height:150px}} /* ---- interface-world.css ---- */ /* Shared printed stock. All values, actions and wording come from the game. */ #modal:has(#card.print-property){pointer-events:none;backdrop-filter:none;background:#171a174d;padding:20px 12px 130px} #card.bare.print-property{pointer-events:auto;height:min(640px,calc(100dvh - 166px));max-height:calc(100dvh - 166px)!important} body:has(#modal:not([hidden]) #card.print-property) #app button:not(#bRoll),body:has(#modal:not([hidden]) #card.print-property) #board-frame{pointer-events:none} #card.print-property .srow{order:-2;border:0;background:none;box-shadow:none;padding:0 34px 5px 0;margin:0 0 4px;min-height:48px;gap:8px} #card.print-property .srow .ico{border:0;background:none;box-shadow:none;width:40px;height:44px} #card.print-property .srow .nm{font-size:25px;font-weight:800;line-height:1.15} #card.print-property .srow .lvl{font-size:21px;padding:7px 10px;min-width:58px;white-space:nowrap} #card.print-property .property-picture{order:-1;width:100%;height:auto;aspect-ratio:3/2;max-height:235px;margin:0 0 10px;border:0;box-shadow:none;background:none;overflow:hidden;border-radius:8px} #card.print-property .property-illustration{display:block;width:100%;height:100%;object-fit:contain;filter:none} #card.print-property .property-body{padding:14px 14px 10px} #card.print-property .shop .uup{padding:10px;margin:0;border-color:#918058;background:#79894c10;box-shadow:none} #card.print-property .uup-stats{margin:0;gap:4px} #card.print-property .uup-stat{display:grid;grid-template-columns:auto auto auto;justify-content:start;align-items:baseline;gap:6px 4px} #card.print-property .uup-stat small{grid-column:1/-1} #card.print-property .uup-stat small{font-size:16px} #card.print-property .uup-stat b{font-size:22px;white-space:nowrap} #card.print-property .uup-stat i{font-size:18px} #card.print-property .uup-stat .cash-glyph{display:none} #card.print-property .uup-max{margin:8px 0 0} #card.print-property .property-actions{border-top:0;padding-top:8px} #card.print-property .property-actions .wide{display:flex;gap:10px;align-items:center;border:2px solid #897248;border-radius:9px;padding:8px} #card.print-property .property-actions .wide .n{flex:1;font-size:16px;line-height:1.2} #card.print-property .property-actions .wide small{font-size:15px} #card.print-property .property-actions .wide button{flex:none;min-height:48px} #card.business-property .srow .nm{font-size:21px} #card.business-property .srow .ico{display:none} #card.business-property .shop .two{gap:10px} #card.business-property .shop .two .up{border:2px solid #8c7851;border-radius:9px;box-shadow:none;background:#e2cfa03b;padding:10px} #card.business-property .shop .two .nums{font:800 23px/1.25 Bitter,Georgia,serif} #card.business-property .shop .two .lab{font-size:17px} #card.business-property .shop .two .pb{font-size:15px;line-height:1.3} #card.business-property .m1-bizlock{font:600 16px/1.4 Bitter,Georgia,serif;border:0;border-top:2px solid #ac946d;background:none;border-radius:0;padding:12px 0;margin:2px 0} #card[data-purchase-motion=out],#card[data-purchase-motion=in]{will-change:transform;transform-origin:50% 50%} /* Warehouse: a printed goods ledger, ample tap areas, fixed purchase shelf. */ #card.warehouse-card{height:min(680px,calc(100dvh - 80px));max-width:420px} #card.warehouse-card .warehouse-shell{height:100%;max-height:100%} #card.warehouse-card .warehouse-head{padding:10px 14px 12px;border-bottom:2px solid #9e865c} #card.warehouse-card .costco-sign{height:76px;max-height:76px;aspect-ratio:auto} #card.warehouse-card .warehouse-heading{padding-top:5px} #card.warehouse-card .warehouse-heading h2{font-size:22px;padding-right:12px} #card.warehouse-card .warehouse-list{padding:12px 14px;mask-image:none;-webkit-mask-image:none} #card.warehouse-card .warehouse-list .wr{grid-template-columns:42px minmax(0,1fr) 84px;grid-template-rows:auto auto 8px;gap:5px 8px;min-height:108px;padding:12px 10px;background:#f4e7c05c} #card.warehouse-card .warehouse-list .ring{grid-column:1;grid-row:1/3;background:none;box-shadow:none;padding:0;width:40px;height:46px} #card.warehouse-card .warehouse-list .ring i{background:none} #card.warehouse-card .warehouse-list .wn{grid-column:2;grid-row:1;font-size:20px} #card.warehouse-card .warehouse-list .wn small{font-size:14px;white-space:normal!important;overflow:visible;line-height:1.35;font-weight:600} #card.warehouse-card .warehouse-list .wq{grid-column:2;grid-row:2;font-size:17px;text-align:left} #card.warehouse-card .warehouse-list button.enamel-button{grid-column:3;grid-row:1/3;width:84px;min-height:58px;font-size:21px} .wh-stock-track{grid-column:1/-1;grid-row:3;height:8px;overflow:hidden;background:#b4a17d77;border-radius:4px 3px 5px 3px;box-shadow:inset 0 1px #77624466} .wh-stock-track::before{content:'';display:block;width:var(--stock);height:100%;background:#567849 url(assets/print/ink-wear.svg);transition:width 180ms ease-out} #card.warehouse-card .warehouse-footer{padding:8px 14px 14px;border-top:2px solid #9e865c;box-shadow:none} #card.warehouse-card .warehouse-johnny{min-height:68px} #card.warehouse-card .warehouse-bubble{font-size:16px} #card.warehouse-card .warehouse-bubble br{display:none} #card.warehouse-card .warehouse-portrait{width:46px;height:54px} #card.warehouse-card .warehouse-buys{gap:10px} #card.warehouse-card .warehouse-buys button.warehouse-bulk{min-height:76px;gap:6px} #card.warehouse-card .warehouse-buys button.warehouse-bulk>span:not(.enamel-skin){font-size:16px;white-space:normal} #card.warehouse-card .warehouse-buys button.warehouse-bulk>b{font-size:25px} /* Main board HUD: cream cardboard, inked figures, restrained enamel. */ #top .cur{height:40px;border:2px solid #433323;border-radius:9px 7px 10px 8px;background:#efdfb7 url(assets/print/card-stock.webp) center/400px 600px;box-shadow:0 2px #292318} #top .cur b{font:800 22px/1 Bitter,Georgia,serif;color:#332b20} #qrow .qchip.m1-task{font-family:Bitter,Georgia,serif;min-height:59px;padding:8px 8px 10px;border-radius:10px 7px 9px 8px} #qrow .qchip.m1-task::before{display:none} #qrow .qchip.m1-task span{font-size:13px;font-weight:600;line-height:1.2} #qrow .qchip.m1-task b{font:800 18px/1.1 Bitter,Georgia,serif} #tilebar{border:2px solid #493720;border-radius:11px 8px 12px 9px;background:#efdfb7 url(assets/print/card-stock.webp) center/400px 600px} #tilebar #tbText{font:700 16px/1.25 Bitter,Georgia,serif} #tilebar .tb-good-icon{display:inline-block;width:27px;height:27px;object-fit:contain;vertical-align:middle;margin-right:6px} #tilebar>b{font:800 15px/1.2 Bitter,Georgia,serif} #dock{gap:8px} body.map-mode #dock{grid-template-columns:64px minmax(0,1fr) 64px;align-items:end} body.map-mode #dock #bJohnny{order:1}body.map-mode #dock .diebox{order:2}body.map-mode #dock #bShop{order:3} #dock .diebox{position:relative;padding-bottom:25px} #dock .diebox #sRolls{position:absolute;bottom:0;margin:0;font:800 18px/1.2 Bitter,Georgia,serif;background:#332b20;color:#efdfb7;border:1.5px solid #b69e6c;padding:2px 10px;border-radius:6px;box-shadow:0 2px #1c1914} #bRoll{position:relative;isolation:isolate;overflow:visible;background:#aa392b url(assets/print/ink-wear.svg)!important;border:2px solid #32291c;border-radius:15px 11px 14px 10px;box-shadow:0 4px #473120,0 6px 0 #d8be84;width:100%;max-width:none;height:74px;transform:none;display:flex;align-items:center;justify-content:center;gap:16px;color:#fff0c7;touch-action:manipulation} #bRoll::before{content:'';position:absolute;inset:0;border-radius:inherit;background:url(assets/print/button-frame.svg) center/100% 100%;z-index:-1;pointer-events:none} #bRoll .die{display:none} #bRoll .roll-label{display:none;font:800 22px/1 Bitter,Georgia,serif;letter-spacing:0;text-shadow:1px 1px #582519} body.map-mode #bRoll .roll-label{display:block} #bRoll:disabled{opacity:1;filter:saturate(.5)} #bRoll:active:not(:disabled){translate:0 3px;box-shadow:0 1px #473120,0 3px 0 #d8be84} #bRoll.guide-target{animation:none!important} /* Native corners keep a consistent radius even on the narrow +1 buttons. */ #card button.enamel-button::before,#bRoll::before{inset:4px;border:1.5px solid #e6d5a7!important;border-radius:8px 6px 7px 5px;background:url(assets/print/ink-wear.svg) center/280px 180px!important;box-shadow:0 0 0 1px #3b302280} .roll-cube-space{position:relative;display:block;width:52px;height:52px;flex:none;pointer-events:none} .roll-cube-space::after{content:'';position:absolute;bottom:1px;left:9px;width:34px;height:6px;background:#54281b66;border-radius:50%;filter:blur(2px);z-index:-1} .roll-cube-canvas,.roll-cube-fallback{position:absolute;display:block;left:-4px;top:-4px;width:60px!important;height:60px!important;object-fit:contain} .roll-cube-space.pressed{transform:translateY(3px) scale(1.10,.82)} .roll-cube-space.landed{animation:die-land 340ms ease-out} @keyframes die-land{0%{transform:translateY(-8px) scale(.95,1.05)}35%{transform:translateY(3px) scale(1.12,.8)}70%{transform:translateY(-2px) scale(.98,1.04)}100%{transform:none}} @media(max-width:360px){#card.print-property .srow .nm{font-size:23px}#card.print-property .property-body{padding:12px}#card.print-property .uup-stat b{font-size:22px}#card.business-property .srow .nm{font-size:19px}#card.warehouse-card .warehouse-list{padding:10px}#card.warehouse-card .warehouse-list .wn{font-size:18px}#card.warehouse-card .warehouse-footer{padding:8px 10px 12px}#bRoll{gap:10px}#bRoll .roll-label{font-size:20px}body.map-mode #dock{grid-template-columns:56px minmax(0,1fr) 56px}} @media(max-height:700px){#card.warehouse-card{height:calc(100dvh - 64px)}#card.warehouse-card .costco-sign{height:58px;max-height:58px}#card.print-property .property-picture{max-height:205px}#qrow .qchip.m1-task{min-height:54px}#bRoll{height:64px}} @media(prefers-reduced-motion:reduce){.roll-cube-space.landed{animation:none}.wh-stock-track::before{transition:none}} /* ---- chance-depth.css ---- */ /* Thick printed stock, low-sheen varnish and blind-embossed frame. */ .cu-matte{--tx:0deg;--ty:0deg;--lx:45%;--py:40%;--shade:.05;perspective:1100px;isolation:auto;touch-action:pan-y} .cu-tilt{height:100%;width:100%;position:relative;transform-style:preserve-3d;transform:rotateX(var(--tx)) rotateY(var(--ty))} .cu-matte .cu-spin{transform-style:preserve-3d} .cu-matte .cu-core{position:absolute;inset:0;border-radius:calc(var(--w)*.055);transform:translateZ(var(--z));background:#bea477;border:1px solid #796348;box-shadow:inset 0 0 0 1px #f0d7a1;pointer-events:none} .cu-matte .cu-core:nth-child(even){background:#e6cea2;border-color:#b89a6b} .cu-matte .cu-edge{position:absolute;top:4%;bottom:4%;width:8px;background:repeating-linear-gradient(90deg,#d8bd8b 0 1px,#89714c 1px 1.5px);transform:rotateY(90deg);pointer-events:none} .cu-matte .edge-l{left:-4px}.cu-matte .edge-r{right:-4px} .cu-matte .cu-face{transform:translateZ(4px);padding:calc(var(--w)*.08) calc(var(--w)*.075) calc(var(--w)*.09);border:2px solid #4a3523;border-radius:calc(var(--w)*.055);background:#eeddb4 url(interface/assets/paper.svg) center/100% 100%;box-shadow:inset 0 0 0 2px #dfc692,inset 0 0 0 calc(var(--w)*.032) var(--rc),inset 0 0 0 calc(var(--w)*.037) #624b30,inset 0 0 0 calc(var(--w)*.045) #f5dfae;color:#362c20} .cu-matte .cu-back{transform:rotateY(180deg) translateZ(4px)} .cu-matte .cu-face::before{content:'';position:absolute;inset:calc(var(--w)*.048);border:1px solid #8b6b414d;border-radius:calc(var(--w)*.025);box-shadow:0 1px 0 #fff3cd,inset 0 1px 2px #65482b29;pointer-events:none} .cu-matte .cu-face::after{content:'';position:absolute;inset:0;border:2px solid transparent;border-top-color:#ffedbc99;border-left-color:#ffedbc44;border-bottom-color:#3b291b80;border-radius:inherit;background:none;animation:none;pointer-events:none} .cu-matte .cu-stamp{top:calc(var(--w)*.078);right:calc(var(--w)*.08);border:1px solid #856b424d;border-radius:2px;background:none;color:#775937;font:700 calc(var(--w)*.036)/1.4 var(--txt,Golos,sans-serif);padding:2px 5px;letter-spacing:.09em;rotate:0deg;box-shadow:0 1px #fff0cc77} .cu-matte .cu-side{width:calc(var(--w)*.16);top:calc(var(--w)*.075);left:calc(var(--w)*.075);font-size:calc(var(--w)*.094);border:1.5px solid #493925;border-radius:50%;background:#47664e;box-shadow:inset 0 0 0 2px #f1dca7,inset 0 0 0 3px #3e503c,0 2px 1px #5c442445;color:#fce9bc} .cu-matte .cu-side.meh{background:#71624a}.cu-matte .cu-side.bad{background:#a4382e} .cu-matte .cu-title{font-size:calc(var(--w)*.092);line-height:1.08;margin-top:calc(var(--w)*.195);min-height:2.16em;display:flex;align-items:center;justify-content:center;text-shadow:0 1px #fff0ce;text-transform:none;letter-spacing:-.02em;width:96%} .cu-matte .cu-art{width:100%;margin:0;flex:1;min-height:0;isolation:isolate} .cu-matte .cu-art::before{border:0;opacity:.4;background:radial-gradient(ellipse,#b88f43 0,transparent 70%);width:100%;height:95%;border-radius:0} .cu-matte .cu-art img{filter:drop-shadow(0 2px 0 #6f512433);width:68%;height:100%;max-height:calc(var(--w)*.52);position:relative} .cu-matte .cu-vignette{background-image:url(assets/chance/vignettes.webp);background-size:200% 200%;background-repeat:no-repeat;flex:none;height:calc(var(--w)*.53);width:calc(var(--w)*.80);mix-blend-mode:multiply;mask-image:radial-gradient(ellipse at center,#000 52%,#000c 67%,transparent 78%)} .cu-matte .cu-vignette::before{display:none}.art-cash{background-position:0 0}.art-taxi{background-position:100% 0}.art-cargo{background-position:0 100%}.art-coffee{background-position:100% 100%} .cu-matte .cu-cap{margin-top:auto;font-size:calc(var(--w)*.064);line-height:1.2;min-height:2.6em;width:94%;padding:calc(var(--w)*.025) calc(var(--w)*.015) 0;justify-content:center;border-top:1px solid #8a6b454d;color:#3d4831} .cu-matte .cu-cap.bad{color:#913e2f}.cu-matte .cu-cap.empty{color:#786443} .cu-matte .cu-edition{font:700 calc(var(--w)*.027)/1 var(--txt,Golos,sans-serif);letter-spacing:.20em;margin-top:calc(var(--w)*.032);color:#9b7950;display:flex;align-items:center;gap:calc(var(--w)*.05)} .cu-matte .cu-edition i{font-style:normal;color:var(--rc)} .cu-matte .cu-diffuse{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at var(--lx) var(--py),#fff7d328,transparent 70%),linear-gradient(100deg,transparent,rgba(46,32,17,var(--shade)));box-shadow:inset 0 1px 0 #fff7d330} .cu-matte .cu-back .cu-diffuse{background:radial-gradient(ellipse at calc(100% - var(--lx)) var(--py),#fff7d328,transparent 70%),linear-gradient(260deg,transparent,rgba(46,32,17,var(--shade)))} .cu-matte.r-gold .cu-face{box-shadow:inset 0 0 0 2px #e3c782,inset 0 0 0 calc(var(--w)*.032) #a77e35,inset 0 0 0 calc(var(--w)*.038) #70542f,inset 0 0 0 calc(var(--w)*.047) #e6cb89} .cu-matte.r-gold .cu-face::after{border-top-color:#fff4bd;border-left-color:#f5dca880} .cu-matte.cu-mini .cu-core,.cu-matte.cu-mini .cu-edge{display:none}.cu-matte.cu-mini .cu-face{transform:none}.cu-matte.cu-mini .cu-title{font-size:calc(var(--w)*.098);margin-top:calc(var(--w)*.18)}.cu-matte.cu-mini .cu-cap{font-size:calc(var(--w)*.074)}.cu-matte.cu-mini .cu-edition{display:none} .cu-play{background:radial-gradient(ellipse at 50% 40%,#39433bef,#182622f5);overflow-y:auto;overscroll-behavior:contain} .cu-play .cu-stage .cu-rays{opacity:.07;animation:none;background:radial-gradient(ellipse,#e5c978,transparent 65%)} .cu-play .cu-big{--w:min(238px,56vw,31vh)} .cu-play .cu-shadow{height:18px;width:170px;background:#080e0cb3;filter:blur(9px);bottom:3px} .cu-play .cu-head h2{background:none;border:0;box-shadow:none;color:#f1dfbb;rotate:0deg;font-size:30px;letter-spacing:.02em;text-transform:none} .cu-play .cu-chip{border:0;border-bottom:1px solid #a89065;background:none;border-radius:0;color:#c8b98d;font-size:10px;letter-spacing:.2em;padding-bottom:5px} .cu-play .cu-hint{font-size:12px;color:#c7bc9d;min-height:30px}.cu-play .cu-opt{border-radius:4px;border-width:1px;font-size:12px;min-height:56px;box-shadow:0 3px #111e17}.cu-play .cu-opt.hit{box-shadow:0 3px #111e17,0 0 0 2px #c5a566;transform:translateY(-2px)} .cu-detail .cu-matte{--w:min(250px,65vw,38vh)} @media(prefers-reduced-motion:reduce){.cu-tilt{transform:none!important}} /* ---- chance-print.css ---- */ /* Printed Chance cards: one play surface, readable outcomes, thin cardboard. */ .cu-matte .cu-face{transform:translateZ(1px);background:#eddbb1 url(assets/print/card-stock.webp) center/400px;border-radius:15px 12px 14px 11px} .cu-matte .cu-back{transform:rotateY(180deg) translateZ(1px)} .cu-matte .cu-edge{width:2px;background:#bba479}.cu-matte .edge-l{left:-1px}.cu-matte .edge-r{right:-1px} .cu-matte .cu-core{border-radius:15px 12px 14px 11px} .cu-matte .cu-title{font-family:Bitter,Georgia,serif;font-weight:800;text-shadow:.5px .5px #715b3425;letter-spacing:-.035em} .cu-play{background:#151c17b8;padding:16px;overflow:auto;overflow-x:hidden} .cu-play-in{max-width:370px;gap:8px;margin:auto} .cu-play .cu-head{gap:5px}.cu-play .cu-head h2{font:800 28px/1.1 Bitter,Georgia,serif;color:#f2dfb5;padding:0} .cu-play .cu-big{--w:min(264px,calc(100vw - 88px),max(200px,calc((100dvh - 350px)/1.4)))} .cu-play .cu-stage{padding:9px 0 17px;flex:none} .cu-play .cu-title{font-size:24px;min-height:2.15em} .cu-play .cu-cap{font:700 18px/1.15 Bitter,Georgia,serif;border:0;min-height:2.4em;padding:4px 0 0} .cu-play .cu-stamp{font:700 13px/1.25 Bitter,Georgia,serif;letter-spacing:0;border:0;padding:3px 0;box-shadow:none} .cu-play .cu-side{font-family:Bitter,Georgia,serif} .cu-play .cu-art{min-height:0}.cu-play .cu-vignette{flex:1;height:auto;max-height:calc(var(--w)*.54)} .cu-play .cu-opts{grid-template-columns:1fr;gap:6px} .cu-play .cu-opt{font:700 17px/1.2 Bitter,Georgia,serif;min-height:50px;padding:9px 12px;border:2px solid #4b3b27;border-radius:9px 7px 8px 6px;box-shadow:0 2px #171c17;background:#e8d6ac url(assets/print/card-stock.webp) center/400px;gap:10px} .cu-play .cu-opt b{font:800 21px/1 Bitter,Georgia,serif;display:inline-block;width:21px} .cu-play .cu-opt-ic{width:32px;height:32px} .cu-play .cu-opt.hit{border-color:#31563c;box-shadow:0 2px #171c17,inset 0 0 0 1px #31563c;transform:none} .cu-play.win-bad .cu-opt.hit{border-color:#9c392c;box-shadow:0 2px #171c17,inset 0 0 0 1px #9c392c} .cu-play .cu-opt.miss{opacity:.62;transform:none} .cu-play .cu-hint{font:700 14px/1.25 Bitter,Georgia,serif;min-height:35px;margin:0;color:#f0dfb7;display:grid;place-items:center;max-width:320px} .cu-play .cu-stop,.cu-play .cu-take{min-height:56px} .cu-layer button.enamel-button{position:relative;background:#a73729!important;border:3px solid #2c281f!important;border-radius:12px 9px 11px 8px!important;box-shadow:0 4px #171d17!important;color:#fff0c5!important;font:800 24px/1.1 Bitter,Georgia,serif;text-shadow:1px 2px #34271966;isolation:isolate} .cu-layer button.enamel-button.ok{background:#466b44!important}.cu-layer button.enamel-button.sec{background:#536f73!important} .cu-layer button.enamel-button::before{content:'';position:absolute;inset:3px;border:1.5px solid #dbc99b!important;border-image:none!important;border-radius:8px 6px 7px 5px;background:url(assets/print/ink-wear.svg) center/280px 180px!important;box-shadow:none!important;pointer-events:none;z-index:-1} .cu-layer button.enamel-button::after,.cu-layer .enamel-skin{display:none!important} .cu-layer button.enamel-button:disabled{opacity:.65;filter:none!important} .cu-layer button.enamel-button:active:not(:disabled){translate:0 2px;box-shadow:0 2px #171d17!important} .cu-layer [hidden]{display:none!important} .cu-play .cu-rays{display:none} body.chance-playing #bRoll .roll-cube{animation-play-state:paused} .cu-panel,.cu-phead,.cu-pfoot{background:#e8d6ac url(assets/print/card-stock.webp) center/400px} .cu-panel{border-radius:18px 14px 17px 13px}.cu-phead h2{font-family:Bitter,Georgia,serif;text-transform:none} .cu-grid{grid-template-columns:repeat(2,minmax(0,1fr));mask-image:none;-webkit-mask-image:none;gap:16px 10px} .cu-grid .cu-card{--w:min(160px,calc((100vw - 76px)/2))} .cu-grid .cu-title{font-size:16px!important;min-height:2.2em}.cu-grid .cu-cap{display:none} .cu-grid .cu-art{max-height:90px}.cu-grid .cu-new,.cu-grid .cu-copies{font-size:13px} .cu-grid .cu-indeck{font-size:13px;background:#ebdbb5;border-radius:4px;padding:2px 4px} .cu-detail .cu-cap{font-size:18px}.cu-detail .cu-title{font-size:24px}.cu-detail .cu-opt{font-size:16px}.cu-detail .cu-opts{grid-template-columns:1fr} @media(max-height:690px){.cu-play .cu-title{font-size:21px;min-height:2.1em;margin-top:calc(var(--w)*.18)}.cu-play .cu-cap{font-size:16px}.cu-play .cu-stage{padding:4px 0 10px}.cu-play-in{gap:6px}.cu-play .cu-opt{min-height:46px;font-size:16px;padding:6px 10px}.cu-play .cu-head h2{font-size:24px}} @media(prefers-reduced-motion:reduce){.cu-play .cu-tilt{transform:none!important}.cu-opt{transition:none}.cu-play .cu-shadow{display:none}} .cu-layer button:focus-visible{outline:3px solid #ead19b;outline-offset:3px} /* ---- growth-tree.css ---- */ /* A folding board of printed objects, not a dashboard of stat upgrades. */ #modal:has(.growth-tree),#modal:has(.growth-summary){padding:18px;background:#151a17c9;backdrop-filter:none;align-items:center} #card.growth-tree,#card.growth-summary{--tree-paper:#eddbb1;--tree-ink:#30291f;--tree-red:#ac382b;--tree-green:#456443;background:var(--tree-paper) url(assets/print/card-stock.webp) center/440px!important;border:3px solid var(--tree-ink);border-radius:22px 16px 21px 17px;box-shadow:0 0 0 4px #ddc59a,0 8px 0 4px #211e17,0 22px 55px #0008;max-width:1000px;width:100%;height:min(830px,calc(100dvh - 44px));max-height:calc(100dvh - 44px)!important;overflow:hidden;isolation:isolate} #card.growth-tree .ev-head,#card.growth-tree .ev-foot,#card.growth-summary .ev-head,#card.growth-summary .ev-foot{background:none;border-color:#76613d77} #card.growth-tree .growth-header{padding:18px 24px 10px;gap:14px;border:0} #card.growth-tree h2.ev-title,#card.growth-summary h2.ev-title{font:800 34px/1.05 Bitter,Georgia,serif;color:var(--tree-ink);text-transform:none;letter-spacing:-.04em;rotate:0deg;background:none;border:0;box-shadow:none;padding:0;margin:0} .growth-wallet{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 8px;border:2px solid #8d7041;border-radius:50% 14px 15px 45%;background:#dcc08d;box-shadow:inset 0 0 0 2px #f4e0b1;white-space:nowrap} .growth-wallet .tree-pp{width:35px;height:35px}.growth-wallet b{font:800 29px/1 Bitter,Georgia,serif} #card.growth-tree .qm{width:38px;height:38px;min-width:38px;font-size:23px;border:2px solid #715c3a;color:#514329;background:none;box-shadow:none} .growth-route-wrap{flex:none;padding:4px 24px 12px} .growth-route{position:relative;display:flex;justify-content:space-between;gap:10px;padding-top:5px} .growth-route::before{content:'';position:absolute;left:9%;right:9%;top:24px;border-top:3px solid #9a865e;box-shadow:0 2px #fff0ca77;rotate:-.15deg} .growth-stop{position:relative;z-index:1;flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0} .growth-stop i{font:800 19px/1 Bitter,Georgia,serif;font-style:normal;display:grid;place-items:center;width:40px;height:40px;border:2.5px solid #665436;border-radius:48% 52% 46% 54%;background:#dbc699;box-shadow:inset 0 0 0 2px #f1dfb8;color:#594a30} .growth-stop>span{font:700 15px/1.15 Bitter,Georgia,serif;color:#6f5b39} .growth-stop.complete i{background:var(--tree-green);color:#fff0c9}.growth-stop.next i{background:var(--tree-red);color:#fff0c9;box-shadow:inset 0 0 0 2px #e8c388,0 0 0 3px #eddbb1,0 0 0 5px #a53e2b} .growth-stop.next>span{color:#9a3326}.growth-destination{display:none} .growth-tabs{display:none} #card.growth-tree .growth-body{padding:4px 20px 24px;scrollbar-color:#8c7148 #e8d3a7;scrollbar-width:thin;overscroll-behavior:contain;scroll-behavior:auto} #card.growth-tree .growth-body::after,#card.growth-summary .ev-body::after{display:none} .growth-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start} .growth-branch{min-width:0;position:relative} .growth-branch-title{font:800 22px/1.1 Bitter,Georgia,serif;margin:0 0 16px;padding:9px 0 13px;text-align:center;border-bottom:2px solid #6f563b66;color:#3d3325} .growth-line{position:relative;display:flex;flex-direction:column;gap:32px;padding:2px 3px 0;isolation:isolate} .growth-line::before{content:'';position:absolute;top:12px;bottom:20px;left:calc(50% - 2px);width:4px;background:#7c7957;box-shadow:2px 0 #f3e1b8;transform:rotate(.12deg);z-index:-1} .growth-root{position:relative;background:#d9d1a5 url(assets/print/ink-wear.svg) center/270px;border:2px solid #7b7955;border-radius:13px 9px 12px 10px;padding:12px;box-shadow:0 3px #6c68464d;text-align:center;min-height:132px;display:flex;flex-direction:column;justify-content:center;gap:10px} .growth-root-title{display:flex;align-items:center;justify-content:space-between;font:700 15px/1.2 Bitter,Georgia,serif;text-align:left;color:#4d5638} .growth-root-title b{font-size:16px}.growth-root-check{color:var(--tree-green);font-size:22px} .growth-root .growth-formats{margin:0 -5px}.growth-root .growth-formats img{height:66px}.growth-root figcaption{display:none} .growth-root>b{font:800 20px/1.15 Bitter,Georgia,serif}.growth-root>span{font:700 17px/1.15 Bitter,Georgia,serif} .growth-root-goods{display:flex;align-items:center;justify-content:center;gap:6px;font:700 16px/1.15 Bitter,Georgia,serif}.growth-root-goods img{width:32px;height:42px;object-fit:contain} .growth-node{position:relative;padding:13px 13px 12px;border:2.5px solid #6e5636;border-radius:15px 11px 14px 10px;background:#f1deb1 url(assets/print/card-stock.webp) center/380px;box-shadow:0 4px #51402a55,0 0 0 3px #f1dfb880;scroll-margin-top:12px;display:flex;flex-direction:column;min-width:0;gap:8px} .growth-node::before{content:'';position:absolute;top:-22px;left:calc(50% - 5px);width:10px;height:10px;border-right:3px solid #766848;border-bottom:3px solid #766848;rotate:45deg} .growth-node.available{border:3px solid #833d2b;box-shadow:0 4px #583a2655,0 0 0 3px #ebca8e;background-color:#f4dfaf} .growth-node.own{border-color:#536946;box-shadow:0 4px #53694644}.growth-node.own::before{border-color:#536946} .growth-node.locked{background-color:#dcccaa;border-color:#97825e;box-shadow:0 3px #6c60423d} .growth-node.locked .growth-formats,.growth-node.locked .growth-object,.growth-node.locked .growth-symbols{filter:saturate(.45);opacity:.73} .growth-node-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;font:700 14px/1.2 Bitter,Georgia,serif;color:#715c3c} .growth-node-meta b{color:#4c4933;white-space:nowrap;font-size:15px} #card.growth-tree .growth-node h3{font:800 21px/1.12 Bitter,Georgia,serif;letter-spacing:-.025em;margin:0;color:var(--tree-ink);text-transform:none} .growth-node p{font:600 16px/1.32 var(--txt,Golos,sans-serif);margin:0;color:#55452d} .growth-formats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 -7px;align-items:start} .growth-formats figure{margin:0;min-width:0}.growth-formats img{display:block;width:100%;height:100px;object-fit:contain}.growth-formats figcaption{font:700 15px/1.2 Bitter,Georgia,serif;color:#55442b;text-align:center;padding:2px 2px 0} .growth-object{height:124px;margin:-4px -8px}.growth-object img{width:100%;height:100%;object-fit:contain} .growth-symbols{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;min-height:90px;padding:4px 0}.growth-symbols img{width:58px;height:72px;object-fit:contain}.growth-symbols img:only-child{width:78px;height:82px} .growth-symbols.business-symbol img{filter:drop-shadow(1px 3px #7d5b362b)} .growth-node-action{min-height:48px;margin-top:5px;display:flex;align-items:center;justify-content:center} #card .growth-node .tree-buy{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;min-height:48px;margin:0;padding:10px 14px;font:800 19px/1 Bitter,Georgia,serif;background:#a83b2b!important;color:#fff0c4!important;border:2.5px solid #372b1c;border-radius:9px 7px 8px 6px;box-shadow:0 3px #422e1d;position:relative;isolation:isolate} #card .growth-node .tree-buy span{display:flex;align-items:center;gap:4px}.growth-node .tree-buy .tree-pp{width:26px;height:26px} #card .growth-node .tree-buy::before{content:'';position:absolute;inset:3px;border:1px solid #e4c98a;border-radius:5px;background:url(assets/print/ink-wear.svg) center/250px;z-index:-1;pointer-events:none} .growth-stamp{display:block;border:2px solid #4f7148;border-radius:5px 3px 4px 3px;padding:6px 22px;color:#456443;font:800 20px/1.05 Bitter,Georgia,serif;rotate:-3deg;background:url(assets/print/ink-wear.svg) center/190px;box-shadow:inset 0 0 0 2px #f3dfb277} .growth-lock{display:flex;align-items:center;gap:7px;font:700 15px/1.15 Bitter,Georgia,serif;color:#756345}.growth-lock img{width:21px;height:24px;object-fit:contain} #card.growth-tree .ev-foot{padding:12px 20px 16px;border-top:2px solid #9c815655;background:#e6d0a4 url(assets/print/card-stock.webp) center/440px} #card.growth-tree .ev-foot .mbtns{display:flex;justify-content:center} #card.growth-tree #treeGo{width:100%;max-width:480px;white-space:normal;font:800 21px/1.15 Bitter,Georgia,serif;min-height:56px} #card.growth-tree #treeGo:disabled{color:#f3e8c8!important;background:#817b60!important;opacity:1!important} .growth-flying-token{position:fixed;width:32px;height:32px;z-index:200;pointer-events:none}.growth-flying-token .tree-pp{width:100%;height:100%} .growth-node.just .growth-stamp{animation:growthStamp .3s cubic-bezier(.2,.8,.2,1) both} @keyframes growthStamp{0%{transform:scale(1.65) rotate(7deg);opacity:0}65%{transform:scale(.95) rotate(-1deg);opacity:1}100%{transform:none}} #card.growth-tree button:focus-visible{outline:3px solid #516c78;outline-offset:3px} /* The map-end receipt leads to the same illustrated tree. */ #card.growth-summary{max-width:480px;height:auto} #card.growth-summary .ev-head{padding:18px 20px}#card.growth-summary h2.ev-title{font-size:29px} #card.growth-summary .ev-body{padding:8px 20px 20px}.growth-summary-art{margin:0 0 14px}.growth-summary-art .growth-formats img{height:140px}.growth-summary-art figcaption{font-size:16px} #card.growth-summary .tree-sum>div{background:none;border:0;border-right:2px solid #97805c66;border-radius:0;box-shadow:none;padding:6px 2px}#card.growth-summary .tree-sum>div:last-child{border:0} #card.growth-summary .tree-sum small,#card.growth-summary .tree-convert small{font-size:15px}#card.growth-summary .tree-sum b{font:800 23px/1.4 Bitter,Georgia,serif} #card.growth-summary .tree-convert{background:#caba87 url(assets/print/ink-wear.svg);border:2px solid #776441;box-shadow:0 3px #7e704f55}.growth-summary .tree-convert b{font:800 26px/1.4 Bitter,Georgia,serif} #card.growth-summary .tree-note{font-size:16px;line-height:1.35}#card.growth-summary .tree-pp-gain{border:0;border-top:2px solid #91744266;background:none;border-radius:0;padding:14px 0 0}#card.growth-summary .tree-pp-gain span{font-size:16px} @media(max-width:760px){ #modal:has(.growth-tree),#modal:has(.growth-summary){padding:13px 10px} #card.growth-tree{max-width:460px;height:calc(100dvh - 32px);max-height:calc(100dvh - 32px)!important;border-radius:17px 13px 16px 12px} #card.growth-tree .growth-header{padding:12px 14px 8px;gap:10px}#card.growth-tree h2.ev-title{font-size:29px} .growth-wallet{padding:3px 9px 3px 5px;gap:4px}.growth-wallet b{font-size:25px}.growth-wallet .tree-pp{width:29px;height:29px} .growth-route-wrap{padding:2px 18px 10px}.growth-route{padding-top:4px;gap:8px}.growth-stop>span{display:none}.growth-stop i{width:34px;height:34px;font-size:18px}.growth-route::before{top:21px;left:9%;right:9%} .growth-destination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:10px;font:700 16px/1.15 Bitter,Georgia,serif;color:#665238}.growth-destination b{color:#943828}.growth-destination>span{font-size:22px} .growth-tabs{display:flex;flex:none;margin:0 12px 8px;border-bottom:2px solid #8f734c77;gap:4px;padding:0 0 5px} #card.growth-tree .growth-tabs button{flex:1;padding:9px 3px;display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;background:none;border:0;border-radius:6px 4px 5px 3px;box-shadow:none;font:800 17px/1.1 Bitter,Georgia,serif;color:#675333} #card.growth-tree .growth-tabs button[aria-selected=true]{color:#a23327;background:#c9ab7130;box-shadow:0 3px #a33a2b} .growth-tabs button span{font:800 13px/1 Bitter,Georgia,serif;min-width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#a23a29;color:#ffedc0}.growth-tabs button .branch-done{background:none;color:#456443;font-size:18px} #card.growth-tree .growth-body{padding:6px 17px 24px}.growth-columns{display:block}.growth-branch{display:none}.growth-branch.selected{display:block}.growth-branch-title{display:none} .growth-line{gap:30px}.growth-node{padding:13px 15px 12px}.growth-node-meta{font-size:15px}.growth-node-meta b{font-size:16px}#card.growth-tree .growth-node h3{font-size:24px} .growth-formats img{height:110px}.growth-formats figcaption{font-size:16px}.growth-node p{font-size:17px}.growth-node .growth-object{height:138px} #card.growth-tree .ev-foot{padding:10px 14px 12px}#card.growth-tree #treeGo{font-size:18px;min-height:52px} #card.growth-summary{max-height:calc(100dvh - 32px)!important}.growth-summary-art .growth-formats img{height:115px} } @media(max-width:370px){#card.growth-tree h2.ev-title{font-size:26px}.growth-destination{font-size:15px;gap:6px}#card.growth-tree .growth-tabs button{font-size:16px}.growth-node-meta{font-size:14px}.growth-formats img{height:90px}.growth-formats figcaption{font-size:15px}#card.growth-tree .growth-node h3{font-size:22px}} @media(prefers-reduced-motion:reduce){.growth-node.just .growth-stamp{animation:none}.growth-flying-token{display:none}} /* Branch navigation stays ink on paper; the shared button decorator must not turn it into three CTAs. */ #card.growth-tree .growth-tabs button.enamel-button{background:none!important;border:0!important;box-shadow:none!important;color:#675333!important;text-shadow:none!important} #card.growth-tree .growth-tabs button.enamel-button[aria-selected=true]{background:#c9ab7130!important;color:#a23327!important;box-shadow:0 3px #a33a2b!important} #card.growth-tree .growth-tabs button::before,#card.growth-tree .growth-tabs button::after,#card.growth-tree .growth-tabs .enamel-skin{display:none!important} @media(min-width:761px){.growth-branch-title{position:sticky;top:0;z-index:4;background:#eddbb1 url(assets/print/card-stock.webp) center/440px;box-shadow:0 -14px 0 #eddbb1;margin-bottom:12px}} @media(min-width:761px){ #card.growth-tree .growth-body{overflow:hidden;padding-bottom:0} .growth-columns{height:100%;align-items:stretch} .growth-branch{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9b8055 transparent;padding:0 4px 24px} .growth-branch-title{top:0;padding-top:10px;margin-top:0} } @media(max-width:760px) and (max-height:700px){.growth-node .growth-object{height:104px}.growth-node p{font-size:16px}.growth-node .growth-symbols{min-height:70px}.growth-node .growth-symbols img:only-child{height:68px}} @media(min-width:761px){.growth-branch{padding-bottom:clamp(110px,calc(100dvh - 610px),300px)}} /* ---- property-compact.css ---- */ /* Property cards fit as one sheet. Illustration yields space before readable controls do. */ #modal:has(#card.print-property){padding:14px 12px 116px} #card.bare.illustrated-property.print-property{max-width:380px;height:min(560px,calc(100dvh - 144px));max-height:calc(100dvh - 144px)!important;overflow:visible} #card.print-property .shop{overflow:visible} #card.print-property .property-body{overflow:visible;overscroll-behavior:auto;padding:10px 12px 4px;gap:0;min-height:0} #card.print-property .property-picture{flex:1 1 180px;height:0;min-height:76px;max-height:200px;aspect-ratio:auto;margin:2px 0 6px;overflow:visible} #card.print-property .property-illustration{object-fit:contain;width:100%;height:100%} #card.print-property .srow{flex:none;min-height:40px;padding:0 32px 2px 0;margin:0 0 3px;gap:7px} #card.print-property .srow .ico{width:34px;height:36px} #card.print-property .srow .nm{font-size:23px;line-height:1.12} #card.print-property .srow .lvl{font-size:18px;min-width:52px;padding:5px 8px} #card.print-property .srow .qm{width:34px;min-width:34px;height:34px;min-height:34px;font-size:21px;line-height:30px} #card.print-property .shop .box{min-height:42px;padding:7px 10px;margin:0 0 6px;gap:8px;font-size:17px;line-height:1.2} #card.print-property .shop .box b{font-size:21px;line-height:1.1} #card.print-property .shop .box small{font-size:15px;line-height:1.2} #card.print-property .shop .bar{height:7px} #card.print-property .shop .uup{padding:6px;margin:0} #card.print-property .shop .uup-stats{gap:4px;margin:0} #card.print-property .shop .uup-stat{padding:3px 6px;gap:3px} #card.print-property .shop .uup-stat small{font-size:15px;line-height:1.2;margin:0 0 2px} #card.print-property .shop .uup-stat b{font-size:21px;line-height:1.1} #card.print-property .shop .uup-stat i{font-size:17px} #card.print-property .shop .uup-max{font-size:15px;line-height:1.2;margin:0;padding:0} #card.print-property .shop .uup:has(.uup-max){border:0;background:none;padding:3px 2px} #card.print-property .property-actions{gap:6px;padding:6px 12px 12px;flex:none;background:none} #card.print-property .shop .buy,#card.print-property .shop button.uup-btn{min-height:52px;padding:8px 12px;font-size:21px;margin:0} #card.print-property .shop button.uup-btn>b{font-size:23px;padding-left:8px} #card.print-property .shop button.uup-btn>span:not(.enamel-skin) small{font-size:14px;line-height:1.2;margin-top:3px} #card.print-property .property-actions .wide{gap:8px;padding:6px 8px;min-height:64px} #card.print-property .property-actions .wide .n{font-size:15px;line-height:1.18;min-width:0} #card.print-property .property-actions .wide small{font-size:14px;line-height:1.2} #card.print-property .property-actions .wide button{font-size:20px;min-height:44px;padding:8px 10px} #card.print-property .shop .need,#card.print-property .shop .hintline{padding:4px 0;margin:0;font-size:15px;line-height:1.2} #card.print-property .xclose{width:44px;height:44px} /* Business upgrades use the same compact rows and keep their original handlers. */ #card.business-property .srow .nm{font-size:20px;line-height:1.12} #card.business-property .m1-bizlock{font-size:15px;line-height:1.3;padding:8px 0;margin:0} #card.business-property .shop .two{gap:6px;margin:0 0 5px} #card.business-property .shop .two .up{position:relative;padding:8px;gap:4px} #card.business-property .shop .two .uic{display:none} #card.business-property .shop .two .lab{font-size:16px;line-height:1.2} #card.business-property .shop .two .nums{font-size:21px;line-height:1.2} #card.business-property .shop .two .pb{font-size:14px;line-height:1.2;margin:3px 0} #card.business-property .shop .two button:not(.qm){min-height:44px;padding:7px 10px;font-size:18px} #card.business-property .shop .two .up:only-child{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px} #card.business-property .shop .two .up:only-child .lab{grid-column:1;padding-right:20px} #card.business-property .shop .two .up:only-child .nums{grid-column:1;grid-row:2} #card.business-property .shop .two .up:only-child button:not(.qm){grid-column:2;grid-row:1/3;margin:0} #card.business-property .shop .two .up .qm{top:0;right:5px;width:25px;height:25px;font-size:17px;line-height:23px;transform:translateY(-70%)} @media(max-height:700px){ #card.print-property .property-picture{flex-basis:130px;max-height:150px;min-height:64px} #card.print-property .property-body{padding-top:9px} #card.print-property .srow .nm{font-size:22px} #card.print-property .shop .box{min-height:39px;padding:6px 9px;margin-bottom:5px;font-size:16px} #card.print-property .shop .box b{font-size:20px} #card.print-property .property-actions{padding-bottom:10px} #card.business-property .srow .nm{font-size:19px} } @media(max-width:360px){#card.print-property .property-body{padding-inline:10px}#card.print-property .property-actions{padding-inline:10px}#card.print-property .shop .uup-stat small{font-size:14px}} /* ---- warehouse-compact.css ---- */ /* Warehouse: short lists fit naturally; only the goods scroll in a long list. */ #modal:has(#card.warehouse-card){flex-direction:column;gap:11px;padding: max(18px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))} .warehouse-cash{display:none} #modal:has(#card.warehouse-card)>.warehouse-cash{display:flex;align-items:center;gap:12px;flex:none;padding:5px 14px;color:#fff0c9;background:#35392c;border:2px solid #dcc695;border-radius:9px 7px 9px 7px;box-shadow:0 3px #211c17;font:800 22px/1.2 Bitter,Georgia,serif} .warehouse-cash>span{font:700 13px/1.1 Bitter,Georgia,serif;color:#e6d6af}.warehouse-cash>b{display:flex;align-items:center;gap:5px}.warehouse-cash .cash-glyph{margin:0;width:25px;height:25px} #card.warehouse-card{height:auto;flex:0 1 auto;width:100%;max-width:450px;max-height:calc(100dvh - 112px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;overflow:hidden} #card.warehouse-card .warehouse-shell{height:auto;max-height:inherit;min-height:0;display:flex;flex-direction:column} #card.warehouse-card .warehouse-head{position:relative;display:flex;align-items:center;gap:10px;flex:none;padding:15px 95px 14px 17px;border-bottom:2px solid #a28a5b} #card.warehouse-card .warehouse-head-icon{width:38px;height:42px;object-fit:contain;flex:none} #card.warehouse-card .warehouse-heading{display:block;padding:0;min-width:0} #card.warehouse-card .warehouse-heading h2{font:900 26px/1.05 Bitter,Georgia,serif;margin:0;padding:0} #card.warehouse-card .warehouse-head p{display:block;font:600 13px/1.25 Bitter,Georgia,serif;color:#715d3c;margin:5px 0 0;white-space:normal} #card.warehouse-card .warehouse-help{position:absolute;right:57px;top:17px} #card.warehouse-card .warehouse-help .qm{width:30px;height:30px;min-height:30px;padding:0;line-height:26px;font-size:20px} #card.warehouse-card .painted-close{right:6px;top:7px;width:45px;height:45px;min-height:45px} #card.warehouse-card .warehouse-list-caption{display:flex;align-items:center;justify-content:space-between;flex:none;padding:9px 16px 4px;color:#796343;font:700 12px/1.2 Bitter,Georgia,serif} #card.warehouse-card .warehouse-list{padding:0 13px 8px;flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;mask-image:none;-webkit-mask-image:none;scrollbar-gutter:stable;scrollbar-width:thin} #card.warehouse-card .warehouse-list:focus-visible{outline:2px solid #c99836;outline-offset:-2px} #card.warehouse-card .warehouse-list .wr{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) 84px;grid-template-rows:auto auto auto;gap:3px 8px;min-height:86px;padding:10px 4px 14px;margin:0;border:0;border-bottom:1.5px solid #aa916044;border-radius:0;background:none;box-shadow:none} #card.warehouse-card .warehouse-list .wr:last-child{border-bottom:0} #card.warehouse-card .warehouse-list .wr.trend{background:#e6be5530;outline:0} #card.warehouse-card .warehouse-list .ring{grid-column:1;grid-row:1/4;width:32px;height:40px;padding:0;background:none;box-shadow:none} #card.warehouse-card .warehouse-list .ring i{background:none;border-radius:0} #card.warehouse-card .warehouse-good-art{display:block;width:36px;height:40px;object-fit:contain} #card.warehouse-card .warehouse-list .wn{grid-column:2;grid-row:1;align-self:center;font:900 18px/1.12 Bitter,Georgia,serif;overflow-wrap:normal;min-width:0} #card.warehouse-card .warehouse-list .wq{grid-column:2;grid-row:2;align-self:center;text-align:left;font:800 16px/1.15 Bitter,Georgia,serif;white-space:normal} #card.warehouse-card .wq>span{font:600 12px/1.2 Bitter,Georgia,serif;color:#786344}.warehouse-card .wq b small{font:700 13px/1.1 Bitter,Georgia,serif;color:#85724e} #card.warehouse-card .warehouse-meta{grid-column:2;grid-row:3;align-self:start;font:600 12px/1.25 Bitter,Georgia,serif;color:#786344;white-space:normal!important;margin:0;min-width:0} #card.warehouse-card .warehouse-meta .cash-glyph{width:13px;height:13px;margin:0 1px;vertical-align:-2px} #card.warehouse-card .warehouse-list button.enamel-button{grid-column:3;grid-row:1/4;align-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:84px;height:auto;min-height:52px;padding:6px 5px;font:800 14px/1.1 Bitter,Georgia,serif!important;border-radius:9px 7px 9px 7px} #card.warehouse-card .warehouse-list button.enamel-button:not(:disabled){background:#3c5c3b!important} #card.warehouse-card .warehouse-unit-price{display:flex;align-items:center;justify-content:center;gap:3px;font:900 19px/1 Bitter,Georgia,serif;white-space:nowrap} #card.warehouse-card .warehouse-unit-price .cash-glyph{margin:0;width:22px;height:22px;flex:none} #card.warehouse-card .wh-stock-track{position:absolute;left:44px;right:98px;bottom:5px;height:4px;background:#9e8d6540} #card.warehouse-card .warehouse-footer{flex:none;padding:10px 14px 12px;border-top:2px solid #a28a5b;box-shadow:none} #card.warehouse-card .warehouse-buys{display:grid;grid-template-columns:1.15fr 1fr;gap:9px} #card.warehouse-card .warehouse-buys:has(>button:only-child){grid-template-columns:1fr} #card.warehouse-card .warehouse-buys button.warehouse-bulk{width:100%;min-width:0;min-height:52px;padding:6px 7px;gap:1px;justify-content:center;border-radius:9px 7px 9px 7px} #card.warehouse-card .warehouse-buys button.warehouse-bulk>span:not(.enamel-skin){font:800 14px/1.05 Bitter,Georgia,serif!important;min-height:0;white-space:normal;display:block} #card.warehouse-card .warehouse-buys button.warehouse-bulk>b{display:flex;justify-content:center;align-items:center;gap:3px;border:0;padding:0;font:900 20px/1 Bitter,Georgia,serif} #card.warehouse-card .warehouse-buys button.warehouse-bulk>b small{font:600 12px/1 Bitter,Georgia,serif} #card.warehouse-card .warehouse-buys .cash-glyph{width:23px;height:23px;margin:0} #card.warehouse-card .warehouse-half{background:#dfcca0!important;color:#43341e!important;text-shadow:none} #card.warehouse-card .warehouse-half::before{opacity:.5} #card.warehouse-card .warehouse-buy-note{display:block;margin:9px 0 0;font:600 11px/1.3 Bitter,Georgia,serif;color:#77603e;text-align:center} #card.warehouse-card .warehouse-empty{padding:22px 14px 26px;font:600 15px/1.4 Bitter,Georgia,serif}#card.warehouse-card .warehouse-empty b{font-size:19px}#card.warehouse-card .warehouse-empty p{margin:8px 0 0} @media(max-width:360px){#card.warehouse-card .warehouse-head{padding:12px 84px 12px 12px;gap:7px}#card.warehouse-card .warehouse-head-icon{width:28px;height:35px}#card.warehouse-card .warehouse-heading h2{font-size:23px}#card.warehouse-card .warehouse-head p{font-size:12px}#card.warehouse-card .warehouse-help{right:49px;top:15px}#card.warehouse-card .painted-close{width:39px;height:39px;min-height:39px}#card.warehouse-card .warehouse-list{padding:0 9px 6px}#card.warehouse-card .warehouse-list .wr{grid-template-columns:25px minmax(0,1fr) 73px;gap:3px 6px}#card.warehouse-card .warehouse-list .ring{width:25px}#card.warehouse-card .warehouse-good-art{width:28px;height:34px}#card.warehouse-card .warehouse-list .wn{font-size:16px}#card.warehouse-card .warehouse-list button.enamel-button{width:73px;font-size:12px!important}#card.warehouse-card .warehouse-list .wq{font-size:14px}#card.warehouse-card .wq>span{font-size:11px}#card.warehouse-card .warehouse-meta{font-size:11px}#card.warehouse-card .wh-stock-track{left:35px;right:83px}#card.warehouse-card .warehouse-footer{padding:9px 10px 10px}#card.warehouse-card .warehouse-buys{gap:7px}#card.warehouse-card .warehouse-buys button.warehouse-bulk>span:not(.enamel-skin){font-size:12px!important}} /* Help uses the same printed button instead of the stretched old bitmap. */ #helpDialog button.enamel-button{position:relative;background:#3e4237!important;color:#fff0c9!important;border:0!important;border-radius:12px 9px 11px 8px;box-shadow:1px 3px #30291f;isolation:isolate;overflow:hidden;font:800 19px/1.2 Bitter,Georgia,serif;font-family:Bitter,Georgia,serif!important;min-height:50px;text-shadow:1px 1px #25211780} #helpDialog button.enamel-button::before{content:'';position:absolute;inset:0;z-index:-1;border:0!important;border-image:none!important;border-radius:inherit;background:url(assets/print/button-frame.svg) center/100% 100% no-repeat,url(assets/print/ink-wear.svg) center/280px 180px!important;pointer-events:none} #helpDialog button.enamel-button .enamel-skin{display:none!important} /* ---- property-upgrade-fx.css ---- */ #card.print-property .property-picture{position:relative;isolation:isolate} #card.print-property .property-illustration{position:relative;z-index:1} .property-fx-old{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none} /* The turning sheet is an exact frozen copy of the real card, at the same bounds. */ .property-evolution{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:#f4e4bf;font-family:Bitter,Georgia,serif} .property-evolution::backdrop{background:transparent} .evolution-flight{position:absolute;perspective:1400px;transform-origin:50% 50%;pointer-events:none;will-change:transform} .evolution-turner{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform} .evolution-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d} .evolution-before{transform:rotateY(0deg)} .evolution-after{transform:rotateY(180deg)} .evolution-sheet-copy{backface-visibility:hidden;-webkit-backface-visibility:hidden} .evolution-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* ---- number-drum.css ---- */ /* The badge itself never moves. Only changed digits travel inside this aperture. */ #card .lvl.number-drum{overflow:hidden;position:relative} .number-drum-face{display:inline-flex;align-items:center;vertical-align:middle;line-height:1.08;font-variant-numeric:tabular-nums;white-space:pre} .number-drum-cell{display:inline-block;position:relative;width:.68em;height:1.08em;line-height:1.08;overflow:hidden;vertical-align:middle;contain:paint} .number-drum-strip{position:absolute;inset:0 0 auto;display:flex;flex-direction:column;will-change:transform} .number-drum-strip>span{display:block;height:1.08em;line-height:1.08;flex:none;text-align:center} .number-drum-readable{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} @media(prefers-reduced-motion:reduce){.number-drum-strip{animation:none!important}} /* ---- start-screen.css ---- */ /* A printed game-box cover, composed independently for each orientation. */ body #boot{position:fixed;inset:0;z-index:300;width:100%;height:100%;height:100dvh;max-width:none;margin:0;padding:0;display:block;overflow:hidden;background:#385664;color:#f3e1b9;text-align:center;isolation:isolate;font-family:Bitter,Georgia,serif} body.engine-ready #boot{display:block} body #boot[hidden]{display:none!important} #boot .start-city{position:absolute;inset:0;z-index:-3;display:block} #boot .start-city img{display:block;width:100%;height:100%;object-fit:cover;object-position:center} #boot .start-print-edge{position:absolute;inset:12px;z-index:5;border:2px solid #efdfb78c;border-radius:9px 6px 10px 7px;box-shadow:0 0 0 5px #30261b40,inset 0 0 0 2px #30261b4d;pointer-events:none} #boot .start-title{position:absolute;z-index:3;top:max(5.5%,env(safe-area-inset-top));left:7%;width:86%;animation:start-title-in 500ms cubic-bezier(.2,.8,.25,1) both;transform:rotate(-2deg)} #boot .start-title h1{margin:0;color:#a53627;font:800 clamp(32px,11.5vw,76px)/.92 Bitter,Georgia,serif;text-transform:uppercase;letter-spacing:-.025em;filter:drop-shadow(0 4px 0 #30261b)} #boot .start-title h1 span,#boot .start-title h1 strong{display:block;-webkit-text-stroke:clamp(2px,.55vw,4px) #f6e8c6;paint-order:stroke fill} #boot .start-title h1 strong{font-size:2.25em;line-height:.95;letter-spacing:-.025em;padding-right:.025em} #boot .start-title p{display:inline-block;max-width:100%;margin:13px 0 0;padding:5px 12px 6px;background:#efdfb7;color:#352b20;box-shadow:0 3px #30261b;font:700 clamp(12px,3.45vw,18px)/1.25 Bitter,Georgia,serif;border-radius:3px 2px 4px 2px} #boot .start-character{position:absolute;z-index:2;left:17%;width:66%;top:30%;height:49%;transform-origin:50% 85%;animation:start-boy-sway 7s ease-in-out infinite} #boot .start-character::after{content:'';position:absolute;z-index:-1;left:22%;right:22%;bottom:1%;height:4%;background:#30261b66;border-radius:50%;filter:blur(5px)} #boot .start-character img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(3px 5px 0 #30261b55)} #boot .start-sun{position:absolute;z-index:1;right:4%;top:29%;width:clamp(65px,20vw,120px);height:auto;animation:start-sun-drift 10s ease-in-out infinite;transform-origin:center} #boot .start-cloud{position:absolute;z-index:-2;width:130px;height:36px;background:url(assets/start/cloud.svg) center/contain no-repeat;opacity:.6;pointer-events:none;animation:start-cloud-drift 22s ease-in-out infinite} #boot .start-cloud-one{top:27%;left:-35px} #boot .start-cloud-two{top:42%;right:-40px;width:100px;animation-delay:-9s;animation-duration:28s} #boot .start-controls{position:absolute;z-index:4;left:11%;width:78%;bottom:max(5%,calc(env(safe-area-inset-bottom) + 16px));display:flex;flex-direction:column;align-items:center;gap:10px} #boot .start-loading{width:100%;min-height:39px;display:flex;flex-direction:column;align-items:center;gap:7px} #boot .boot-meter{width:88%;height:10px;border:2px solid #30261b;border-radius:5px;background:#eddbb4;box-shadow:0 2px #30261b80;overflow:hidden} #boot .boot-meter i{height:100%;background:#a53627 url(assets/print/ink-wear.svg) center/240px;transition:width 200ms ease-out} #boot #loadProgress{font:700 13px/1.2 Bitter,Georgia,serif;color:#f6e8c6;text-shadow:0 1px 2px #30261b,1px 0 #30261b,-1px 0 #30261b} #boot #startPlay{display:block;width:100%;max-width:340px;min-height:60px;margin:0;padding:12px 28px 14px;border:3px solid #30261b;outline:2px solid #efdfb7;border-radius:13px 10px 15px 11px;background:#aa3628 url(assets/print/ink-wear.svg) center/350px 180px;box-shadow:inset 0 0 0 2px #edd7a2,0 5px #30261b;color:#fff0cb;font:800 29px/1 Bitter,Georgia,serif;text-shadow:1px 2px #5d251d;cursor:pointer;transition:translate 100ms ease,filter 100ms ease} #boot #startPlay:disabled{background-color:#746e53;color:#e6ddbd;cursor:wait;filter:saturate(.5)} #boot #startPlay:active:not(:disabled){translate:0 3px;box-shadow:inset 0 0 0 2px #edd7a2,0 2px #30261b} #boot #startPlay:focus-visible,#boot #bootFull:focus-visible{outline:3px solid #f8e8bf;outline-offset:5px} #boot #bootFull{position:relative;min-height:32px;margin:2px 0 0;padding:4px 10px;color:#f6e8c6;font:700 13px/1.2 Bitter,Georgia,serif;background:#30261b9c;border:1px solid #e6d4a588;border-radius:4px;box-shadow:none;text-shadow:none} #boot #bootFull[hidden]{display:none} #boot.start-ready .start-loading{visibility:hidden} #boot.start-ready #startPlay{animation:start-play-ready 320ms ease-out} body #boot.start-closing{animation:start-cover-out 220ms ease-in forwards;pointer-events:none} @keyframes start-title-in{from{opacity:0;translate:0 -12px;scale:.97}to{opacity:1;translate:0 0;scale:1}} @keyframes start-boy-sway{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-3px) rotate(.6deg)}} @keyframes start-sun-drift{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}} @keyframes start-cloud-drift{0%,100%{translate:-8px 0}50%{translate:12px 0}} @keyframes start-play-ready{0%{scale:.97}65%{scale:1.025}100%{scale:1}} @keyframes start-cover-out{to{opacity:0;scale:1.015}} @media(orientation:landscape){ #boot .start-title{top:16%;left:5%;width:44%} #boot .start-title h1{font-size:clamp(34px,5.1vw,86px)} #boot .start-title p{font-size:clamp(12px,1.35vw,18px);margin-top:17px} #boot .start-character{top:8%;left:51%;width:39%;height:82%} #boot .start-sun{top:7%;right:5%;width:clamp(80px,10vw,150px)} #boot .start-controls{left:11%;width:32%;bottom:12%;gap:12px} #boot #startPlay{max-width:360px;min-height:65px;font-size:32px} #boot .start-cloud-one{top:7%;left:36%;width:170px} #boot .start-cloud-two{top:28%;right:0;width:150px} } @media(orientation:portrait) and (min-width:600px){ #boot .start-title{top:6%}#boot .start-title h1{font-size:clamp(60px,8.5vw,95px)} #boot .start-character{top:32%;height:46%} #boot .start-controls{left:25%;width:50%} } @media(max-height:650px) and (orientation:portrait){ #boot .start-title{top:5%}#boot .start-title h1{font-size:clamp(29px,8vw,45px)} #boot .start-title p{font-size:11px;margin-top:9px} #boot .start-character{top:33%;height:41%} #boot .start-controls{bottom:4%;gap:7px}#boot #startPlay{min-height:52px;font-size:25px} #boot .start-loading{min-height:30px;gap:4px} } @media(max-height:450px) and (orientation:landscape){ #boot .start-title{top:9%}#boot .start-title h1{font-size:clamp(30px,4.4vw,48px)} #boot .start-title p{font-size:11px;margin-top:10px} #boot .start-controls{bottom:8%;gap:6px}#boot #startPlay{min-height:47px;font-size:26px} #boot .start-loading{min-height:25px;gap:4px}#boot #bootFull{min-height:24px;font-size:11px} } @media(prefers-reduced-motion:reduce){#boot *,body #boot.start-closing{animation:none!important;transition:none!important}} body.page-hidden #boot *{animation-play-state:paused!important} #boot.start-paused *{animation-play-state:paused!important} #boot #startPlay,#boot #bootFull{font-family:Bitter,Georgia,serif!important} body:has(#boot:not([hidden])) #wideBtn{visibility:hidden;pointer-events:none} /* Two routes into the same illustrated box: solo play and the friends' table. */ #boot .start-character{top:29%;height:45%} #boot .start-controls{bottom:max(4.5%,calc(env(safe-area-inset-bottom) + 16px));gap:12px} #boot .start-loading{min-height:24px} #boot.start-ready .start-loading{display:none} #boot #startFriends{display:flex;align-items:baseline;justify-content:center;gap:8px;width:100%;max-width:340px;box-sizing:border-box;min-height:47px;padding:10px 14px;color:#fff0cb;background:#243f4b url(assets/print/ink-wear.svg) center/350px;border:2px solid #30261b;border-radius:4px 7px 5px 3px;box-shadow:0 3px #30261b,inset 0 0 0 1px #efdfb7;font:800 20px/1.1 Bitter,Georgia,serif;text-decoration:none} #boot #startFriends span{font-size:12px;font-weight:700;white-space:nowrap} #boot #startFriends:focus-visible{outline:3px solid #f8e8bf;outline-offset:4px} #boot #startFriends:active{translate:0 2px;box-shadow:0 1px #30261b,inset 0 0 0 1px #efdfb7} @media(orientation:landscape){#boot .start-character{top:8%;height:82%}#boot .start-controls{bottom:11%}} @media(max-height:700px) and (orientation:portrait){#boot .start-title{top:5%}#boot .start-title h1{font-size:clamp(30px,9vw,45px)}#boot .start-title p{font-size:12px;margin-top:10px}#boot .start-character{top:30%;height:40%}#boot .start-controls{bottom:4%;gap:9px}#boot #startPlay{min-height:55px;font-size:27px}#boot #startFriends{min-height:42px;font-size:18px}#boot #bootFull{font-size:11px;min-height:24px}} @media(max-height:450px) and (orientation:landscape){#boot .start-controls{bottom:6%;gap:7px}#boot #startFriends{min-height:34px;padding:7px 10px;font-size:16px}#boot #startFriends span{font-size:10px}} /* ---- dock-menu.css ---- */ /* Four paper navigation tiles, one red roll action. Art is independent of the old atlas. */ body #dock{gap:7px;align-items:end} body #dock>button.dk, body #dock>button.dk.ok{ position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center; width:100%;min-width:0;height:clamp(58px,18vw,73px);padding:0; border:2px solid #3b3021;border-radius:13px 11px 14px 10px; background:#f0dfb7 url(assets/print/card-stock.webp) center/300px 450px!important; box-shadow:inset 0 0 0 2px #faedcd,inset 0 0 0 3px #b79e6c,0 4px 0 #382d1f; filter:none;color:#352a1c;touch-action:manipulation; } body #dock>button.dk::before{ content:'';display:block;position:absolute;inset:12%;pointer-events:none; background:var(--dock-art) center/contain no-repeat; } body #dock #bTaxi{--dock-art:url(assets/icons/taxi.webp)} body #dock #bShip{--dock-art:url(assets/icons/crate.webp)} body #dock #bJohnny{--dock-art:url(assets/icons/nav-ticket-v2.webp)} body #dock #bShop{--dock-art:url(assets/icons/nav-cart.webp)} body #dock #bJohnny::before{inset:8%} body #dock #bShop::before{inset:8%} body #dock>button.dk>span,body #dock>button.dk>small{display:none} body #dock>button.dk:disabled{opacity:.65;filter:saturate(.45)} body #dock>button.dk:active:not(:disabled){translate:0 3px;box-shadow:inset 0 0 0 2px #faedcd,inset 0 0 0 3px #b79e6c,0 1px #382d1f} body #dock>button.dk:focus-visible{outline:3px solid #f8edcc;outline-offset:3px} body #dock #bShip.ship-done::after{inset:6px 3px;border-radius:7px;font-size:12px;background:#f0dfb7ee} @media(max-height:720px){body #dock>button.dk{height:62px}} @media(max-width:360px){body #dock{gap:5px}body #dock>button.dk{height:58px}} /* Tutorial focus uses the same gold readiness cue, not the legacy blue coach ring. */ body #dock>button.dk.guide-target{animation:dockReady 1.15s ease-in-out infinite!important} @media(prefers-reduced-motion:reduce){ body #dock>button.dk.guide-target,body #dock>button.dk.ok{animation:none!important;filter:drop-shadow(0 0 6px #ffd76a)} } /* The roll control is always a centred square, including the three-button map dock. */ body #dock{--roll-size:clamp(64px,19vw,82px);grid-template-columns:repeat(2,minmax(0,1fr)) var(--roll-size) repeat(2,minmax(0,1fr))} body #dock .diebox{width:var(--roll-size);min-width:var(--roll-size);justify-self:center;align-items:center} body #dock #bRoll{box-sizing:border-box;width:var(--roll-size);height:var(--roll-size);min-width:var(--roll-size);min-height:var(--roll-size);max-width:var(--roll-size);max-height:var(--roll-size);aspect-ratio:1;padding:0;flex:none;gap:0} body #dock #bRoll .roll-label{display:none} body.map-mode #dock{grid-template-columns:minmax(0,1fr) var(--roll-size) minmax(0,1fr)} body.map-mode #dock>button.dk{width:clamp(58px,18vw,73px)} body.map-mode #dock #bJohnny{justify-self:start} body.map-mode #dock #bShop{justify-self:end} /* ---- advice-target.css ---- */ /* The backdrop has a real hole: the indicated control stays sharp and clickable. */ body.coach-tip-open.advice-targeting #app, body.coach-tip-open.advice-targeting #modal, body.coach-tip-open.advice-targeting #board-frame{filter:none;transition:none} body.coach-tip-open.advice-targeting .advice-action{pointer-events:auto!important;animation:none!important} .advice-pointer{position:fixed;inset:0;z-index:35;pointer-events:none} .advice-shade{position:absolute;background:#17130d78;backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px);pointer-events:auto} .advice-pointer svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .advice-line{fill:none;stroke-linecap:round;stroke-linejoin:round} .advice-edge{stroke:#f6e4b9;stroke-width:12} .advice-ink{stroke:#392c1d;stroke-width:8} .advice-red{stroke:#b63e2b;stroke-width:5} .advice-head{fill:#b63e2b;stroke:#f6e4b9;stroke-width:3;stroke-linejoin:round;paint-order:stroke fill} .advice-ring{position:absolute;border:3px solid #f8e6b8;outline:2px solid #8d4e26;border-radius:13px 10px 12px 9px;box-shadow:0 2px 0 #392c1d} body.advice-targeting #tip{z-index:40} /* ---- top-hud.css ---- */ /* Proportions taken from design/top-hud/approved.webp, not the old HUD boxes. */ #top{--hud-ink:#292319;--hud-safe-top:max(env(safe-area-inset-top,0px),var(--host-safe-top,0px));padding:calc(var(--hud-safe-top) + 10px) max(clamp(12px,4vw,24px),env(safe-area-inset-right,0px)) 5px max(clamp(12px,4vw,24px),env(safe-area-inset-left,0px));gap:4px;font-family:Bitter,Georgia,serif;background:none;border:0} #top #bSettings,#top #sTimer{display:none!important} #top .bar0{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:center;gap:6px;padding-left:88px;min-height:50px} #top #bJohnnyTop{position:absolute;left:3px;top:-6px;width:80px;height:84px;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible} #top #bJohnnyTop .hud-portrait{position:absolute;left:-2px;top:0;width:82px;height:76px;object-fit:contain;filter:drop-shadow(0 1px 0 #30281e)} #top #bJohnnyTop small{position:absolute;top:auto;bottom:0;left:11px;right:9px;padding:3px 0 2px;border:1.5px solid #30281e;border-radius:5px 3px 5px 3px;background:#efdfb7 url(assets/print/card-stock.webp) center/250px;font:900 13px/1 Bitter,Georgia,serif;color:var(--hud-ink);box-shadow:0 1px #30281e} #top #bJohnnyTop .hud-gear{position:absolute;right:-1px;top:51px;width:24px;height:24px;border:2px solid #201d18;border-radius:48%;background:#36322a;padding:4px;box-sizing:border-box} .hud-gear svg{display:block;width:100%;height:100%} #top #bJohnnyTop::after{display:none} #top #bHelp{width:36px;height:37px;min-height:37px;padding:0;border:1.5px solid #30281e;border-radius:50% 46% 49% 48%;background:#f0dfb5 url(assets/print/card-stock.webp) center/250px;box-shadow:inset 0 0 0 2px #faedce,inset 0 0 0 2.5px #9e8558,0 2px #30281e;color:#252019;font:900 26px/1 Bitter,Georgia,serif} #top #bHub.hud-map{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;gap:5px;width:100%;min-width:0;height:50px;min-height:50px;padding:7px 16px 8px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;color:var(--hud-ink);text-align:left;filter:none;container-type:inline-size} #top #bHub.hud-map::before{content:'';display:block;position:absolute;inset:-1px -4px -3px;z-index:-1;pointer-events:none;background:url(assets/icons/hud-map-paper-clean.webp) center 51%/100% 245% no-repeat;border:0;transform:none;opacity:1;clip-path:none} #top #bHub.hud-map::after{display:none} #top .hud-map-heading{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr) max-content;align-items:center;gap:6px;width:100%;min-width:0} #top .hud-map-city{display:block;justify-self:center;width:100%;max-width:76px;height:30px;min-width:0;overflow:hidden;mix-blend-mode:multiply;filter:grayscale(1) contrast(2) brightness(1.05);opacity:.65;mask-image:radial-gradient(ellipse at center,#000 35%,transparent 74%)} #top .hud-map-heading strong{font:900 21px/1.1 Bitter,Georgia,serif;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.5px;text-shadow:.2px .2px currentColor} #top #bHub .hud-map-heading b{font:900 27px/.95 Bitter,Georgia,serif;white-space:nowrap;flex:none;letter-spacing:-.8px} #top #bHub .hud-map-heading small{font:900 20px/1 Bitter,Georgia,serif;color:#82714c;opacity:1;letter-spacing:-.6px} #top .hud-map-track{height:9px;width:100%;display:block;overflow:hidden;border:1.5px solid #392e20;border-radius:10px;background:#d7cba7;box-shadow:inset 0 1px #8c785647;flex:none} #top .hud-map-track i{display:block;height:100%;background:#b43b2d url(assets/print/ink-wear.svg);border-right:1.5px solid #6f281e} #top .bar1{display:flex;justify-content:center;align-self:center;gap:5px;width:auto;max-width:100%;margin-left:50px} #top .cur{flex:0 1 auto;min-width:76px;width:auto;height:28px;padding:0 8px 0 5px;gap:9px;border:1.5px solid #30281e;border-radius:7px 5px 7px 5px;background:#efdfb7 url(assets/print/card-stock.webp) center/350px;box-shadow:0 2px #30281e;overflow:visible} #top .cur b{font:900 21px/1 Bitter,Georgia,serif;white-space:nowrap;padding:0;color:#252019;flex:0 0 auto;font-variant-numeric:tabular-nums} #top .cur b.neg{color:#a92e25} #top .cur .ic{width:25px!important;height:25px!important;padding:0;margin:0;font-size:0!important} #top #qrow{display:flex;gap:2px;justify-content:center;align-items:stretch;max-width:none;margin-top:1px} /* Claimed missions disappear without widening the remaining cards. */ #top #qrow>.qchip{flex:0 0 calc((100% - (var(--mission-slots,2) - 1)*2px)/var(--mission-slots,2));min-width:0} #top #qrow .qchip[hidden]{display:none!important} #top #qrow .qchip{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:5px;min-height:34px;padding:2px 7px 6px;border:2px solid #30281e;border-radius:8px 6px 8px 6px;background:#27231f url(assets/print/ink-wear.svg)!important;box-shadow:inset 0 0 0 1px #c9b78c,0 2px #30281e;font:900 11px/1.1 Bitter,Georgia,serif;text-align:left;color:#f4e4bb;overflow:hidden} #top #qrow .qchip::before{display:block;content:'';width:22px;height:22px;flex:none;background:center/contain no-repeat} #top #qrow .qchip::after{content:'';position:absolute;left:8px;right:8px;bottom:3px;height:4px;border-radius:4px;background:#756c5780;box-shadow:inset 0 1px 2px #15130f} #top #qrow .qchip span{font:inherit!important;min-width:0;position:relative;z-index:1;overflow-wrap:normal} #top #qrow .qchip i{display:block;position:absolute;left:8px;bottom:3px;height:4px;width:calc((100% - 16px) * var(--mission-ratio,0));max-width:calc(100% - 16px);background:#e5b85c;border-radius:4px;z-index:1} #top #qrow .qchip.done{background:#3f6238 url(assets/print/ink-wear.svg)!important} #top #qrow .qchip,#top #qrow .qchip span{font-family:Bitter,Georgia,serif!important} #top #qrow .qchip[data-kind=earn]::before{background-image:url(assets/icons/soft.webp)} #top #qrow .qchip[data-kind=buy]::before{background-image:url(assets/icons/shop.webp)} #top #qrow .qchip[data-kind=sell]::before{background-image:url(assets/icons/box.webp)} #top #qrow .qchip[data-kind=parcel]::before{background-image:url(assets/icons/crate.webp)} #top #qrow .qchip[data-kind=upg]::before{background-image:url(assets/icons/crown.webp)} #top #m1Tasks{gap:2px}#top #m1Tasks .qchip{flex-direction:row;gap:5px;padding:5px 6px 12px}#top #m1Tasks .qchip::before{display:none}#top #m1Tasks b{font:900 15px/1 Bitter,Georgia,serif;color:#efdfb5;white-space:nowrap}#top #m1Tasks span{font-size:12px!important} #top button:focus-visible{outline:3px solid #b83c2c;outline-offset:3px} #top .bar1.hud-wide-balances{margin-left:75px}.hud-wide-balances .cur{gap:4px!important} #card.hud-account{padding:24px;display:flex;flex-direction:column;gap:16px}#card.hud-account h2{margin:0 28px 0 0}#card.hud-account button{min-height:44px}#card .hud-name{display:grid;gap:7px;font-size:18px;font-weight:800}#card .hud-name input{width:100%;box-sizing:border-box;padding:12px;font:600 20px Bitter,Georgia,serif;color:#30281e;background:#f4e6c4;border:2px solid #655137;border-radius:7px}.hud-account-toggles{display:flex;gap:8px}.hud-account-toggles button{flex:1} @media(max-width:420px){#top .bar0{padding-left:73px;grid-template-columns:minmax(0,1fr) 32px;gap:4px}#top #bJohnnyTop{width:65px;height:82px}#top #bJohnnyTop .hud-portrait{width:71px;height:70px}#top #bJohnnyTop small{left:5px;right:1px}#top #bJohnnyTop .hud-gear{right:-5px;top:47px;width:23px;height:23px}#top #bHelp{width:32px;height:34px;min-height:34px;font-size:24px}#top #bHub.hud-map{padding-left:11px;padding-right:11px}#top .hud-map-heading strong{font-size:17px;letter-spacing:-.4px}#top #bHub .hud-map-heading b{font-size:23px}#top #bHub .hud-map-heading small{font-size:17px}#top .bar1{margin-left:55px;gap:4px}#top .cur{min-width:67px;padding:0 5px;gap:6px}#top .cur b{font-size:20px}#top .cur .ic{width:23px!important;height:24px!important}#top #qrow .qchip{gap:4px;padding-left:6px;padding-right:6px;font-size:12px;min-height:42px}#top #qrow .qchip::before{width:21px;height:23px}#top #m1Tasks .qchip{flex-direction:column;align-items:flex-start;gap:2px}#top #m1Tasks span{font-size:11px!important}#top .bar1.hud-wide-balances{margin-left:66px}#top .hud-wide-balances .cur{min-width:0;padding:0 4px;gap:2px!important}} @media(max-width:360px){#top .bar0{padding-left:64px;grid-template-columns:minmax(0,1fr) 30px;gap:3px}#top #bJohnnyTop{width:58px}#top #bJohnnyTop .hud-portrait{width:62px}#top #bJohnnyTop small{font-size:12px;left:2px;right:0}#top .hud-map-heading strong{font-size:14px;letter-spacing:-.4px}#top #bHub .hud-map-heading b{font-size:21px}#top #bHub .hud-map-heading small{font-size:15px}#top .cur{min-width:60px;gap:3px;padding:0 3px}#top .cur b{font-size:19px}#top .cur .ic{width:22px!important}#top #qrow .qchip{font-size:11px;gap:2px;padding-left:5px;padding-right:4px}#top #qrow .qchip::before{width:19px;height:22px}#top .bar1.hud-wide-balances{margin-left:0;padding-top:23px}} @media(orientation:landscape) and (max-height:500px){#top{padding-top:calc(var(--hud-safe-top) + 5px)}} /* A close contact shadow and a soft halo follow each individual paper cutout. Keep row wrappers clear: no continuous dark strip behind the desktop HUD. */ #top{--hud-piece-shadow:drop-shadow(0 1px 2px #14110db3) drop-shadow(0 3px 5px #14110d80) drop-shadow(0 0 9px #14110d45)} #top #bJohnnyTop,#top #bHub.hud-map,#top #bHelp,#top .cur,#top #qrow .qchip,#top #m1Tasks .qchip{filter:var(--hud-piece-shadow)} /* On narrow banners the decorative engraving yields to the map name and score. */ @container(max-width:210px){#top .hud-map-heading{grid-template-columns:minmax(0,1fr) max-content}#top .hud-map-city{display:none}} #card .hud-map select{width:100%;box-sizing:border-box;padding:12px;font:600 20px Bitter,Georgia,serif;color:#30281e;background:#f4e6c4;border:2px solid #655137;border-radius:7px} /* Громкость (m8-sound): печатная шкала — бумажный жёлоб с чернильной обводкой, заполнение красным до бегунка. */ #card .volume-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;font-size:18px;font-weight:800;color:#30281e;margin:4px 0} #card .volume-row input{-webkit-appearance:none;appearance:none;width:100%;height:14px;margin:0;border:2px solid #2a2118;border-radius:8px;background:linear-gradient(90deg,#b12f26 var(--v,60%),#f2e4c2 var(--v,60%));cursor:pointer} #card .volume-row input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#f4e6c4;border:3px solid #2a2118;box-shadow:0 2px 0 #2a2118} #card .volume-row input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#f4e6c4;border:3px solid #2a2118;box-shadow:0 2px 0 #2a2118} /* ---- onboarding-print.css ---- */ /* Five printed visual lessons. Real game art and UI, no placeholder START label. */ #onboard{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))} #onboard .ob-card{width:min(100%,420px);max-height:calc(100dvh - 28px);padding:17px 18px 16px;border:3px solid #302719;border-radius:21px 18px 22px 19px;background:#efdfb7 url(assets/print/card-stock.webp) center/420px;box-shadow:inset 0 0 0 3px #faedc9,inset 0 0 0 4.5px #655438,0 6px #302719} #onboard .ob-track{height:auto;flex:none} #onboard .ob-slide{gap:10px;font-family:Bitter,Georgia,serif} #onboard .ob-step{align-self:flex-start;font:700 12px/1 Bitter,Georgia,serif;margin:3px 0 8px;color:#7c6b48} #onboard .ob-skip{font:700 12px/1 Bitter,Georgia,serif!important;top:13px;right:18px;color:#655438} #onboard .ob-art{height:270px;min-height:0;padding:0;gap:7px;background:none;border:0;border-radius:0;overflow:visible;flex:none} #onboard .ob-title{font:900 24px/1.15 Bitter,Georgia,serif;margin:4px 0 0;color:#302719} #onboard .ob-text{font:600 16px/1.4 Bitter,Georgia,serif!important;min-height:4.2em;max-width:345px;margin:0;color:#5a4931} #onboard .ob-slide:last-child .ob-text{min-height:4.2em} #onboard .ob-banner{border:0;background:none;box-shadow:none;height:215px;display:grid;place-items:center} #onboard .ob-banner img{width:100%;height:100%;object-fit:contain} #onboard .ob-chip{font:800 17px/1 Bitter,Georgia,serif} #onboard .ob-dots{margin:10px 0;gap:7px} #onboard .ob-next{min-height:46px;padding:9px;font:900 20px/1 Bitter,Georgia,serif!important;background:#b63828 url(assets/print/ink-wear.svg)!important;border:2px solid #322719;border-radius:10px 7px 10px 8px;box-shadow:inset 0 0 0 1px #eed8a5,0 3px #302719} #onboard .ob-next .enamel-skin{display:none} #onboard .ob-next::before{display:none} #onboard .ob-supply{width:100%;height:100%;display:grid;grid-template-rows:67px 22px 53px 22px 94px;justify-items:center;align-items:center} #onboard .ob-supply-warehouse{display:flex;align-items:center;gap:9px} #onboard .costco-sign{width:175px;height:60px;aspect-ratio:auto;max-height:none} #onboard .ob-supply b{font:900 16px/1.2 Bitter,Georgia,serif;color:#392d1f} #onboard .ob-route-arrow{font:900 26px/1 Bitter,Georgia,serif;color:#b83c2b} #onboard .ob-supply>.ob-route-arrow{rotate:90deg} #onboard .ob-supply-goods{display:flex;align-items:center;justify-content:center;gap:10px} #onboard .ob-supply-goods img{width:48px;height:48px;object-fit:contain} #onboard .ob-supply-points{display:grid;grid-template-columns:105px 105px;justify-content:center;align-items:center;gap:0 10px} #onboard .ob-supply-points img{width:105px;height:72px;object-fit:contain} #onboard .ob-supply-points b{grid-column:1/3} #onboard .ob-field-fragment{position:relative;width:100%;aspect-ratio:440/225;flex:none;border:2px solid #473620;border-radius:12px 9px 12px 10px;overflow:hidden;background:#bdad83 url(assets/icons/onboard-start-field.webp) center 49.5%/290.91% auto no-repeat;box-shadow:0 3px #766344} #onboard .ob-start-ring{position:absolute;left:48%;top:58%;width:16%;height:20%;border:3px solid #f4d475;transform:rotate(-31deg) skew(15deg);border-radius:7px;box-shadow:0 0 0 2px #983a26;opacity:.9} #onboard .ob-start-coin{position:absolute;left:50%;top:46%;width:36px;height:36px;object-fit:contain;opacity:0} #onboard .ob-slide.on .ob-start-coin{animation:obEarn 2.4s steps(18,end) infinite} @keyframes obEarn{0%,20%{opacity:0;translate:0 22px;scale:.7}27%{opacity:1;translate:0 12px;scale:1.05}48%{opacity:1;translate:5px -38px;scale:1}64%,100%{opacity:0;translate:8px -54px;scale:.9}} #onboard .ob-sale{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:6px;font:800 15px/1.1 Bitter,Georgia,serif} #onboard .ob-sale img{width:35px;height:35px;object-fit:contain}#onboard .ob-sale>span{font-size:25px;color:#ac3225}#onboard .ob-sale b{max-width:110px;text-align:left} #onboard .ob-property{width:min(100%,285px);height:100%;padding:10px 12px 12px;border:2px solid #493921;border-radius:14px 12px 15px 11px;background:#efdfb7 url(assets/print/card-stock.webp) center/330px;box-shadow:inset 0 0 0 2px #fff0c9,0 4px #5b482d;display:flex;flex-direction:column;gap:5px;text-align:left} #onboard .ob-property-head{display:flex;align-items:center;gap:7px;font:900 20px/1 Bitter,Georgia,serif} #onboard .ob-property-head>img{width:27px;height:27px;object-fit:contain}#onboard .ob-property-head>span{margin-left:auto;color:#f5eacb;background:#466b42;padding:4px 7px;border-radius:6px;font-size:15px;white-space:nowrap} #onboard .ob-demo-level{font-style:normal} #onboard .ob-property-picture{position:relative;min-height:0;flex:1} #onboard .ob-property-picture>img{width:100%;height:100%;object-fit:contain} #onboard .ob-property-stats{border:1.5px solid #958158;border-radius:7px;padding:5px 7px;flex:none} #onboard .ob-property-stat{display:flex;align-items:center;gap:5px;font:700 12px/1.5 Bitter,Georgia,serif} #onboard .ob-property-stat>span{margin-right:auto}#onboard .ob-property-stat b,#onboard .ob-property-stat strong{font-size:17px;line-height:1.25} #onboard .ob-property-stat strong,#onboard .ob-property-stat i{color:#416944;font-style:normal} #onboard .ob-demo-upgrade{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:35px;flex:none;padding:5px 9px;background:#37603c url(assets/print/ink-wear.svg);border:2px solid #302719;border-radius:7px;box-shadow:inset 0 0 0 1px #e4cfa0,0 2px #302719;color:#fbebc4;font:900 16px/1 Bitter,Georgia,serif!important} #onboard .ob-demo-upgrade>span{display:flex;align-items:center;gap:3px}#onboard .ob-demo-upgrade .cash-glyph{width:23px;height:23px;margin:0} #onboard .ob-upgrade-burst{position:absolute;left:50%;top:40%;translate:-50% -50%;font:900 105px/1 Georgia;color:#edc464;text-shadow:2px 2px #6f3b21;-webkit-text-stroke:1px #5c3622;opacity:0;pointer-events:none} #onboard .upgrading .ob-property-picture{animation:obAnticipate .28s ease-out}#onboard .upgraded .ob-upgrade-burst{animation:obUpgradeFlash .5s steps(8,end) both} #onboard .upgraded .changes{background:#c7d29c80;border-radius:3px}#onboard .upgraded .changes>strong,#onboard .upgraded .changes>i{display:none}#onboard .upgraded .changes>b{color:#386338;animation:obValue .38s ease-out}#onboard .upgraded .ob-demo-level{display:inline-block;animation:obValue .38s ease-out} @keyframes obAnticipate{0%{transform:scale(1)}35%{transform:scale(.96) rotate(-1deg)}75%{transform:scale(1.045) rotate(.7deg)}100%{transform:scale(1)}} @keyframes obUpgradeFlash{0%{opacity:1;scale:.4;rotate:-9deg}45%{opacity:.95;scale:1;rotate:9deg}100%{opacity:0;scale:1.25;rotate:16deg}} @keyframes obValue{0%{transform:scale(1.25)}70%{transform:scale(.97)}100%{transform:scale(1)}} #onboard .ob-goal-journey{width:100%;height:100%;display:grid;grid-template-columns:1fr 25px 1.4fr;grid-template-rows:105px 26px 125px;align-items:center;justify-items:center;gap:0 4px} #onboard .ob-parcel-goal,#onboard .ob-ticket-goal{display:flex;flex-direction:column;align-items:center;gap:4px;font:900 16px/1.2 Bitter,Georgia,serif} #onboard .ob-parcel-goal img{width:65px;height:65px;object-fit:contain} #onboard .ob-goal-score{display:flex;flex-direction:column;gap:4px;width:100%;font:700 15px/1.2 Bitter,Georgia,serif} #onboard .ob-goal-score>b{font:900 43px/1 Bitter,Georgia,serif}#onboard .ob-goal-score>span{color:#786443} #onboard .ob-goal-meter{height:12px;border:2px solid #514027;border-radius:8px;overflow:hidden;background:#c9bd96}#onboard .ob-goal-meter i{display:block;width:100%;height:100%;background:#b23728 url(assets/print/ink-wear.svg)} #onboard .ob-goal-journey>.ob-route-arrow:nth-child(4){grid-column:2;grid-row:2;rotate:90deg} #onboard .ob-ticket-goal{grid-column:1/4;grid-row:3;flex-direction:row;gap:12px;text-align:left;font-size:20px} #onboard .ob-ticket-goal img{width:120px;height:100px;object-fit:contain} #onboard .ob-goal-journey>img{width:95px;height:100px;object-fit:contain}#onboard .ob-goal-journey>img:last-child{grid-row:3;grid-column:1/4}#onboard .ob-goal-journey>.ob-route-arrow:nth-child(3){grid-row:2;grid-column:2;rotate:90deg} @media(max-height:700px){#onboard .ob-card{padding:12px 14px}#onboard .ob-art{height:218px}#onboard .ob-slide{gap:7px}#onboard .ob-title{font-size:22px}#onboard .ob-text{font-size:14px!important;min-height:4.2em}#onboard .ob-banner{height:169px}#onboard .ob-supply{grid-template-rows:49px 17px 44px 17px 85px}#onboard .costco-sign{width:138px;height:47px}#onboard .ob-supply-goods img{width:42px;height:42px}#onboard .ob-supply-points img{height:61px}#onboard .ob-property{padding:7px 10px 10px}#onboard .ob-property-head{font-size:18px}#onboard .ob-property-stat{font-size:11px}#onboard .ob-property-stat b,#onboard .ob-property-stat strong{font-size:15px}#onboard .ob-goal-journey{grid-template-rows:87px 22px 102px}#onboard .ob-ticket-goal img{width:100px;height:80px}#onboard .ob-field-fragment{width:90%}#onboard .ob-dots{margin:8px 0}} @media(prefers-reduced-motion:reduce){#onboard *,#onboard *::before,#onboard *::after{animation:none!important;transition:none!important}#onboard .ob-start-coin{opacity:1;translate:0 -15px}} #onboard .ob-map-goal .ob-goal-score{grid-column:2/4} #onboard .ob-next-map{grid-row:3;grid-column:1/4;width:90%;height:100%;position:relative;overflow:hidden;border:2px solid #655438;border-radius:9px}#onboard .ob-next-map img{width:100%;height:100%;object-fit:cover}#onboard .ob-next-map b{position:absolute;bottom:0;left:0;right:0;background:#efdfb7e8;padding:5px;font:900 15px/1.1 Bitter,Georgia,serif} /* ---- notice-windows.css ---- */ /* Short messages share one paper sheet and a stable action footer. */ #card.notice-card{display:flex;flex-direction:column;gap:0;padding:0;max-width:410px;overflow:hidden;background:#edddb7 url(assets/print/card-stock.webp) center/400px 600px!important} #card.notice-card .ev-head{display:flex;align-items:center;gap:13px;flex:none;min-height:0;padding:20px 22px 17px;border-bottom:1.5px solid #9a8056;background:none;overflow:visible} #card.notice-card .ev-badge{width:51px;height:55px;flex:none;min-width:0;border:0;border-radius:0;background:none;box-shadow:none;padding:0;transform:none} #card.notice-card .ev-badge img{width:100%;height:100%;object-fit:contain} #card.notice-card .ev-titles{min-width:0;flex:1} #card.notice-card h2.ev-title{display:block;width:auto;font:900 25px/1.15 Bitter,Georgia,serif;margin:0;padding:0;border:0;box-shadow:none;background:none;transform:none;text-transform:none;overflow-wrap:anywhere} #card.notice-card .ev-sub{font:700 14px/1.3 Bitter,Georgia,serif;margin-top:5px} #card.notice-card .ev-body,#card.notice-card .notice-content{flex:1 1 auto;min-height:0;overflow:auto;padding:20px 22px;background:none;gap:14px} #card.notice-card .ev-body::before,#card.notice-card .ev-body::after{display:none} #card.notice-card .ev-plate{padding:0;border:0;border-radius:0;background:none;box-shadow:none} #card.notice-card p{font:600 16px/1.45 Bitter,Georgia,serif;margin:0 0 12px} #card.notice-card p:last-child{margin-bottom:0} #card.notice-card .row{padding:12px 0;border:0;border-bottom:1px solid #a38b5c66;border-radius:0;background:none;gap:12px;box-shadow:none} #card.notice-card .row .n{font-size:16px;line-height:1.3;min-width:0} #card.notice-card .row .n small{font-size:14px;line-height:1.4;margin-top:4px} #card.notice-card .row .v{font-size:20px;flex:none} #card.notice-card .ev-foot{padding:14px 22px 20px;border-top:1.5px solid #a68b5b;background:none;flex:none;box-shadow:none} #card.notice-card .mbtns{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0} #card.notice-card .mbtns button{flex:1 1 140px;min-width:0;min-height:48px;margin:0;padding:12px 15px;font:800 18px/1.2 Bitter,Georgia,serif;white-space:normal} #card.notice-card .mbtns button:focus-visible{outline:3px solid #ae392b;outline-offset:3px} #card.notice-level .ev-head{padding:22px 24px 18px;gap:20px} #card.notice-level .notice-portrait{position:relative;width:98px;height:105px;flex:none} #card.notice-level .notice-portrait img{width:100%;height:100%;object-fit:contain} #card.notice-level .notice-portrait>b{position:absolute;bottom:-2px;left:15px;right:9px;text-align:center;background:#f0deaf;border:2px solid #3d3020;border-radius:6px 4px 6px 4px;padding:3px 4px;font-size:16px;box-shadow:0 2px #6f593d} #card.notice-level .notice-heading{min-width:0} #card.notice-level .notice-heading>span{font:800 14px/1.2 Bitter,Georgia,serif;color:#a83d2c} #card.notice-level .notice-heading h2{font:900 29px/1.12 Bitter,Georgia,serif;margin:6px 0 4px} #card.notice-level .notice-heading p{font:800 20px/1.2 Bitter,Georgia,serif;margin:0} #card.notice-level .notice-benefit{display:flex;align-items:center;justify-content:center;gap:18px;padding:7px 0 12px} #card.notice-level .notice-benefit>img{width:60px;height:67px;object-fit:contain;flex:none} #card.notice-level .notice-benefit>div{display:flex;flex-direction:column;gap:3px} #card.notice-level .notice-benefit strong{font:900 45px/1 Bitter,Georgia,serif;color:#41643b} #card.notice-level .notice-benefit b{font:800 18px/1.3 Bitter,Georgia,serif} #card.notice-level .notice-benefit:has(>small){flex-direction:column;align-items:flex-start;gap:8px} #card.notice-level .notice-benefit small{font-size:13px;color:#796240} #card.notice-level .notice-explanation{font-size:14px;color:#6b593a;text-align:center;margin:4px 0 0} @media(max-width:360px){#card.notice-card .ev-head,#card.notice-card .ev-body,#card.notice-card .notice-content{padding:16px}#card.notice-card .ev-foot{padding:12px 16px 16px}#card.notice-card h2.ev-title{font-size:22px}#card.notice-level .notice-portrait{width:78px;height:89px}#card.notice-level .ev-head{gap:14px}#card.notice-level .notice-heading h2{font-size:25px}#card.notice-level .notice-benefit strong{font-size:39px}#card.notice-level .notice-benefit b{font-size:16px}#card.notice-card .mbtns button{flex-basis:120px;font-size:16px}} #card.notice-card .ms3{display:flex;flex-direction:column;gap:0;margin:6px 0 12px} #card.notice-card .ms3 .msc{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:12px 0;border:0;border-bottom:1px solid #a38b5c66;border-radius:0;background:none;box-shadow:none;outline:0;transform:none;color:#332b20;text-align:left} #card.notice-card .ms3 .msi{display:none} #card.notice-card .ms3 .msc>b{font-size:14px;color:#78623e;order:0} #card.notice-card .ms3 .msn{font:800 17px/1.25 Bitter,Georgia,serif} #card.notice-card .ms3 .msc small{font:600 14px/1.4 Bitter,Georgia,serif;text-align:left} /* ---- authority-windows.css ---- */ /* Approved printed encounters: quiet paper around one expressive character scene. */ #card.authority-card{--cs:1;width:min(100%,460px);max-width:460px;padding:10px!important;display:flex;flex-direction:column;overflow:hidden;max-height:calc(100dvh - 38px)!important;background:#f2e3bd url(assets/print/card-stock.webp) center/460px 690px!important;border:3px solid #30271d;outline:3px solid #ecd8a8;border-radius:20px 17px 21px 18px;box-shadow:0 0 0 6px #30271d,0 9px 0 5px #2b251c;color:#282118;font-family:Bitter,Georgia,serif} #card.authority-card .authority-content{display:contents}#card.authority-card .authority-head{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) 34px;align-items:center;gap:10px;flex:none;padding:2px 1px 9px;z-index:2}#card.authority-card .authority-emblem{width:53px;height:53px;border:2px solid #30271d;border-radius:49% 51% 47% 53%;display:grid;place-items:center}#card.authority-card .authority-emblem img{width:82%;height:82%;object-fit:contain}#card.authority-card .authority-head h2{margin:0!important;padding:1px 0!important;font:900 clamp(24px,6.9vw,34px)/1.05 Bitter,Georgia,serif!important;text-transform:uppercase;color:#211b14;letter-spacing:-1px}#card.authority-card .authority-head p{margin:3px 0 0;font-size:13px;font-weight:700;line-height:1.15}#card.authority-card .authority-help{align-self:start}#card.authority-card .authority-help summary{list-style:none;display:grid;place-items:center;width:34px;height:36px;border:2px solid #30271d;border-radius:50%;font:900 26px Bitter,serif;cursor:pointer}#card.authority-card .authority-help summary::-webkit-details-marker{display:none}#card.authority-card .authority-help>div{position:absolute;right:0;top:48px;width:min(320px,100%);padding:15px;background:#f2e3bd url(assets/print/card-stock.webp);border:2px solid #30271d;box-shadow:0 4px #30271d;border-radius:9px;font:600 14px/1.45 Bitter,serif}#card.authority-card .authority-scroll{min-height:0;overflow:auto;overscroll-behavior:contain}#card.authority-card .authority-scene{position:relative;isolation:isolate;height:clamp(190px,37dvh,335px);overflow:hidden;border:3px solid #30271d;border-radius:8px 10px 7px 9px;background-position:center;background-size:cover}#card.authority-card .authority-scene.police{background-image:url(assets/authority/police-room.webp)}#card.authority-card .authority-scene.inspector{background-image:url(assets/authority/inspector-room.webp)}#card.authority-card .authority-person{position:absolute;pointer-events:none;width:100%;height:185%;object-fit:contain;object-position:center bottom;left:-2%;bottom:-72%;transform-origin:50% 86%;animation:authority-breathe 4.4s steps(32,end) infinite}#card.authority-card .inspector .authority-person{height:auto;width:112%;left:-15%;top:-2%;bottom:auto;object-fit:initial;transform-origin:50% 55%;animation:inspector-peer 5.5s steps(42,end) infinite}#card.authority-card .authority-bubble{position:absolute;right:3%;top:8%;max-width:42%;padding:9px 13px;background:#f4e7c6 url(assets/print/ink-wear.svg);border:2px solid #30271d;border-radius:49% 47% 48% 42%;font:800 clamp(17px,4.8vw,23px)/1.06 Bitter,serif;text-align:center;box-shadow:1px 2px #30271d;rotate:3deg}#card.authority-card .authority-bubble:after{content:'';position:absolute;bottom:-9px;left:12px;width:14px;height:15px;background:#eee0bc;border-left:2px solid #30271d;transform:skew(-30deg);clip-path:polygon(0 0,100% 0,0 100%)}#card.authority-card .authority-copy{text-align:center;padding:10px 4px 5px}#card.authority-card .authority-copy p{margin:0!important}#card.authority-card .authority-lead{font:800 15px/1.3 Bitter,serif!important}#card.authority-card .authority-fine{display:flex;justify-content:center;align-items:center;gap:9px;margin:7px 0 5px;font:800 22px/1 Bitter,serif}#card.authority-card .authority-fine img{width:31px;height:31px;object-fit:contain}#card.authority-card .authority-fine strong{font-size:34px}#card.authority-card .authority-rules{font:650 12px/1.35 Bitter,serif!important}#card.authority-card .authority-debt{color:#90382d;font:700 12px/1.35 Bitter,serif!important;padding:1px 0 6px}#card.authority-card .authority-foot{flex:none;padding-top:7px}#card.authority-card .mbtns{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}#card.authority-card .mbtns button{min-height:49px;padding:7px 6px;font:800 17px/1.08 Bitter,serif;display:flex;flex-flow:row wrap;align-items:center;justify-content:center;gap:4px;border-radius:10px 8px 11px 9px}#card.authority-card .mbtns button .action-price{font:inherit;white-space:nowrap}#card.authority-card .mbtns button.bad{grid-column:1/-1;min-height:50px;font-size:21px}#card.authority-card .mbtns button.bad:after{content:'';width:34px;height:34px;background:url(assets/icons/die.webp) center/contain no-repeat;order:-1;margin-right:7px}#card.authority-card .mbtns button .cash-glyph{width:23px;height:23px}#card.authority-card button:focus-visible,.authority-help summary:focus-visible{outline:3px solid #a63829;outline-offset:4px} @keyframes authority-breathe{0%,100%{transform:translateY(0) rotate(-.45deg)}50%{transform:translateY(-3px) rotate(.45deg)}}@keyframes inspector-peer{0%,60%,100%{transform:rotate(-1deg) translateY(0)}28%{transform:rotate(1.2deg) translateY(-3px)}} body.page-hidden .authority-person{animation-play-state:paused}@media(prefers-reduced-motion:reduce){#card.authority-card .authority-person,.inspector .authority-person{animation:none}}@media(max-height:570px){#card.authority-card .authority-scene{height:150px}#card.authority-card .authority-head{grid-template-columns:40px 1fr 32px;padding-bottom:5px}#card.authority-card .authority-emblem{width:38px;height:38px}#card.authority-card .authority-copy{padding:7px 3px}#card.authority-card .authority-head h2{font-size:25px!important}#card.authority-card .authority-rules{font-size:11px!important}#card.authority-card .mbtns button{min-height:43px}} #card.authority-card .action-price{display:inline-flex;align-items:center;justify-content:center;gap:4px} @media(max-width:420px){#card.authority-card .mbtns button:not(.bad){flex-direction:column;gap:2px;min-height:57px}} /* ---- map-progress.css ---- */ /* Printed reward poster: large portraits, one continuous numerical ruler. */ #card.map-progress-card{ --ink:#2b241a;--rail-height:520px;--rail-top:28px;--paper:#f2e3bd; width:min(100%,560px);max-width:560px;max-height:calc(100dvh - 32px)!important; display:flex;flex-direction:column;padding:0!important;overflow:hidden; background:#f2e3bd url(assets/print/card-stock.webp) center/560px 840px!important; border:3px solid #30271d;outline:3px solid #ecd8a8;border-radius:17px 20px 18px 21px; box-shadow:0 0 0 6px #30271d,0 8px 0 5px #2b251c; font-family:Bitter,Georgia,serif;color:var(--ink) } #card.map-progress-card .mp-head{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) 82px 38px;gap:5px 8px;flex:none;padding:14px 12px 8px;border-bottom:2px solid #9b8764} #card.map-progress-card .mp-stamp{width:54px;height:63px;background:url(assets/bp/bp-badge.webp) center/contain no-repeat;grid-row:1/3} #card.map-progress-card .mp-title{min-width:0;grid-row:1;grid-column:2} #card.map-progress-card .mp-title h2{font:900 32px/1.08 Bitter,Georgia,serif!important;text-transform:uppercase;margin:0!important;padding:0!important;letter-spacing:-.6px} #card.map-progress-card .mp-title>span{display:block;margin-top:5px;font:800 13px/1.1 Bitter,serif;text-transform:uppercase} #card.map-progress-card .mp-head>.xhead{grid-column:4;grid-row:1;width:38px;height:38px;min-height:38px} #card.map-progress-card .mp-score{grid-column:3;grid-row:1;display:flex;flex-direction:column;text-align:center;justify-content:center} #card.map-progress-card .mp-score strong{font:900 36px/1 Bitter,serif;color:#702b20} #card.map-progress-card .mp-score span{font:700 12px/1.1 Bitter,serif} #card.map-progress-card .mp-city{grid-row:2;grid-column:2/5;height:48px;background:url(assets/bp/bp-city.webp) center bottom/100% 100% no-repeat;opacity:.35;filter:sepia(1);mix-blend-mode:multiply;mask-image:linear-gradient(transparent,#000 28%,#000 87%,transparent)} #card.map-progress-card .mp-time{grid-column:1/-1;text-align:right;font:600 12px/1.3 Bitter,serif;margin:0!important;padding-top:1px} #card.map-progress-card .mp-scroll{overflow-x:hidden;overflow-y:auto;flex:1 1 auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin} #card.map-progress-card .mp-path{position:relative;height:calc(var(--rail-height) + var(--rail-top) + 22px);margin:9px 9px 8px;padding:0;border:1px solid #a9946c;border-radius:10px 7px 11px 8px;background:#fff4d530} #card.map-progress-card .mp-rail{position:absolute;left:20px;top:var(--rail-top);height:var(--rail-height);width:17px;border:2px solid #30271d;border-radius:12px;background:#bfb99e;box-shadow:inset 2px 0 0 #fff0ce,1px 1px 0 #fff4d8} #card.map-progress-card .mp-rail>i{position:absolute;bottom:0;left:0;right:0;background:#b1392d url(assets/print/ink-wear.svg);border-radius:8px;box-shadow:inset 2px 0 #e49271;max-height:100%;transition:height 650ms ease-out} #card.map-progress-card .mp-tick{position:absolute;left:12px;height:3px;width:12px;background:#2b241a;transform:translateY(50%);z-index:1} #card.map-progress-card .mp-tick b{position:absolute;left:12px;top:50%;transform:translateY(-50%);font:900 14px/1 Bitter,serif;background:#f0e1bc;padding:3px 2px} #card.map-progress-card .mp-tick.done{background:#37734b} #card.map-progress-card .mp-zero{position:absolute;left:27px;bottom:-6px;font:800 14px Bitter,serif} #card.map-progress-card .mp-current{position:absolute;left:-5px;width:23px;height:23px;border:3px solid #2a241c;background:#fff2d2;border-radius:50%;transform:translateY(50%);z-index:2} #card.map-progress-card .mp-current span{position:absolute;right:17px;top:50%;transform:translateY(-50%);padding:4px 3px;color:#fff2d2;background:#a53528;border:1.5px solid #30271d;border-radius:4px;font:800 11px/1 Bitter,serif;font-style:normal} #card.map-progress-card .mp-reward{position:absolute;top:calc(var(--rail-top) + var(--at)*var(--rail-height)/100 - 12px);left:67px;right:9px;display:grid;grid-template-columns:142px minmax(0,1fr);align-items:center;gap:10px;min-height:154px;padding:6px 0;border-bottom:1px solid #a9946c} #card.map-progress-card .mp-art{height:142px;background-image:url(assets/authority/johnny-upgrades.webp);background-repeat:no-repeat;background-size:200% auto;background-position:left center} #card.map-progress-card .mp-art.legend{background-position:right center;clip-path:inset(0 0 0 8%)} #card.map-progress-card .mp-art.ticket{height:140px;background:url(assets/icons/nav-ticket-v2.webp) center/contain no-repeat} #card.map-progress-card .mp-reward h3{font:900 23px/1.06 Bitter,Georgia,serif;margin:0 0 8px!important;letter-spacing:-.5px} #card.map-progress-card .mp-reward p{font:600 15px/1.22 Bitter,serif;margin:0 0 10px!important} #card.map-progress-card .mp-reward .mp-benefit{padding-bottom:8px;border-bottom:1px solid #ac966d} #card.map-progress-card .mp-next-label{display:inline-block;padding:4px 7px;margin-bottom:8px;background:#aa392b url(assets/print/ink-wear.svg);color:#fff0cf;font:800 12px/1.1 Bitter,serif;text-transform:uppercase;clip-path:polygon(3% 0,98% 2%,100% 89%,96% 100%,0 98%,1% 12%)} #card.map-progress-card .mp-state{display:flex;gap:6px;align-items:center;font:800 14px/1.15 Bitter,serif} #card.map-progress-card .mp-state.done{color:#2d653f} #card.map-progress-card .mp-state.done>b{font:800 17px/25px Bitter,serif;border-radius:50%;width:25px;text-align:center;color:#fff0cf;background:#327049} #card.map-progress-card .mp-lock svg{width:17px;height:20px;display:block} #card.map-progress-card .mp-remaining{font:800 14px/1.2 Bitter,serif;display:flex;padding-top:3px;color:#892f24} #card.map-progress-card .mp-foot{flex:none;padding:8px 10px 10px;border-top:2px solid #a9946c} #card.map-progress-card .mp-shipping{display:grid;grid-template-columns:46px 1fr auto;gap:8px;align-items:center;border:1.5px solid #667b7f;border-radius:8px 10px 7px 9px;padding:8px;background:#ccd4d0 url(assets/print/ink-wear.svg)} #card.map-progress-card .mp-shipping img{width:46px;height:50px;object-fit:contain} #card.map-progress-card .mp-shipping p{font:700 14px/1.2 Bitter,serif;margin:0!important} #card .mp-shipping button{min-height:47px;font:800 18px/1.05 Bitter,serif;padding:7px 13px;white-space:nowrap} #card.map-progress-card .mp-note{text-align:center;font:600 11px/1.25 Bitter,serif;margin:8px 0!important} #card.map-progress-card .segbar{margin:0;padding:3px;background:#27241f;border:2px solid #27241f;border-radius:12px;display:flex;gap:3px} #card.map-progress-card .segbar button{flex:1;min-width:0;min-height:44px;padding:5px;font:800 16px/1 Bitter,serif;border-radius:8px;background:transparent;color:#f2e3bd;box-shadow:none;border:0} #card.map-progress-card .segbar button.on{background:#f2e3bd;color:#2b241a} #card.map-progress-card .mp-first-map{padding:18px} #card.map-progress-card .mp-first-map h3{margin:0 0 8px} #card.map-progress-card .mp-first-map p{font-size:15px} #card.map-progress-card .mp-first-map>div{display:grid;grid-template-columns:1fr auto;gap:7px;padding:15px 0;border-bottom:1px solid #ad986d;font-size:16px} #card.map-progress-card .mp-first-map progress{grid-column:1/-1;width:100%;accent-color:#aa392b} #card.map-progress-card .mp-first-map span{font-weight:800} @media(max-width:480px){ #card.map-progress-card{--rail-height:520px} #card.map-progress-card .mp-head{grid-template-columns:42px minmax(0,1fr) 65px 34px;gap:4px 5px;padding:12px 9px 8px} #card.map-progress-card .mp-stamp{width:42px;height:54px} #card.map-progress-card .mp-title h2{font-size:26px!important} #card.map-progress-card .mp-title>span{font-size:11px} #card.map-progress-card .mp-score strong{font-size:30px} #card.map-progress-card .mp-score span{font-size:11px} #card.map-progress-card .mp-head>.xhead{width:34px;height:34px;min-height:34px} #card.map-progress-card .mp-city{height:34px} #card.map-progress-card .mp-time{font-size:11px} #card.map-progress-card .mp-reward{left:56px;right:7px;grid-template-columns:110px minmax(0,1fr);gap:7px;min-height:154px;align-items:center} #card.map-progress-card .mp-art{height:130px} #card.map-progress-card .mp-art.ticket{height:120px} #card.map-progress-card .mp-reward h3{font-size:21px} #card.map-progress-card .mp-reward p{font-size:14px} #card.map-progress-card .mp-tick b{font-size:13px} #card.map-progress-card .mp-shipping{grid-template-columns:37px 1fr auto;gap:6px} #card.map-progress-card .mp-shipping img{width:37px;height:44px} #card.map-progress-card .mp-shipping p{font-size:12px} #card .mp-shipping button{font-size:16px;padding:7px 9px} } @media(max-width:360px){ #card.map-progress-card{--rail-height:720px} #card.map-progress-card .mp-head{grid-template-columns:34px minmax(0,1fr) 52px 32px} #card.map-progress-card .mp-stamp{width:34px;height:46px} #card.map-progress-card .mp-title h2{font-size:22px!important} #card.map-progress-card .mp-score strong{font-size:27px} #card.map-progress-card .mp-title>span{font-size:10px} #card.map-progress-card .mp-reward{left:50px;grid-template-columns:88px minmax(0,1fr);gap:5px;min-height:210px} #card.map-progress-card .mp-reward h3{font-size:19px} #card.map-progress-card .mp-art{height:132px} #card.map-progress-card .mp-next-label{font-size:10px;padding:4px} #card.map-progress-card .mp-rail{left:16px} #card.map-progress-card .mp-tick b{font-size:12px} #card.map-progress-card .mp-shipping{grid-template-columns:30px 1fr;gap:6px} #card.map-progress-card .mp-shipping img{width:30px;height:32px} #card.map-progress-card .mp-shipping p{display:none} #card .mp-shipping button{width:100%;min-height:42px} #card.map-progress-card .segbar button{font-size:14px} } @media(max-height:650px){#card.map-progress-card .mp-city{display:none}#card.map-progress-card .mp-head{padding-top:10px}} @media(prefers-reduced-motion:reduce){#card.map-progress-card .mp-rail>i{transition:none}} /* ---- shipment-event.css ---- */ /* A painted shipment scene, followed by a large printed receipt. */ body.shipment-playing #modal{visibility:hidden} .shipment-event,.shipment-milestone{position:fixed;inset:0;margin:0;padding:0;border:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent;color:#f2e3bd;overflow:hidden;font-family:Bitter,Georgia,serif} .shipment-event::backdrop,.shipment-milestone::backdrop{background:#171b19b8;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)} .shipment-event h2,.shipment-event p,.shipment-event strong,.shipment-milestone h2,.shipment-milestone p,.shipment-milestone strong{font-family:Bitter,Georgia,serif} .shipment-layout{height:100%;max-width:640px;margin:auto;padding:max(18px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;position:relative;box-sizing:border-box} .shipment-header{text-align:center;position:relative;z-index:2;pointer-events:none} .shipment-day{font-size:17px;color:#e0cc9e;display:block;font-weight:700} .shipment-header h2{font-size:clamp(26px,4.5vw,36px);font-weight:900;line-height:1.05;margin:8px 0 0;text-shadow:0 3px 0 #241d17} .shipment-stage{position:relative;min-height:0;align-self:stretch;pointer-events:none} .shipment-event:not(.scene-ready) .shipment-stage{visibility:hidden} .shipment-event.scene-ready .shipment-stage{animation:shipment-reveal 240ms ease-out both} @keyframes shipment-reveal{from{opacity:0}to{opacity:1}} .shipment-stage>svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 5px #0a131a55)} .shipment-stage svg svg{filter:none} .shipment-caption{align-self:end;justify-self:center;min-width:230px;text-align:center;padding:14px 25px;border:3px solid #33271b;border-radius:12px 8px 13px 7px;background:#ecdbb3 url('assets/print/card-stock.webp') center/450px;box-shadow:0 5px 0 #181812;color:#29231a;transform:rotate(-1deg);z-index:2} .shipment-caption p{margin:0;line-height:1.15} .shipment-phase{font-size:28px;font-weight:900} .shipment-detail{font-size:17px;margin-top:6px!important;color:#665234} .shipment-event[data-phase=result] .shipment-phase,.shipment-event[data-phase=lifting] .shipment-phase{font-size:38px;color:#a52e22} .shipment-result{position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%) rotate(-.5deg);padding:26px 26px 22px;background:#efdfb6 url('assets/print/card-stock.webp') center/520px;border:3px solid #30261a;border-radius:18px 12px 17px 10px;box-shadow:0 0 0 3px #ead5a0,0 9px 0 #211c15;color:#29231a;z-index:3;text-align:center;max-height:calc(100% - 50px);overflow:auto;box-sizing:border-box} .shipment-stamp{display:inline-block;font-size:19px;line-height:1.1;font-weight:900;color:#41734b;transform:rotate(-5deg);border:3px double #41734b;padding:5px 12px} .shipment-result h2{font-size:34px;font-weight:900;line-height:1.05;margin:17px 0 10px} .shipment-score{display:block;font-size:88px;line-height:1;letter-spacing:-3px;color:#a52e22;font-weight:900} .shipment-score-label{font-size:23px;font-weight:700;margin:0 0 23px} .shipment-progress-title{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:20px;margin:8px 0} .shipment-total{font-size:21px} .shipment-meter{height:17px;position:relative;border:2px solid #362a1c;border-radius:20px;background:#c8b999;margin:0 0 35px;isolation:isolate} .shipment-meter>i{display:block;height:100%;background:#b93729 url('assets/print/ink-wear.svg');border-radius:20px;width:0;max-width:100%} .shipment-tick{position:absolute;top:-4px;height:25px;width:2px;background:#59472c;transform:translateX(-2px)} .shipment-tick b{position:absolute;top:28px;left:50%;transform:translateX(-50%);font-size:16px;font-weight:800} .shipment-tick:last-child b{transform:translateX(-90%)} .shipment-tick.earned{background:#44724a} .shipment-next{font-size:18px;font-weight:700;text-align:center;margin:12px 0 20px!important;line-height:1.2;color:#5a4931} .shipment-event .shipment-continue,.shipment-milestone .shipment-continue{width:100%;min-height:54px;font:900 24px/1.05 Bitter,Georgia,serif;padding:12px 16px;border-radius:10px 8px 12px 9px;background:#4c7047 url('assets/print/ink-wear.svg');color:#fff0c9;border:3px solid #2b291d;box-shadow:inset 0 0 0 2px #e4d1a1,0 4px 0 #272018} .shipment-event [hidden]{display:none!important} .shipment-event button:focus-visible,.shipment-milestone button:focus-visible{outline:3px solid #ffd67a;outline-offset:4px} .shipment-event[data-phase=done] .shipment-stage{visibility:hidden} /* The same physical enamel marquee and burst rhythm as the one-armed bandit. */ .shipment-milestone::backdrop{background:radial-gradient(ellipse at center,#4f3018c9,#100c08f5 88%)} .shipment-award{position:relative;z-index:2;width:min(96vw,800px,125dvh);height:100%;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;text-align:center;padding:20px 0} .shipment-award-marquee{position:relative;width:100%;aspect-ratio:3/2;flex:none;filter:drop-shadow(0 14px 25px #0009)} .shipment-prize-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} .shipment-award-content{position:absolute;inset:32% 12% 26%;display:grid;grid-template-columns:32% 1fr;align-items:center;gap:4%;color:#382415} .shipment-award-content h2{font:900 clamp(22px,4.8vw,42px)/1.04 Bitter,Georgia,serif;margin:0 0 9px;letter-spacing:-.5px} .shipment-award-art{width:100%;aspect-ratio:1;background:url(assets/authority/johnny-upgrades.webp) left center/200% auto no-repeat;filter:drop-shadow(0 3px 0 #211c1540)} .shipment-award-art.legend{background-position:right center;clip-path:inset(0 0 0 8%)} .shipment-award-art.ticket{background:url(assets/icons/nav-ticket-v2.webp) center/contain no-repeat} .shipment-award-seal{display:block;color:#41734b;font:800 clamp(16px,3vw,24px)/1.1 Bitter,Georgia,serif} .shipment-award-description{font:700 clamp(19px,3.5vw,27px)/1.2 Bitter,Georgia,serif;color:#f4e2ba;max-width:90%;margin:14px 0 22px;text-shadow:0 2px #21180d} .shipment-milestone .shipment-continue{max-width:340px;width:85%} .shipment-win-particle{position:absolute;left:50%;top:43%;width:11px;height:19px;pointer-events:none;z-index:1;box-shadow:1px 2px #38241580;border-radius:1px 3px 0 1px} @media(max-width:360px){.shipment-layout{padding-inline:14px}.shipment-header h2{font-size:25px}.shipment-result{left:14px;right:14px;padding:20px 16px 17px}.shipment-result h2{font-size:28px}.shipment-score{font-size:74px}.shipment-progress-title,.shipment-total{font-size:18px}.shipment-next{font-size:17px}.shipment-caption{min-width:210px;padding:12px 20px}.shipment-phase{font-size:25px}} @media(max-height:650px){.shipment-header h2{margin-top:4px;font-size:25px}.shipment-day{font-size:15px}.shipment-result{padding-block:16px}.shipment-result h2{font-size:28px;margin:12px 0 5px}.shipment-score{font-size:66px}.shipment-score-label{font-size:20px;margin-bottom:14px}.shipment-award{padding-block:14px}} @media(orientation:landscape) and (max-height:650px){.shipment-layout{max-width:1050px;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:10px 30px}.shipment-header{grid-column:2;grid-row:1;align-self:end}.shipment-stage{grid-column:1;grid-row:1/3}.shipment-caption{grid-column:2;grid-row:2;align-self:center}.shipment-result{width:min(90%,510px);left:50%;right:auto;transform:translate(-50%,-50%)}.shipment-result h2{display:inline-block;margin:0 0 0 14px;font-size:26px}.shipment-score{font-size:56px;margin-top:9px}.shipment-score-label{font-size:18px;margin-bottom:10px}.shipment-next{margin:9px 0 12px!important}.shipment-award{padding:10px 0;width:min(70vw,650px,calc(150dvh - 225px))}.shipment-award-description{font-size:20px;margin:5px 0 12px}.shipment-award-content h2{font-size:26px}.shipment-award-seal{font-size:17px}} @media(prefers-reduced-motion:reduce){.shipment-event *,.shipment-milestone *{animation:none!important;transition:none!important}} .shipment-webgl{position:fixed;inset:0;display:block;width:100%;height:100%} /* ---- help-print.css ---- */ /* Rules are a paper booklet: fixed opaque heading, one contained body scroller. */ #helpDialog:not(.welcome){width:min(480px,calc(100% - 24px));max-height:calc(100dvh - max(24px,env(safe-area-inset-top)) - env(safe-area-inset-bottom));padding:0;overflow:hidden;background:#efdfb8 url(assets/print/card-stock.webp) center/420px!important;color:#30271b;font-family:Bitter,Georgia,serif;border-radius:22px 19px 21px 18px} #helpDialog[open]:not(.welcome){display:flex;flex-direction:column} #helpDialog:not(.welcome) .help-head{position:relative;top:auto;z-index:2;flex:0 0 auto;min-height:76px;padding:15px 18px;gap:14px;background:#eddeb6 url(assets/print/card-stock.webp) center/420px;border-bottom:3px solid #51432f;box-shadow:0 3px 0 #bda67670} #helpDialog:not(.welcome) #helpTitle{flex:0 1 auto;display:block;max-width:calc(100% - 60px);margin:0 auto 0 0;padding:7px 11px 6px;border:2.5px solid #30271b;border-radius:5px 8px 5px 6px;box-shadow:2px 3px 0 #837250;background:#f5e9ca;font:900 25px/1.05 Bitter,Georgia,serif;transform:rotate(-1deg);letter-spacing:-.5px} #helpDialog:not(.welcome) #helpClose{position:relative;inset:auto!important;flex:none;width:44px;min-width:44px;height:46px;margin:0} #helpDialog:not(.welcome) .help-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a18b60 transparent;scroll-padding:16px;padding:16px 18px 22px;isolation:isolate} #helpDialog:not(.welcome) .help-scene{position:relative;display:block;height:auto;max-height:none;aspect-ratio:408/135;margin:0 0 16px;border:2px solid #51432f;border-radius:9px 6px 10px 7px;box-shadow:0 3px #b19b6c;overflow:hidden;flex:none} #helpDialog:not(.welcome) .help-body p{font:500 14px/1.5 Bitter,Georgia,serif;margin:12px 0} #helpDialog:not(.welcome) .help-body p b{font-weight:800} #helpDialog:not(.welcome) .help-intro{margin:0 0 15px;font-size:15px} #helpDialog:not(.welcome) .help-intro>b{display:inline-block;margin-bottom:5px;font-size:20px;line-height:1.2;color:#98372a} #helpDialog:not(.welcome) .help-facts{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;margin:0 0 18px;padding:12px 0;border:0;border-top:2px solid #ad956b;border-bottom:2px solid #ad956b;border-radius:0;background:none;font:600 13px/1.35 Bitter,Georgia,serif} #helpDialog:not(.welcome) .help-facts b{font-size:17px;color:#823023;white-space:nowrap} #helpDialog:not(.welcome) .help-steps{margin:0 0 20px;padding:0;border:0;border-radius:0;background:none} #helpDialog:not(.welcome) .help-steps li{padding:12px 0 14px 60px;min-height:70px;border-bottom:1px solid #ac926777} #helpDialog:not(.welcome) .help-steps li:last-child{border-bottom:0;padding-bottom:0} #helpDialog:not(.welcome) .help-steps li::before{left:0;top:12px;width:17px;height:17px;border:1px solid #6b2c23;border-radius:4px 2px 4px 3px;box-shadow:none;background:#a93b2b;color:#fff0cf;font:800 11px/1 Bitter,Georgia,serif;z-index:1} #helpDialog:not(.welcome) .help-step-icon{position:absolute;left:6px;top:17px;width:43px;height:43px;object-fit:contain} #helpDialog:not(.welcome) .help-steps b{font:900 18px/1.2 Bitter,Georgia,serif;margin:0 0 5px} #helpDialog:not(.welcome) .help-steps span{font:500 14px/1.45 Bitter,Georgia,serif;color:#544631;margin:0} #helpDialog:not(.welcome) details{padding:0;margin:0;border:0;border-top:1.5px solid #a18a5e;border-radius:0;background:none;scroll-margin-top:14px} #helpDialog:not(.welcome) summary{display:flex;align-items:center;gap:10px;list-style:none;min-height:59px;padding:11px 0;font:800 16px/1.2 Bitter,Georgia,serif} #helpDialog:not(.welcome) summary::-webkit-details-marker{display:none} #helpDialog:not(.welcome) summary::after{content:'+';flex:none;margin-left:auto;width:23px;height:23px;text-align:center;color:#8d3227;font:800 24px/23px Bitter,Georgia,serif} #helpDialog:not(.welcome) details[open]>summary::after{content:'−'} #helpDialog:not(.welcome) details[open]>summary{color:#98372a} #helpDialog:not(.welcome) .help-section-icon{width:29px;height:30px;object-fit:contain;flex:none} #helpDialog:not(.welcome) details p{padding:0 2px;margin:0 0 13px} #helpDialog:not(.welcome) .parcel-note{padding:10px 12px;border-left:3px solid #ae3c2b;background:#dac9a366;font-size:13px} #helpDialog:not(.welcome) .help-replay{display:block;width:100%;padding:11px 4px;margin:7px 0 0;border:0;background:none;box-shadow:none;color:#51422e;text-decoration:underline;text-underline-offset:3px;font:600 13px/1.35 Bitter,Georgia,serif;min-height:40px} #helpDialog:not(.welcome) .help-action{margin-top:16px!important;font:800 17px/1.2 Bitter,Georgia,serif!important} #helpDialog :is(button,summary):focus-visible{outline:3px solid #ad3d2e;outline-offset:2px} @media(max-width:360px){#helpDialog:not(.welcome) .help-head{padding:13px 14px}#helpDialog:not(.welcome) #helpTitle{font-size:22px}#helpDialog:not(.welcome) .help-body{padding:14px}#helpDialog:not(.welcome) summary{font-size:15px}} @media(max-height:500px){#helpDialog:not(.welcome) .help-head{min-height:60px;padding:9px 16px}#helpDialog:not(.welcome) #helpTitle{font-size:22px}} /* ---- spot-varnish.css ---- */ /* Clear varnish reflects a warm white strip; no glow on the surrounding paper. */ .spot-varnish{display:none;position:absolute;pointer-events:none!important;overflow:hidden;opacity:0;z-index:4;isolation:isolate} .varnish-study-on .spot-varnish{display:block} .spot-varnish-art{mask-size:contain;mask-position:center;mask-repeat:no-repeat;mask-mode:alpha;-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat} .spot-varnish>i{display:block;position:absolute;inset:-50% -70%;background:linear-gradient(112deg,transparent 36%,#fff4cf14 43%,#fff9e572 48%,#fffff5 50%,#fff9e575 52%,#fff4d51a 57%,transparent 64%);transform:translateX(-65%);pointer-events:none} .varnish-button{position:relative} .spot-varnish-button{inset:4px;border-radius:inherit;z-index:3} .varnish-button:disabled .spot-varnish{display:none} .varnish-review-controls{position:fixed;left:12px;bottom:12px;display:flex;gap:6px;z-index:96;padding:5px;background:#29261fe8;border:1px solid #c3ad7f;border-radius:9px;box-shadow:0 4px 14px #0005} .varnish-review-controls button{padding:8px 11px;min-height:36px;border:1px solid #8c7957;border-radius:5px;box-shadow:none;background:#eee0ba;color:#30271e;font:700 12px/1.1 Bitter,Georgia,serif} .varnish-review-controls button[aria-pressed=true]{background:#48633d;color:#fff0cd} @media(prefers-reduced-motion:reduce){.spot-varnish{display:none!important}} /* ---- parcel-partial.css ---- */ /* Неполное место в фуре (tools/parcel_partial.py): пунктир пустого места поверх заполненного — видно, что место занято не до конца; снизу — сколько штук из k. */ #card.pc-card .pc-slot.f.part{border-style:dashed;background:#f6ecd0} #card.pc-card .pc-slot.f.part img{inset:8% 14% 26%;height:66%;opacity:.85} #card.pc-card .pc-slot .pc-part{position:absolute;left:0;right:0;bottom:1px;text-align:center; font-weight:800;font-size:10px;line-height:1.1;color:var(--ink,#2a2118);letter-spacing:-.02em} #card.pc-card .pc-qty b{display:grid;justify-items:center;line-height:1} #card.pc-card .pc-qty .pc-part-n{font-weight:700;font-size:11px;line-height:1.1;color:#6b5a3e;white-space:nowrap} /* ---- money-journal.css ---- */ /* Журнал «откуда деньги» (web/money-journal.js): бумажная плашка под шапкой слева. */ #moneyJournal{position:absolute;left:10px;top:calc(var(--world-top,120px) + 8px);z-index:4; max-width:min(300px,calc(100% - 20px));font-family:inherit;color:#25221c} #moneyJournal[data-mode="off"]{display:none} #moneyJournal .mj-sum{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap} #moneyJournal .mj-sum.plus{color:#3f6b3a} #moneyJournal .mj-sum.minus{color:#a92720} /* Свёрнут: одна строка с последней проводкой. */ #moneyJournal .mj-pill{display:flex;align-items:center;gap:6px;min-height:36px;max-width:100%;padding:5px 11px 5px 8px; border:2px solid #25221c;border-radius:12px 14px 13px 12px;background:#f2e3bd;box-shadow:0 3px 0 #25221c; font:inherit;font-size:13px;line-height:1.15;color:#25221c;text-align:left;cursor:pointer} #moneyJournal .mj-pill:active{translate:0 2px;box-shadow:0 1px 0 #25221c} #moneyJournal .mj-ico{font-size:17px;flex:none} #moneyJournal .mj-last{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} #moneyJournal[data-mode="open"] .mj-pill{display:none} #moneyJournal.ping .mj-pill{animation:mj-ping .5s steps(4,end)} @keyframes mj-ping{0%{rotate:0deg}25%{rotate:-2deg;scale:1.04}60%{rotate:1.5deg}100%{rotate:0deg;scale:1}} /* Развёрнут: список, новые сверху. */ #moneyJournal .mj-panel{display:none;width:min(300px,calc(100vw - 20px));max-width:100%; border:2px solid #25221c;border-radius:14px 12px 15px 13px;background:#f2e3bd;box-shadow:0 3px 0 #25221c;overflow:hidden} #moneyJournal[data-mode="open"] .mj-panel{display:flex;flex-direction:column} #moneyJournal header{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-bottom:2px solid #25221c;background:#e9d8ae} #moneyJournal header b{flex:1;font-size:16px;letter-spacing:.01em} #moneyJournal header button{width:36px;height:36px;border:2px solid #25221c;border-radius:10px;background:#f2e3bd; box-shadow:0 2px 0 #25221c;cursor:pointer;position:relative;padding:0} #moneyJournal header button:active{translate:0 2px;box-shadow:none} #moneyJournal .mj-fold::before{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px; border:solid #25221c;border-width:0 3px 3px 0;translate:-50% -70%;rotate:45deg} #moneyJournal .mj-x::before,#moneyJournal .mj-x::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:3px; background:#a92720;border-radius:2px;translate:-50% -50%;rotate:45deg} #moneyJournal .mj-x::after{rotate:-45deg} #moneyJournal .mj-list{list-style:none;margin:0;padding:6px 0;max-height:min(42vh,320px);overflow:auto; -webkit-mask:linear-gradient(transparent,#000 8px,#000 calc(100% - 8px),transparent);mask:linear-gradient(transparent,#000 8px,#000 calc(100% - 8px),transparent)} #moneyJournal .mj-list li{display:flex;align-items:baseline;gap:10px;padding:5px 12px;font-size:13px;line-height:1.25} #moneyJournal .mj-list li+li{border-top:1px solid #25221c26} #moneyJournal .mj-text{flex:1;min-width:0;overflow-wrap:anywhere} #moneyJournal .mj-list .mj-sum{font-size:15px;margin-left:auto} #moneyJournal .mj-list li.rival{background:#78929a1f} #moneyJournal .mj-list li.mine{background:#c99a3233} #moneyJournal .mj-who{font-weight:800} #moneyJournal .mj-empty{display:none;margin:0;padding:12px;font-size:13px;color:#5d5547} #moneyJournal.empty .mj-empty{display:block} /* ---- tile-sheet.css ---- */ /* Карточка точки из строки клетки (tile-sheet.js) */ .tile-sheet-plate{position:fixed;z-index:40;box-sizing:border-box;border:2.5px solid #2a221c;border-radius:12px;overflow:hidden;pointer-events:none; background:#f2e3bd url(assets/paper-grain.svg);box-shadow:0 4px 0 #2a221c,0 10px 22px #0005} .tile-sheet-row{position:absolute;inset:0;display:flex;align-items:center;gap:8px;padding:0 12px;white-space:nowrap;overflow:hidden; font:800 17px/1.1 Bitter,Georgia,serif;color:#2a221c} .tile-sheet-row b{margin-left:auto;padding:6px 12px;border-radius:9px;background:#4f7c4a;color:#fff6de;font-size:15px} .tile-sheet-row img{width:28px;height:28px;object-fit:contain} /* строки нет, пока открыта карточка; место под ней сохраняется, чтобы ничего не прыгало */ #tilebar.tile-sheet-away{visibility:hidden} /* кубик над затемнением: панель поднимается над окном, остальное в ней приглушено */ body.tile-sheet #panel{z-index:31} body.tile-sheet #panel .dk,body.tile-sheet #panel #inv,body.tile-sheet #guide{opacity:.4;filter:saturate(.6);pointer-events:none} /* карточка точки начинается под строкой денег — кошелёк виден, пока окно открыто */ body.tile-sheet #modal{padding-top:var(--sheet-top,14px)!important} /* под кошельком карточка ниже ростом: иначе на 667 px она выше места и наезжает на кошелёк сверху */ body.tile-sheet #modal:has(#card.print-property) #card.bare.illustrated-property.print-property{ height:min(560px,calc(100dvh - var(--sheet-top,14px) - 130px));max-height:calc(100dvh - var(--sheet-top,14px) - 130px)!important} /* Миссии (mission-peek.js): ряд вне потока шапки — поле не ужимается; виден только во время показа */ #top #qrow{position:absolute;left:8px;right:8px;top:calc(100% + 4px);z-index:3;transition:opacity .18s ease-out,translate .18s ease-out} body:not(.missions-peek) #top #qrow{opacity:0;translate:0 -8px;pointer-events:none;visibility:hidden;transition:opacity .22s ease-in,translate .22s ease-in,visibility 0s .22s} #top #qrow .mission-bump{animation:missionBump .5s cubic-bezier(.34,1.56,.64,1)} @keyframes missionBump{0%{scale:1}40%{scale:1.06}100%{scale:1}} @media (prefers-reduced-motion:reduce){#top #qrow,body:not(.missions-peek) #top #qrow{transition:none}#top #qrow .mission-bump{animation:none}} /* Банк: условия возврата (bank-terms.js) — печатная памятка на бумаге */ #card .bank-terms{margin:8px 0 10px;padding:8px 10px 6px;border:2px dashed #5b4c35;border-radius:8px;background:#f2e3bd80 url(assets/paper-grain.svg)} #card .bank-terms-title{margin:0 0 4px;font:800 12px/1.2 Bitter,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:#a92720} #card .bank-term{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;padding:3px 0;border-top:1px solid #5b4c3533;font-size:13px;line-height:1.3;color:#3c3325} #card .bank-term:first-of-type{border-top:0} #card .bank-term b{font:800 13px/1.3 Bitter,Georgia,serif;color:#25221c} /* Невысокий экран (667 px): строка «Прибыль за круг» повторяет блок прокачки «18 → 24» под ней — убираем повтор, чтобы карточка под кошельком влезла целиком, без наезда кнопки «Улучшить». */ @media (max-height:740px){body.tile-sheet #card.print-property .property-body>.box:has(+.uup){display:none}} /* Ряд миссий шире экрана (задачи SF) раздувал страницу на телефоне на 8 px — фишки и кнопки справа обрезались. Режем по ширине; в мультиплеере миссий нет — ряда нет совсем. */ #top #qrow{overflow-x:clip;width:auto;max-width:calc(100% - 16px);box-sizing:border-box} .mp-mode #top #qrow{display:none} /* ---- buy-buttons.css ---- */ /* Кнопки покупки: одна зелёная и одна тёмно-серая на всю игру (buy-buttons.js). */ :root{--buy-ok:#4f7c4a;--buy-no:#8c8873;--buy-no-text:#f6eed8;--buy-no-shadow:#655d46} #card button.buy-btn.buy-ok,.pass-offer button.buy-btn.buy-ok,#card button.enamel-button.buy-btn.buy-ok{--button-ink:var(--buy-ok);background-color:var(--buy-ok)!important;color:#fff6de!important} #card button.buy-btn.buy-no,.pass-offer button.buy-btn.buy-no,#card button.enamel-button.buy-btn.buy-no, #card button.enamel-button.buy-btn:disabled{--button-ink:var(--buy-no);background-color:var(--buy-no)!important;color:var(--buy-no-text)!important;box-shadow:1px 3px 0 var(--buy-no-shadow)!important;text-shadow:none} /* эмаль-атлас под текстом: зелёный и тёмный слой вместо красного и синего */ #card button.buy-btn .enamel-skin{filter:none} #card button.buy-btn.buy-ok .enamel-skin{filter:hue-rotate(0)} /* Премиум Билета: вместо красной картинки-кнопки — такая же зелёная печатная кнопка с короной и ценой */ #card.battlepass-card #bpBuy.buy-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;font:800 19px/1 Bitter,Georgia,serif;letter-spacing:.02em;text-transform:uppercase; background:var(--buy-ok) url(assets/print/ink-wear.svg) center/cover!important;border:2.5px solid #25221c!important;border-radius:12px 9px 11px 8px; box-shadow:0 3px 0 #25221c,inset 0 0 0 2px var(--buy-ok),inset 0 0 0 3.5px #f2e3bd99!important;color:#fff6de!important;text-shadow:1px 1px 0 #1f3a1c} #card.battlepass-card #bpBuy.buy-btn svg{display:block;width:30px;height:30px;flex:none} #card.battlepass-card #bpBuy.buy-btn b{display:inline;font-size:20px;color:#ffe08a;letter-spacing:0}