/* Phones, tablets and narrow windows.  Loaded after game.css, so everything here is an override.
   Two independent things live in this file:
     1. width rules, so no panel is ever wider than the window (a desktop user with a narrow window gets these too);
     2. `body.touch` rules for the on-screen controls in js/touch.js, added only when the device is touch-first.
   The desktop layout at a normal window size is untouched. */

/* ---------- 1. nothing may be wider than the window ---------- */
#create{width:min(920px,calc(100vw - 48px))}
#talk{width:min(660px,calc(100vw - 48px))}
.win{max-width:calc(100vw - 48px)}
#tip{max-width:min(320px,calc(100vw - 36px))}
#ctx{max-width:calc(100vw - 36px)}

/* the create panel keeps its frame on screen and scrolls inside, however long the class list gets */
#create{display:flex;flex-direction:column;max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px)}
#create .body{overflow-y:auto;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:var(--bronze) transparent}
#front{overflow-y:auto;overflow-x:hidden}

/* ---------- 2. narrow windows: stack what was in columns ---------- */
@media (max-width:820px){
  #front h1{font-size:clamp(40px,16vw,96px);letter-spacing:6px;text-shadow:0 4px 0 #5a3a18,4px 8px 0 #000,0 0 40px rgba(240,192,96,.4)}
  #front h2{font-size:clamp(10px,3vw,16px);letter-spacing:4px;margin:12px 0 28px}
  #front .btns{width:min(280px,76vw)}
  #front .foot{position:static;margin-top:26px;padding:0 12px 12px;font-size:16px}
  #front .foot .lic{font-size:13px}

  #create .cards{grid-template-columns:repeat(2,1fr)}
  #create .cards.cls{grid-template-columns:repeat(2,1fr)}
  #create .card small{font-size:16px}
  #create .step>label{font-size:14px}
  #create .foot2{flex-direction:column;align-items:stretch;gap:8px}
  #create .foot2 .gobtns{margin-left:0;flex-direction:column;gap:8px}
  #create .foot2 .gobtns button{white-space:normal}
  #cname{width:100%;box-sizing:border-box;margin-bottom:6px;font-size:22px;padding:6px 8px}

  /* windows: one column, cells sized to the screen rather than to a fixed grid */
  #inv .body{flex-direction:column}
  #doll{width:100%;max-width:336px;margin:0 auto}
  .grid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));justify-content:stretch}
  #invgrid,#baggrid{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))}
  .cell{width:auto;aspect-ratio:1;background-size:cover}
  #invstats{grid-template-columns:repeat(2,1fr)}
  #char td{padding:2px 4px;font-size:14px}
  .sk .ds{display:none}
  .sk .nm{width:auto;flex:1}
  #help pre{font-size:18px}
  #sign .body{font-size:19px}
  .win{top:44%}
  .win .body{max-height:calc(80vh - 60px)}
}

@media (max-width:560px){
  #create .cards,#create .cards.cls{grid-template-columns:1fr}
  #create .card{padding:4px 6px}
  #create .foot2 span:first-child{font-size:16px;line-height:1.05}
}

/* short windows (a phone held sideways): give the vertical space back */
@media (max-height:520px){
  #front h1{font-size:clamp(34px,9vh,72px);margin-top:4px}
  #front h2{margin:6px 0 14px}
  #front .foot{display:none}
  #create{max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px)}
  #create .card small{display:none}
  #create .step{margin-bottom:5px}
  .win{max-height:96vh}
  .win .body{max-height:calc(96vh - 56px)}
}

/* ---------- 3. touch devices ---------- */
/* the page itself must never pan, zoom or rubber-band: every gesture belongs to the game */
body.touch,body.touch #hud,body.touch #view{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;-webkit-touch-callout:none}
body.touch #cmdhint{display:none}
body.touch #cross{opacity:.6}

/* tap targets: the desktop sizes are too small for a thumb */
body.touch button,body.touch .btn{padding:6px 12px;font-size:16px}
body.touch button.big{padding:10px 18px}
body.touch .title .x{font-size:12px;padding:4px 10px}
body.touch .card{padding:7px 9px}

