/* 携帯機ドット（P3）の共通の見た目。全ページで <link rel="stylesheet" href="p3.css"> して使う。
   見本：~/Desktop/bmt-college-ui-kouho/p3（UI候補帳）。クリームの窓に深緑と金の縁、明るい草原、深緑の市松の地。角は3pxの階段。
   ルール：画面に絵文字を使わない（ドット絵は px.js、記号アイコンは p3-ic の SVG）。 */
@import url("https://fonts.googleapis.com/css2?family=DotGothic16&family=Press+Start+2P&display=swap");

:root{
  --p3-ink:#283018;      /* 文字 */
  --p3-mut:#7a8266;      /* 補足 */
  --p3-cream:#fffbe6;    /* 窓の地 */
  --p3-cream2:#f8f8e8;
  --p3-green:#173404;    /* 縁・見出しの深緑（今のブランド色） */
  --p3-green2:#0b1c02;
  --p3-gold:#F3D98B;     /* 金（今のブランド色） */
  --p3-gold2:#e8b828;
  --p3-gold3:#a07810;
  --p3-leaf:#58c838;     /* ゲージ・済み */
  --p3-leaf2:#2e8a28;
  --p3-red:#d04830;      /* Aボタン */
  --p3-red2:#7a1e10;
  --p3-sky:#a8d8f0;
  --p3-font:"DotGothic16","Hiragino Kaku Gothic ProN","Noto Sans JP",monospace;
  --p3-read:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; /* 長い説明文だけ読みやすさ優先 */
  --p3-num:"Press Start 2P","DotGothic16",monospace;
}

/* 地：深緑の市松 */
body.p3{
  margin:0; color:var(--p3-ink); font-family:var(--p3-font); line-height:1.65; letter-spacing:.02em;
  background-color:#24420e;
  background-image:linear-gradient(45deg,#1d380a 25%,transparent 25%,transparent 75%,#1d380a 75%),linear-gradient(45deg,#1d380a 25%,transparent 25%,transparent 75%,#1d380a 75%);
  background-size:16px 16px; background-position:0 0,8px 8px;
  -webkit-font-smoothing:none; overflow-x:hidden;
}
body.p3 *{box-sizing:border-box}
.p3 .p3-wrap{max-width:480px; margin:0 auto; padding:12px 14px 28px; display:grid; gap:12px}
.p3 img{max-width:100%}
.p3 a{color:inherit}
.p3 .pxsvg{display:block; image-rendering:pixelated}

/* 角を階段にする */
.p3 .p3-st{--c:3px; clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,calc(100% - var(--c)) var(--c),100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,var(--c) calc(100% - var(--c)),0 calc(100% - var(--c)),0 var(--c),var(--c) var(--c))}

/* 窓 */
.p3 .p3-win{position:relative; background:var(--p3-cream); color:var(--p3-ink); padding:12px 14px;
  box-shadow:inset 0 0 0 3px var(--p3-green),inset 0 0 0 5px var(--p3-gold),inset 0 0 0 6px var(--p3-green)}
