/* Grimorio: fit the six-card market in two compact desktop rows and expose it as a mobile drawer. */
.grimoire-toggle,.drawer-close{display:none}
.card-requirements{position:absolute;z-index:6;left:8px;right:8px;top:31%;min-height:31px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:5px;padding:4px 6px;border:1px solid color-mix(in srgb,var(--card-color) 72%,#f0d89b);border-radius:3px;background:linear-gradient(90deg,#07090df5,#17130ff2 55%,#07090df5);box-shadow:0 3px 10px #000c,0 0 12px color-mix(in srgb,var(--card-color) 18%,transparent);color:#fff0c8;text-shadow:0 1px 2px #000}
.card-requirements small{font:800 7px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#cdbd98}
.card-requirements .requirement-elements{display:flex;justify-content:center;gap:3px;min-width:0}
.card-requirements .element-symbol{width:17px;height:17px;flex:0 0 17px;margin:0;opacity:1;background:#080a0ef2;font-size:8px;box-shadow:inset 0 0 7px currentColor,0 0 5px #000}
.card-requirements>b{display:flex;align-items:center;gap:2px;font:800 11px/1 Inter,sans-serif;color:#fff3cb}
.card-requirements>b i{color:#d8b76b;font-style:normal}
.card-advanced .card-crest{top:27%;left:auto;right:9px;width:22px;height:22px;transform:rotate(45deg);opacity:.8}
.card-advanced .card-crest span{transform:rotate(-45deg)}
.card-advanced .card-content{inset:43% 8px 8px;padding-top:0}

@media(min-width:1200px) and (min-height:680px){
  .middle-zone{grid-template-columns:145px minmax(350px,1fr) minmax(340px,31vw)}
  .market-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-content:start;gap:6px;overflow:visible;padding:2px 2px 5px}
  .market .card{width:100%;min-width:0;flex:none}
  .market .card-header{top:5px;left:5px;right:5px;padding-left:5px}
  .market .card-title strong{font-size:clamp(7px,.58vw,10px)}
  .market .card-title span{font-size:clamp(5px,.4vw,7px)}
  .market .card-requirements{left:5px;right:5px;min-height:25px;padding:3px;gap:2px}
  .market .card-requirements small{display:none}
  .market .card-requirements .element-symbol{width:13px;height:13px;flex-basis:13px;font-size:6px}
  .market .card-requirements>b{font-size:9px}
  .market .card-advanced .card-content{inset:44% 5px 5px}
  .market .card-half{padding:3px 4px;font-size:clamp(6.5px,.48vw,8.5px);line-height:1.16}
  .market .card-half b{font-size:clamp(5.5px,.4vw,7px);gap:2px;margin-bottom:1px}
  .market .card-half b i{width:10px;height:10px;flex-basis:10px;font-size:5px}
  .market .card-foot{font-size:clamp(5px,.37vw,7px);gap:1px;padding-top:2px}
}

@media(max-width:800px){
  .game>.grimoire-toggle{position:fixed;z-index:40;display:block;left:max(10px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));min-height:46px;padding:10px 14px;border:1px solid #b58c4f;border-radius:2px;background:linear-gradient(#44231e,#21110f);color:#dcc591;font:600 12px Cinzel,serif;letter-spacing:.04em;box-shadow:0 5px 18px #000b;cursor:pointer}
  .game .market{position:fixed;z-index:50;inset:52px 0 0;display:flex;flex-direction:column;width:100vw;max-width:100vw;padding:14px max(12px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow-y:auto;border-radius:0;background:linear-gradient(145deg,rgba(28,14,12,.99),rgba(8,7,8,.99));transform:translateY(105%);visibility:hidden;transition:transform .22s ease,visibility .22s step-end}
  .game .market.open{display:flex;transform:translateY(0);visibility:visible;transition:transform .22s ease,visibility 0s}
  .market .section-title{flex:0 0 auto;align-items:center;margin-bottom:12px;font-size:13px}
  .market .drawer-close{display:grid;width:38px;height:38px;place-items:center;margin-left:auto;border:1px solid #b58c4f;background:#21110f;color:#ead8ac;font-size:24px;line-height:1;cursor:pointer}
  .market-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible;padding:2px 2px 24px}
  .market .card{width:100%;min-width:0;flex:none}
  .market .card-requirements{left:6px;right:6px}
  .market .card-advanced .card-content{inset:43% 6px 6px}
  .market .card-half{font-size:clamp(8px,2.45vw,10px)}
  .market .card-title strong{font-size:clamp(9px,2.8vw,12px)}
  .game>.log-toggle{right:max(10px,env(safe-area-inset-right));left:auto}
}

@media(max-width:380px){
  .market-cards{gap:8px}
  .market .card-requirements small{display:none}
}