/* =========================================================
   index.css — デスクトップ画面のデザイン / desktop-only styles
   共通のシェル（ウィンドウ枠・タスクバーなど）は xp.css にあります。
   読み込み順: xp.css → index.css（ここが後勝ち）

   目次:
     1. デスクトップ
     2. デスクトップアイコン（選択・ドラッグ）
     3. 右クリックメニュー
     4. ウィンドウ（位置・ドラッグ・最大化・中身）
     5. エクスプローラ（研究フォルダ）
     6. ウィンドウの初期位置
     7. タスクバーの追加分
     8. スタートメニュー
     9. 終了画面
    10. レスポンシブ
    11. デスクトップ アシスタント（アキ）
    12. Game space（2 人目のユーザーのデスクトップ）
   ========================================================= */

/* ---- 1. デスクトップ ---- */
body{overflow-x:hidden}
.desktop{position:relative; min-height:calc(100vh - var(--tb-h)); padding:14px}
.desktop.refresh{animation:refresh .18s steps(1) 1}
@keyframes refresh{50%{opacity:.82}}

/* ---- 2. デスクトップアイコン ----
   JS なし：縦に並べるグリッド（リンクとして動く）。下まで来たら右の列へ折り返す
   JS あり：.free が付き、各アイコンを絶対配置してドラッグ可能にする */
/* XP の標準サイズ：アイコン 32px、1マス 約75px */
.icons{position:absolute; left:10px; top:10px; bottom:10px; display:grid; grid-auto-flow:column;
       grid-template-rows:repeat(auto-fill, 70px); grid-auto-columns:76px; gap:4px 10px; z-index:1}
.icons.free{left:0; top:0; right:0; bottom:0; width:auto; display:block; pointer-events:none}
.icons.free .icon{position:absolute; pointer-events:auto}

.icon{display:block; width:76px; padding:2px 0; color:#fff; text-align:center; text-decoration:none;
      font-size:11px; line-height:1.2; outline:none; touch-action:none; -webkit-user-drag:none; user-select:none}
.icon svg{width:32px; height:32px; display:block; margin:0 auto 3px; padding:1px; border-radius:2px;
          filter:drop-shadow(1px 1px 1px rgba(0,0,0,.45))}
.icon img{display:block; width:32px; height:32px; margin:0 auto 3px; object-fit:cover; object-position:center 18%;
          image-rendering:pixelated; border:1px solid #fff; border-radius:3px; box-shadow:1px 1px 2px rgba(0,0,0,.45)}
.icon span{display:inline-block; max-width:76px; padding:0 2px; border-radius:1px;
           text-shadow:1px 1px 1px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.6); word-break:break-word}

