:root{ --bg:#000000; --panel:#232633; --text:#f2f4f8; --muted:#aeb4c3; --line:#343847; --accent:#4fae8a; --danger:#d9576b; --chip:#2f3341; --fun:#ff8a5b; --weight:#7d73e8; --replay:#49b98f; --owned:#5f9ee8; --played:#a974db; --shadow:0 8px 30px rgba(0,0,0,.08); } *{box-sizing:border-box;min-width:0} /* **根っこに overflow-x:hidden を書かない。**（v434） さむわんの報告（v415 と、本番で再発）：「スクロールすると下のバーが 上がってきた」「画面中央くらいで止まり、下にスクロールしたら追従してきた」。 固定されているはずの下のバーが、絶対配置のように遅れて動く。 html / body に overflow を書くとスクロール容器ができ、WebKit では position:fixed の子がビューポート基準から外れてページと一緒に流れることが ある。**間欠的なのは合成レイヤーの組み直しで表に出るからで**、アプリを 切り替えて戻ると WebKit はレイヤーを捨てて作り直す——さむわんが 「写真を保存しにアプリを切り替えて、戻ってきた時になった気がする」と 言ったのと噛み合う。 v415 では backdrop-filter を疑って外した。あれも合成レイヤーの話なので 筋は近かったが、**当たりが1つ浅く、根っこの overflow-x はずっと残っていた。** overflow-x:clip は**スクロール容器を作らない。**はみ出しは今までどおり 切りつつ、固定配置の地雷を踏まない。hidden を先に書いてあるのは、clip を 知らない古い engine のための落とし所だ（後の有効な宣言が勝つ）。 overscroll-behavior-x はスクロール容器あっての指定なので、clip では 出番が無くなる（横に動かないものは、跳ね返りようがない）。 */ /* **v457：overflow を html/body から降ろした。** clip はスクロール容器を作らない——**そこは合っていた。**外していたのは 別のところだ。**根っこ（html）の overflow は、仕様でビューポートへ 伝播する。**body に書いても、html が visible なら body の値が使われる。 **つまり html/body のどちらへ書いても、行き先はビューポートだ。** v434 で clip にしたとき、そこを見ていなかった。 横にはみ出させたくないのは**中身**であって、ビューポートではない。 だから header と main——はみ出しうるものが入っている2つ——へ直に書く。 **固定配置のものも dialog も、この2つの外にある。** */ html,body{max-width:100%} header,main{max-width:100%;overflow-x:hidden;overflow-x:clip} body{margin:0;background: radial-gradient(circle at top left,#211b26 0,transparent 34%), radial-gradient(circle at top right,#18212b 0,transparent 30%), linear-gradient(180deg,#fffafc 0%,#f1f7ff 45%,#18221f 100%); color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;touch-action:pan-y} button,input,select,textarea{font:inherit} button{cursor:pointer} .app{max-width:980px;margin:auto;min-height:100vh;padding-bottom:calc(170px + env(safe-area-inset-bottom))} /* New-game celebration: visually mirrors the real-device-approved v208 shelf-arrival effect, while the logic remains directly in app.js. */ .newGameCelebration{position:fixed;inset:0;z-index:999;pointer-events:none;overflow:hidden} .newGameCelebration::before{content:"";position:absolute;left:50%;top:calc(50% + 76px - 2vh);width:min(300px,82vw);height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(210,200,180,.9) 20%,rgba(246,243,236,.96) 50%,rgba(210,200,180,.9) 80%,transparent);box-shadow:0 3px 14px rgba(210,200,180,.24);opacity:0;transform:translateX(-50%) scaleX(.08)} .newGameCelebration::after{content:"";position:absolute;left:50%;top:calc(50% + 75px - 2vh);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:1px solid rgba(246,243,236,.82);box-shadow:0 0 22px rgba(123,4,45,.72);opacity:0;transform:scale(.2)} .newGameCelebrationCard{position:absolute;left:50%;top:calc(50% - 113px - 2vh);width:min(280px,78vw);min-height:178px;box-sizing:border-box;padding:18px 18px 16px;border-radius:22px;border:2px solid rgba(255,255,255,.72);background:#7B042D;box-shadow:0 20px 46px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.11) inset;color:#fffaf5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;transform:translate(-50%,-88px) scale(.76) rotate(-5deg);transform-origin:50% 100%} .newGameCelebrationCard::after{content:"";position:absolute;inset:8px;border-radius:15px;border:1px solid rgba(255,255,255,.17);pointer-events:none} /* Version-update card: same shape/motion as the new-game card, recolored turquoise so the two moments read as visually distinct at a glance. */ .newGameCelebration.celebrationUpdate .newGameCelebrationCard{background:#00AFCC} .newGameCelebration.celebrationUpdate.show::after{box-shadow:0 0 22px rgba(0,175,204,.72)} .newGameCelebration.show::before{animation:newGameShelfLine 1.65s cubic-bezier(.2,.8,.2,1) forwards} .newGameCelebration.show::after{animation:newGameShelfSpark 1.65s ease-out forwards} .newGameCelebration.show .newGameCelebrationCard{animation:newGameShelfBox 1.65s cubic-bezier(.18,.82,.22,1) forwards} .newGameCelebrationEmoji{position:relative;z-index:1;font-size:43px;line-height:1;margin-bottom:10px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.2))} .newGameCelebrationName{position:relative;z-index:1;max-width:100%;font-weight:900;font-size:23px;line-height:1.25;overflow-wrap:break-word;text-shadow:0 2px 8px rgba(0,0,0,.25)} .newGameCelebrationJoined{position:relative;z-index:1;margin-top:4px;font-size:20px;font-weight:800;line-height:1.3;opacity:1;text-shadow:0 2px 8px rgba(0,0,0,.25)} .newGameCelebrationCount{position:relative;z-index:1;margin-top:9px;font-size:16px;font-weight:700;line-height:1.3;opacity:.92} @keyframes newGameShelfLine{ 0%,14%{opacity:0;transform:translateX(-50%) scaleX(.08)} 29%{opacity:1;transform:translateX(-50%) scaleX(1)} 84%{opacity:.92;transform:translateX(-50%) scaleX(1)} 100%{opacity:0;transform:translateX(-50%) scaleX(.76)} } @keyframes newGameShelfBox{ 0%{opacity:0;transform:translate(-50%,-88px) scale(.76) rotate(-5deg)} 7%{opacity:1} 29%{opacity:1;transform:translate(-50%,3px) scale(1.035) rotate(1deg)} 38%{opacity:1;transform:translate(-50%,-3px) scale(.992) rotate(-.35deg)} 47%{opacity:1;transform:translate(-50%,0) scale(1) rotate(0)} 85%{opacity:1;transform:translate(-50%,0) scale(1) rotate(0)} 100%{opacity:0;transform:translate(-50%,0) scale(.97) rotate(0)} } @keyframes newGameShelfSpark{ 0%,26%{opacity:0;transform:scale(.2)} 33%{opacity:1;transform:scale(.6)} 57%{opacity:0;transform:scale(10)} 100%{opacity:0;transform:scale(10)} } @media (prefers-reduced-motion:reduce){ .newGameCelebration::before,.newGameCelebration::after{display:none!important;animation:none!important} .newGameCelebrationCard{transform:translateX(-50%);animation:none!important;transition:opacity .2s ease} .newGameCelebration.show .newGameCelebrationCard{opacity:1;transform:translateX(-50%);animation:none!important} } /* Analysis view's top button area: 設定/太郎セレクト/プレイ履歴 share one row (they fit at any real phone width, measured at 320-430px); 設定 stays pinned to the left while 太郎セレクト/プレイ履歴 are pushed to the right edge (margin-left:auto), and 思い出をめくる - the longest label - gets its own row underneath, right-aligned under プレイ履歴. Every button keeps its natural, text-sized width instead of stretching to fill the row. */ .analysisToolArea{margin-bottom:16px} .analysisToolRow{display:flex;gap:8px;align-items:center} .analysisToolRow>#playSuggestionBtn{margin-left:auto;flex:none} .analysisToolArea button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* "思い出をめくる" - unlike the celebration toasts above, this is a deliberately-opened dialog the user lingers on (reads a comment, looks at a photo), so it uses the app's normal dialog chrome rather than an auto-dismissing card. A warm, sepia/album tone keeps it visually distinct from the maroon (new game) and turquoise (version update) moments. */ .memoryFlipLabel{font-size:13px;font-weight:800;letter-spacing:.04em;color:#D9A566;text-align:center;margin-bottom:10px} .memoryFlipCard{background:linear-gradient(165deg,#2B2013,#1C160D);border:1px solid #5A4626;border-radius:20px;padding:20px 18px;text-align:center} .memoryFlipPhoto{width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;margin-bottom:14px;background:#14100A} .memoryFlipPhoto img{width:100%;height:100%;object-fit:cover} .memoryFlipPhotoPlaceholder{display:flex;align-items:center;justify-content:center;font-size:52px} .memoryFlipPhotoScroller{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-bottom:14px} .memoryFlipPhotoSlide{flex:0 0 100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#14100A;scroll-snap-align:center} .memoryFlipPhotoSlide img{width:100%;height:100%;object-fit:cover} .memoryFlipDate{font-size:13px;color:#C7B896;font-weight:700} .memoryFlipGameName{font-size:20px;font-weight:900;margin-top:4px;color:#F4EBDA} .memoryFlipPlayers{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px} .memoryFlipLocation{font-size:13px;color:#C7B896;margin-top:8px} .memoryFlipNote{font-size:14px;line-height:1.6;margin-top:14px;color:#EFE4CC;white-space:pre-wrap} .memoryFlipEmpty{padding:32px 16px;text-align:center;color:var(--muted);line-height:1.7} .memoryFlipEmpty p{margin:14px 0 0} .memoryFlipEmptyIcon{font-size:28px} .memoryFlipEmptyEmphasis{font-weight:900;font-size:1.15em;color:#F4EBDA} .historyMonthNav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .historyMonthNav button{width:40px;height:40px;padding:0;font-size:20px;border-radius:12px} .historyMonthLabel{font-size:16px;font-weight:800} .historyWeekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:12px;color:#9DA8BB;margin-bottom:4px} .historyCalendarGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .historyDayCell{aspect-ratio:1;border:0;border-radius:10px;background:#202A47;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:inherit;font:inherit;padding:0} .historyDayEmpty{background:transparent} .historyDayNumber{font-size:13px} .historyDayDot{width:10px;height:10px;border-radius:50%;background:#7B042D} /* 何も登録されていない日は薄く（v394・さむわんの注文）。**押せなくはしない。** その日を選んで棚の写真を足す入口なので、disabled にすると過去の日に何も 書き足せなくなる。だから色だけ落とす。 今日・選択中より**前**に置いてある。同じ強さなので、後に置くと 「今日だが何も無い日」の枠や、選んだ日の色を、こちらが上書きしてしまう。 */ .historyDayCell.isQuiet{background:#1A2136;color:#78839A} .historyDayCell.isToday{box-shadow:inset 0 0 0 1px #D2C8B4} .historyDayCell.isSelected{background:#D2C8B4;color:#05143C} .historyDayDetail{margin-top:16px} .historyDayDetailHead{font-size:15px;margin-bottom:10px} .historyDaySection{margin-bottom:14px} .historyDaySectionTitle{font-size:12px;color:#9DA8BB;margin-bottom:6px} .historyEntryRow{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;background:#202A47;border:1px solid #394665;border-radius:12px;padding:10px 12px;text-align:left;color:inherit;font:inherit;margin-bottom:6px} /* 登録したゲーム(所持): the app's usual wine/maroon accent border, matching the maroon dot segment below. 非所持: a yellow/gold gradient border. プレイしたゲーム: a turquoise gradient border (same brand turquoise as the version-update celebration card). Same three colors as the day dot's pie segments, so a day's dot and its detail rows read as one coherent color language. */ .historyEntryRow.historyEntryRegistered{border-color:#7B042D} .historyEntryRow.historyEntryPlayed{border:1px solid transparent;background:linear-gradient(#202A47,#202A47) padding-box,linear-gradient(135deg,#00AFCC,#0B4B57) border-box} .historyEntryRow.historyEntryMet{border:1px solid transparent;background:linear-gradient(#202A47,#202A47) padding-box,linear-gradient(135deg,#D69E2E,#6B4E12) border-box} .historyEntryMeta{color:#9DA8BB;font-size:12px;white-space:nowrap} .historySnapshotRow{background:#202A47;border:1px solid #394665;border-radius:12px;padding:10px;margin-bottom:8px} .historySnapshotPhotos{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px} .historySnapshotPhotoBtn{border:0;padding:0;background:none;border-radius:8px;display:block} .historySnapshotPhoto{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block} .historySnapshotNote{font-size:13px;margin-bottom:8px;white-space:pre-wrap} .historySnapshotActions{display:flex;gap:8px} .historySnapshotEditBtn,.historySnapshotDeleteBtn{width:auto;padding:5px 9px!important;font-size:11px!important;border-radius:9px!important} .historyDayEmptyState{padding:14px 0;font-size:13px;text-align:center} .historySnapshotButtonRow{display:flex;gap:8px;flex-wrap:wrap} /* カレンダーから「この日に遊んだゲーム」を選ぶ（v406） */ .playPickSearch{width:100%;margin:0 0 10px;padding:10px 12px;border-radius:10px} .playPickList{display:flex;flex-direction:column;gap:6px} .playPickRow{display:flex;align-items:center;gap:8px;width:100%; background:#202A47;border:1px solid #394665;border-radius:12px;padding:10px 12px; text-align:left;color:inherit;font:inherit} .playPickRow[aria-pressed="true"]{background:#1B3A2C;border-color:#356B4C} .playPickCheck{flex:none;width:18px;text-align:center;font-weight:900;color:#8FE0B4} .playPickRow .playPickName{flex:1} .playPickAddRow{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%; background:#26314F;border:1px dashed #5B6A90;border-radius:12px;padding:10px 12px; text-align:left;color:inherit;font:inherit;margin-bottom:6px} .playPickSummary{flex:1;min-width:0;font-size:12px;line-height:1.6;color:var(--muted)} .playPickSummary:empty{display:none} .playPickSearchWrap{display:block;margin:0 0 10px} .playPickSearchWrap .playPickSearch{margin:0} /* ID 指定。.searchClearBtn は .secondary も一緒に付いていて、あとの メディアクエリが .secondary の背景を !important で上書きするので、 クラスでは勝てない（一覧の #searchClearBtn と同じ理由）。 */ #playPickSearchClearBtn{background:#7B042D!important;color:#fff!important} .playPickAddName{margin:0;font-size:17px;font-weight:900;line-height:1.5;overflow-wrap:anywhere} .playPickAddState{display:flex;gap:8px;margin-top:14px} /* 開発室、コンコン。（v413 →v428 で作り直し） もとは独立した色付きの札にしていた。「ここだけ押したくなるように」と 考えてのことだったが、**背景の飾りに見えて、押せることが初見で分からない** とさむわんに指摘された。ほかの設定と同じ行にして、押せると分かるほうを取った。 残すのは**入れ物のいちばん下の線を消す**ことだけ（この組は1行しかない）。 */ .devRoomRow{border-bottom:0!important} .devRoomLead{display:flex;align-items:center;gap:12px; background:linear-gradient(135deg,#2A1A2E,#3A2036);border:1px solid #5A2C48; border-radius:16px;padding:14px;margin-bottom:16px} .devRoomLeadIcon{font-size:26px;line-height:1} .devRoomLead p{margin:0;font-size:13px;line-height:1.7;color:#D9C2CE} .devRoomList{display:flex;flex-direction:column;gap:10px} .devRoomItem{background:#232633;border:1px solid #3a3f4e;border-radius:16px;overflow:hidden} /* Q は行ごと押せる。字が小さいと「開くもの」に見えない。 */ .devRoomQ{display:flex;align-items:flex-start;gap:8px;width:100%; background:transparent;border:0;padding:14px;text-align:left;color:inherit;font:inherit} .devRoomQMark{flex:none;font-weight:900;color:#C9A04F;font-size:14px;line-height:1.6} .devRoomQText{flex:1;min-width:0;font-weight:800;font-size:15px;line-height:1.6} .devRoomQArrow{flex:none;font-size:15px;color:var(--muted);transition:transform .18s ease; line-height:1.6} .devRoomQ[aria-expanded="true"]{background:#282C3B} .devRoomQ[aria-expanded="true"] .devRoomQArrow{transform:rotate(180deg)} /* hidden は author の display 規則に負ける。ここも !important で押さえる （styles.css の頭に書いてある v297 の教訓と同じ）。 */ .devRoomA[hidden]{display:none!important} .devRoomA{padding:0 14px 16px;border-top:1px solid #343949} .devRoomHead{margin:14px 0 0;font-size:15px;font-weight:900;line-height:1.75;color:#F0E6D8} .devRoomAMark{color:#C9A04F;margin-right:6px} /* 改行を活かす。秘密基地の3行のような、行そのものが意味を持つ段落がある。 */ .devRoomText{margin:12px 0 0;font-size:13.5px;line-height:1.95;white-space:pre-line; overflow-wrap:anywhere} /* 額を3つ並べる（v419）。Stripe は1本のリンクにつき最初に入る額を1つしか 持てないので、選ぶところを太郎の側に置いた。額は目安で、押した先で変えられる。 */ .devRoomTipHead{display:flex;align-items:center;justify-content:center;gap:8px; margin:18px 0 0;font-size:15px;font-weight:900;color:#F0DFB6} .devRoomTipRow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px} /* v423：塗りと縁取りを入れ替えた（さむわんの指示）。 額の3つは縁取り、「好きな額で」が塗り。**枠のぶん余白を2px 削って、 入れ替えても高さが変わらないようにしてある。** */ .devRoomTipBtn{display:flex;align-items:center;justify-content:center; padding:12px 4px;border-radius:14px;text-decoration:none; background:transparent;border:2px solid #A32953;color:#F2C9D6; font-weight:900;font-size:15px;box-shadow:none;white-space:nowrap} /* 「好きな額で」（v420）。同じ行き先の仲間だが、**額の3つと張り合わせない**—— あちらは塗り、こちらは縁取り。押す人が「まずは3つから」と読めるようにする。 */ .devRoomTipFree{margin-top:8px;padding:14px 4px;font-size:14px; background:linear-gradient(135deg,#7B042D,#A32953);border:0;color:#fff; box-shadow:0 10px 26px rgba(123,4,45,.34)} .devRoomTipIcon{font-size:19px;line-height:1} .devRoomTipNote{margin:8px 0 0;font-size:11.5px;line-height:1.7;color:var(--muted);text-align:center} /* 差し入れの注意書き（v414）。ボタンの真下、押す前に読めるところへ置く。 地の色を一段落として「本文ではなく但し書き」だと分かるようにする。 */ .devRoomTipSafety{margin-top:12px;padding:12px 14px;border-radius:12px; background:#1D2029;border:1px solid #343949} .devRoomTipSafetyHead{display:flex;align-items:center;gap:6px;margin:0; font-size:12px;font-weight:900;color:#C9A8BC} .devRoomTipSafety ul{margin:8px 0 0;padding-left:1.1em;list-style:disc} .devRoomTipSafety li{margin-top:6px;font-size:11.5px;line-height:1.8;color:var(--muted); overflow-wrap:anywhere} /* 評価の呼び名（v425）。左が「どれか」、右が「なんと呼ぶか」。 チェックの行と同じ高さに見えるよう、余白を合わせてある。 */ .settingsRatingNameRow{display:flex;align-items:center;justify-content:space-between;gap:10px} .settingsRatingNameRow input[type="text"]{flex:0 1 46%;min-width:0;padding:9px 10px; border-radius:10px;border:1px solid var(--line);background:#191C25;color:var(--text); font-size:14px;text-align:right} .devRoomTipSafety li::marker{color:#7B7F8C} /* 「暇すぎ！！」（v416）。差し入れと張り合わせない——あちらは塗り、こちらは 縁取り。**無料で気軽なほうを、重く見せない。** */ .devRoomChat{margin-top:18px;padding:16px 14px 14px;border-radius:16px; background:#1D2029;border:1px dashed #4A4230} .devRoomChatHead{margin:0 0 12px;font-size:13px;font-weight:900;color:#E8D9B8;text-align:center} .devRoomChatBtn{display:flex;align-items:center;justify-content:center;gap:8px; padding:13px;border-radius:14px;text-decoration:none; background:transparent;border:2px solid #C9A04F;color:#F0DFB6; font-weight:900;font-size:15px} .devRoomChatIcon{font-size:18px;line-height:1} .devRoomChatNote{margin:12px 0 0;padding-left:1.1em;list-style:disc} .devRoomChatNote li{margin-top:6px;font-size:11.5px;line-height:1.8;color:var(--muted); overflow-wrap:anywhere} .devRoomChatNote li::marker{color:#7B7F8C} /* 通常登録 ⇄ まとめて登録 の行き来（v411）。見出しの幅は限られるので、 2行に折って字を小さくする。折り返しは
で位置を決めてある。 */ .modeSwitchBtn{flex:0 0 auto;margin-left:auto;padding:6px 10px!important; font-size:11px!important;line-height:1.25;text-align:center;white-space:nowrap} .modeSwitchBtn[hidden]{display:none!important} .modeSwitchLead{margin:0;line-height:1.8} .modeSwitchWarn{margin:12px 0 0;line-height:1.8;font-size:13px;color:#E0A0A0;font-weight:800} .playPickName{min-width:0;overflow-wrap:anywhere} .playPickMeta{flex:none;display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)} .playPickNotOwned{color:#D69E2E} .playPickEmpty{padding:18px 4px;line-height:1.8} .historySnapshotListDate{font-size:13px;font-weight:800;margin-bottom:6px} /* v435・さむわん：「上の検索や絞り込みみたいなところは固定しないで スクロールさせて欲しい。見れる範囲が狭すぎる。」 題・棚の切替・検索欄・絞り込みで、iPhone の画面の**半分近く**を占めていた （実測 830px / 1936px）。貼り付けていたので、どれだけ送っても半分しか カードが見えない。普通に流す。 **backdrop-filter も一緒に外した。**貼り付かないなら下に何も流れてこない ので、ぼかしは何も見せていない。見せないのに合成用の層だけができる—— v415 で .bottomNav から外したのと同じ理由だ。v434 で根っこの overflow-x を 直したばかりなので、同じ種類の火種はここでも減らしておく。 z-index と top も落とす。position:static では、どちらも効かない。 */ header{background:linear-gradient(180deg,rgba(3,10,7,.98),rgba(0,0,0,.95));padding:14px 16px 10px;border-bottom:1px solid #e4d1e9} h1{font-size:22px;margin:0 0 10px} /* v525：見出しの 🎲 を太郎のアイコンに（さむわん）。字の高さに合わせて角を落とす */ #appTitleIcon{display:inline-block;vertical-align:-0.2em;margin-right:6px} #appTitleIcon img{display:block;width:26px;height:26px;border-radius:7px} /* v533：ボードゲームの棚では見出しを文字ロゴに（さむわん）。display を書いた要素は [hidden] だけでは消えないので、 隠す規則も一緒に書く（v433 の罠）。 v536：ロゴの絵の透明な上下の余白（272 行のうち上 32・下 71）を切った（さむわん「上下の余白が大きい」）。 見た目の大きさは v535（68px の絵の中身）と同じで、高さ 42px。見出しは flex で下に揃え、版の印は **ロゴの文字の下端**に揃える（文字の下端は絵の下から 23/169＝約 6px 上。印は行の高さ 1 なので、字の下の隙間を引いて 5px。手元の Chromium で測って、ずれは 0.2px）*/ .appTitle{display:flex;align-items:flex-end;flex-wrap:wrap} #appTitleLogo{display:block;height:42px;width:auto;margin-right:6px} .appTitle .headerVersion{line-height:1;margin-bottom:5px} #appTitleLogo[hidden],#appTitleIcon[hidden],#appTitleText[hidden]{display:none!important} .headerVersion{font-size:.58em;font-weight:800;color:var(--muted);margin-left:5px;letter-spacing:.02em} .toprow{display:flex;gap:8px} /* display を書いた要素は [hidden] だけでは消えない（author の規則が UA の [hidden]{display:none} に勝つ）。ここは鍵のかかった棚の検索バーで、いまは 拡張が inline の display を毎回書くので見えていないだけだった。棚を開けた ときに効かないのは困るので、揃えておく。v433 の横断の柵が拾った。 */ .toprow[hidden],.filters[hidden]{display:none!important} .toprow input{flex:1;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:white} .searchInputWrap{position:relative;flex:1;min-width:0} .searchInputWrap input{width:100%;padding-right:34px} .searchClearBtn{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:24px;height:24px;border-radius:50%!important;padding:0!important;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center} /* The × glyph itself sits visually low within its line box on some platforms (its ink isn't centered in its own em square), so the box can be perfectly centered (confirmed) while the character still looks off - nudge the glyph alone rather than fight the box's centering. */ .searchClearBtnGlyph{display:block;transform:translateY(-1px)} .searchClearBtn[hidden]{display:none} /* ID selector, not .searchClearBtn: it also carries the shared .secondary class, and later media-query rules re-override .secondary's background with !important - an ID always wins regardless of source order. */ #searchClearBtn{background:#7B042D!important;color:#fff!important} .iconbtn,.primary,.secondary,.danger{border:0;border-radius:12px;padding:10px 14px} .primary{background:linear-gradient(135deg,#59b894,#3fa77e);color:#fff;font-weight:700;box-shadow:0 4px 12px rgba(125,185,167,.22)} .secondary{background:#2e3140;color:#d8dce7} .danger{background:#40272d;color:var(--danger)} .filters{display:flex;flex-direction:column;gap:8px;padding-top:10px;overflow:visible} .filterRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%} .filters select{width:100%;min-width:0;border:1px solid var(--line);background:white;padding:8px 10px;border-radius:10px} .priceRange{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:5px;min-width:0} .priceRange input{width:100%;min-width:0;padding:8px 9px;border-radius:10px} .priceRange span{color:var(--muted);font-size:12px;font-weight:700;text-align:center} /* 並び順と、その昇順・降順の切り替え（v394）。.filterRow は2列なので、 ボタンを素で足すと3つ目の要素になって次の行へ落ちる。1枠にまとめる。 */ .sortControl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;align-items:center;min-width:0} /* 並び順の文字が削られるので、ボタンは詰められるだけ詰める。そのぶん矢印を 太くして、小さくても読めるようにしてある。 */ .sortDirBtn{padding:8px 0;border-radius:10px;font-size:18px;font-weight:800;line-height:1.1;width:32px;flex:none} main{padding:14px 14px 30px} .summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px} .stat{background:linear-gradient(135deg,#272a38,#302a3b);border:1px solid #e8dfef;border-radius:16px;padding:10px} .stat:nth-child(2){background:linear-gradient(135deg,#252b38,#263647)} .stat:nth-child(3){background:linear-gradient(135deg,#302a2c,#403126)} .stat:nth-child(4){background:linear-gradient(135deg,#25302d,#274037)} .stat .n{font-size:20px;font-weight:800} .stat .l{font-size:11px;color:var(--muted)} .grid{display:flex;gap:12px;align-items:flex-start} /* コラージュの絞り込み。一覧と同じ条件をこの画面だけで完結させる。 操作が多いので、既定では畳んでおく（プレビューを見る余地を残すため）。 */ .collageFilterToggle{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:42px;font-weight:800} .collageFilterToggle .mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#3a4767;font-size:14px;line-height:1} .collageFilterToggle[aria-expanded="true"]{color:#F2E5BC!important;border-color:#81704A!important;background:#3B3528!important} .collageFilterCount{margin-left:auto;padding:2px 8px;border-radius:999px;background:#81704A;color:#1b1a16;font-size:11px;font-weight:800} .collageFilterPanel{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end} /* display を指定した要素は hidden 属性だけでは消えない（ブラウザ既定の [hidden]{display:none} より、クラスの指定のほうが強い）。v297で同じ罠を 踏んでいるので、display を足したら必ずこの1行も足すこと。 */ .collageFilterPanel[hidden]{display:none} .collageFilterPanel>label{display:flex;flex-direction:column;gap:5px;min-width:0} .collagePriceRange{display:flex;align-items:center;gap:6px} .collagePriceRange input{width:100%;min-width:0} .collageFilterButtons{grid-column:1/-1;display:flex;gap:8px} .cardColumn{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px} #list[data-layout-columns="3"],#list[data-layout-columns="4"]{gap:8px} #list[data-layout-columns="3"] .cardColumn,#list[data-layout-columns="4"] .cardColumn{gap:8px} #list[data-layout-columns="3"] .card{border-radius:15px} #list[data-layout-columns="3"] .cardbody{padding:8px} #list[data-layout-columns="3"] .title{font-size:13px;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #list[data-layout-columns="3"] .ratingBarRow{grid-template-columns:minmax(0,1fr) 23px;gap:3px} #list[data-layout-columns="3"] .ratingBarLabel{display:none} #list[data-layout-columns="3"] .chip{font-size:9px;padding:3px 6px} #list[data-layout-columns="3"] .tagToggleRow{margin-top:6px;padding-top:5px} #list[data-layout-columns="3"] .tagToggleBtn{font-size:10px;gap:4px} #list[data-layout-columns="3"] .tagToggleBtn .mark{width:16px;height:16px;font-size:13px} #list[data-layout-columns="3"] .tagRow{gap:4px;margin-top:5px} #list[data-layout-columns="4"] .card{border-radius:12px} #list[data-layout-columns="4"] .cardbody{padding:6px} #list[data-layout-columns="4"] .title{font-size:11px;line-height:1.25;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #list[data-layout-columns="4"] .ratingBars,#list[data-layout-columns="4"] .singleRatingGraph,#list[data-layout-columns="4"] .unplayedNote,#list[data-layout-columns="4"] .statusRow,#list[data-layout-columns="4"] .chips,#list[data-layout-columns="4"] .tagToggleRow,#list[data-layout-columns="4"] .tagRow{display:none!important} /* リスト表示（v398・さむわんの注文）。畳んだ状態はタイトルだけの1行で、 ＋を押すと写真・状態・評価・タグが開く。 列数ごとの指定（3列・4列）を巻き込まないよう、列数ではなく data-layout で 指定する。リストは列数としては1列なので、行の頭を揃える処理は自然に 何もしない（alignCardRows は2列未満で戻る）。 */ #list[data-layout="list"]{gap:0} #list[data-layout="list"] .cardColumn{gap:6px} #list[data-layout="list"] .card{border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.18)} .listRowHead{display:flex;align-items:center;gap:10px;padding:11px 12px;min-width:0} .listRowHead .title{flex:1;min-width:0;margin:0;font-size:15px;overflow-wrap:anywhere} .listExpandBtn{flex:none;display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;padding:0;border:0;border-radius:50%;background:#3b4050; color:#d8c5f0;font-size:18px;font-weight:800;line-height:1} .listRowBody{padding:0 12px 12px} /* display を持つ要素は [hidden] だけでは消えない（UA規則に author 規則が 勝つ）。.settingsRow と .collageFilterPanel で2度踏んだ罠なので、 ここは最初から打ち消しておく。 */ .listRowBody[hidden]{display:none!important} /* 一覧としては写真が主役ではないので、カードの 4/3 より浅くする。深いままだと 1件開いただけで下の題が画面から押し出される。 */ .listRowBody .thumb{border-radius:10px;margin-bottom:10px;aspect-ratio:16/9} .listRowBody .cardbody{padding:0} .card{position:relative;background:linear-gradient(180deg,#252834 0%,#242631 55%,#202530 100%);border:1px solid #3d4252;border-radius:20px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:transform .15s ease} .card:active{transform:scale(.985)} .thumb{aspect-ratio:4/3;background:linear-gradient(135deg,#302834,#283543);display:flex;align-items:center;justify-content:center;overflow:hidden} .thumb img{width:100%;height:100%;object-fit:cover} .thumb .ph{font-size:34px} .cardbody{padding:11px} .title{font-weight:800;font-size:16px;line-height:1.25;margin-bottom:8px} .ratingBars{display:flex;flex-direction:column;gap:7px;margin-top:4px} .ratingBarRow{display:grid;grid-template-columns:52px minmax(0,1fr) 30px;gap:5px;align-items:center} .ratingBarLabel{font-size:10px;font-weight:800;color:#5d6270;white-space:nowrap} .ratingBarTrack{height:12px;border-radius:999px;background:#323644;overflow:hidden} .ratingBarFill{height:100%;border-radius:999px;transition:width .2s ease,filter .2s ease} .ratingBarFill.fun{background:#ff8a5b} .ratingBarFill.weight{background:#7d73e8} .ratingBarFill.replay{background:#49b98f} .ratingBarValue{font-size:12px;font-weight:900;text-align:right} .statusRow,.tagRow{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px} .statusRow{padding-top:2px} .tagToggleRow{margin-top:8px;padding-top:7px;border-top:1px solid #eceef3} .tagToggleBtn{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;padding:2px 1px;color:#5f6570;font-size:11px;font-weight:800} .tagToggleBtn .mark{display:inline-flex;width:18px;height:18px;border-radius:50%;align-items:center;justify-content:center;background:#3b4050;color:#d8c5f0;font-size:15px;line-height:1} .tagRow{margin-top:7px;padding:0} .tagRow[hidden]{display:none!important} .unplayedNote{font-size:12px;color:#7d7687;background:#302b39;border-radius:10px;padding:8px;text-align:center;font-weight:700} .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px} .detailTagChips{margin-top:6px} .chip{font-size:11px;background:#efe8f2;padding:4px 8px;border-radius:999px;color:#4d5149;font-weight:700} .chip.owned{background:#263b54;color:#9fc5f8} .chip.notowned{background:#30323b;color:#b8bdc8} .chip.farewell{background:#3a2430;color:#e2a3bb;border:1px solid #5c2d3f} .chip.played{background:#3a2e4d;color:#d4b0ff} .chip.unplayed{background:#493526;color:#ffc58e} .chip.favorite{background:#4b4027;color:#dfc581;border:1px solid #75623a} /* 「欲しい！」（v401）。お気に入りの金と紛れない色にする——隣り合って 並ぶことがあるので、見分けが付かないと2つある意味が無い。 */ .chip.wanted{background:#20402f;color:#8fe0b4;border:1px solid #356b4c} /* 勝者 is maroon, not the お気に入り gold: 思い出をめくる draws its card on a warm brown (#2B2013-#1C160D), which the gold chip sinks straight into. Maroon is the app's own accent and stands off that card and the navy lists alike; the 👑 carries the meaning either way. */ .chip.winnerChip{ display:inline-flex; align-items:center; gap:3px; background:#7B042D; color:#fff; border:1px solid #A32953; } .winnerCrown{font-size:11px} /* The form's toggle: an empty outline until crowned, then the same chip colors as the saved record, so what you tap looks like what gets saved. */ .winnerPicker{display:flex;flex-wrap:wrap;gap:7px} .winnerPickBtn{ display:inline-flex; align-items:center; gap:4px; padding:8px 12px; border-radius:999px; font-size:13px; font-weight:800; cursor:pointer; background:#2A2C38; color:#9AA1B2; border:1px dashed #4A4E5E; transition:.16s; } .winnerPickBtn .winnerCrown{font-size:13px;opacity:.35} .winnerPickBtn.isWinner{ background:#7B042D; color:#fff; border:1px solid #A32953; } .winnerPickBtn.isWinner .winnerCrown{opacity:1} .chip.players{background:#25334F;color:#C4D4F0;border:1px solid #40557D} .cardMetaRow{margin-top:6px} .chip.genre{background:#253e35;color:#9be0c4} .empty{text-align:center;color:var(--muted);padding:70px 20px} /* -webkit-touch-callout と user-select は長押しのため（v402）。iOS は 押しっぱなしにすると選択メニュー（コピー・共有）を出す。出ると、 まとめて登録の画面の上に被って邪魔になる。 */ .fab{position:fixed;right:18px;bottom:94px;width:62px;height:62px;border-radius:50%;border:0;background:linear-gradient(135deg,#67bea0,#49aa88);color:#fff;font-size:32px;filter:drop-shadow(0 10px 26px rgba(125,185,167,.28));clip-path:circle(50%);z-index:30;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation} /* まとめて登録（v402／行ごとの入力は v403） */ .bulkAddRows{display:flex;flex-direction:column;gap:10px} .bulkAddRow{background:#222739;border:1px solid #394054;border-radius:12px;padding:9px 10px} .bulkAddRowTop{display:flex;align-items:center;gap:8px;min-width:0} .bulkAddRowNo{flex:none;width:20px;text-align:right;font-size:12px;font-weight:800;color:#8b93a6} .bulkAddName{flex:1;min-width:0;padding:9px 10px;border-radius:10px} .bulkAddRemove{flex:none;width:32px;height:32px;padding:0;font-size:17px;line-height:1} .bulkAddRemove:disabled{opacity:.3} .bulkAddRowState{display:flex;gap:8px;margin-top:8px;padding-left:28px} .bulkAddStateBtn{border:1px solid #454c60;background:#2b3145;color:#aeb5c6; border-radius:999px;padding:5px 13px;font-size:12px;font-weight:800} /* 押した色は、まとめて登録（v403）とヒストリーの登録（v408）が共に使う。 **印は data-game-state 1つに揃えてある。**v408 で、ボタンの見た目だけ 使い回して印を別名（data-pick-state）にしたせいで、押しても色が変わら ない不具合を出した。名前を分けると、また同じことが起きる。 */ .bulkAddStateBtn[aria-pressed="true"][data-game-state="owned"]{background:#263b54;color:#9fc5f8;border-color:#41608c} .bulkAddStateBtn[aria-pressed="true"][data-game-state="wanted"]{background:#20402f;color:#8fe0b4;border-color:#356b4c} .bulkAddSummary{margin-top:14px;font-size:13px;line-height:1.7;color:var(--muted)} .bulkAddSummary:empty{display:none} .bulkAddSkipped{color:#c9a04f} /* 入れたものが一覧に出てこないときの案内（v405） */ .bulkAddHiddenLead{margin:0;font-weight:900;line-height:1.7} .bulkAddHiddenWhy{margin:10px 0 0;line-height:1.8;color:var(--muted);font-size:13px} .bulkAddHiddenAgainRow{margin-top:16px} .scrollTopBtn{position:fixed;left:18px;bottom:94px;width:52px;height:52px;border-radius:50%;border:0;background:linear-gradient(135deg,#7B042D,#A32953);color:#fff;font-size:22px;font-weight:800;filter:drop-shadow(0 10px 26px rgba(123,4,45,.36));clip-path:circle(50%);z-index:30;display:flex;align-items:center;justify-content:center;line-height:1;opacity:0;pointer-events:none;transition:opacity .2s ease} .scrollTopBtn.visible{opacity:1;pointer-events:auto} dialog{border:0;padding:0;border-radius:18px;width:min(720px,calc(100vw - 16px));max-height:94vh;box-shadow:0 30px 80px rgba(0,0,0,.25)} dialog::backdrop{background:rgba(0,0,0,.35);backdrop-filter:blur(3px)} .sheet{background:#fff;display:flex;flex-direction:column;max-height:94vh;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none} .sheethead{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2} .sheethead h2{font-size:18px;margin:0;flex:1} .sheetbody{padding:14px;overflow-y:auto;overflow-x:hidden;max-width:100%;overscroll-behavior-x:none;-webkit-overflow-scrolling:touch;touch-action:pan-y} .formgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;max-width:100%;overflow-x:hidden} .field{display:flex;flex-direction:column;gap:6px} .movieRuntimeRow{display:flex;align-items:center;gap:6px} .movieRuntimeRow input{flex:1;min-width:0} .movieRuntimeUnit{font-size:13px;color:var(--muted);white-space:nowrap} .ratingField[hidden],.field[hidden]{display:none!important} .field.full{grid-column:1/-1} label{font-size:12px;color:var(--muted);font-weight:700} input,select,textarea{width:100%;max-width:100%;min-width:0;border:1px solid var(--line);border-radius:11px;padding:10px 11px;background:white} textarea{min-height:94px;resize:vertical} .photoPreview{width:100%;aspect-ratio:16/9;border:1px dashed var(--line);border-radius:14px;overflow:hidden;background:#f1f2ee;display:flex;align-items:center;justify-content:center} .photoPreview img{width:100%;height:100%;object-fit:contain;background:#111} .photoStrip{display:flex;gap:8px;overflow-x:auto;padding:8px 2px 2px;scroll-snap-type:x proximity} .photoPickBtn{display:inline-flex;align-items:center;justify-content:center;margin-top:8px;width:100%;text-align:center;cursor:pointer} .photoNativeInput{display:none!important;width:0!important;height:0!important;opacity:0!important;position:absolute!important;pointer-events:none!important} .photoMini{position:relative;flex:0 0 84px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#eee;scroll-snap-align:start} .photoMini img{width:100%;height:100%;object-fit:cover} .photoMini button{position:absolute;right:3px;top:3px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;padding:0;font-size:13px} .detailPhotoScroller{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-bottom:10px} .detailPhotoSlide{flex:0 0 100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#111;scroll-snap-align:center} .detailPhotoSlide img{width:100%;height:100%;object-fit:contain} .photoCounter{font-size:12px;color:var(--muted);text-align:center;margin:2px 0 10px} .detailPhotoActions{display:flex;gap:8px;margin-bottom:12px} .detailPhotoActions button{flex:1} .detailPhotoActions>span{flex:1} .detailPhotoActionsNoPhoto{margin-top:2px} .playHistoryAddBtn.primary{width:100%;margin-top:4px;background:linear-gradient(135deg,#7B042D,#A32953)!important;border:1px solid transparent!important;color:#fff!important} .playHistoryEmpty{color:var(--muted);font-size:13px;text-align:center;margin:18px 0} .playHistoryEntry{border:1px solid var(--line,#3a3f4e);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--panel)} .playHistoryEntryHead{display:flex;align-items:center;justify-content:space-between;gap:8px} .playHistoryEntryDate{font-weight:800} .playHistoryEntryMeta{font-size:12px;color:var(--muted);margin-top:2px} .playHistoryEntryNote{font-size:13px;margin-top:6px;white-space:pre-wrap} .playHistoryDeleteBtn{padding:4px 10px;font-size:12px} .playHistoryEditBtn{padding:4px 10px;font-size:12px} .playHistoryEntryActions{display:flex;gap:6px;flex:0 0 auto} .playHistoryPlayerSearchRow{display:flex;gap:8px;margin-bottom:8px} .playHistoryPlayerSearchRow input{flex:1} .playHistoryEntryPlayers{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .playHistoryEntryGameName{font-weight:700;font-size:14px;margin-top:2px} .playHistoryFilterToggle{display:flex;gap:8px;margin-bottom:12px} .playHistoryFilterToggle button{flex:1} .playHistoryAddFreeBtn{width:100%;margin-bottom:14px} .playHistoryFilterRow{display:flex;gap:8px} .playHistoryFilterRow select{flex:1} .playHistoryPhotoStrip2{display:flex;gap:6px;margin-top:8px} .playHistoryPhotoThumb{position:relative;width:64px;height:64px;flex:0 0 auto;border-radius:8px;overflow:hidden;border:0;padding:0} .playHistoryPhotoThumb img{width:100%;height:100%;object-fit:cover;display:block} .playHistoryPhotoMoreOverlay{position:absolute;inset:0;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px} .playHistoryPhotoGalleryBtn{margin-top:8px;width:100%} .playHistoryPhotoGalleryGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .playHistoryPhotoGalleryItem{border:0;padding:0;background:none;display:block} .playHistoryPhotoGalleryItem img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block} dialog.lightboxDialog{padding:0;border:0;background:#000;position:fixed;inset:0;width:100vw;height:100dvh;max-width:100vw;max-height:none;margin:0} dialog.lightboxDialog::backdrop{background:#000} .lightboxScroller{display:flex;width:100%;height:100dvh;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch} .lightboxSlide{position:relative;flex:0 0 100%;width:100%;height:100dvh;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;overflow:hidden} .lightboxBg{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(32px) brightness(.45);transform:scale(1.15)} .lightboxSlide img{position:relative;z-index:1;display:block;max-width:100%;max-height:100dvh;width:auto;height:auto;margin:auto;object-fit:contain;box-shadow:0 8px 40px rgba(0,0,0,.5);touch-action:pan-x;transform-origin:center center} .lightboxSlide.isZoomed img{touch-action:none} .lightboxSlide img.lightboxZoomAnim{transition:transform .18s ease} .lightboxClose{position:fixed;top:calc(16px + env(safe-area-inset-top));right:16px;z-index:5;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:22px;line-height:1} .lightboxCounter{position:fixed;top:calc(22px + env(safe-area-inset-top));left:0;right:0;text-align:center;color:#fff;font-size:13px;z-index:4} .photoGalleryGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px} .photoGalleryGrid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:#111} .stepper{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;gap:8px;max-width:100%} .stepper button{border:0;border-radius:10px;background:#eceee8;font-size:22px} .stepper input{text-align:center;font-weight:800} .ratingSliderRow{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;gap:8px;align-items:center;max-width:100%} .ratingSliderBtn{border:0;border-radius:10px;background:#eceee8;font-size:22px;height:44px} .ratingSlider{position:relative;height:74px} .ratingSliderValue{position:absolute;top:0;left:0;right:0;height:30px;line-height:30px;color:#E8DFC9;font-size:24px;font-weight:900;text-align:center} .ratingSliderTrack{ position:absolute;left:0;right:0;top:47px;height:8px;border-radius:999px;overflow:hidden; background:linear-gradient(90deg,#D2C8B4 0%,#7B042D 100%); } .ratingSliderMask{position:absolute;top:0;bottom:0;left:var(--rating-fill,44.44%);right:0;background:#3A3F4E} .ratingSlider input[type="range"]{ -webkit-appearance:none!important; appearance:none!important; position:absolute; left:0;right:0;top:30px; width:100%!important; height:42px!important; margin:0!important; padding:0!important; border:0!important; background:transparent!important; touch-action:none!important; } .ratingSlider input[type="range"]::-webkit-slider-runnable-track{height:8px;background:transparent} .ratingSlider input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:30px;height:30px; margin-top:-11px; border-radius:50%; border:4px solid #E3DAC5; background:#1C2744; box-shadow:0 2px 9px rgba(0,0,0,.42); } .ratingSlider input[type="range"]::-moz-range-track{height:8px;background:transparent} .ratingSlider input[type="range"]::-moz-range-thumb{ width:23px;height:23px;border-radius:50%;border:4px solid #E3DAC5;background:#1C2744; } /* v432：年/月/日の3つの選択式をやめ、カレンダーを開くボタン1つにした。 格子の指定は残す——棚の写真の欄など、まだ横に並べるものがある。 */ .jpdate{display:flex;gap:5px;align-items:center;max-width:100%} .jpdate span{font-size:13px;color:var(--muted)} .dateOpenBtn{ flex:1;min-width:0; display:flex;align-items:center;justify-content:space-between;gap:8px; padding:11px 12px; border:1px solid var(--line);border-radius:12px; background:var(--panel);color:var(--text); font:inherit;font-weight:800;text-align:left; } .dateOpenBtn:disabled{opacity:1;cursor:default} .dateOpenValue{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* まだ選んでいない欄は薄く。選んである欄と、ひと目で見分けられるように。 */ .dateOpenValue.dateOpenEmpty{color:var(--muted);font-weight:700} .dateOpenIcon{flex:0 0 auto;font-size:15px;line-height:1} /* ── タグ・入手場所のプルダウン（v490・さむわん：タグ一覧が長く、コメントなどが下に深すぎる）── 閉じた面に選んでいるものを出し、押すとチップの一覧が開く。日付の欄と同じ形の面にする。 */ .tagPulldown{display:block} .tagPulldownFace{ list-style:none;cursor:pointer; display:flex;align-items:center;justify-content:space-between;gap:8px; padding:11px 12px; border:1px solid var(--line);border-radius:12px; background:var(--panel);color:var(--text); font-weight:800; } .tagPulldownFace::-webkit-details-marker{display:none} .tagPulldownValue{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .tagPulldownValue.tagPulldownEmpty{color:var(--muted);font-weight:700} .tagPulldownIcon{flex:0 0 auto;transition:transform .15s} .tagPulldown[open] .tagPulldownIcon{transform:rotate(180deg)} .tagPulldown[open] .genreGrid{margin-top:8px} /* タグの検索（v491）。探しているあいだ、合わないチップは隠すだけ（消さない＝選んだものが外れない） */ .tagSearch{width:100%;margin-top:8px;box-sizing:border-box} .genreToggle.tagHidden{display:none!important} .tagCreateBtn{width:100%;margin-top:8px} .tagCreateBtn[hidden]{display:none!important} /* ── 日付を選ぶカレンダー（v432）── */ .datePickerSheet{max-width:420px} .datePickerHead{display:flex;align-items:center;gap:8px;margin-bottom:12px} .datePickerNav{ flex:0 0 42px;width:42px;height:42px;padding:0!important; display:inline-grid;place-items:center;font-size:19px;font-weight:900; } .datePickerNav:disabled{opacity:.35} /* 年月の見出しは押せる。押すと年と月の早送りが出る。 **押せることが伝わる見た目にする**（v428 の開発室の行と同じ反省）。 */ .datePickerMonthLabel{ flex:1;min-width:0; padding:11px 12px; border:1px solid var(--line);border-radius:12px; background:var(--panel);color:var(--text); font:inherit;font-size:16px;font-weight:900;text-align:center; } .datePickerMonthLabel[aria-expanded="true"]{background:#D2C8B4;color:#05143C;border-color:#D2C8B4} .datePickerWeek,.datePickerGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px} .datePickerWeek{margin-bottom:5px} .datePickerWeekday{text-align:center;font-size:12px;font-weight:800;color:var(--muted);padding:2px 0} .datePickerWeekday.isSunday{color:#E0798F} .datePickerWeekday.isSaturday{color:#7FB2E8} .datePickerCell{ aspect-ratio:1;border:0;border-radius:10px; background:#202A47;color:inherit;font:inherit;font-size:14px;font-weight:800; display:grid;place-items:center;padding:0; } .datePickerEmpty{background:transparent} .datePickerCell.isToday{box-shadow:inset 0 0 0 1px #D2C8B4} .datePickerCell.isChosen{background:#D2C8B4;color:#05143C} /* v433：カレンダーと早送りを重ねる。**下からカレンダーを外さない。** 外すと入れ物が縮み、早送りの中身の高さに合わせてダイアログが伸び縮みする （実測88px）。さむわんの言葉では「目が滑る」。 */ .datePickerPanels{position:relative} .datePickerJump{ position:absolute;inset:0; background:var(--panel);border-radius:12px; padding:2px; /* **板そのものは流さない。**流すと、月の一覧が下へ押し出されて 見えなくなる（320px と 390px で実際にそうなった）。縦に積んで、 余った高さは年の一覧に全部渡す。 */ display:flex;flex-direction:column;overflow:hidden; } /* **display を書いたら、[hidden] を書き直すこと。**author の display:flex は UA の [hidden]{display:none} に勝つので、これが無いと早送りの板が カレンダーに被さりっぱなしになる。**実際にそうなっていた**—— photo-split-screen の「hidden を付けた要素は本当に消えているか」という 横断の柵が拾ってくれた。俺の台本は hidden 属性の有無しか見ておらず、 被さっているかを測っていなかったので素通りさせた。 */ .datePickerJump[hidden]{display:none!important} .datePickerJumpHead{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--muted);margin:0 0 6px} /* 年は多いので、ここだけ縦に流す。**余りを全部もらう**——px で決め打つと 画面幅ごとに余り方が変わり、狭い端末で月の一覧が押し出される。 */ .datePickerYearList{ flex:1;min-height:64px;overflow-y:auto;-webkit-overflow-scrolling:touch; display:grid;grid-template-columns:repeat(3,1fr);gap:6px; grid-auto-rows:max-content;margin-bottom:10px; } /* 月は必ず見えるところに置く。年を選んだあと、スクロールを探させない。 **6列2段にする。**4列3段（141px）だと、320px の端末で板からはみ出した。 */ .datePickerMonthList{flex:0 0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:6px} .datePickerJumpBtn{ padding:10px 4px;border:1px solid var(--line);border-radius:10px; background:var(--panel);color:var(--text);font:inherit;font-size:13px;font-weight:800; } .datePickerJumpBtn.isChosen{background:#D2C8B4;color:#05143C;border-color:#D2C8B4} .sameDateBtn{padding:5px 9px!important;border-radius:9px!important;font-size:11px!important;font-weight:800!important;white-space:nowrap} .dateFieldHead{display:flex;align-items:center;justify-content:space-between;gap:8px} .dateActions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap} .dateUnknownBtn{padding:5px 9px!important;border-radius:9px!important;font-size:11px!important;font-weight:800!important;white-space:nowrap} .dateUnknownBtn[aria-pressed="true"]{background:#7B042D!important;color:#fff!important;border-color:#A32953!important} .jpdate.dateUnknown{opacity:.45} input.priceUnknown{opacity:.45} .pricePresetRow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .priceInputWrap{position:relative} .priceInputWrap input{width:100%;padding-right:34px} .priceClearBtn{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:24px;height:24px;border-radius:50%!important;padding:0!important;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center} .priceClearBtnGlyph{display:block;transform:translateY(-1px)} .priceClearBtn[hidden]{display:none} /* ID selectors, not .priceClearBtn: it also carries the shared .secondary class, and later media-query rules re-override .secondary's background with !important - an ID always wins regardless of source order. */ #retailPriceClearBtn,#paidPriceClearBtn,#soldPriceClearBtn{background:#7B042D!important;color:#fff!important} /* ID selector, not a class: later theme media queries re-override input,select,textarea{border-color:...} with the theme's own color - an ID always wins regardless of source order. */ #name{border-color:#7B042D!important} .checks{display:flex;gap:16px;flex-wrap:wrap} .genreGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .genreToggle{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(135deg,#302a3c,#273743);border:1px solid #3a3f4d;border-radius:12px;padding:9px 10px;font-size:13px;font-weight:700;color:#555867} .genreToggle input{appearance:none;-webkit-appearance:none;width:42px;height:24px;border:0;border-radius:999px;background:#cbc2d2;position:relative;flex:0 0 auto;align-self:center;margin:0;padding:0;transition:.18s} .onboardingDialog{width:min(520px,calc(100vw - 20px));border-radius:24px} .onboardingSheet{min-height:min(620px,calc(100dvh - 32px));background:linear-gradient(160deg,#111A31 0%,#18213A 54%,#24172A 100%)!important;color:#F6F3EC} .onboardingTop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid #394665} .onboardingTop strong{font-size:15px} .onboardingSkip{width:auto!important;padding:7px 10px!important;border:1px solid #4A5A7C!important;border-radius:10px!important;background:#1E2947!important;color:#D8D1C5!important;font-size:12px!important} .onboardingBody{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 24px} .onboardingIcon{font-size:72px;line-height:1;margin-bottom:24px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.28))} .onboardingStep{font-size:12px;font-weight:900;color:#B9B2A5;letter-spacing:.08em} .onboardingBody h2{font-size:25px;line-height:1.35;margin:12px 0 14px;color:#F7F3EA} .onboardingBody p{max-width:360px;margin:0;color:#D3CCBF;line-height:1.8;font-size:15px;white-space:pre-line} #onboardingNote{margin-top:14px} #onboardingNote strong{color:#F7F3EA;font-weight:900} .onboardingImportBtn{margin-top:18px} /* ID selector, not .onboardingImportBtn: several later media-query rules re-override .secondary's background with !important for responsive/ dark-theme variants, and since those tie with this one on !important, source order (theirs is later in the file) would otherwise win. An ID always beats any number of class selectors regardless of order. */ #onboardingImportBtn{background:#7B042D!important;color:#fff!important} .onboardingImportBtn[hidden]{display:none!important} .onboardingDots{display:flex;justify-content:center;gap:8px;margin-top:28px} .onboardingDot{width:8px;height:8px;border-radius:999px;background:#596074;transition:.18s} .onboardingDot.active{width:24px;background:#A32953} .onboardingFoot{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;padding:14px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid #394665} .onboardingFoot button{min-height:48px} .settingsSheet,.infoDocumentSheet{background:linear-gradient(160deg,#111A31 0%,#18213A 54%,#24172A 100%)!important;color:#F6F3EC} .settingsBody{display:flex;flex-direction:column;gap:14px;overflow-y:auto!important;overflow-x:hidden!important} .settingsBody>*{flex:0 0 auto;min-height:min-content} .settingsAppCard{display:flex;align-items:center;gap:14px;padding:16px;background:linear-gradient(135deg,#202A47,#171D31);border:1px solid #394665;border-radius:18px} .settingsAppIcon{width:58px;height:58px;display:grid;place-items:center;border-radius:16px;background:#283250;font-size:30px;overflow:hidden} .settingsAppIcon img{display:block;width:100%;height:100%;object-fit:cover} .settingsAppCard strong{font-size:19px;color:#F7F3EA} .settingsVersion{margin-top:5px;font-size:12px;color:#B9B2A5} .settingsGroup{overflow:hidden;flex:none!important;height:auto!important;max-height:none!important;border:1px solid #394665;border-radius:16px;background:#171F36} .settingsRow{width:100%;height:auto!important;min-height:76px!important;max-height:none!important;overflow:visible!important;display:flex;flex:none!important;align-items:center;justify-content:space-between;gap:14px;padding:14px 15px!important;border:0!important;border-bottom:1px solid #394665!important;border-radius:0!important;background:transparent!important;color:#F4F0E8!important;text-align:left!important} /* display を指定した要素は hidden 属性だけでは消えない（ブラウザ既定の [hidden]{display:none} より、クラスの指定のほうが強い）。この罠は v297・ collageFilterPanel で踏んでいて、そこに注意書きも残していたのに、v386 の 「写真の保存方法」の行で**同じ踏み方をした**。 まっさらな端末で「変更済み ✓」が出て、さむわんの実機報告で分かった。 display を足したら必ずこの1行も足すこと。 */ .settingsRow[hidden]{display:none!important} .settingsRow:last-child{border-bottom:0!important} .settingsRow span{display:flex;flex-direction:column;gap:4px} .settingsRow strong{font-size:14px} .settingsRow small{color:#B9B2A5;font-size:11px;line-height:1.45} .settingsRow b{font-size:26px;color:#9C9383;font-weight:500} /* 押せない行（いまの状態を見せるだけ）。押せる行と見分けがつくように、 印の色を薄くして、指を置いても反応しないことを示す。 */ .settingsStateRow{cursor:default} .settingsStateRow b{color:#6FAE7A;font-size:20px} .settingsChoiceRow select{width:auto;min-width:88px;padding:9px 28px 9px 11px;border:1px solid #53617F;border-radius:11px;background:#202B49;color:#F4F0E8;font-weight:800} .settingsDescription{margin:0 2px 14px;color:#B9B2A5;font-size:13px;line-height:1.6} .settingsSectionLabel{margin:2px 4px -6px;color:#D2C8B4;font-size:12px;font-weight:900} .settingsCheckRow{cursor:pointer} .settingsCheckRow input{width:25px;height:25px;flex:0 0 auto;accent-color:#168FE5} .settingsNotice{padding:14px 15px;border:1px solid #394665;border-radius:16px;background:#11182B} .settingsNotice strong{font-size:13px;color:#F4F0E8} .settingsNotice p{margin:7px 0 0;color:#C9C3B7;font-size:12px;line-height:1.7} .settingsNoticeLink{color:var(--accent);font-weight:700;text-decoration:underline} .infoDocumentBody{color:#D3CCBF;line-height:1.8;font-size:14px} .infoDocumentBody h3{margin:22px 0 7px;color:#F7F3EA;font-size:16px} .infoDocumentBody h3:first-child{margin-top:0} .infoDocumentBody p{margin:0 0 10px} .infoDocumentBody ul{padding-left:1.4em;margin:6px 0 14px} .genreToggle input::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:white;top:50%;left:3px;transform:translateY(-50%);box-shadow:0 1px 4px rgba(0,0,0,.18);transition:.18s} .genreToggle input:checked{background:var(--accent)} .genreToggle input:checked::after{transform:translate(18px,-50%)} .view{display:none} .view.active{display:block} /* 下のナビは position:fixed で画面に貼りつける。**backdrop-filter は付けない。** v415 で外した。背景はどの配色でも不透明（実測：alpha 1・1・.98）なので、 ぼかしは**そもそも何も見せていなかった。**見えないのに合成用の層だけが増え、 iOS では position:fixed の要素がスクロールや拡大のあいだ遅れて動く原因に なる（さむわんの報告：下へ送ったらバーが上がって画面中央で止まり、 さらに送ったら追従してきた）。見た目を1つも変えずに、その火種だけ減らせる。 */ /* v434：中央寄せから transform を外した。left:0;right:0 と auto の余白でも 同じ位置に来る（実測で同じ）。transform は合成レイヤーを強制するので、 **いちばん貼りついていてほしい要素に火種を置かない。** backdrop-filter を外した v415 と同じ理由だ。 */ .bottomNav{position:fixed;left:0;right:0;margin-left:auto;margin-right:auto;bottom:10px;z-index:28;width:min(480px,calc(100vw - 24px));display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#000000;padding:8px;border:1px solid #3d4252;border-radius:20px;box-shadow:0 12px 34px rgba(135,117,151,.16)} /* 4つ並ぶので、絵文字を字の上へ積む（v412）。横に並べると「ヒストリー」が 入らず端が切れた（実測：ボタン幅84px に対して字があふれる）。 */ .navBtn{border:0;border-radius:12px;padding:6px 2px;background:transparent;font-weight:800; color:#6b7280;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px} .navIcon{font-size:16px;line-height:1} .navLabel{font-size:10px;line-height:1.2;white-space:nowrap} /* ヒストリーと設定を全画面で見せる（v412）。dialog の見出しの代わりになる。 */ /* main が既に左右の余白を持っているので、ここでは足さない（二重になる）。 */ .pageHead{display:flex;align-items:center;justify-content:space-between;gap:8px; padding:2px 0 12px;margin:0} .pageTitle{margin:0;font-size:19px;font-weight:900;letter-spacing:.01em} /* v426：思い出をめくるをヒストリーへ移し、見出しを外した。 **この規則は .pageHead より後ろに置くこと。**前に置くと同じ強さで負けて、 space-between のまま2つのボタンが両端へ離れる（実際にそうなった）。 */ .pageHeadToolsOnly{justify-content:flex-end} .pageBody{padding:0} .navBtn.active{background:linear-gradient(135deg,#2c3a35,#342f43);color:#a6e0ca} .analysisGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .analysisCard{background:linear-gradient(135deg,#272a38,#332d42);border:1px solid #3a3f4e;border-radius:18px;padding:14px;box-shadow:0 8px 24px rgba(125,115,145,.09)} .analysisCard:nth-child(2){background:linear-gradient(135deg,#252b38,#263647)} .analysisCard:nth-child(3){background:linear-gradient(135deg,#302a2c,#403126)} .analysisCard:nth-child(4){background:linear-gradient(135deg,#25302d,#274037)} .analysisCard .big{font-size:26px;font-weight:900;margin-top:4px} .analysisCard .small{font-size:12px;color:var(--muted);font-weight:700} .analysisCard.wide{grid-column:1/-1} .barRow{margin-top:12px} .barLabel{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:5px} .barTrack{height:10px;background:#323644;border-radius:999px;overflow:hidden} .barFill{height:100%;background:linear-gradient(90deg,#8d7fd8,#5fbb98);border-radius:999px} .checks label{display:flex;align-items:center;gap:7px;color:var(--text);font-size:14px} .checks input{width:auto} .movieSortRow{grid-template-columns:1fr} .chip.movieType{background:#283250;border-color:#435579;color:#d8dfef} .chip.movieType.animeType{background:#352b4d;border-color:#5b4979;color:#e4dcef} .chip.movieType.dramaType{background:#273d40;border-color:#416467;color:#d9e8e7} .sheetfoot{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:#fff} .sheetfoot button{flex:1} .detailTitle{font-size:26px;font-weight:900;margin-bottom:10px} .score{border-radius:14px;padding:11px;text-align:center;color:white} .score.fun{background:linear-gradient(135deg,#ff9a76,var(--fun))} .score.weight{background:linear-gradient(135deg,#8983ff,var(--weight))} .score.replay{background:linear-gradient(135deg,#3ac99d,var(--replay))} .score b{display:block;font-size:22px} .score span{font-size:11px;color:var(--muted)} .kv{display:grid;grid-template-columns:120px 1fr;gap:8px;border-top:1px solid var(--line);padding:9px 0} .kv .k{color:var(--muted);font-size:13px} .sectionTitle{font-weight:800;margin:18px 0 6px} .textblock{white-space:pre-wrap;background:#f7f7f4;border-radius:12px;padding:11px;line-height:1.55} .menuRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px} .detailMenuRow{justify-content:space-between;align-items:center} @media(min-width:700px){.grid{max-width:820px;margin:0 auto}} @media(max-width:560px){ .summary{grid-template-columns:repeat(2,1fr)} .formgrid{grid-template-columns:1fr} .field.full{grid-column:auto} } /* v526：登録画面（ゲーム）の2列は、決めた組でしか横に並ばない（さむわん「iPad で入力項目が崩れている」）。 v525 までは自動配置で、full でない欄が出ている順に左右へ詰まっていた。入手日は所持でないと隠れるので、 iPad では「発売日 | 定価」「入手価格（半分の幅で1つ）」になっていた。 日付は日付と、金額は金額と並べ、手放した金額は横いっぱい。相方が隠れていたら、残った1つを横いっぱいにする （左が隠れたら隣接セレクタ、右が隠れたら :has。:has を読めないブラウザが規則ごと捨てても隣接の規則が 巻き添えにならないよう、規則は分けてある）。スマホの1列（560px 以下）では効かせない。 */ @media(min-width:561px){ .formgrid [data-editor-field-container="acquiredDate"]{grid-column:1} .formgrid [data-editor-field-container="releaseDate"]{grid-column:2} .formgrid [data-editor-field-container="retailPrice"]{grid-column:1} .formgrid [data-editor-field-container="paidPrice"]{grid-column:2} .formgrid [data-editor-field-container="soldPrice"]{grid-column:1/-1} /* 定価の見出しは字だけ、入手価格の見出しは「定価と同じ」の釦つきで背が違う。入力欄の高さを揃えるため、定価は下に寄せる */ .formgrid [data-editor-field-container="retailPrice"]{justify-content:flex-end} .formgrid [data-editor-field-container="acquiredDate"][hidden]+[data-editor-field-container="releaseDate"], .formgrid [data-editor-field-container="retailPrice"][hidden]+[data-editor-field-container="paidPrice"]{grid-column:1/-1} .formgrid [data-editor-field-container="acquiredDate"]:has(+[data-editor-field-container="releaseDate"][hidden]),.formgrid [data-editor-field-container="retailPrice"]:has(+[data-editor-field-container="paidPrice"][hidden]){grid-column:1/-1} } input,select,textarea{color:var(--text);background:#232633;border-color:#3a3f4e} input::placeholder,textarea::placeholder{color:#858c9b} select option{background:#232633;color:#f2f4f8} dialog{background:#232633;color:var(--text)} .sheet{background:#232633} .sheethead{background:#232633;border-bottom-color:#3a3f4e} .sheetfoot{background:#232633;border-top-color:#3a3f4e} .textblock{background:#1d2029;color:#e6e9f0} .kv{border-top-color:#353a49} .tagToggleRow{border-top-color:#353a49} .photoPreview{background:#1d2028;border-color:#3b4050} .unplayedNote{background:#2d303c;color:#b8becb} .analysisCard .small,.stat .l{color:#aeb4c3} .ratingBarLabel{color:#c4c8d2} .ratingBarTrack{background:#363a49} .barTrack{background:#343846} .tagToggleBtn{color:#c3c8d3} .genreToggle{color:#e3e7ef} html{background:#000000 !important;} body,.app{background: radial-gradient(circle at top left, rgba(34,120,82,.20) 0%, transparent 32%), radial-gradient(circle at bottom right, rgba(18,88,61,.16) 0%, transparent 28%), linear-gradient(180deg,#030705 0%,#000000 42%,#020504 100%) !important;} header{background:linear-gradient(180deg,rgba(3,10,7,.98),rgba(0,0,0,.95)) !important;} main{background:transparent !important;} .bottomNav{background:linear-gradient(180deg,rgba(5,13,9,.98),rgba(0,0,0,.98)) !important;} .toprow input, .filters select{ background:#1b2420 !important; color:#f4fbf7 !important; border:1px solid #4d6a5f !important; font-weight:800 !important; } .toprow input::placeholder{ color:#b9ccc3 !important; } .filters select{ box-shadow:0 0 0 1px rgba(120,170,145,.08) inset; } .filters select option{ background:#18201c !important; color:#f4fbf7 !important; } .secondary{ background:#233129 !important; color:#eef8f3 !important; border:1px solid #4d6a5f !important; } .navBtn{ color:#dbe9e2 !important; } .navBtn.active{ color:#baf0d6 !important; } :root{ --cream:#D2C8B4; --steel:#324B6E; --navy:#05143C; --slate:#283250; --wine:#7B042D; --text:#F6F3EC; --muted:#C8C2B7; --line:#3E4A66; --accent:#324B6E; --danger:#A14A66; } html{ background:#05143C !important; } body,.app{ background: radial-gradient(circle at top left, rgba(50,75,110,.38) 0%, transparent 36%), radial-gradient(circle at bottom right, rgba(123,4,45,.18) 0%, transparent 30%), linear-gradient(180deg,#05143C 0%,#0B1838 48%,#10152C 100%) !important; color:var(--text) !important; } header{ background:linear-gradient(180deg,rgba(5,20,60,.98),rgba(16,21,44,.94)) !important; border-bottom:1px solid #324B6E !important; } h1,.title,.detailTitle{ color:#F7F3EA !important; } .toprow input, .filters select, input,select,textarea{ background:#1E2947 !important; color:#F6F3EC !important; border:1px solid #4A5A7C !important; } input::placeholder,textarea::placeholder{ color:#B9B2A5 !important; } select option{ background:#1E2947 !important; color:#F6F3EC !important; } .primary{ background:linear-gradient(135deg,#324B6E,#283250) !important; color:#fff !important; border:1px solid #4E638A !important; box-shadow:0 6px 18px rgba(5,20,60,.28) !important; } .secondary{ background:#283250 !important; color:#F2EEE6 !important; border:1px solid #4A5A7C !important; } .danger{ background:#4A1730 !important; color:#FFD9E4 !important; border:1px solid #7B3653 !important; } .summary .stat{ color:#F6F3EC !important; border:1px solid #3C4968 !important; } .summary .stat:nth-child(1){ background:linear-gradient(135deg,#283250,#324B6E) !important; } .summary .stat:nth-child(2){ background:linear-gradient(135deg,#324B6E,#2A3E63) !important; } .summary .stat:nth-child(3){ background:linear-gradient(135deg,#3A2B3C,#7B042D) !important; } .summary .stat:nth-child(4){ background:linear-gradient(135deg,#D2C8B4,#9C9383) !important; color:#172039 !important; } .summary .stat:nth-child(4) .l{ color:#3D4250 !important; } .stat .l{ color:#D3CCBF !important; } .card{ background:linear-gradient(180deg,#202A47 0%,#1B233C 58%,#171D31 100%) !important; border:1px solid #394665 !important; box-shadow:0 10px 28px rgba(0,0,0,.28) !important; } .thumb{ background:linear-gradient(135deg,#283250,#324B6E) !important; } .ratingBarTrack, .barTrack{ background:#111A32 !important; border:1px solid #31405F !important; } .ratingBarFill.fun{ background:#D2C8B4 !important; } .ratingBarFill.weight{ background:#324B6E !important; } .ratingBarFill.replay{ background:#7B042D !important; } .ratingBarLabel,.ratingBarValue{ color:#EDE8DD !important; } .chip{ border:1px solid transparent !important; } .chip.owned{ background:#263A5B !important; color:#DCE8F8 !important; border-color:#415C88 !important; } .chip.notowned{ background:#302F38 !important; color:#D0CBC3 !important; border-color:#4A4852 !important; } .chip.played{ background:#3A3150 !important; color:#E9DCF7 !important; border-color:#5A4776 !important; } .chip.unplayed{ background:#3E3130 !important; color:#E8D5C0 !important; border-color:#665049 !important; } .chip.genre{ background:#4A1830 !important; color:#F4DCE5 !important; border-color:#7B3653 !important; } .unplayedNote{ background:#242B3D !important; color:#C7C0B3 !important; border:1px solid #39445D !important; } .genreToggle{ background:linear-gradient(135deg,#212B48,#1D263F) !important; color:#F2EEE6 !important; border:1px solid #3A4869 !important; } .genreToggle input{ background:#596074 !important; } .genreToggle input:checked{ background:#7B042D !important; } .tagToggleBtn{ color:#D8D1C5 !important; } .tagToggleBtn .mark{ background:#324B6E !important; color:#fff !important; } .bottomNav{ background:linear-gradient(180deg,#111A31,#0B1225) !important; border:1px solid #33415F !important; box-shadow:0 12px 34px rgba(0,0,0,.38) !important; } .navBtn{ color:#C9C3B7 !important; } .navBtn.active{ background:linear-gradient(135deg,#324B6E,#283250) !important; color:#FFFFFF !important; } .fab{ background:linear-gradient(135deg,#7B042D,#A32953) !important; filter:drop-shadow(0 10px 26px rgba(123,4,45,.36)) !important; } dialog,.sheet,.sheethead,.sheetfoot{ background:#182038 !important; color:#F4F0E8 !important; } .sheethead{ border-bottom:1px solid #394665 !important; } .sheetfoot{ border-top:1px solid #394665 !important; } .photoPreview,.photoMini{ background:#10182D !important; border-color:#3B4967 !important; } .detailPhotoSlide{ background:#070B16 !important; } .kv{ border-top-color:#394665 !important; } .kv .k{ color:#C8C0B4 !important; } .textblock{ background:#11182B !important; color:#EDE8DF !important; border:1px solid #303D59 !important; } .analysisCard{ color:#F4F0E8 !important; border:1px solid #3B4764 !important; box-shadow:0 8px 24px rgba(0,0,0,.24) !important; } .analysisCard:nth-child(1){ background:linear-gradient(135deg,#283250,#324B6E) !important; } .analysisCard:nth-child(2){ background:linear-gradient(135deg,#324B6E,#26395D) !important; } .analysisCard:nth-child(3){ background:linear-gradient(135deg,#3A2433,#7B042D) !important; } .analysisCard:nth-child(4){ background:linear-gradient(135deg,#D2C8B4,#9C9383) !important; color:#172039 !important; } .analysisCard:nth-child(4) .small{ color:#404652 !important; } .analysisCard .small{ color:#D0C9BE !important; } .barFill{ background:linear-gradient(90deg,#324B6E,#7B042D) !important; } .tweetSheet{background:#182038!important} .tweetCard{ background: radial-gradient(circle at top left,rgba(50,75,110,.32),transparent 34%), linear-gradient(160deg,#111A31 0%,#18213A 54%,#24172A 100%); border:1px solid #3D4A69; border-radius:20px; padding:14px; box-shadow:0 14px 36px rgba(0,0,0,.30); } .tweetTop{ display:grid; grid-template-columns:minmax(0,42%) minmax(0,58%); gap:14px; align-items:start; } .tweetImage{ width:100%; aspect-ratio:1/1; border-radius:16px; overflow:hidden; background:linear-gradient(135deg,#283250,#324B6E); display:flex; align-items:center; justify-content:center; color:#D2C8B4; font-size:30px; } .tweetImage img{width:100%;height:100%;object-fit:cover} .tweetInfo{min-width:0} .tweetGameName{ font-size:22px; line-height:1.15; font-weight:900; color:#F7F3EA; word-break:break-word; margin-bottom:8px; } .tweetPrice{ display:inline-flex; align-items:center; background:#D2C8B4; color:#172039; border-radius:999px; padding:5px 9px; font-size:12px; font-weight:900; margin-bottom:10px; } .tweetRatings{display:flex;flex-direction:column;gap:7px} .tweetRatings .ratingBarRow{grid-template-columns:45px minmax(0,1fr) 28px;gap:5px} .tweetRatings .ratingBarLabel{font-size:9px} .tweetRatings .ratingBarTrack{height:10px} .tweetMeta{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:11px; } .tweetMetaItem{ background:rgba(40,50,80,.72); border:1px solid #3B496A; border-radius:11px; padding:8px; min-width:0; } .tweetMetaLabel{display:block;color:#BFB7AA;font-size:9px;font-weight:800;margin-bottom:3px} .tweetMetaItem strong{display:block;color:#F5F1E9;font-size:12px;overflow-wrap:anywhere} .tweetCommentWrap{border-top:1px solid #3C4968;margin-top:14px;padding-top:13px} .tweetCommentLabel{color:#D2C8B4;font-size:10px;font-weight:900;letter-spacing:.12em;margin-bottom:7px} .tweetComment{ width:100%; min-height:140px; background:#0F172A!important; color:#F5F1E9!important; border:1px solid #3A4867!important; border-radius:13px; padding:12px; line-height:1.6; resize:vertical; } @media(max-width:430px){ .tweetTop{grid-template-columns:40% 60%;gap:10px} .tweetGameName{font-size:18px} } #tweetDialog{ width:100vw!important; max-width:none!important; height:100vh!important; max-height:none!important; margin:0!important; border-radius:0!important; padding:0!important; background:#0B1225!important; } #tweetDialog::backdrop{background:#0B1225!important} #tweetDialog .tweetSheet{ width:100%; min-height:100vh; max-height:none!important; border-radius:0!important; background: radial-gradient(circle at top left,rgba(50,75,110,.26),transparent 32%), linear-gradient(160deg,#0B1225 0%,#111A31 54%,#211523 100%)!important; } #tweetDialog .sheethead{display:none!important} #tweetDialog .sheetbody{ padding:18px!important; overflow-y:auto!important; max-height:none!important; } #tweetDialog .tweetCard{ min-height:calc(100vh - 36px); border-radius:20px; } #tweetDialog .tweetMeta{ grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; } #tweetDialog .tweetMetaItem{ min-width:0; } @media(max-width:430px){ #tweetDialog .tweetMeta{ grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; } } /* Tweet mode — detail-screen based */ #tweetDialog .tweetCard{ background:linear-gradient(180deg,#202A47 0%,#1B233C 58%,#171D31 100%)!important; border:1px solid #394665!important; border-radius:20px!important; padding:14px!important; box-shadow:0 10px 28px rgba(0,0,0,.28)!important; } #tweetDialog .tweetTop{ display:grid!important; grid-template-columns:minmax(0,40%) minmax(0,60%)!important; gap:14px!important; align-items:start!important; } #tweetDialog .tweetImage{ width:100%!important; aspect-ratio:1/1!important; border-radius:14px!important; overflow:hidden!important; background:linear-gradient(135deg,#283250,#324B6E)!important; } #tweetDialog .tweetImage img{ width:100%!important; height:100%!important; object-fit:cover!important; } #tweetDialog .tweetGameName{ font-size:22px!important; font-weight:900!important; line-height:1.2!important; color:#F7F3EA!important; margin:0 0 9px!important; } #tweetDialog .tweetPrice{ display:block!important; background:transparent!important; color:#F4F0E8!important; border-radius:0!important; padding:0 0 8px!important; margin:0!important; font-size:13px!important; font-weight:800!important; border-bottom:1px solid #394665!important; } #tweetDialog .tweetRatings{ margin-top:11px!important; gap:8px!important; } #tweetDialog .tweetRatings .ratingBarRow{ grid-template-columns:52px minmax(0,1fr) 30px!important; gap:5px!important; } #tweetDialog .tweetRatings .ratingBarLabel{ font-size:10px!important; color:#C8C0B4!important; } #tweetDialog .tweetRatings .ratingBarTrack{ height:12px!important; background:#111A32!important; border:1px solid #31405F!important; } #tweetDialog .tweetMeta{ display:grid!important; grid-template-columns:1fr!important; gap:0!important; margin-top:12px!important; border-top:1px solid #394665!important; } #tweetDialog .tweetMetaItem{ display:grid!important; grid-template-columns:92px minmax(0,1fr)!important; align-items:center!important; gap:8px!important; background:transparent!important; border:0!important; border-bottom:1px solid #394665!important; border-radius:0!important; padding:9px 0!important; } #tweetDialog .tweetMetaLabel{ color:#C8C0B4!important; font-size:12px!important; font-weight:700!important; } #tweetDialog .tweetMetaItem strong{ color:#F4F0E8!important; font-size:14px!important; font-weight:900!important; text-align:left!important; } #tweetDialog .tweetTags{ display:flex!important; flex-wrap:wrap!important; gap:6px!important; margin-top:10px!important; } #tweetDialog .tweetTag{ font-size:11px!important; padding:5px 8px!important; border-radius:999px!important; } #tweetDialog .tweetCommentWrap{ margin-top:16px!important; padding-top:14px!important; border-top:1px solid #394665!important; } #tweetDialog .tweetCommentLabel{ color:#D2C8B4!important; font-size:12px!important; font-weight:900!important; letter-spacing:0!important; margin-bottom:7px!important; } #tweetDialog .tweetComment{ min-height:145px!important; background:#11182B!important; color:#EDE8DF!important; border:1px solid #303D59!important; border-radius:12px!important; padding:11px!important; line-height:1.55!important; } @media(max-width:430px){ #tweetDialog .tweetTop{ grid-template-columns:minmax(0,38%) minmax(0,62%)!important; gap:10px!important; } #tweetDialog .tweetGameName{ font-size:18px!important; } } /* Tweet mode: use more horizontal space */ #tweetDialog .sheetbody{ padding-left:8px!important; padding-right:8px!important; } #tweetDialog .tweetCard{ width:100%!important; max-width:none!important; margin:0!important; padding:12px!important; } #tweetDialog .tweetTop{ grid-template-columns:minmax(0,43%) minmax(0,57%)!important; gap:10px!important; } #tweetDialog .tweetInfo{ width:100%!important; min-width:0!important; } #tweetDialog .tweetRatings .ratingBarRow{ grid-template-columns:48px minmax(0,1fr) 28px!important; } @media(max-width:430px){ #tweetDialog .sheetbody{ padding-left:4px!important; padding-right:4px!important; } #tweetDialog .tweetCard{ padding:10px!important; border-radius:16px!important; } #tweetDialog .tweetTop{ grid-template-columns:minmax(0,42%) minmax(0,58%)!important; gap:8px!important; } } /* iPhone safe-area support Keep the safe area inside the header so its added height remains part of normal document flow and never overlaps the first cards. */ body{ padding-top:0!important; } /* v435：貼り付けるのをやめたので top は効かない（position:static）。落とす。 上の余白は残す——ノッチの下へ題を押し下げているのはこちらで、 流れる中身の一部として高さを持ち続ける。 */ header{ padding-top:calc(14px + env(safe-area-inset-top))!important; } dialog:not(.lightboxDialog){ padding-top:env(safe-area-inset-top)!important; } #tweetDialog{ padding-top:env(safe-area-inset-top)!important; height:calc(100vh - env(safe-area-inset-top))!important; } #tweetDialog .tweetSheet{ min-height:calc(100vh - env(safe-area-inset-top))!important; } /* Tweet mode: use the space under the image */ #tweetDialog .tweetTop{ display:grid!important; grid-template-columns:minmax(0,42%) minmax(0,58%)!important; grid-template-areas: "image info" "leftExtra info"!important; gap:10px!important; align-items:start!important; } #tweetDialog .tweetImage{ grid-area:image!important; } #tweetDialog .tweetInfo{ grid-area:info!important; } #tweetDialog .tweetLeftExtra{ grid-area:leftExtra!important; display:flex!important; flex-direction:column!important; gap:9px!important; min-width:0!important; } #tweetDialog .tweetLeftExtra .tweetMeta{ display:grid!important; grid-template-columns:1fr!important; gap:0!important; margin-top:0!important; border-top:1px solid #394665!important; } #tweetDialog .tweetLeftExtra .tweetMetaItem{ grid-template-columns:82px minmax(0,1fr)!important; padding:8px 0!important; } #tweetDialog .tweetLeftExtra .tweetTags{ margin-top:0!important; } @media(max-width:430px){ #tweetDialog .tweetTop{ grid-template-columns:minmax(0,42%) minmax(0,58%)!important; grid-template-areas: "image info" "leftExtra info"!important; } } /* Tweet mode: players/time left, tags right */ #tweetDialog .tweetLeftExtra{ display:grid!important; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr)!important; gap:10px!important; align-items:start!important; width:100%!important; } #tweetDialog .tweetLeftExtra .tweetMeta{ margin:0!important; display:grid!important; grid-template-columns:1fr!important; gap:0!important; border-top:1px solid #394665!important; } #tweetDialog .tweetLeftExtra .tweetMetaItem{ grid-template-columns:82px minmax(0,1fr)!important; padding:8px 0!important; } #tweetDialog .tweetLeftExtra .tweetTags{ margin:0!important; display:flex!important; flex-wrap:wrap!important; gap:6px!important; align-content:flex-start!important; justify-content:flex-start!important; } @media(max-width:430px){ #tweetDialog .tweetLeftExtra{ grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr)!important; gap:8px!important; } #tweetDialog .tweetLeftExtra .tweetMetaItem{ grid-template-columns:72px minmax(0,1fr)!important; padding:7px 0!important; } } /* Tweet mode: strict two-column lower info area */ #tweetDialog .tweetLeftExtra{ display:grid!important; grid-template-columns:minmax(0, 150px) minmax(0, 1fr)!important; column-gap:16px!important; align-items:start!important; width:100%!important; margin-top:8px!important; } #tweetDialog .tweetLeftExtra .tweetMeta{ grid-column:1!important; width:100%!important; margin:0!important; display:block!important; border-top:1px solid #394665!important; } #tweetDialog .tweetLeftExtra .tweetMetaItem{ display:grid!important; grid-template-columns:1fr!important; gap:3px!important; padding:9px 0!important; border:0!important; border-bottom:1px solid #394665!important; background:transparent!important; border-radius:0!important; min-width:0!important; } #tweetDialog .tweetLeftExtra .tweetMetaLabel{ font-size:11px!important; line-height:1.25!important; white-space:normal!important; } #tweetDialog .tweetLeftExtra .tweetMetaItem strong{ font-size:14px!important; line-height:1.2!important; white-space:normal!important; overflow-wrap:anywhere!important; } #tweetDialog .tweetLeftExtra .tweetTags{ grid-column:2!important; width:100%!important; min-width:0!important; margin:0!important; padding:0!important; display:flex!important; flex-wrap:wrap!important; gap:8px!important; align-content:flex-start!important; justify-content:flex-start!important; } #tweetDialog .tweetLeftExtra .tweetTag{ max-width:100%!important; white-space:normal!important; overflow-wrap:anywhere!important; } @media(max-width:430px){ #tweetDialog .tweetLeftExtra{ grid-template-columns:minmax(0, 136px) minmax(0, 1fr)!important; column-gap:12px!important; } } /* Tweet mode fix: The lower info row must span BOTH top columns. Left = players/time, Right = tags. */ #tweetDialog .tweetTop{ display:grid!important; grid-template-columns:minmax(0,42%) minmax(0,58%)!important; grid-template-areas: "image info" "leftExtra leftExtra"!important; gap:10px!important; align-items:start!important; } #tweetDialog .tweetImage{ grid-area:image!important; } #tweetDialog .tweetInfo{ grid-area:info!important; min-width:0!important; } #tweetDialog .tweetLeftExtra{ grid-area:leftExtra!important; display:grid!important; grid-template-columns:minmax(0, 145px) minmax(0, 1fr)!important; column-gap:16px!important; align-items:start!important; width:100%!important; min-width:0!important; margin-top:8px!important; } #tweetDialog .tweetLeftExtra .tweetMeta{ grid-column:1!important; width:100%!important; min-width:0!important; margin:0!important; } #tweetDialog .tweetLeftExtra .tweetTags{ grid-column:2!important; width:100%!important; min-width:0!important; margin:0!important; display:flex!important; flex-wrap:wrap!important; gap:8px!important; align-content:flex-start!important; justify-content:flex-start!important; } #tweetDialog .tweetLeftExtra .tweetTag{ width:auto!important; max-width:100%!important; white-space:normal!important; overflow-wrap:normal!important; word-break:keep-all!important; } @media(max-width:430px){ #tweetDialog .tweetTop{ grid-template-columns:minmax(0,42%) minmax(0,58%)!important; grid-template-areas: "image info" "leftExtra leftExtra"!important; } #tweetDialog .tweetLeftExtra{ grid-template-columns:minmax(0, 132px) minmax(0, 1fr)!important; column-gap:12px!important; } } /* Modal scrolling fix: keep each dialog inside the visible iPhone viewport and let .sheetbody be the single flexible vertical scroll area. */ dialog:not(#tweetDialog):not(#photoLightboxDialog){ padding-top:0!important; max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px)!important; } dialog:not(#tweetDialog):not(#photoLightboxDialog) .sheet{ height:auto!important; max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px)!important; min-height:0!important; overflow:hidden!important; } dialog:not(#tweetDialog):not(#photoLightboxDialog) .sheethead{ flex:0 0 auto!important; } dialog:not(#tweetDialog):not(#photoLightboxDialog) .sheetbody{ flex:1 1 auto!important; min-height:0!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; overscroll-behavior-y:contain!important; padding-bottom:calc(18px + env(safe-area-inset-bottom))!important; } dialog:not(#tweetDialog):not(#photoLightboxDialog) .sheetfoot{ flex:0 0 auto!important; } /* 100dvh fallback for older engines */ @supports not (height:100dvh){ dialog:not(#tweetDialog):not(#photoLightboxDialog), dialog:not(#tweetDialog):not(#photoLightboxDialog) .sheet{ max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px)!important; } } /* 「この日に遊んだゲームを選ぶ」だけは、**高さを止める**（v408）。 さむわんの実機報告：「テキストボックスに文字を入力するとボックスが下がる。 検索されて選択肢が減り、ダイアログそのものが小さくなることでテキスト ボックスが下にズレるのではないか。」——そのとおりだった。 実測（50件）：打つと 高さ 648→317、検索欄の上 146→311（165px 下がる）。 絞るのは打ちながらなので、**指を置いた欄そのものが逃げていく。** 上の規則が全部の画面に height:auto を掛けている。ここはそれを上書きする ので、**同じ形の選択子に ID を足してある**（:not() の2つは詳細度を揃える ためで、この画面では常に真だ）。max-height と同じ値を height に入れる＝ 許された高さいっぱいで固定する。中では .sheetbody だけが伸び縮みするので、 一覧が短くなっても外枠は動かない。 開発室も同じ形にした（v415）。Q を開くと中身が増えて外枠が伸び、真ん中に 置かれているので**上下の余りが減った分だけ画面ごと動く。**さむわんの報告 そのままだ。最初から許された高さいっぱいで開いておけば、中の .sheetbody が 伸びるだけで外枠は動かない。 */ dialog#playPickDialog:not(#tweetDialog):not(#photoLightboxDialog) .sheet, dialog#devRoomDialog:not(#tweetDialog):not(#photoLightboxDialog) .sheet{ height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px)!important; } @supports not (height:100dvh){ dialog#playPickDialog:not(#tweetDialog):not(#photoLightboxDialog) .sheet, dialog#devRoomDialog:not(#tweetDialog):not(#photoLightboxDialog) .sheet{ height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px)!important; } } /* Tweet mode: fit within one iPhone screen */ #tweetDialog{ height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important; max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important; overflow:hidden!important; } #tweetDialog .tweetSheet{ height:100%!important; min-height:0!important; max-height:100%!important; overflow:hidden!important; } #tweetDialog .sheetbody{ height:100%!important; min-height:0!important; max-height:100%!important; overflow:hidden!important; padding:6px 8px 8px!important; } #tweetDialog .tweetCard{ height:100%!important; min-height:0!important; max-height:100%!important; overflow:hidden!important; padding:10px!important; } #tweetDialog .tweetTop{ gap:8px 10px!important; margin:0!important; } #tweetDialog .tweetImage{ max-height:31vh!important; } #tweetDialog .tweetGameName{ font-size:18px!important; line-height:1.15!important; margin-bottom:5px!important; } #tweetDialog .tweetPrice{ font-size:11px!important; padding-bottom:5px!important; } #tweetDialog .tweetRatings{ margin-top:6px!important; gap:5px!important; } #tweetDialog .tweetRatings .ratingBarRow{ grid-template-columns:46px minmax(0,1fr) 26px!important; gap:4px!important; } #tweetDialog .tweetRatings .ratingBarLabel{ font-size:9px!important; } #tweetDialog .tweetRatings .ratingBarTrack{ height:9px!important; } #tweetDialog .tweetLeftExtra{ margin-top:4px!important; column-gap:12px!important; } #tweetDialog .tweetLeftExtra .tweetMetaItem{ padding:6px 0!important; } #tweetDialog .tweetLeftExtra .tweetMetaLabel{ font-size:10px!important; } #tweetDialog .tweetLeftExtra .tweetMetaItem strong{ font-size:13px!important; } #tweetDialog .tweetLeftExtra .tweetTags{ gap:5px!important; } #tweetDialog .tweetLeftExtra .tweetTag{ padding:4px 7px!important; font-size:9px!important; line-height:1.05!important; } #tweetDialog .tweetCommentWrap{ margin-top:8px!important; padding-top:8px!important; } #tweetDialog .tweetCommentLabel{ font-size:10px!important; margin-bottom:4px!important; } #tweetDialog .tweetComment{ min-height:90px!important; height:90px!important; max-height:90px!important; resize:none!important; padding:8px!important; font-size:13px!important; line-height:1.35!important; } @media(max-width:430px){ #tweetDialog .tweetImage{ max-height:29vh!important; } #tweetDialog .tweetGameName{ font-size:17px!important; } #tweetDialog .tweetComment{ min-height:82px!important; height:82px!important; max-height:82px!important; } } @supports not (height:100dvh){ #tweetDialog{ height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important; max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important; } } /* Tweet mode: hard horizontal containment */ /* ここも v457 で降ろした。**html/body に書けばビューポートへ伝播する**ので、 上で降ろしても**この行が勝って、伝播をひとりで復活させていた。** v434 で hidden→clip を直したときと同じ形の取りこぼしだ（あのときは !important でこちらが勝っていた）。 */ html,body{ max-width:100%!important; } header,main{ max-width:100%!important; overflow-x:hidden!important; overflow-x:clip!important; } #tweetDialog{ width:100%!important; max-width:100%!important; left:0!important; right:0!important; margin:0!important; box-sizing:border-box!important; overflow-x:hidden!important; } #tweetDialog, #tweetDialog *, #tweetDialog *::before, #tweetDialog *::after{ box-sizing:border-box!important; } #tweetDialog .tweetSheet, #tweetDialog .sheetbody, #tweetDialog .tweetCard, #tweetDialog .tweetTop, #tweetDialog .tweetInfo, #tweetDialog .tweetLeftExtra, #tweetDialog .tweetMeta, #tweetDialog .tweetTags, #tweetDialog .tweetCommentWrap{ width:100%!important; max-width:100%!important; min-width:0!important; overflow-x:hidden!important; } #tweetDialog .sheetbody{ padding-left:8px!important; padding-right:8px!important; } #tweetDialog .tweetCard{ margin:0!important; } #tweetDialog .tweetTop{ grid-template-columns:minmax(0,42%) minmax(0,58%)!important; } #tweetDialog .tweetImage{ width:100%!important; max-width:100%!important; min-width:0!important; } #tweetDialog .tweetGameName, #tweetDialog .tweetPrice, #tweetDialog .tweetRatings, #tweetDialog .ratingBarRow{ width:100%!important; max-width:100%!important; min-width:0!important; } #tweetDialog .tweetGameName{ overflow-wrap:anywhere!important; word-break:break-word!important; } #tweetDialog .tweetLeftExtra{ grid-template-columns:minmax(0,132px) minmax(0,1fr)!important; } #tweetDialog .tweetTag{ flex:0 1 auto!important; max-width:100%!important; } #tweetDialog .tweetComment{ width:100%!important; max-width:100%!important; } /* Prevent iOS Safari from auto-zooming form fields */ @media (max-width: 768px){ input, select, textarea, button{ font-size:16px!important; } #tweetDialog .tweetComment{ font-size:16px!important; } } /* Tweet comment: minimum 3 lines, auto-grow to show all text */ #tweetDialog .tweetComment{ min-height:84px!important; height:auto!important; max-height:none!important; overflow-y:hidden!important; resize:none!important; } /* Tweet mode: readable tags + truly auto-growing comment */ #tweetDialog .tweetLeftExtra .tweetTag, #tweetDialog .tweetTag{ font-size:12px!important; line-height:1.25!important; padding:6px 9px!important; font-weight:900!important; } #tweetDialog .tweetComment{ min-height:84px!important; height:auto!important; max-height:none!important; overflow-y:hidden!important; resize:none!important; } /* Tweet mode: slightly larger typography overall */ #tweetDialog .tweetGameName{ font-size:20px!important; } #tweetDialog .tweetPrice{ font-size:13px!important; } #tweetDialog .tweetRatings .ratingBarLabel{ font-size:11px!important; } #tweetDialog .tweetRatings .ratingBarRow > :last-child{ font-size:12px!important; } #tweetDialog .tweetLeftExtra .tweetMetaLabel{ font-size:12px!important; } #tweetDialog .tweetLeftExtra .tweetMetaItem strong{ font-size:15px!important; } #tweetDialog .tweetLeftExtra .tweetTag, #tweetDialog .tweetTag{ font-size:13px!important; line-height:1.3!important; padding:6px 10px!important; } #tweetDialog .tweetCommentLabel{ font-size:12px!important; } #tweetDialog .tweetComment{ font-size:17px!important; line-height:1.45!important; } /* Tweet ratings: label on its own line, bar underneath */ #tweetDialog .tweetRatings{ gap:8px!important; } #tweetDialog .tweetRatings .ratingBarRow{ display:grid!important; grid-template-columns:minmax(0,1fr) 32px!important; grid-template-rows:auto auto!important; column-gap:7px!important; row-gap:4px!important; align-items:center!important; } #tweetDialog .tweetRatings .ratingBarLabel{ grid-column:1 / -1!important; grid-row:1!important; font-size:12px!important; line-height:1.15!important; white-space:nowrap!important; } #tweetDialog .tweetRatings .ratingBarTrack{ grid-column:1!important; grid-row:2!important; width:100%!important; height:10px!important; } #tweetDialog .tweetRatings .ratingBarValue{ grid-column:2!important; grid-row:2!important; font-size:12px!important; line-height:1!important; text-align:right!important; } /* Tweet meta: label and value on one line */ #tweetDialog .tweetLeftExtra .tweetMetaItem{ display:grid!important; grid-template-columns:auto minmax(0,1fr)!important; align-items:baseline!important; column-gap:10px!important; padding:7px 0!important; } #tweetDialog .tweetLeftExtra .tweetMetaLabel{ font-size:12px!important; line-height:1.2!important; white-space:nowrap!important; } #tweetDialog .tweetLeftExtra .tweetMetaItem strong{ font-size:15px!important; line-height:1.2!important; text-align:left!important; white-space:nowrap!important; } #collageDialog{ width:min(94vw,760px); max-width:760px; } #collageDialog .collageSheet{ max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); } .collageControls{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; } .collageControls label{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:#D2C8B4; font-weight:800; } .collageControls select{ width:100%; } .collageControls .btn{ grid-column:1/-1; } /* v428：コラージュモードは分析の道具の行へ移した。**全幅をやめ、字の幅に合わせる。** ID 指定なので、行の側でいくら並べ方を書いても width:100% には勝てない （実際に勝てず、行が丸ごと1つ分の幅になっていた）。 保存ボタン（コラージュの画面の中）は全幅のまま。 */ #openCollageBtn{ width:auto; /* 左右は 12px。16px のままだと 320px の端末で 4px 足りず、 「コラージュモー…」と省略された（実測）。 */ padding:11px 12px; font-weight:800; } #saveCollageBtn{ width:100%; padding:11px 16px; font-weight:800; } #closeGenreManagerBtn,#bookGenreManagerClose,#videoGameGenreManagerClose,#movieGenreManagerClose,#closeCollageBtn{ width:42px; height:42px; padding:0; display:inline-grid; place-items:center; flex:0 0 42px; } .collagePreviewWrap{ width:100%; background:#0B1225; border:1px solid #394665; border-radius:14px; padding:8px; margin-bottom:10px; } /* v529：縦横比は canvas の width/height 属性（形の選択で変わる）に任せる。aspect-ratio:1/1 を書いていると 縦長・横長の頁が正方形に潰れて映る */ #collageCanvas{ display:block; width:100%; height:auto; background:#10182B; border-radius:10px; } .collagePager{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; margin-bottom:10px; } .collagePager .secondary{ min-width:86px; padding:9px 14px; font-weight:800; } .collagePager .secondary:disabled{ opacity:.38; cursor:default; } .collagePageInfo{ text-align:center; color:#D2C8B4; font-weight:800; font-size:13px; } .collageNote{ margin-top:8px; font-size:11px; line-height:1.4; } @media(max-width:560px){ .collageControls{ grid-template-columns:1fr 1fr; } .collageControls label:last-of-type{ grid-column:1/-1; } } #collageDialog .collageSheet{ display:flex!important; flex-direction:column!important; overflow:hidden!important; } #collageDialog .sheethead{ flex:0 0 auto!important; position:sticky!important; top:0!important; z-index:3!important; } #collageDialog .collageBody{ flex:1 1 auto!important; min-height:0!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; padding-bottom:calc(18px + env(safe-area-inset-bottom))!important; } #genreManagerDialog{ width:min(92vw,560px); max-width:560px; } #genreManagerDialog .genreManagerSheet{ max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 18px); } #genreManagerDialog .sheetbody{ overflow-y:auto; -webkit-overflow-scrolling:touch; } .genreAddRow{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; } .genreAddRow .btn{width:auto;white-space:nowrap} .genreManagerHelp{font-size:11px;margin:8px 0 12px} .genreManagerList{ display:flex; flex-direction:column; gap:8px; } .genreManagerRow{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:7px; align-items:center; background:#202A47; border:1px solid #394665; border-radius:12px; padding:8px; } .genreManagerRow input{min-width:0;width:100%} .genreManagerRow button{ width:auto!important; white-space:nowrap; padding:7px 9px!important; } /* ▲▼ stack sits in its own narrow column at the row's left edge, so the name field and 保存/削除 keep their places as rows move. */ .reorderControls{display:flex;flex-direction:column;gap:3px} .genreManagerRow .reorderBtn{ width:30px!important; padding:3px 0!important; font-size:10px!important; line-height:1.3; border-radius:8px!important; } .genreManagerRow .reorderBtn[disabled]{opacity:.3} .genreDeleteBtn{ border-color:#7B3653!important; color:#F4DCE5!important; } .genreManagerEmpty{ text-align:center; color:#9DA8BB; padding:20px 8px; font-size:13px; } .photoAddRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .photoAddRow .photoPickBtn{width:auto;flex:1;min-width:140px} /* #bggSearchBtn also carries the .photoPickBtn class so it shares the exact same box model (padding/display/alignment) - giving it a parallel but separate rule instead produced a taller button even with identical-looking properties, for reasons that didn't trace back to any single declaration. Only its sizing differs here: content-based width instead of an even flex:1 split, since "🔍BGGで探す" doesn't fit a 50/50 share at narrow widths and would otherwise wrap to two lines. */ .photoAddRow>#bggSearchBtn{flex:0 0 auto;min-width:auto;white-space:nowrap} .bggSearchSheet{max-width:480px} .bggPausedNote{font-size:14px;line-height:1.8;margin:4px 0 16px} /* Flex rather than fixed grid columns: either filter button can be hidden by the 表示設定, and a hidden grid item leaves the rest to slide into columns that were sized for their neighbours. With flex the survivors simply take the freed space. */ .playerFilterControl{ display:flex; gap:8px; } /* 人数とジャンルは同じ幅。待機中はどちらも単語だけ（「人数」「ジャンル」）で、 指定中は値を出す。以前は「人数：すべて」が入りきらず「人数：す...」になっていた。 */ #playerFilterButton,#genreFilterButton, #collagePlayerFilterButton,#collageGenreFilterButton{flex:1 1 0} /* プレイ時間（v494）も人数・タグと同じ幅 */ #playTimeFilterButton,#collagePlayTimeFilterButton{flex:1 1 0} .playTimeFilterNote{color:var(--muted);font-size:12px} .playerFilterButton{ min-width:0; min-height:42px; font-weight:800; /* Two filter buttons now share the row, so a long tag name has to ellipsize rather than widen the column and push クリア off the screen. */ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .filtersClearButton{flex:0 0 auto;min-width:74px;font-weight:800} .playerFilterButton.active{ color:#F2E5BC!important; border-color:#81704A!important; background:#3B3528!important; } .playerCountField,.playerFilterSheet .sheetbody{gap:10px} .playerRangeValue{ color:#E8DFC9; font-size:27px; font-weight:900; text-align:center; margin:4px 0 2px; } .dualRange{ --range-left:0%; --range-right:100%; position:relative; height:42px; margin:0 12px; } .dualRangeTrack{ position:absolute; left:0; right:0; top:18px; height:8px; border-radius:999px; background:#34415F; overflow:hidden; } .dualRangeFill{ position:absolute; left:var(--range-left); width:calc(var(--range-right) - var(--range-left)); top:0; bottom:0; background:linear-gradient(90deg,#C0B69E,#E2D9C4); } .dualRange input[type="range"]{ -webkit-appearance:none!important; appearance:none!important; position:absolute; inset:0; width:100%!important; height:42px!important; margin:0!important; padding:0!important; border:0!important; background:transparent!important; pointer-events:none; touch-action:none!important; } .dualRange input[type="range"]::-webkit-slider-runnable-track{ height:8px; background:transparent; } .dualRange input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:30px; height:30px; margin-top:-11px; border-radius:50%; border:4px solid #E3DAC5; background:#1C2744; box-shadow:0 2px 9px rgba(0,0,0,.42); pointer-events:auto; } .dualRange input[type="range"]::-moz-range-track{height:8px;background:transparent} .dualRange input[type="range"]::-moz-range-thumb{ width:23px;height:23px;border-radius:50%;border:4px solid #E3DAC5;background:#1C2744;pointer-events:auto } .dualRange .rangeMin{z-index:2} .dualRange .rangeMax{z-index:3} .dualRange.isExclusive .rangeMax{display:none} /* 対象年齢が「わからない」のとき。枠と文字を落として、選べていないのではなく わからないを選んである状態だと一目で分かるようにする。色味はスライダーの .isUnknown と同系統。 */ /* !important throughout: the theme sets input,select,textarea{border/background/ color ...!important} further down, and an important declaration beats this rule's ID on its own. Without it only the text colour would change and the frame would stay at full strength. */ /* 対象年齢のスライダー（v492）。「わからない」のあいだは年齢の数字ではなく「わからない」と出し、薄くする */ /* v493：⭕️ごと薄くするとバーが透けて見える（さむわん）。薄くするのはバーだけにし、⭕️は不透明のまま 縁を灰色にする。プレイ時間の .dualRange.isUnknown と同じ作り */ .targetAgeRow.isUnknown .ratingSliderTrack{opacity:.35} .targetAgeRow.isUnknown input[type="range"]:disabled{opacity:1!important} .targetAgeRow.isUnknown input[type="range"]::-webkit-slider-thumb{border-color:#7B8291;background:#1C2744;box-shadow:none} .targetAgeRow.isUnknown input[type="range"]::-moz-range-thumb{border-color:#7B8291;background:#1C2744} .targetAgeRow.isUnknown .ratingSliderValue{color:#7B8291} .dualRange.isUnknown .dualRangeTrack{background:#3D4964} .dualRange.isUnknown .dualRangeFill{background:linear-gradient(90deg,#777A82,#8B8E96)} .dualRange.isUnknown input[type="range"]:disabled{opacity:1!important} .dualRange.isUnknown input[type="range"]::-webkit-slider-thumb{border-color:#7B8291;background:#1C2744;box-shadow:none} .dualRange.isUnknown input[type="range"]::-moz-range-thumb{border-color:#7B8291;background:#1C2744;box-shadow:none} .playerRangeScale{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:2px; color:#BDB7AB; font-size:10px; text-align:center; } .playerRangeScale span:last-child{font-size:9px;white-space:nowrap} .playerRangeScaleTen{grid-template-columns:repeat(10,minmax(0,1fr));font-size:9px} /* 人数を「一旦空欄」にしたとき、目盛りも一緒に引っ込める（v439）。 溝だけ灰色にして 1〜10 の数字がくっきり残っていると、 **空欄にしたはずなのに人数が決まっているように見える。** */ .playerRangeScale.isUnknown{opacity:.45} .exclusiveCheck{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:8px; color:#F4F0E8; font-size:14px; } .exclusiveCheck input,.playerMatchModes input{width:auto!important;margin:0} .exclusiveCheck small{color:#AFA99E;font-size:11px} .exclusiveCheck.isDisabled{color:#777F91;opacity:.55} .exclusiveCheck.isDisabled small{color:#777F91} #playerFilterDialog{width:min(620px,calc(100vw - 16px))} .playerFilterSheet{max-height:90vh} .playerMatchModes{display:grid;gap:8px;margin-top:20px} .playerMatchModes label{ display:flex; align-items:center; gap:9px; padding:12px; border:1px solid #4A5A7C; border-radius:12px; color:#F4F0E8; font-size:13px; } .playerMatchModes label span{display:flex;flex-direction:column;gap:3px} .playerMatchModes label strong{font-size:13px} .playerMatchModes label small{color:#B8B2A7;font-size:10px;line-height:1.4} .categorySwitch{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px; min-height:44px;margin:0 0 10px;padding:9px 13px;border:1px solid #4A5A7C;border-radius:13px; background:linear-gradient(135deg,#202A47,#172036);color:#F4F0E8;font-weight:900;text-align:left } .categorySwitch span{color:#BEB6A7;font-size:18px} .categoryDialog{width:min(560px,calc(100vw - 20px))} .categorySheet{background:linear-gradient(160deg,#111A31 0%,#18213A 55%,#24172A 100%)!important} .categoryChoices{display:grid;gap:12px} .categoryChoice{ width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px; padding:16px;border:1px solid #394665;border-radius:17px;background:#18213A;color:#F4F0E8;text-align:left } .categoryChoice.active{border-color:#927F55;background:linear-gradient(135deg,#242E4D,#2D283A);box-shadow:0 0 0 1px rgba(223,197,129,.14) inset} .categoryChoiceIcon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#253250;font-size:25px} .categoryChoice>span:nth-child(2){display:flex;flex-direction:column;gap:4px} .categoryChoice strong{font-size:17px}.categoryChoice small{color:#B9B2A5;font-size:12px}.categoryChoice b{font-size:27px;color:#9C9383} .categoryChoice.locked{opacity:.62} .categoryLockBadge{color:#DFC581!important;font-weight:700} .movieOnly[hidden]{display:none!important} .movieThumb{aspect-ratio:2/3;background:linear-gradient(150deg,#111A31,#24172A)} .movieThumb img{object-fit:cover} .chip.movieGenre{background:#342C45;color:#CFBCE7;border:1px solid #524267} .movieBar{background:linear-gradient(90deg,#7B042D,#D2C8B4)} .movieEmptyAnalysis{padding:18px 0 4px;color:#AFA99E;font-size:13px} .movieDetailPlaceholder{display:grid;place-items:center;aspect-ratio:16/9;margin-bottom:14px;border-radius:14px;background:linear-gradient(145deg,#111A31,#2B1D31);font-size:54px} .movieFacts{margin-top:16px} .singleRatingGraph{display:flex;flex-direction:column;gap:6px;margin:4px 0 2px} .singleRatingHead{display:flex;align-items:baseline;justify-content:space-between;color:#D9D2C5;font-size:11px;font-weight:800} .singleRatingHead strong{font-size:17px;color:#F1E5BF}.singleRatingHead small{font-size:10px;color:#AAA395} .ratingBarFill.movieScore,.ratingBarFill.videoGameScore{background:linear-gradient(90deg,#324B6E,#D2C8B4)} .detailSingleRating{margin:15px 0}.detailSingleRating .ratingBarTrack{height:14px}.detailSingleRating .singleRatingHead strong{font-size:23px} .videoGameOnly[hidden]{display:none!important} .videoGameThumb{aspect-ratio:4/3;background:linear-gradient(145deg,#10182B,#1C2845)} .videoGameThumb img{object-fit:cover} .chip.videoGameGenre{background:#25334F;color:#C4D4F0;border:1px solid #40557D} .videoGameBar{background:linear-gradient(90deg,#324B6E,#7B042D)} .bookOnly[hidden]{display:none!important} .bookThumb{aspect-ratio:2/3;background:linear-gradient(145deg,#111A31,#17343A)} .bookThumb img{object-fit:cover} .chip.bookGenre{background:#243B42;color:#D8E9E8;border:1px solid #3B626B} .ratingBarFill.bookScore,.bookBar{background:linear-gradient(90deg,#324B6E,#2F7A83)} .playSuggestionLead{color:var(--muted);line-height:1.7;margin-bottom:14px} .playSuggestionControls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px} .playSuggestionField{display:flex;flex-direction:column;gap:6px} .playSuggestionFieldLabel{font-weight:700} /* 太郎セレクトの人数・時間スライダーはゲーム登録画面の評価スライダー (.ratingSlider*) をそのまま再利用しており、専用のCSSはボタンの disabled表現のみ - 登録画面のスライダーは0〜10専用でこだわらない に相当する無効状態を持たないため、この属性は元のCSSになかった。 */ .ratingSliderBtn:disabled{opacity:.35} .playSuggestionPickBtn{width:100%;justify-content:center} .playSuggestionIntro{margin:18px 0 10px;color:var(--muted);line-height:1.6} .playSuggestionResults{display:grid;gap:12px} .playSuggestionCard{display:grid;grid-template-columns:96px 1fr;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--card)} .playSuggestionPhoto{width:96px;height:100%;min-height:128px;object-fit:cover;background:#ECE7DC} .playSuggestionPlaceholder{display:flex;align-items:center;justify-content:center;font-size:34px} .playSuggestionCardBody{min-width:0;padding:12px;display:flex;flex-direction:column;gap:10px} .playSuggestionName{font-size:17px;font-weight:800;line-height:1.35;overflow-wrap:anywhere} .playSuggestionViewBtn{align-self:flex-start} .playSuggestionAgainBtn{width:100%;margin-top:14px;justify-content:center} .playSuggestionEmpty{text-align:center;padding:26px 10px;color:var(--muted);line-height:1.7} .playSuggestionEmptyIcon{font-size:42px;margin-bottom:8px} @media(max-width:430px){.playSuggestionControls{grid-template-columns:1fr}.playSuggestionCard{grid-template-columns:84px 1fr}.playSuggestionPhoto{width:84px}} /* Freeze the page behind every native dialog. Do not set touch-action:none here: .sheetbody must retain native one-finger scrolling on iOS. */ html.modalBackgroundLocked, body.modalBackgroundLocked{overflow:hidden!important;overscroll-behavior:none!important} /* **body に position:fixed を書かない**（v459）。 書くと body の層が top:-（送っていた量）px ぶんずれ、貼りついているはずの 下のバーが一緒に上がる。さむわんの端末で、ズレが「保存した送り量」と 1ピクセルも違わず一致した（1279 と 214、2回とも）。app.js の lockModalBackgroundScroll にいきさつを書いてある。 */ #tweetDialog,#tweetDialog .tweetSheet,#tweetDialog .sheetbody{overscroll-behavior:contain} /* 非表示にした項目をツイートモードから消すための最終ガード。 属性セレクタを3回重ねて詳細度を (0,1,3,0) まで上げているのは意図的。 このダイアログには #tweetDialog .tweetLeftExtra .tweetMeta{display:grid!important} のような「id 1 + クラス 2」(0,1,2,0) のルールが多数あり、 #tweetDialog [hidden] (0,1,1,0) では詳細度で負けてしまう。 詳細度は記述順より先に評価されるため、ファイル末尾へ置いても勝てない。 ここを弱めると、一部の項目だけを隠したときに hidden 属性が付いたまま 表示され続ける（全項目を隠した場合は祖先ごと消えるため気付けない）。 */ #tweetDialog [hidden][hidden][hidden]{display:none!important} /* ───── v542：プレイ履歴の改装 ───── さむわん：「プレイ履歴を見栄えよく。全画面表示や装飾などを使い、使ってて楽しい、を意識して改装」（2026-09-29）。 全画面にするのは class="fullSheetDialog" の画面だけ。共通の「画面より少し小さい枠」（上の Modal scrolling fix）より 詳細度を1つ上げて上書きする（コラージュと同じ流儀）。安全域（ノッチ・下の線）は頭と中身の余白で逃がす。 */ dialog.fullSheetDialog:not(#tweetDialog):not(#photoLightboxDialog){ width:100vw!important;max-width:100vw!important; height:100dvh!important;max-height:100dvh!important; margin:0!important;border-radius:0!important;box-shadow:none!important; } dialog.fullSheetDialog:not(#tweetDialog):not(#photoLightboxDialog) .sheet{ height:100dvh!important;max-height:100dvh!important;border-radius:0!important; background:#081436!important; } @supports not (height:100dvh){ dialog.fullSheetDialog:not(#tweetDialog):not(#photoLightboxDialog), dialog.fullSheetDialog:not(#tweetDialog):not(#photoLightboxDialog) .sheet{height:100vh!important;max-height:100vh!important} } dialog.fullSheetDialog .sheethead{ padding-top:calc(12px + env(safe-area-inset-top))!important; padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right)); background:#0b1a44!important;border-bottom-color:rgba(217,165,102,.28)!important; } dialog.fullSheetDialog .sheetbody{ padding-left:max(14px,env(safe-area-inset-left))!important;padding-right:max(14px,env(safe-area-inset-right))!important; } /* 広い画面（iPad）では中身を真ん中の1列に */ #allPlayHistoryBody>*{max-width:680px;margin-left:auto;margin-right:auto} /* 頭の帯：これまでの記録 */ .phHero{position:relative;overflow:hidden;border-radius:20px;padding:18px 16px 16px;margin-bottom:14px;color:#fff; background:linear-gradient(135deg,#7B042D 0%,#A32953 58%,#C8743A 135%);box-shadow:0 12px 30px rgba(123,4,45,.35)} .phHero::after{content:"🎲";position:absolute;right:-10px;top:-18px;font-size:104px;opacity:.13;transform:rotate(14deg);pointer-events:none} .phHeroLabel{font-size:12px;font-weight:800;letter-spacing:.14em;opacity:.88} .phHeroStats{display:flex;gap:20px;margin-top:6px;align-items:flex-end;flex-wrap:wrap} .phStat b{font-size:34px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums} .phStat span{font-size:12px;font-weight:800;margin-left:3px;opacity:.9} .phHeroTop{margin-top:10px;font-size:13px;line-height:1.55;opacity:.96} .phHeroTop b{font-weight:900} .phHeroActions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap} .phHeroActions button{flex:1 1 auto;width:auto!important;margin:0!important;border-radius:999px!important;padding:9px 14px!important; background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.38)!important;color:#fff!important;font-weight:800!important; font-size:14px!important;box-shadow:none!important} /* 年と月の札 */ .phChips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .phChips::-webkit-scrollbar{display:none} .phChip{flex:0 0 auto;border-radius:999px;padding:7px 14px;font-size:14px!important;font-weight:800; border:1px solid #3d4b6e;background:#162452;color:#c9cfdd} .phChip.on{background:#D9A566;border-color:#D9A566;color:#2a1d0b} .phCountLine{font-size:12px!important;font-weight:700!important;color:#9aa3b8;margin:8px auto 4px!important;padding:0 2px} /* 月の見出し（読みながら上に貼りつく） */ .phMonth{margin-bottom:6px} .phMonthHead{position:sticky;top:-14px;z-index:1;display:flex;align-items:center;gap:10px;margin:6px 0 10px;padding:10px 2px; font-size:16px;font-weight:900;color:#F3E6D0;background:#081436} .phMonthHead::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(217,165,102,.55),rgba(217,165,102,0))} .phMonthCount{font-size:11px;font-weight:900;color:#2a1d0b;background:#D9A566;border-radius:999px;padding:2px 9px;order:2} .phMonthHead::after{order:3} /* 年表：左に日付、右にカード。日付の丸を縦の線でつなぐ */ .phEntry{display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px;position:relative;margin-bottom:12px} .phEntry::before{content:"";position:absolute;left:22px;top:48px;bottom:-12px;width:2px; background:linear-gradient(rgba(217,165,102,.45),rgba(217,165,102,.08))} .phEntry:last-child::before{display:none} .phWhen{display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:46px;border-radius:15px; background:linear-gradient(160deg,#243565,#16244f);border:1px solid rgba(217,165,102,.4);line-height:1} .phDay{font-size:19px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums} .phWeek{font-size:10px;font-weight:800;color:#b9c1d6;margin-top:3px} .phWeek.phSat{color:#8cbcff} .phWeek.phSun{color:#ff93a4} #allPlayHistoryBody .phCard{margin:0;border-radius:16px;padding:12px 12px 4px;background:linear-gradient(170deg,#1c2a57,#142047); border:1px solid #2f3f6c;box-shadow:0 8px 20px rgba(0,0,0,.28)} .phCardHead{display:flex;gap:12px;align-items:center} .phArt{flex:0 0 54px;width:54px;height:54px;border-radius:12px;object-fit:cover;background:#26345f;display:flex;align-items:center; justify-content:center;font-size:27px;box-shadow:0 3px 10px rgba(0,0,0,.35)} .phArtFree{background:linear-gradient(135deg,#4a2f6e,#8a4f9a)} .phTitles{min-width:0;flex:1} #allPlayHistoryBody .playHistoryEntryGameName{font-size:16px;font-weight:900;margin:0;line-height:1.35;overflow-wrap:anywhere;color:#fff} .phSub{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:3px;font-size:12px;color:#aab3c8} #allPlayHistoryBody .phSub .playHistoryEntryDate{font-weight:700} #allPlayHistoryBody .playHistoryEntryPlayers{margin-top:10px} .phNote{position:relative;margin-top:12px!important;padding:9px 12px;border-radius:12px;background:#2c2418;color:#F3E6D0; font-size:13px!important;line-height:1.6;border:1px solid #5A4626} .phNote::before{content:"";position:absolute;left:18px;top:-6px;width:10px;height:10px;background:#2c2418; border-left:1px solid #5A4626;border-top:1px solid #5A4626;transform:rotate(45deg)} #allPlayHistoryBody .playHistoryPhotoStrip2{margin-top:10px} .phActions{display:flex;justify-content:flex-end;gap:2px;margin-top:2px} .phTextBtn{background:none!important;border:0!important;box-shadow:none!important;color:#9aa3b8!important; font-size:13px!important;font-weight:700;padding:6px 10px!important;min-height:0!important;line-height:1.4;border-radius:8px} .phTextBtn.phDanger{color:#e98a9a!important} .phEmpty{padding:40px 16px!important;text-align:center;line-height:1.8;color:#aab3c8} .phEmpty small{display:block;margin-top:6px;font-size:12px} .phEmptyIcon{font-size:44px;margin-bottom:6px} @media (prefers-reduced-motion:no-preference){ .phEntry{animation:phIn .35s ease both} @keyframes phIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} } /* ───── v543：ふりかえり ───── さむわん：「振り返り機能で、プレイ履歴をつけることの意味を補強する」（2026-09-29）。 全画面の枠はプレイ履歴（v542）と同じ fullSheetDialog。札（.phChip）も借りる。 */ #lookbackBody>*{max-width:680px;margin-left:auto;margin-right:auto} .phHeroActions .phLookbackBtn{background:#D9A566!important;border-color:#D9A566!important;color:#2a1d0b!important} .lbChips{margin-bottom:8px} .lbHero{position:relative;overflow:hidden;border-radius:22px;padding:20px 18px 18px;margin-bottom:16px;color:#2a1d0b; background:radial-gradient(120% 140% at 100% 0%,#F6DDB0 0%,#D9A566 48%,#B9793A 100%);box-shadow:0 14px 34px rgba(217,165,102,.25)} .lbHero::after{content:"📖";position:absolute;right:-6px;bottom:-22px;font-size:110px;opacity:.14;transform:rotate(-10deg);pointer-events:none} .lbHeroLabel{font-size:20px;font-weight:900;letter-spacing:.04em} .lbHeroStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:10px 12px;margin-top:12px} .lbStat{display:flex;flex-direction:column;line-height:1.1} .lbStat b{font-size:34px;font-weight:900;font-variant-numeric:tabular-nums} .lbStat span{font-size:12px;font-weight:800;opacity:.82;margin-top:3px} .lbAgo{border-radius:16px;padding:12px 14px;margin-bottom:16px;background:#2c2418;border:1px solid #5A4626;color:#F3E6D0} .lbAgoLabel{font-size:12px;font-weight:900;letter-spacing:.12em;color:#D9A566;margin-bottom:6px} .lbAgoRow{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:4px 0} .lbAgoYears{font-size:12px;font-weight:900;color:#2a1d0b;background:#D9A566;border-radius:999px;padding:1px 8px} .lbAgoName{font-weight:900;overflow-wrap:anywhere} .lbAgoDate{font-size:12px;color:#c9b99c} .lbSection{margin-bottom:22px} .lbHead{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:16px;font-weight:900;color:#F3E6D0} .lbHead::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(217,165,102,.55),rgba(217,165,102,0));order:3} .lbHeadCount{order:2;font-size:11px;font-weight:900;color:#2a1d0b;background:#D9A566;border-radius:999px;padding:2px 9px} .lbArt{flex:0 0 auto;width:64px;height:64px;border-radius:14px;object-fit:cover;background:#26345f;display:flex;align-items:center; justify-content:center;font-size:30px;box-shadow:0 4px 12px rgba(0,0,0,.35)} .lbArt.lbArtBig{width:84px;height:84px;font-size:40px;border:2px solid #D9A566} .lbArt.lbArtSmall{width:44px;height:44px;border-radius:10px;font-size:22px} /* 表彰台：2位・1位・3位の順に並べ、1位を高く */ .lbPodium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:end} .lbPodium1{grid-template-columns:minmax(0,1fr)} .lbPodium2{grid-template-columns:repeat(2,minmax(0,1fr))} .lbPlace{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:12px 6px 12px;border-radius:16px; background:linear-gradient(170deg,#1c2a57,#142047);border:1px solid #2f3f6c;min-width:0} .lbPodium3 .lbPlace1{order:2;padding-top:18px;padding-bottom:22px} .lbPodium3 .lbPlace2{order:1} .lbPodium3 .lbPlace3{order:3} .lbPlace1{border-color:#D9A566;box-shadow:0 10px 26px rgba(217,165,102,.18)} .lbMedal{font-size:24px;line-height:1} .lbPlaceName{font-size:13px;font-weight:900;color:#fff;line-height:1.35;overflow-wrap:anywhere} .lbPlaceCount{font-size:12px;color:#aab3c8} .lbPlaceCount b{font-size:18px;color:#F3E6D0;margin-right:1px;font-variant-numeric:tabular-nums} /* 棒 */ .lbBars{display:flex;align-items:stretch;gap:4px;height:130px;padding:6px 2px 0;border-bottom:1px solid #2f3f6c} .lbBar{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative;padding-bottom:18px} .lbBarFill{width:100%;max-width:26px;border-radius:6px 6px 2px 2px;background:linear-gradient(#3f5796,#26386a)} .lbPeak .lbBarFill{background:linear-gradient(#F6DDB0,#D9A566)} .lbBarNum{font-size:10px;font-weight:800;color:#aab3c8;margin-bottom:3px;font-variant-numeric:tabular-nums;min-height:12px} .lbPeak .lbBarNum{color:#D9A566} .lbBarName{position:absolute;bottom:0;font-size:10px;font-weight:800;color:#8f98ae;white-space:nowrap} .lbNote{margin:10px 0 0;font-size:13px;color:#c9cfdd} .lbNote b{color:#F3E6D0} .lbHint{margin:0;padding:12px 14px;border-radius:14px;border:1px dashed #3d4b6e;color:#aab3c8;font-size:13px;line-height:1.6} /* 人 */ .lbPeople{display:flex;flex-wrap:wrap;gap:8px} .lbPerson{display:inline-flex;align-items:baseline;gap:6px;padding:7px 12px;border-radius:999px;background:#162452;border:1px solid #3d4b6e} .lbPerson b{color:#fff;font-size:14px} .lbPerson small{color:#D9A566;font-weight:800;font-size:12px} .lbWins{list-style:none;margin:0;padding:0;display:grid;gap:6px} .lbWins li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;background:#142047;border:1px solid #2f3f6c} .lbWins li:first-child{border-color:#D9A566;background:linear-gradient(90deg,rgba(217,165,102,.18),#142047 70%)} .lbWinRank{width:26px;text-align:center;font-weight:900;color:#aab3c8} .lbWinName{flex:1;min-width:0;font-weight:900;color:#fff;overflow-wrap:anywhere} .lbWinNum{white-space:nowrap;color:#aab3c8;font-size:12px} .lbWinNum b{font-size:17px;color:#F3E6D0;margin-right:1px} /* はじめて遊んだ */ .lbFirsts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px} .lbFirst{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;background:#142047;border:1px solid #2f3f6c;min-width:0} .lbFirst>div{min-width:0} .lbFirstName{font-weight:900;color:#fff;font-size:14px;line-height:1.35;overflow-wrap:anywhere} .lbFirstDate{font-size:11px;color:#aab3c8;margin-top:2px} .lbFacts{list-style:none;margin:0;padding:0;display:grid;gap:8px} .lbFacts li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;color:#c9cfdd} .lbFacts b{color:#F3E6D0} .lbFactIcon{flex:0 0 auto} .lbClosing{margin:6px auto 26px!important;padding:18px 16px;border-radius:18px;text-align:center;background:#2c2418;border:1px solid #5A4626;color:#F3E6D0} .lbClosing p{margin:0;font-size:15px;font-weight:800;line-height:1.7} .lbClosing small{display:block;margin-top:8px;color:#c9b99c;font-size:12px} .lbEmpty{padding:40px 12px;text-align:center;line-height:1.8;color:#c9cfdd} .lbEmpty b{color:#F3E6D0;font-size:16px} .lbEmpty p{font-size:13px;margin:10px 0 0} .lbEmptyIcon{font-size:48px;margin-bottom:6px} /* ───── v544：コラージュの並べ方 ───── 「並べ方」は操作の頭に1行で置く（2列の画面でも、最後の「画質」の全幅と並びを崩さないように） */ #collageDialog .collageControls .collageLayoutLabel{grid-column:1/-1} /* v545：大きさを変える並べ方では列数を自動で決める。選択は触れないので薄く、横に決めた列数 */ #collageDialog .collageGridAuto{color:#D9A566;font-weight:800;margin-left:2px} #collageDialog #collageGrid:disabled{opacity:.5}