/* The level editor in Graal's classic look, as RC (rc.css): a blue caption, grey 3D controls, sunken white lists and fields. */
:root{color-scheme:light;--face:#d4d0c8;--light:#fff;--shadow:#808080;--select:#0a246a}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--face);color:#000;font:12px Tahoma,Verdana,"Segoe UI",sans-serif;overflow:hidden}
button,select,a,input,textarea{font:inherit;color:#000}
button,select{background:var(--face);border:2px outset var(--light);border-radius:0;padding:4px 10px;min-height:24px;cursor:default}
button:active:not(:disabled){border-style:inset}button:disabled{color:var(--shadow)}
button.active{border-style:inset;background:#c0bcb4;font-weight:bold}
input,textarea{background:#fff;border:2px inset var(--light);border-radius:0;padding:2px 4px}
.caption{display:flex;align-items:center;gap:6px;height:22px;padding:2px 6px;color:#fff;font-weight:bold;background:linear-gradient(90deg,#0a246a,#a6caf0);user-select:none;white-space:nowrap;overflow:hidden}
.caption .caption-icon{font:bold 9px Tahoma;background:#d4b97b;color:#3b2a00;border:1px solid #fff;padding:1px 3px}
header{height:40px;display:flex;align-items:center;gap:8px;padding:0 8px;border-bottom:2px groove var(--light)}
.brand{display:none}
header #level{width:240px}
.live{color:#008000;font-size:11px;font-weight:bold}#saveState{flex:1;font-size:11px;border:1px inset var(--light);padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header a{background:var(--face);border:2px outset var(--light);padding:3px 12px;text-decoration:none;color:#000}header a:active{border-style:inset}
main{display:flex;height:calc(100% - 62px)}
.workspace{flex:1;min-width:0;display:flex;flex-direction:column;padding:4px;gap:4px}
nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:3px;border:2px groove var(--light)}
nav button{padding:3px 8px}nav label{font-size:11px;display:flex;align-items:center;gap:3px;margin:0 4px}
.divider{height:22px;width:2px;border-left:1px solid var(--shadow);border-right:1px solid var(--light);margin:0 4px}
#viewport{position:relative;flex:1;min-height:0;background:#808080;overflow:hidden;border:2px inset var(--light)}
#mapCanvas{display:block;width:100%;height:100%;touch-action:none;image-rendering:pixelated}
#mapHint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);padding:3px 10px;background:#ffffe1;border:1px solid #000;pointer-events:none;white-space:nowrap;font-size:11px}
/* NPC and link panels: little windows over the map, with a caption. */
#npcPanel,#linkPanel{position:absolute;top:10px;right:10px;width:310px;max-width:calc(100% - 20px);max-height:calc(100% - 20px);overflow:auto;background:var(--face);border:2px outset var(--light);box-shadow:2px 2px 0 #0005;padding:0 8px 8px;z-index:3}
#npcPanel.hidden,#linkPanel.hidden{display:none}
#npcPanel .section-title,#linkPanel .section-title{margin:0 -8px 8px;padding:3px 6px;color:#fff;background:linear-gradient(90deg,#0a246a,#a6caf0);letter-spacing:0;font-size:12px}
#npcPanel label,#linkPanel label{display:block;font-size:11px;margin-bottom:8px}
#npcPanel input,#npcPanel textarea,#linkPanel input{width:100%;margin-top:3px;font:12px "Courier New",Consolas,monospace}
#npcPanel textarea{resize:vertical}
/* An NPC's picture beside its name, and the server's pictures to pick one from (editor.js openPicturePicker). */
#npcPanel .npc-image{display:flex;align-items:center;gap:8px;margin:-4px 0 8px}
.npc-image-preview{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:64px;height:64px;font-size:10px;color:#606060;text-align:center;border:2px inset var(--light);background:#fff repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 0 0/12px 12px;overflow:hidden}
.npc-image-preview img{max-width:100%;max-height:100%;image-rendering:pixelated}
#imagePicker{position:absolute;top:6px;left:6px;right:6px;bottom:6px;z-index:20;display:flex;flex-direction:column;gap:6px;padding:0 8px 8px;background:var(--face);border:2px outset var(--light);box-shadow:2px 2px 0 #0005}
#imagePicker.hidden{display:none}
#imagePicker .section-title{display:flex;align-items:center;gap:8px;margin:0 -8px;padding:3px 6px;color:#fff;background:linear-gradient(90deg,#0a246a,#a6caf0);font-size:12px}
#imagePickerCount{flex:1;font-weight:normal;font-size:11px;color:#dfe7f7}
#imagePickerClose{min-height:18px;width:22px;padding:0;font:bold 13px Tahoma;line-height:12px}
#imagePickerSearch{width:100%;font:12px Tahoma,Verdana,sans-serif}
#imagePickerGrid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));grid-auto-rows:min-content;gap:4px;align-content:start;padding:4px;background:#fff;border:2px inset var(--light)}
#imagePickerGrid .picture{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;background:#fff;border:1px solid #e4e4e4;cursor:pointer}
#imagePickerGrid .picture:hover,#imagePickerGrid .picture:focus{border-color:var(--select,#0a246a);outline:0}
#imagePickerGrid .picture.current{background:#dfe7f7;border-color:#0a246a}
#imagePickerGrid .picture img{flex:0 0 auto;width:64px;height:64px;object-fit:contain;image-rendering:pixelated;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/10px 10px}
#imagePickerGrid .picture span{max-width:100%;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#imagePickerMore{align-self:center}
@media(max-width:650px){#imagePicker{position:fixed;inset:0;border:0;box-shadow:none;z-index:1000}#imagePickerSearch{font-size:16px;min-height:36px}#imagePickerGrid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}#imagePickerClose{min-height:30px;width:38px;font-size:18px}}
#npcPanel .npc-actions,#linkPanel .npc-actions{display:flex;gap:6px;justify-content:flex-end}
#npcPanelPos,#linkPanelPos{float:right;color:#c8d4f0;font-size:11px;font-weight:normal}
#linkPanel .link-zone{white-space:pre-line;margin:0 0 10px;padding:4px 6px;background:#fff;border:2px inset var(--light);font:11px "Courier New",monospace;line-height:1.5}
#linkPanel .link-dest{display:flex;gap:8px}#linkPanel .link-dest label{flex:1}
#linkPanel .link-help{margin:-2px 0 10px;color:#404040;font-size:11px;line-height:1.4}
#linkError{background:#fff;border:2px inset var(--light);color:#c00000;font:11px "Courier New",monospace;padding:4px 6px;margin:0 0 8px}#linkError.hidden{display:none}
.wall-toggle{display:flex;align-items:center;gap:6px;font-size:11px;margin:0 0 10px}.wall-toggle input{margin:0}
#wallTileHint{color:#606060;font-size:10px}
footer{height:22px;display:flex;align-items:center;gap:6px;font-size:11px}footer span{border:1px inset var(--light);padding:1px 6px;white-space:nowrap;overflow:hidden}footer span:last-child{margin-left:auto}
aside{width:370px;flex-shrink:0;overflow:auto;padding:6px;border-left:2px groove var(--light)}
.section-title{font-size:11px;font-weight:bold;margin:8px 0 6px;padding-bottom:2px;border-bottom:1px solid var(--shadow)}.section-title span{float:right;color:#404040;font-weight:normal}
aside p{font-size:11px;line-height:1.5;color:#202020;margin:6px 0 10px}
#overview{display:block;width:100%;height:auto;cursor:crosshair;border:2px inset var(--light);image-rendering:pixelated}
.palette-controls{display:flex;justify-content:space-between;align-items:center;margin:8px 0 6px;font-size:11px}.palette-controls select{padding:1px 4px}
#paletteScroll{height:270px;overflow:auto;background:#fff;border:2px inset var(--light);margin-bottom:12px}
#palette{display:block;image-rendering:pixelated;cursor:crosshair;touch-action:none}
#stamp{width:100%;height:100px;object-fit:contain;image-rendering:pixelated;background:#fff repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 50% /16px 16px;border:2px inset var(--light)}
.file-actions{display:flex;gap:6px;flex-wrap:wrap}
.footnote{font-size:10px;color:#606060;margin-top:14px}
/* Zoom buttons over the map, outside the canvas so tapping them can't paint. */
#editorZoom{position:absolute;top:8px;left:8px;z-index:2;display:flex;align-items:center;gap:2px;padding:2px;background:var(--face);border:2px outset var(--light);touch-action:manipulation;user-select:none}
#editorZoom button{width:36px;height:30px;padding:0;font:bold 18px Tahoma;touch-action:manipulation}
#zoomLabel{min-width:44px;text-align:center;font:11px Tahoma;border:1px inset var(--light);padding:2px}
@media(max-width:1000px){aside{width:300px}footer span:last-child{display:none}}
@media(max-width:650px){aside{width:220px}header #save{display:none}.live{display:none}header #level{width:140px}#mapHint{display:none}nav button{font-size:10px;padding:3px 5px}}
/* A phone held upright: the map on top, the tileset under it, everything big enough to touch. */
@media(max-width:650px) and (orientation:portrait){
 header{height:auto;min-height:40px;flex-wrap:wrap;padding:4px}header #level{flex:1;min-width:80px}header #save{display:block}#saveState{flex-basis:100%;order:5}
 main{height:calc(100% - 100px);flex-direction:column}.workspace{flex:0 0 59%;min-height:210px}
 aside{width:100%;flex:1;min-height:0;border-left:0;border-top:2px groove var(--light)}
 nav button{min-height:32px}#paletteScroll{height:180px}#npcPanel,#linkPanel{width:min(310px,94%);right:3%;top:4px;max-height:98%}footer{height:22px}
}
/* The picture picked while browsing (editor.js choosePicture): shown big, with its name and what to do with it. */
#imagePickerChosen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px;border:2px groove var(--light)}
#imagePickerChosen.hidden{display:none}
#imagePickerChosenName{flex:1;min-width:120px;font:12px "Courier New",Consolas,monospace;overflow-wrap:anywhere;user-select:text}
.panel-x{margin-left:auto;min-height:18px;width:22px;padding:0;font:bold 13px Tahoma;line-height:12px;color:#000}
#npcPanel .section-title,#linkPanel .section-title{display:flex;align-items:center;gap:6px}
#npcPanelPos,#linkPanelPos{float:none}
/* A phone (a touch screen, or a screen this small either way round): the NPC, link and picture panels fill the screen, one at
   a time over the map, with their title and a big × always at the top and their buttons always at the bottom; the map's help
   lines make way for the map. */
@media (pointer:coarse),(max-width:650px),(max-height:500px){
 #npcPanel,#linkPanel,#imagePicker{position:fixed;inset:0;width:auto;max-width:none;max-height:none;z-index:1000;display:flex;flex-direction:column;gap:8px;overflow:auto;padding:0 12px 0;border:0;box-shadow:none}
 #imagePicker{z-index:1001}
 #npcPanel .section-title,#linkPanel .section-title,#imagePicker .section-title{position:sticky;top:0;z-index:2;margin:0 -12px;min-height:46px;padding:4px 8px 4px 12px;font-size:15px}
 .panel-x,#imagePickerClose{min-height:38px;width:48px;font-size:22px;line-height:20px}
 #npcPanel label,#linkPanel label{font-size:13px;margin-bottom:0}
 #npcPanel input,#linkPanel input,#imagePickerSearch{font-size:16px;min-height:40px}
 #npcPanel label:has(#npcScript){flex:1;display:flex;flex-direction:column;min-height:200px}
 #npcScript{flex:1;min-height:160px;font-size:14px}
 #npcPanel .npc-image{margin:0}
 #npcPanel .npc-actions,#linkPanel .npc-actions{position:sticky;bottom:0;z-index:2;margin:0 -12px;padding:8px 12px;background:var(--face);border-top:2px groove var(--light)}
 #npcPanel .npc-actions button,#linkPanel .npc-actions button,#npcImageBrowse,#imagePickerChosen button,#imagePickerMore{min-height:44px;font-size:14px}
 #npcPanel .npc-actions button,#linkPanel .npc-actions button{flex:1}
 #imagePickerChosen{position:sticky;bottom:0;background:var(--face);margin:0 -12px;padding:8px 12px}
 #imagePickerGrid{flex:none;overflow:visible;min-height:0}
 #mapHint{display:none}
}
@media (max-height:500px){
 aside>p,#toolHelp,footer span:last-child{display:none}
 header{min-height:0;padding:2px 4px}.caption{min-height:0}
 nav button{padding:2px 6px}
}