/* Sällskap 2.0: layout. Laddas efter sallskap.css och ändrar bara utseende/placering, aldrig element-ID:n. */

html:has(#game-screen:not(.gone)), body.v2:has(#game-screen:not(.gone)){overflow:hidden}

/* ---------- Skärmen: varelsen är hjälten ---------- */
body.v2 #game-screen{
  height:100vh; height:100dvh; min-height:0; max-width:520px; margin:0 auto; padding:0;
  align-items:stretch; justify-content:flex-start; gap:0; overflow:hidden;
}
body.v2 .top-bar{max-width:none; margin:0; padding:max(10px,env(safe-area-inset-top)) 14px 4px}
body.v2 #pet-name-display{font-size:17px; font-weight:800; letter-spacing:-.01em}
body.v2 .meta-row{max-width:none; justify-content:flex-start; flex-wrap:nowrap; gap:5px; margin:0; padding:0 14px 4px; overflow:hidden}
body.v2 .meta-chip{padding:3px 9px; font-size:11px; white-space:nowrap}
body.v2 #level-row{max-width:none; margin:0; padding:0 14px 6px; gap:8px}

/* ---------- Scenen ---------- */
body.v2 #creature-wrap{
  flex:1 1 38vh; width:100%; max-width:none; height:auto; min-height:0; max-height:480px;
  margin:0; padding:0 10px 4px; align-items:flex-end; justify-content:center;
}
body.v2 #room-svg{
  left:10px; top:0; width:calc(100% - 20px); height:calc(100% - 4px);
  transform:none; border-radius:26px;
}
body.v2 #creature-float{margin-bottom:6%}
body.v2 #creature-svg{width:clamp(220px,66vw,320px); height:clamp(220px,66vw,320px)}
body.v2 #daily-gift{top:12px; right:22px}

/* ---------- Texten under scenen: en sak i taget ---------- */
body.v2 #pet-say{
  max-width:none; width:auto; margin:8px 14px 0; padding:9px 14px; gap:3px; border-radius:16px;
  min-height:0; font-size:13px;
}
body.v2 #pet-say > p{margin:0; line-height:1.4}
body.v2 #pet-say #wish-line{font-size:12px; opacity:.85}

/* Korten (hälsa, bortavaro, besökare, nyhet): bara det viktigaste, först i listan, syns i taget */
body.v2 #notice-zone{display:block; margin:0}
body.v2 #notice-zone > :not(.gone){margin:8px 14px 0; width:auto; max-width:none}
body.v2 #notice-zone > :not(.gone) ~ :not(.gone){display:none}
body.v2 #notice-zone > #health-warn:not(.gone){padding:9px 14px; border-radius:14px; font-size:12.5px; line-height:1.4; text-align:center}

/* ---------- Dockan: mätare + vård + meny ---------- */
body.v2 #dock{
  margin-top:auto; flex:0 0 auto; display:flex; flex-direction:column; gap:8px;
  padding:10px 14px max(12px,env(safe-area-inset-bottom));
}
body.v2 #stats-wrap{max-width:none; width:100%; margin:0; flex-direction:row; gap:10px}
body.v2 .stat-row{flex:1; flex-direction:column; align-items:stretch; gap:4px; min-width:0}
body.v2 .stat-label{width:auto; text-align:left; font-size:10px; letter-spacing:.1em}
body.v2 .stat-bar{display:block; flex:none; width:100%; height:9px; min-width:0; border-radius:5px; background:rgba(255,255,255,.12)}
body.v2 .stat-fill{border-radius:5px}
body.v2 .stat-word{display:none}

body.v2 #actions-wrap{max-width:none; width:100%; margin:0; gap:8px}
body.v2 .action-btn{
  flex:1; min-width:0; padding:11px 2px 9px; gap:4px; border-radius:20px; font-size:11px;
  touch-action:manipulation;
}
body.v2 .action-icon{font-size:22px}
body.v2 #menu-btn{
  flex:0 0 58px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:11px 2px 9px; border-radius:20px; cursor:pointer; font-family:inherit; font-size:11px; font-weight:700;
  color:rgba(255,255,255,.82); background:rgba(92,158,255,.12); border:1px solid rgba(92,158,255,.3);
  touch-action:manipulation;
}
body.v2 #menu-btn .mb-ic{font-size:20px; line-height:1}
body.v2 #menu-btn[aria-expanded=true]{background:rgba(92,158,255,.24); color:#fff}
body.v2 .action-btn:active:not(:disabled), body.v2 #menu-btn:active{transform:scale(.95)}

