/* Graal RC's look: a classic Windows program. Grey 3D controls, a blue caption, a white chat log and player list. */
:root{color-scheme:light;--face:#d4d0c8;--light:#fff;--shadow:#808080;--dark:#404040;--select:#0a246a;font:12px Tahoma,Verdana,"Segoe UI",sans-serif;color:#000}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#3a6ea5}
button,input,select,textarea{font:inherit;color:#000}
#app{display:flex;flex-direction:column;height:100%;background:var(--face);border:2px outset var(--light)}
.caption,.win-title{display:flex;align-items:center;gap:6px;min-height:22px;padding:2px 4px;color:#fff;font-weight:bold;background:linear-gradient(90deg,#0a246a,#a6caf0);user-select:none}
.caption-icon{font:bold 9px Tahoma;background:#d4b97b;color:#3b2a00;border:1px solid #fff;padding:1px 3px}
#caption{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caption-close{min-height:18px;width:22px;padding:0;font:bold 13px Tahoma;line-height:12px}
/* Menu bar and its drop-down menus (also the right-click menu). */
#menubar{display:flex;flex-wrap:wrap;padding:1px 2px;border-bottom:1px solid var(--shadow)}
#menubar>.menu-item{position:relative}
#menubar>.menu-item>button{background:none;border:1px solid transparent;padding:3px 8px;min-height:24px;cursor:default}
#menubar>.menu-item>button:hover,#menubar>.menu-item.open>button{border:1px solid;border-color:var(--light) var(--shadow) var(--shadow) var(--light)}
.menu{position:absolute;z-index:100000;min-width:180px;background:var(--face);border:2px outset var(--light);padding:2px;box-shadow:2px 2px 0 #0004}
.menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:5px 20px;min-height:24px;white-space:nowrap;cursor:default}
.menu button:hover,.menu button:focus{background:var(--select);color:#fff;outline:0}
.menu hr{border:0;border-top:1px solid var(--shadow);border-bottom:1px solid var(--light);margin:3px 2px}
/* Toolbar: flat icon buttons that rise when pointed at. */
#toolbar{display:flex;flex-wrap:wrap;gap:1px;padding:3px 4px;border-bottom:2px groove var(--light)}
.tool{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:62px;padding:3px 4px;background:none;border:1px solid transparent;cursor:default}
.tool:hover{border-color:var(--light) var(--shadow) var(--shadow) var(--light)}
.tool:active{border-color:var(--shadow) var(--light) var(--light) var(--shadow)}
.tool svg{width:22px;height:22px}.tool span{font-size:11px;white-space:nowrap}
.sep{width:2px;margin:2px 3px;border-left:1px solid var(--shadow);border-right:1px solid var(--light)}
/* Chat on the left, the players on the right, as in Graal RC. */
#main{flex:1;display:flex;gap:4px;padding:4px;min-height:0}
#chatPane{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
#chatLog{flex:1;overflow:auto;background:#fff;border:2px inset var(--light);padding:4px 6px;font:12px/1.45 "Courier New",Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
#chatLog .time{color:#808080}#chatLog .from{font-weight:bold;color:#000080}#chatLog .server{color:#008000}#chatLog .command{color:#5a3e00}#chatLog .error{color:#c00000}#chatLog .me .from{color:#800000}
#chatBar{display:flex;gap:4px}
#chatBar input{flex:1}
#playerPane{width:250px;display:flex;flex-direction:column;min-height:0}
.pane-title{padding:2px 4px;font-weight:bold}
#playerTree{flex:1;overflow:auto;background:#fff;border:2px inset var(--light);padding:2px;outline:0}
.tree-group{padding:2px 2px 2px 0;font-weight:bold;cursor:default;user-select:none}
.tree-group::before{content:"⊟ ";font-weight:normal}.tree-group.closed::before{content:"⊞ "}
.tree-row{display:flex;gap:6px;padding:2px 4px 2px 18px;cursor:default;white-space:nowrap;user-select:none}
.tree-row small{color:#808080;overflow:hidden;text-overflow:ellipsis}
.tree-row.selected{background:var(--select);color:#fff}.tree-row.selected small{color:#c8d4f0}
#statusbar{display:flex;gap:4px;padding:2px}
#statusbar span{border:1px inset var(--light);padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#status{flex:1}#status.error{color:#c00000}
/* Classic controls. */
button{background:var(--face);border:2px outset var(--light);padding:3px 12px;min-height:24px;cursor:default}
button:active:not(:disabled){border-style:inset}button:disabled{color:var(--shadow)}
input,select,textarea{background:#fff;border:2px inset var(--light);padding:2px 4px;min-height:22px;border-radius:0}
input[readonly]{background:var(--face)}
textarea{font:12px/1.4 "Courier New",Consolas,monospace;resize:none;white-space:pre;tab-size:2}
fieldset{border:2px groove var(--light);margin:0 0 6px;padding:6px 8px}legend{padding:0 3px}
label{display:flex;align-items:center;gap:6px}
/* Windows (Player Attributes, File Browser, script editors...), over the main window. */
#desktop{position:fixed;inset:0;pointer-events:none}
.win{position:absolute;display:flex;flex-direction:column;min-width:260px;min-height:140px;background:var(--face);border:2px outset var(--light);box-shadow:2px 2px 0 #0005;pointer-events:auto;resize:both;overflow:hidden}
.win-title{cursor:move;touch-action:none}.win.inactive .win-title{background:linear-gradient(90deg,#808080,#c0c0c0)}
.win-title span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-title button{min-height:16px;width:18px;padding:0;line-height:12px;font:bold 11px Tahoma;cursor:default}
.win-body{flex:1;display:flex;flex-direction:column;gap:6px;padding:6px;min-height:0;overflow:auto}
.win-status{border:1px inset var(--light);padding:2px 6px;min-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-status.error{color:#c00000}
.buttons{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.row>input,.row>select{flex:1;min-width:100px}
.grow{flex:1;min-height:0}
.list{background:#fff;border:2px inset var(--light);overflow:auto}
.list .item{padding:2px 5px;white-space:nowrap;cursor:default;user-select:none}.list .item.selected{background:var(--select);color:#fff}
.list .item small{color:#808080;margin-left:8px}.list .item.selected small{color:#c8d4f0}
.tabs{display:flex;gap:2px;margin-bottom:-6px;position:relative;z-index:1}
.tabs button{border-bottom:0;padding:3px 12px}.tabs button[aria-selected=true]{background:var(--face);padding-bottom:6px;margin-top:-2px}
.tabs button[aria-selected=false]{border-style:outset;background:#c8c4bc}
.tab-page{flex:1;display:flex;flex-direction:column;gap:6px;border:2px outset var(--light);padding:8px;min-height:0}
.tab-page[hidden]{display:none}
.attr{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:5px 8px;align-items:center}
.attr input{width:100%}
.split{display:flex;gap:6px;flex:1;min-height:0}.split>.list{min-width:0}
.tree-folder{padding-left:calc(var(--depth) * 12px + 5px)}
table.grid{border-collapse:collapse;width:100%;background:#fff}table.grid th{background:var(--face);border:1px outset var(--light);text-align:left;padding:2px 5px;font-weight:normal;position:sticky;top:0}
table.grid td{padding:2px 5px;border-bottom:1px solid #eee;white-space:nowrap}
pre{margin:0;font:11px/1.4 "Courier New",monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.checker{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;border:2px inset var(--light);background:#fff repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 0 0/16px 16px}
.checker img{image-rendering:pixelated}
.hint{color:#404040;font-size:11px}
/* A phone: the windows fill the screen, the player list goes under the chat, and everything is big enough to touch. */
@media (max-width:760px){
 #app{border:0}
 #main{flex-direction:column}#playerPane{width:auto;height:30%}
 .tool{min-width:54px}.tool span{font-size:10px}
 button,input,select{min-height:34px}.menu button{min-height:36px}
 .win{position:fixed!important;inset:0!important;width:auto!important;height:auto!important;resize:none}
 .attr{grid-template-columns:auto 1fr}
 /* Fingers: taller rows and buttons, and text big enough to read. */
 .caption,.win-title{min-height:34px;font-size:13px}.caption-close,.win-title button{min-height:28px;width:34px;font-size:16px}
 #menubar>.menu-item>button{min-height:34px;padding:4px 12px}
 #chatLog{font-size:13px}#chatBar input{font-size:16px}
 .tree-row,.list .item{padding-top:7px;padding-bottom:7px}
 textarea{font-size:13px}
 /* Bigger letters all round, and the taskbar of open windows along the bottom (rc.js drawTaskbar). */
 :root{font-size:14px}.tool span{font-size:11px}.hint{font-size:13px}pre{font-size:12px}textarea{font-size:14px}
 .has-windows #taskbar{display:flex}
 .has-windows .win{bottom:46px!important}
 .list .item,.tree-row{-webkit-touch-callout:none}
}
#taskbar{display:none;position:fixed;left:0;right:0;bottom:0;height:46px;z-index:2147483000;gap:3px;padding:4px;background:var(--face);border-top:2px outset var(--light);overflow-x:auto}
#taskbar .task{flex:0 0 auto;max-width:42vw;min-height:36px;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:bold}
#taskbar .task.active{border-style:inset;background:#e8e6e0}