:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #111722; color: #f2f3f6; --color: #c6ef83; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 300px; padding-bottom: env(safe-area-inset-bottom); }
[hidden] { display: none !important; }
header { display: flex; justify-content: space-between; align-items: center; padding: 20px; gap: 12px; border-bottom: 1px solid #303b4c; }
header a { color: white; text-decoration: none; font-weight: 800; font-size: 22px; }
header a span { color: #c6ef83; }
header > span { font-size: 12px; color: #a6b4c6; }
main { max-width: 620px; margin: auto; padding: 16px; }
.panel { padding: 20px; background: #1a2230; border: 1px solid #303b4c; border-radius: 18px; margin: 0 0 16px; }
h1 { font-size: 26px; margin: 0 0 16px; }
h2 { font-size: 20px; margin: 0 0 12px; }
p, li { line-height: 1.5; overflow-wrap: anywhere; }
p { color: #b2bfd0; }
label { display: block; margin: 14px 0; }
input, select, button { font: inherit; }
input:not([type=checkbox]), select { display: block; padding: 13px; width: 100%; margin-top: 6px; border: 1px solid #526279; border-radius: 10px; background: #111722; color: white; }
button { display: block; width: 100%; padding: 16px; min-height: 52px; margin: 12px 0; border: 0; border-radius: 12px; background: #c6ef83; color: #182321; font-weight: 750; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .45; cursor: default; }
.secondary, #moves button { color: white; background: #263448; border: 1px solid #526279; }
:focus-visible { outline: 3px solid #c6ef83; outline-offset: 3px; }
.notice { padding: 12px; background: #263448; border-radius: 10px; }
.error { padding: 12px; color: #ffe1dd; background: #702e3a; border-radius: 10px; }
.seat { border-left: 5px solid var(--seat); padding: 8px 14px; margin: 12px 0; background: #111722; border-radius: 6px; }
.identity { display: flex; align-items: center; gap: 14px; border-color: var(--color); }
.identity h1 { margin: 5px 0 0; }
.identity small { color: #a6b4c6; letter-spacing: 2px; }
#my-color { width: 25px; height: 25px; border-radius: 50%; background: var(--color); flex-shrink: 0; }
#round { margin-left: auto; font-size: 12px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 6px; text-align: center; }
.stat strong { display: block; font-size: 25px; color: var(--color); }
.stat span { color: #a6b4c6; font-size: 11px; }
.dice { font-size: 34px; font-weight: 800; color: var(--color); text-align: center; padding: 10px; }
.piece { display: flex; justify-content: space-between; gap: 10px; padding: 13px 0; border-bottom: 1px solid #303b4c; }
.toggle { display: flex; align-items: center; gap: 12px; }
.toggle input { width: 24px; height: 24px; accent-color: #c6ef83; }
.settings p, .settings details { font-size: 13px; }
ol { padding-left: 22px; }
li { margin: 8px 0; color: #b2bfd0; font-size: 13px; }
#event { padding-top: 20px; border-top: 1px solid #526279; margin-top: 20px; }
#event-targets { font-size: 13px; color: #b2bfd0; }