.p3 .p3-win.g{background:#e9f4d6}
.p3 .p3-win.dk{background:var(--p3-green); color:var(--p3-cream); box-shadow:inset 0 0 0 3px var(--p3-green2),inset 0 0 0 5px var(--p3-gold),inset 0 0 0 6px var(--p3-green2)}
.p3 .p3-win.rd{box-shadow:inset 0 0 0 3px var(--p3-red2),inset 0 0 0 5px #f89070,inset 0 0 0 6px var(--p3-red2)}
/* 金のカード（商人カード） */
.p3 .p3-card{position:relative; background:linear-gradient(180deg,#fff4c8 0%,#f8e090 100%); color:var(--p3-ink); padding:14px 16px;
  box-shadow:inset 0 0 0 3px var(--p3-green),inset 0 0 0 6px var(--p3-gold2),inset 0 0 0 7px var(--p3-green)}
/* 見出しの札 */
.p3 .p3-tag{display:inline-block; background:var(--p3-gold); color:#3a2c07; font-size:12px; line-height:1; padding:6px 10px 5px; box-shadow:inset 0 0 0 2px var(--p3-green)}
.p3 .p3-h{font-size:17px; line-height:1.35; margin:0; font-weight:400}
.p3 .p3-h2{font-size:14px; line-height:1.4; margin:0; font-weight:400; color:var(--p3-green)}
.p3 .p3-mut{color:var(--p3-mut)}
.p3 .p3-s{font-size:12px; line-height:1.55}
.p3 .p3-xs{font-size:11px; line-height:1.5}
.p3 .p3-num{font-family:var(--p3-num); letter-spacing:0}
.p3 .p3-read{font-family:var(--p3-read); -webkit-font-smoothing:auto; letter-spacing:0; line-height:1.8}
.p3 .p3-row{display:flex; justify-content:space-between; align-items:baseline; gap:8px}

/* 上の帯（名前・Lv・日数） */
.p3 .p3-top{position:sticky; top:0; z-index:30; background:var(--p3-cream); padding:8px 12px 9px;
  box-shadow:inset 0 0 0 3px var(--p3-green),inset 0 0 0 5px var(--p3-gold),inset 0 0 0 6px var(--p3-green)}

/* ボタン：Aボタン（主）とBボタン（従） */
.p3 .p3-btnA{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border:0; cursor:pointer; text-decoration:none;
  background:var(--p3-red); color:#fff; font:inherit; font-size:16px; padding:13px 12px 12px;
  box-shadow:inset 0 0 0 3px var(--p3-red2),inset 0 -6px 0 #a8341e; text-shadow:1px 1px 0 var(--p3-red2)}
.p3 .p3-btnA::before{content:"A"; display:inline-grid; place-items:center; width:20px; height:20px; background:var(--p3-cream); color:var(--p3-red);
  font-family:var(--p3-num); font-size:9px; text-shadow:none; flex:none}
.p3 .p3-btnA.noA::before{display:none}
.p3 .p3-btnA:active{transform:translateY(2px); box-shadow:inset 0 0 0 3px var(--p3-red2),inset 0 -3px 0 #a8341e}
.p3 .p3-btnA.gold{background:var(--p3-gold2); color:#3a2c07; text-shadow:none; box-shadow:inset 0 0 0 3px #6b4a00,inset 0 -6px 0 #b88a10}
.p3 .p3-btnA.gold::before{color:#a07810}
.p3 .p3-btnA.green{background:var(--p3-leaf2); box-shadow:inset 0 0 0 3px #134a10,inset 0 -6px 0 #1e6a1c; text-shadow:1px 1px 0 #134a10}
.p3 .p3-btnA[disabled],.p3 .p3-btnA.off{background:#b8b8a0; box-shadow:inset 0 0 0 3px #787860; text-shadow:none; color:#f0f0e0; cursor:default}
.p3 .p3-btnB{display:flex; align-items:center; justify-content:center; gap:6px; border:0; cursor:pointer; text-decoration:none;
  background:var(--p3-cream); color:var(--p3-ink); font:inherit; font-size:13px; padding:9px 10px 8px;
  box-shadow:inset 0 0 0 2px var(--p3-green),inset 0 -4px 0 #d8d0a8}
.p3 .p3-btnB:active{transform:translateY(1px)}
.p3 .p3-btnA:focus-visible,.p3 .p3-btnB:focus-visible,.p3 a:focus-visible{outline:3px solid var(--p3-gold2); outline-offset:2px}

/* ゲージ */
.p3 .p3-gauge{height:12px; background:#283018; padding:2px; box-shadow:inset 0 0 0 1px #000}
.p3 .p3-gauge>i{display:block; height:100%; background:var(--p3-leaf); box-shadow:inset 0 2px 0 #a8f088; transition:width .5s steps(8)}
.p3 .p3-gauge.au>i{background:var(--p3-gold2); box-shadow:inset 0 2px 0 #f8e888}
.p3 .p3-gauge.rd>i{background:#e04830; box-shadow:inset 0 2px 0 #f89070}

/* チェック欄 */
.p3 .p3-chk{display:inline-block; width:18px; height:18px; background:var(--p3-cream); box-shadow:inset 0 0 0 2px var(--p3-ink); flex:none; position:relative}
.p3 .p3-chk.on{background:var(--p3-leaf)}
.p3 .p3-chk.on::after{content:""; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid var(--p3-cream); border-width:0 3px 3px 0; transform:rotate(40deg)}
/* 選択中の行 */
.p3 .p3-sel{background:var(--p3-gold); box-shadow:inset 0 0 0 2px var(--p3-gold3)}
/* カーソル（右向き三角）と送りの三角 */
.p3 .p3-cur{display:inline-block; width:0; height:0; border-left:7px solid var(--p3-ink); border-top:6px solid transparent; border-bottom:6px solid transparent; margin-right:6px; animation:p3-bob .8s steps(2) infinite}
.p3 .p3-next{position:absolute; right:14px; bottom:9px; width:0; height:0; border-top:8px solid var(--p3-red); border-left:6px solid transparent; border-right:6px solid transparent; animation:p3-bob .8s steps(2) infinite}
/* 名札（会話の話し手） */
.p3 .p3-name{position:absolute; left:12px; top:-12px; background:var(--p3-gold); color:#3a2c07; font-size:12px; line-height:1; padding:5px 9px 4px; box-shadow:inset 0 0 0 2px var(--p3-green)}
/* バッジ枠 */
.p3 .p3-badge{width:30px; height:30px; display:grid; place-items:center; background:#e9e2c4; box-shadow:inset 0 0 0 2px #b8ae88; color:#b8ae88}
.p3 .p3-badge.on{background:var(--p3-gold); box-shadow:inset 0 0 0 2px var(--p3-gold3); color:#7a5410}
/* 台座 */
.p3 .p3-plat{background:#98d870; border-radius:50%; box-shadow:inset 0 -5px 0 #60a840,0 0 0 2px #487830}
/* 光の放射（お祝い） */
.p3 .p3-rays{background:repeating-conic-gradient(from 0deg at 50% 40%,#f8e070 0deg 10deg,#f8f0b8 10deg 20deg)}
/* 縁どりの大文字 */
.p3 .p3-big{font-family:var(--p3-num); color:var(--p3-gold); line-height:1.25;
  text-shadow:3px 0 0 var(--p3-green),-3px 0 0 var(--p3-green),0 3px 0 var(--p3-green),0 -3px 0 var(--p3-green),3px 3px 0 var(--p3-green),-3px 3px 0 var(--p3-green),3px -3px 0 var(--p3-green),-3px -3px 0 var(--p3-green),0 6px 0 var(--p3-green2),3px 6px 0 var(--p3-green2),-3px 6px 0 var(--p3-green2)}
.p3 .p3-bigj{font-family:var(--p3-font); color:var(--p3-gold);
  text-shadow:2px 0 0 var(--p3-green),-2px 0 0 var(--p3-green),0 2px 0 var(--p3-green),0 -2px 0 var(--p3-green),2px 2px 0 var(--p3-green),-2px 2px 0 var(--p3-green),2px -2px 0 var(--p3-green),-2px -2px 0 var(--p3-green),0 5px 0 var(--p3-green2)}
/* 草原 */
.p3 .p3-grass{background-color:#78c850; background-image:radial-gradient(#60b040 1px,transparent 1.5px),radial-gradient(#98e070 1px,transparent 1.5px); background-size:16px 16px,16px 16px; background-position:4px 4px,12px 10px}
/* 一覧（白い札の並び） */
.p3 .p3-list{display:grid; gap:6px; margin:0; padding:0; list-style:none}
.p3 .p3-item{display:flex; align-items:center; gap:10px; background:#fff; padding:10px 12px; text-decoration:none; color:var(--p3-ink); box-shadow:inset 0 0 0 2px #c8c8a8}
.p3 .p3-item.done{color:var(--p3-mut)}
.p3 .p3-item.done .t{text-decoration:line-through}
/* 記号アイコン（線のSVG） */
.p3 .p3-ic{width:18px; height:18px; flex:none; display:inline-block; vertical-align:-3px}
/* 入力欄 */
.p3 input.p3-in,.p3 textarea.p3-in,.p3 select.p3-in{width:100%; font:inherit; font-size:16px; color:var(--p3-ink); background:#fff; border:0; padding:10px 12px; box-shadow:inset 0 0 0 2px var(--p3-green); border-radius:0}
.p3 input.p3-in:focus,.p3 textarea.p3-in:focus{outline:3px solid var(--p3-gold2); outline-offset:0}
/* 全画面の重ね（お祝い・チュートリアル） */
.p3 .p3-over{position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(11,28,2,.82)}
.p3 .p3-over.show{display:flex}

@keyframes p3-bob{50%{transform:translateY(2px)}}
@keyframes p3-blink{50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){ .p3 *,.p3 *::before,.p3 *::after{animation:none!important; transition:none!important} }