/* 主畫面：全螢幕 3D、上方時間卡、控制列。觸控目標至少 44px。 */
:root { --ink: #1f2a37; --card: rgba(255, 255, 255, .86); --accent: #1f8a70; --warn: #e2553a; --tc: #1f2a37; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; color: var(--ink);
  font: 16px/1.5 "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif; background: #7fb6e8; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
body.placing #scene { cursor: crosshair; }

#hud { position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%);
  background: var(--card); backdrop-filter: blur(6px); border-radius: 22px; padding: 10px 16px 12px;
  box-shadow: 0 12px 32px rgba(20, 40, 60, .18); text-align: center; max-width: calc(100vw - 24px); }
.event { margin: 0; font-weight: 700; font-size: 18px; min-height: 0; }
.event:empty { display: none; }
.time { all: unset; cursor: pointer; display: block; margin: 0 auto; padding: 0 10px; border-radius: 14px;
  font: 800 clamp(40px, 9vw, 78px)/1.1 ui-monospace, "Cascadia Mono", Menlo, monospace; color: var(--tc);
  font-variant-numeric: tabular-nums; min-height: 44px; }
.time:focus-visible { outline: 3px solid var(--accent); }
.time.small { font-size: clamp(22px, 5vw, 40px); font-family: inherit; }
.time.warn { color: var(--warn); animation: pulse 1s infinite; }
.time.done { color: #c2410c; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.edit { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 6px 0; }
.edit[hidden], body.mode-date .edit { display: none; }
.elbl { font-weight: 700; font-size: 15px; color: #3b4652; }
.edit input { width: 84px; font-size: 26px; padding: 4px 8px; min-height: 44px; border: 2px solid #c8d3dc; border-radius: 10px; text-align: center; }

.bar { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
/* 按鈕列移到畫面底部，上方只留時間，島上人物不會被面板蓋住 */
#bar { position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom));
  margin: 0; padding: 8px 10px; background: var(--card); backdrop-filter: blur(6px); border-radius: 999px;
  box-shadow: 0 12px 32px rgba(20, 40, 60, .18); max-width: calc(100vw - 24px); }
.btn { min-width: 44px; min-height: 44px; padding: 6px 12px; border: 1.5px solid #c8d3dc; border-radius: 999px;
  background: #fff; color: var(--ink); font: 700 18px/1 inherit; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn.main { background: var(--accent); color: #fff; border-color: var(--accent); min-width: 64px; }
.btn.on { background: #fff4c2; border-color: #e0a800; }
.btn.warn { color: #fff; background: var(--warn); border-color: var(--warn); }
.btn.ghost { background: #f3f5f7; }
body.mode-date .tonly { display: none; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; margin: 0;
  background: #1f2a37; color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 700; max-width: 90vw; }

/* 迷你浮動模式：島與時間縮到右下角（網頁版替代桌面浮動視窗） */
body.mini { background: transparent; }
body.mini #scene { inset: auto 12px 12px auto; width: 300px; height: 300px; border-radius: 24px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .25); }
body.mini #hud { left: auto; right: 12px; transform: none; top: auto; bottom: 320px; padding: 6px 10px; }
body.mini .time { font-size: 36px; }
body.mini .bar .btn:not(.main):not(#bMenu) { display: none; }
body.mini #bar { left: auto; right: 12px; transform: none; bottom: 270px; }

@media (max-width: 640px) {
  #hud { width: calc(100vw - 16px); top: max(8px, env(safe-area-inset-top)); padding: 8px 8px 10px; }
  .bar { gap: 4px; }
  .btn { padding: 6px 9px; font-size: 17px; }
  body.mini #scene { width: 220px; height: 220px; }
  body.mini #hud { bottom: 240px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .time.warn { animation: none; } }
body.no3d #scene { background: linear-gradient(160deg, #bfe3ff, #7fb6e8); }