/* ---------- Menyn som ett ark ---------- */
#menu-backdrop{position:fixed; inset:0; z-index:150; background:rgba(0,0,0,.5)}
#menu-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:151; max-width:520px; margin:0 auto;
  max-height:82dvh; overflow-y:auto; overscroll-behavior:contain;
  padding:10px 14px max(18px,env(safe-area-inset-bottom));
  background:var(--card-bg,#14171f); border:1px solid var(--border,rgba(255,255,255,.1)); border-bottom:none;
  border-radius:26px 26px 0 0; box-shadow:0 -14px 40px rgba(0,0,0,.4);
  transform:translateY(100%); transition:transform .22s ease-out;
}
#menu-sheet.open{transform:none}
#menu-sheet .sheet-grip{width:42px; height:4px; border-radius:2px; background:rgba(255,255,255,.22); margin:0 auto 12px}
#menu-sheet .tile-grid{max-width:none; margin:0 0 4px}
#menu-sheet #walk-btn{max-width:none; margin:0 0 10px}
#menu-sheet #exp-mount{max-width:none}
#menu-sheet #backup-row{margin:14px 0 0 !important; padding:0 !important}
#menu-sheet #tomorrow-hint{margin:0 0 10px; text-align:center}
@media (prefers-reduced-motion:reduce){#menu-sheet{transition:none}}

/* Mjukare sköna effekter (billigare än tidigare): ingen stor blur på mobil */
@media (max-width:700px){
  .amb-orb{display:none}
  #toast, .overlay-backdrop{backdrop-filter:none; -webkit-backdrop-filter:none}
}

/* Låg skärm */
@media (max-height:640px){
  body.v2 #creature-wrap{min-height:200px}
  body.v2 #creature-svg{width:clamp(150px,42vw,200px); height:clamp(150px,42vw,200px)}
  body.v2 .action-btn{padding:8px 2px 6px}
}

/* SV/EN-växlaren ligger i menyn i stället för ovanpå rubrikraden */
body.v2:has(#game-screen:not(.gone)) .nl-lang{display:none}
#menu-sheet .sheet-lang{display:flex; justify-content:center; gap:8px; margin-top:14px; font-size:12px}
#menu-sheet .sheet-lang a{padding:6px 14px; border-radius:999px; border:1px solid var(--border); color:rgba(255,255,255,.7); text-decoration:none; font-weight:700}
#menu-sheet .sheet-lang a.on{background:var(--accent,#5c9eff); color:#08111f; border-color:transparent}

#menu-sheet .sheet-today{display:flex; flex-direction:column; gap:6px; margin-bottom:10px; text-align:center}
#menu-sheet .sheet-today p{margin:0; font-size:12.5px; line-height:1.45; color:rgba(255,255,255,.75)}
#menu-sheet .sheet-today p:empty{display:none}

/* Rörelsen styrs av js/sallskap-life.js: stäng av de gamla stela loopparna */
body.v2 #cr-body{animation:none!important}
body.v2 .eye-wrap{animation:none!important}
body.v2 #creature-float.anim-float, body.v2 #creature-float.anim-walkbob{animation:none}
body.v2 #creature-svg{will-change:transform}
body.v2 #creature-wrap{touch-action:none; -webkit-touch-callout:none}

/* Pratbubbla */
#pet-talk{
  position:absolute; left:50%; top:9%; z-index:6; max-width:min(78%,260px); padding:9px 14px;
  transform:translate(-50%,6px) scale(.92); opacity:0; pointer-events:none;
  background:#fff; color:#1c2233; border-radius:18px; font-size:13.5px; font-weight:700; line-height:1.35; text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28); transition:opacity .22s, transform .28s cubic-bezier(.2,1.4,.4,1);
}
#pet-talk::after{content:""; position:absolute; left:50%; bottom:-7px; width:14px; height:14px; background:#fff; transform:translateX(-50%) rotate(45deg); border-radius:3px}
#pet-talk.show{opacity:1; transform:translate(-50%,0) scale(1)}
body.light-theme #pet-talk{box-shadow:0 6px 18px rgba(30,40,80,.2)}
@media (prefers-reduced-motion:reduce){#pet-talk{transition:opacity .15s; transform:translate(-50%,0)}}

/* Språkväxlaren göms i spelet utan att förlita sig på :has() */
body.v2.in-game .nl-lang{display:none}

/* Prick på Meny när något väntar där (varelsen är ute, eller har kommit hem med en påse) */
body.v2 #menu-btn{position:relative}
body.v2.pet-away #menu-btn::after, body.v2.exp-home #menu-btn::after{
  content:""; position:absolute; top:6px; right:9px; width:10px; height:10px; border-radius:50%;
  background:#ffcf6b; box-shadow:0 0 0 2px rgba(0,0,0,.35); animation:menuDot 1.6s ease-in-out infinite;
}
@keyframes menuDot{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@media (prefers-reduced-motion:reduce){body.v2.pet-away #menu-btn::after, body.v2.exp-home #menu-btn::after{animation:none}}

/* Kompaktare kort så scenen får plats */
body.v2 #visitor-card, body.v2 #away-card{padding:8px 12px; gap:10px; border-radius:16px}
body.v2 #visitor-card .vc-sub{display:none}

/* Inget får lämna scenen, oavsett vad rörelsemotorn gör */
body.v2 #creature-wrap{overflow:hidden; overflow:clip; overflow-clip-margin:36px}

/* ---------- Uppdrag ---------- */
.q-rank{padding:12px 14px; border-radius:16px; background:rgba(92,158,255,.1); border:1px solid rgba(92,158,255,.25); margin-bottom:6px}
.q-rank b{font-size:15px; margin-right:8px}
.q-rank span{font-size:12px; opacity:.75}
.q-rank small{display:block; margin-top:5px; font-size:11px; opacity:.7}
.q-h{margin:16px 2px 8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.7}
.q-row{display:flex; align-items:center; gap:10px; padding:11px 12px; margin-bottom:8px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09)}
.q-row.ready{border-color:rgba(255,207,107,.7); background:rgba(255,207,107,.1)}
.q-row.claimed{opacity:.5}
.q-main{flex:1; min-width:0}
.q-name{font-size:13.5px; font-weight:700; line-height:1.35; margin-bottom:6px}
.q-step{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.6; margin-bottom:3px}
.q-bar{height:7px; border-radius:4px; background:rgba(255,255,255,.12); overflow:hidden}
.q-bar i{display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#5c9eff,#8fd0ff); transition:width .4s ease}
.q-row.ready .q-bar i{background:linear-gradient(90deg,#ffcf6b,#ffe3a0)}
.q-sub{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; font-size:11.5px}
.q-sub > span:first-child{opacity:.75; margin-right:2px}
.q-rew{padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.08); font-size:11px; font-weight:700}
.q-rew.final{background:rgba(255,207,107,.2); color:#ffe3a0}
.q-claim{flex:0 0 auto; padding:9px 14px; border:0; border-radius:999px; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; background:#ffcf6b; color:#2a1f08}
.q-claim:disabled{background:rgba(255,255,255,.1); color:rgba(255,255,255,.4); cursor:default}
.q-done{flex:0 0 auto; font-size:20px; color:#7ee787; padding:0 6px}
.q-bonus{font-size:12px; text-align:center; opacity:.75; margin:2px 0 4px}
.q-empty,.q-titles{font-size:12.5px; opacity:.75; margin:4px 2px}
.q-row.story .q-name{font-weight:600; font-size:13px}
/* Indikator: något väntar på att hämtas */
body.v2.quest-ready #menu-btn::after{
  content:""; position:absolute; top:6px; right:9px; width:10px; height:10px; border-radius:50%;
  background:#7ee787; box-shadow:0 0 0 2px rgba(0,0,0,.35); animation:menuDot 1.6s ease-in-out infinite;
}
body.v2.pet-away.quest-ready #menu-btn::after, body.v2.exp-home.quest-ready #menu-btn::after{background:#ffcf6b}
#link-quests{position:relative}
#link-quests[data-ready]:not([data-ready=""])::after{
  content:attr(data-ready); position:absolute; top:4px; right:6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:#7ee787; color:#08210f; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
@media (prefers-reduced-motion:reduce){body.v2.quest-ready #menu-btn::after{animation:none}}
body.v2 #rank-chip{background:rgba(255,207,107,.12); border-color:rgba(255,207,107,.3); color:#ffe3a0}

/* Toasten måste synas även när en panel (t.ex. Uppdrag) är öppen */
body.v2 #toast{z-index:260}
.q-name{overflow-wrap:anywhere}
.q-claim{white-space:nowrap}
#menu-sheet .sheet-today #quest-line.done{color:#7ee787}

/* Ljust tema */
body.light-theme .q-rank{background:rgba(40,100,220,.08); border-color:rgba(40,100,220,.25)}
body.light-theme .q-row{background:rgba(20,30,45,.05); border-color:rgba(20,30,45,.12)}
body.light-theme .q-row.ready{background:rgba(214,150,0,.12); border-color:rgba(190,125,0,.6)}
body.light-theme .q-bar{background:rgba(20,30,45,.14)}
body.light-theme .q-rew{background:rgba(20,30,45,.08)}
body.light-theme .q-rew.final{background:rgba(214,150,0,.18); color:#7a4f00}
body.light-theme .q-claim:disabled{background:rgba(20,30,45,.1); color:rgba(20,30,45,.4)}
body.light-theme .q-done{color:#126b3a}
body.light-theme #rank-chip{background:rgba(214,150,0,.14); border-color:rgba(190,125,0,.35); color:#7a4f00}
body.light-theme #menu-sheet .sheet-today p{color:#4a5470}
body.light-theme #menu-sheet .sheet-today #quest-line.done{color:#126b3a}

/* ===== Små skärmar: allt ska synas och gå att scrolla till ===== */
html:has(#game-screen:not(.gone)), body.v2:has(#game-screen:not(.gone)){overflow:visible}
body.v2{--stage-h:clamp(250px,44dvh,480px)}
body.v2 #game-screen{height:auto; min-height:100vh; min-height:100dvh; overflow:visible}   /* en enda scroll: sidan fortsätter ner till texten under spelet */
body.v2 .top-bar, body.v2 .meta-row, body.v2 #level-row, body.v2 #pet-say, body.v2 #notice-zone, body.v2 #dock{flex-shrink:0}
body.v2 #creature-wrap{flex:0 0 auto; height:var(--stage-h); min-height:0; max-height:none}
body.v2 #creature-svg{width:min(clamp(200px,66vw,320px), calc(var(--stage-h) - 24px)); height:min(clamp(200px,66vw,320px), calc(var(--stage-h) - 24px))}
@media (max-height:640px){
  body.v2 #creature-svg{width:min(clamp(200px,66vw,320px), calc(var(--stage-h) - 24px)); height:min(clamp(200px,66vw,320px), calc(var(--stage-h) - 24px))}
  body.v2 .action-btn{padding:9px 2px 7px}
}
/* En bubbla i taget: spelets emoji-bubbla tystnar medan pratbubblan visas */
body.v2.talking #pet-bubble{display:none}

/* Chips under namnet (dag, stadie, personlighet, dagar i rad, Dela, rang): bryt till ny rad i stället för att klippas */
body.v2 .meta-row{flex-wrap:wrap; overflow:visible; row-gap:5px; justify-content:flex-start}
body.v2 .meta-row .meta-chip{flex:0 0 auto; max-width:100%}
body.v2 .meta-row .meta-streak{flex-wrap:nowrap}
body.v2 .meta-row .streak-share-btn{flex:0 0 auto}