/* toricommu アプリ本体。見た目の正は design_codex/index.html（黄色×黒） */
:root{--y:#FFED45;--ink:#17191C;--mute:#8b9585;--line:#eceee8;--bg:#fff;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:15px/1.6 "Hiragino Sans","Hiragino Kaku Gothic ProN","Helvetica Neue",Arial,sans-serif;overscroll-behavior:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
[hidden]{display:none!important}
#app{position:fixed;inset:0;overflow:hidden}
.view{position:absolute;inset:0;overflow:auto;background:var(--bg)}
.primary{display:block;width:100%;background:var(--y);color:var(--ink);font-weight:800;border-radius:28px;padding:16px;font-size:15px}
.primary:disabled{opacity:.45}
.primary.small{width:auto;padding:10px 18px;font-size:14px}
.ghost{border:1.5px solid var(--line);border-radius:20px;padding:9px 14px;font-weight:700;font-size:13px;background:#fff}
.ghost.danger{color:#b4473a;margin:28px 0 40px}
.fine{font-size:12px;color:var(--mute);margin:8px 0}
.fine.light{color:#c9cdc6}
.error{color:#b4473a;font-size:13px;min-height:1em}
.face svg{width:100%;height:100%;display:block}

/* はじめて */
#join{background:var(--y)}
.join-inner{max-width:440px;margin:0 auto;padding:calc(36px + var(--safe-t)) 20px 40px}
.lockup{height:44px;display:block;margin:0 auto 10px}
.lead{text-align:center;font-weight:800;margin:0 0 22px}
#join-form{background:#fff;border-radius:26px;padding:20px;box-shadow:0 10px 30px #4a42001a}
#join-form label{display:block;font-size:12px;font-weight:700;color:#5d6358;margin-bottom:12px}
#join-form input,#join-form select{display:block;width:100%;margin-top:5px;border:1.5px solid var(--line);border-radius:14px;padding:11px 12px;background:#fafaf7;font-size:16px}
.row2{display:flex;gap:8px}.row2 select{flex:1}
.sub{font-weight:900;font-size:18px;text-align:center;margin:18px 0 10px}
.creature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.creature-grid button{border-radius:16px;background:#f6f6f1;padding:6px 2px 6px;border:2.5px solid transparent;font-size:11px;font-weight:800}
.creature-grid button[aria-pressed=true]{background:var(--y);border-color:var(--ink)}
.creature-grid svg{width:100%;height:46px;display:block}
.desc{text-align:center;font-size:13px;min-height:2.6em;margin:10px 0 4px}

/* 地図 */
#map{position:absolute;inset:0;background:#e8eedf}
.map-top{position:absolute;left:14px;right:14px;top:calc(12px + var(--safe-t));display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.map-top>*{pointer-events:auto}
.title{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:900;background:#ffffffea;border-radius:24px;padding:5px 14px 5px 5px;box-shadow:0 2px 10px #30482514}
.badge-sym{width:36px;height:36px;border-radius:50%;background:var(--y);display:grid;place-items:center}
.badge-sym svg{width:30px;height:28px}
.chip{background:#fff;border-radius:18px;padding:8px 12px;font-size:12px;font-weight:800;box-shadow:0 2px 10px #30482514}
.filters{position:absolute;left:14px;top:calc(66px + var(--safe-t));display:flex;gap:6px}
.filters button{font-size:13px;padding:8px 14px;border-radius:18px;background:#ffffffee;font-weight:800;box-shadow:0 2px 7px #4050340f}
.filters button[aria-pressed=true]{background:var(--ink);color:#fff}
.round{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 10px #30482522}
.round svg{width:22px;height:22px}
.recenter{position:absolute;right:14px;bottom:calc(178px + var(--safe-b))}
.hint-card{position:absolute;left:14px;right:14px;bottom:calc(92px + var(--safe-b));display:flex;align-items:center;gap:10px;background:#fff;border-radius:20px;padding:10px 12px;box-shadow:0 4px 14px #30482518;cursor:pointer}
.hint-card .face{width:46px;height:46px;flex:none;background:var(--y);border-radius:15px;transform:rotate(-5deg);padding:2px}
.hint-card div{flex:1;min-width:0}
.hint-card small{display:block;color:#9ba291;font-size:11px}
.hint-card b{display:block;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hint-card .arrow{width:28px;height:28px;border-radius:50%;background:var(--y);display:grid;place-items:center;font-weight:900}
.open-note{position:absolute;left:0;right:0;bottom:calc(76px + var(--safe-b));text-align:center;font-size:10px;color:#7c8574;margin:0;pointer-events:none}

/* 地図の上のピン */
.m-friend{display:flex;width:max-content;flex-direction:column;align-items:center;cursor:pointer}
.m-friend .av{width:58px;height:58px;border-radius:50%;background:#fff;border:4px solid #fff;box-shadow:0 0 0 4px var(--y),0 8px 14px #30462b30;display:grid;place-items:center;overflow:hidden}
.m-friend .av svg{width:46px;height:42px}
.m-friend.fuzzy .av{box-shadow:0 0 0 4px #b7c8ff,0 8px 14px #30462b30}
.m-friend .nm{margin-top:7px;background:#fff;border-radius:10px;padding:3px 9px;font-size:12px;font-weight:900;box-shadow:0 2px 6px #364a3518;white-space:nowrap;text-align:center;line-height:1.35}
.m-friend .nm small{display:block;font-size:10px;font-weight:600;color:#8e9986}
.m-photo{position:relative;cursor:pointer;width:76px;height:76px}
.m-photo img{width:76px;height:76px;object-fit:cover;border-radius:14px;border:4px solid #fff;box-shadow:0 6px 14px #33482f30;display:block;background:#ddd}
.m-photo:nth-child(odd) img{transform:rotate(-6deg)}
.m-photo .cnt{position:absolute;right:-10px;top:-10px;background:var(--y);border:2px solid #fff;border-radius:12px;font-size:11px;font-weight:900;padding:2px 7px}
.m-photo .pl{position:absolute;left:50%;transform:translateX(-50%);bottom:-22px;background:#fff;border-radius:10px;font-size:10px;font-weight:800;padding:2px 8px;white-space:nowrap;box-shadow:0 2px 6px #364a3518}
.m-me{width:20px;height:20px;border-radius:50%;background:#3d7bff;border:4px solid #fff;box-shadow:0 0 0 8px #3d7bff2e}

/* シート共通 */
.bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:calc(10px + var(--safe-t)) 14px 10px;background:#ffffffee;backdrop-filter:blur(10px)}
.bar b{display:block;font-size:17px;font-weight:900}
.bar small{display:block;font-size:11px;color:var(--mute)}
.back{font-size:30px;line-height:1;width:36px;height:36px}
.bar .face{width:38px;height:38px}
.sheet{padding-bottom:calc(100px + var(--safe-b))}
.place-body,.list-body{padding:6px 18px}
.place-body h2{font-size:26px;line-height:1.35;letter-spacing:-1px;font-weight:900;margin:8px 0 18px}
.p-card{background:#fff;border-radius:18px;box-shadow:0 8px 22px #2a3a2020;padding:6px 6px 10px;margin-bottom:18px}
.p-card:nth-child(odd){transform:rotate(-1.5deg)}.p-card:nth-child(even){transform:rotate(1.2deg)}
.p-card img{width:100%;border-radius:13px;display:block;max-height:420px;object-fit:cover;background:#eee}
.p-card .meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;padding:8px 6px 0}
.p-card .meta small{color:var(--mute);font-weight:600}
.p-card p{margin:4px 6px 0;font-size:14px}
.p-card .del{font-size:12px;color:#b4473a;font-weight:700}

/* 撮る */
.dark{background:#111;color:#fff}
.dark .bar{background:#111c}
.dark .bar small{color:#aaa}
.capture-stage{position:relative;margin:0 12px;border-radius:24px;overflow:hidden;background:#222;aspect-ratio:3/4;max-height:58vh}
.capture-stage img{width:100%;height:100%;object-fit:cover;display:block}
.capture-empty{position:absolute;inset:0;display:grid;place-items:center;padding:30px}
.capture-form{padding:14px 14px calc(100px + var(--safe-b))}
.capture-form input{display:block;width:100%;margin-bottom:8px;border-radius:14px;border:0;padding:12px;background:#2a2a2a;color:#fff;font-size:16px}
.capture-stage.drop img{animation:drop .8s cubic-bezier(.7,.01,.23,1) forwards}
@keyframes drop{to{transform:scale(.2) translateY(140%) rotate(-12deg);opacity:0}}

/* 友達 */
.list-body h3{font-size:14px;margin:22px 0 8px}
.seg{display:flex;background:#f3f4ef;border-radius:20px;padding:4px}
.seg button{flex:1;border-radius:16px;padding:9px;font-weight:800;font-size:14px}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.home-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;margin-top:6px}
.code-box{display:flex;align-items:center;gap:10px;background:var(--y);border-radius:18px;padding:12px 14px}
.code-box small{font-size:11px}
.code-box b{flex:1;font-size:22px;letter-spacing:3px;font-weight:900}
.add-row{display:flex;gap:8px;margin-top:10px}
.add-row input{flex:1;border:1.5px solid var(--line);border-radius:16px;padding:10px 12px;font-size:16px;text-transform:uppercase}
.f-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.f-row .face{width:42px;height:42px;background:#f6f6f1;border-radius:14px;padding:2px}
.f-row div{flex:1}
.f-row small{display:block;color:var(--mute);font-size:12px}
.f-row .ghost{padding:6px 10px}

/* 相談 */
#chat-view{display:flex;flex-direction:column;padding-bottom:0}
.ai-notice{margin:4px 14px;background:#fffbce;border-radius:14px;padding:8px 12px;font-size:12px}
.chat-log{flex:1;overflow:auto;padding:10px 14px}
.msg{max-width:82%;margin:8px 0;padding:10px 13px;border-radius:18px;white-space:pre-wrap;font-size:15px}
.msg.me{margin-left:auto;background:var(--y);border-bottom-right-radius:6px}
.msg.pal{background:#f4f5f1;border-bottom-left-radius:6px}
.msg.sys{max-width:100%;background:#fff;border:1.5px solid var(--ink);border-radius:16px}
.msg.sys a{display:block;font-weight:800;color:var(--ink);margin-top:6px}
.msg.typing{color:var(--mute)}
.chat-input{display:flex;gap:8px;padding:10px 12px calc(84px + var(--safe-b));border-top:1px solid var(--line);background:#fff}
.chat-input input{flex:1;border:1.5px solid var(--line);border-radius:22px;padding:11px 14px;font-size:16px}
.chat-input button{width:44px;height:44px;border-radius:50%;background:var(--y);font-weight:900;font-size:18px}

/* ナビ */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:space-around;align-items:center;height:calc(70px + var(--safe-b));padding:0 14px var(--safe-b);background:#ffffffee;backdrop-filter:blur(14px);border-top:1px solid #0000000a}
.tabs button{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--mute);font-weight:800;font-size:11px;min-width:56px}
.tabs button svg{width:24px;height:24px}
.tabs button.active{color:var(--ink)}
.tabs .plus{height:54px;width:54px;min-width:54px;background:var(--y);color:var(--ink);border:4px solid var(--ink);border-radius:50%;font-size:28px;font-weight:500;line-height:1;transform:translateY(-6px);justify-content:center}
.toast{position:fixed;left:50%;bottom:calc(150px + var(--safe-b));transform:translate(-50%,20px);opacity:0;transition:.3s;background:var(--ink);color:#fff;border-radius:18px;padding:9px 16px;font-size:13px;z-index:20;pointer-events:none;max-width:86vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.maplibregl-ctrl-attrib{font-size:9px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* 撮る画面ではナビも暗く（デザインどおり） */
body[data-view=capture-view] .tabs{background:#17191cd9;border-top-color:#ffffff14}
body[data-view=capture-view] .tabs button{color:#a5aaa5}
body[data-view=capture-view] .tabs .plus{background:#fff;border-color:#fff;color:var(--ink)}