/* no hover on touch, so the log panel is driven by a tap on it (js/touch.js toggles .open) */
body.touch #logwrap:not(:hover):not(:focus-within) #cmdline{opacity:1}
/* a faded line still takes up room, which on a phone leaves a tall empty slab: fold them away instead
   (the current room line keeps its !important display, so the description stays) */
body.touch #logwrap:not(.open):not(:hover):not(:focus-within) #log div.old{display:none}
body.touch #logwrap.open:not(:hover):not(:focus-within){border-width:20px;border-image:var(--frame) 12 fill / 24px / 0 round;opacity:1}
body.touch #logwrap.open:not(:hover):not(:focus-within) #log{height:auto;max-height:46vh;overflow-y:auto;mask-image:none}
body.touch #logwrap.open:not(:hover):not(:focus-within) #log div{display:block;-webkit-line-clamp:unset;overflow:visible;opacity:1}
body.touch #logwrap.open:not(:hover):not(:focus-within) #log div.prev{display:block!important}
body.touch #logwrap.open:not(:hover):not(:focus-within) #log div:not(:nth-last-child(-n+6)){display:block}

/* the on-screen controls (built in js/touch.js) */
#tctl{position:absolute;inset:0;pointer-events:none;display:none}
body.touch #tctl{display:block}
body.touch.uiwin #tctl{display:none}   /* a window, a conversation or the death screen is up */
#tstick{position:absolute;width:132px;height:132px;border-radius:50%;background:radial-gradient(rgba(240,192,96,.10),rgba(10,8,14,.34));box-shadow:inset 0 0 0 3px rgba(168,120,48,.55),0 0 0 2px rgba(0,0,0,.5);opacity:.5;transition:opacity .2s;pointer-events:none}
#tstick.live{opacity:.92;transition:none}
#tstick i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:50%;background:radial-gradient(rgba(240,192,96,.85),rgba(150,100,30,.7));box-shadow:0 0 0 3px #07050a,0 3px 0 rgba(0,0,0,.5)}
#tstick:after{content:"MOVE";position:absolute;left:0;right:0;bottom:-15px;text-align:center;font-family:"Silkscreen";font-size:8px;color:var(--dim);text-shadow:1px 1px 0 #000}
#tstick.live:after{display:none}

