* { margin:0; padding:0; box-sizing:border-box; }
body { overflow:hidden; background:#0D2137; font-family:'PingFang SC','Microsoft YaHei','Segoe UI',sans-serif; touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
#gameCanvas { display:block; width:100vw; height:100vh; touch-action:none; }

/* ===== Loading ===== */
#loading { position:fixed; inset:0; background:linear-gradient(180deg,#0D2137 0%,#1a4a6a 50%,#2196F3 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:999; }
.loading-logo { font-size:32px; font-weight:900; color:#fff; text-shadow:0 3px 12px rgba(33,150,243,.5); margin-bottom:8px; letter-spacing:2px; }
.loading-sub { font-size:14px; color:rgba(255,255,255,.6); margin-bottom:24px; }
.loading-wave { width:120px; height:6px; background:rgba(255,255,255,.15); border-radius:3px; overflow:hidden; position:relative; }
.loading-wave::after { content:''; position:absolute; left:-60px; top:0; width:60px; height:100%; background:linear-gradient(90deg,transparent,#FF9800,transparent); border-radius:3px; animation:loadWave 1.2s infinite; }
@keyframes loadWave { to { left:120px; } }

/* ===== HUD ===== */
#hud { position:fixed; top:0; left:0; right:0; padding:12px 14px; display:flex; justify-content:space-between; align-items:flex-start; z-index:10; pointer-events:none; }
.hud-left { display:flex; flex-direction:column; gap:6px; }
#hunger-bar, #oxygen-bar { width:150px; height:26px; background:rgba(0,0,0,.45); border-radius:13px; position:relative; overflow:hidden; border:2px solid rgba(255,255,255,.15); box-shadow:0 2px 8px rgba(0,0,0,.3); }
#hunger-fill { height:100%; background:linear-gradient(90deg,#FF6B35,#FFA726,#FFD54F); border-radius:11px; width:100%; transition:width .4s ease; }
#hunger-icon, #oxygen-icon { position:absolute; left:6px; top:50%; transform:translateY(-50%); font-size:14px; z-index:1; }
#hunger-text, #oxygen-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.6); }
#oxygen-fill { height:100%; background:linear-gradient(90deg,#1565C0,#42A5F5,#80D8FF); border-radius:11px; width:100%; transition:width .4s ease; }
#oxygen-bar { display:none; }
#day-count { color:rgba(255,255,255,.85); font-size:13px; font-weight:600; background:rgba(0,0,0,.35); padding:3px 12px; border-radius:10px; display:inline-block; box-shadow:0 1px 4px rgba(0,0,0,.2); }

.hud-right { display:flex; flex-direction:column; gap:4px; }
#resources { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.res-item { background:rgba(0,0,0,.4); padding:4px 10px; border-radius:10px; color:#fff; font-size:13px; font-weight:600; display:flex; align-items:center; gap:3px; border:1px solid rgba(255,255,255,.1); box-shadow:0 1px 4px rgba(0,0,0,.2); backdrop-filter:blur(4px); }

/* ===== Toolbar ===== */
#toolbar { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:14px; z-index:10; }
.tool-btn { width:70px; height:70px; border:none; border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.05) 100%); color:#fff; font-size:13px; font-weight:600; line-height:1.2; cursor:pointer; backdrop-filter:blur(8px); box-shadow:0 4px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .15s, box-shadow .15s; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:2px solid rgba(255,255,255,.15); min-width:44px; min-height:44px; }
.tool-btn .tool-icon { font-size:24px; }
.tool-btn .tool-label { font-size:11px; }
.tool-btn:active { transform:scale(.9); box-shadow:0 2px 8px rgba(0,0,0,.3); }
.tool-btn.active { border-color:#FF9800; background:linear-gradient(180deg,rgba(255,152,0,.35) 0%,rgba(255,152,0,.15) 100%); box-shadow:0 4px 16px rgba(255,152,0,.3), inset 0 1px 0 rgba(255,255,255,.2); }

/* Surface button */
#surface-btn { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:10; display:none; justify-content:center; }
#surface-btn .surface-btn { width:90px; height:90px; border-radius:50%; background:linear-gradient(180deg,rgba(66,165,245,.6) 0%,rgba(21,101,192,.6) 100%); border:3px solid rgba(128,216,255,.5); box-shadow:0 4px 20px rgba(33,150,243,.4); animation:surfacePulse 1.5s infinite; }
@keyframes surfacePulse { 0%,100% { box-shadow:0 4px 20px rgba(33,150,243,.4); } 50% { box-shadow:0 4px 30px rgba(33,150,243,.7); } }

/* ===== Login Area ===== */
#login-area { position:fixed; top:12px; right:14px; z-index:10; display:flex; gap:8px; }
#login-area button { padding:7px 14px; border:none; border-radius:12px; font-size:12px; font-weight:600; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.25); transition:transform .15s; min-width:44px; min-height:44px; }
#login-area button:active { transform:scale(.92); }
#btn-login { background:linear-gradient(135deg,#07c160,#06ad56); color:#fff; }
#btn-share { background:linear-gradient(135deg,#1989fa,#1472d4); color:#fff; }

/* ===== Modal ===== */
#modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); z-index:50; animation:fadeIn .2s; }
#modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:linear-gradient(180deg,#1a3d5c 0%,#0f2a42 100%); border:2px solid rgba(255,255,255,.12); border-radius:20px; padding:22px 18px; min-width:300px; max-width:92vw; max-height:72vh; overflow-y:auto; z-index:51; color:#fff; box-shadow:0 12px 40px rgba(0,0,0,.5); animation:modalIn .25s ease; }
@keyframes modalIn { from { opacity:0; transform:translate(-50%,-48%) scale(.95); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#modal-title { font-size:20px; font-weight:800; margin-bottom:14px; text-align:center; color:#FFD54F; text-shadow:0 1px 4px rgba(0,0,0,.3); }
.modal-close { display:block; margin:14px auto 0; padding:10px 32px; background:linear-gradient(135deg,#FF9800,#FF6B35); color:#fff; border:none; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 3px 12px rgba(255,107,53,.35); transition:transform .15s; min-width:44px; min-height:44px; }
.modal-close:active { transform:scale(.93); }

/* Build items */
.build-item { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; margin:8px 0; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); border-radius:14px; cursor:pointer; transition:background .15s, border-color .15s; min-height:44px; }
.build-item:active { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.2); }
.build-item.disabled { opacity:.4; pointer-events:none; }
.build-name { font-size:15px; font-weight:700; }
.build-desc { font-size:12px; color:rgba(255,255,255,.55); margin-top:2px; }
.build-cost { font-size:13px; color:#FFD54F; font-weight:600; white-space:nowrap; }

/* Bag items */
.bag-item { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; margin:6px 0; background:rgba(255,255,255,.08); border-radius:12px; min-height:44px; }
.bag-action { padding:6px 14px; background:linear-gradient(135deg,#4caf50,#388e3c); color:#fff; border:none; border-radius:10px; font-size:12px; font-weight:600; cursor:pointer; box-shadow:0 2px 6px rgba(76,175,80,.3); transition:transform .15s; min-width:44px; min-height:44px; }
.bag-action:active { transform:scale(.92); }

/* Fish notification */
#fish-notify { position:fixed; top:45%; left:50%; transform:translate(-50%,-50%); background:linear-gradient(135deg,rgba(13,33,55,.92),rgba(26,61,92,.92)); backdrop-filter:blur(10px); color:#fff; padding:18px 32px; border-radius:18px; font-size:18px; font-weight:700; z-index:40; border:2px solid rgba(255,255,255,.12); box-shadow:0 8px 32px rgba(0,0,0,.4); animation:notifyIn .3s ease; text-align:center; }
@keyframes notifyIn { from { opacity:0; transform:translate(-50%,-40%) scale(.9); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }

/* ===== Scrollbar ===== */
#modal::-webkit-scrollbar { width:4px; }
#modal::-webkit-scrollbar-track { background:transparent; }
#modal::-webkit-scrollbar-thumb { background:rgba(255,255,255,.2); border-radius:2px; }

/* ===== Mobile ===== */
@media (max-width:380px) {
  .tool-btn { width:62px; height:62px; border-radius:16px; }
  .tool-btn .tool-icon { font-size:22px; }
  #hunger-bar, #oxygen-bar { width:120px; height:24px; }
  #modal { min-width:unset; width:92vw; padding:18px 14px; }
  .res-item { font-size:12px; padding:3px 8px; }
  #surface-btn .surface-btn { width:80px; height:80px; }
}