/* 選択：アイコンは青く染め、ラベルは半透明の青背景 */
.icon.sel svg{background:rgba(49,106,197,.42)}
.icon.sel img{opacity:.75; box-shadow:0 0 0 2px rgba(49,106,197,.85)}
.icon.sel span{background:rgba(49,106,197,.78); text-shadow:none; outline:1px dotted rgba(255,255,255,.9); outline-offset:-1px}
.desktop:not(:focus-within) .icon.sel span{background:rgba(49,106,197,.55)}
.icon:focus-visible span{outline:1px dotted #fff; outline-offset:-1px}
.icon.dragging{opacity:.75; z-index:5; cursor:grabbing}

/* ---- 3. 右クリックメニュー ---- */
.ctx{position:fixed; z-index:1500; min-width:190px; padding:2px; font:11px/1.2 Tahoma,"Meiryo",sans-serif;
     background:#fff; border:1px solid #aca899; box-shadow:2px 2px 3px rgba(0,0,0,.35)}
.ctx[hidden]{display:none}
.ctx button{display:block; width:100%; text-align:left; padding:4px 20px 4px 22px; border:0; background:none;
            font:inherit; color:#000; cursor:default}
.ctx button:hover,.ctx button:focus-visible{background:#316ac5; color:#fff; outline:none}
.ctx button.def{font-weight:bold}
.ctx button[hidden]{display:none}
.ctx hr{border:0; border-top:1px solid #aca899; margin:3px 2px}

/* ---- 4. ウィンドウ ---- */
.win{position:absolute; min-width:260px}
.bar{cursor:default; touch-action:none}          /* ドラッグ用 */
.win:not(.blur) .bar{cursor:move}
.body{padding:10px 12px; max-height:52vh; overflow:auto}
.body.pane{background:var(--face); border:0}

/* 最大化 */
.win.max{left:4px!important; top:4px!important; right:4px!important; width:auto!important; transform:none!important}
.win.max .body{max-height:calc(100vh - 140px)}

/* ウィンドウの中身 */
pre{margin:0; font:13px/1.5 "MS Gothic","Lucida Console","Courier New",monospace; white-space:pre-wrap}
h2{font-size:13px; margin:12px 0 4px; color:#0a3d91}
ul{margin:4px 0; padding-left:18px}

/* ---- 5. エクスプローラ ---- */
.explorer{display:grid; grid-template-columns:180px 1fr; gap:0}
.files{display:grid; grid-template-columns:repeat(auto-fill, 80px); gap:10px 8px; padding:10px 12px; background:#fff}
.files a{text-align:center; text-decoration:none; color:#000; font-size:11px; line-height:1.25}
.files a:hover span{background:#316ac5; color:#fff}
/* 32px のファイルアイコン */
.files .pic{width:26px; height:32px; margin:0 auto 3px; background:linear-gradient(#fff,#e9edf5); border:1px solid #7f8aa0; border-radius:1px; position:relative}
.files .pic::after{content:""; position:absolute; right:-1px; top:-1px; width:8px; height:8px; background:#c9d2e3; border-left:1px solid #7f8aa0; border-bottom:1px solid #7f8aa0}
.files .pic.exe{background:linear-gradient(#ffe9a8,#f0b429); border-color:#a0730d}
.files .pic.exe::after{display:none}
.content{padding:4px 12px 10px; background:#fff}

/* ---- 6. ウィンドウの初期位置 ---- */
#w-about{left:190px; top:24px; width:min(440px, 86vw)}
#w-research{left:280px; top:256px; width:min(620px, 86vw)}
#w-news{right:22px; top:60px; width:min(330px, 86vw)}
#w-profile{left:50%; top:14%; transform:translateX(-50%); width:min(520px, 88vw)}
.dlg .body{max-height:none}
#w-sys{left:50%; top:46%; transform:translate(-50%,-50%); width:400px}
.dlg{z-index:900}                              /* ダイアログは普通の窓より前 */
.dlg.front{z-index:901}

/* システムのプロパティ（XP のタブ付きダイアログ） */
.tabs{display:flex; padding:0 2px; margin-bottom:-1px; position:relative}
.tabs span{padding:3px 10px 4px; background:#fcfcfe; border:1px solid #919b9c; border-bottom-color:#fcfcfe;
           border-top:2px solid #ffc83c; border-radius:3px 3px 0 0}
.sys{display:grid; grid-template-columns:96px 1fr; gap:16px; padding:18px 16px; background:#fcfcfe; border:1px solid #919b9c}
.sys-logo{width:88px; height:88px; filter:drop-shadow(2px 2px 2px rgba(0,0,0,.25))}
.sys dl{margin:0; line-height:1.45}
.sys dt{margin-top:10px}
.sys dt:first-child{margin-top:0}
.sys dd{margin:2px 0 0 14px}
.dlg-btns{display:flex; justify-content:flex-end; gap:6px; margin-top:10px}
.btn:disabled{color:#aca899; border-color:#c9c7ba; cursor:default; box-shadow:none}

.profile-ico{object-fit:cover; object-position:center 20%; image-rendering:pixelated; border-radius:2px}
.profile-body{display:grid; grid-template-columns:minmax(150px, 210px) 1fr; gap:18px; align-items:center;
              background:linear-gradient(135deg,#f7fbff,#dcecff); max-height:none}
.profile-full{display:block; width:100%; max-height:360px; object-fit:contain; image-rendering:pixelated;
              border:1px solid #7f9db9; background:#fff; box-shadow:2px 2px 5px rgba(0,0,0,.2)}
.profile-copy h2{font-size:18px; margin:0 0 12px; color:#003399}
.profile-copy p{margin:0 0 12px}

/* ---- 7. タスクバーの追加分 ---- */
.task[hidden]{display:none}

/* トレイアイコン（音量・ネットワーク） */
.ti{position:relative; display:grid; place-items:center; width:20px; height:20px; padding:0; border:0; border-radius:2px;
    background:none; cursor:pointer}
.ti:hover{background:rgba(255,255,255,.12)}
.ti svg{filter:drop-shadow(1px 1px 0 rgba(0,0,0,.3))}
/* XP の黄色いツールチップ */
.tip{display:none; position:absolute; right:-40px; bottom:calc(100% + 8px); padding:3px 6px; white-space:nowrap; text-align:left;
     font:11px/1.35 Tahoma,"Meiryo",sans-serif; color:#000; background:#ffffe1; border:1px solid #000;
     box-shadow:2px 2px 2px rgba(0,0,0,.3); pointer-events:none}
.ti:hover .tip, .ti:focus-visible .tip, .ti.tipon .tip{display:block}

/* 音量ポップアップ */
.volpop{position:fixed; bottom:calc(var(--tb-h) + 2px); z-index:1003; display:flex; flex-direction:column; align-items:center; gap:6px;
        padding:8px 10px; font:11px/1.2 Tahoma,"Meiryo",sans-serif; background:var(--face); border:1px solid #919b9c;
        box-shadow:2px 2px 4px rgba(0,0,0,.35)}
.volpop[hidden]{display:none}
.volpop input[type=range]{writing-mode:vertical-lr; direction:rtl; height:90px; width:20px; margin:0}
.volpop label{display:flex; align-items:center; gap:3px}

/* 更新の吹き出し（しっぽは --tail の位置でトレイアイコンを指す） */
.balloon{position:fixed; right:6px; bottom:calc(var(--tb-h) + 14px); z-index:1002; width:min(290px, calc(100vw - 12px));
         padding:8px 26px 8px 10px; font:11px/1.4 Tahoma,"Meiryo",sans-serif; color:#000; cursor:pointer;
         background:#ffffe1; border:1px solid #000; border-radius:7px; box-shadow:3px 3px 4px rgba(0,0,0,.3);
         animation:balloon .25s ease-out}
.balloon[hidden]{display:none}
.balloon::before,.balloon::after{content:""; position:absolute; left:var(--tail, 90%); border-style:solid}
.balloon::before{bottom:-14px; border-width:14px 14px 0 0; border-color:#000 transparent transparent}
.balloon::after{bottom:-12px; margin-left:1px; border-width:12px 12px 0 0; border-color:#ffffe1 transparent transparent}
.balloon b{display:flex; align-items:center; gap:5px; margin-bottom:4px}
.balloon p{margin:0}
.balloon .head{font-family:"MS Gothic","Lucida Console",monospace}
.balloon .hint{margin-top:4px; color:#555}
.bclose{position:absolute; right:5px; top:5px; width:16px; height:16px; padding:0; font:bold 12px/14px Tahoma,sans-serif; color:#555;
        background:none; border:1px solid transparent; border-radius:2px; cursor:pointer}
.bclose:hover{color:#000; border-color:#888; background:#fff}
@keyframes balloon{from{opacity:0; transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){ .balloon{animation:none} }

/* ---- 8. スタートメニュー ---- */
.startmenu{position:fixed; left:0; bottom:var(--tb-h); width:min(420px,94vw); z-index:1001; font-size:12px;
           border:1px solid #0a3f9e; border-bottom:0; border-radius:8px 8px 0 0; overflow:hidden; box-shadow:2px -2px 12px rgba(0,0,0,.45)}
.startmenu[hidden]{display:none}
.smhead{background:linear-gradient(#1f6bdc,#3b88f0 12%,#1e62d6 60%,#154fae); color:#fff; padding:8px 12px; display:flex; align-items:center; gap:10px;
        font-weight:bold; font-size:14px; text-shadow:1px 1px 1px rgba(0,0,0,.6); border-bottom:2px solid #f5a623}
.smprofile{display:flex; align-items:center; gap:10px; padding:0; border:0; background:none; color:inherit;
           font:inherit; text-shadow:inherit; cursor:pointer; text-align:left}
.smprofile:hover span{text-decoration:underline}
.smhead .av{width:48px; height:48px; object-fit:cover; object-position:center 18%; image-rendering:pixelated;
            border-radius:4px; border:2px solid #fff; box-shadow:1px 1px 3px rgba(0,0,0,.4); background:#fff}
.smcols{display:grid; grid-template-columns:1fr 1fr; background:#fff}
.smcols ul{list-style:none; margin:0; padding:8px 6px}
.smcols .right{background:#d3e5fa; border-left:1px solid #95bdee}
.smcols a,.smcols button{display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:5px 8px; border:0; border-radius:3px;
      background:none; font:inherit; color:#00138c; text-decoration:none; cursor:pointer}
.smcols a:hover,.smcols button:hover{background:#2f6fd0; color:#fff}
.smcols .ic{width:20px; text-align:center; font-size:14px}
.smfoot{background:linear-gradient(#1e62d6,#3b88f0 12%,#1e62d6 60%,#154fae); padding:6px 10px; display:flex; justify-content:flex-end}
.smfoot button{font:inherit; color:#fff; background:none; border:0; cursor:pointer; display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:3px}
.smfoot button:hover{background:rgba(255,255,255,.2)}

/* ---- 9. 終了画面 ---- */
.shutdown{position:fixed; inset:0; z-index:2000; background:#000; color:#e6e6e6; display:grid; place-items:center; text-align:center;
          font:16px/2 Tahoma,"Meiryo",sans-serif}
.shutdown[hidden]{display:none}
.shutdown p{color:#ff9e2c; font-size:22px; margin:0 0 20px}

/* 起動／ログオン画面（data-stage で出し分け） */
.boot{position:fixed; inset:0; z-index:2500; background:#000; color:#fff; font-family:Tahoma,"Meiryo",sans-serif; user-select:none}
.boot[hidden]{display:none}
html:has(.boot:not([hidden])){overflow:hidden}      /* 起動画面の間は裏のページをスクロールさせない */
.boot .mark{display:flex; align-items:center; gap:10px}
.boot .mark span{font:bold italic 40px/1 "Trebuchet MS","Franklin Gothic Medium",Tahoma,sans-serif; letter-spacing:.5px}
.boot .mark sup{font-size:.55em; color:#ff8a1c; margin-left:3px}
/* 起動中：黒地に旗と、左から右へ流れる3つの青いブロック */
.boot-logo{height:100%; display:grid; place-content:center; justify-items:center; gap:56px}
.boot[data-stage="logo"] .welcome, .boot:not([data-stage="logo"]) .boot-logo{display:none}
.prog{position:relative; width:150px; height:16px; border:2px solid #b2b2b2; border-radius:4px; overflow:hidden}
.prog i{position:absolute; top:2px; left:-30px; width:8px; height:8px; border-radius:1px;
        background:linear-gradient(#90b4ff,#2a5ee8 50%,#1c46c2); animation:prog 1.6s linear infinite}
.prog i:nth-child(2){animation-delay:.12s}
.prog i:nth-child(3){animation-delay:.24s}
@keyframes prog{to{left:170px}}
/* ようこそ画面：上下の濃い帯と、真ん中の明るい青 */
.welcome{height:100%; display:grid; grid-template-rows:12% 1fr 12%}
.wtop{background:#00309c; border-bottom:2px solid; border-image:linear-gradient(90deg,#00309c,#b6ccf5 35%,#b6ccf5 65%,#00309c) 1}
.wbot{background:#00309c; border-top:2px solid; border-image:linear-gradient(90deg,#00309c,#f89b3a 40%,#f89b3a 60%,#00309c) 1;
      display:flex; align-items:center; padding:0 4vw}
.wmid{position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center;
      background:radial-gradient(60% 70% at 18% 12%, #97b9f1, transparent 70%), #5a7edc}
.wmid::before{content:""; position:absolute; left:50%; top:10%; bottom:10%; width:1px;
              background:linear-gradient(transparent,#c5d5f5 30%,#c5d5f5 70%,transparent)}
.wleft{justify-self:end; margin-right:40px; text-align:right}
.wleft .mark{justify-content:flex-end}
.wleft p{margin:22px 0 0; font-size:15px}
.wright{margin-left:40px}
.user{display:flex; align-items:center; gap:14px; padding:8px 20px 8px 8px; border:0; border-radius:8px;
      background:none; color:#fff; font:inherit; text-align:left; cursor:pointer}
.user img{width:48px; height:48px; object-fit:cover; object-position:center 18%; image-rendering:pixelated;
          border:2px solid #fff; border-radius:4px; background:#fff}
.user b{display:block; font-size:20px; font-weight:normal}
.user small{display:block; font-size:12px; color:#dce6fb}
.user:hover, .user:focus-visible{background:linear-gradient(90deg,#00309c,rgba(0,48,156,0)); outline:none}
.user:hover img, .user:focus-visible img{border-color:#ffc83c}
.hello{display:none; margin:0; font:italic bold 44px/1 "Trebuchet MS",Tahoma,sans-serif; text-shadow:2px 2px 3px rgba(0,0,0,.3)}
.boot[data-stage="hello"] .hello{display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
.boot[data-stage="hello"] .wleft, .boot[data-stage="hello"] .wright, .boot[data-stage="hello"] .wmid::before{visibility:hidden}
.off{display:flex; align-items:center; gap:8px; padding:4px 6px; border:0; background:none; color:#fff; font:inherit; font-size:14px; cursor:pointer}
.off i{display:grid; place-items:center; width:26px; height:26px; border:1px solid #fff; border-radius:4px; font-style:normal; font-size:15px;
       background:linear-gradient(#f28a6b,#d9401f 55%,#b52d10)}
.off:hover span{text-decoration:underline}
@media (prefers-reduced-motion:reduce){ .prog i{animation:none; left:60px} .prog i:nth-child(2){left:72px} .prog i:nth-child(3){left:84px} }

/* ---- 10. スマホ版 ----
   判定：幅720px以下、または高さ500px以下のタッチ端末（横向きのスマホ）。JS の mq と同じ条件。
   ・最初はデスクトップ（壁紙とアイコン）だけ
   ・アイコンは 1回タップ＝開く／長押し＝右クリックメニュー
   ・ウィンドウは1つずつ全画面。スクロールはページ全体だけ（二重スクロールなし）
   ・タスクバーは スタート／開いているウィンドウ名／時計 だけ。言語切替はスタートメニューへ
   JS はウィンドウ表示中に <body> へ .m-win を付ける */

/* スマホ専用の部品（PC では出さない） */
.smlang{display:none; align-items:center; gap:6px; padding:8px 12px; background:#fff;
        border-top:1px solid #95bdee; font-size:14px; color:#00138c}
.smlang .lbl{flex:1}
.smlang button{font:inherit; font-size:13px; padding:6px 12px; color:#00138c; border:1px solid #7f9db9; border-radius:3px;
               background:linear-gradient(#fff,#e6eefc)}
.smlang button.on{color:#fff; border-color:#1a4aa0; background:linear-gradient(#2f6fd0,#1e57b8); box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}

@media (max-width:720px), (max-height:500px) and (pointer:coarse){
  /* -- デスクトップ（最初の画面） -- */
  .desktop{min-height:calc(100vh - var(--tb-h)); min-height:calc(100dvh - var(--tb-h));
           padding:14px 10px calc(var(--tb-h) + 10px)}
  .icons{position:static; display:grid; grid-auto-flow:row; grid-template-rows:none; grid-auto-columns:auto;
         grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:12px 4px; width:auto; margin:0}
  .icon{width:auto; padding:6px 0; touch-action:manipulation; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent}
  .icon span{max-width:92px}
  /* タップした瞬間に XP の選択色 */
  .icon:active svg, .icon:active img{background:rgba(49,106,197,.42)}
  .icon:active span, .icon.sel span{background:rgba(49,106,197,.78); text-shadow:none}

  /* -- ウィンドウ：1つずつ全画面 -- */
  body.m-win .icons{display:none}
  body.m-win .desktop{padding:0 0 var(--tb-h)}
  .win{position:relative; left:auto!important; right:auto!important; top:auto!important; width:auto!important;
       min-width:0; transform:none!important; margin:0}
  .win:not(.dlg):not([hidden]){display:flex; flex-direction:column; border-radius:0;
       min-height:calc(100vh - var(--tb-h)); min-height:calc(100dvh - var(--tb-h))}
  .win:not(.dlg) .bar{position:sticky; top:0; z-index:5; border-radius:0}   /* タイトルバーは上に固定 */
  .win .bar{cursor:default}
  .bar .cap{zoom:1.2}                                                         /* 指で押しやすく */
  .cap.max{display:none}                                                      /* 最初から全画面なので不要 */
  /* 二重スクロールをなくす：中身はページ全体でスクロール */
  .win .body{max-height:none; overflow:visible}
  .win:not(.dlg) .body{flex:1}

  /* ダイアログ（システムのプロパティ）は画面中央に */
  .dlg{position:fixed; left:50%!important; top:42%!important; transform:translate(-50%,-50%)!important;
         width:min(340px, calc(100vw - 24px))!important; z-index:1100}
  .dlg.front{z-index:1101}
  .sys{grid-template-columns:52px 1fr; gap:12px; padding:14px 12px}
  .sys-logo{width:52px; height:52px}

  /* -- 中身 -- */
  pre{font-size:12.5px}
  .explorer{grid-template-columns:1fr} .tasks{display:none}
  .files{grid-template-columns:repeat(auto-fill, minmax(76px, 1fr))}
  .profile-body{grid-template-columns:1fr; text-align:center}
  .profile-full{max-width:240px; margin:auto}

  /* -- 長押しメニュー：指で押しやすい大きさ -- */
  .ctx{min-width:210px; font-size:14px}
  .ctx button{padding:11px 24px}

  /* -- タスクバー：スタート／開いているウィンドウ名／時計 -- */
  .task.active:not([hidden]){display:flex; flex:1 1 auto; max-width:none; margin:0 4px}
  .tray .lang{display:none}

  /* -- スタートメニュー：画面幅いっぱい・1列・言語切替つき -- */
  .startmenu{width:100%; border-radius:0; overflow-y:auto;
             max-height:calc(100vh - var(--tb-h)); max-height:calc(100dvh - var(--tb-h))}
  .smcols{grid-template-columns:1fr}
  .smcols .right{border-left:0; border-top:1px solid #95bdee}
  .smcols a, .smcols button{padding:10px 12px; font-size:14px}
  .smlang{display:flex}

  /* -- ようこそ画面：縦に積む（区切り線は横向き） -- */
  .welcome{grid-template-rows:9% 1fr 9%}
  .wmid{grid-template-columns:1fr; align-content:center; gap:36px; padding:0 20px}
  .wmid::before{display:none}
  .wleft{justify-self:center; margin:0; text-align:center}
  .wleft .mark{justify-content:center}
  .wleft p{font-size:14px}
  .wright{justify-self:center; margin:0; padding-top:30px; border-top:1px solid; border-image:linear-gradient(90deg,transparent,#c5d5f5,transparent) 1}
  .boot .mark span{font-size:32px}
}

/* ---- 11. デスクトップ アシスタント（アキ）----
   タスクバーのすぐ上、右寄り。更新の吹き出し（.balloon）とは重ならない位置 */
.mascot{position:fixed; right:120px; bottom:var(--tb-h); z-index:999; width:128px; height:192px; user-select:none}
.mascot[hidden]{display:none}
.mascot .aki{display:block; cursor:pointer; image-rendering:pixelated; filter:drop-shadow(2px 3px 0 rgba(0,0,0,.35))}
.mascot .aki{touch-action:none; -webkit-user-drag:none}   /* 指でもドラッグできるように */
.mascot.dragging .aki{cursor:grabbing; filter:drop-shadow(4px 6px 0 rgba(0,0,0,.3))}
/* まぶた：普段は上に畳んでおき、.shut で下りてくる */
.mascot .lid{transform-box:fill-box; transform-origin:50% 0; transform:scaleY(0)}
.mascot .lid.shut{transform:scaleY(1)}
/* × ：ホバーで出る小さな閉じるボタン */
.mclose{position:absolute; top:-6px; right:-6px; width:16px; height:16px; padding:0; font:bold 11px/14px Tahoma,sans-serif; color:#fff; cursor:pointer;
        border:1px solid #fff; border-radius:3px; background:linear-gradient(#e5593d,#b62c12); opacity:0; transition:opacity .15s}
.mascot:hover .mclose,.mclose:focus-visible{opacity:1}
/* 吹き出し：XP のヘルプ風の黄色 */
.mbubble{position:absolute; right:92px; bottom:150px; width:max-content; max-width:200px; padding:7px 10px; font-size:11px; line-height:1.45;
         background:#ffffe1; color:#000; border:1px solid #000; border-radius:6px; box-shadow:2px 2px 3px rgba(0,0,0,.35)}
.mbubble[hidden]{display:none}
.mbubble::before,.mbubble::after{content:""; position:absolute; right:-14px; top:14px; border-style:solid}
.mbubble::before{border-width:7px 0 7px 14px; border-color:transparent transparent transparent #000}
.mbubble::after{right:-12px; border-width:6px 0 6px 12px; border-color:transparent transparent transparent #ffffe1}

@media (max-width:720px), (max-height:500px) and (pointer:coarse){
  .mascot{right:0; width:80px; height:120px}
  .mascot .aki{width:80px; height:120px}
  .mbubble{right:58px; bottom:94px}
  body.m-win .mascot{display:none}     /* ウィンドウ表示中は隠す */
  .mclose{opacity:1}
}


/* ---- 12. Game space ----
   ようこそ画面で「Game space」を選ぶと body.gamespace。通常のアイコン・窓・タスクを隠し、
   夜の Bliss（同じ壁紙を紺で乗算）にする */
body.gamespace{background-color:#2a3f8f; background-blend-mode:multiply, multiply, normal}
body.gamespace #icons, body.gamespace .win:not(.gwin), body.gamespace .task:not(.gtask){display:none}
body:not(.gamespace) .gicons, body:not(.gamespace) .gwin, body:not(.gamespace) .gtask{display:none}
.gicons .icon svg{width:32px; height:32px}
#w-games{left:140px; top:60px; width:min(440px, calc(100vw - 160px))}
/* スタートメニューの見出し：Game space のときは名前を差し替える */
.gs-head{display:none}
body.gamespace .smhead [data-i18n="sm.head"]{display:none}
body.gamespace .gs-head{display:inline}
.gs-av{display:none}
body.gamespace .smhead img.av{display:none}
body.gamespace .gs-av{display:block}
/* RISEI-PC の窓を開く項目は Game space では出さない */
body.gamespace .smcols li:has(button[data-open]){display:none}
/* ようこそ画面：2 人目のユーザー */
.wright{display:flex; flex-direction:column; gap:6px}
.user .pad{width:48px; height:48px; border:2px solid #fff; border-radius:4px; background:#dfe6f5}
.user:hover .pad, .user:focus-visible .pad{border-color:#ffc83c}
.smfoot{gap:4px}