:root {
  --ui: rgba(22, 24, 28, 0.58);
  --ui-strong: rgba(22, 24, 28, 0.82);
  --line: rgba(255, 255, 255, 0.14);
  --text: #ffffff;
  --blue: #2b8cff;
  --blue-d: #1666d6;
  --green: #2fd36b;
  --gold: #ffcc33;
  --font: "M PLUS Rounded 1c", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #9fd2ff; font-family: var(--font); color: var(--text); user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
#game, #game canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; border: 0; color: inherit; }

/* 共通 */
.cIcon { display: inline-block; width: 1.05em; height: 1.05em; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff3a6 0 18%, #ffcc33 40%, #d99800 100%); box-shadow: inset 0 0 0 2px #c98a00; vertical-align: -0.16em; }
.coinPill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px; border-radius: 12px; background: var(--ui); font-weight: 800; font-size: 17px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.coinPill.dark { background: rgba(0, 0, 0, 0.06); color: #1d2733; height: 34px; }
.btn { display: block; width: 100%; padding: 13px 16px; border-radius: 12px; font-size: 17px; font-weight: 800; background: #eef1f5; color: #1d2733; box-shadow: 0 3px 0 #c9cfd8; transition: transform 0.06s, filter 0.15s; }
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #c9cfd8; }
.btn.primary { background: var(--blue); color: #fff; box-shadow: 0 3px 0 var(--blue-d); }
.btn.primary:active { box-shadow: 0 1px 0 var(--blue-d); }
.btn.big { font-size: 22px; padding: 16px; }
.btn small { opacity: 0.55; font-size: 13px; margin-left: 6px; border: 1px solid currentColor; border-radius: 5px; padding: 0 5px; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#topLeft { position: absolute; left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); display: flex; gap: 8px; align-items: center; }
.ib { width: 44px; height: 40px; border-radius: 12px; background: var(--ui); font-size: 19px; display: grid; place-items: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ib:hover { background: var(--ui-strong); }
#chatLog { position: absolute; left: max(12px, env(safe-area-inset-left)); top: calc(max(12px, env(safe-area-inset-top)) + 50px); width: min(380px, 46vw); display: flex; flex-direction: column; gap: 3px; pointer-events: none !important; }
.cl { font-size: 14.5px; line-height: 1.35; padding: 4px 10px; background: rgba(22, 24, 28, 0.42); border-radius: 8px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); transition: opacity 1.2s; width: fit-content; max-width: 100%; word-break: break-all; }
.cl b { font-weight: 800; }
.cl.old { opacity: 0.35; }
#chatBar { position: absolute; left: max(12px, env(safe-area-inset-left)); top: calc(max(12px, env(safe-area-inset-top)) + 50px); width: min(420px, calc(100vw - 24px)); display: flex; gap: 6px; z-index: 5; }
#chatInput { flex: 1; height: 42px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.7); background: rgba(22, 24, 28, 0.82); color: #fff; padding: 0 12px; font: 600 16px var(--font); outline: none; }
#chatSend { padding: 0 14px; border-radius: 10px; background: var(--blue); font-weight: 800; }
#chatBar + #stageBox { }
#stageBox { position: absolute; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); min-width: 220px; padding: 8px 18px 9px; border-radius: 14px; background: var(--ui); text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none !important; }
#stageNum { font-weight: 900; font-size: 19px; letter-spacing: 0.02em; }
#stageName { font-size: 12.5px; opacity: 0.85; margin-top: 1px; font-weight: 700; }
.bar { height: 6px; margin: 6px 0 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2fd36b, #ffd23a); border-radius: 3px; transition: width 0.5s; }
#timer { font: 700 15px "Fredoka", var(--font); letter-spacing: 0.04em; opacity: 0.95; }
#board { position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); width: 270px; border-radius: 14px; background: var(--ui); overflow: hidden; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#boardHead, .row { display: grid; grid-template-columns: 1fr 62px 52px; align-items: center; padding: 0 12px; }
#boardHead { height: 36px; font-size: 12.5px; font-weight: 800; opacity: 0.9; border-bottom: 1px solid var(--line); cursor: pointer; }
#boardHead span:not(:first-child), .row span:not(:first-child) { text-align: center; }
.row { height: 30px; font-size: 14px; font-weight: 700; }
.row .nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.row.me { background: rgba(43, 140, 255, 0.35); }
#board.mini { width: auto; }
#board.mini #rows { display: none; }
#board.mini #boardHead { grid-template-columns: auto; border: 0; }
#board.mini #boardHead span:not(:first-child) { display: none; }
#toast { position: absolute; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 96px); transform: translate(-50%, -10px); padding: 10px 20px; border-radius: 12px; background: rgba(47, 211, 107, 0.92); font-weight: 900; font-size: 17px; opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none !important; white-space: nowrap; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* スマホ操作 */
#joyZone, #joyBase, #bJump { display: none; }
body.touch #joyZone { display: block; position: absolute; left: 0; bottom: 0; width: 46vw; height: 62vh; touch-action: none; }
#joyBase { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: rgba(22, 24, 28, 0.35); border: 3px solid rgba(255, 255, 255, 0.45); pointer-events: none !important; }
body.touch #joyBase { display: block; left: 110px; top: calc(100vh - 130px); opacity: 0.55; }
body.touch #joyBase.on { opacity: 1; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); transform: translate(-50%, -50%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
body.touch #bJump { display: grid; place-items: center; position: absolute; right: max(26px, env(safe-area-inset-right)); bottom: max(34px, env(safe-area-inset-bottom)); width: 92px; height: 92px; border-radius: 50%; background: rgba(22, 24, 28, 0.42); border: 3px solid rgba(255, 255, 255, 0.6); color: #fff; touch-action: none; }
body.touch #bJump.on { background: rgba(255, 255, 255, 0.4); transform: scale(0.95); }

/* オーバーレイ */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(10, 14, 22, 0.45); z-index: 20; padding: 16px; }
.card { width: min(380px, 100%); background: #ffffff; color: #1d2733; border-radius: 20px; padding: 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
.card h2 { margin: 0 0 14px; font-weight: 900; font-size: 24px; text-align: center; }
.menuCard .btn { margin-top: 10px; }
.help { margin-top: 16px; font-size: 13px; line-height: 1.7; color: #4a5566; background: #f3f5f8; border-radius: 12px; padding: 10px 14px; }
.help .sp { display: none; }
body.touch .help .pc { display: none; }
body.touch .help .sp { display: block; }
.winCard { text-align: center; animation: pop 0.45s cubic-bezier(.2, 1.6, .4, 1); }
.trophy { font-size: 64px; line-height: 1; margin-top: -6px; }
.winCard h2 { font-size: 34px; margin: 6px 0 8px; color: #e0402b; }
.wt { font-size: 17px; font-weight: 700; }
.wt b { font: 700 30px "Fredoka", var(--font); display: block; color: #1d2733; }
#winBest { margin: 6px 0 2px; font-weight: 800; color: #6b7686; }
#winBest.new { color: #1fa653; }
.bonus { display: inline-flex; gap: 6px; align-items: center; margin: 8px 0 16px; padding: 6px 14px; border-radius: 999px; background: #fff6cf; font-weight: 900; color: #a06c00; }
.row2 { display: flex; gap: 10px; }
.row2 .btn { flex: 1; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* タイトル */
#title { position: fixed; inset: 0; display: flex; align-items: center; padding: 24px clamp(16px, 7vw, 120px); background: linear-gradient(90deg, rgba(14, 40, 90, 0.55), rgba(14, 40, 90, 0) 62%); z-index: 10; }
.tCard { width: min(400px, 100%); }
.logo .w { white-space: nowrap; display: block; }
.logo { font: 700 clamp(44px, 6vw, 70px)/0.95 "Fredoka", sans-serif; letter-spacing: 0.02em; margin-bottom: 10px; }
.logo .w > span { display: inline-block; width: 1.02em; text-align: center; margin: 0 0.04em 0.08em 0; padding: 0.06em 0 0.12em; background: var(--c); border-radius: 0.16em; transform: rotate(var(--r)); color: #fff; text-shadow: 0 0.05em 0 rgba(0, 0, 0, 0.25); box-shadow: inset 0 -0.08em 0 rgba(0, 0, 0, 0.18), 0 0.07em 0 rgba(0, 0, 0, 0.25); animation: bob 2.6s ease-in-out infinite; }
.logo .w > span:nth-child(2n) { animation-delay: -0.6s; }
.logo .w > span:nth-child(3n) { animation-delay: -1.3s; }
@keyframes bob { 50% { translate: 0 -0.06em; } }
.sub { font-weight: 800; font-size: 16px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); margin-bottom: 22px; }
.nameRow { display: flex; align-items: center; gap: 10px; font-weight: 800; margin-bottom: 12px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
#nameInput { flex: 1; min-width: 0; height: 46px; border-radius: 12px; border: 0; padding: 0 14px; font: 800 18px var(--font); color: #1d2733; outline: 3px solid transparent; }
#nameInput:focus { outline-color: #ffd23a; }
#tContinue { text-align: center; font-weight: 800; font-size: 14px; min-height: 8px; margin: 6px 0; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
#tAvatar { margin-top: 4px; }
.tFoot { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-weight: 800; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.tFoot .coinPill.dark { background: rgba(0, 0, 0, 0.35); color: #fff; text-shadow: none; }

/* アバター */
#avatar { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.aPanel { pointer-events: auto; position: absolute; right: 16px; top: 16px; bottom: 16px; width: 400px; background: #ffffff; color: #1d2733; border-radius: 20px; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); overflow: hidden; }
.aHead { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 10px; }
.aHead h2 { margin: 0; font-weight: 900; font-size: 24px; }
#aTabs { display: flex; gap: 6px; padding: 0 16px 12px; }
#aTabs button { flex: 1; height: 40px; border-radius: 10px; background: #eef1f5; color: #4a5566; font-weight: 800; font-size: 15px; }
#aTabs button.on { background: #1d2733; color: #fff; }
#aBody { flex: 1; overflow-y: auto; padding: 4px 16px 16px; }
.parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.pbtn { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 10px; border-radius: 10px; background: #f3f5f8; color: #1d2733; font-weight: 800; font-size: 13px; border: 2px solid transparent; }
.pbtn i { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); flex: none; }
.pbtn.on { border-color: var(--blue); background: #e7f1ff; }
.palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.sw { aspect-ratio: 1; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 0 rgba(0, 0, 0, 0.12); }
.sw.on { outline: 3px solid #1d2733; outline-offset: 2px; }
.items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.item { display: flex; flex-direction: column; align-items: center; padding: 10px 4px 8px; border-radius: 14px; background: #f3f5f8; color: #1d2733; border: 2px solid transparent; }
.item .ic { width: 58px; height: 58px; display: grid; place-items: center; font-size: 40px; }
.item .ic img { width: 54px; height: 54px; }
.item .nm { font-weight: 800; font-size: 13px; margin-top: 4px; }
.item .pr { font-size: 12px; font-weight: 800; color: #6b7686; margin-top: 2px; }
.item.on { border-color: var(--blue); background: #e7f1ff; }
.item.on .pr { color: var(--blue); }
.item.locked .ic { filter: grayscale(0.6) opacity(0.75); }
.item.locked .pr { color: #a06c00; }
.aFoot { display: flex; align-items: center; gap: 12px; padding: 12px 16px 16px; border-top: 1px solid #eef1f5; }
.aFoot .hint { flex: 1; font-size: 13px; color: #6b7686; font-weight: 700; }
.aFoot .btn { width: 120px; }
#aToast { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); background: #1d2733; color: #fff; padding: 8px 16px; border-radius: 10px; font-weight: 800; font-size: 14px; opacity: 0; transition: opacity 0.2s; pointer-events: none; white-space: nowrap; }
#aToast.show { opacity: 1; }

/* スマホ */
@media (max-width: 759px) {
  #title { align-items: flex-end; background: linear-gradient(0deg, rgba(14, 40, 90, 0.7), rgba(14, 40, 90, 0) 70%); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .tCard { margin: 0 auto; }
  .logo { text-align: center; font-size: 52px; }
  .sub { text-align: center; }
  .aPanel { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; height: 54vh; }
  .aHead { padding: 12px 16px 8px; }
  .aHead h2 { font-size: 20px; }
  .palette { grid-template-columns: repeat(8, 1fr); gap: 6px; }
  .items { grid-template-columns: repeat(4, 1fr); }
  .item .ic { width: 46px; height: 46px; font-size: 32px; }
  .item .ic img { width: 44px; height: 44px; }
  #stageBox { top: calc(max(10px, env(safe-area-inset-top)) + 50px); min-width: 0; padding: 5px 14px 6px; }
  #stageNum { font-size: 15px; }
  #stageName { display: none; }
  #timer { font-size: 13px; }
  #chatLog { top: calc(max(12px, env(safe-area-inset-top)) + 122px); width: 64vw; }
  #chatBar { top: calc(max(12px, env(safe-area-inset-top)) + 122px); }
  .cl { font-size: 12.5px; }
  .ib { width: 40px; height: 38px; font-size: 17px; }
  .coinPill { height: 38px; font-size: 15px; padding: 0 10px 0 8px; }
  #topLeft { gap: 6px; }
  #toast { top: 40%; font-size: 15px; }
}
@media (max-width: 400px) {
  .logo { font-size: 44px; }
}