:root{
  --bg:#1b2430; --panel:#243040; --panel2:#2c3a4d; --line:#3a4a60;
  --ink:#e8eef5; --sub:#9fb0c3; --gold:#f4c95d; --green:#5fd28a;
  --red:#e86c6c; --blue:#6ca8e8;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Courier New',monospace; image-rendering:pixelated;
  -webkit-font-smoothing:none; font-size:16px;
  overflow:hidden;
}
/* モバイル縦持ちを唯一のレイアウトに統一：PCでも中央に「スマホ枠」(最大440px)を表示し左右は余白 */
.wrap{max-width:440px; margin:0 auto; padding:0; height:100%;}
body{background:#14171a;}

/* topbar */
.topbar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background:var(--panel); border:2px solid var(--line);
  padding:10px 12px; margin-bottom:10px;
}
.stat{display:flex; flex-direction:column; line-height:1.2;}
.stat .label{font-size:11px; color:var(--sub); letter-spacing:1px;}
.stat .val{font-size:18px; font-weight:bold;}
.gold{color:var(--gold);} .green{color:var(--green);} .red{color:var(--red);} .blue{color:var(--blue);}
.spacer{flex:1;}

button{
  font-family:inherit; cursor:pointer; color:var(--ink);
  background:var(--panel2); border:2px solid var(--line);
  padding:8px 12px; font-size:14px;
}
button:hover{border-color:var(--gold);}
button:active{transform:translateY(1px);}
button:disabled{opacity:.4; cursor:not-allowed;}
.btn-go{background:#345; border-color:var(--blue);}
button.on{border-color:var(--green); color:var(--green);}

.layout{display:grid; grid-template-columns:1.1fr .9fr; gap:10px;}
@media(max-width:780px){ .layout{grid-template-columns:1fr;} }

.card{background:var(--panel); border:2px solid var(--line); padding:10px;}
.card + .card{margin-top:10px;}
.card h2{font-size:14px; margin:0 0 8px; color:var(--sub); letter-spacing:2px;}

/* canvas office */
.stage{background:#1c2630; border:2px solid var(--line); padding:6px; line-height:0;}
#office-canvas{display:block; width:100%; height:auto; image-rendering:pixelated;}

/* lists */
.row{
  display:flex; align-items:center; gap:8px; padding:8px 6px;
  border-bottom:1px solid var(--line); font-size:14px;
}
.row:last-child{border-bottom:none;}
.row.wrap{flex-wrap:wrap;}
.dot{width:12px; height:12px; flex:none;}
.grow{flex:1; min-width:0;}
.muted{color:var(--sub); font-size:13px;}
.pad{padding:6px;}
.btncol{display:flex; flex-direction:column; gap:4px;}

.bar{height:6px; background:#1a232e; border:1px solid var(--line); margin-top:3px;}
.bar > i{display:block; height:100%; background:var(--green);}
.bar.stress > i{background:var(--red);}
.bar.exp > i{background:var(--blue);}
.pill{font-size:12px; padding:1px 6px; border:1px solid var(--line); color:var(--sub);}
.pill.fire{color:var(--red); border-color:var(--red);}
.mini{padding:6px 10px; font-size:13px;}
.mini.ghost{background:transparent; color:var(--sub);}
.mini.mode-ot{border-color:var(--gold); color:var(--gold);}
.mini.mode-dm{border-color:var(--red); color:var(--red);}
.scroll{max-height:240px; overflow:auto;}

/* log */
.log{font-size:13px; line-height:1.6; max-height:140px; overflow:auto; color:var(--sub);}
.log b{color:var(--ink);}

.hint{font-size:11px; color:var(--sub); margin-top:6px;}

/* チュートリアルの案内バー */
.hint-bar{
  background:#33402a; border:2px solid var(--gold); color:var(--gold);
  padding:10px 14px; margin-bottom:10px; font-size:14px; font-weight:bold;
  animation:hintpulse 2s ease-in-out infinite;
}
@keyframes hintpulse{0%,100%{border-color:var(--gold);}50%{border-color:#7a6320;}}

/* modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none;
  align-items:center; justify-content:center; padding:16px; z-index:9;}
.modal.show{display:flex;}
.modal .box{background:var(--panel); border:2px solid var(--gold); padding:20px; max-width:440px;}
.modal h3{margin:0 0 10px; font-size:19px;}
.modal p{font-size:16px; color:var(--ink); line-height:1.8; white-space:pre-line;}
.modal .ev-btns button{font-size:15px; padding:9px 16px;}
#companyTitle{font-size:10px; color:var(--gold); letter-spacing:1px;}
.ev-btns{display:flex; gap:8px; margin-top:12px;}

/* 採用候補・アサイン選択パネル */
.box.wide{max-width:440px; width:100%;}
.panel-body{max-height:60vh; overflow:auto; margin-bottom:4px;}
.cand{
  display:flex; gap:8px; align-items:center;
  padding:12px 4px; border-bottom:1px solid var(--line); font-size:15px;
}
.cand:last-child{border-bottom:none;}
.cand .mini{flex:none; text-align:center; line-height:1.15;}
.cand .muted{font-size:14px;}
.cardname{font-size:17px;}
.cost{font-size:18px; font-weight:bold; color:var(--gold); margin-left:6px;}
.wide-btn{min-width:64px; font-size:14px;}
.match{font-size:11px; padding:1px 5px; border:1px solid var(--line);}
.match.good{color:var(--green); border-color:var(--green);}
.match.bad{color:var(--sub);}
.pill.skill{color:var(--blue); border-color:var(--blue);}
.pill.compe{color:#d98cff; border-color:#a25fd2;}
.pill.ses{color:#5fd2c4; border-color:#3a9e92;}
.pill.ctr{color:#e0a96c; border-color:#b07a3e;}
.trait{color:var(--gold);}

/* 応募者ボタン（応募あり）と自動アサインON表示 */
#applicantsBtn.has{border-color:var(--green); color:var(--green);}
#applicantsBtn .badge{vertical-align:middle;}
#autoAssignBtn.on{border-color:var(--green); color:var(--green);}

/* 新着案件の通知（非モーダル：カードのフラッシュ＋バッジ）*/
.card.flash{ animation:cardflash 0.6s ease-in-out 0s 5; }
@keyframes cardflash{
  0%,100%{ border-color:var(--line); box-shadow:none; }
  50%{ border-color:var(--gold); box-shadow:0 0 14px var(--gold); }
}
.badge{
  display:inline-block; background:var(--gold); color:#1b2430;
  font-size:9px; font-weight:bold; padding:1px 6px; margin-left:6px;
  letter-spacing:1px; animation:badgepulse 0.7s ease-in-out infinite;
}
@keyframes badgepulse{ 0%,100%{opacity:1;} 50%{opacity:.45;} }

/* タイトル画面 */
.title-screen{
  position:fixed; inset:0; z-index:30;
  display:flex; align-items:center; justify-content:center; padding:16px;
  background:
    radial-gradient(circle at 50% 30%, #2c3a4d 0%, #1b2430 70%);
}
.title-box{
  background:var(--panel); border:3px solid var(--gold);
  padding:24px 28px; max-width:380px; width:100%; text-align:center;
  box-shadow:0 8px 0 #0006;
}
.title-box{max-width:420px;}
.title-logo{
  font-size:52px; font-weight:bold; letter-spacing:3px; color:var(--gold);
  line-height:1.05; text-shadow:3px 3px 0 #0008;
}
.title-logo span{display:block; font-size:26px; color:var(--ink); letter-spacing:6px; margin-top:6px;}
.title-sub{font-size:15px; color:var(--sub); margin:10px 0 22px;}
.title-field{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  font-size:14px; color:var(--sub); margin-bottom:14px; text-align:left;
}
.title-field input{
  width:100%; font-family:inherit; font-size:17px; color:var(--ink);
  background:#1a232e; border:2px solid var(--line); padding:10px 12px;
}
.title-field input:focus{outline:none; border-color:var(--gold);}
.title-btns{display:flex; gap:8px; justify-content:center; margin-top:10px;}
.title-btns .btn-go{font-size:18px; padding:12px 26px;}
.title-btns .mini{font-size:14px;}
.title-note{font-size:12px; color:var(--sub); margin:18px 0 0; line-height:1.7;}

/* 枠分けの小見出し（案件SES/受託・社員 職種別）*/
.subhead{
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--sub); letter-spacing:1px;
  padding:8px 4px 4px; margin-top:4px; border-bottom:1px solid var(--line);
}
.subhead:first-child{margin-top:0;}
.subhead .dot{width:10px; height:10px;}

/* 豆知識を流すヒントバー（緊急の案内と区別：青系・点滅なし）*/
.hint-bar.tip{
  background:#27323f; border-color:var(--blue); color:var(--blue);
  font-weight:normal; animation:none;
}

/* 社員の能力値ウィンドウ */
.detail{font-size:15px;}
.drow{display:flex; justify-content:space-between; gap:12px;
  padding:7px 2px; border-bottom:1px solid var(--line);}
.drow:last-child{border-bottom:none;}
.drow .dk{color:var(--sub); flex:none;}
.drow .dv{text-align:right; color:var(--ink);}

/* 設定メニュー */
.setgroup{margin-bottom:16px;}
.setcap{font-size:13px; color:var(--gold); letter-spacing:1px; margin-bottom:8px;
  border-bottom:1px solid var(--line); padding-bottom:4px;}
.setrow{margin-bottom:12px; font-size:14px;}
.setrow label{display:flex; justify-content:space-between; gap:10px; margin-bottom:4px; color:var(--sub);}
.setrow label b{color:var(--ink);}
.setrow input[type=range]{width:100%; accent-color:var(--gold);}

/* コンペ結果のドキドキ演出 */
.compe-stage{
  min-height:130px; display:flex; align-items:center; justify-content:center;
  text-align:center; margin:12px 0;
}
.compe-judging{font-size:20px; color:var(--gold); letter-spacing:3px;
  animation:judgepulse .6s ease-in-out infinite;}
.judge-bar{width:220px; height:12px; border:1px solid var(--line);
  background:#1a232e; overflow:hidden; margin:0 auto 14px;}
.judge-bar > i{display:block; height:100%; width:34%; background:var(--gold);
  animation:sweep .85s ease-in-out infinite alternate;}
@keyframes sweep{0%{margin-left:-2%;}100%{margin-left:68%;}}
@keyframes judgepulse{0%,100%{opacity:.45;}50%{opacity:1;}}
.compe-reveal{font-size:40px; font-weight:bold; line-height:1.15; animation:pop .45s ease-out;}
.compe-reveal span{display:block; font-size:16px; margin-top:10px; font-weight:normal;}
.compe-reveal.win{color:var(--gold); text-shadow:0 0 16px rgba(244,201,93,.5);}
.compe-reveal.lose{color:var(--sub);}
@keyframes pop{0%{transform:scale(.3); opacity:0;}70%{transform:scale(1.18);}100%{transform:scale(1); opacity:1;}}

/* 入金フロート数字 */
.fx-line{position:fixed; pointer-events:none; font-weight:bold; font-size:16px;
  color:var(--gold); text-shadow:0 1px 2px #000; z-index:20;
  animation:floatup 1s ease-out forwards;}
@keyframes floatup{0%{opacity:1; transform:translateY(0);}100%{opacity:0; transform:translateY(-40px);}}

/* Canvas ゲームステージ */
.stage-wrap{ border:0; background:#1c2630; margin:0; line-height:0; height:100%; }
#game{ display:block; width:100%; height:100%; image-rendering:pixelated; touch-action:none; }
.cards-temp{ /* 移行中の一時カード置き場（段階的に撤去） */ }

#offersCard{ display:none; }
#recruitCard{ display:none; }
#staffCard{ display:none; }
#logCard{ display:none; }
#activeJobsCard{ display:none; }

/* ヘッダ/ヒントは Canvas 上部バーへ移行（DOMは非表示・null参照防止のため要素は残す） */
.topbar{ display:none; }
#tutorialHint{ display:none !important; }

/* ============================================================
   商用ソフト風の見た目（会社サイト softem.com に合わせたコーポレート調）
   会社ロゴ色＝濃紺 #1F2871／白基調・クリーン・余白重視。
   PC余白は白いコーポレート紙面、ダークなゲーム枠を“製品”として中央に置く。
   ※ canvas内ゲームのドット見た目は不変。"枠（chrome）"だけ整える。
   ============================================================ */
:root{ --brand:#1F2871; --brand2:#4a7fc4; }
/* 白基調＋ごく薄いドットグリッド＝“画像っぽい”静かな背景（テキストは置かない） */
body{
  background-color:#f2f4f8;
  background-image:
    radial-gradient(circle, rgba(31,40,113,.05) 1px, transparent 1.6px),
    linear-gradient(180deg,#ffffff 0%,#eaeef4 100%);
  background-size: 24px 24px, 100% 100%;
  background-attachment: fixed, fixed;
}
/* 会社サイトのヒーローにある青い三角アクセントを、隅にごく薄く（装飾のみ・操作不可） */
body::before{
  content:''; position:fixed; top:0; right:0; width:300px; height:300px; z-index:0; pointer-events:none;
  background:linear-gradient(135deg, transparent 52%, rgba(74,127,196,.10) 52%);
}
body::after{
  content:''; position:fixed; bottom:0; left:0; width:260px; height:260px; z-index:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(31,40,113,.06) 48%, transparent 48%);
}
/* 中央440px枠＝白い紙面に置かれた“端末”。紺を含む柔らかい影で浮かせる */
.wrap{
  position:relative; z-index:2;
  box-shadow: 0 12px 44px rgba(31,40,113,.16), 0 2px 10px rgba(0,0,0,.08);
}

/* タイトル画面：クリーンなsans＋カードUIで“商用”感 */
.title-screen{
  font-family:'Segoe UI Variable Display','Segoe UI',system-ui,'Yu Gothic UI',sans-serif;
  -webkit-font-smoothing:antialiased; image-rendering:auto;
  background: radial-gradient(95% 65% at 50% 16%, #2b3b54 0%, #18212e 55%, #0b1016 100%);
}
.title-screen::after{ content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 220px rgba(0,0,0,.5); }
.title-box{
  position:relative;
  background:linear-gradient(180deg,#28374e 0%,#1d2734 100%);
  border:1px solid rgba(244,201,93,.45); border-radius:16px;
  padding:34px 30px 24px; max-width:420px; width:100%;
  box-shadow:0 28px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}
.title-logo{ font-size:62px; font-weight:800; letter-spacing:1px; color:var(--gold); line-height:1; text-shadow:0 4px 0 rgba(0,0,0,.3); }
.title-logo span{ display:block; font-size:24px; color:#fff; letter-spacing:8px; margin-top:12px; font-weight:600; }
.title-sub{ font-size:15px; color:#9fb0c3; margin:14px 0 24px; letter-spacing:.5px; }
.title-field{ color:#9fb0c3; }
.title-field input{ border-radius:9px; background:#141c27; border:1px solid var(--line); }
.title-field input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(244,201,93,.15); }
.title-btns .btn-go{
  background:linear-gradient(180deg,#2a8bdc,#1466b8); border:none; border-radius:11px;
  color:#fff; font-weight:700; letter-spacing:1px; padding:13px 30px;
  box-shadow:0 8px 20px rgba(20,102,184,.4);
}
.title-btns .btn-go:hover{ filter:brightness(1.08); border:none; }
.title-btns .mini{ border-radius:9px; background:#243140; border:1px solid var(--line); }
.title-btns .mini:hover{ border-color:var(--gold); }
.title-note{ color:#7f8b99; }
.title-foot{ margin:16px 0 0; font-size:11px; letter-spacing:2px; color:#5f6b78; }