/* ark_postpet.css — 8/11 由 ARK_POSTPET.html 抽出的 <style>(原封不動) */
 *{margin:0;padding:0;box-sizing:border-box}
 html,body{height:100%;overflow:hidden;background:#0a0c12;font-family:"Noto Serif TC",serif;color:#e8d4a0}
 .wrap{position:fixed;inset:0;display:flex;flex-direction:column}
 .top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;padding:8px 14px;font-size:13px}
 .topright{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:0;margin-left:auto}
 .trrow{display:flex;align-items:center;gap:6px;white-space:nowrap}
 #home_pick{max-width:calc(100% - 32px);flex-shrink:0;margin:8px auto;text-align:center}
 #home_pick.open{width:calc(100% - 32px);max-width:980px;padding:8px 10px;border:1.5px dashed #c9a24b;border-radius:16px}
 #home_pick_options[hidden]{display:none}
 #home_pick_options{margin-top:8px}
 #home_pick_toggle,#home_pick_confirm{min-height:36px;padding:6px 16px;font-size:14px}
 #home_pick_confirm{margin-top:6px}
 #home_pick_title{font-size:12px;color:#e8c060;letter-spacing:1px;text-align:center;margin-bottom:6px}
 .picker{display:grid;grid-template-columns:repeat(10,max-content);gap:6px 8px;overflow-x:auto;padding:2px 0 6px}
 .picker button{cursor:pointer;font-size:24px;min-width:46px;touch-action:manipulation}
 .picker button.on{background:#4a3a20;border-color:#c9a24b;filter:drop-shadow(0 0 8px #ffd98a)}
 /* 8/2 兔兔:18 隻見過一輪後整排變暗=換完了,要再玩就重開(現在這隻照樣亮著) */
 .picker.cool button{opacity:.35}.picker.cool button.on{opacity:1}
 @media(max-width:420px){.top{padding:8px 6px;gap:2px}.clock{font-size:11px;letter-spacing:0;padding:2px 4px}}
 #restart.hint{border-color:#ffd98a;animation:clkPulse 1.6s ease-in-out infinite}/* 換完一輪:鈕發亮告訴她往哪按 */
 /* 8/2 兔兔:「你沒說我沒看到 你可以放一下」=重開遊戲鈕放導覽那排(跟去戶外/去市區同款)。
    ⚠️ 舉手只換顏色不加字:那排 390px 剛好塞滿,加字會換行 */
 #restart.arm{border-color:#ffd98a;background:rgba(90,60,20,.75);animation:clkPulse 1.1s ease-in-out infinite}
 .clock{font-family:monospace;letter-spacing:1px;cursor:pointer;border-radius:11px;padding:2px 8px;white-space:nowrap;animation:clkPulse 2.6s ease-in-out infinite}/* 7/20 兔兔:地點呼吸發亮=提醒可以點它換城市/時間 */
 @keyframes clkPulse{0%,100%{text-shadow:0 0 3px rgba(255,217,138,.35);box-shadow:0 0 0 1px rgba(201,162,75,.20)}50%{text-shadow:0 0 11px rgba(255,217,138,.95);box-shadow:0 0 13px 1px rgba(201,162,75,.6)}}
 .stage{display:flex;justify-content:center;padding:0 8px;position:relative}/* 7/7 兔兔手機截圖:房間貼頂不再垂直置中(太低);7/18 position:relative=任務卡掛畫布頂端錨點 */
 canvas{border-radius:14px;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6));max-width:100%;max-height:100%}
 /* 7/28 兔兔:「電視我們不是有很多語音嗎…完全聽不到」→ 人聲之外一定要有字幕:
    手機靜音鍵/iOS 擋掉語音時,看字也知道電視在演什麼(跟真電視的字幕條同一個位置)
    7/28 晚 兔兔實機看過才定案(她先答「捲動字幕好、電視下方擺擺看」,擺了之後改主意——**以她看到的為準**):
      ①**位置回到畫面下方**——「還是覺得原本在下面比較好　字幕在電視下　有時候動物走過會被遮住」
      ②**不捲了、也不准截字**——「只顯示一部分字　另外一部分沒看到了　如果多行就顯示多行」
      ③「不要拉太長」→ 條子窄一點(≤330px),寧可換兩三行,不要拉成一長條。
    ⚠️ 別再改回跑馬燈/電視下方,這兩個她都親眼看過並否決了。 */
 #tvsub{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
   width:max-content;max-width:min(88%,330px);
   background:rgba(6,6,12,.74);color:#f4f2ea;
   font-size:12.5px;line-height:1.55;padding:5px 11px;border-radius:9px;
   text-align:center;letter-spacing:.4px;text-shadow:0 1px 2px #000;
   pointer-events:none;display:none;z-index:8;
   white-space:normal;overflow-wrap:break-word}
 .now{padding:6px 14px 5px;font-size:17px;color:#f0e6cc;text-align:center}/* 7/7 搬到房間上方+放大=一眼看到牠在幹嘛 */
 .now b{color:#c9a9e8;cursor:pointer;border-bottom:1px dashed #6a5a7c}
 .panel{flex:1;min-height:120px;background:rgba(10,8,14,.94);padding:8px 16px 12px;overflow-y:auto}/* 7/7 手機記事只剩2-3行→吃掉剩餘全部高度 */
 .feed{list-style:none;font-size:13px}
 .feed li{margin:5px 0;padding-left:50px;position:relative;color:#d8cfe4;line-height:1.5;animation:pop .4s}
 @keyframes pop{from{opacity:0;transform:translateY(5px)}}
 .feed .t{position:absolute;left:0;color:#8a7a6c;font-family:monospace;font-size:11px}
 .feed .e{position:absolute;left:26px}
 .feed li.for{color:#cfe0d0}.feed li.for:after{content:" ·幫你";color:#5a8;font-size:10px}
 .feed li.adv{color:#e8c88a}.feed li.adv:after{content:" ·出門";color:#c98;font-size:10px}
 .acts{margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:7px}
 button{background:#1a1a20;color:#e8c060;border:1px solid #6a5a2c;border-radius:16px;padding:4px 11px;font-family:inherit;font-size:12px;cursor:pointer}
 /* 7/18 兔兔:手機按鈕太多→三大類頁籤(像住宅)+點開展成框(像野外「所有動物參與」) */
 .cats{display:flex;gap:9px;justify-content:center}
 .cats .cattab{background:#241e30;border:1px solid #5a4a6c;color:#d8cfe4;border-radius:18px;
   padding:6px 20px;font-size:14.5px;letter-spacing:2px}
 .cats .cattab:hover{border-color:#c9a24b;color:#ffd98a}
 .cats .cattab.on{background:#4a3a20;border-color:#c9a24b;color:#ffd98a;font-weight:bold;
   box-shadow:0 0 8px rgba(201,162,75,.35)}
 .catwrap{width:100%;display:flex;justify-content:center}
 .catp{border:1px solid #5a4a2c;background:rgba(36,30,26,.5);border-radius:14px;
   padding:9px 11px;display:grid;gap:6px;
   width:min(100%,520px);animation:pop .22s}
 /* 7/28 兔兔:「字盡量改少一點,子按鈕排成兩排內」→改固定欄數的格子,手機直接鎖兩排(幫我6欄/陪牠4欄/說話4欄) */
 #catp-help{grid-template-columns:repeat(5,1fr)}/* 7/28 兔兔二輪:笑話/故事搬去說話→幫我剩10顆=5欄兩排,讀書作業那種四個字才放得下 */
 /* 9/22 加🧹打掃=11顆:5欄會多出第三排(她 7/28 定兩排內),6欄又會切到「讀書作業」四個字(她說不能縮),
    固定欄寬也會切到會變長的字(🫧洗衣中…/🍽開動中…/🥤喝著中…)⟹ 改 flex:寬度跟著字走,字變長那顆自己變寬、同排讓位。
    兩排=HTML 在「看外面」後面放一個 .rowbrk 換行點(上排 6 顆短字、下排 5 顆長字);欄距改用按鈕 margin(換行點才不會多吃一道 gap)。
    ⚠️ :not([hidden]) 不能拿掉:#id 的 display 會蓋過 .catp[hidden]{display:none},面板就收不起來 */
 #catp-help:not([hidden]){display:flex;flex-wrap:wrap;gap:0}
 #catp-help button{flex:1 1 auto;margin:3px}
 #catp-help .rowbrk{flex-basis:100%;height:0}
 #catp-help #trashbtn{flex-basis:100%}
 /* 垃圾桶滿了才冒出來的那顆=橫跨整排的金色提醒條(不擠掉兩排的隊形,倒完就消失) */
 #trashbtn{grid-column:1/-1}
 #catp-pet{grid-template-columns:repeat(4,1fr)}
 #catp-talk{grid-template-columns:repeat(6,1fr)}/* 說話收了笑話/故事/猜謎=11顆→6欄兩排(字都≤三個) */
 .catp button{white-space:nowrap;padding:4px 5px;overflow:hidden}
 @media(max-width:520px){.catp{padding:8px 6px;gap:4px}
   .catp button{font-size:11px;padding:4px 2px;letter-spacing:0}
   #catp-help button,#catp-talk button{font-size:10.5px;padding:4px 1px}
   #catp-help button{margin:2px 1.5px;padding:4px 0}}
 @media(max-width:370px){#catp-help button{font-size:10px;margin:2px 1px}}/* 9/22 360 寬:第一排同時出現「開動中…」「打掃完畢」這類長字時,10.5px 會擠成第三排;10px 肉眼看不出差 *//* 幫我5欄要塞「讀書作業」四個字、說話6欄最擠→手機都再縮一點才不會切到字 */
 .catp[hidden]{display:none}
 .navrow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:9px;justify-content:center;margin-top:1px}
 .homegames{border:1px dashed #c9a24b;border-radius:16px;background:#1a1a20;color:#e8c060;max-width:100%}
 .homegames summary{padding:5px 12px;cursor:pointer;font-size:12px}
 .homegames summary:focus-visible{outline:2px solid #ffd98a;outline-offset:3px;border-radius:16px}
 .homegames-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:5px 9px 9px}
 /* 7/15 兔兔:洗衣四段——輪到你按下一段時鈕要變色提示(跟市區美食街同一套語彙:金色會呼吸;牠正在做=灰掉鎖住) */
 @keyframes actglow{0%,100%{box-shadow:0 0 0 0 rgba(201,162,75,0)}50%{box-shadow:0 0 9px 2px rgba(201,162,75,.5)}}
 button.golden{border-color:#c9a24b;background:#4a3a20;color:#ffd98a;font-weight:bold;animation:actglow 1.05s ease-in-out infinite}
 button:disabled{opacity:.45;cursor:default;animation:none}
 /* 7/18 兔兔六改:任務卡=「橫向一排」放在狀態句(動物在做什麼那句大字)正下方,加框框——每項 名稱+★星星,
    吃飯=早午晚三星/陪牠·說話=做三件事三星/洗衣·娛樂·睡覺=一星;做到=星星亮金+名字轉金。只要一排,太窄可橫向捲 */
 #mealtask{margin:3px auto 5px;padding:4px 11px;max-width:96%;width:fit-content;
   border:1px solid #5a4a6c;background:rgba(20,16,28,.55);border-radius:12px;
   display:flex;align-items:center;gap:2px;white-space:nowrap;overflow-x:auto;
   font-family:inherit;user-select:none}
 #mealtask::-webkit-scrollbar{display:none}
 #mealtask .mt-lb{color:#8a7f6e;font-size:11px;margin-right:3px}/* 「任務:」 */
 #mealtask .mt-i{display:inline-flex;align-items:center;gap:2px;margin:0 5px;cursor:pointer}
 #mealtask .mt-nm{font-size:11px;color:#9a8f7e;transition:color .3s}
 #mealtask .mt-i.done .mt-nm{color:#ffd98a}
 #mealtask .mt-i:hover .mt-nm{color:#c9a24b}
 #mealtask .mt-stars{font-size:10px;letter-spacing:.5px;color:#463f55}
 #mealtask .mt-stars .on{color:#ffd98a;text-shadow:0 0 4px rgba(255,217,138,.6)}
 @media(max-width:820px){#mealtask{max-width:98%;padding:3px 8px}
   #mealtask .mt-lb{font-size:10px}#mealtask .mt-nm{font-size:10px}#mealtask .mt-i{margin:0 4px}}
 @keyframes candyflick{0%,100%{opacity:.32}50%{opacity:.72}}
 .say{margin-top:6px;display:flex;gap:6px}
 /* 7/13 兔兔:提示玩家可以講什麼——聊天引導chips(心事/不開心/生氣/開心/問問題/人格問卷) */
 .chips{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
 .chips button{border:1px solid #4a3a5c;background:#1c1626;color:#c8bcd8;border-radius:14px;
   padding:4px 10px;font-size:12px;font-family:inherit;cursor:pointer;letter-spacing:.5px}
 .chips button:hover{border-color:#c9a24b;color:#ffd98a}
 /* 7/13 兔兔:幫牠洗澡——浴缸上浮的小手提示(位置由 placeWashHand 依畫布換算) */
 #washhand{position:fixed;display:none;z-index:70;transform:translate(-50%,-100%);
   flex-direction:column;align-items:center;gap:1px;cursor:pointer;
   background:rgba(20,16,28,.78);border:1px solid #c9a24b;border-radius:12px;padding:6px 10px;
   animation:handbob 1.5s ease-in-out infinite}
 #washhand .he{font-size:22px}
 #washhand small{font-size:10px;color:#ffd98a;letter-spacing:1px;white-space:nowrap}
 @keyframes handbob{50%{margin-top:-7px}}
 .say input{flex:1;background:#14120a;border:1px solid #4a3a5c;border-radius:16px;padding:5px 11px;color:#e8d4a0;font-family:inherit;font-size:13px}
 .reply{color:#c9a9e8;font-size:13px;margin-top:5px;min-height:16px}