/* v0.6 play layout: large map view with on-map action keys. */
.key-prompt{position:absolute;top:62px;right:12px;width:min(268px,34%);display:flex;flex-direction:column;gap:4px;padding:9px;background:#f7dea6f2;border:2px solid #79512d;border-radius:3px;box-shadow:inset 0 0 0 2px #fff0bf,3px 3px #3a502e55;color:#563c25;z-index:3}
.key-prompt.busy .key-row{opacity:.6}
.key-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:1px 3px 5px;border-bottom:1px solid #d3ae72;margin-bottom:2px}
.key-head strong{font-size:13px}.key-head span{font-size:11px;color:#8c6944}
.key-row{display:flex;align-items:center;gap:8px;width:100%;min-height:34px;padding:4px 7px;border:1px solid #c9a064;border-radius:3px;background:#fbeac0;box-shadow:inset 1px 1px #fff6d6,inset -1px -2px #dcb878;color:#563c25;text-align:left;cursor:pointer;font:inherit}
.key-row:hover:enabled,.key-row.selected{background:#fff3c9;border-color:#8a6131;box-shadow:inset 0 0 0 1px #f4cd60}
.key-row:active:enabled{transform:translateY(1px)}
.key-row:disabled{cursor:default}
.keycap{display:inline-grid;place-items:center;min-width:24px;height:23px;padding:0 6px;font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#5b3f1f;background:#fff4cf;border:1px solid #8a6131;border-bottom-width:3px;border-radius:4px;flex-shrink:0}
.keycap.blank{visibility:hidden}
.key-icon{display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;color:#5d7837}
.key-icon svg{width:17px;height:17px}
.key-copy{min-width:0;flex:1}.key-copy strong{display:block;font-size:12.5px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.key-meta{font:11px ui-monospace,monospace;color:#8a5a22;flex-shrink:0}
.key-more{font-size:11px;color:#8c6944;padding:2px 4px;margin:0}
.key-foot{display:flex;flex-wrap:wrap;gap:5px;padding-top:6px;margin-top:3px;border-top:1px solid #d3ae72}
.key-shortcut{display:flex;align-items:center;gap:5px;padding:2px 6px 2px 2px;border:0;background:none;color:#6f5230;font:inherit;font-size:11.5px;cursor:pointer;border-radius:3px}
.key-shortcut:hover{background:#ecd093}
.key-shortcut .keycap{height:20px;min-width:20px;font-size:10.5px;padding:0 5px;border-bottom-width:2px}
.key-shortcut em{font-style:normal;font:10.5px ui-monospace,monospace;color:#9a7a48}
.world-stage.palette-open::after{content:'';position:absolute;inset:0;background:#14241c8c;z-index:4;pointer-events:none}
.key-palette{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,92%);max-height:86%;display:flex;flex-direction:column;gap:8px;padding:14px;background:#f7dea6;border:3px solid #704725;border-radius:4px;box-shadow:0 0 0 2px #b58544,inset 0 0 0 2px #fff0bf,6px 9px #14241c88;color:#563c25;z-index:5}
.key-palette[hidden]{display:none}
.pal-head{display:flex;justify-content:space-between;align-items:center}.pal-head strong{font-size:16px}
.pal-close{display:flex;align-items:center;gap:6px;border:0;background:none;color:#8c6944;font:inherit;font-size:12px;cursor:pointer}
.pal-tabs{display:flex;gap:5px;flex-wrap:wrap}
.pal-tab{padding:5px 10px;border:1px solid #c9a064;border-radius:3px;background:#efd9a4;color:#7a5c31;font:inherit;font-size:12.5px;cursor:pointer}
.pal-tab em{font-style:normal;font:10.5px ui-monospace,monospace;margin-left:5px;color:#9a7a48}
.pal-tab.active{background:#5d7837;border-color:#3c572c;color:#fff4cf}.pal-tab.active em{color:#dfe7b5}
.pal-list{display:flex;flex-direction:column;gap:4px;overflow-y:auto;min-height:60px;padding:2px;position:relative}
.pal-list .key-row{min-height:38px}.pal-list .key-copy strong{font-size:13.5px}
.pal-empty{font-size:13px;color:#8c6944;text-align:center;padding:18px 0;margin:0}
.pal-foot{display:flex;flex-wrap:wrap;gap:14px;padding-top:8px;border-top:1px solid #d3ae72;font-size:11.5px;color:#7a5c31}
.pal-foot span{display:flex;align-items:center;gap:6px}
.pal-foot .keycap{height:20px;font-size:10.5px;border-bottom-width:2px}
.world-card:fullscreen .world-stage{width:100vw;height:100vh;aspect-ratio:auto}
.world-card:fullscreen .hotbar{display:none}
@media (min-width:900px) and (min-height:540px){
  main{max-width:none;padding:12px 16px 0}
  .world-stage{aspect-ratio:auto;height:calc(100vh - 166px);min-height:400px}
  .hotbar{display:none}
}
@media (max-width:899px){
  .key-prompt{top:auto;bottom:118px;right:7px;width:min(210px,56%);padding:6px;gap:3px}
  .key-prompt .key-head span{display:none}
  .key-prompt .key-foot{padding-top:3px;margin-top:0}
  .key-prompt .key-foot .keycap,.key-prompt .key-foot small{display:none}
  .key-row{min-height:30px}
}
