/* Desktop is opt-in; the phone layout remains the default. */
#btn-fullscreen{display:none;align-items:center;justify-content:center;color:var(--cream)}
#btn-fullscreen svg{width:21px;height:21px}
#btn-fullscreen .fullscreen-collapse{display:none}
#btn-fullscreen:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
@media (any-pointer:fine){#btn-fullscreen{display:flex}}
body.desktop-mode #btn-fullscreen{display:flex;background:#ffddaf22;box-shadow:inset 0 0 0 1px #ffdda955}
body.desktop-mode #btn-fullscreen .fullscreen-expand{display:none}
body.desktop-mode #btn-fullscreen .fullscreen-collapse{display:block}
body.desktop-mode #shell{width:100%;height:100dvh;min-height:0;padding:0;gap:0}
body.desktop-mode #brand{display:none}
body.desktop-mode #device{width:100%;height:100%;max-width:none;border:0;border-radius:0;box-shadow:none}
body.desktop-mode #game{background:radial-gradient(ellipse at 20% 40%,#45203e,transparent 65%),#180d23}

@media (min-width:800px){
  body.desktop-mode #topbar{
    display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:24px;min-height:88px;padding:12px 28px;
    background:linear-gradient(180deg,#1c1028,#1c1028cc);border-bottom:1px solid #f5dfce14;
  }
  body.desktop-mode .logo{gap:10px}
  body.desktop-mode .logo-mark{font-size:37px}
  body.desktop-mode .logo-text{display:block;font-size:24px}
  body.desktop-mode .topbar-btns{justify-self:end;gap:10px}
  body.desktop-mode .icon-btn{width:44px;height:44px;border-radius:14px}
  body.desktop-mode #pearl-count{font-size:36px;letter-spacing:-.7px}
  body.desktop-mode #pearl-label{font-size:9px;letter-spacing:2.4px}
  body.desktop-mode #cps-line{font-size:13px;margin-top:3px}
  body.desktop-mode #main{
    display:grid;grid-template-columns:minmax(0,1fr) clamp(380px,40vw,620px);
    grid-template-rows:minmax(0,1fr);gap:20px;padding:20px;overflow:hidden;
  }
  body.desktop-mode #device #stage{
    --cup-w:min(46dvh,36vw,440px);
    display:flex;min-height:0;min-width:0;flex-direction:column;padding:24px;
    border:1px solid #ffe4d324;border-radius:26px;
    background:radial-gradient(ellipse at 50% 60%,#b5826273,transparent 62%),#42213f;
    box-shadow:inset 0 1px #fff1,0 12px 40px #08020e33;
  }
  body.desktop-mode #cafe-scene{opacity:.8}
  body.desktop-mode #cup-emoji{filter:drop-shadow(0 18px 20px #160a2166)}
  body.desktop-mode #cup-shadow{width:calc(var(--cup-w) * .7);bottom:calc(50% - var(--cup-w) * .49)}
  /* Keep the fire around the cup while the entire café remains clickable. */
  body.desktop-mode #heat-fx{
    inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
    width:calc(var(--cup-w) * .88 + 120px);height:calc(var(--cup-w) * .88 + 120px);
  }
  body.desktop-mode #device #heat-wrap{
    position:absolute;left:50%;bottom:22px;width:calc(100% - 48px);max-width:560px;
    min-width:0;flex:none;transform:translateX(-50%);
  }
  body.desktop-mode #device #buff-bar{top:22px;width:calc(100% - 48px);max-width:520px}
  body.desktop-mode #click-hint{bottom:96px}
  body.desktop-mode #device #panel{
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
    min-height:0;border:1px solid #fff0d955;border-radius:24px;overflow:hidden;
    box-shadow:0 18px 48px #09041144;
  }
  body.desktop-mode #device #tabs{
    grid-column:1;grid-row:1;flex-direction:row;align-self:stretch;align-items:center;
    min-height:76px;max-height:none;margin:0;padding:10px 12px;gap:6px;
    border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;
    overflow-x:auto;overflow-y:hidden;
  }
  body.desktop-mode #device .tab{
    flex:1 0 49px;min-height:54px;height:54px;max-height:54px;
    padding:6px 3px;gap:5px;border-radius:12px;font-size:10px;
  }
  body.desktop-mode #device .tab i{font-size:18px}
  body.desktop-mode #device .tab em{font-size:10px;line-height:1.2;white-space:nowrap}
  body.desktop-mode #device .tab.active{background:#2e1c28;color:#fff3e2;border-color:#2e1c28;box-shadow:0 3px 0 #2e1c2826}
  body.desktop-mode #device .tab-body{grid-column:1;grid-row:2;min-height:0;border-radius:0;scrollbar-width:none}
  body.desktop-mode .tab-body::-webkit-scrollbar{display:none}
  body.desktop-mode #tab-shop{padding-top:0}
  body.desktop-mode #buy-amounts{margin-bottom:16px;padding-top:14px;padding-bottom:14px;gap:10px}
  body.desktop-mode .shop-item{padding:13px 14px;margin-bottom:11px;border-radius:16px}
  body.desktop-mode #rebrew-world{padding:24px 18px}
  body.desktop-mode #tab-rebrew .rebrew-card{max-width:500px;margin:0 auto;gap:16px;padding:24px 20px}
  body.desktop-mode #tab-rebrew .rebrew-heading h2{font-size:25px}
  body.desktop-mode #tab-rebrew .rebrew-reward-box{padding:16px 8px}
  body.desktop-mode #tab-rebrew .rebrew-reward-box strong{font-size:32px}
  body.desktop-mode #tab-rebrew .rebrew-power{padding:14px 12px}
  body.desktop-mode #tab-rebrew .rebrew-btn{min-height:52px}
  body.desktop-mode #toast-layer{left:40px;bottom:108px;width:min(360px,calc(100% - 460px))}

  /* Ascension shares the right panel with the other sections. */
  body.desktop-mode #tab-ascend{padding:0}
  body.desktop-mode #ascend-world{
    display:flex;flex-direction:column;gap:14px;height:100%;min-height:100%;padding:16px;
  }
  body.desktop-mode #ascend-command{gap:12px;padding:18px}
  body.desktop-mode #ascend-command .ascend-reward{min-height:90px;gap:24px}
  body.desktop-mode #ascend-command .ascend-reset-note{font-size:10px}
  body.desktop-mode .ascend-sections{width:100%}
  body.desktop-mode .ascend-sections button{font-size:12px;padding:12px}
  body.desktop-mode #constellation-deck,
  body.desktop-mode #eternal-deck{flex:1 0 auto;min-height:350px;gap:12px}
  body.desktop-mode #tab-ascend #tree-view{flex:1 0 240px;min-height:240px}
  body.desktop-mode #ascend-world .constellation-head h3{font-size:18px}
  body.desktop-mode #tab-ascend .br-chip{gap:4px;padding:8px 4px}
  body.desktop-mode #tab-ascend .br-chip b{font-size:11px}
  body.desktop-mode #tab-ascend .eternal{padding:12px}
  body.desktop-mode #tab-ascend .eternal .e-name{font-size:14px}
  body.desktop-mode #tab-ascend .eternal .e-desc{font-size:12px}
  body.desktop-mode #ascend-cutscene{
    inset:auto;left:var(--panel-x);top:var(--panel-y);width:var(--panel-w);height:var(--panel-h);
    border-radius:24px;overflow:hidden;padding:20px;
  }
  body.desktop-mode #ascend-cutscene.play{animation-name:desktopAscendScene}
  @keyframes desktopAscendScene{0%,100%{opacity:0}18%,72%{opacity:1}}
}
@media (min-width:800px) and (max-height:650px){
  body.desktop-mode #topbar{min-height:72px;padding-top:6px;padding-bottom:6px}
  body.desktop-mode #main{padding:12px;gap:12px}
  body.desktop-mode #ascend-world{padding:16px;gap:12px 18px}
  body.desktop-mode #ascend-command{gap:12px;padding:16px}
  body.desktop-mode #ascend-command .ascend-reward{min-height:80px}
}