* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  position: fixed; inset: 0;
  background: #3b1d0c; color: #3a2210;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.card {
  background: #fffaf0; border: 4px solid #6b3a1e; border-radius: 20px;
  padding: 16px; width: min(420px, 100%); max-height: 100%; overflow: auto;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .25); text-align: center;
}
.card.tall { height: min(640px, 100%); display: flex; flex-direction: column; }
button {
  font: inherit; font-weight: bold; font-size: 16px; color: #3a2210;
  background: #fff; border: 3px solid #6b3a1e; border-radius: 14px; padding: 10px 16px; cursor: pointer;
}
button.big { background: #f2b33d; font-size: 18px; }
button:active { transform: translateY(2px); }
.row { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; width: min(300px, 100%); }
.back { margin-top: 12px; }
.corner { position: fixed; top: 12px; right: 12px; padding: 6px 12px; font-size: 14px; }

.logo { margin: 0; color: #fff3d6; font-size: clamp(44px, 13vw, 80px); letter-spacing: .04em; text-align: center; text-shadow: 0 4px 0 #6b3a1e, 0 0 24px rgba(0, 0, 0, .4); }
.logo small { display: block; font-size: .3em; letter-spacing: .2em; }
.tag { color: #fff3d6; text-shadow: 0 2px 4px #000; text-align: center; margin: 6px 0 18px; }
.proto { position: fixed; bottom: 8px; color: #e8cfa8; font-size: 12px; margin: 0; text-shadow: 0 1px 2px #000; }

#pad { -webkit-touch-callout: none; background: #fff; border: 3px dashed #c9a06a; border-radius: 12px; touch-action: none; display: block; margin: 0 auto; }
.hint { margin: 0 0 8px; font-weight: bold; }
.err { color: #c0392b; min-height: 1.4em; margin: 8px 0 0; font-weight: bold; }
.note { font-size: 12px; color: #7a5a3a; margin: 6px 0; }
.score { font-size: 18px; margin: 6px 0; }
#thumb { background: #fff; border-radius: 10px; border: 2px solid #e0c9a0; }
#stats { text-align: left; margin: 6px auto; width: min(300px, 100%); }
.stat { display: grid; grid-template-columns: 5.5em 1fr; align-items: center; gap: 8px; margin: 4px 0; font-size: 14px; }
.bar { height: 10px; background: #f0e2c8; border-radius: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; background: #e0473f; }
#roName { font: inherit; font-size: 16px; width: min(260px, 100%); padding: 8px; border: 2px solid #c9a06a; border-radius: 10px; text-align: center; margin-top: 6px; }

#battle { justify-content: space-between; pointer-events: none; padding-top: max(12px, env(safe-area-inset-top)); }
#battle button { pointer-events: auto; padding: 6px 12px; font-size: 14px; }
.vs { display: flex; align-items: center; gap: 10px; font-weight: bold; color: #fff; text-shadow: 0 2px 3px #000; font-size: 17px; }
.vs i { color: #f2b33d; font-style: normal; }
.red { color: #ff8a80; } .blue { color: #8ab4ff; }
.ctrl { position: fixed; top: 52px; right: 12px; display: flex; gap: 6px; }
.talk { display: flex; gap: 10px; align-items: center; background: #fffaf0; border: 3px solid #6b3a1e; border-radius: 16px; padding: 8px 12px; width: min(440px, 100%); }
.talk p { margin: 2px 0 0; min-height: 1.3em; }
.face { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #f2b33d; display: grid; place-items: center; font-weight: bold; font-size: 22px; border: 3px solid #6b3a1e; }

#result h2 { font-size: 34px; margin: 4px 0; }
#rankList, #gamesList, #mineList { flex: 1; overflow: auto; margin: 0; padding: 0; list-style: none; text-align: left; }
#rankList li, #mineList li { display: grid; grid-template-columns: 2em 48px 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid #ecdcc0; }
#rankList li.mine, #mineList li.mine { background: #fff0c9; }
#rankList canvas, #mineList canvas { background: #fff; border-radius: 6px; }
#rankList .n, #gamesList .n, #mineList .n { font-weight: bold; text-align: center; }
#rankList small, #mineList small { color: #8a6a4a; display: block; }
#rankList button, #mineList button { padding: 4px 8px; font-size: 13px; }
#howText { text-align: left; flex: 1; overflow: auto; line-height: 1.6; }
.placed { background: #fff0c9; border-radius: 12px; padding: 8px; margin: 8px 0 12px; }
.placed:empty { display: none; }
#gamesList li { display: grid; grid-template-columns: 2em 40px 1fr auto; gap: 8px; align-items: center; padding: 5px 4px; border-bottom: 1px solid #ecdcc0; }
#gamesList li.w .n { color: #c0392b; } #gamesList li.l .n { color: #7a8aa0; }
#gamesList canvas { background: #fff; border-radius: 6px; }
#gamesList small { color: #8a6a4a; display: block; }
#gamesList button { padding: 4px 8px; font-size: 13px; }
button.small { font-size: 13px; padding: 6px 10px; align-self: center; }
.tabs { display: flex; gap: 6px; justify-content: center; margin: 4px 0; }
.tabs button { padding: 6px 10px; font-size: 14px; }
.tabs button.on { background: #f2b33d; }
li.msg { display: block !important; text-align: center; color: #8a6a4a; padding: 16px 4px; border: 0 !important; }