:root {
  --ink: #1a1a1a; --paper: #fff8e6; --red: #e2452b; --yellow: #ffd23f; --green: #3aa35c; --blue: #2f6fe0;
  --panel: #2b2420; --panel2: #3a302a;
  --font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b1512; font-family: var(--font); color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font-family: var(--font); cursor: pointer; }

.screen { position: fixed; inset: 0; z-index: 10; }

/* —— 车库 —— */
#garage { color: var(--paper); pointer-events: none; }
#garage button, #garage .g-drawer, #garage .g-top { pointer-events: auto; }
.g-head { display: flex; align-items: center; justify-content: space-between; }
.g-head h1 { margin: 0; font-size: 34px; font-weight: 900; color: var(--yellow); text-shadow: 3px 3px 0 var(--red), 5px 5px 0 #000; letter-spacing: 2px; }
.g-head h1 small { font-size: 13px; color: #c9b9a0; text-shadow: none; letter-spacing: 4px; margin-left: 8px; }
.g-cash { font-size: 24px; font-weight: 900; background: #000a; border: 3px solid var(--yellow); border-radius: 12px; padding: 4px 16px; color: var(--yellow); }
.g-body { display: grid; grid-template-columns: 1.1fr 1.2fr 0.9fr; gap: 16px; margin-top: 12px; flex: 1; min-height: 0; }
.g-body h2 { margin: 0 0 8px; font-size: 18px; color: var(--yellow); }
.g-body h2 small { font-size: 12px; color: #aa9; font-weight: 400; }
.g-left, .g-mid, .g-right { background: #00000055; border: 2px solid #5a4a3e; border-radius: 14px; padding: 12px; min-height: 0; }
#g-car { width: 100%; height: auto; background: linear-gradient(#8fd3ff, #e9f6ff 70%, #7a5532 70%); border-radius: 10px; border: 3px solid var(--ink); }
.g-cars { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.car-chip { flex: 1; min-width: 90px; background: var(--panel2); color: var(--paper); border: 3px solid #5a4a3e; border-radius: 10px; padding: 6px; text-align: center; font-weight: 700; }
.car-chip.on { border-color: var(--yellow); background: #5a4630; }
.car-chip.locked { opacity: 0.55; }
.car-chip small { display: block; font-weight: 400; font-size: 11px; color: #cbb; }
.g-carinfo { font-size: 13px; color: #d8c8b0; margin-top: 8px; line-height: 1.6; }
.g-ups { display: flex; flex-direction: column; gap: 7px; }
.up { display: grid; grid-template-columns: 70px 1fr 104px; align-items: center; gap: 8px; background: var(--panel2); border-radius: 10px; padding: 6px 8px; }
.up b { font-size: 16px; }
.up .pips { display: flex; gap: 4px; }
.up .pip { flex: 1; height: 12px; border-radius: 3px; background: #1a1410; border: 2px solid #000; }
.up .pip.on { background: var(--yellow); }
.up .desc { font-size: 11px; color: #bba; grid-column: 2; margin-top: -4px; }
.buy { background: var(--green); color: #fff; border: 3px solid var(--ink); border-radius: 9px; padding: 5px 0; font-weight: 900; font-size: 15px; box-shadow: 0 3px 0 var(--ink); grid-row: span 2; }
.buy:disabled { background: #555; color: #999; box-shadow: none; cursor: default; }
.buy.max { background: #6a5a3a; }
.small-btn.hot { background: var(--yellow); color: #1a1410; }
.mods { display: grid; gap: 10px; text-align: left; max-height: 60vh; overflow: auto; }
.mod-slot { background: var(--panel2); border-radius: 10px; padding: 8px 10px; }
.mod-slot h3 { margin: 0 0 6px; font-size: 15px; color: var(--yellow); }
.mod-slot h3 small { color: #bba; font-weight: 400; margin-left: 6px; }
.mod-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid #0004; }
.mod-row b { font-size: 14px; } .mod-row div small { display: block; font-size: 11px; color: #bba; }
.mod-row.locked { opacity: 0.45; }
.mod-row button { min-width: 84px; border: 3px solid var(--ink); border-radius: 8px; padding: 4px 8px; font-weight: 900; background: var(--green); color: #fff; }
.mod-row button.on { background: var(--yellow); color: #1a1410; }
.mod-row button:disabled { background: #555; color: #999; }
.g-regions { display: flex; flex-direction: column; gap: 8px; }
.region { background: var(--panel2); color: var(--paper); border: 3px solid #5a4a3e; border-radius: 10px; padding: 8px 10px; text-align: left; }
.region.on { border-color: var(--yellow); background: #5a4630; }
.region.locked { opacity: 0.45; cursor: default; }
.region b { font-size: 17px; }
.region small { display: block; color: #cbb; font-size: 12px; }
.region .best { height: 6px; background: #1a1410; border-radius: 3px; margin-top: 5px; overflow: hidden; }
.region .best i { display: block; height: 100%; background: var(--red); }
.big-btn { width: 100%; margin-top: 12px; font-size: 28px; font-weight: 900; color: var(--ink); background: var(--yellow); border: 4px solid var(--ink); border-radius: 14px; padding: 12px; box-shadow: 0 6px 0 var(--ink); }
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.small-btn { background: var(--panel2); color: var(--paper); border: 2px solid #6a5a4e; border-radius: 8px; padding: 6px 10px; font-size: 14px; }
.g-links { display: flex; gap: 6px; margin-top: 10px; }
.g-stats { font-size: 12px; color: #aa9; margin-top: 10px; line-height: 1.7; }

/* —— HUD —— */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; font-weight: 900; }
#hud button { pointer-events: auto; }
.hud-left { position: absolute; left: 14px; top: 12px; width: 220px; }
.bar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.bar-ico { font-size: 18px; width: 22px; text-align: center; filter: drop-shadow(1px 1px 0 #000); }
.bar-track { flex: 1; height: 16px; background: #000a; border: 3px solid var(--ink); border-radius: 8px; overflow: hidden; }
.bar-fill { height: 100%; transition: width 0.1s; }
.bar-fill.fuel { background: linear-gradient(#ffd23f, #e0a020); }
.bar-fill.hp { background: linear-gradient(#ff6a5a, #c02a1a); }
.bar-fill.boost { background: linear-gradient(#8fe8ff, #2b9ee2); }
.hud-sub { color: #fff; text-shadow: 2px 2px 0 #000; font-size: 15px; margin-left: 28px; }
.hud-sub b { color: #ffd28a; }
#h-cling { position: absolute; left: 50%; top: 162px; transform: translateX(-50%); color: #ff8a6a; font-size: 22px; text-shadow: 2px 2px 0 #000; white-space: nowrap; animation: blink 0.35s infinite alternate; }
#h-cling:empty { display: none; }
.prog-mark.best span { font-size: 14px; }
.bar-fill.low { animation: blink 0.4s infinite alternate; }
@keyframes blink { to { opacity: 0.35; } }
.nitro { display: flex; gap: 4px; margin-left: 28px; }
.nitro i { width: 22px; height: 14px; border-radius: 4px; background: #2bb3e2; border: 2px solid var(--ink); }
.hud-mid { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: min(46vw, 520px); text-align: center; color: #fff; text-shadow: 2px 2px 0 #000; }
.prog { position: relative; height: 14px; background: #000a; border: 3px solid var(--ink); border-radius: 8px; }
.prog-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #ffffff55; border-radius: 4px; }
.prog-car { position: absolute; top: -14px; font-size: 18px; transform: translateX(-50%) scaleX(-1); text-shadow: none; }
.prog-mark { position: absolute; top: -3px; width: 3px; height: 14px; background: #000; }
.prog-mark span { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 13px; text-shadow: none; white-space: nowrap; }
.prog-mark.evac { background: var(--green); width: 5px; }
.hud-dist { margin-top: 16px; font-size: 20px; }
.hud-dist span { font-size: 13px; color: #ddd; }
.xp { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.xp span { font-size: 14px; color: var(--yellow); }
.xp-track { flex: 1; height: 8px; background: #000a; border: 2px solid var(--ink); border-radius: 5px; overflow: hidden; }
.xp-fill { height: 100%; background: #9b6ef0; }
.hud-right { position: absolute; right: 14px; top: 12px; text-align: right; color: var(--yellow); text-shadow: 2px 2px 0 #000; font-size: 24px; }
.hud-right .parts { color: #cfe3ff; font-size: 18px; }
.hud-right button { margin-top: 6px; }
.combo { position: absolute; left: 18px; top: 120px; font-size: 34px; color: #ffe14d; text-shadow: 3px 3px 0 #000; transform-origin: left center; }
.tags { position: absolute; left: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; max-width: 46vw; }
.tag { background: #000b; color: #fff; border: 2px solid; border-radius: 8px; padding: 3px 8px; font-size: 13px; }
.tag b { color: var(--yellow); }
.fork { position: absolute; top: 108px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; white-space: nowrap; color: #fff; text-shadow: 2px 2px 0 #000; font-size: 16px; pointer-events: auto; }
.fork button { background: #000b; color: #fff; border: 3px solid #666; border-radius: 10px; padding: 6px 12px; font-size: 16px; font-weight: 900; }
.fork button.on { border-color: var(--yellow); background: #5a4630; }
.fork kbd { background: #fff; color: #000; border-radius: 4px; padding: 0 5px; font-size: 12px; margin-right: 4px; }
.toast { position: absolute; top: 34%; left: 50%; transform: translateX(-50%); text-align: center; width: min(92vw, 640px); pointer-events: none; }
.toast div { color: #fff; font-size: 24px; text-shadow: 3px 3px 0 #000; margin-bottom: 6px; animation: pop 0.25s; }
@media (max-width: 700px) { .toast div { font-size: 18px; } }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }

/* —— 触屏 —— */
#touch { position: fixed; inset: auto 0 0 0; height: 0; z-index: 6; }
.t-left, .t-right { position: absolute; bottom: 16px; display: flex; gap: 10px; align-items: flex-end; }
.t-left { left: 14px; } .t-right { right: 14px; }
.t-btn { width: 74px; height: 74px; border-radius: 50%; border: 4px solid var(--ink); background: #ffffffcc; font-size: 24px; font-weight: 900; line-height: 1; }
.t-btn small { font-size: 11px; }
.t-btn.t-gas { width: 104px; height: 104px; background: #7ddc6acc; font-size: 22px; }
.t-btn.t-small { width: 60px; height: 60px; background: #9fe0ffcc; }
.t-btn.held { transform: scale(0.92); filter: brightness(0.8); }

/* —— 弹窗 —— */
#modal { background: #000a; display: flex; align-items: center; justify-content: center; z-index: 20; }
.modal-box { background: var(--panel); color: var(--paper); border: 4px solid var(--ink); border-radius: 18px; padding: 18px 22px; max-width: min(960px, 94vw); max-height: 92vh; overflow-y: auto; box-shadow: 0 10px 0 #000; text-align: center; animation: pop 0.2s; }
.modal-box h2 { margin: 0 0 6px; font-size: 28px; color: var(--yellow); text-shadow: 3px 3px 0 #000; }
.modal-box .sub { color: #cbb; font-size: 14px; margin-bottom: 14px; }
.cards { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.card { width: 220px; min-height: 270px; background: var(--paper); color: var(--ink); border: 5px solid; border-radius: 14px; padding: 12px; text-align: left; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 6px 0 #000; transition: transform 0.1s; animation: flipin 0.35s backwards; }
.card:nth-child(2) { animation-delay: 0.07s; } .card:nth-child(3) { animation-delay: 0.14s; }
@keyframes flipin { from { transform: translateY(60px) rotateY(80deg); opacity: 0; } }
.card:hover { transform: translateY(-6px); }
.card .rar { font-size: 12px; font-weight: 900; }
.card .nm { font-size: 22px; font-weight: 900; }
.card .lv { font-size: 13px; color: #776; }
.card .ds { font-size: 15px; line-height: 1.5; flex: 1; }
.card .tg { display: flex; gap: 4px; flex-wrap: wrap; }
.card .tg span { font-size: 12px; color: #fff; border-radius: 6px; padding: 2px 6px; }
.card .key { font-size: 12px; color: #998; text-align: center; }
.card.mini { width: 150px; min-height: 0; animation: none; font-size: 12px; }
.card.mini .nm { font-size: 16px; } .card.mini .ds { font-size: 12px; }
.card.mini.locked { filter: grayscale(1); opacity: 0.6; }
.shop { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 10px 0; }
.shop button { background: var(--panel2); color: var(--paper); border: 3px solid #6a5a4e; border-radius: 12px; padding: 12px; font-size: 18px; font-weight: 900; }
.shop button:disabled { opacity: 0.4; cursor: default; }
.shop button small { display: block; color: #cfe3ff; font-size: 14px; }
.row-btns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.row-btns .big-btn { width: auto; font-size: 20px; padding: 8px 22px; margin: 0; }
.res-table { margin: 8px auto 4px; border-collapse: collapse; font-size: 17px; min-width: 300px; }
.res-table td { padding: 4px 12px; text-align: left; } .res-table td:last-child { text-align: right; font-weight: 900; color: var(--yellow); }
.res-table tr.total td { border-top: 2px solid #6a5a4e; font-size: 24px; }
.help { text-align: left; font-size: 15px; line-height: 1.8; }

@media (max-width: 900px) {
  .g-body { grid-template-columns: 1fr; flex: none; }
  #g-car { max-height: 30vh; object-fit: contain; }
  .g-head h1 { font-size: 24px; }
  .hud-left { width: 150px; }
  .hud-mid { width: 40vw; }
  .card { width: 30vw; min-width: 150px; min-height: 200px; padding: 8px; }
  .card .nm { font-size: 17px; } .card .ds { font-size: 13px; }
}
@media (max-height: 500px) {
  .t-btn { width: 60px; height: 60px; } .t-btn.t-gas { width: 84px; height: 84px; }
  .tags { bottom: 90px; }
}
.g-day { font-size: 14px; color: #ddd; margin-right: 8px; }

.radar { position: absolute; top: 196px; left: 50%; transform: translateX(-50%); color: #9fffb0; font-weight: 900; font-size: 15px; text-shadow: 2px 2px 0 #000; pointer-events: none; }
.radar:empty { display: none; }

/* —— 仓库车库 —— */
.g-top { position: absolute; left: 14px; right: 14px; top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none !important; }
.g-top h1 { margin: 0; font-size: 30px; font-weight: 900; color: var(--yellow); text-shadow: 3px 3px 0 var(--red), 5px 5px 0 #000; letter-spacing: 2px; }
.g-top h1 small { font-size: 12px; color: #c9b9a0; text-shadow: none; letter-spacing: 4px; margin-left: 6px; }
.g-wallet { display: flex; gap: 10px; align-items: center; font-size: 22px; font-weight: 900; background: #000b; border: 3px solid var(--yellow); border-radius: 12px; padding: 3px 14px; color: var(--yellow); }
.g-wallet .g-parts { color: #cfe3ff; }
.g-bar { position: absolute; top: 62px; right: 14px; display: flex; gap: 6px; pointer-events: none; }
.g-bar button { display: flex; align-items: center; gap: 4px; }
.g-bar button span { font-size: 13px; }
.g-tag { position: absolute; transform: translate(-50%, -50%); background: #1b1512e6; color: #fff2c0; border: 2px solid #c9a24a; border-radius: 10px; padding: 4px 10px; font-size: 14px; font-weight: 900; white-space: nowrap; cursor: pointer; text-align: center; line-height: 1.25; box-shadow: 0 3px 0 #000; transition: background .15s, transform .15s; }
.g-tag small { display: block; font-size: 11px; font-weight: 400; color: #bba; }
.g-tag small.on { color: #7dff8a; font-weight: 900; }
.g-tag.empty { border-style: dashed; opacity: 0.9; }
.g-tag:hover, .g-tag.sel { background: #ffe14d; color: #1a1a1a; transform: translate(-50%, -50%) scale(1.08); }
.g-tag:hover small, .g-tag.sel small { color: #4a3a1a; }
.g-tag.obj { border-color: #8ac; background: #12202ae6; }
.g-tag .badge { position: absolute; top: -9px; right: -9px; background: #e2452b; color: #fff; font-style: normal; font-size: 11px; border-radius: 10px; padding: 1px 6px; border: 2px solid #fff; animation: blink 0.6s infinite alternate; }
.g-dest { position: absolute; right: 18px; bottom: 86px; text-align: right; color: #fff; text-shadow: 2px 2px 0 #000; font-size: 15px; pointer-events: none; }
.g-dest b { color: var(--yellow); font-size: 20px; }
.g-go { position: absolute; right: 18px; bottom: 18px; }
.g-drawer { position: absolute; right: 10px; top: 106px; bottom: 10px; width: min(430px, 42vw); background: #17120ff2; border: 3px solid #c9a24a; border-radius: 16px; display: flex; flex-direction: column; box-shadow: -8px 0 30px #0008; animation: slidein .2s; z-index: 2; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
.g-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 4px; }
.g-drawer-head h2 { margin: 0; font-size: 19px; color: var(--yellow); }
.g-drawer-body { overflow-y: auto; padding: 4px 12px 12px; flex: 1; min-height: 0; }
.g-panel { display: none; }
.g-panel.on { display: block; }
.mods.one { grid-template-columns: 1fr; max-height: none; }
.mod-row.equipped { background: #7dff8a1c; border-radius: 8px; padding-left: 6px; }
.g-drawer:not(.hidden) ~ .g-go, .g-drawer:not(.hidden) ~ .g-dest { display: none; }
.trophies { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.trophy { background: #0006; border: 2px solid #4a3e34; border-radius: 10px; padding: 6px 8px; font-size: 12px; color: #aa9; }
.trophy b { display: block; color: #ddd; font-size: 14px; }
.trophy.got { border-color: var(--yellow); color: #d8c8b0; }
.trophy.got b { color: var(--yellow); }
.set-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #3a2e26; font-size: 15px; }
.set-row input[type=range] { width: 50%; }
@media (max-aspect-ratio: 20/21) {
  .g-top h1 { font-size: 20px; } .g-top h1 small { display: none; }
  .g-wallet { font-size: 16px; padding: 2px 8px; }
  .g-bar { top: auto; bottom: 12px; left: 8px; right: 8px; justify-content: space-between; }
  .g-bar button span { display: none; }
  .g-go { bottom: 64px; left: 50%; right: auto; transform: translateX(-50%); width: 80vw; }
  .g-dest { bottom: 124px; left: 0; right: 0; text-align: center; }
  .g-drawer { left: 6px; right: 6px; top: auto; bottom: 60px; height: 52vh; width: auto; animation: slideup .2s; }
  @keyframes slideup { from { transform: translateY(40px); opacity: 0; } }
  .g-tag { font-size: 12px; padding: 3px 7px; }
  .trophies { grid-template-columns: 1fr; }
}
.story { text-align: left; max-width: 560px; margin: 6px auto; }
.story p { font-size: 20px; line-height: 1.6; color: #f3e6c8; margin: 0 0 12px; opacity: 0; animation: storyin 1s forwards; }
.story.small p { font-size: 15px; color: #d8c8b0; animation-duration: .6s; }
@keyframes storyin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
.ach-new { color: var(--yellow) !important; font-weight: 900; animation: pop .4s; }
.g-bar .small-btn { white-space: nowrap; padding: 5px 9px; }
.g-go { width: auto; margin: 0; font-size: 22px; padding: 10px 22px; }
.g-wallet small { white-space: nowrap; font-size: 13px; color: #ddd; }
.g-wallet span { white-space: nowrap; }
@media (max-width: 900px) and (min-aspect-ratio: 20/21) { .g-bar button span { display: none; } .g-top h1 { font-size: 22px; } .g-top h1 small { display: none; } .g-wallet { font-size: 17px; } }
@media (max-aspect-ratio: 20/21) {
  .g-go { width: auto; white-space: nowrap; font-size: 19px; padding: 10px 20px; bottom: 70px; }
  .g-dest { bottom: 136px; }
}

/* —— 天气指示 —— */
.weather { position: absolute; left: 14px; top: 124px; color: #fff; font-size: 16px; text-shadow: 2px 2px 0 #000; background: #0008; border-radius: 8px; padding: 3px 9px; pointer-events: none; white-space: nowrap; }
.weather:empty { display: none; }
.weather .w-ico { font-size: 18px; }
.weather small { display: block; color: #cfe0f0; font-size: 11px; font-weight: 700; }

/* —— Boss 血条 —— */
.boss-hud { position: absolute; top: 92px; left: 50%; transform: translateX(-50%); width: min(62vw, 560px); text-align: center; pointer-events: none; z-index: 3; }
.boss-hud.hidden { display: none; }
.boss-name { color: #fff; font-size: 20px; font-weight: 900; text-shadow: 2px 2px 0 #000; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boss-hud.warn .boss-name { color: #ff6a5a; }
.boss-hud.stun .boss-name { color: #7dff8a; }
.boss-track { position: relative; height: 16px; background: #000b; border: 3px solid var(--ink, #1a1a1a); border-radius: 9px; overflow: hidden; }
.boss-fill { height: 100%; background: linear-gradient(#ff6a5a, #c4281f); transition: width 0.12s linear; }
.boss-fill[data-phase="3"] { background: linear-gradient(#ffb03a, #e0412a); }
.boss-track i { position: absolute; top: 0; bottom: 0; width: 2px; background: #0008; }
@media (max-width: 700px) { .boss-hud { top: 84px; } .boss-name { font-size: 16px; } }

/* 构筑：抽卡倾向、羁绊预览与护盾状态，沿用现有弹窗和卡片布局。 */
.draft-focus { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 8px; }
.draft-focus button { padding: 6px 10px; border: 2px solid #4c5157; border-radius: 8px; background: #202a31; color: #ecf1f4; font: inherit; font-size: 13px; cursor: pointer; }
.draft-focus button.on { border-color: var(--tag-color, #ffd34d); background: #38434b; color: #fff; box-shadow: 0 0 0 1px var(--tag-color, #ffd34d); }
.draft-focus button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.draft-guide { padding: 9px 12px; border-left: 3px solid #57d9ee; background: #15313b; color: #d5f5fc; font-size: 13px; line-height: 1.6; text-align: left; }
.draft-note { color: #a9b5bf; font-size: 12px; margin: 5px 0 10px; text-align: center; }
.draft-progress { margin-top: 10px; padding-top: 8px; border-top: 1px solid #0002; color: #343a40; font-size: 12px; line-height: 1.55; }
.draft-progress strong { display: block; color: #216333; font-weight: 700; }
.build-meter { color: #94efff; font-size: 12px; font-weight: 700; margin-top: 5px; text-shadow: 1px 1px 2px #000; }
@media (max-height: 540px) { .draft-focus { gap: 4px; margin: 6px 0; } .draft-focus button { padding: 4px 8px; } .draft-guide { padding: 5px 8px; } }
@media (prefers-reduced-motion: reduce) { .modal-box, .card { animation: none; transition: none; } }