/* Layout: ブラウザの窓をまるごと描き、その中の「ページ」がペットの部屋。上のタブ列でペットのタブが鳴く */
:root{
  --desk:#c9ced6;
  --chrome:#dfe3e8;   /* タブ列 */
  --tab:#ffffff;
  --page:#f6f7f9;
  --ink:#1f2328;
  --muted:#5f6670;
  --pet:#7cc4ff;      /* タブっちの水色 */
  --pet-dark:#2f86d4;
  --blush:#ff9db0;
  --accent:#ffb703;
  --line:#c7ccd3;
  --f-ui:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;
  --f-pet:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--desk);color:var(--ink);font-family:var(--f-ui);padding-inline:16px;padding-block:14px 30px;min-height:100vh}
.top{max-width:980px;margin:0 auto 10px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.top a{color:var(--muted);text-decoration:none;font-size:.9rem}
.top a:hover{color:var(--ink)}
.top p{margin:0;color:var(--muted);font-size:.88rem}
.browser{max-width:980px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 20px 50px rgba(31,35,40,.25);background:var(--page)}
.tabstrip{background:var(--chrome);display:flex;align-items:flex-end;gap:2px;padding:8px 8px 0;overflow-x:auto;scrollbar-width:none}
.tabstrip::-webkit-scrollbar{display:none}
.tab{flex:0 1 220px;min-width:120px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px 10px 0 0;font-size:.84rem;color:var(--muted);cursor:pointer;position:relative;white-space:nowrap;user-select:none}
.tab:hover{background:rgba(255,255,255,.5)}
.tab.active{background:var(--tab);color:var(--ink)}
.tab img,.tab .fi{width:16px;height:16px;flex:none;display:grid;place-items:center;font-size:12px}
.tab .tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tab .x{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;color:var(--muted);transition:transform .25s}
.tab .x:hover{background:#e3e6ea}
#petX.flee{transform:translate(var(--fx,40px),var(--fy,-6px))}
.newtab{padding:6px 10px;color:var(--muted);font-size:1.1rem}
.toolbar{background:var(--tab);display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line)}
.toolbar .nav{color:var(--muted);letter-spacing:.4em;font-size:.95rem;flex:none}
.omni{flex:1;min-width:0;background:#eef1f4;border-radius:999px;padding:6px 14px;font-size:.88rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.omni .peek{position:absolute;right:10px;top:50%;translate:0 -50%;font-size:.8rem;cursor:pointer}
.view{min-height:520px;position:relative}
/* ペットの部屋 */
.room{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);min-height:520px}
@media (max-width:760px){.room{grid-template-columns:1fr}}
.stagearea{position:relative;min-height:420px;background:linear-gradient(#f6f7f9 0 62%,#e8ecf1 62%);overflow:hidden}
.stagearea::after{content:"";position:absolute;left:0;right:0;top:62%;height:2px;background:#d7dde5}
#bubble{position:absolute;left:50%;top:12%;translate:-50% 0;max-width:80%;background:#fff;border:2px solid var(--ink);border-radius:18px;padding:8px 14px;font-family:var(--f-pet);font-weight:800;font-size:1.05rem;z-index:3;text-align:center;transition:opacity .2s}
#bubble::after{content:"";position:absolute;left:50%;bottom:-12px;translate:-50% 0;border:7px solid transparent;border-top-color:var(--ink)}
#bubble.hide{opacity:0}
.petwrap{position:absolute;left:50%;top:62%;translate:-50% -100%;transition:left .55s cubic-bezier(.3,1.4,.5,1),top .55s cubic-bezier(.3,1.4,.5,1);z-index:2;cursor:pointer}
.pet{position:relative;display:grid;place-items:center;animation:bob 2.4s ease-in-out infinite;transform-origin:50% 100%;transition:transform .3s}
@keyframes bob{50%{transform:translateY(-6px)}}
.pet .body{position:relative;width:130px;height:96px;background:var(--pet);border:3px solid var(--pet-dark);border-radius:26px 26px 8px 8px;display:grid;place-items:center}
.pet .face{position:relative;width:70%;height:60%}
.eyes{position:absolute;top:16%;left:8%;right:8%;display:flex;justify-content:space-between}
.eyes i{width:14px;height:18px;background:var(--ink);border-radius:50%;display:block;transition:all .2s}
.mouth{position:absolute;left:50%;top:56%;translate:-50% 0;width:20px;height:10px;border:3px solid var(--ink);border-top:0;border-radius:0 0 20px 20px;transition:all .2s}
.cheeks{position:absolute;top:44%;left:-4%;right:-4%;display:flex;justify-content:space-between;opacity:.0;transition:opacity .3s}
.cheeks i{width:16px;height:9px;background:var(--blush);border-radius:50%;display:block}
.tears{position:absolute;top:36%;left:10%;right:10%;display:none;justify-content:space-between}
.tears i{width:7px;height:16px;background:#5ab0ff;border-radius:0 50% 50% 50%;transform:rotate(45deg);display:block;animation:drip 1s ease-in infinite}
@keyframes drip{to{transform:translateY(16px) rotate(45deg);opacity:0}}
.zz{position:absolute;right:-26px;top:-24px;font-family:var(--f-pet);font-weight:800;font-size:1.3rem;color:var(--pet-dark);display:none;animation:zz 1.6s ease-in-out infinite}
@keyframes zz{50%{transform:translate(6px,-8px)}}
.feet{display:flex;gap:44px;margin-top:-2px}
.feet i{width:22px;height:10px;background:var(--pet-dark);border-radius:0 0 12px 12px;display:block}
/* 表情 */
.happy .eyes i{height:8px;background:none;border:4px solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0;width:16px}
.happy .cheeks,.blush .cheeks{opacity:1}
.sad .eyes i{height:10px;border-radius:0 0 50% 50%;transform:rotate(-10deg)}
.sad .eyes i+i{transform:rotate(10deg)}
.sad .mouth,.angry .mouth{border:3px solid var(--ink);border-bottom:0;border-radius:20px 20px 0 0;top:62%}
.cry .tears{display:flex}
.sleep .eyes i{height:3px;border-radius:2px}
.sleep .zz{display:block}
.sleep .pet{animation-duration:4s}
.angry .eyes i{height:12px;border-radius:2px 2px 50% 50%;transform:rotate(18deg)}
.angry .eyes i+i{transform:rotate(-18deg)}
.angry .body{background:#ff9a8a;border-color:#d4503c}
.shock .eyes i{width:18px;height:18px;background:#fff;border:4px solid var(--ink)}
.shock .mouth{width:16px;height:16px;border:3px solid var(--ink);border-radius:50%}
.squish .pet{scale:.62 1.25}
.wide .pet{scale:1.25 .85}
.bounce .pet{animation:hop .5s ease-out 3}
@keyframes hop{40%{transform:translateY(-34px)}}
.shiver .pet{animation:shiv .12s linear infinite}
@keyframes shiv{50%{transform:translateX(3px)}}
.bloat .body{transform:scale(1.18,1.08)}
/* 成長段階 */
.stage0 .body{background:#fff;border:3px dashed var(--muted)}
.stage0 .face{display:none}
.stage0 .body .plus{display:block}
.body .plus{display:none;font-size:3rem;color:var(--muted);font-weight:300;line-height:1}
.stage0 .pet{animation:wobble 1.8s ease-in-out infinite}
@keyframes wobble{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.stage2 .body{width:160px;height:112px;box-shadow:-18px -12px 0 -3px #a6d6ff,-18px -12px 0 0 var(--pet-dark)}
.stage3 .body{width:150px;height:200px;border-radius:22px;background:#2b2f36;border-color:#14171b;padding:12px}
.stage3 .body .screen{position:absolute;inset:12px 12px 30px;background:var(--pet);border-radius:8px}
.stage3 .face{z-index:1;height:40%;margin-top:-20px}
.stage3 .body .home{position:absolute;bottom:8px;left:50%;translate:-50% 0;width:14px;height:14px;border-radius:50%;border:2px solid #6b7280}
.body .screen,.body .home{display:none}
.stage3 .body .screen,.stage3 .body .home{display:block}
.stage3 .feet{display:none}
.namecard{position:absolute;left:16px;bottom:14px;font-family:var(--f-pet);font-size:.92rem;color:var(--muted);display:grid}
.namecard b{font-size:1.2rem;color:var(--ink)}
/* サイドパネル */
.side{border-left:1px solid var(--line);padding:16px;display:grid;gap:14px;align-content:start;background:#fff;min-width:0}
@media (max-width:760px){.side{border-left:0;border-top:1px solid var(--line)}}
.meters{display:grid;gap:8px}
.meter{display:grid;grid-template-columns:4.5em minmax(0,1fr) 2.6em;align-items:center;gap:8px;font-size:.88rem}
.meter .bar{height:10px;background:#e8ecf1;border-radius:999px;overflow:hidden}
.meter .bar i{display:block;height:100%;border-radius:999px;background:var(--pet-dark);transition:width .4s}
.meter.warn .bar i{background:#e5484d}
.meter span:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.actions button{font-family:var(--f-pet);font-weight:800;font-size:.95rem;border:2px solid var(--ink);background:#fff;border-radius:12px;padding:10px 6px;cursor:pointer}
.actions button:hover:not(:disabled){background:#eaf5ff}
.actions button:focus-visible{outline:3px solid var(--pet-dark);outline-offset:2px}
.actions button:disabled{opacity:.4;cursor:default}
.diary{border-top:1px dashed var(--line);padding-top:10px;display:grid;gap:4px}
.diary h2{margin:0;font-family:var(--f-pet);font-size:.95rem}
#log{list-style:none;margin:0;padding:0;font-size:.82rem;color:var(--muted);max-height:180px;overflow:auto;display:grid;gap:2px}
#log time{font-variant-numeric:tabular-nums;margin-right:6px;color:#9aa1ab}
.facts{font-size:.8rem;color:var(--muted);display:grid;gap:2px}
/* クッキーバナー */
#cookie{position:absolute;left:12px;right:12px;bottom:12px;background:#1f2328;color:#fff;border-radius:12px;padding:14px 16px;display:grid;gap:10px;z-index:6;box-shadow:0 10px 30px rgba(0,0,0,.3)}
#cookie p{margin:0;font-size:.92rem;line-height:1.6}
#cookie .btns{display:flex;gap:8px;flex-wrap:wrap}
#cookie button{font:inherit;font-weight:700;border-radius:8px;padding:7px 12px;cursor:pointer;border:1px solid #fff}
#cookie .yes{background:var(--accent);border-color:var(--accent);color:#1f2328}
#cookie .mid{background:transparent;color:#fff}
#cookie .no{background:transparent;color:#bbb;border-color:#666}
/* ほかのタブの中身 */
.fake{padding:22px;display:grid;gap:12px;align-content:start}
.fake h2{margin:0;font-size:1.2rem}
.mail{display:grid;grid-template-columns:7em minmax(0,1fr) 4em;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:.92rem;background:#fff}
.mail b{font-weight:700}
.video{background:#000;color:#fff;border-radius:10px;aspect-ratio:16/9;max-width:640px;display:grid;place-items:center;font-size:3rem;position:relative}
.video .hid{position:absolute;right:8%;bottom:12%;font-size:1.6rem;cursor:pointer}
/* 家出 */
#note{position:absolute;left:50%;top:40%;translate:-50% -50%;background:#fffbe6;border:1px solid #e6d68a;padding:16px 20px;font-family:var(--f-pet);transform:rotate(-3deg);box-shadow:0 6px 16px rgba(0,0,0,.12);z-index:4;text-align:center;max-width:80%}
#hideBottom{height:900px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:30px;color:var(--muted);font-size:.85rem}
#hideBottom .hidepet{font-size:1.6rem;cursor:pointer}
@media (prefers-reduced-motion:reduce){.pet,.tears i,.zz{animation:none!important}.petwrap{transition:none}}
#petStar{color:#e6a800}
.fakenote{margin:0;color:var(--muted);font-size:.9rem}