/* Meldwall — Coast mode styles (mobile-first, deep-navy + brass = premium) */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background:
    radial-gradient(130% 90% at 50% -10%, #143b4e 0%, #0a2634 48%, #051720 100%);
  color: #eaf6ff; overflow: hidden; user-select: none;
}
#ctGame { position: relative; max-width: 560px; margin: 0 auto; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }

/* 顶栏 */
.ct-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 6px; }
.ct-title { font-size: 16px; font-weight: 800; letter-spacing: .5px;
  color: #f4d58d; text-shadow: 0 0 14px rgba(233,196,106,.35); }
.ct-title small { display: block; font-size: 10px; font-weight: 500; color: #8fb8c6; letter-spacing: 0; }
.ct-city { text-align: right; font-size: 12px; color: #cfe9f2; }
.ct-city b { font-size: 15px; color: #fff; }
.ct-city small { display: block; font-size: 10px; color: #8fb8c6; }

/* HUD 双压力计 */
.ct-hud { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.ct-gauge { background: rgba(6,30,40,.62); border: 1px solid rgba(233,196,106,.28);
  border-radius: 12px; padding: 6px 9px; box-shadow: inset 0 0 16px rgba(0,0,0,.35); }
.ct-gauge .lab { font-size: 10px; color: #9fc8d6; display: flex; justify-content: space-between; }
.ct-gauge .lab b { color: #fff; font-weight: 700; }
.ct-bar { height: 9px; border-radius: 6px; background: rgba(255,255,255,.12); margin-top: 5px; overflow: hidden; }
.ct-bar > i { display: block; height: 100%; width: 50%; border-radius: 6px; transition: width .18s linear; }
.ct-bar.water > i { background: linear-gradient(90deg,#39c0ff,#0a6cff); }
.ct-bar.carbon > i { background: linear-gradient(90deg,#5be39a,#1f9d55); }
.ct-bar.carbon.low > i { background: linear-gradient(90deg,#ffd24d,#ff7a3c); }
.ct-time { grid-column: 1 / -1; text-align: center; font-size: 11px; color: #9fd8e6; }
.ct-time b { color: #f4d58d; font-size: 14px; }

/* 炮台英雄区 — the grand coastal battery. Fires when you complete a meld. */
.ct-stage { position: relative; height: 172px; border-radius: 16px; overflow: hidden; margin-bottom: 8px;
  background: linear-gradient(180deg, #0c3346 0%, #0a2434 55%, #06161f 100%);
  border: 1px solid rgba(233,196,106,.3); box-shadow: inset 0 0 30px rgba(0,0,0,.5);
  transition: border-color .3s linear, box-shadow .3s linear; }
.ct-battery { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); width: 248px; z-index: 3;
  filter: drop-shadow(0 7px 9px rgba(0,0,0,.55)); }
.ct-cannon { width: 248px; height: 172px; display: block; }
/* barrel pivots around the carriage axle and recoils along its own axis */
.ct-barrel { transform: rotate(-15deg); transform-origin: 120px 112px; transition: transform .12s ease-out; }
.ct-barrel.recoil { transform: rotate(-15deg) translateX(-13px); }
.ct-flash { opacity: 0; transform-origin: 211px 112px; }
.ct-flash.fire { animation: ctFlash .42s ease-out; }
@keyframes ctFlash { 0%{opacity:0; transform:scale(.2);} 22%{opacity:1; transform:scale(1.15);} 100%{opacity:0; transform:scale(1.9);} }

/* 海面 — rises from the bottom of the stage. This is the sea the cannon defends. */
.ct-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 4%; z-index: 2;
  background: linear-gradient(180deg, rgba(28,140,220,.9), rgba(7,56,130,.96));
  border-top: 2px solid rgba(155,228,255,.95); transition: height .2s linear, background .35s;
  box-shadow: 0 -3px 14px rgba(60,180,255,.5); }
.ct-sea-surface { position: absolute; top: -7px; left: 0; right: 0; height: 9px;
  background: radial-gradient(circle at 12px -3px, transparent 9px, rgba(165,232,255,.6) 10px) repeat-x;
  background-size: 26px 9px; }
.ct-flood { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  transition: opacity .3s linear; box-shadow: inset 0 0 56px 20px rgba(255,60,40,.55); }
.ct-proj-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible; }
.ct-proj { position: absolute; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%;
  box-shadow: 0 0 14px 5px currentColor; background: currentColor; }
.ct-proj.sea { color: #6fe6ff; } .ct-proj.carbon { color: #ffd24d; }
.ct-splash { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 2px solid currentColor; opacity: .9; }
.ct-splash.sea { color: #aef0ff; } .ct-splash.carbon { color: #ffe08a; }
.ct-stage.hit { animation: ctShake .26s ease; }
@keyframes ctShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-3px);} 75%{transform:translateX(3px);} }

/* 设施内部 — 真实排放场景剪影垫在牌阵后面，牌摆在中央控制机架上 */
.ct-board-wrap { position: relative; flex: 1; min-height: 0; max-width: 380px; width: 100%; margin: 0 auto;
  border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #123a4d 0%, #07212e 100%);
  border: 1px solid rgba(233,196,106,.22); box-shadow: inset 0 0 40px rgba(0,0,0,.5); }
.ct-scene { position: absolute; inset: 0; z-index: 0; opacity: .8; pointer-events: none; }
.ct-scene svg { width: 100%; height: 100%; display: block; }
.ct-board { position: relative; z-index: 2; margin: auto; flex: 0 0 auto;
  display: grid; gap: 4px; padding: 9px; border-radius: 12px;
  background: rgba(7,26,36,.74); border: 1px solid rgba(233,196,106,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 26px rgba(0,0,0,.4); }
.ct-cell { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.ct-cell .tl { width: 100%; height: 100%; display: block; cursor: pointer; border-radius: 8px; transition: transform .12s, box-shadow .12s, opacity .25s;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.ct-cell .tl svg { width: 100%; height: 100%; display: block; }
.ct-cell .tl .tl-img { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; }
.ct-cell.sel .tl { transform: translateY(-5px) scale(1.1); box-shadow: 0 0 0 4px #ffe06b, 0 0 22px rgba(255,210,77,.9); z-index: 2; }
.ct-cell.pop .tl { opacity: 0; transform: scale(.2) rotate(20deg); }
.ct-board.picking .ct-cell:not(.sel) .tl { opacity: .5; }

/* 浮动文字（落在棋盘上，牌型名） */
.ct-floaters { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.ct-floater { position: absolute; font-weight: 800; font-size: 16px; text-shadow: 0 2px 6px rgba(0,0,0,.6);
  animation: ctFloat 1s ease-out forwards; white-space: nowrap; }
@keyframes ctFloat { 0%{ transform: translateY(0) scale(.7); opacity: 0; }
  20%{ opacity: 1; transform: translateY(-8px) scale(1.1);} 100%{ transform: translateY(-46px) scale(1); opacity: 0; } }

/* 遮罩 */
.ct-overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: rgba(3,18,26,.82); backdrop-filter: blur(4px); padding: 18px; text-align: center; }
.ct-overlay.hide { display: none; }
.ct-card { max-width: 420px; background: linear-gradient(180deg,#0e3a4c,#082531); border: 1px solid rgba(233,196,106,.4);
  border-radius: 18px; padding: 22px 20px; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.ct-card h1 { margin: 0 0 6px; font-size: 22px; color: #f4d58d; }
.ct-card .ct-sub { margin: 0 0 10px; font-size: 13px; letter-spacing: .4px; color: #8fc6d6; font-weight: 600; }
.ct-card h2 { margin: 4px 0 10px; font-size: 17px; color: #fff; }
.ct-card p { font-size: 13px; line-height: 1.7; color: #cfe9f2; margin: 8px 0; }
.ct-card .fact { background: rgba(90,200,230,.12); border-left: 3px solid #5be3c0; padding: 10px 12px; border-radius: 8px;
  text-align: left; font-size: 12.5px; color: #dff4f8; margin: 12px 0; }
.ct-card .fact b { color: #aef0e0; }
.ct-btn { display: inline-block; margin-top: 10px; padding: 12px 26px; border: none; border-radius: 999px; cursor: pointer;
  font-size: 15px; font-weight: 800; color: #2a1c04; background: linear-gradient(180deg,#ffe9a8,#e9c46a);
  box-shadow: 0 8px 22px rgba(233,196,106,.42); }
.ct-btn:active { transform: translateY(1px); }
.ct-btn.ghost { background: rgba(255,255,255,.1); color: #dff4f8; box-shadow: none; border: 1px solid rgba(255,255,255,.25); }
.ct-stats { display: flex; gap: 14px; justify-content: center; margin: 12px 0 4px; }
.ct-stats div { font-size: 12px; color: #9fd8e6; }
.ct-stats div b { display: block; font-size: 20px; color: #fff; }

/* 底部操作 */
.ct-actions { display: flex; gap: 8px; margin-top: 8px; }
.ct-actions button { flex: 1; padding: 10px; border-radius: 12px; border: 1px solid rgba(233,196,106,.32);
  background: rgba(10,42,54,.7); color: #eaf6ff; font-size: 13px; font-weight: 700; cursor: pointer; }
.ct-actions button:active { background: rgba(20,70,86,.9); }

/* 命中特效 */
.ct-cell.shield .tl { animation: ctShield .4s ease; }
@keyframes ctShield { 0%{ box-shadow: 0 0 0 0 rgba(90,227,154,.9);} 100%{ box-shadow: 0 0 0 18px rgba(90,227,154,0);} }
.ct-cell.carbon .tl { animation: ctCarbon .4s ease; }
@keyframes ctCarbon { 0%{ box-shadow: 0 0 0 0 rgba(255,210,77,.9);} 100%{ box-shadow: 0 0 0 18px rgba(255,210,77,0);} }

@media (pointer: coarse) {
  .ct-cell .tl { filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
}
/* Short phones: compact the cannon stage so the tile rack keeps a readable size */
@media (max-height: 720px) {
  .ct-stage { height: 126px; }
  .ct-battery { width: 182px; }
  .ct-cannon { width: 182px; height: 126px; }
  .ct-hud { margin-bottom: 6px; }
  .ct-gauge { padding: 4px 8px; }
  .ct-hint { font-size: 11.5px; }
  .ct-actions { margin-top: 6px; }
  .ct-actions button { padding: 8px; }
}