styles.css - master - DecagoniC/BDZ_GenII

styles.css
82 строки7 KB
DecagoniC
upload files
24 дек 2025, 13:44
24 дек 2025, 13:44539aded
:root{--bg:#fff;--fg:#111;--muted:#6b7280;--primary:#0b84ff;--accent:#00c2a8;--card:#f6f7f9;--border:#e5e7eb}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;background:
  linear-gradient(#8bd1ff 40%, #7ac7ff 60%) fixed; color:var(--fg)}
button{appearance:none;border:1px solid var(--border);background:var(--btn-bg,#fff);color:var(--btn-fg,#111);padding:.6rem .9rem;border-radius:10px;cursor:pointer;transition:transform .05s ease,background .2s;border-color:var(--btn-border,#cdb78e)}
button:hover{background:#fafafa}
button:active{transform:scale(0.98)}
button.primary{background:var(--btn-primary-bg,#3b3b3b);color:var(--btn-primary-fg,#fff);border-color:var(--btn-primary-bg,#3b3b3b)}
button.ghost{background:transparent}
.topbar,.sidebar,.modal{
  background: linear-gradient(135deg, #8b6f47 0%, #a0826d 100%);
  border-color: #6b5a42;
  box-shadow: 0 2px 0 #9d7d66 inset, 0 6px 20px rgba(0,0,0,.12);
}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:5}
.brand{font-weight:700;letter-spacing:.3px; text-shadow:0 1px 0 #fff}
.stats{display:flex;gap:.8rem;align-items:center}
.game{display:grid;grid-template-columns:280px 1fr;min-height:calc(100vh - 56px)}
.sidebar{border-right:1px solid var(--border);padding:1rem;display:flex;flex-direction:column;gap:1rem}
.sidebar.lake{background: url('./ui_lake.png') center/cover, linear-gradient(135deg, #8ba8b8 0%, #a09880 100%); background-blend-mode: multiply;}
.sidebar.river{background: url('./ui_river.png') center/cover, linear-gradient(135deg, #6d8b6f 0%, #85a276 100%); background-blend-mode: multiply;}
.sidebar.sea{background: url('./ui_sea.png') center/cover, linear-gradient(135deg, #4a7ba7 0%, #6a95b8 100%); background-blend-mode: multiply;}
.sidebar.deep{background: url('./ui_deep.png') center/cover, linear-gradient(135deg, #3a4a5a 0%, #5a6a7a 100%); background-blend-mode: multiply;}
.location{display:flex;flex-direction:column;gap:.6rem}
.loc-name{font-weight:700}
.loc-actions{display:flex;align-items:center;gap:.6rem}
.bite{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:700;animation:pulse .8s infinite}
.hidden{display:none!important}
.actions{display:flex;flex-direction:column;gap:.6rem}
.viewport{position:relative;display:grid;place-items:center;background:transparent;image-rendering: pixelated;}
#scene{width:100%;height:auto;max-height:calc(100vh - 56px);background:#6ec1ff}
#overlay{position:absolute;inset:0;pointer-events:none;width:100%;height:auto;max-height:calc(100vh - 56px)}
/* Волны поверх канваса для "живости" */
.viewport::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient( to right, rgba(255,255,255,.06), rgba(255,255,255,.06) 2px, transparent 2px, transparent 12px);
  mix-blend-mode:soft-light;pointer-events:none;animation:drift 8s linear infinite}
.mini{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:960px;max-width:70vw;z-index:15;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:10px}
.mini-hint{font-size:.8rem;color:var(--muted);text-align:center;margin-top:6px}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:saturate(120%) blur(2px);z-index:20}
.modal{position:fixed;inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:min(720px,92vw);max-height:84vh;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.15);z-index:30}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}
.modal-body{padding:14px}
.icon.close{border:none;background:transparent;font-size:18px}
.list{display:grid;gap:.5rem}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{padding:.7rem .8rem;border:1px solid var(--border);border-radius:12px;background:var(--card);display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.card .meta{display:flex;flex-direction:column;font-size:.9rem}
.card small{color:var(--muted)}
.badge{padding:.2rem .4rem;border-radius:6px;background:#111;color:#fff;font-size:.72rem}
.row{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.map-list{display:grid;gap:.6rem}
.equip{display:grid;gap:.5rem;margin-bottom:.8rem}
.sell-row{display:flex;justify-content:space-between;align-items:center;margin-top:.6rem}
#world-map{position:relative;aspect-ratio:16/9;background:url('./world_map.png') center/cover;border:1px solid var(--border);border-radius:12px;min-height:300px;height:calc(84vh - 48px)}
#world-map .map-btn{position:absolute;background:#111;color:#fff;border:none;padding:.5rem .7rem;border-radius:10px;opacity:.9}
#world-map .map-btn.lake{left:36%;top:48%}
#world-map .map-btn.river{left:52%;top:52%}
#world-map .map-btn.sea{left:68%;top:60%}
#world-map .map-btn.deep{left:78%;top:72%}
.modal-body .map-list{display:none}
.modal#modal-map .modal-body{padding:0;height:calc(84vh - 48px)}
.modal#modal-inventory{background:#fff url('./inventory_bg.png') center/cover}
.modal#modal-shop{background:#fff url('./shop_bg.png') center/cover}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes drift{0%{background-position:0 0}100%{background-position:200px 0}}
@media (max-width: 900px){
  .game{grid-template-columns:1fr}
  .sidebar{order:2;border-right:none;border-top:1px solid var(--border)}
  .viewport{order:1}
  .shop-grid{grid-template-columns:1fr}
  .mini{top:50%;left:50%;transform:translate(-50%,-50%);max-width:92vw}
}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
#mini{width:100%;height:260px}
.shop-grid .card{flex-direction:column;align-items:flex-start}
.card .thumb{width:88px;height:88px;image-rendering:pixelated;object-fit:contain;border-radius:10px;margin-bottom:8px}

body[data-theme="lake"]{--btn-bg:#f6fbf6;--btn-fg:#103316;--btn-border:#9fc89f;--btn-primary-bg:#157f3b;--btn-primary-fg:#fff}
body[data-theme="river"]{--btn-bg:#f6f8fb;--btn-fg:#13253a;--btn-border:#8fb1cd;--btn-primary-bg:#1e6091;--btn-primary-fg:#fff}
body[data-theme="sea"]{--btn-bg:#f4f9fb;--btn-fg:#0d2430;--btn-border:#7fb8d6;--btn-primary-bg:#0b84ff;--btn-primary-fg:#fff}
body[data-theme="deep"]{--btn-bg:#0f172a;--btn-fg:#e5e7eb;--btn-border:#334155;--btn-primary-bg:#0ea5e9;--btn-primary-fg:#0b1220}