.tbtn{position:absolute;pointer-events:auto;width:60px;height:60px;border-radius:50%;background:radial-gradient(rgba(60,44,22,.9),rgba(14,11,20,.92));box-shadow:inset 0 0 0 3px var(--bronze),0 0 0 2px #07050a,0 3px 0 rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tbtn img{width:30px;height:30px;image-rendering:pixelated;pointer-events:none}
.tbtn span{position:absolute;bottom:-13px;left:0;right:0;text-align:center;font-family:"Silkscreen";font-size:8px;color:var(--dim);text-shadow:1px 1px 0 #000;pointer-events:none}
.tbtn.press{box-shadow:inset 0 0 0 3px var(--gold),0 0 0 2px #07050a;background:radial-gradient(rgba(120,88,40,.95),rgba(30,22,40,.95))}
#tb-atk{width:82px;height:82px}#tb-atk img{width:42px;height:42px}
#tb-chat{width:48px;height:48px}#tb-chat img{width:24px;height:24px}
#tb-chat b{color:var(--gold);font-family:"VT323";font-size:26px;line-height:1}

/* portrait phone: the log owns the top, the vitals own the bottom strip, the thumbs own the space between */
@media (max-width:820px){
  body.touch #logwrap{left:5px;right:5px;width:auto;max-width:none;top:5px}
  body.touch #log{font-size:18px}
  body.touch #logwrap:not(.open):not(:hover):not(:focus-within) #log{max-height:22vh}
  body.touch #cmd{font-size:19px;padding:6px 4px}
  body.touch #cmdline span{font-size:22px}

  body.touch #mini{display:none}
  body.touch #menu{right:5px;left:auto;bottom:auto;top:calc(22vh + 58px);flex-direction:column;gap:3px}
  body.touch #menu button{width:40px;height:40px;background-size:40px 40px}
  body.touch #menu button img{width:24px;height:24px;margin-top:8px}
  body.touch #menu button span{font-size:8px}

  body.touch #vitals{left:5px;right:5px;bottom:4px;transform:none;flex-direction:column;align-items:stretch;gap:4px}
  body.touch #bars{width:auto}
  body.touch #bars .bar{height:13px;margin:3px 4px 7px}
  body.touch #bars .bar b{font-size:11px;line-height:12px}
  body.touch #bars #xp{bottom:-6px}
  body.touch #hotbar{order:-1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-bottom:2px}
  body.touch #hotbar::-webkit-scrollbar{display:none}
  body.touch #hotbar .slot{flex:none;width:44px;height:44px;background-size:44px 44px}
  body.touch #hotbar .slot img{width:28px;height:28px}
  body.touch #hotbar .slot img.item{width:38px;height:38px}
  body.touch #status{left:5px;transform:none;bottom:auto;top:calc(22vh + 20px);flex-wrap:wrap;max-width:60vw}
  body.touch #target{top:auto;bottom:calc(22vh + 96px);left:50%;min-width:200px;max-width:80vw}
  body.touch #prompt{top:auto;bottom:34%;font-size:14px;white-space:normal;max-width:84vw;text-align:center}
  body.touch #banner{font-size:26px;letter-spacing:2px}
  body.touch #levelup{font-size:32px;letter-spacing:3px}
  body.touch #toast div{font-size:15px;max-width:80vw;text-align:center}
  body.touch .bubble{max-width:min(280px,70vw);font-size:17px}

  /* clear of the vitals strip, which is about 166px tall */
  #tstick{left:12px;bottom:182px}
  #tb-atk{right:14px;bottom:180px}
  #tb-use{right:104px;bottom:196px}
  #tb-flee{right:24px;bottom:274px}
}

/* a touch tablet keeps the desktop layout, so the controls only need to clear the corners */
@media (min-width:821px){
  #tstick{left:24px;bottom:150px}
  #tb-atk{right:30px;bottom:150px}
  #tb-use{right:124px;bottom:166px}
  #tb-flee{right:40px;bottom:248px}
}

/* a phone held sideways: short and wide, so the vitals move to the middle and the corners take the controls.
   Last in the file, because a landscape phone is wide enough to match the tablet rules above as well. */
@media (max-height:520px){
  body.touch #logwrap{right:auto;width:42vw;max-width:none}
  body.touch #logwrap:not(.open):not(:hover):not(:focus-within) #log{max-height:30vh}
  body.touch #logwrap.open:not(:hover):not(:focus-within) #log{max-height:62vh}
  body.touch #mini{display:none}
  body.touch #menu{top:5px;right:5px;bottom:auto;left:auto;flex-direction:row;gap:3px}
  body.touch #menu button{width:38px;height:38px;background-size:38px 38px}
  body.touch #menu button img{width:22px;height:22px;margin-top:8px}
  body.touch #status{top:50px;left:auto;right:5px;bottom:auto;transform:none;max-width:40vw;justify-content:flex-end;flex-wrap:wrap}
  body.touch #vitals{left:50%;right:auto;bottom:5px;transform:translateX(-50%);width:min(420px,46vw);flex-direction:column;align-items:stretch;gap:3px}
  body.touch #bars{width:auto}
  body.touch #bars .bar{height:11px;margin:2px 4px 6px}
  body.touch #bars .bar b{font-size:10px;line-height:11px}
  body.touch #bars #xp{bottom:-5px}
  body.touch #hotbar{order:-1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  body.touch #hotbar::-webkit-scrollbar{display:none}
  body.touch #hotbar .slot{flex:none;width:38px;height:38px;background-size:38px 38px}
  body.touch #hotbar .slot img{width:24px;height:24px}
  body.touch #hotbar .slot img.item{width:32px;height:32px}
  body.touch #target{top:5px;bottom:auto;left:50%;min-width:180px;max-width:44vw}
  body.touch #prompt{top:auto;bottom:44%;font-size:14px}
  body.touch #hotbar{justify-content:center}
  body.touch #banner{font-size:24px;top:12%}
  #tstick{left:10px;bottom:14px}
  #tb-atk{right:14px;bottom:14px}
  #tb-use{right:104px;bottom:26px}
  #tb-flee{right:24px;bottom:106px}
}