* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #14180f; color: #eee; font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif; overflow: hidden; }
button { font: inherit; cursor: pointer; border: none; border-radius: 6px; background: #3a4a30; color: #fff; padding: 6px 10px; }
button:hover:not(:disabled) { background: #4f6640; }
button:disabled { opacity: .45; cursor: default; }
[hidden] { display: none !important; }

.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 30%, #2d4a2a, #0f140c); z-index: 50; overflow: auto; }
.title-box { max-width: 560px; padding: 32px; background: rgba(0,0,0,.45); border: 1px solid #4a6a40; border-radius: 14px; text-align: center; }
h1 { font-size: 44px; margin: 0; letter-spacing: 4px; color: #ffe9a0; text-shadow: 0 3px 0 #6a4a1a; }
.sub { margin: 6px 0 16px; color: #b8d8a0; }
.desc { font-size: 14px; line-height: 1.8; color: #ddd; }
.modes { text-align: left; background: rgba(255,255,255,.05); border-radius: 10px; padding: 12px 16px; margin: 16px 0; }
.modes-title { font-weight: bold; margin-bottom: 6px; color: #ffe9a0; }
.modes label { display: block; padding: 4px 0; font-size: 14px; cursor: pointer; }
.modes label.disabled { opacity: .4; cursor: default; }
.note { font-size: 12px; color: #c9a; margin-top: 4px; }
.big { font-size: 20px; padding: 12px 40px; background: #c8902a; }
.big:hover { background: #e0a83a !important; }
.keys { margin-top: 16px; font-size: 12px; color: #9a9; }
.bar { height: 10px; background: #222; border-radius: 5px; overflow: hidden; margin: 14px 0 6px; }
#load-bar { height: 100%; width: 0; background: #8fd06a; transition: width .2s; }
#load-text { font-size: 12px; color: #bbb; }

#game { position: fixed; inset: 0; display: flex; }
#stage { position: relative; flex: 1; overflow: hidden; }
#cv { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
#hud { position: absolute; left: 10px; top: 10px; background: rgba(0,0,0,.6); padding: 6px 12px; border-radius: 8px; font-size: 15px; pointer-events: none; }
#hud b { color: #ffe9a0; }
#hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(0,0,0,.6); padding: 4px 12px; border-radius: 6px; font-size: 13px; pointer-events: none; }
#hint:empty { display: none; }
#toasts { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: rgba(20,20,20,.88); border: 1px solid #6a8a50; padding: 7px 14px; border-radius: 8px; font-size: 14px; animation: pop .2s; }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }
#busy { position: absolute; left: 50%; top: 55%; transform: translateX(-50%); background: rgba(0,0,0,.7); padding: 6px 14px; border-radius: 8px; font-size: 13px; }

#menu { position: absolute; right: 16px; bottom: 16px; min-width: 260px; background: rgba(18,22,14,.95); border: 1px solid #6a8a50; border-radius: 10px; padding: 10px; }
#menu h3 { margin: 0 0 8px; font-size: 15px; color: #ffe9a0; }
#menu .sub2 { font-size: 12px; color: #aaa; margin: -4px 0 8px; }
#menu button { display: block; width: 100%; text-align: left; margin: 3px 0; background: #2c3824; }
#menu button:hover:not(:disabled) { background: #4f6640; }
#menu button.danger { color: #ffb0a0; }
#menu .k { display: inline-block; width: 18px; color: #ffe9a0; }

#side { width: 340px; background: #1c2216; border-left: 1px solid #3a4a30; display: flex; flex-direction: column; }
#tabs { display: flex; }
#tabs button { flex: 1; border-radius: 0; background: #232b1c; padding: 10px 0; }
#tabs button.on { background: #3a4a30; color: #ffe9a0; }
#board-new { color: #ff8; font-size: 11px; }
.tab { display: none; flex: 1; overflow-y: auto; padding: 12px; font-size: 13px; }
.tab.on { display: block; }
#speed { display: flex; gap: 4px; padding: 8px; border-top: 1px solid #3a4a30; }
#speed button { flex: 1; }
#speed button.on { background: #c8902a; }

.stat { margin: 6px 0; }
.stat .lbl { display: flex; justify-content: space-between; }
.meter { height: 8px; background: #111; border-radius: 4px; overflow: hidden; margin-top: 3px; }
.meter i { display: block; height: 100%; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 10px 0; }
.box { background: rgba(255,255,255,.05); border-radius: 8px; padding: 8px 10px; margin: 10px 0; }
.box h4 { margin: 0 0 6px; color: #ffe9a0; font-size: 13px; }
.items span { display: inline-block; background: #2c3824; border-radius: 5px; padding: 2px 6px; margin: 2px; }
.items button { padding: 2px 6px; font-size: 12px; margin-left: 4px; }
.wanted { color: #ff7a6a; font-weight: bold; }

.person { padding: 6px 8px; border-radius: 6px; margin: 3px 0; background: rgba(255,255,255,.04); cursor: pointer; }
.person:hover { background: rgba(255,255,255,.09); }
.person .top { display: flex; justify-content: space-between; }
.person .key { color: #ffe070; }
.person.dead { opacity: .4; }
.relbar { display: flex; gap: 6px; align-items: center; font-size: 11px; color: #aaa; margin-top: 3px; }
.relbar .meter { flex: 1; margin: 0; height: 6px; position: relative; }
.person .detail { font-size: 12px; color: #ccc; margin-top: 6px; line-height: 1.6; }

.post-form { display: flex; gap: 6px; margin-bottom: 10px; }
.post-form textarea { flex: 1; height: 52px; resize: none; background: #11150d; color: #eee; border: 1px solid #3a4a30; border-radius: 6px; padding: 6px; font: inherit; font-size: 13px; }
.post { background: #f2ead6; color: #2a2014; border-radius: 6px; padding: 8px 10px; margin: 8px 0; box-shadow: 0 2px 0 #8a7a5a; }
.post .meta { font-size: 11px; color: #7a6a50; display: flex; justify-content: space-between; }
.post .author { font-weight: bold; color: #5a3a1a; }
.post.town { background: #dde6f2; box-shadow: 0 2px 0 #7a8aa0; }
.post.mine { background: #f6dfe4; }
.post .text { margin: 4px 0 0; line-height: 1.5; }
.reply { border-top: 1px dashed #b8a888; margin-top: 6px; padding-top: 4px; font-size: 12px; }
.reply b { color: #5a3a1a; }

.logline { padding: 3px 0; border-bottom: 1px solid #2a3322; line-height: 1.5; }
.logline .tm { color: #888; font-size: 11px; margin-right: 6px; }
.logline.crime { color: #ffb0a0; }
.logline.event { color: #a8d8ff; }
.logline.death { color: #c8a8ff; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 40; }
.chat-box { width: min(520px, 92vw); background: #1c2216; border: 1px solid #6a8a50; border-radius: 12px; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #2a3522; }
.chat-head span:first-child { font-weight: bold; color: #ffe9a0; }
#chat-rel { font-size: 12px; color: #bbb; flex: 1; }
.chat-head button { margin-left: auto; }
#chat-log { height: 300px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 80%; padding: 7px 11px; border-radius: 10px; line-height: 1.5; font-size: 14px; }
.msg.me { align-self: flex-end; background: #c8902a; color: #fff; }
.msg.them { align-self: flex-start; background: #f2ead6; color: #222; }
.msg.sys { align-self: center; background: none; color: #ffd27a; font-size: 12px; }
.msg.typing { opacity: .6; }
.chat-input { display: flex; gap: 6px; padding: 10px; border-top: 1px solid #3a4a30; }
.chat-input input { flex: 1; background: #11150d; color: #eee; border: 1px solid #3a4a30; border-radius: 6px; padding: 8px; font: inherit; }
.chat-note { font-size: 11px; color: #888; padding: 0 12px 8px; }
#picker-list { padding: 10px; max-height: 60vh; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

#result-box h2 { color: #ffe9a0; margin-top: 0; }
#result-box .big-title { font-size: 28px; margin: 10px 0; color: #fff; }
#result-box table { margin: 14px auto; border-collapse: collapse; font-size: 14px; }
#result-box td { padding: 4px 12px; border-bottom: 1px solid #3a4a30; text-align: left; }

#chat-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 10px 0; border-top: 1px solid #3a4a30; }
#chat-chips button { font-size: 12px; padding: 3px 9px; border-radius: 12px; background: #2c3824; color: #e8e0c8; }
#chat-chips button:hover { background: #4f6640; }
.chat-input { border-top: none !important; }
.keys2 { font-size: 12px; color: #bbb; line-height: 1.7; }
.keys2 b { color: #ffe9a0; display: inline-block; min-width: 14px; }
#hint { white-space: nowrap; }

#chat-trade { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 10px 0; align-items: center; }
#chat-trade .lbl { font-size: 12px; color: #ffd27a; }
#chat-trade button { font-size: 12px; padding: 3px 8px; border-radius: 6px; background: #4a3a20; color: #ffe9c0; }
#chat-trade button:hover:not(:disabled) { background: #6a5228; }
#banner { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: min(560px, 80%); background: rgba(10,20,30,.9); border: 2px solid #80ffe0; border-radius: 12px; padding: 14px 18px; text-align: center; box-shadow: 0 0 30px rgba(128,255,224,.35); animation: pop .3s; pointer-events: none; }
#banner b { display: block; font-size: 22px; color: #b0fff0; margin-bottom: 6px; }
#banner div { font-size: 14px; line-height: 1.6; color: #e0f0f0; }
#tabs button { font-size: 13px; }
.inv { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #2a3322; }
.inv .ic { font-size: 22px; width: 30px; text-align: center; }
.inv .nm { flex: 1; display: flex; flex-direction: column; }
.inv .nm small { color: #aaa; font-size: 11px; line-height: 1.4; }
.sub3 { font-size: 12px; color: #aaa; padding: 6px 0; }