:root{
    --bg:#0e0d12; --panel:#1a1823; --panel2:#242031; --line:#3a3450;
    --txt:#e8e4f0; --dim:#9b93b0; --acc:#ffd36b; --blue:#6fb3ff; --red:#ff6f7d;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%; background:var(--bg); color:var(--txt);
    font-family:"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif; overflow:hidden;}
  #wrap{position:relative; width:100vw; height:100vh; display:flex;
    align-items:center; justify-content:center;}
  #stage{position:relative; transform-origin:center center;}
  canvas{display:block; background:#000; border-radius:10px;
    box-shadow:0 10px 40px rgba(0,0,0,.6);}
  /* 行動カード列: キャンバス下部の床の「隙間」に差し込む
     (タイムライン下端=464px、ドラッグ判定+16px を避けて最大56px重ねる) */
  #menurow{display:flex; align-items:stretch; gap:8px; margin:-56px 8px 4px;
    min-height:104px; position:relative; z-index:5;}
  #menu{display:flex; gap:5px; align-items:stretch; flex:1; min-width:0;
    overflow-x:auto; visibility:hidden; scrollbar-width:none;}
  #menu::-webkit-scrollbar{display:none;}
  #menu.show{visibility:visible;}
  #menu .card{
    position:relative;
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    color:var(--txt); border:1px solid var(--line); border-radius:9px;
    padding:7px 8px 5px 17px; min-width:72px; cursor:grab; text-align:center;
    font-size:12px; user-select:none; touch-action:none;
    transition:border-color .12s, transform .06s;
  }
  #menu .card:hover{border-color:var(--acc); transform:translateY(-2px);}
  #menu .card.placed{border-color:var(--blue); box-shadow:0 0 8px rgba(111,179,255,.35);}
  #menu .card .wt{display:block; font-size:10px; color:var(--acc); margin-top:2px;}
  #menu .card .sub{display:block; font-size:9px; color:var(--dim); margin-top:1px;}
  #menu .card .key{position:absolute; left:4px; top:4px; font-size:9px; color:var(--dim);
    border:1px solid var(--line); border-radius:4px; padding:0 3px;}
  #menu .card .cicon{display:block; width:22px; height:22px; margin:0 auto 2px;
    image-rendering:pixelated; pointer-events:none;}
  /* お気に入り(左5枠)とカテゴリ階層 */
  #menu .card .cdb{position:absolute; left:0; right:0; bottom:0; border-radius:0 0 9px 9px;
    background:rgba(20,30,52,.9); color:#9fd8ff; font-size:10px; font-weight:bold;
    padding:2px 0; pointer-events:none;}
  /* CT中: カード全体を灰色に(アイコンもグレースケール)。明けると通常表示に戻る */
  #menu .card.cd{background:linear-gradient(180deg,#201d28,#171420); border-color:#302c3e;
    color:#7a7390;}
  #menu .card.cd .cicon{filter:grayscale(1) brightness(.65);}
  #menu .card.cd .wt{color:#7a7390;}
  #menu .card.cd .sub{color:#57506b;}
  #menu .card.cd .fstar{color:#3c3650;}
  #menu .card.cd:hover{border-color:#9fd8ff66; transform:translateY(-2px);}
  #menu .card .prb{position:absolute; left:3px; bottom:2px; font-size:8px; font-weight:800;
    color:#241a3e; background:#c9a3ff; border-radius:5px; padding:0 4px;}
  #menu .card .fstar{position:absolute; right:3px; top:2px; font-size:11px; color:#4e4668;
    cursor:pointer; z-index:2; line-height:1;}
  #menu .card .fstar:hover{color:var(--acc);}
  #menu .card .fstar.on{color:var(--acc); text-shadow:0 0 6px rgba(255,211,107,.55);}
  #menu .card.cat{background:linear-gradient(180deg,#2e2745,#1f1a30); border-color:#4e4576;}
  #menu .card.cat .cico{display:block; font-size:17px; margin:1px 0 2px;}
  #menu .card.cat:hover{border-color:var(--acc);}
  #menu .card.back{display:flex; align-items:center; justify-content:center;
    background:#161221; color:var(--dim); min-width:54px; font-size:12px; cursor:pointer;}
  #menu .card.back:hover{color:var(--txt);}
  #menu .card.empty{border-style:dashed; background:none; color:#58506e; cursor:default;}
  #menu .card.empty:hover{border-color:var(--line); transform:none;}
  #endTurn{flex:none; align-self:center; visibility:hidden;
    background:linear-gradient(180deg,#4a3c14,#2e2608);
    color:var(--acc); border:1px solid var(--acc); border-radius:10px;
    padding:12px 14px; font-size:14px; cursor:pointer; letter-spacing:.06em;}
  #endTurn.show{visibility:visible;}
  #endTurn:disabled{opacity:.35; cursor:default;}
  #endTurn:not(:disabled):hover{filter:brightness(1.25);}
  /* オートモードトグル(常時表示、オート進行中でも切替可) */
  #autoBtn{position:absolute; right:14px; top:8px;
    background:var(--panel); color:var(--dim); border:1px solid var(--line);
    border-radius:8px; padding:5px 12px; font-size:12px; cursor:pointer;}
  #autoBtn:hover{filter:brightness(1.3);}
  #autoBtn.on{color:var(--acc); border-color:var(--acc);
    background:linear-gradient(180deg,#3a3010,#241d06);}
  /* 画面上部メッセージ */
  #banner{position:absolute; left:50%; top:10px; transform:translateX(-50%);
    background:rgba(20,16,30,.85); border:1px solid var(--line); border-radius:8px;
    padding:6px 18px; font-size:14px; color:var(--acc); display:none; pointer-events:none;}
  /* 勝敗 */
  #end{position:absolute; inset:0; display:none; align-items:center; justify-content:center;
    flex-direction:column; gap:18px; border-radius:10px;
    background:radial-gradient(420px 260px at 50% 42%, rgba(40,32,64,.55), rgba(8,6,14,.82));}
  #end.show{display:flex;}
  #end h1{font-size:52px; letter-spacing:.22em; margin-left:.22em;
    text-shadow:0 0 24px currentColor, 0 4px 10px #000c;
    animation:endpop .5s cubic-bezier(.2,1.6,.4,1);}
  @keyframes endpop{0%{opacity:0; transform:scale(.6);} 60%{transform:scale(1.08);} 100%{opacity:1; transform:scale(1);}}
  #end button{background:linear-gradient(180deg,#5c4a17,#362b08); color:var(--acc);
    border:1px solid #b89031; border-radius:11px; padding:12px 36px; font-size:17px;
    cursor:pointer; box-shadow:0 4px 14px #000a;}
  #end button:hover{filter:brightness(1.25);}
  /* ===== タイトル画面 ===== */
  #dtitle{position:absolute; inset:0; z-index:30; display:none; align-items:center;
    justify-content:center; flex-direction:column; gap:14px; border-radius:10px; overflow:hidden;}
  #dtitle.show{display:flex;}
  #dtbg{position:absolute; inset:0; background:linear-gradient(180deg,#17121f,#0b0813);
    background-size:cover; background-position:center bottom; image-rendering:pixelated;
    filter:brightness(.9);}
  #dtitle::before{content:""; position:absolute; inset:0;
    background:radial-gradient(70% 62% at 50% 44%, transparent 30%, rgba(5,3,10,.78) 100%);}
  #dtlogo{position:relative; font-size:54px; font-weight:900; letter-spacing:.1em;
    line-height:1.12; text-align:center;
    background:linear-gradient(180deg,#ffe9a8 15%, var(--acc) 45%, #ff9d5c 80%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 3px 0 #3d2c05) drop-shadow(0 6px 16px #000d);
    animation:tlogo .8s ease-out;}
  @keyframes tlogo{from{opacity:0; transform:translateY(-14px);} to{opacity:1;}}
  #dtsub{position:relative; color:#cfc8e0; font-size:14px; letter-spacing:.3em;
    text-shadow:0 2px 6px #000;}
  #dtstart{position:relative; margin-top:16px; font-size:19px; letter-spacing:.12em;
    background:linear-gradient(180deg,#5c4a17,#362b08); color:var(--acc);
    border:2px solid #b89031; border-radius:13px; padding:14px 46px; cursor:pointer;
    box-shadow:0 0 0 1px #000, 0 6px 20px #000c, 0 0 24px #ffd36b33;
    animation:tpulse 1.6s ease-in-out infinite;}
  #dtstart:hover{filter:brightness(1.3); animation-play-state:paused;}
  @keyframes tpulse{0%,100%{box-shadow:0 0 0 1px #000, 0 6px 20px #000c, 0 0 18px #ffd36b22;}
    50%{box-shadow:0 0 0 1px #000, 0 6px 20px #000c, 0 0 34px #ffd36b66;}}
  #dtver{position:absolute; bottom:12px; right:16px; color:#6a6284; font-size:10px;
    letter-spacing:.2em;}
  /* ドラッグ中のゴーストカード */
  #dragGhost{position:fixed; pointer-events:none; display:none; z-index:50;
    background:rgba(111,179,255,.22); border:1.5px dashed var(--blue); border-radius:8px;
    color:#bcd9ff; font-size:12px; padding:4px 10px;}

  /* ===== ダンジョン探索(マウスだけで探索) ===== */
  #dungeon{position:absolute; inset:0; border-radius:10px; display:none;
    flex-direction:column; overflow:hidden; z-index:20;
    background:
      radial-gradient(700px 320px at 70% -8%, #2b224688, transparent 60%),
      radial-gradient(600px 300px at -5% 108%, #231a3e88, transparent 60%),
      linear-gradient(180deg,#131020,#0c0a14);}
  #dungeon.show{display:flex;}
  #dhud{flex:none; display:flex; align-items:center; gap:16px; padding:8px 14px;
    background:linear-gradient(180deg,#221b36cc,#171226cc); border-bottom:1px solid #000;
    position:relative;}
  #dhleft{display:flex; flex-direction:column; gap:4px; align-items:center; flex:none;}
  #dhgauges{display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; max-width:420px;}
  #dhgauges .dgauge .bar{flex:1; width:auto; min-width:70px;}
  .dgauge .k{width:52px; flex:none; font-size:11px; color:var(--dim); text-align:right;
    white-space:nowrap;}
  #dhbtns{display:flex; flex-direction:column; gap:5px; flex:none; margin-left:auto;}
  #dhbtns button{white-space:nowrap;}
  #dhud::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
    background:linear-gradient(90deg,transparent,#ffd36b66,transparent);}
  #dfloor{font-weight:800; font-size:17px; letter-spacing:.1em;
    background:linear-gradient(90deg,var(--acc),#ff9d5c);
    -webkit-background-clip:text; background-clip:text; color:transparent;}
  .dgauge{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--dim);}
  /* RPG風ゲージ: 彫り込み枠+ベベル+目盛り+上面ハイライト */
  .dgauge .bar{width:124px; height:14px; background:#0b0912; border:2px solid #4a4168;
    border-radius:4px; overflow:hidden; position:relative;
    box-shadow:inset 0 0 0 1px #000, inset 0 3px 5px #000d, 0 1px 0 #ffffff14;}
  .dgauge .bar i{display:block; height:100%; transition:width .3s;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.35),
      inset -1px 0 0 rgba(255,255,255,.25);}
  .dgauge .bar::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(90deg, transparent 0 11px, rgba(0,0,0,.3) 11px 12.5px);}
  .dgauge .v{min-width:54px; color:var(--txt); text-shadow:0 1px 2px #000;}
  .dgauge .xpbar{width:70px;}
  #dlv{font-size:12px; font-weight:800; color:#d9b4ff; background:#c9a3ff14;
    border:1px solid #c9a3ff55; border-radius:10px; padding:2px 10px;}
  .spdot{font-size:10px; font-weight:800; color:#241a00; border-radius:8px; padding:1px 6px;
    background:linear-gradient(180deg,var(--acc),#ff9d5c); margin-left:4px;
    box-shadow:0 0 8px #ffd36b66; animation:sppulse 1.4s infinite;}
  @keyframes sppulse{0%,100%{opacity:1;} 50%{opacity:.55;}}
  /* スキルツリー */
  .gtree{display:flex; gap:20px; flex:1; align-items:flex-start;}
  .gbr{flex:1; display:flex; flex-direction:column; align-items:center;}
  .gbr h4{margin:0 0 12px; font-size:13px; letter-spacing:.1em;
    background:linear-gradient(90deg,var(--acc),#ff9d5c);
    -webkit-background-clip:text; background-clip:text; color:transparent;}
  .tnode{width:172px; position:relative; text-align:center; padding:9px 10px 8px;
    background:linear-gradient(180deg,#262038,#1b1727); border:2px solid #3b3458;
    border-radius:12px; margin-bottom:20px; transition:border-color .15s, transform .12s;}
  .tnode:not(:last-child)::after{content:""; position:absolute; left:50%; bottom:-20px;
    width:2px; height:20px; background:#3b3458;}
  .tnode .tic{height:40px; display:flex; align-items:center; justify-content:center;
    font-size:24px;}
  .tnode .tic img{width:36px; height:36px; object-fit:contain; image-rendering:pixelated;}
  .tnode .tn{font-size:12px; font-weight:bold;}
  .tnode .td{font-size:10px; color:var(--dim); margin-top:2px; line-height:1.4;}
  .tnode .tcost{position:absolute; top:-9px; right:8px; font-size:10px; font-weight:800;
    background:linear-gradient(180deg,var(--acc),#ff9d5c); color:#241a00;
    border-radius:8px; padding:1px 8px; box-shadow:0 1px 5px #000a;}
  .tnode.owned{border-color:var(--acc); box-shadow:0 0 0 1px #ffd36b33, 0 0 12px #ffd36b22;}
  .tnode.owned .tcost{display:none;}
  .tnode.owned::before{content:"✓"; position:absolute; top:-9px; left:8px; font-size:11px;
    color:#241a00; background:var(--acc); border-radius:8px; padding:0 6px; font-weight:800;}
  .tnode.avail{border-color:#7dffd488; cursor:pointer;}
  .tnode.avail:hover{transform:translateY(-2px); border-color:var(--green);
    box-shadow:0 5px 14px #000a, 0 0 12px #7dffd433;}
  .tnode.locked{opacity:.45;}
  .gtreehead{display:flex; align-items:center; gap:12px; margin-bottom:4px;}
  #dcamp{margin-left:auto; background:linear-gradient(180deg,#5c4a17,#362b08);
    color:var(--acc); border:1px solid #b89031; border-radius:9px; padding:7px 14px;
    font-size:13px; cursor:pointer;}
  #dcamp:hover{filter:brightness(1.2);}
  #dcamp:disabled{opacity:.35; cursor:default; filter:none;}
  /* 左=ルート(密集ミニマップ) / 右=部屋の中(クリック探索) */
  #dmain{flex:1; display:flex; min-height:0;}
  #dmapwrap{width:330px; flex:none; display:flex; flex-direction:column;
    border-right:1px solid #2a2440; background:#00000026;}
  .dptitle{flex:none; font-size:11px; color:var(--dim); letter-spacing:.14em;
    padding:7px 12px 4px; display:flex; align-items:center; gap:6px;}
  .dptitle::before{content:""; width:3px; height:11px; border-radius:2px;
    background:linear-gradient(180deg,var(--acc),#ff9d5c);}
  #dmap{flex:1; position:relative; min-height:0; overflow:hidden;}  /* 枠外のタイルは見せない */
  #dedges{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
  /* 部屋タイル: 石床の彫り込み風(目地パターン+上面ハイライト+下面の影) */
  .droom{position:absolute; width:60px; height:54px; transform:translate(-50%,-50%);
    background:
      repeating-linear-gradient(90deg, transparent 0 13px, rgba(0,0,0,.18) 13px 14px),
      repeating-linear-gradient(0deg, transparent 0 11px, rgba(0,0,0,.18) 11px 12px),
      linear-gradient(180deg,#363050 0%, #282243 55%, #1e1933 100%);
    border:2px solid #4a4168; border-radius:7px;
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:0; font-size:9px; color:var(--dim);
    box-shadow:inset 0 2px 0 #ffffff22, inset 0 -4px 0 #00000055,
      inset 2px 0 0 #ffffff0d, inset -2px 0 0 #00000033, 0 4px 8px #000a;
    user-select:none; text-shadow:0 1px 2px #000;
    transition:border-color .15s, transform .12s, box-shadow .15s;}
  .droom .ric{font-size:16px; line-height:1.1;}
  .droom .ric img.rimg{width:24px; height:24px; object-fit:contain;
    image-rendering:pixelated; display:block;}
  .droom .ric img.rimg.dim{opacity:.4; filter:grayscale(.6);}
  .ditem img{width:18px; height:18px; object-fit:contain; image-rendering:pixelated;
    vertical-align:-4px; margin-right:3px;}
  .droom.frontier{border-style:dashed; color:#8f86ad;
    background:
      repeating-linear-gradient(45deg, transparent 0 7px, rgba(0,0,0,.22) 7px 9px),
      linear-gradient(180deg,#221d34,#171225);
    box-shadow:inset 0 0 14px #000b, 0 3px 7px #0009;}
  .droom.go{cursor:pointer;}
  .droom.go:hover{border-color:var(--acc); transform:translate(-50%,-52%);
    box-shadow:inset 0 2px 0 #ffffff22, inset 0 -4px 0 #00000055,
      0 6px 14px #000b, 0 0 12px #ffd36b44;}
  .droom.visited{border-style:solid;}
  .droom.cur{border-color:var(--acc);
    box-shadow:inset 0 2px 0 #ffffff2a, inset 0 -4px 0 #00000055,
      0 0 0 1px #ffd36b55, 0 0 16px #ffd36b44, 0 4px 8px #000a;
    color:var(--txt);}
  .droom.cur::before{content:""; position:absolute; top:-13px; right:-9px; width:20px;
    height:20px; background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAABXCAYAAABfjfj+AAABeElEQVR4nO3bMWrCUBzH8ZfSxSlXcHb3Bg5FCqFkyZChHQsepwdwcAiUUArFyRu4d/YKTo4pT0z5tdilIfm/JN8PBOOgwS95zyRG5wAAAAAAAAAAAAAAAADAZctF5ReLFLch9c+Wi+ru6fm8Xmx3nW//pvMtBizqeoPZZQicDsd/vf79cx8NYpgks3m1eXlo9B75Kq6K7S4a1JyRr95+PG8aaVBzRv4rzqhjeOn92lkyGyaby7DwASbT+LzuH+sg5cfjOPaMVPYA/6Hrbxb/6IPUcUYzTNI/gox2zkiN54gg5ozyynxgMUeYH4Ems3mjk7A2j0CDkkgoizPXoI4zrBFDECPUGJNp7NavZeUXN/YY1oghiCGIIYghiCGIIYghiCGI0YcYRUs/FPUyhgViCGIIYvQhRsY1UFvB7hkWiCGIIYghiCGIIYghiCGIIYghiCGIIaKQzkpPh+P3bUr+Lp5rt0C2eTnQ7F8FTbQVJKg9I9QLxXAj9wVu1luZ3Qt9fQAAAABJRU5ErkJggg==') center/contain no-repeat;
    image-rendering:pixelated; filter:drop-shadow(0 1px 2px #000);}
  /* 右: 部屋の中 */
  #droomv{flex:1; min-width:0; display:flex; flex-direction:column; padding:10px 16px;
    gap:8px; overflow-y:auto;}
  #drhead{display:flex; align-items:baseline; gap:10px;}
  #drname{font-size:17px; font-weight:800; color:var(--txt);}
  #drdesc{font-size:11px; color:var(--dim);}
  #drprops{display:flex; flex-wrap:wrap; gap:12px; align-content:flex-start; padding-top:4px;}
  .dprop{width:106px; height:104px; background:linear-gradient(180deg,#2b2542,#1b1727);
    border:2px solid #4a4168; border-radius:10px; cursor:pointer; user-select:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; font-size:11px; color:var(--txt); text-shadow:0 1px 2px #000;
    box-shadow:inset 0 2px 0 #ffffff18, inset 0 -3px 0 #00000055, 0 4px 10px #0009;
    transition:border-color .15s, transform .12s, box-shadow .15s; position:relative;}
  .dprop:hover{border-color:var(--acc); transform:translateY(-2px);
    box-shadow:inset 0 2px 0 #ffffff18, inset 0 -3px 0 #00000055,
      0 6px 16px #000a, 0 0 12px #ffd36b44;}
  /* アイコンの収まる「くぼみスロット」 */
  .dprop .pic{width:72px; height:50px; display:flex; align-items:center; justify-content:center;
    font-size:28px; line-height:1; background:#120f1d; border-radius:7px;
    box-shadow:inset 0 3px 7px #000d, inset 0 0 0 1px #3b3458, 0 1px 0 #ffffff12;}
  .dprop .pic img{width:42px; height:42px; object-fit:contain; image-rendering:pixelated;
    display:block; filter:drop-shadow(0 2px 2px #000a);}
  .dprop .hint{font-size:9px; color:var(--dim);}
  .dprop.done{opacity:.45; cursor:default; border-style:dashed;}
  .dprop.done:hover{border-color:#3b3458; transform:none; box-shadow:0 3px 10px #0008;}
  .dprop.gold{border-color:#b89031;}
  .dprop .pdone{position:absolute; top:4px; right:6px; font-size:11px; color:var(--acc);}
  /* 床に落ちている物(クリックで拾う・放置可) */
  #drdrops{display:flex; flex-wrap:wrap; gap:9px; align-items:center; padding-top:10px;
    border-top:1px dashed #2f2947; margin-top:6px;}
  #drdrops:empty{display:none;}
  #drdrops .dlbl{font-size:11px; color:var(--dim);}
  .ddrop{display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
    background:linear-gradient(180deg,#3a3010,#241d06); border:1.5px solid #b89031;
    border-radius:10px; padding:5px 11px; font-size:12px; color:var(--txt);
    box-shadow:0 2px 8px #0007, 0 0 10px #ffd36b22;
    transition:transform .12s, box-shadow .15s; animation:dpop .22s ease-out;}
  .ddrop:hover{transform:translateY(-2px); box-shadow:0 5px 14px #000a, 0 0 14px #ffd36b44;}
  .ddrop .dpic{font-size:16px; line-height:1;}
  .ddrop .dpic img{width:22px; height:22px; object-fit:contain; image-rendering:pixelated;
    display:block;}
  .ddrop .get{font-size:10px; color:var(--acc);}
  @keyframes dpop{from{opacity:0; transform:translateY(5px) scale(.9);} to{opacity:1;}}

  /* ===== RPGウィンドウ化: ドット絵フォント + 9スライス窓枠 ===== */
  @font-face{font-family:'DotGothic16';
    src:url('assets/fonts/DotGothic16.ttf') format('truetype'); font-display:swap;}
  body{font-family:'DotGothic16','Segoe UI','Hiragino Sans','Noto Sans JP',sans-serif;}
  /* ブロンズ枠: カード・ブロック類(金枠と同系色で統一) */
  #menu .card, .dprop, .gsk, .git, .geq, .tnode, .gstat{
    border:8px solid transparent !important;
    border-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAkklEQVR4nGNgGOmAEYvYf3raycQwwIAR3efXdlXQ1EIttw4Uu5kYBhiw4JLYsnETVS3y8ffDKs7EMFhDAAaW7HjAQAmI8VDAK8/EMNhDAAYu3f2GrczACfSUuYgqT5gYBhgwjTqAYTQKBhgwjTqAYTQKhkpdoEdk2T78QiCGQH0+fEPAB0cbbtiFACPDSO8ZjQIACGUTSVDMHAYAAAAASUVORK5CYII=') 10 round;
    border-radius:0; image-rendering:pixelated;
    background:#1b1727 !important; box-shadow:0 3px 8px #0008 !important;}
  #menu .card .cdb{border-radius:0;}
  /* 金枠: 重要パネル・ボタン類 */
  #gmbox{border:12px solid transparent; border-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAj0lEQVR4nGNgGOmAEYvYf3raycQwwIAR3ef/X66grYXiESh2MzEMMGDBJbFzeSdVLXKPLMcqzsQwWEMABlrnXGGgBFSn6OCVZ2IY7CEAA4ev/MZWZuAEtjqsRJUnTAwDDJhGHcAwGgUDDJhGHcAwGgVDpS6wJbJsH34hUE2gPh/yIcDIMNJbxYwMI71nNAoAg5AWt/6L8ZoAAAAASUVORK5CYII=') 10 round;
    border-radius:0; image-rendering:pixelated;}
  #dtstart, #endTurn, #dcamp, #dmenuBtn, #dretry, #end button, .gslot{
    border:8px solid transparent !important;
    border-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAj0lEQVR4nGNgGOmAEYvYf3raycQwwIAR3ef/X66grYXiESh2MzEMMGDBJbFzeSdVLXKPLMcqzsQwWEMABlrnXGGgBFSn6OCVZ2IY7CEAA4ev/MZWZuAEtjqsRJUnTAwDDJhGHcAwGgUDDJhGHcAwGgVDpS6wJbJsH34hUE2gPh/yIcDIMNJbxYwMI71nNAoAg5AWt/6L8ZoAAAAASUVORK5CYII=') 10 round;
    border-radius:0; image-rendering:pixelated;}
  .gslot{border-width:10px !important;}
  /* 枠に合わせた微調整 */
  #menu .card{padding:4px 6px 3px 14px; min-width:68px;}
  #dtstart{animation:none;}
  #dtstart:hover{filter:brightness(1.3);}
  .droom{font-family:'DotGothic16',sans-serif;}
  /* 大区画も「ウィンドウ」にする(HUD/ルート/さがす/所持品欄) */
  #dungeon{background:#0a0812; padding:8px; gap:8px;}
  #dhud{border:10px solid transparent; border-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAj0lEQVR4nGNgGOmAEYvYf3raycQwwIAR3ef/X66grYXiESh2MzEMMGDBJbFzeSdVLXKPLMcqzsQwWEMABlrnXGGgBFSn6OCVZ2IY7CEAA4ev/MZWZuAEtjqsRJUnTAwDDJhGHcAwGgUDDJhGHcAwGgVDpS6wJbJsH34hUE2gPh/yIcDIMNJbxYwMI71nNAoAg5AWt/6L8ZoAAAAASUVORK5CYII=') 10 round;
    image-rendering:pixelated; background:linear-gradient(180deg,#221b36,#171226);}
  #dhud::after{display:none;}
  #dmain{gap:8px;}
  #dmapwrap, #droomv{border:10px solid transparent;
    border-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAkklEQVR4nGNgGOmAEYvYf3raycQwwIAR3efXdlXQ1EIttw4Uu5kYBhiw4JLYsnETVS3y8ffDKs7EMFhDAAaW7HjAQAmI8VDAK8/EMNhDAAYu3f2GrczACfSUuYgqT5gYBhgwjTqAYTQKBhgwjTqAYTQKhkpdoEdk2T78QiCGQH0+fEPAB0cbbtiFACPDSO8ZjQIACGUTSVDMHAYAAAAASUVORK5CYII=') 10 round; image-rendering:pixelated;
    background:#15111f;}
  #dmapwrap{border-right-width:10px;}
  #dfoot{border:10px solid transparent; border-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAkklEQVR4nGNgGOmAEYvYf3raycQwwIAR3efXdlXQ1EIttw4Uu5kYBhiw4JLYsnETVS3y8ffDKs7EMFhDAAaW7HjAQAmI8VDAK8/EMNhDAAYu3f2GrczACfSUuYgqT5gYBhgwjTqAYTQKBhgwjTqAYTQKhkpdoEdk2T78QiCGQH0+fEPAB0cbbtiFACPDSO8ZjQIACGUTSVDMHAYAAAAASUVORK5CYII=') 10 round;
    image-rendering:pixelated; background:#15111f; min-height:58px;}
  /* 段差解消: カード内のくぼみ・多重ベベルを無くしてフラットに */
  .dprop .pic{background:transparent; box-shadow:none; height:52px;}
  .dprop:hover{transform:translateY(-2px);
    box-shadow:0 5px 12px #000a, 0 0 10px #ffd36b33 !important;}
  .gsk .sic, .git .sic, .geq .sic{background:transparent; box-shadow:none;}
  /* 絵文字→生成アイコンの小グリフ */
  .uic{width:17px; height:17px; object-fit:contain; image-rendering:pixelated;
    vertical-align:-3px; margin-right:2px;}
  .dgauge .k .uic{width:15px; height:15px; margin-right:1px;}
  #gmtabs .gmt .uic{width:18px; height:18px; vertical-align:-4px;}
  .droom .ric img.rflag{width:18px; height:18px;}
  #menu .card.cat .cico img{width:24px; height:24px; object-fit:contain;
    image-rendering:pixelated; display:block; margin:0 auto;}
  #gmtabs .gmt{display:flex; align-items:center; gap:4px;}  /* 下部=キャラの顔+しゃべるフィード(LINE風に上へ流れる) */
  #dfoot{flex:none; display:flex; align-items:stretch; gap:10px; padding:6px 10px;
    height:118px;}
  #dcface{flex:none; width:84px; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(44px 44px at 50% 42%, #2b2246, #16121f);
    border:2px solid #b8903166; border-radius:12px;
    box-shadow:0 0 0 2px #1b1727, inset 0 0 14px #0009;}
  #dcface img{width:72px; height:72px; object-fit:contain; image-rendering:pixelated;
    filter:drop-shadow(0 2px 3px #000a);}
  #dchatlog{flex:1; min-width:0; overflow-y:auto; display:flex; flex-direction:column;
    gap:4px; padding:2px 6px 2px 0; scroll-behavior:smooth;
    scrollbar-width:none;}
  #dchatlog::-webkit-scrollbar{display:none;}   /* チャットは自動スクロールなのでバー非表示 */
  /* ゲーム内のスクロールバーは細く控えめに(スマホ想定でタップ操作主体) */
  #dungeon ::-webkit-scrollbar, #gmbody::-webkit-scrollbar{width:6px; height:6px;}
  #dungeon ::-webkit-scrollbar-thumb, #gmbody::-webkit-scrollbar-thumb{
    background:#3b3458aa; border:none; border-radius:3px;}
  #dungeon ::-webkit-scrollbar-track, #gmbody::-webkit-scrollbar-track{background:transparent;}
  #dchatlog .cb{align-self:flex-start; max-width:86%; background:linear-gradient(180deg,#2e2745,#241f38);
    border:1px solid #b8903155; border-radius:3px 11px 11px 11px; padding:4px 12px;
    font-size:12px; color:var(--txt); box-shadow:0 2px 5px #0007;
    animation:cbin .22s ease-out;}
  #dchatlog .cs{align-self:center; font-size:10px; color:var(--dim); padding:0 8px;}
  @keyframes cbin{from{opacity:0; transform:translateY(7px);} to{opacity:1;}}
  #ditems{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:auto;
    padding-top:8px; border-top:1px dashed #2f2947;}
  #ditems .lbl{font-size:11px; color:var(--dim); margin-right:2px;}
  .ditem{background:linear-gradient(180deg,#2e2745,#211c33); border:1px solid #4e4576;
    border-radius:9px; padding:4px 10px; font-size:12px; cursor:pointer; user-select:none;
    transition:border-color .13s, transform .12s;}
  .ditem:hover{border-color:var(--acc); transform:translateY(-1px);}
  .ditem .cnt{color:var(--acc); font-size:11px; margin-left:3px;}
  #dlog{margin-left:auto; text-align:right; font-size:11px; color:var(--dim);
    line-height:1.5; max-width:46%;}
  #dlog .new{color:var(--acc);}
  /* 敗北画面のスコア */
  #doverStats{display:flex; flex-direction:column; gap:5px; min-width:250px;}
  #doverStats .dr{display:flex; justify-content:space-between; gap:24px; font-size:13px;
    background:#ffffff08; border:1px solid #3a3450; border-radius:8px; padding:6px 14px;}
  #doverStats .dr b{color:var(--acc);}
  /* ===== 勝利リザルト ===== */
  #dresult{position:absolute; inset:0; display:none; align-items:center; justify-content:center;
    background:rgba(6,4,12,.6); z-index:7; backdrop-filter:blur(2px);}
  #dresult.show{display:flex;}
  #drbox{min-width:360px; max-width:520px; display:flex; flex-direction:column; gap:12px;
    align-items:center; padding:20px 26px;
    background:#1b1727; border:12px solid transparent;
    border-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAj0lEQVR4nGNgGOmAEYvYf3raycQwwIAR3ef/X66grYXiESh2MzEMMGDBJbFzeSdVLXKPLMcqzsQwWEMABlrnXGGgBFSn6OCVZ2IY7CEAA4ev/MZWZuAEtjqsRJUnTAwDDJhGHcAwGgUDDJhGHcAwGgVDpS6wJbJsH34hUE2gPh/yIcDIMNJbxYwMI71nNAoAg5AWt/6L8ZoAAAAASUVORK5CYII=') 10 round; image-rendering:pixelated;
    box-shadow:0 20px 60px #000d; animation:mpop2 .25s ease-out;}
  #drbox h2{margin:0; font-size:30px; letter-spacing:.18em;
    background:linear-gradient(180deg,#ffe9a8,var(--acc) 50%,#ff9d5c);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 2px 0 #3d2c05) drop-shadow(0 0 14px #ffd36b44);}
  #drrows{display:flex; flex-direction:column; gap:6px; width:100%;}
  #drrows .dr{display:flex; justify-content:space-between; gap:20px; font-size:13px;
    background:#ffffff07; border:1px solid #3a3450; border-radius:8px; padding:7px 14px;}
  #drrows .dr b{color:var(--acc);}
  #drrows .lvup{color:#ffe9a8; text-align:center; font-size:15px; letter-spacing:.1em;
    text-shadow:0 0 12px #ffd36b88; animation:sppulse 1.2s infinite;}
  #drclose{font-size:15px; padding:10px 30px; cursor:pointer; color:var(--acc);
    background:linear-gradient(180deg,#5c4a17,#362b08); border:8px solid transparent;
    border-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAj0lEQVR4nGNgGOmAEYvYf3raycQwwIAR3ef/X66grYXiESh2MzEMMGDBJbFzeSdVLXKPLMcqzsQwWEMABlrnXGGgBFSn6OCVZ2IY7CEAA4ev/MZWZuAEtjqsRJUnTAwDDJhGHcAwGgUDDJhGHcAwGgVDpS6wJbJsH34hUE2gPh/yIcDIMNJbxYwMI71nNAoAg5AWt/6L8ZoAAAAASUVORK5CYII=') 10 round; image-rendering:pixelated;}
  #drclose:hover{filter:brightness(1.25);}
  /* ===== メニュー(ステータス/装備/スキル/アイテム) ===== */
  #dmenuBtn{background:linear-gradient(180deg,#312949,#241f38); color:var(--txt);
    border:1px solid #4e4576; border-radius:9px; padding:7px 14px; font-size:13px; cursor:pointer;}
  #dmenuBtn:hover{border-color:var(--acc); color:#fff;}
  #gmenu{position:absolute; inset:0; display:none; align-items:center; justify-content:center;
    background:rgba(6,4,12,.72); z-index:6; backdrop-filter:blur(3px);}
  #gmenu.show{display:flex;}
  #gmbox{width:min(860px,94%); height:min(520px,92%); display:flex; flex-direction:column;
    border-radius:16px; position:relative; overflow:hidden;
    background:
      radial-gradient(500px 220px at 80% -10%, #2b224666, transparent 60%),
      linear-gradient(180deg,#201a31,#141020);
    border:1px solid #b8903155;
    box-shadow:0 0 0 1px #000, 0 0 0 4px #1b1727, 0 0 0 5px #b8903144,
      0 24px 70px #000d, inset 0 1px 0 #ffffff12;
    animation:mpop2 .2s ease-out;}
  @keyframes mpop2{from{opacity:0; transform:translateY(12px) scale(.98);} to{opacity:1;}}
  #gmbox::before,#gmbox::after{content:"◆"; position:absolute; color:#b89031; font-size:10px;
    text-shadow:0 0 8px #ffd36b66; z-index:2;}
  #gmbox::before{top:6px; left:10px;}
  #gmbox::after{top:6px; right:10px;}
  #gmtabs{flex:none; display:flex; align-items:center; gap:4px; padding:10px 14px 0;
    border-bottom:1px solid #b8903133; position:relative;}
  #gmtabs::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
    background:linear-gradient(90deg,transparent,#ffd36b55,transparent);}
  #gmtabs .gmt{padding:8px 18px 10px; cursor:pointer; color:var(--dim); font-weight:bold;
    font-size:13px; border-radius:9px 9px 0 0; user-select:none; position:relative;
    transition:color .15s, background .15s;}
  #gmtabs .gmt:hover{color:var(--txt); background:#ffffff08;}
  #gmtabs .gmt.on{color:var(--acc); background:#ffd36b12;}
  #gmtabs .gmt.on::after{content:""; position:absolute; left:12px; right:12px; bottom:0;
    height:3px; border-radius:3px 3px 0 0;
    background:linear-gradient(90deg,var(--acc),#ff9d5c); box-shadow:0 -2px 10px #ffd36b66;}
  #gmclose{margin-left:auto; background:none; border:none; color:var(--dim); font-size:17px;
    cursor:pointer; padding:4px 10px;}
  #gmclose:hover{color:var(--red);}
  #gmbody{flex:1; min-height:0; overflow-y:auto; padding:16px 20px; display:flex; gap:18px;}
  .gmcol{display:flex; flex-direction:column; gap:12px;}
  /* ステータス */
  .gport{width:170px; flex:none; text-align:center;}
  .gport .pframe{width:160px; height:160px; margin:0 auto; border-radius:14px; display:flex;
    align-items:center; justify-content:center; overflow:hidden; position:relative;
    background:radial-gradient(90px 90px at 50% 36%, #2b2246, #16121f);
    border:2px solid #b8903166; box-shadow:0 0 0 3px #1b1727, 0 0 18px #ffd36b22,
      inset 0 0 24px #0009;}
  .gport .pframe img{width:150px; height:150px; object-fit:contain; image-rendering:pixelated;}
  .gport .pname{margin-top:8px; font-weight:800; font-size:15px;
    background:linear-gradient(90deg,var(--acc),#ff9d5c);
    -webkit-background-clip:text; background-clip:text; color:transparent;}
  .gport .psub{font-size:10px; color:var(--dim); letter-spacing:.14em;}
  .gstats{flex:1; display:flex; flex-direction:column; gap:7px; max-width:430px;}
  .gstat{display:flex; align-items:center; gap:10px; background:#ffffff06;
    border:1px solid #2e2848; border-radius:10px; padding:7px 12px; font-size:13px;}
  .gstat .k{width:78px; color:var(--dim); font-size:12px;}
  .gstat .bar{flex:1; height:14px; background:#0b0912; border:2px solid #4a4168;
    border-radius:4px; overflow:hidden; position:relative;
    box-shadow:inset 0 0 0 1px #000, inset 0 3px 5px #000d;}
  .gstat .bar i{display:block; height:100%;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.35);}
  .gstat .bar::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(90deg, transparent 0 14px, rgba(0,0,0,.3) 14px 15.5px);}
  .gstat .v{min-width:72px; text-align:right;}
  .gstat .bonus{color:var(--green); font-size:11px;}
  /* 装備 */
  .gslots{display:flex; gap:12px; flex-wrap:wrap;}
  .gslot{width:150px; background:linear-gradient(180deg,#262038,#1b1727);
    border:2px solid #b8903144; border-radius:13px; padding:10px; text-align:center;
    cursor:pointer; transition:border-color .15s, transform .12s; box-shadow:0 3px 10px #0008;}
  .gslot:hover{border-color:var(--acc); transform:translateY(-2px);}
  .gslot .sk{font-size:10px; color:var(--dim); letter-spacing:.1em;}
  .gslot .sic{height:52px; display:flex; align-items:center; justify-content:center;
    font-size:30px; margin:5px 0;}
  .gslot .sic img{width:46px; height:46px; object-fit:contain; image-rendering:pixelated;}
  .gslot .sn{font-size:12px;}
  .gslot .sd{font-size:10px; color:var(--green); min-height:13px;}
  .gslot.empty .sn{color:#58506e;}
  .glist{display:flex; flex-wrap:wrap; gap:10px;}
  .geq{width:118px; background:linear-gradient(180deg,#262038,#1b1727); position:relative;
    border:1.5px solid #3b3458; border-radius:11px; padding:8px; text-align:center;
    cursor:pointer; transition:border-color .15s, transform .12s;}
  .geq:hover{border-color:var(--acc); transform:translateY(-2px);}
  .geq .sic{height:44px; display:flex; align-items:center; justify-content:center; font-size:26px;}
  .geq .sic img{width:40px; height:40px; object-fit:contain; image-rendering:pixelated;}
  .geq .sn{font-size:11px;}
  .geq .sd{font-size:9px; color:var(--green);}
  .geq.on{border-color:var(--acc); box-shadow:0 0 0 1px #ffd36b44, 0 0 12px #ffd36b33;}
  .geq .eqmark{position:absolute; top:3px; left:5px; font-size:9px; color:var(--acc);}
  /* スキル・アイテム一覧 */
  .gskills{display:flex; flex-wrap:wrap; gap:11px;}
  .gsk{width:152px; background:linear-gradient(180deg,#262038,#1b1727);
    border:1.5px solid #3b3458; border-radius:12px; padding:10px; text-align:center;}
  .gsk .sic{height:46px; display:flex; align-items:center; justify-content:center; font-size:26px;}
  .gsk .sic img{width:42px; height:42px; object-fit:contain; image-rendering:pixelated;}
  .gsk .sn{font-size:13px; font-weight:bold; margin-top:2px;}
  .gsk .swt{font-size:10px; color:var(--acc);}
  .gsk .sd{font-size:10px; color:var(--dim); margin-top:3px; line-height:1.5;}
  .gitems{display:flex; flex-wrap:wrap; gap:11px;}
  .git{width:140px; background:linear-gradient(180deg,#262038,#1b1727);
    border:1.5px solid #3b3458; border-radius:12px; padding:10px; text-align:center;}
  .git .sic{height:46px; display:flex; align-items:center; justify-content:center; font-size:28px;}
  .git .sic img{width:42px; height:42px; object-fit:contain; image-rendering:pixelated;}
  .git .sn{font-size:12px; margin-top:2px;}
  .git .cnt{color:var(--acc); font-size:11px;}
  .git .sd{font-size:10px; color:var(--dim);}
  .git button{margin-top:6px; font-size:11px; padding:3px 14px;
    background:linear-gradient(180deg,#5c4a17,#362b08); color:var(--acc);
    border:1px solid #b89031; border-radius:7px; cursor:pointer;}
  .git button:hover{filter:brightness(1.2);}
  .git button:disabled{opacity:.4; cursor:default;}
  .gmnote{font-size:11px; color:var(--dim);}
  #dover{position:absolute; inset:0; display:none; align-items:center; justify-content:center;
    flex-direction:column; gap:14px; z-index:5;
    background:radial-gradient(520px 300px at 50% 30%, rgba(58,16,24,.92), rgba(8,6,14,.97));}
  #dover.show{display:flex;}
  #dover h1{font-size:40px; letter-spacing:.18em; color:var(--red);
    text-shadow:0 0 22px #ff6f7d66, 0 4px 10px #000c; animation:endpop .5s cubic-bezier(.2,1.6,.4,1);}
  #dover p{color:var(--dim);}
  #dover button{background:var(--panel2); color:var(--txt); border:1px solid var(--acc);
    border-radius:10px; padding:11px 30px; font-size:16px; cursor:pointer;}
  #dover button:hover{background:var(--line);}

/* ===== CSP対応: style属性の代わりのユーティリティクラス ===== */
.dim{color:var(--dim);}
.flex1{flex:1;}
.emptynote{color:var(--dim); font-size:12px;}
.dropnote{font-size:10px; color:var(--dim); text-align:center;}
.spv{font-weight:800; color:var(--acc);}
.fill-xp{background:#c9a3ff;}
.fill-hp{background:#7ed87e;}
.fill-mp{background:#6fb3ff;}
.fill-fd{background:#ffb86b;}
/* レア度: 文字色 / 枠色 / リング */
.rc-common{color:#cfc8e0;} .rc-uncommon{color:#7dffa8;} .rc-rare{color:#6fb3ff;}
.rc-epic{color:#c9a3ff;} .rc-legend{color:#ffd36b;}
.ddrop.rb-common{border-color:#cfc8e0;} .ddrop.rb-uncommon{border-color:#7dffa8;}
.ddrop.rb-rare{border-color:#6fb3ff;} .ddrop.rb-epic{border-color:#c9a3ff;}
.ddrop.rb-legend{border-color:#ffd36b;}
.rr-common{box-shadow:inset 0 0 0 2px #cfc8e066 !important;}
.rr-uncommon{box-shadow:inset 0 0 0 2px #7dffa866 !important;}
.rr-rare{box-shadow:inset 0 0 0 2px #6fb3ff66 !important;}
.rr-epic{box-shadow:inset 0 0 0 2px #c9a3ff66 !important;}
.rr-legend{box-shadow:inset 0 0 0 2px #ffd36b66 !important;}
.rr-common.on,.gslot.rr-common{box-shadow:inset 0 0 0 2px #cfc8e066, 0 0 12px #cfc8e055 !important;}
.rr-uncommon.on,.gslot.rr-uncommon{box-shadow:inset 0 0 0 2px #7dffa866, 0 0 12px #7dffa855 !important;}
.rr-rare.on,.gslot.rr-rare{box-shadow:inset 0 0 0 2px #6fb3ff66, 0 0 12px #6fb3ff55 !important;}
.rr-epic.on,.gslot.rr-epic{box-shadow:inset 0 0 0 2px #c9a3ff66, 0 0 12px #c9a3ff55 !important;}
.rr-legend.on,.gslot.rr-legend{box-shadow:inset 0 0 0 2px #ffd36b66, 0 0 12px #ffd36b55 !important;}
/* タイトル画面の言語切替 */
#dtlang{position:relative; display:flex; gap:6px; margin-top:6px;}
#dtlang button{background:#00000066; color:var(--dim); border:1px solid #4e4576;
  border-radius:8px; padding:4px 10px; font-size:11px; cursor:pointer; font-family:inherit;}
#dtlang button:hover{color:var(--txt); border-color:var(--acc);}
#dtlang button.on{color:var(--acc); border-color:var(--acc);}

/* ===== ランキング(ゲームオーバー画面) ===== */
#doverBody{display:flex; gap:22px; align-items:flex-start; max-width:820px; width:94%;}
#doverLeft{flex:1; display:flex; flex-direction:column; gap:10px; min-width:0;}
#doverRight{flex:1; min-width:0; background:#1b1727; padding:10px 14px;
  border:8px solid transparent; border-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAkklEQVR4nGNgGOmAEYvYf3raycQwwIAR3efXdlXQ1EIttw4Uu5kYBhiw4JLYsnETVS3y8ffDKs7EMFhDAAaW7HjAQAmI8VDAK8/EMNhDAAYu3f2GrczACfSUuYgqT5gYBhgwjTqAYTQKBhgwjTqAYTQKhkpdoEdk2T78QiCGQH0+fEPAB0cbbtiFACPDSO8ZjQIACGUTSVDMHAYAAAAASUVORK5CYII=') 10 round;
  image-rendering:pixelated;}
#rkForm{display:flex; gap:8px;}
#rkName{flex:1; min-width:0; background:#131020; color:var(--txt); border:1px solid #4e4576;
  border-radius:8px; padding:8px 10px; font:inherit; font-size:14px;}
#rkName:focus{outline:none; border-color:var(--acc);}
#rkSend{background:linear-gradient(180deg,#5c4a17,#362b08); color:var(--acc);
  border:1px solid #b89031; border-radius:8px; padding:8px 14px; cursor:pointer;
  font:inherit; font-size:13px; white-space:nowrap;}
#rkSend:hover{filter:brightness(1.2);}
#rkSend:disabled{opacity:.45; cursor:default; filter:none;}
#rkMsg{font-size:12px; color:var(--dim); min-height:18px;}
#rkMsg.ok{color:var(--acc);}
#rkMsg.ng{color:var(--red);}
.rkh{font-size:13px; color:var(--acc); margin-bottom:6px; letter-spacing:.06em;}
#rkList{margin:0; padding:0; list-style:none; font-size:12px;}
#rkList li{display:flex; gap:8px; align-items:center; padding:3px 4px; border-bottom:1px dashed #2f2947;}
#rkList li.me{background:#ffd36b14; color:var(--acc);}
#rkList .rn{width:22px; text-align:right; color:var(--dim);}
#rkList li:nth-child(-n+3) .rn{color:var(--acc); font-weight:800;}
#rkList .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#rkList .fl{color:var(--acc); min-width:42px; text-align:right;}
#rkList .lv{color:var(--dim); min-width:40px; text-align:right;}
#rkList .empty{color:var(--dim); justify-content:center; border:none;}