/* 1998年のバイトコードを動かすページ専用の見た目。
   土台の配色・型は ../js/style.css をそのまま使う。 */

.applet-host{margin:18px 0 0}

/* アプレットの枠。当時のアプレットは背景が AWT 既定の灰色だったので、そこも合わせる。 */
.applet-stage{position:relative;width:100%;margin:0 auto;background:#c0c0c0;
  border:1px solid var(--border-strong);border-radius:10px;overflow:hidden;
  box-shadow:var(--shadow-1)}
.applet-stage canvas{display:block;width:100%;height:100%}

/* Button / Scrollbar を置く層。canvas の上に重ねる。 */
.applet-overlay{position:absolute;inset:0;pointer-events:none}
.applet-overlay>*{pointer-events:auto}
.awt-slot{position:absolute;display:flex;justify-content:center;align-items:center;padding:3px 6px}
.awt-north{top:0;left:0;right:0}
.awt-south{bottom:0;left:0;right:0}
.awt-flow{top:0;left:0;right:0}          /* 既定の FlowLayout : 上の中央 */

/* 当時の AWT の部品の見た目に寄せる */
.awt-button{font:600 12px/1 'Inter',system-ui,sans-serif;color:#111;background:#d4d0c8;
  border:2px outset #f0ede8;border-radius:0;padding:4px 14px;cursor:pointer;min-width:66px}
.awt-button:active{border-style:inset}
.awt-scrollbar{-webkit-appearance:none;appearance:none;width:100%;height:15px;background:#d4d0c8;
  border:1px solid #8a8a8a;cursor:pointer}
.awt-scrollbar::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:13px;background:#d4d0c8;
  border:2px outset #f0ede8}
.awt-scrollbar::-moz-range-thumb{width:26px;height:13px;background:#d4d0c8;border:2px outset #f0ede8;border-radius:0}

/* 下の操作列 */
.applet-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:10px}
.applet-run{font-size:.83rem;font-weight:600;padding:7px 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--primary);
  transition:background .15s,border-color .15s,color .15s}
.applet-run:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
.applet-run:disabled{opacity:.5;cursor:default}
.applet-info{font-family:var(--code);font-size:.74rem;color:var(--text-mute)}
.applet-err{color:#c0392b;font-weight:600}

/* バイトコードの表示 */
.bc-toggle{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:.78rem;font-weight:600;
  padding:6px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface-soft);color:var(--text-mute)}
.bc-toggle:hover{border-color:var(--accent);color:var(--accent-strong);background:var(--accent-soft)}
.bc-pane{margin-top:10px;border-radius:12px;overflow:hidden;border:1px solid #2a2f3a}
.bc-pane pre{margin:0;max-height:440px;overflow:auto;background:#0d1117;color:#e6edf3;
  font-family:var(--code);font-size:.72rem;line-height:1.65;padding:15px 17px;white-space:pre}

/* 出典の並び */
.srcs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.srcs a{font-family:var(--code);font-size:.75rem;padding:4px 11px;border-radius:7px;
  background:var(--surface-strong);color:var(--primary)}
.srcs a:hover{background:var(--accent-soft);color:var(--accent-strong)}
.srcs .recon{background:#fff1de;color:var(--accent-strong);border:1px dashed rgba(240,131,0,.5)}

.note{margin:14px 0 0;padding:13px 17px;border-radius:12px;font-size:.86rem;
  background:var(--surface-soft);border:1px solid var(--border);color:var(--text-body)}
.note b{color:var(--text)}

table.tbl{width:100%;border-collapse:collapse;margin:16px 0 0;font-size:.85rem}
table.tbl th,table.tbl td{border:1px solid var(--border);padding:8px 11px;text-align:left;vertical-align:top}
table.tbl th{background:var(--surface-strong);font-weight:600;white-space:nowrap}
table.tbl td code{font-family:var(--code);font-size:.9em}
.tbl-wrap{overflow-x:auto}