:root { color-scheme: light; }
* { box-sizing: border-box; }
html { background: #fff; }
body { margin: 0; color: #171717; font: 12px Arial, Helvetica, sans-serif; }
button, input, select { font: inherit; }
button, a { cursor: pointer; }
a { color: #887548; text-decoration: none; }
a:hover { color: #4a5f36; text-decoration: underline; }
#app { min-height: 100vh; }

.reconstruction-note { max-width: 775px; margin: 6px auto 25px; color: #696969; font: 11px Arial, sans-serif; display: flex; justify-content: space-between; gap: 10px; }
.reconstruction-note a { color: #606f56; text-decoration: underline; }
.reconstruction-note .era-choice { border: 0; background: transparent; color: #5f6d52; text-decoration: underline; padding: 0; font-size: 11px; }
.dg-site { width: 775px; margin: 10px auto 0; background: #fff; }
.classic-header { display: flex; height: 205px; width: 775px; position: relative; }
.header-dino { flex: none; width: 186px; height: 205px; background: url('archives/wayback/2005/charte_1x1.jpg') no-repeat; display: block; }
.header-right { width: 589px; }
.header-top { height: 156px; position: relative; background: url('archives/wayback/2005/charte_1x2.jpg') no-repeat; }
.header-time { position: absolute; left: 71px; top: 29px; font-size: 10px; color: #4b4b4b; white-space: nowrap; }
.header-time strong { color: #151515; }
.header-home { position: absolute; right: 2px; top: 0; width: 260px; height: 48px; }
.header-bottom { display: flex; height: 49px; }
.header-login-fields { width: 461px; height: 49px; display: flex; align-items: center; gap: 8px; padding: 0 0 15px 111px; background: url('archives/wayback/2005/charte_2x1.jpg') no-repeat; }
.header-login-fields input { flex: none; width: 102px; height: 19px; padding: 1px 3px; color: #111; background: #eee; border: 1px solid #aaa; }
.header-login-fields input:nth-of-type(2) { width: 110px; margin-left: 115px; }
.header-submit { width: 128px; height: 49px; background: url('archives/wayback/2005/charte_2x2.jpg') no-repeat; border: 0; color: transparent; overflow: hidden; }
.header-submit:hover { filter: brightness(1.1); }

.page-row { display: flex; align-items: stretch; }
.classic-sidebar { width: 186px; flex: none; }
.classic-menu-art { width: 186px; height: 395px; position: relative; background: url('archives/wayback/2005/charte_3x1.jpg') no-repeat; }
.classic-menu-art a { display: block; position: absolute; left: 0; width: 181px; height: 50px; font-size: 0; }
.classic-menu-art a:nth-child(1) { top: 96px; }
.classic-menu-art a:nth-child(2) { top: 147px; }
.classic-menu-art a:nth-child(3) { top: 197px; }
.classic-menu-art a:nth-child(4) { top: 248px; }
.classic-menu-art a:nth-child(5) { top: 299px; }
.classic-menu-art a:hover { background: rgba(255, 255, 255, .12); border-radius: 20px; }
.sidebar-box { border: 1px solid #a6a6a6; margin: 17px 4px 0 5px; padding: 8px; background: #f8f9fa; line-height: 1.45; }
.classic-ad { width: 164px; height: 244px; border: 1px solid #999; margin: 24px 0 0 7px; background: #fafbfc; }
.public-partners { width: 164px; margin: 12px 0 0 7px; padding: 5px; }
.public-partners h3 { text-align: left; }
.sidebar-box h3 { margin: 0 0 6px; font-size: 12px; text-align: center; }
.sidebar-box p { margin: 4px 0; }
.sidebar-box a { display: block; margin: 3px 0; }
.member-side a { border-bottom: 1px solid #ddd; padding: 2px 0; }
.member-side a.active { color: #243b21; font-weight: bold; }
.page-main { width: 589px; min-height: 500px; padding: 2px 6px 18px; line-height: 1.18; }
.page-main p { margin: 7px 2px 10px; }
.page-main h1 { font: bold 12px Arial, sans-serif; margin: 7px 1px 7px; }
.page-main h2 { font: bold 12px Arial, sans-serif; margin: 18px 1px 7px; }
.page-main h3 { font: bold 12px Arial, sans-serif; margin: 10px 1px 5px; }
.page-main ul { margin-top: 7px; margin-bottom: 10px; padding-left: 24px; }
.page-main li { margin: 2px 0; }
.page-main strong { font-weight: bold; }
.page-main .muted { color: #777; }
.page-main .tiny { font-size: 10px; }
.page-main .center { text-align: center; }
.page-main .right { text-align: right; }
.page-main .intro { overflow: hidden; min-height: 210px; }
.welcome-art { float: right; width: 200px; height: 200px; object-fit: contain; margin: 27px 0 7px 13px; }
.intro-links { padding-left: 18px; line-height: 1.6; }
.section-bar { border: 1px solid #888; text-align: center; font-size: 12px; font-weight: bold; background: #f2f4f5; padding: 3px; margin: 12px 0 11px; text-transform: uppercase; }
.news-box { border: 1px solid #aaa; padding: 7px; margin: 10px 0; }
.news-box h3 { margin: 0 0 5px; }
.news-box p { margin: 5px 0; }
.news-meta { font-size: 10px; color: #444; }
.footer { margin: 10px auto; max-width: 775px; text-align: center; font-size: 10px; line-height: 1.5; color: #333; }
.footer a { margin: 0 3px; }

.registration-intro { text-align: justify; margin-left: 0 !important; margin-right: 0 !important; }
.classic-fieldset { border: 1px solid #777; padding: 8px; margin: 11px 11px 10px; }
.classic-fieldset h2 { margin: 0 0 7px; }
.form-row { display: grid; grid-template-columns: 205px minmax(0,266px); align-items: center; margin: 5px 0; gap: 8px; }
.form-row label { text-align: right; }
.form-row input, .form-row select { height: 20px; width: 100%; border: 1px solid #999; background: #fff; padding: 2px 3px; }
.form-row input[type="checkbox"] { width: 13px; height: 13px; vertical-align: middle; padding: 0; }
.form-row textarea { width: 100%; }
.help-note { color: #666; font-size: 10px; text-align: center; }
.race-picks { display: grid; grid-template-columns: 1fr; gap: 3px; margin: 10px 0 10px 210px; }
.race-choice { display: flex; gap: 5px; align-items: flex-start; padding: 2px; cursor: pointer; min-height: 67px; }
.race-choice img { width: 70px; height: 60px; object-fit: contain; }
.race-choice b { display: block; margin-bottom: 3px; }
.race-choice input { margin-top: 25px; }
.classic-button { color: #161616; border: 1px solid #8d8d8d; background: #e9ebeb; padding: 3px 10px; box-shadow: inset 1px 1px #fff; }
.classic-button:hover { background: #f6f7f7; text-decoration: none; }
.classic-button:disabled { opacity: .55; cursor: not-allowed; }
.form-actions { text-align: center; margin: 13px 0; }
.error { color: #a32921; font-weight: bold; }
.success { color: #397046; font-weight: bold; }
.notice { border: 1px solid #b6a36b; background: #fffbe8; padding: 7px; margin: 10px 0; }

.preview-list { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.preview-card { border: 1px solid #ccc; padding: 7px; text-align: center; }
.preview-card img { width: 255px; height: 200px; max-width: 100%; object-fit: contain; }
.preview-card h2 { margin: 2px 0 7px; }
.rules-index { columns: 2; }
.rules-block { padding: 2px 0 8px; border-bottom: 1px solid #e5e5e5; }
.rules-block h2 { margin: 10px 0 5px; }
.faq-item { border-bottom: 1px solid #ddd; padding: 6px 0; }
.faq-item h2 { margin: 4px 0; }
.story-illustration { width: 48%; max-width: 230px; float: right; margin: 2px 0 8px 12px; }

.member-menu { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0 0 9px; padding: 5px; border: 1px solid #aeb2a9; background: #f1f4ef; line-height: 1.5; }
.member-menu a { white-space: nowrap; }
.member-menu a.current { color: #263e21; font-weight: bold; text-decoration: underline; }
.member-title { padding: 5px 7px; border: 1px solid #959b91; background: #e7eee3; color: #1d2b1f; font-weight: bold; font-size: 13px; margin: 7px 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dino-card { display: grid; grid-template-columns: 160px 1fr; gap: 8px; min-height: 194px; }
.dino-art { position: relative; border: 1px solid #ddd; background: #fff; overflow: hidden; }
.dino-art img { width: 100%; height: 100%; object-fit: cover; object-position: left center; image-rendering: auto; }
.dino-art .portrait { width: 90%; height: auto; margin: 30px 8px; image-rendering: pixelated; }
.stone-card { background: #e0e0e0; border-radius: 8px 2px 11px 5px; padding: 8px; line-height: 1.5; color: #333; }
.stone-card dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; margin: 0; }
.stone-card dt { font-weight: bold; }
.stone-card dd { margin: 0; }
.stat-row { display: grid; grid-template-columns: 96px 1fr 55px; gap: 7px; align-items: center; margin: 4px 0; }
.stat-track { height: 7px; background: #f5f5f5; border: 1px solid #aaa; }
.stat-fill { height: 100%; background: #c24240; }
.stat-fill.blue { background: #4c7ca8; }
.stat-fill.green { background: #8ba23a; }
.stat-fill.orange { background: #eaa24d; }
.stat-row strong { font-size: 10px; text-align: right; }
.action-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 10px 0; }
.action-card { border: 1px solid #aaa; padding: 7px; min-height: 74px; background: #fcfcfc; }
.action-card h3 { margin: 0 0 6px; }
.action-card p { margin: 4px 0; }
.link-button { color: #887548; background: none; border: 0; padding: 0; text-align: left; }
.link-button:hover { color: #4a5f36; text-decoration: underline; }
.data-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.data-table th { background: #ebedea; border: 1px solid #aaa; padding: 4px; text-align: left; }
.data-table td { border: 1px solid #ccc; padding: 4px; vertical-align: top; }
.data-table tr:nth-child(even) td { background: #fbfcfa; }
.tab-buttons { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.tab-buttons button { background: #e8ebe8; border: 1px solid #999; padding: 3px 6px; }
.tab-buttons button.selected { background: #cddfc5; font-weight: bold; }
.archive-figure { float: right; width: 255px; margin: 0 0 8px 12px; text-align: center; color: #666; font-size: 10px; }
.archive-figure img { width: 255px; height: 200px; display: block; border: 1px solid #aaa; }
.archive-figure figcaption { margin-top: 3px; }
.terrain { margin: 10px 0; border-bottom: 1px solid #ddd; padding-bottom: 9px; }
.terrain h3 { margin: 0 0 4px; }
.terrain p { margin: 4px 0; }
.inventory-item { display: flex; justify-content: space-between; align-items: center; gap: 5px; padding: 5px 2px; border-bottom: 1px solid #ddd; }
.inventory-item small { color: #666; }
.combat-round { display: flex; gap: 8px; align-items: center; margin: 7px 0; }
.combat-round label { width: 60px; }
.combat-round select { width: 145px; }
.journal { background: #fafbf9; border: 1px solid #bbb; padding: 6px 9px; margin: 8px 0; }
.journal p { margin: 4px 0; }
.mini-src { font-size: 10px; color: #777; border-top: 1px dotted #bbb; margin-top: 16px; padding-top: 5px; }
.demo-control { font-size: 11px; border: 1px solid #c5c5c5; padding: 6px; margin: 8px 0; background: #fafafa; }

/* Les dessins de 300 px remplacent la capture miniature employée initialement. */
.dino-card { grid-template-columns: 300px minmax(0,1fr); gap: 10px; align-items: center; min-height: 220px; }
.dino-art { border: 0; overflow: visible; }
.dino-art img { display: block; width: 300px; height: auto; object-fit: contain; }
.stone-card { background: #92928f; color: #fff; border-radius: 0; padding: 16px 10px 14px; clip-path: polygon(0 4%,4% 0,8% 4%,13% 1%,18% 4%,24% 1%,30% 4%,37% 0,43% 3%,50% 1%,57% 4%,64% 0,70% 4%,78% 1%,86% 4%,94% 0,100% 4%,98% 95%,94% 98%,87% 95%,80% 100%,72% 96%,63% 100%,56% 96%,47% 99%,40% 96%,32% 100%,25% 96%,17% 99%,10% 96%,3% 99%,0 95%); font: 11px/1.35 Arial,sans-serif; }
.stone-card dl { grid-template-columns: 43px minmax(0,1fr); gap: 4px; }
.stone-card dd { overflow-wrap: anywhere; }
.emerald-balance { text-align: right; color: #e5ffe7; font-size: 13px; }
.member-title { border-color: #999; background: #eee; color: #111; font-size: 12px; }
.member-menu { background: #f3f3f3; border-color: #aaa; }
.stat-row { grid-template-columns: 85px minmax(0,1fr) 90px; }
meter.stat-track { width: 100%; height: 9px; border: 1px solid #999; background: #eee; border-radius: 0; }
meter::-webkit-meter-bar { height: 7px; border: 0; border-radius: 0; background: #eee; }
meter::-webkit-meter-optimum-value { background: #ce3e50; }
meter.blue::-webkit-meter-optimum-value { background: #4c7ca8; }
meter.green::-webkit-meter-optimum-value { background: #7d9b32; }
meter.orange::-webkit-meter-optimum-value { background: #df9a4f; }
.source-details { margin: 16px 0 5px; border-top: 1px dotted #bbb; padding-top: 5px; color: #666; font-size: 10px; }
summary { cursor: pointer; }
summary:hover { color: #887548; }
.source-details p { line-height: 1.45; }
.progress-details { border: 1px solid #bbb; padding: 8px; margin: 14px 0; }
.requirements { list-style: none; columns: 2; padding-left: 0 !important; }
.requirements li { padding: 3px 0; }
.requirements .done { color: #457037; }
.local-tools { width: 100%; margin-top: 24px; padding: 8px; border: 1px dotted #aaa; font-size: 11px; color: #555; clear: both; }
.local-tools p { line-height: 1.6; }
.import-label { display: inline-block; cursor: pointer; }
.import-label input { display: block; max-width: 195px; margin-top: 4px; }
.terrain { padding: 8px; background: #fafafa; border: 1px solid #ccc; }
.terrain h2 { margin: 0 0 8px; }
.terrain.locked { opacity: .6; }
.item-actions { text-align: right; display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.inventory-item { padding: 8px 2px; }
.inventory-item>span:first-child { min-width: 160px; }
.craft-box,.quest-item,.auction-card,.casino-card { border: 1px solid #aaa; padding: 12px; margin: 12px 0; }
.craft-box h2,.quest-item h2,.auction-card h2,.casino-card h2 { margin: 0 0 8px; }
.quest-item details { padding: 5px 0; }
.buy-form { display: flex; gap: 4px; }
.buy-form input { width: 40px; min-width: 0; padding: 2px; }
.shop-table td { vertical-align: middle; }
.shop-table td:first-child { width: 34%; }
.rival-list { display: flex; flex-wrap: wrap; gap: 4px; }
.fighters { display: flex; justify-content: space-between; align-items: center; min-height: 175px; gap:6px; }
.fighters .dino-illustration { flex:1; min-width:0; }
.fighters .dino-illustration img { max-width:100%; }
.fighters img { width: 220px; height: 160px; object-fit: contain; }
.combat-round>b:first-child { width: 60px; }
.combat-round>b { width: 145px; }
.scratch-ticket { display: flex; gap: 5px; margin: 12px 0; }
.scratch-ticket span { display: grid; place-items: center; width: 65px; height: 54px; background: #eee; border: 2px ridge #aaa; font: bold 19px Georgia,serif; color: #61724b; }
.event-row { border-bottom: 1px solid #ddd; padding: 8px 2px; }
.event-row time { color: #777; font-size: 10px; }
.event-row p { margin-bottom: 0; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline: 2px solid #7d5c15; outline-offset: 2px; }
input:invalid:not(:placeholder-shown) { box-shadow: none; }

.test-tools { position:fixed; right:14px; bottom:14px; z-index:100; font:12px Arial,sans-serif; color:#4c482e; }
.test-tools>summary { cursor:pointer; padding:8px 14px; border:1px solid #aaa68e; border-radius:5px; background:#f3f0e3; box-shadow:0 1px 4px #0002; }
.test-tools[open]>summary { background:#e3dfcb; }
.test-tools>section { position:absolute; bottom:44px; right:0; width:260px; max-width:calc(100vw - 28px); max-height:calc(100vh - 90px); overflow:auto; box-sizing:border-box; padding:14px; background:#faf8ee; border:1px solid #aaa68e; border-radius:6px; box-shadow:0 3px 14px #0003; }
.test-tools h2 { margin:0 0 10px; font-size:15px; }
.test-tools p { margin:8px 0; line-height:1.45; }
.test-tools .classic-button { display:block; width:100%; margin:7px 0; }
.test-tools .test-tools-hint { font-size:11px; color:#706d5d; }
.test-tools-feedback .success { color:#365b26; }
.test-tools-feedback .error { color:#9c3024; }

@media (max-width: 820px) {
  .reconstruction-note { width: 775px; margin-left: 6px; }
  .dg-site { margin-left: 6px; margin-right: 0; }
  .footer { width: 775px; margin-left: 6px; }
  body { overflow-x: auto; }
}